/* ============================================
   Currency Converter — final desktop layout
   ============================================ */

/* ----- Card ----- */
.fx-card{
  position:relative;
  z-index:2;                   /* above decorative shapes */
  width:100%;
  background:linear-gradient(140deg,#faf6ff,#fff);
  border:1px solid rgba(172,78,198,.15);
  border-radius:20px;
  padding:24px;
  box-shadow:0 20px 40px rgba(172,78,198,.15);
  overflow:hidden;
}
.fx-card::before,
.fx-card::after{
  content:"";
  position:absolute;
  width:280px;height:280px;border-radius:50%;
  filter:blur(40px);opacity:.35;z-index:0;
}
.fx-card::before{ right:-80px; top:-60px; background:radial-gradient(closest-side,#d88ef0,transparent); }
.fx-card::after{ left:-80px; bottom:-80px; background:radial-gradient(closest-side,#b0d8ff,transparent); }

/* ----- Header (title + pill) ----- */
.fx-card__header{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px;
}
.fx-card__title{ font-weight:700; letter-spacing:.2px; display:flex; align-items:center; gap:10px; }
.fx-dot{
  width:10px;height:10px;border-radius:50%;
  background:#AC4EC6; display:inline-block; box-shadow:0 0 0 6px rgba(172,78,198,.12);
}
.fx-rate{
  font-weight:600; font-size:14px; color:#5a2f6a;
  background:#fff; border:1px solid rgba(172,78,198,.2);
  padding:6px 10px; border-radius:10px;
}

/* ----- Inputs block ----- */
.fx-inputs{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:12px; align-items:end; margin-top:10px;
}
.fx-label{ grid-column:span 3; font-size:12px; text-transform:uppercase; letter-spacing:.12em; opacity:.65; margin-top:6px; }

.fx-field{
  display:flex; gap:10px; align-items:center;
  background:#fff; border:1px solid rgba(172,78,198,.18);
  border-radius:14px; padding:10px 12px;
}
.fx-field input{
  border:none; outline:none; background:transparent;
  width:100%; font-size:18px; font-weight:600;
}

.fx-ccy{
  display:flex; align-items:center; gap:8px;
  border:none; background:#f7f0fb; color:#5a2f6a;
  padding:8px 10px; border-radius:10px; font-weight:700;
  cursor:default;
}

.fx-swap{
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(172,78,198,.25); background:#fff; cursor:pointer;
  display:grid;place-items:center; font-size:18px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.fx-swap:hover{ transform:rotate(90deg); box-shadow:0 8px 22px rgba(172,78,198,.15); }

/* ----- Meta (small text row) ----- */
.fx-meta{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-size:12px; color:#5f5f5f; margin-top:14px;
}
.dot-sep::before{
  content:""; display:inline-block; width:4px;height:4px;border-radius:50%;
  background:#bbb; margin-right:6px; vertical-align:middle;
}

/* ----- Flags ----- */
.fx-flag{ width:22px;height:14px; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.05) inset; }
.fx-flag-jp{ background:radial-gradient(circle at 50% 50%, #bc002d 45%, transparent 46%), #fff; }
/* ✅ Real Sri Lanka flag */
.fx-flag-lk{
  background: url("https://upload.wikimedia.org/wikipedia/commons/1/11/Flag_of_Sri_Lanka.svg")
              center/cover no-repeat !important;
}

/* =========================
   Desktop layout (inputs at top-right + summary at left)
   ========================= */
@media (min-width: 992px) {
  /* Grid inside the card:
     left = 240px (title + summary), right = flexible (form),
     footer row spans both columns for the meta line. */
  .fx-card{
    display:grid;
    grid-template-columns: 240px minmax(560px, 1fr);
    grid-template-rows: auto 1fr auto;  /* header, form, footer */
    grid-column-gap: 28px;
    grid-template-areas:
      "header form"
      "summary form"
      "footer  footer";
    align-items:start;
  }

  .fx-card__header{
    grid-area: header;
    position: static;     /* make card the abs parent for the rate pill */
    margin-bottom:0;
  }

  /* 🔹 summary fills the previously empty left space */
  .fx-summary{
    grid-area: summary;
    align-self:start;
    background:#fff;
    border:1px solid rgba(172,78,198,.18);
    border-radius:16px;
    padding:16px 18px;
    box-shadow:0 10px 24px rgba(172,78,198,.10);
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height: 200px;   /* feel free to tweak */
  }
  .fx-summary__line{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:16px;
  }
  .fx-summary__line strong{
    font-size:20px;
    font-weight:800;
    letter-spacing:.2px;
  }
  .fx-summary__muted{
    margin-top:auto;
    font-size:12px;
    color:#666;
    opacity:.9;
  }

  .fx-inputs{
    grid-area: form;
    align-self:start;
    grid-template-columns: 1fr auto 1fr;
  }
  .fx-meta{
    grid-area: footer;
    margin-top:16px;
  }

  /* Rate pill pinned to the card’s top-right */
  .fx-card .fx-rate{
    position:absolute;
    top:16px;
    right:16px;
    z-index:3;
    white-space:nowrap;
  }
  
  
  /* =========================
   Dark theme variant for the converter card
   ========================= */
.fx-card.fx-dark{
  /* theme tokens */
  --fx-bg:    #271524;
  --fx-panel: #1b2030;
  --fx-elev:  #7edd11;
  --fx-accent:#AC4EC6;
  --fx-text:  #e8ecf5;
  --fx-sub:   #9aa3b2;
  --fx-border:rgba(255,255,255,.08);

  background: linear-gradient(160deg, #151827, #0f1220);
  border: 1px solid var(--fx-border);
  color: var(--fx-text);
  box-shadow: 0 30px 60px rgba(10,12,22,.6);
}
.fx-card.fx-dark::before,
.fx-card.fx-dark::after{
  filter: blur(60px);
  opacity: .28;
}
.fx-card.fx-dark::before{
  background: radial-gradient(closest-side, rgba(172,78,198,.35), transparent);
}
.fx-card.fx-dark::after{
  background: radial-gradient(closest-side, rgba(96,165,250,.35), transparent);
}

.fx-card.fx-dark .fx-card__title{ color: var(--fx-text); }
.fx-card.fx-dark .fx-dot{
  background: var(--fx-accent);
  box-shadow: 0 0 0 6px rgba(172,78,198,.18);
}

/* Rate pill */
.fx-card.fx-dark .fx-rate{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--fx-border);
  color: #d9def0;
}

/* Labels, meta */
.fx-card.fx-dark .fx-label{ color: var(--fx-sub); }
.fx-card.fx-dark .fx-meta{ color: var(--fx-sub); }
.fx-card.fx-dark .dot-sep::before{ background: #5a6478; }

/* Inputs / fields */
.fx-card.fx-dark .fx-field{
  background: var(--fx-panel);
  border: 1px solid var(--fx-border);
}
.fx-card.fx-dark .fx-field input{
  color: var(--fx-text);
}
.fx-card.fx-dark .fx-field input::placeholder{
  color: #93a0b5; opacity: .75;
}
.fx-card.fx-dark .fx-field:focus-within{
  box-shadow: 0 0 0 2px rgba(172,78,198,.40);
}

/* Currency chips & swap */
.fx-card.fx-dark .fx-ccy{
  background: #2a3145;
  color: var(--fx-text);
}
.fx-card.fx-dark .fx-ccy strong{ color: var(--fx-text); }

.fx-card.fx-dark .fx-swap{
  background: var(--fx-panel);
  border: 1px solid var(--fx-border);
  color: var(--fx-text);
}
.fx-card.fx-dark .fx-swap:hover{
  box-shadow: 0 10px 24px rgba(172,78,198,.25);
}
.fx-card.fx-dark .fx-swap:focus-visible{
  outline: 2px solid rgba(172,78,198,.6);
  outline-offset: 2px;
}

/* Summary panel (desktop) */
.fx-card.fx-dark .fx-summary{
  background: var(--fx-panel);
  border: 1px solid var(--fx-border);
  color: var(--fx-text);
}

}

/* Mobile (single column) */
@media (max-width: 991.98px){
  .fx-card{
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  /* Show the summary (stacked) */
  .fx-summary{
    display:block !important;
    order:3;
    margin-top:8px;
    background:#fff;
    border:1px solid rgba(172,78,198,.18);
    border-radius:14px;
    padding:14px 16px;
    box-shadow:0 6px 18px rgba(172,78,198,.10);
  }
  .fx-summary__line{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
    margin-bottom:6px;
  }
  .fx-summary__line strong{
    font-size:18px;
    font-weight:700;
  }
  .fx-summary__muted{
    margin-top:8px;
    font-size:12px;
    color:#666;
  }

  /* Inputs stacked one column */
  .fx-inputs{
    display:grid;
    grid-template-columns: 1fr;
    gap:12px;
  }
}

/* Desktop (summary on the left, inputs on the right) */
@media (min-width: 992px){
  .fx-card{
    display:grid;
    grid-template-columns: 240px minmax(560px,1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header form"
      "summary form"
      "footer  footer";
    column-gap: 28px;
  }
  .fx-card__header{ grid-area: header; }
  .fx-summary{ grid-area: summary; }
  .fx-inputs{ grid-area: form; }
  .fx-meta{ grid-area: footer; }
}