/* Page-specific styles lifted from the static forex-rates.html.
   These lived in a <style> block in <head>. The first port only
   extracted the page BODY, so this CSS was dropped entirely and
   the page rendered unstyled. Enqueued for this template only. */

/* Forex Rates — bespoke rate converter and rate cards only.
   Page chrome (nav, footer, buttons, hero, type, brand tokens) now comes from the
   shared sheets, so this page cannot drift from the others. It previously carried
   a full duplicate of all of that inline. */
.eyebrow .dot { width:8px; height:8px; border-radius:50%; background:var(--green);
    box-shadow:0 0 10px var(--green); animation:pulse 1.5s ease-in-out infinite; }

  @keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(1.3);} }

  h1.fx-h { font-size:clamp(38px,6vw,68px); font-weight:700; line-height:1.08;
    letter-spacing:-0.035em; color:white; margin-bottom:16px; text-wrap:balance; }

  h1.fx-h .accent { background:none;  
    color:var(--nc-magenta,#F64477); font-style:normal; line-height:1.18; padding-bottom:0.16em; display:inline-block; }

  .fx-sub { font-size:17px; color:var(--ink-soft); max-width:540px; margin:0 auto 8px; line-height:1.6; }

  .fx-updated { font-size:12px; color:var(--ink-soft); letter-spacing:0.04em; }

  .fx-updated b { color:var(--green); }


  /* Converter */
  .converter {
    max-width:720px; margin:48px auto 0;
    background:rgba(40,18,58,0.7); border:1px solid rgba(255,255,255,0.1);
    border-radius:24px; -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); padding:32px;
    box-shadow:0 40px 80px rgba(0,0,0,0.5);
    display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:end;
  }

  .cv-field label { display:block; font-size:11px; font-weight:700; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; }

  .cv-input { display:flex; align-items:center; gap:10px; background:rgba(0,0,0,0.3);
    border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:14px 16px; }

  .cv-input input { flex:1; background:none; border:none; outline:none; color:white;
    font-size:22px; font-weight:700; font-family:inherit; width:100%; }

  .cv-input select { background:var(--bg-2); border:1px solid var(--line); border-radius:8px;
    color:white; font-family:inherit; font-size:14px; font-weight:600; padding:6px 8px; outline:none; }

  /* Solid brand fill — same stripped-element-fill problem as .route .icn. */
  .cv-swap { width:44px; height:44px; border-radius:50%; background:#8D2341; color:white;
    display:flex; align-items:center; justify-content:center; margin-bottom:6px;
    box-shadow:0 8px 20px rgba(246,68,119,0.35); }

  .cv-swap svg { width:18px; height:18px; }

  .cv-result { font-size:22px; font-weight:700; color:var(--orange); }

  .cv-rate-note { grid-column:1/-1; text-align:center; font-size:12px; color:var(--ink-soft);
    padding-top:6px; letter-spacing:0.04em; }

  .cv-rate-note b { color:white; }


  /* Rates table */
  .rates { max-width:900px; margin:60px auto 100px; }

  .rates-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }

  .rates-head h2 { font-size:22px; font-weight:700; color:white; letter-spacing:-0.02em; }

  .rates-head .live { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--ink-soft);
    letter-spacing:0.16em; text-transform:uppercase; font-weight:700; }

  .rates-head .live .dot { width:8px; height:8px; border-radius:50%; background:var(--green);
    box-shadow:0 0 8px var(--green); animation:pulse 1.6s ease-in-out infinite; }

  .rate-card {
    display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:20px;
    padding:18px 24px; background:rgba(255,255,255,0.03); border:1px solid var(--line);
    border-radius:16px; margin-bottom:10px; transition:border-color .25s, transform .25s; }

  .rate-card:hover { border-color:var(--purple-light); transform:translateX(4px); }

  .rate-card .flag { width:42px; height:30px; border-radius:6px; overflow:hidden; flex-shrink:0;
    box-shadow:0 4px 10px rgba(0,0,0,0.4); }

  .rate-card .pair-name { }

  .rate-card .pair { font-size:16px; font-weight:700; color:white; letter-spacing:0.04em; }

  .rate-card .country { font-size:12px; color:var(--ink-soft); margin-top:3px; }

  .rate-card .rate { font-size:22px; font-weight:700; color:white; font-variant-numeric:tabular-nums;
    text-align:right; min-width:110px; transition:color .3s; }

  .rate-card .rate .unit { font-size:11px; color:var(--ink-soft); font-weight:500; margin-left:4px; }

  .rate-card .chg { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
    min-width:80px; text-align:right; display:flex; align-items:center; justify-content:flex-end; gap:5px; }

  .rate-card .chg.up { color:var(--green); }

  .rate-card .chg.down { color:var(--red); }

  .rate-card .chg svg { width:12px; height:12px; }
@media (max-width:680px){
    .converter { grid-template-columns:1fr; }
    .cv-swap { margin:0 auto; transform:rotate(90deg); }
    .rate-card { grid-template-columns:auto 1fr auto; }
    .rate-card .chg { display:none; }}