/* ============================================
   Currency Converter — Clean Layout
   ============================================ */

/* ----- Card ----- */
.fx-card{
  position:relative;
  z-index:2;
  width:100%;
  background:linear-gradient(140deg,#03034c,#38387a);
  border:1px solid rgba(172,78,198,.15);
  border-radius:20px;
  padding:24px;
  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;
  color: #ffffff;
}
.fx-dot{
  width:10px;height:10px;border-radius:50%;
  background:#ffae00; display:inline-block; box-shadow:0 0 0 6px rgb(255, 255, 255);
}
.fx-rate{
  font-weight:600; font-size:14px; color:#ffffff;
  background:#0a1230; border:1px solid rgb(255, 255, 255);
  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:#2d3966; 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;
  color: #ffae00 !important;
}
.fx-field input::placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}

.fx-ccy{
  display:flex; align-items:center; gap:8px;
  border:none; background:#0a1230; color:#ffffff;
  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:#ffffff; 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; }
.fx-flag-np{
  background: url("https://upload.wikimedia.org/wikipedia/commons/9/9b/Flag_of_Nepal.svg")
              center/cover no-repeat !important;
}

/* ----- Summary Panel ----- */
.fx-summary{
  background:#0a1230;
  border:1px solid rgba(172,78,198,.18);
  border-radius:14px;
  padding:14px 16px;
}
.fx-summary__line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  margin-bottom:6px;
}
.fx-summary__line span {
  color: #ffffff;
  opacity: 1;
}
.fx-summary__line strong{
  font-size:18px;
  font-weight:700;
  color: #ffae00;
}
.fx-summary__muted{
  margin-top:8px;
  font-size:12px;
  color:#ffffff;
  opacity: .9;
}

/* =========================
   MOBILE LAYOUT (default)
   ========================= */
@media (max-width: 991.98px){
  .fx-card {
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  
  /* Remove blur effects on mobile */
  .fx-card::before,
  .fx-card::after {
    display: none;
  }
  
  .fx-summary{
    order:3;
    margin-top:8px;
  }
  
  .fx-inputs{
    display:grid;
    grid-template-columns: 1fr;
    gap:12px;
  }
}

/* =========================
   DESKTOP LAYOUT
   ========================= */
@media (min-width: 992px) {
  .fx-card{
    display:grid;
    grid-template-columns: 240px minmax(560px, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-column-gap: 28px;
    grid-template-areas:
      "header form"
      "summary form"
      "footer  footer";
    align-items:start;
    box-shadow:0 20px 40px rgba(172,78,198,.15);
  }

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

  .fx-summary{
    grid-area: summary;
    align-self:start;
    background:#fff;
    border:1px solid rgb(255, 255, 255);
    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;
  }
  .fx-summary__line{
    font-size:16px;
  }
  .fx-summary__line strong{
    font-size:20px;
    font-weight:800;
    letter-spacing:.2px;
  }
  .fx-summary__muted{
    margin-top:auto;
  }

  .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 card's top-right */
  .fx-card .fx-rate{
    position:absolute;
    top:24px;
    right:24px;
    z-index:3;
    white-space:nowrap;
  }
}

/* =========================
   DARK THEME VARIANT
   ========================= */
.fx-card.fx-dark{
  --fx-bg:    #271524;
  --fx-panel: #0a1230;
  --fx-elev:  #dd11dd;
  --fx-accent:#ffae00;
  --fx-text:  #e8ecf5;
  --fx-sub:   #ffae00;
  --fx-border:rgb(252, 252, 252);

  background: linear-gradient(160deg, #192149, #021152);
  border: 1px solid var(--fx-border);
  color: var(--fx-text);
}
.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, #ffd780, 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);
}
.fx-card.fx-dark .fx-rate{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--fx-border);
  color: #d9def0;
}
.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: #2bff00; }
.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: #ffffff; opacity: .75;
}
.fx-card.fx-dark .fx-field:focus-within{
  box-shadow: 0 0 0 2px rgba(172,78,198,.40);
}
.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;
}

@media (min-width: 992px) {
  .fx-card.fx-dark .fx-summary{
    background: var(--fx-panel);
    border: 1px solid var(--fx-border);
    color: var(--fx-text);
  }
  
  /* Dark theme shadow only on desktop */
  .fx-card.fx-dark{
    box-shadow: 0 30px 60px rgba(10,12,22,.6);
  }
}