/* ===========================
   Theme tokens
   =========================== */
:root{
  --bg:#0d1117; --card:#0f172a; --muted:#9aa3b2; --txt:#e5e7eb; --acc:#60a5fa;
  --border:#1f2937; --chip:#1f2937; --good:#22c55e;
}
:root[data-theme="light"]{
  --bg:#f8fafc; --card:#ffffff; --muted:#48515f; --txt:#0b1220; --acc:#2563eb; --border:#e5e7eb; --chip:#eef2ff; --good:#16a34a;
}

/* ===========================
   Base
   =========================== */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif}
a{color:var(--acc);text-decoration:none}
code{background:rgba(148,163,184,.15);padding:.1rem .3rem;border-radius:6px}

/* Bootstrap bridge helpers (NE diramo .row/.container) */
.between{ justify-content:space-between !important; }
.center { align-items:center !important; }
.top    { align-items:flex-start !important; }
.gap    { gap:10px !important; }

/* (Legacy) responsive grid helpers koje ćemo postepeno zamijeniti s .row/.col */
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Buttons (naš stil preko Bootstrap .btn) */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);padding:10px 14px;border-radius:10px;background:var(--card);color:var(--txt);font-weight:600}
.btn.primary{background:var(--acc);border-color:transparent;color:#0b1220}
.btn.small{padding:8px 12px;border-radius:8px;font-size:14px}
.muted{color:var(--muted)}

/* ===========================
   Header
   =========================== */
:root{ --header-h: 60px; }
.site-header{position:sticky;top:0;z-index:100;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent);backdrop-filter:blur(6px);border-bottom:1px solid rgba(31,41,55,.4)}
.brand{display:flex;gap:10px}
.brand .brand-name{font-weight:700}
.logo{display:block}

/* suptilna sjena ispod headera */
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:12px; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0)); opacity:.35;
}

/* nav + hamburger */
.nav{display:flex;gap:16px}
.hamburger{display:none;background:none;border:0;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:var(--txt);margin:5px 0;border-radius:2px}
@media (max-width:800px){
  .nav{display:none;position:absolute;right:18px;top:calc(var(--header-h) + 8px);background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px;flex-direction:column;min-width:220px;box-shadow:0 10px 20px rgba(0,0,0,.25)}
  .nav.open{display:flex}
  .hamburger{display:block}
}

/* Odmakni glavni sadržaj od headera + anchor offset */
main{ display:block; padding-top:12px; }
[id]{ scroll-margin-top: calc(var(--header-h) + 12px); }

/* Sitno poliranje linkova u navu */
.nav a{ color: var(--muted); padding: 8px 10px; border-radius:8px; }
.nav a:hover{ background: rgba(148,163,184,.08); color: var(--txt); }

/* ===========================
   Hero
   =========================== */
.hero{padding:56px 0}
.lead{font-size:17px}
.actions{display:flex;gap:10px;margin-top:12px}
.subnote{color:var(--muted);font-size:12px;margin-top:6px}
.hero-card{position:relative}
.hero-glow{position:absolute;inset:-30px;filter:blur(30px);background:radial-gradient(600px 200px at 70% 10%, rgba(96,165,250,.15), transparent)}
.hero-screenshot{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card)}
.shot-header{height:36px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;padding:0 10px}
.dot{width:10px;height:10px;border-radius:999px;background:var(--border)}
.shot-body{display:grid;grid-template-columns:210px 1fr;min-height:180px}
.shot-sidebar{border-right:1px solid var(--border);padding:10px;color:var(--muted)}
.shot-timeline{position:relative;padding:10px 10px 20px}
.shot-timeline .prog{height:32px;border-radius:8px;border:1px solid var(--border);background:linear-gradient(180deg,#1f2937,#111827);margin:8px 0;display:flex;align-items:center;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-timeline .w40{width:60%}.shot-timeline .w25{width:40%}.shot-timeline .w15{width:25%}
.nowline{position:absolute;left:50%;top:0;bottom:0;width:4px;background:rgba(34,197,94,.4);transform:translateX(-50%);border-radius:2px}

/* ===========================
   Sections / Cards
   =========================== */
.section{padding:42px 0}
.section.alt{background:rgba(2,6,23,.3)}
/* poslije — važi za SVE kartice, uključujući form.card */
.card{
  border:1px solid var(--border);
  background:var(--card) !important;
  border-radius:14px;
  padding:16px;
}

/* (opcionalno, ako negdje koristiš .card-body) */
.card > .card-body{ background:var(--card) !important; }

.card h3{margin:.2rem 0 .4rem}
.card p{margin:0}

/* Personalize */
.pref.card{border:1px solid var(--border);background:var(--card);border-radius:14px;padding:14px}
.pref label{display:block;margin-bottom:10px}
.pref input[type="search"], .pref input[type="text"], .pref select, .pref input[type="url"], .pref input[type="email"], .pref input[type="password"], .pref input[type="date"], .pref input[type="time"]{
  width:100%;background:var(--bg);color:var(--txt);border:1px solid var(--border);border-radius:10px;padding:10px 12px
}
.pillbox{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.pill{border:1px solid var(--border);background:var(--card);color:var(--txt);padding:6px 10px;border-radius:999px;cursor:pointer}
.pill.active{outline:2px solid rgba(96,165,250,.35)}

/* Download */
form.card label{display:block;margin-bottom:10px}
form.card input, form.card select{
  width:100%;background:var(--bg);color:var(--txt);border:1px solid var(--border);border-radius:10px;padding:10px 12px
}

/* CTA */
.cta{padding:28px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(180deg, rgba(96,165,250,.08), transparent)}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}
details.faq{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:10px}
details.faq > summary{cursor:pointer;font-weight:600}

/* Footer */
.site-footer{padding:24px 0;border-top:1px solid var(--border);background:rgba(2,6,23,.4)}
.links{display:flex;gap:12px;flex-wrap:wrap}

/* ===========================
   TV GUIDE (scoped)
   =========================== */
.tvg{padding:18px 0}
.tvg h1{margin:0 0 14px;font-size:20px}
.tvg .tvg-controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.tvg .tvg-controls input,.tvg .tvg-controls select{
  background:#0f172a;border:1px solid #1f2937;border-radius:8px;color:#e5e7eb;padding:8px 10px
}
.tvg .tvg-controls .btn,.tvg .tvg-controls button{
  background:#60a5fa;border:0;border-radius:8px;color:#0b1220;padding:8px 12px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block
}
.tvg .tvg-note{color:#9aa3b2;font-size:12px;margin-top:4px}
.tvg .tvg-hr{height:1px;background:#1f2937;margin:12px 0}

.tvg .tvg-guide{background:#111827;border:1px solid #1f2937;border-radius:12px;overflow:hidden}
.tvg .tvg-header{display:grid;grid-template-columns:260px 1fr;align-items:stretch;border-bottom:1px solid #1f2937;position:relative}
.tvg .tvg-ch-label{padding:10px 12px;background:#0d1320;font-weight:600;border-right:1px solid #1f2937;position:sticky;left:0;z-index:3}
.tvg .tvg-timebar{position:relative;overflow:hidden;background:#0d1320}
.tvg .tvg-ticks{position:relative;height:40px;border-left:1px solid #1f2937}
.tvg .tvg-tick{position:absolute;top:0;height:100%;border-left:1px dashed #334155;padding-left:4px;font-size:12px;color:#9aa3b2}
.tvg .tvg-tick span{position:absolute;top:6px;transform:translateX(-50%)}

.tvg .tvg-body{display:block;max-height:72vh;overflow:auto}

.tvg .tvg-row{display:grid;grid-template-columns:260px 1fr;align-items:stretch;min-height:56px;border-bottom:1px solid #1f2937;position:relative}
.tvg .tvg-ch{position:sticky;left:0;z-index:2;background:#0f1525;border-right:1px solid #1f2937;display:flex;align-items:center;gap:8px;padding:8px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tvg .tvg-lane{position:relative;overflow:hidden}

.tvg .tvg-prog{position:absolute;top:6px;height:calc(65px - 12px);border-radius:8px;background:linear-gradient(180deg,#1f2937,#111827);border:1px solid #334155;overflow:hidden;padding:6px 8px;white-space:nowrap;text-overflow:ellipsis;font-size:13px}
.tvg .tvg-prog:hover{outline:2px solid #60a5fa;z-index:5}
.tvg .tvg-prog .t{font-weight:600}
.tvg .tvg-prog .s{font-size:11px;color:#9aa3b2}

.tvg .tvg-legend{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.tvg .tvg-chip{background:#1f2937;color:#9aa3b2;padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid #1f2937}

.tvg .tvg-nowline{position:absolute;top:0;bottom:0;width:10px;left:50%;transform:translateX(-50%);background:rgba(22,163,74,.4);box-shadow:0 0 0 1px rgba(22,163,74,.25);z-index:4;pointer-events:none}
.tvg .tvg-nowbadge{position:absolute;top:2px;left:50%;transform:translateX(-50%);background:rgba(22,163,74,.15);border:1px solid rgba(22,163,74,.45);color:#86efac;font-size:10px;padding:1px 4px;border-radius:6px;white-space:nowrap;z-index:5;pointer-events:none}
/* === Typography override (poslije Bootstrapa) === */
body, p { 
  color: var(--txt);              /* #e5e7eb */
}

/* Unutar kartica – forsiraj svijetli tekst */
.card {
  color: var(--txt) !important;   /* pregazi --bs-card-color */
}
.card p { color: inherit; }

/* Zadrži namjerno “ugasene” elemente */
.muted, .subnote { color: var(--muted) !important; }
/* Admin layout */
.admin-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: calc(100vh - 80px); /* minus header+footer */
}

.admin-sidebar {
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
}

.admin-sidebar h2 {
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--muted);
}

.admin-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-nav li {
  margin-bottom: 8px;
}

.admin-nav a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--txt);
  text-decoration: none;
  font-weight: 500;
}

.admin-nav a:hover,
.admin-nav a.active {
  background: var(--acc);
  color: #0b1220;
}
/* Admin: custom wide switch (bez duplih kuglica) */
.admin-content .form-check.form-switch .form-check-input.switch-wide{
  width: 3.1rem;                 /* širina */
  height: 1.5rem;                /* visina */
  border-radius: 1.5rem;
  background-color: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  background-image: none !important;          /* isključi Bootstrapovo */
  position: relative;
  transition: background-color .2s ease, border-color .2s ease;
}
.admin-content .form-check.form-switch .form-check-input.switch-wide:focus{
  box-shadow: 0 0 0 .2rem rgba(99,102,241,.25);
}

/* kuglica */
.admin-content .form-check.form-switch .form-check-input.switch-wide::before{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.5rem - 4px);
  height: calc(1.5rem - 4px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
  transition: transform .2s ease;
}

/* uključeno */
.admin-content .form-check.form-switch .form-check-input.switch-wide:checked{
  background-color: var(--acc, #0d6efd);      /* koristi tvoju akcent boju */
  border-color: transparent;
}
.admin-content .form-check.form-switch .form-check-input.switch-wide:checked::before{
  transform: translateX(calc(3.1rem - 1.5rem));
}

/* “bjelkast” tekst opisa i labela u adminu */
.admin-content .form-text,
.admin-content .form-check-label{
  color: rgba(255,255,255,.85) !important;
}
.paypal-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.65rem 1.1rem; border:0; border-radius:999px;
  background:#ffc439;         /* PayPal gold */
  color:#111; font-weight:700; text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.2), inset 0 0 0 1px rgba(0,0,0,.06);
  transition:filter .15s ease, transform .02s ease;
}
.paypal-btn:hover{ filter:brightness(.98); }
.paypal-btn:active{ transform:translateY(1px); }
.paypal-mark{ height:18px; width:auto; display:block; }