/* ==========================================================================
   Global Market Prices — Currency Converter widget
   Themes: auto | dark | light | glass
   ========================================================================== */

/* ── CSS custom properties ───────────────────────────────────────────────── */
:root {
  --daaz-conv-bg:             #ffffff;
  --daaz-conv-bg-panel:       #f8fafc;
  --daaz-conv-bg-input:       #ffffff;
  --daaz-conv-text:           #1e293b;
  --daaz-conv-text-muted:     #64748b;
  --daaz-conv-border:         #e2e8f0;
  --daaz-conv-accent:         #6366f1;
  --daaz-conv-accent-hover:   #4f46e5;
  --daaz-conv-radius:         12px;
  --daaz-conv-radius-sm:      8px;
  --daaz-conv-shadow:         0 2px 16px rgba(0,0,0,.07);
  --daaz-conv-transition:     .2s ease;
}

/* ── Base widget ─────────────────────────────────────────────────────────── */
.daaz-gmp-converter {
  display:        flex;
  flex-direction: column;
  gap:            0;
  background:     var(--daaz-conv-bg);
  border:         1px solid var(--daaz-conv-border);
  border-radius:  var(--daaz-conv-radius);
  box-shadow:     var(--daaz-conv-shadow);
  padding:        24px;
  max-width:      680px;
  width:          100%;
  box-sizing:     border-box;
  font-family:    inherit;
}

/* ── Title ───────────────────────────────────────────────────────────────── */
.daaz-gmp-conv-title {
  font-size:     1.05rem;
  font-weight:   700;
  color:         var(--daaz-conv-text);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--daaz-conv-border);
}

/* ── Body row (amount · from · swap · to · button) ──────────────────────── */
.daaz-gmp-conv-body {
  display:        flex;
  flex-wrap:      wrap;
  align-items:    flex-end;
  gap:            10px;
}

.daaz-gmp-conv-field {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  flex:           1 1 130px;
  min-width:      0;
}

.daaz-gmp-conv-amount-field {
  flex:           0 1 130px;
}

.daaz-gmp-conv-label {
  font-size:      .72rem;
  font-weight:    600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color:          var(--daaz-conv-text-muted);
}

.daaz-gmp-conv-input,
.daaz-gmp-conv-select {
  height:          42px;
  padding:         0 12px;
  background:      var(--daaz-conv-bg-input);
  border:          1.5px solid var(--daaz-conv-border);
  border-radius:   var(--daaz-conv-radius-sm);
  color:           var(--daaz-conv-text);
  font-size:       .95rem;
  width:           100%;
  box-sizing:      border-box;
  outline:         none;
  transition:      border-color var(--daaz-conv-transition),
                   box-shadow   var(--daaz-conv-transition);
  /* Remove browser number input arrows */
  -moz-appearance: textfield;
}

.daaz-gmp-conv-input::-webkit-outer-spin-button,
.daaz-gmp-conv-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.daaz-gmp-conv-input:focus,
.daaz-gmp-conv-select:focus {
  border-color: var(--daaz-conv-accent);
  box-shadow:   0 0 0 3px rgba(99,102,241,.15);
}

.daaz-gmp-conv-select { cursor: pointer; }

/* ── Swap button ─────────────────────────────────────────────────────────── */
.daaz-gmp-conv-swap {
  height:        42px;
  width:         42px;
  min-width:     42px;
  border:        1.5px solid var(--daaz-conv-border);
  border-radius: 50%;
  background:    var(--daaz-conv-bg-input);
  color:         var(--daaz-conv-text-muted);
  font-size:     1.2rem;
  cursor:        pointer;
  transition:    background var(--daaz-conv-transition),
                 color      var(--daaz-conv-transition),
                 transform  var(--daaz-conv-transition),
                 border-color var(--daaz-conv-transition);
  flex-shrink:   0;
  align-self:    flex-end;
  line-height:   1;
  padding:       0;
  display:       flex;
  align-items:   center;
  justify-content: center;
}

.daaz-gmp-conv-swap:hover {
  background:    var(--daaz-conv-accent);
  border-color:  var(--daaz-conv-accent);
  color:         #ffffff;
  transform:     rotate(180deg);
}

/* ── Convert button ──────────────────────────────────────────────────────── */
.daaz-gmp-conv-btn {
  height:        42px;
  padding:       0 22px;
  background:    var(--daaz-conv-accent);
  color:         #ffffff;
  border:        none;
  border-radius: var(--daaz-conv-radius-sm);
  font-weight:   700;
  font-size:     .9rem;
  cursor:        pointer;
  white-space:   nowrap;
  align-self:    flex-end;
  transition:    background var(--daaz-conv-transition),
                 transform  var(--daaz-conv-transition);
}

.daaz-gmp-conv-btn:hover  { background: var(--daaz-conv-accent-hover); transform: translateY(-1px); }
.daaz-gmp-conv-btn:active { transform: translateY(0); }

.daaz-gmp-conv-btn.daaz-gmp-conv-loading {
  opacity:  .7;
  pointer-events: none;
}

/* ── Result panel ────────────────────────────────────────────────────────── */
.daaz-gmp-conv-result-panel {
  margin-top:    20px;
  background:    var(--daaz-conv-bg-panel);
  border:        1px solid var(--daaz-conv-border);
  border-radius: var(--daaz-conv-radius-sm);
  padding:       16px 20px;
  transition:    opacity var(--daaz-conv-transition);
}

.daaz-gmp-conv-result-panel.daaz-gmp-conv-updating {
  opacity: .45;
}

.daaz-gmp-conv-result-main {
  display:     flex;
  align-items: baseline;
  flex-wrap:   wrap;
  gap:         8px;
  font-size:   1.55rem;
  font-weight: 700;
  color:       var(--daaz-conv-text);
  line-height: 1.2;
}

.daaz-gmp-conv-result-from { color: var(--daaz-conv-text-muted); font-weight: 400; font-size: 1.1rem; }
.daaz-gmp-conv-result-eq   { color: var(--daaz-conv-text-muted); font-weight: 300; font-size: 1.3rem; }
.daaz-gmp-conv-result-to   { color: var(--daaz-conv-accent); }

/* Flash animation on new result */
@keyframes daaz-gmp-conv-flash {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

.daaz-gmp-conv-result-to.daaz-gmp-flashed {
  animation: daaz-gmp-conv-flash .35s ease forwards;
}

/* ── Meta row (rate + inverse + timestamp) ───────────────────────────────── */
.daaz-gmp-conv-meta {
  display:        flex;
  flex-wrap:      wrap;
  gap:            6px 18px;
  margin-top:     10px;
  padding-top:    10px;
  border-top:     1px solid var(--daaz-conv-border);
  font-size:      .8rem;
  color:          var(--daaz-conv-text-muted);
}

.daaz-gmp-conv-rate-line    { font-weight: 600; }
.daaz-gmp-conv-rate-inverse { opacity: .75; }
.daaz-gmp-conv-timestamp    { margin-left: auto; opacity: .65; font-size: .75rem; }

.daaz-gmp-conv-error { color: #ef4444; font-size: .9rem; font-weight: 500; }

/* ── Theme: Dark ─────────────────────────────────────────────────────────── */
.daaz-gmp-converter--dark,
[data-gmp-theme="dark"] .daaz-gmp-converter--auto,
.gmp-dark .daaz-gmp-converter--auto {
  --daaz-conv-bg:         #0f172a;
  --daaz-conv-bg-panel:   #1e293b;
  --daaz-conv-bg-input:   #1e293b;
  --daaz-conv-text:       #f1f5f9;
  --daaz-conv-text-muted: #94a3b8;
  --daaz-conv-border:     #334155;
  --daaz-conv-shadow:     0 2px 20px rgba(0,0,0,.4);
}

@media (prefers-color-scheme: dark) {
  .daaz-gmp-converter--auto {
    --daaz-conv-bg:         #0f172a;
    --daaz-conv-bg-panel:   #1e293b;
    --daaz-conv-bg-input:   #1e293b;
    --daaz-conv-text:       #f1f5f9;
    --daaz-conv-text-muted: #94a3b8;
    --daaz-conv-border:     #334155;
    --daaz-conv-shadow:     0 2px 20px rgba(0,0,0,.4);
  }
}

/* ── Theme: Light (explicit) ─────────────────────────────────────────────── */
.daaz-gmp-converter--light {
  --daaz-conv-bg:         #ffffff;
  --daaz-conv-bg-panel:   #f1f5f9;
  --daaz-conv-bg-input:   #ffffff;
  --daaz-conv-text:       #1e293b;
  --daaz-conv-text-muted: #64748b;
  --daaz-conv-border:     #cbd5e1;
  --daaz-conv-shadow:     0 2px 12px rgba(0,0,0,.06);
}

/* ── Theme: Glass ────────────────────────────────────────────────────────── */
.daaz-gmp-converter--glass {
  background:          rgba(255,255,255,.12);
  backdrop-filter:     blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border:              1px solid rgba(255,255,255,.25);
  --daaz-conv-bg:         transparent;
  --daaz-conv-bg-panel:   rgba(255,255,255,.08);
  --daaz-conv-bg-input:   rgba(255,255,255,.12);
  --daaz-conv-text:       #ffffff;
  --daaz-conv-text-muted: rgba(255,255,255,.65);
  --daaz-conv-border:     rgba(255,255,255,.2);
  --daaz-conv-shadow:     0 4px 30px rgba(0,0,0,.2);
}

/* ── Compact mode ────────────────────────────────────────────────────────── */
.daaz-gmp-converter--compact {
  padding: 14px 16px;
}

.daaz-gmp-converter--compact .daaz-gmp-conv-body {
  flex-wrap: nowrap;
  gap:       6px;
}

.daaz-gmp-converter--compact .daaz-gmp-conv-label {
  display: none;
}

.daaz-gmp-converter--compact .daaz-gmp-conv-result-panel {
  margin-top: 12px;
  padding:    10px 14px;
}

.daaz-gmp-converter--compact .daaz-gmp-conv-result-main {
  font-size: 1.2rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .daaz-gmp-converter {
    padding: 16px;
  }

  .daaz-gmp-conv-body {
    flex-direction: column;
    align-items:    stretch;
  }

  .daaz-gmp-conv-amount-field,
  .daaz-gmp-conv-field { flex: 1 1 100%; }

  .daaz-gmp-conv-swap {
    align-self:     center;
    transform:      rotate(90deg);
  }

  .daaz-gmp-conv-swap:hover { transform: rotate(90deg) rotate(180deg); }

  .daaz-gmp-conv-btn {
    width: 100%;
    justify-content: center;
  }

  .daaz-gmp-conv-result-main { font-size: 1.25rem; }

  .daaz-gmp-conv-timestamp { margin-left: 0; }
}

/* ── Accessibility ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .daaz-gmp-conv-swap,
  .daaz-gmp-conv-btn,
  .daaz-gmp-conv-result-to,
  .daaz-gmp-conv-result-panel {
    transition: none;
    animation:  none;
  }
}