/* Extra styles for the tools.satmeter.io sub-site. Layers on top of site.css,
   reuses the same design tokens (--blue, --orange, --surface, etc.) so the
   two sites feel like one family. © Satmeter. */

/* =========================================================================
   VROLIJKE KLEUREN — social-media-geïnspireerd (Instagram / TikTok / Facebook)
   Overschrijft alleen de accentkleuren uit site.css, de layout blijft gelijk.
   ========================================================================= */
:root{
  --ig-purple:#8134f0; --ig-magenta:#e0289d; --ig-pink:#fd3a84; --ig-orange:#ff8a3d;
  --tt-cyan:#25f4ee; --tt-pink:#fe2c55;
  --fb-blue:#0866ff;
  --rainbow:linear-gradient(115deg,var(--fb-blue) 0%,var(--ig-purple) 28%,var(--ig-magenta) 52%,var(--ig-pink) 70%,var(--ig-orange) 100%);

  --blue:var(--fb-blue); --blue-deep:#0552d6; --blue-soft:#e8f0ff;
  --purple:var(--ig-purple);
  --pink:var(--ig-pink);
  --orange:#ff9a3d; --orange-deep:#ec6a12; --orange-soft:#fff2e2;
  --green:#00c281; --green-soft:#dffaf0;
}
html[data-theme="dark"]{
  --blue:#4d8bff; --blue-deep:#7ba6ff; --blue-soft:#182645;
  --purple:#a56bff; --pink:#ff6ba8; --orange:#ffab5c; --orange-deep:#ffb877; --orange-soft:#3a2510;
  --green:#38e0a4; --green-soft:#0f3227;
}
body{
  background-image:
    radial-gradient(ellipse 60% 40% at 8% -8%, rgba(8,102,255,.16) 0%, transparent 60%),
    radial-gradient(ellipse 55% 40% at 100% 0%, rgba(253,58,132,.16) 0%, transparent 58%),
    radial-gradient(ellipse 60% 45% at 50% 105%, rgba(255,138,61,.14) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 95% 90%, rgba(129,52,240,.13) 0%, transparent 55%);
}
html[data-theme="dark"] body{
  background-image:
    radial-gradient(ellipse 60% 40% at 8% -8%, rgba(77,139,255,.14) 0%, transparent 60%),
    radial-gradient(ellipse 55% 40% at 100% 0%, rgba(255,107,168,.14) 0%, transparent 58%),
    radial-gradient(ellipse 60% 45% at 50% 105%, rgba(255,171,92,.12) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 95% 90%, rgba(165,107,255,.12) 0%, transparent 55%);
}
h1 .gradient-text{background:var(--rainbow);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--blue)}
.kicker{background:var(--rainbow);color:#fff;box-shadow:0 3px 10px rgba(224,40,157,.28)}
.brand .bm-meter{background:var(--rainbow);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.cta{background:var(--rainbow);box-shadow:0 4px 16px rgba(224,40,157,.32);border:none}
.cta:hover{filter:brightness(1.08) saturate(1.15);transform:translateY(-2px) scale(1.01);box-shadow:0 8px 22px rgba(224,40,157,.4)}
.hubcard{position:relative;overflow:hidden}
.hubcard::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--rainbow)}
.hubcard:hover{box-shadow:0 10px 28px rgba(129,52,240,.22)}
.hubcard .he{font-size:26px;filter:saturate(1.3)}
.back-link:hover{border-color:var(--ig-pink);color:var(--ig-pink)}
.theme-toggle:hover{border-color:var(--fb-blue);color:var(--fb-blue)}
/* ========================================================================= */

.tool-strip{background:linear-gradient(120deg,rgba(8,102,255,.1),rgba(253,58,132,.1));
  border:1px solid rgba(129,52,240,.22);border-radius:14px;
  padding:16px 19px;margin:0 0 24px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
html[data-theme="dark"] .tool-strip{background:linear-gradient(120deg,rgba(77,139,255,.14),rgba(255,107,168,.14))}
.tool-strip p{margin:0;font-size:14px;color:var(--text-2)}
.tool-strip a{white-space:nowrap}

.bigresult{position:relative;border:1.5px solid transparent;border-radius:16px;
  background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box, var(--rainbow) border-box;
  padding:22px;margin:20px 0;text-align:center}
.bigresult .br-num{font-size:clamp(28px,6vw,42px);font-weight:800;color:var(--orange-deep);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.bigresult .br-sub{font-size:13px;color:var(--muted);margin-top:8px}

.swaprow{display:flex;align-items:center;justify-content:center;margin:-4px 0 4px}
.swap-btn{background:var(--surface);border:1.5px solid var(--border);color:var(--text-2);
  border-radius:999px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;transition:all .18s ease}
.swap-btn:hover{border-color:var(--blue);color:var(--blue);transform:rotate(180deg)}

.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:18px 0}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.field .winput{background:var(--surface);border:1.5px solid var(--border);border-radius:11px;
  padding:10px 13px;display:flex;align-items:center;gap:7px;transition:border-color .18s ease}
.field .winput:focus-within{border-color:var(--ig-purple)}
.field .winput span{color:var(--muted);font-weight:700;font-size:15px}
.field .winput input{background:transparent;border:none;color:var(--text);width:100%;font-size:16px;
  font-weight:700;font-family:inherit;outline:none;font-variant-numeric:tabular-nums}
.field select{background:var(--surface);border:1.5px solid var(--border);color:var(--text);
  border-radius:11px;padding:10px 12px;font-size:14px;font-family:inherit;font-weight:600;cursor:pointer;width:100%}

.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:20px 0}
.result-grid .rcard{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;transition:border-color .18s ease,transform .18s ease}
.result-grid .rcard .rl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.result-grid .rcard .rv{font-size:19px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;margin-top:4px}
.result-grid .rcard.win{border-color:var(--tt-cyan);transform:translateY(-1px)}
.result-grid .rcard.win .rv{color:#00b389}
html[data-theme="dark"] .result-grid .rcard.win .rv{color:var(--tt-cyan)}
.result-grid .rcard.lose{border-color:var(--tt-pink)}
.result-grid .rcard.lose .rv{color:var(--red)}

.toolnav{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:20px 0}

/* Per-tool accentkleur — elke pagina krijgt zijn eigen herkenbare tint,
   net zoals elke social-app zijn eigen merkkleur heeft. Alleen .kicker en
   de live-dot pulse wisselen mee; de rainbow-elementen (cta, hubcard,
   bigresult) blijven overal gelijk voor herkenbaarheid als familie. */
body.page-euro .kicker,body.page-euro .byline .live-dot{background:var(--fb-blue) !important;box-shadow:0 0 0 3px rgba(8,102,255,.18)}
body.page-fiat .kicker,body.page-fiat .byline .live-dot{background:var(--ig-purple) !important;box-shadow:0 0 0 3px rgba(129,52,240,.18)}
body.page-hypo .kicker,body.page-hypo .byline .live-dot{background:var(--ig-pink) !important;box-shadow:0 0 0 3px rgba(253,58,132,.18)}
body.page-dca .kicker,body.page-dca .byline .live-dot{background:var(--ig-orange) !important;box-shadow:0 0 0 3px rgba(255,138,61,.18)}

/* =========================================================================
   TAAL- EN VALUTAKEUZE — zelfde mechanisme als satmeter.io (pill + modal)
   Overgenomen 1-op-1 van satmeter.io's site.css zodat de picker er identiek
   uitziet en werkt. Wordt aangestuurd door assets/locale.js.
   ========================================================================= */
.locale-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border);color:var(--text-2);
  border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;
  font-family:inherit;cursor:pointer;box-shadow:var(--shadow-sm);
  transition:all .18s ease;
}
.locale-pill:hover{border-color:var(--blue);color:var(--blue);}
.locale-pill .lp-flag{font-size:15px;line-height:1;}
.locale-pill .lp-code{letter-spacing:.04em;}
.locale-pill .lp-cur{
  font-size:10.5px;font-weight:700;color:var(--muted);
  background:var(--surface-2);border-radius:5px;padding:2px 6px;
}
.locale-pill .lp-chev{font-size:9px;opacity:.6;}

.lm-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:none;align-items:flex-start;justify-content:center;
  z-index:9999;padding:6vh 16px 16px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.lm-backdrop.open{display:flex;}
.lm-panel{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.35);
  width:100%;max-width:660px;max-height:82vh;
  display:flex;flex-direction:column;overflow:hidden;
  animation:lmIn .2s cubic-bezier(.3,1.2,.6,1);
}
@keyframes lmIn{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
.lm-head{padding:22px 24px 16px;border-bottom:1px solid var(--border);}
.lm-head h3{margin:0 0 4px;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--text);}
.lm-head p{margin:0;font-size:13px;color:var(--muted);line-height:1.5;}
.lm-close{
  position:absolute;top:16px;right:18px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--muted);
  width:32px;height:32px;border-radius:50%;font-size:17px;line-height:1;
  cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;
}
.lm-close:hover{border-color:var(--red);color:var(--red);}
.lm-searchwrap{padding:14px 24px;border-bottom:1px solid var(--border);}
.lm-search{
  width:100%;background:var(--surface-2);border:1.5px solid var(--border);
  color:var(--text);border-radius:11px;padding:11px 14px;font-size:14px;
  font-family:inherit;outline:none;
}
.lm-search:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);}
.lm-list{overflow-y:auto;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:6px;}
@media (max-width:560px){.lm-list{grid-template-columns:1fr;}}
.lm-opt{
  display:flex;align-items:center;gap:11px;
  background:transparent;border:1px solid transparent;border-radius:11px;
  padding:11px 13px;cursor:pointer;text-align:left;width:100%;
  font-family:inherit;color:var(--text);transition:all .14s ease;
}
.lm-opt:hover{background:var(--surface-2);border-color:var(--border);}
.lm-opt.active{background:var(--blue-soft);border-color:var(--blue);}
.lm-opt .of{font-size:21px;line-height:1;flex:0 0 auto;}
.lm-opt .ob{flex:1 1 auto;min-width:0;}
.lm-opt .on{font-size:14px;font-weight:600;line-height:1.25;}
.lm-opt .os{font-size:11.5px;color:var(--muted);margin-top:1px;}
.lm-opt .oc{
  font-size:11px;font-weight:700;color:var(--orange-deep);
  background:var(--orange-soft);border-radius:6px;padding:3px 7px;flex:0 0 auto;
}
.lm-opt.active .oc{background:var(--surface);}
.lm-empty{grid-column:1/-1;text-align:center;padding:28px 16px;color:var(--muted);font-size:13.5px;}
.lm-foot{
  padding:13px 24px;border-top:1px solid var(--border);
  font-size:11.5px;color:var(--muted);line-height:1.55;background:var(--surface-2);
}
@media (max-width:520px){
  .topbar{gap:8px;}
  .locale-pill{padding:6px 11px;font-size:11.5px;}
}