/* ===========================
   FoxToolkit — Global Styles
   Theme: Emerald + Luxe Gold
   =========================== */

/* ---- Theme variables ---- */
:root{
  --emerald: #28E07A;
  --accent:  #FFD84D; /* luxe gold */
  --bg:      #070B1A;
  --panel:   #10172A;
  --panel-2: #0f162d;
  --ink:     #E5E9F5;
  --muted:   #8a92ad;
  --muted-2: #5f6783;
  --shadow:  rgba(0,0,0,.5);
  --ring:    #052e1d;
  --radius:  18px;
  --font:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif;
}

/* ---- Base ---- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{max-width:100%;display:block}
a{color:var(--emerald);text-decoration:none}
a:hover{text-decoration:underline}
code,kbd{font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

/* ---- Layout ---- */
.container{width:92%;max-width:1200px;margin:0 auto}
.section{padding:56px 0}

/* ---- Header / Nav ---- */
header{
  position:sticky; top:0; z-index:50;
  background:#0d1224cc; backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--emerald);font-weight:800}
.brand .logo{width:24px;height:24px;border-radius:6px;background:var(--emerald)}
#mainnav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
#mainnav a{color:var(--ink);font-weight:600}
#mainnav a:hover{color:var(--emerald)}
.cta{
  padding:8px 12px;border-radius:10px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--emerald),#1cd079);
  color:var(--ring);font-weight:800
}
.hamburger{display:none;background:none;border:0;color:var(--ink)}
@media (max-width:860px){
  #mainnav{display:none}
  #mainnav.show{display:block;position:absolute;right:12px;top:56px;background:#0d1224;border:1px solid rgba(255,255,255,.06);border-radius:12px}
  #mainnav ul{flex-direction:column;padding:12px}
  .hamburger{display:block}
}

/* ---- Hero ---- */
.hero{
  position:relative;
  padding:60px 0 30px;
  background:
    radial-gradient(1200px 500px at 70% -10%, rgba(40,224,122,.15), transparent 60%),
    radial-gradient(1000px 450px at -10% 0%, rgba(255,216,77,.10), transparent 60%);
}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero-copy h1{font-size:2.2rem;margin:0 0 8px}
.hero-gradient{background:linear-gradient(135deg,var(--accent),var(--emerald));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.1rem;opacity:.95}
.hero-actions{display:flex;gap:10px;margin:14px 0}
.btn-primary{background:linear-gradient(135deg,var(--emerald),#1cd079);color:var(--ring)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--ink)}
.hero-card .glass{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px
}
.hero-card .card-title{font-weight:800;margin-bottom:10px}
.qr-skeleton{height:160px;border-radius:12px;background:linear-gradient(90deg,#1a2548,#152042);border:1px dashed rgba(255,255,255,.15)}
.hint{opacity:.8;font-size:.9rem;margin-top:10px}
.hero-glow{position:absolute;inset:0;pointer-events:none}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr}}

/* ---- Features ---- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-card{background:var(--panel-2);border-radius:14px;padding:16px;border:1px solid rgba(255,255,255,.06)}
.feature-icon{font-size:1.6rem}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}}

/* ---- Tool grid ---- */
.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.tool-card{
  display:flex;flex-direction:column;gap:8px;
  background:var(--panel);border:1px solid rgba(255,255,255,.06);
  padding:16px;border-radius:16px;color:var(--ink);text-decoration:none;
  transition:transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}
.tool-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px var(--shadow);border-color:rgba(255,255,255,.12)}
.tool-card.disabled{opacity:.6;cursor:not-allowed}
.tool-kicker{font-size:.85rem;opacity:.85}
.tool-kicker.soon{color:#ffd84d}
.tool-title{font-size:1.2rem;margin:0}
.tool-cta{margin-top:auto;font-weight:800;color:var(--emerald)}
@media(max-width:900px){.tool-grid{grid-template-columns:1fr}}

/* ---- About ---- */
.about-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.about-card{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px}
.stat{background:#0e1838;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px;margin-bottom:10px}
.stat span{font-weight:900}
.ticks{margin:10px 0 0 0;padding:0 0 0 18px}
@media(max-width:900px){.about-wrap{grid-template-columns:1fr}}

/* ---- FAQ ---- */
.faq details{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:12px;margin:8px 0;padding:10px}
.faq summary{cursor:pointer;font-weight:800}
.faq p{margin:8px 0 0}

/* ---- Panels / Cards ---- */
.panel{
  background:var(--panel);
  padding:20px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 24px var(--shadow);
}
.card{
  background:var(--panel-2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;padding:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 14px;border-radius:10px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--emerald),#1cd079);
  color:var(--ring);font-weight:800
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* ---- Footer ---- */
footer{background:#0d1224;border-top:1px solid rgba(255,255,255,.06);margin-top:30px}
.footerwrap{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 0}
.footerwrap a{color:var(--ink);opacity:.9}
.footerwrap a:hover{color:var(--emerald)}

/* ==============================
   Tool Common (QR / VAT helpers)
   ============================== */
.stack{display:flex;flex-direction:column;gap:8px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pill{
  padding:8px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:#0c1336;color:var(--ink)
}
.kicker{font-size:.9rem;opacity:.85;margin-bottom:6px}
.help{font-size:.95rem;opacity:.92}
.note{font-size:.9rem;opacity:.8}
.copyrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}

/* Segmented control (mode) */
.seg{
  display:inline-flex;gap:4px;padding:4px;border-radius:14px;
  background:linear-gradient(180deg,#121c3f,#0f1736);
  border:1px solid rgba(255,255,255,.10)
}
.seg-btn{
  appearance:none;border:0;border-radius:10px;padding:8px 12px;
  background:transparent;color:var(--ink);font-weight:800;cursor:pointer
}
.seg-btn.is-active{
  background:linear-gradient(135deg,var(--emerald),#1cd079);
  color:var(--ring);
  box-shadow:0 6px 20px rgba(40,224,122,.25)
}

/* Results grid (VAT) */
.out{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.out .card strong{font-size:1.05rem}
@media(max-width:900px){.out{grid-template-columns:1fr}}

/* ==================
   VAT: Yellow keypad
   ================== */
.pad-wrap{display:grid;grid-template-columns:1fr 210px;gap:12px}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pad .key{
  user-select:none;text-align:center;padding:12px 0;border-radius:12px;
  border:1px solid rgba(0,0,0,.2);
  background:linear-gradient(180deg,var(--accent), #FFC54D);
  color:var(--ring);font-weight:900;letter-spacing:.3px;cursor:pointer
}
.pad .key:focus{outline:2px solid var(--ring);outline-offset:2px}
.pad .key:active{transform:scale(.98)}
.pad .key.wide{grid-column:span 2}
@media (max-width:800px){.pad-wrap{grid-template-columns:1fr}}

/* VAT rate quick chips: yellow by default, emerald when active */
.quick{display:flex;flex-wrap:wrap;gap:6px}
.quick .chip{
  background: linear-gradient(180deg, var(--accent), #FFC54D);
  border: 1px solid rgba(0,0,0,.2);
  color: var(--ring);
  font-weight: 800;
  letter-spacing: .2px;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .12s ease, filter .12s ease;
  font-size: 1.05rem;
}
.quick .chip:hover{
  filter: brightness(1.03);
  box-shadow: 0 4px 14px rgba(255, 197, 77, .25);
}
.quick .chip:active{ transform: scale(.98); }
.quick .chip:focus-visible{ outline: 2px solid var(--ring); outline-offset: 2px; }
.quick .chip.active{
  background: linear-gradient(135deg, var(--emerald), #1cd079);
  color: var(--ring);
  border-color: rgba(0,0,0,.2);
  box-shadow: 0 6px 20px rgba(40, 224, 122, .25);
}

/* ==================
   QR tool light bits
   ================== */
.qr-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.qr-wrap{grid-template-columns:1fr}}
.qr-canvas, .qr-preview{
  background:#0c1336;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px
}
.badge-row{display:flex;gap:8px;flex-wrap:wrap}
.badge{padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#0f1838}
.badge input[type="text"]{background:transparent;border:0;color:var(--ink);outline:none}

/* ---- Utilities ---- */
.muted{opacity:.8}
.center{display:flex;align-items:center;justify-content:center}
.hide{display:none!important}

/* ---- Print tweaks for any export/print views ---- */
@media print{
  header,.no-print{display:none!important}
  body{background:#fff;color:#000}
  .panel,.card{border:0;box-shadow:none}
}
/* --- World Clock high-contrast overrides for dark theme --- */
.clock-card { color: #fff; }
.clock-card .digital { font-size: 1rem; font-weight: 600; margin-top: .5rem; color: #fff; }
.clock-card .offset  { font-size: .85rem; color: #ccc; }

/* --- Fix search suggestions text colour --- */
.suggestions button {
  color: #fff;          /* white text */
  background-color: #222; /* dark background to match theme */
  border-bottom: 1px solid #444;
}

.suggestions button:hover,
.suggestions button:focus {
  background-color: #333;
  color: #fff;
}
/* --- Fix oversize search box --- */
#tool-search {
  display: inline-block !important; /* stop it from becoming a big block */
  width: 220px !important;          /* fixed nice width */
  max-width: 260px !important;
  font-size: .95rem;
  padding: .4rem .6rem;
  border-radius: .5rem;
  line-height: 1.2;
}