/*
Theme Name: VQF 2026
Theme URI: https://vortexquizfactory.com
Author: Vortex Quiz Factory
Description: Custom Apple-inspired redesign theme for Vortex Quiz Factory. Built fresh (not a child theme) to give full control over markup and styling, while reusing the site's live WooCommerce shop and the vqf_raspored quiz-schedule data feed.
Version: 1.97
Text Domain: vqf-2026
*/

:root{
  --bg:#000000; --surface:#1c1c1e; --card:#1c1c1e; --border:rgba(255,255,255,0.10);
  --accent:#0071e3; --accent-hover:#0077ed;
  --text:#f5f5f7; --muted:#98989d;

  --point:#e8a33d; --varadero:#241357; --teachers:#2f9e5c; --metropolis:#c9432f; --online:#ff8f3d;

  --r-sm:12px; --r-md:22px; --r-pill:980px;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{background:#000;}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; letter-spacing:-0.011em;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }
/* WP/WooCommerce core markup includes accessibility-only text (e.g. the
   "Required" span next to a form field's *) meant for screen readers only.
   The theme never defined this standard WP class, so that text was
   rendering visibly instead of being hidden off-screen. */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute !important; width:1px; word-wrap:normal !important;
}
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 48px; position:relative; z-index:1; }

/* NAV */
header.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(0,0,0,0.72); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.nav-inner{ max-width:1500px; margin:0 auto; padding:0 48px; display:flex; align-items:center; justify-content:flex-end; gap:28px; height:88px; }
.logo img{ height:63px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:36px; list-style:none; }
.nav-links > li{ position:relative; }
.nav-mobile-cta-item,.nav-mobile-login-item{ display:none; } /* only shown inside the mobile drawer, see media query */
.nav-links a{ color:var(--text); text-decoration:none; font-size:14.5px; font-weight:500; opacity:.82; transition:opacity .15s; }
.nav-links a:hover{ opacity:1; }
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-sep{ width:1px; height:24px; background:rgba(255,255,255,0.15); }
.nav-cta{ background:var(--accent); color:#fff; font-size:14px; font-weight:600; padding:10px 20px; border-radius:var(--r-pill); text-decoration:none; }
/* Now a normal flex child of .nav-inner (moved there in header.php) so it shares the
   same wider max-width and never overlaps or overflows at any screen size. */
.nav-account{
  display:flex; align-items:center; gap:10px;
}
.nav-login{
  background:transparent; border:1.5px solid var(--accent); color:#fff; font-size:14px; font-weight:600;
  padding:8.5px 18.5px; border-radius:var(--r-pill); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
}
.nav-logout{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  background:transparent; border:1.5px solid #ff4d4f; color:#ff4d4f; font-size:13px; font-weight:600;
  padding:7px 14px; border-radius:var(--r-pill); text-decoration:none;
}
.nav-logout:hover{ background:rgba(255,77,79,0.12); }
.nav-logout-icon{ width:15px; height:15px; flex-shrink:0; }
.nav-login-avatar{
  width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0;
}

/* Hamburger toggle - hidden on desktop, shown only ≤900px (see media query below) */
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width:36px; height:36px; align-items:center; justify-content:center; padding:0; flex:0 0 auto;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:''; display:block; width:20px; height:2px; background:var(--text); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease, background .2s ease;
}
.nav-toggle span{ position:relative; }
.nav-toggle span::before{ position:absolute; top:-6px; left:0; }
.nav-toggle span::after{ position:absolute; top:6px; left:0; }
.nav-toggle.active span{ background:transparent; }
.nav-toggle.active span::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle.active span::after{ transform:translateY(-6px) rotate(-45deg); }

/* Dropdown submenus (e.g. "Kvizovi" -> Varadero / Teachers / Metropolis) */
.nav-links .menu-item-has-children > a{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.nav-links .menu-item-has-children > a::after{
  content:''; width:6px; height:6px; margin-top:-3px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); opacity:.6; transition:transform .15s;
}
.nav-links .menu-item-has-children.nav-open > a::after{ transform:rotate(225deg); margin-top:2px; }
/* Extend the trigger's hoverable box down through the visual gap to the
   submenu (via padding, cancelled out visually with an equal negative
   margin) so moving the mouse from the link to the dropdown doesn't cross a
   "dead zone" that closes the :hover state before you get there. Desktop
   only - on mobile the submenu is a static inline expand, not a hover
   dropdown, so this is scoped out of the max-width:900px block below. */
.nav-links .menu-item-has-children{ padding-bottom:16px; margin-bottom:-16px; }
.nav-links .sub-menu{
  list-style:none; position:absolute; top:100%; left:50%;
  min-width:190px; padding:8px; margin:0;
  background:var(--surface); border:1px solid rgba(255,255,255,0.08); border-radius:var(--r-md);
  box-shadow:0 20px 44px rgba(0,0,0,0.45);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(-50%) translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  z-index:30;
}
.nav-links .menu-item-has-children:hover > .sub-menu,
.nav-links .menu-item-has-children.nav-open > .sub-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav-links .sub-menu a{
  display:block; padding:10px 14px; border-radius:var(--r-sm);
  font-size:14px; font-weight:500; opacity:.85; white-space:nowrap;
}
.nav-links .sub-menu a:hover{ background:rgba(255,255,255,0.06); opacity:1; }

/* Nested flyout submenus (e.g. Arhiva -> Varadero liga -> Sezona 7): a
   second (or deeper) level .sub-menu opens sideways off its own <li>
   instead of stacking below it. Needs the parent <li> to be a positioning
   context, which .nav-links > li already is for top-level items only. */
.nav-links .sub-menu > li{ position:relative; }
.nav-links .sub-menu .sub-menu{
  top:-9px; left:100%; margin-left:6px; transform:translateX(-6px) translateY(0);
}
.nav-links .sub-menu .menu-item-has-children:hover > .sub-menu,
.nav-links .sub-menu .menu-item-has-children.nav-open > .sub-menu{
  transform:translateX(0) translateY(0);
}
/* Nested triggers get a sideways-pointing chevron (opens right) instead of
   the top-level's downward one. */
.nav-links .sub-menu .menu-item-has-children > a::after{ display:inline-block; margin-left:6px; transform:rotate(-45deg); margin-top:0; }
.nav-links .sub-menu .menu-item-has-children.nav-open > a::after{ transform:rotate(135deg); }

/* Non-clickable section labels inside a dropdown (e.g. "Lige" / "Posebni
   kvizovi" headers inside the Arhiva panel). */
.nav-links .nav-divider{ padding-bottom:0 !important; margin-bottom:0 !important; }
.nav-links .nav-divider > a{
  pointer-events:none; cursor:default; opacity:.5 !important; font-size:11.5px;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:10px 14px 6px !important; white-space:nowrap;
}
.nav-links .nav-divider:not(:first-child) > a{ margin-top:6px; border-top:1px solid rgba(255,255,255,0.08); padding-top:14px !important; }

/* "Arhiva" mega panel: wide two-column layout so the long list of old
   leagues/venues doesn't turn into one endless narrow strip. */
/* CSS multi-column (column-count) breaks position:absolute flyout children
   (columns are anonymous fragmentation boxes, so a nested .sub-menu's
   "left:100%" resolves against the pre-fragmentation flow width instead of
   the visual column - it ends up rendered hundreds of px off-target). Grid
   with grid-auto-flow:column gives the same 2-column visual layout without
   that bug, since each row stays a normal in-flow box. 18 rows fits the 35
   current items into 2 columns; bump this if more items get added later. */
.menu-item-arhiva > .sub-menu{
  left:0; transform:translateX(0) translateY(6px); width:600px;
  max-height:min(560px, 75vh); overflow-y:auto; overflow-x:hidden;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(18, auto);
  grid-auto-flow:column; column-gap:6px; row-gap:0; padding:10px;
}
/* Rows near the right edge of the Arhiva panel (2nd column) don't have room
   to flyout further right, so a small JS check (see footer.php) adds this
   class to flip the flyout to the left side instead. Since CSS multi-column
   layout doesn't let us target "which items ended up in column 2" with a
   selector (column-balancing depends on content height, not item count),
   this has to be measured at hover-time in JS. */
.nav-links .sub-menu.flyout-left{
  left:auto; right:100%; margin-left:0; margin-right:6px;
  transform:translateX(6px) translateY(0);
}
.nav-links .menu-item-has-children:hover > .sub-menu.flyout-left,
.nav-links .menu-item-has-children.nav-open > .sub-menu.flyout-left{
  transform:translateX(0) translateY(0);
}
.menu-item-arhiva:hover > .sub-menu,
.menu-item-arhiva.nav-open > .sub-menu{ transform:translateX(0) translateY(0); }
.menu-item-arhiva > .sub-menu > li{ min-width:0; }
.menu-item-arhiva > .sub-menu > li > a{ overflow:hidden; text-overflow:ellipsis; }

.watermark{
  position:fixed; z-index:0; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(-6deg);
  width:900px; aspect-ratio:1241/1334; height:auto; max-width:none;
  opacity:0.16;
  pointer-events:none;
}
@media(max-width:640px){
  .watermark{ width:520px; max-width:90vw; }
}

/* HERO */
.hero{ padding:96px 0 64px; text-align:center; position:relative; }
.hero::before{ content:''; position:absolute; width:min(640px,90vw); height:min(640px,90vw); background:radial-gradient(circle,rgba(0,113,227,.20) 0%,transparent 70%); top:-160px; left:50%; transform:translateX(-50%); pointer-events:none; z-index:-1; }
.eyebrow{ font-size:15px; font-weight:600; color:var(--accent); margin-bottom:18px; }
.hero h1{ font-weight:700; font-size:74px; line-height:1.04; letter-spacing:-.035em; color:#fff; }
.hero h1 em{ font-style:normal; color:var(--muted); font-weight:600; }
.hero p{ margin:22px auto 0; font-size:19px; color:var(--muted); max-width:520px; line-height:1.55; font-weight:400; }
.hero-cta{
  margin-top:34px; display:inline-flex; align-items:center; gap:9px;
  background:var(--accent); color:#fff; font-weight:590; font-size:17px;
  padding:15px 30px; border-radius:var(--r-pill); text-decoration:none;
}
.hero-cta svg{ width:16px;height:16px; }

/* SCOREBOARD */
.scoreboard{ display:flex; justify-content:center; gap:80px; padding:36px 0 44px; border-bottom:1px solid rgba(255,255,255,0.08); }
.score-cell{ text-align:center; }
.score-num{ font-weight:700; font-size:34px; letter-spacing:-.02em; color:#fff; line-height:1; }
.score-label{ font-size:13px; color:var(--muted); margin-top:8px; display:block; font-weight:500; }

/* SECTION HEADS */
.section{ padding:72px 0 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; }
.section-eyebrow{ font-size:14px; font-weight:600; color:var(--accent); }
.section-title{ font-size:36px; font-weight:700; color:#fff; margin-top:6px; letter-spacing:-.025em; }
.updated{ font-size:13px; color:var(--muted); font-weight:500; }
.see-link{ font-size:14.5px; font-weight:600; color:var(--accent); text-decoration:none; }

/* RASPORED / WEEK GRID (powers vqf_get_raspored()) */
.card-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.card{
  border-radius:var(--r-md); padding:24px; position:relative; box-shadow:0 16px 32px rgba(0,0,0,0.35);
  display:flex; flex-direction:column; justify-content:space-between; min-height:230px;
  transition:transform .18s; text-decoration:none; color:inherit;
}
.card:hover{ transform:translateY(-4px); }
.card-link{ display:contents; color:inherit; text-decoration:none; }
.card .day{ font-size:13px; font-weight:600; opacity:.8; }
.card .date{ font-size:34px; font-weight:700; margin-top:4px; line-height:1; letter-spacing:-.02em; }
.card .loc{ font-size:16px; font-weight:600; margin-top:16px; }
.card .addr{ font-size:13.5px; font-weight:500; opacity:.88; margin-top:4px; line-height:1.4; }
.card .addr .venue-name{ font-weight:700; font-size:14.5px; font-style:italic; }
.card .time{ font-size:13.5px; font-weight:600; margin-top:13px; opacity:.9; }
.card .go{
  margin-top:16px; font-size:14px; font-weight:600;
  text-decoration:none; background:rgba(0,0,0,0.32); color:#fff; padding:11px 0; border-radius:var(--r-pill); text-align:center;
}
.card a.go{ background:#EAF3FF; color:#0071E3; }
.card.point{ background:linear-gradient(155deg,var(--point),#b87823); color:#1c1204; }
.card.metropolis{ background:linear-gradient(155deg,var(--metropolis),#6e1f14); color:#f4f2ec; }
.card.varadero{ background:linear-gradient(155deg,var(--varadero),#2a1a4d); color:#f4f2ec; }
/* Same venue as .varadero (Varadero Bar), but its own colour so the two
   don't look identical now that both can appear side by side in the
   combined "Nadolazeći kvizovi" feed. */
.card.opci{ background:linear-gradient(155deg,#44698e,#1b2a39); color:#f4f2ec; }
.card.teachers{ background:linear-gradient(155deg,var(--teachers),#114226); color:#f4f2ec; }
/* Warm orange -> pink/purple sunset, echoing the live site's "Online summer
   edition" card gradient (yellow/orange -> pink -> purple), simplified to
   the theme's standard 2-stop card gradient for visual consistency with the
   other venue cards. */
.card.online{ background:linear-gradient(155deg,var(--online),#9c2775); color:#f4f2ec; }
.card.sport-auto, .card.sport{ background:linear-gradient(135deg,#123a1f,#e8c93d); color:#f8f5e8; text-shadow:0 1px 3px rgba(0,0,0,0.55); }
.card.film{ background:linear-gradient(155deg,#c98f1f,#5c3d08); color:#f8f5e8; }
.card.glazbeni{ background:linear-gradient(160deg,#e68bbe,#5c384c); color:#f4f2ec; }
/* Generic/unfixed "tematski" tema value (no more specific sub-category) -
   kept as its own colour, distinct from Glazbeni's pink above. */
.card.tematski{ background:linear-gradient(160deg,#5c3d99,#2a1d4d); color:#f4f2ec; }
/* Same colour family as the .t5-.t8 theme-chip classes on the Tematski
   schedule page, so a themed card looks the same wherever it shows up. */
.card.geografija{ background:linear-gradient(160deg,#1f7a8f,#0d2b3d); color:#f4f2ec; }
.card.povijest{ background:linear-gradient(160deg,#9c7a3f,#3d2f14); color:#f4f2ec; }
.card.serije{ background:linear-gradient(160deg,#b8365f,#4d1526); color:#f4f2ec; }
.card.harry-potter{ background:linear-gradient(160deg,#7a1f2b,#1a0d10); color:#f4f2ec; }
.card .tag{ position:absolute; top:22px; right:22px; font-size:11.5px; font-weight:600; opacity:.7; }
.auto-badge{ position:absolute; top:46px; right:22px; font-size:9.5px; font-weight:700; letter-spacing:.03em; background:rgba(0,0,0,0.3); padding:4px 8px; border-radius:var(--r-pill); }
.card .live-pill{ position:absolute; top:20px; left:22px; display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; letter-spacing:.02em; background:rgba(0,0,0,0.32); color:#fff; padding:5px 11px 5px 9px; border-radius:var(--r-pill); }
.card .live-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:#30d158; flex:0 0 auto; }
.card:has(.live-pill) .day{ margin-top:28px; }

.annot{ margin-top:22px; padding:16px 20px; border-radius:var(--r-sm); background:var(--surface); font-size:13.5px; color:var(--muted); line-height:1.55; max-width:640px; }
.annot b{ color:var(--text); font-weight:600; }

/* TWO COLUMN: RHYTHM + LEAGUE */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.rhythm-panel{ background:var(--surface); border-radius:var(--r-md); padding:8px 28px; }
.rhythm-row{ display:flex; align-items:center; gap:16px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.rhythm-row:last-child{ border-bottom:none; }
.dot{ width:10px;height:10px;border-radius:50%; flex:0 0 auto; }
.dot.metropolis{ background:var(--metropolis); }
.dot.varadero{ background:var(--varadero); }
.dot.teachers{ background:var(--teachers); }
.rhythm-name{ font-weight:600; font-size:16px; }
.rhythm-sub{ font-size:13.5px; font-weight:500; color:var(--muted); margin-top:3px; }
.rhythm-when{ margin-left:auto; text-align:right; font-size:14px; font-weight:600; color:var(--text); opacity:.8; white-space:nowrap; }

.league-card{ border-radius:var(--r-md); padding:32px; background:var(--surface); }
.league-top{ display:flex; align-items:center; justify-content:space-between; }
.league-name{ font-weight:700; font-size:21px; letter-spacing:-.015em; }
.league-status{ font-size:12px; font-weight:600; background:rgba(48,209,88,0.16); color:#30d158; padding:6px 12px; border-radius:var(--r-pill); }
/* Status colour variants - default (no modifier class) is green "U tijeku".
   Apply .is-done for finished leagues, .is-upcoming for announced-not-started. */
.league-status.is-done,.status-pill.is-done{ background:rgba(255,69,58,0.16); color:#ff453a; }
.league-status.is-upcoming,.status-pill.is-upcoming{ background:rgba(255,214,10,0.16); color:#ffd60a; }
.league-meta{ font-size:14.5px; font-weight:400; color:var(--muted); margin-top:14px; line-height:1.6; }
.league-actions{ display:flex; gap:12px; margin-top:26px; }
.league-actions a{ font-size:14.5px; font-weight:600; padding:13px 24px; border-radius:var(--r-pill); text-decoration:none; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-ghost{ background:rgba(255,255,255,0.08); color:var(--text); }

/* THEMES */
.pattern-legend{ display:flex; gap:12px; margin-bottom:28px; flex-wrap:wrap; }
.rule-chip{ display:flex; align-items:center; gap:8px; background:var(--surface); border-radius:var(--r-pill); padding:11px 18px 11px 14px; font-size:14px; font-weight:400; color:var(--muted); }
.rule-chip b{ color:var(--text); font-weight:600; }
.rule-dot{ width:8px;height:8px;border-radius:50%; flex:0 0 auto; }
.rule-dot.film{ background:#c98f1f; }
.rule-dot.sport{ background:linear-gradient(135deg,#123a1f,#e8c93d); }
.rule-dot.music{ background:#e68bbe; }
.theme-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.theme-chip{ border-radius:var(--r-sm); display:flex; flex-direction:column; justify-content:space-between; padding:20px; font-weight:600; font-size:15px; min-height:130px; color:#f4f2ec; text-decoration:none; }
.theme-chip svg{ width:24px; height:24px; opacity:.85; }
.theme-chip .tc-when{ display:block; }
.theme-chip .tc-host{ display:block; font-size:12.5px; font-weight:500; opacity:.8; margin-top:5px; }
.t1{ background:linear-gradient(160deg,#e68bbe,#5c384c); } /* glazbeni */
.t2{ background:linear-gradient(160deg,#c98f1f,#5c3d08); }
.t3{ background:linear-gradient(160deg,#5c3d99,#2a1d4d); } /* generic/unfixed "tematski" fallback */
.t4{ background:linear-gradient(135deg,#123a1f,#e8c93d); }
.t5{ background:linear-gradient(160deg,#1f7a8f,#0d2b3d); } /* geografija */
.t6{ background:linear-gradient(160deg,#9c7a3f,#3d2f14); } /* povijest */
.t7{ background:linear-gradient(160deg,#b8365f,#4d1526); } /* serije */
.t8{ background:linear-gradient(160deg,#7a1f2b,#1a0d10); } /* harry potter */
.see-all{ border-radius:var(--r-sm); background:var(--surface); display:flex; align-items:center; justify-content:center; text-align:center; font-size:14px; color:var(--muted); font-weight:600; min-height:130px; text-decoration:none; }

/* COMMUNITY */
.story-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mini-story{ padding:22px; border-radius:var(--r-sm); background:var(--surface); text-decoration:none; color:inherit; transition:transform .15s; display:block; }
.mini-story:hover{ transform:translateY(-3px); }
.mini-story-author{ display:flex; align-items:center; gap:10px; }
.mini-story-avatar{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex:0 0 auto; }
.mini-story-name{ font-size:13.5px; font-weight:600; }
.mini-story-title{ font-size:16px; font-weight:600; line-height:1.35; margin-top:16px; letter-spacing:-.01em; }
.mini-story-venue{ font-size:11.5px; font-weight:600; margin-top:14px; }

.section-divider{ height:1px; background:rgba(255,255,255,0.08); margin-top:64px; }

/* STATS */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:56px; margin-bottom:80px; }
.stat{ background:var(--surface); border-radius:var(--r-sm); padding:28px 24px; }
.stat-num{ font-size:36px; font-weight:700; color:#fff; letter-spacing:-.02em; }
.stat-label{ font-size:13.5px; color:var(--muted); margin-top:6px; font-weight:500; }

/* GENERIC PAGE (fallback template for legacy/unconverted pages) */
.generic-page{ padding:80px 0 100px; max-width:740px; margin:0 auto; }
.generic-page h1{ font-size:44px; font-weight:700; letter-spacing:-.02em; margin-bottom:28px; }
.generic-page .entry-content{ font-size:16px; line-height:1.7; color:var(--text); max-width:740px; }
.generic-page .entry-content p{ margin-bottom:1.2em; }
.generic-page .entry-content img{ border-radius:var(--r-md); margin:1.5em 0; }
.generic-page .entry-content a{ color:var(--accent); }

footer.site-footer{ margin-top:80px; border-top:1px solid rgba(255,255,255,0.08); padding:56px 0 40px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; }
.footer-brand img{ height:59px; margin-bottom:14px; }
.footer-tag{ font-size:13.5px; color:var(--muted); max-width:26ch; line-height:1.5; }
.footer-col h4{ font-size:13px; font-weight:600; color:var(--text); margin-bottom:16px; }
.footer-col a{ display:block; font-size:13.5px; color:var(--muted); text-decoration:none; margin-bottom:11px; }
.footer-col a:hover{ color:var(--text); }
/* H1Design Contract Withdrawal plugin wraps its own link in a div with
   default browser-ish margin/centering - reset that so it sits flush
   with the rest of the "Pravno" footer links instead of looking bolted on. */
.footer-col .h1roc-footer-link{ margin:0; padding:0; text-align:left; }
.footer-col .h1roc-footer-link a{ display:block; font-size:13.5px; color:var(--muted); text-decoration:none; margin-bottom:0; }
.footer-col .h1roc-footer-link a:hover{ color:var(--text); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.06); }
.fine{ font-size:12.5px; color:var(--muted); }
.socials{ display:flex; gap:10px; }
.socials span{ width:32px;height:32px;border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--muted); font-weight:600; }

/* ============ SHARED DETAIL-PAGE COMPONENTS (Varadero, Teachers, Shop, Product, Cart, Checkout, Auth, Community, Story) ============ */
.page-top{ padding:48px 0 0; }
.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:500; color:var(--muted); text-decoration:none; margin-bottom:28px; }
.back-link:hover{ color:var(--text); }
.back-link svg{ width:15px; height:15px; }
.page-title-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.page-title{ font-size:48px; font-weight:700; letter-spacing:-.03em; color:#fff; line-height:1.05; }
/* Venue's own logo (e.g. bar/pub branding) next to the page title. No
   background card: most venue logos are white/light artwork meant to sit
   directly on a dark background (only Teacher's has its own opaque box
   baked into the file, which still reads fine here). "Medium" size per
   design brief: tall enough to be legible, capped so it never dominates
   the h1 next to it. */
/* When a venue logo is present, split page-top into the same two-column
   shape as .detail-layout below it (1fr + fixed 380px) so the logo sits
   in a right-hand lane that lines up with the hosts/map card in the
   side-col underneath, vertically centered against the whole title block
   rather than squeezed inline next to the h1. */
.page-top-inner.has-logo{ display:grid; grid-template-columns:1fr 380px; gap:56px; align-items:center; }
.page-top-logo{ display:flex; align-items:center; justify-content:center; }
.venue-logo-badge{ display:inline-flex; align-items:center; }
.venue-logo-badge img{ display:block; height:96px; max-width:260px; object-fit:contain; }
/* Metropolis's logo is a small round badge, not a wide banner like the
   others - at the shared height it reads much smaller than Teacher's/
   Varadero, so it gets a dedicated 2x bump per request. */
.venue-logo-badge img[src*="Metropolis-bar-logo"]{ height:192px; }
@media (max-width:900px){ .page-top-inner.has-logo{ grid-template-columns:1fr; gap:20px; } .page-top-logo{ justify-content:flex-start; } }
@media (max-width:640px){ .venue-logo-badge img{ height:64px; max-width:190px; } .venue-logo-badge img[src*="Metropolis-bar-logo"]{ height:128px; } }
.status-pill{ font-size:13px; font-weight:600; background:rgba(48,209,88,0.16); color:#30d158; padding:7px 15px; border-radius:var(--r-pill); }
.page-meta{ font-size:16px; color:var(--text); margin-top:18px; font-weight:500; }
.page-desc{ font-size:17px; color:var(--muted); margin-top:16px; line-height:1.6; max-width:56ch; font-weight:400; }
.page-actions{ display:flex; align-items:flex-start; gap:14px; margin-top:32px; }
.cta-group{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.cta-caption{ font-size:13px; color:var(--muted); font-weight:400; }
.btn-primary,.btn-ghost{ font-size:15.5px; font-weight:600; padding:14px 28px; border-radius:var(--r-pill); text-decoration:none; letter-spacing:-.005em; display:inline-block; border:none; cursor:pointer; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-ghost{ background:rgba(255,255,255,0.08); color:var(--text); }

.detail-layout{ display:grid; grid-template-columns:1fr 380px; gap:56px; align-items:start; margin-top:56px; }
.main-col{ min-width:0; }
.side-col{ display:flex; flex-direction:column; gap:24px; }
.section-title-md{ font-size:24px; font-weight:700; color:#fff; letter-spacing:-.02em; margin-bottom:20px; }

.standings-list{ display:flex; flex-direction:column; }
.standings-row{ display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:16px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.standings-row:last-child{ border-bottom:none; }
.s-rank{ width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.08); color:var(--muted); font-size:13.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.s-rank.gold{ background:rgba(245,195,68,0.16); color:#f5c344; }
.s-rank.silver{ background:rgba(199,201,204,0.14); color:#c7c9cc; }
.s-rank.bronze{ background:rgba(205,127,78,0.16); color:#cd7f4e; }
.s-team{ font-size:15.5px; font-weight:500; }
.s-team.lead{ font-weight:700; color:#fff; }
.s-pts{ font-size:15.5px; font-weight:700; color:var(--accent); white-space:nowrap; }
.s-more{ font-size:14px; color:var(--muted); padding:16px 0; font-style:italic; }
.see-table{ display:inline-block; margin-top:18px; padding:13px 26px; border-radius:var(--r-pill); background:var(--surface); font-size:14.5px; font-weight:600; color:var(--text); text-decoration:none; }

.schedule-list{ display:flex; flex-direction:column; }
.schedule-row{ display:flex; align-items:center; gap:16px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.schedule-row:last-child{ border-bottom:none; }
.sch-num{ width:38px; height:38px; border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:700; flex:0 0 auto; color:var(--muted); }
.sch-num.next{ background:var(--accent); color:#fff; }
.sch-info{ flex:1; }
.sch-date{ font-size:15.5px; font-weight:600; }
.sch-sub{ font-size:13px; color:var(--muted); margin-top:2px; }
.sch-badge{ font-size:12px; font-weight:600; padding:6px 12px; border-radius:var(--r-pill); background:rgba(255,255,255,0.08); color:var(--muted); white-space:nowrap; }
.sch-badge.next{ background:rgba(0,113,227,0.16); color:var(--accent); }

.format-card,.rules-card,.host-card{ border-radius:var(--r-md); padding:24px; background:var(--surface); }

.ts-layout{ display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:start; }
.ts-layout-main{ min-width:0; }
.ts-layout-side{ min-width:0; }
.ts-results-grid{ display:grid; grid-template-columns:1fr; gap:24px; margin-top:24px; }
@media (max-width:900px){
	.ts-layout{ grid-template-columns:1fr; }
}
.format-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.08); font-size:14.5px; }
.format-row:last-child{ border-bottom:none; }
.format-row .f-label{ color:var(--muted); font-weight:400; }
.format-row .f-val{ font-weight:600; color:var(--text); text-align:right; }

.results-table{ width:100%; border-collapse:collapse; }
.results-table th,.results-table td{ padding:10px 8px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.08); font-size:14.5px; color:var(--text); }
.results-table th{ color:var(--muted); font-weight:600; text-transform:uppercase; font-size:11.5px; letter-spacing:.05em; }
.results-table th:first-child,.results-table td:first-child{ width:34px; color:var(--muted); }
.results-table td:last-child,.results-table th:last-child{ text-align:right; }
.results-table tbody tr:last-child td{ border-bottom:none; }
.results-table tbody tr{ transition:background .15s ease; }
.results-table tbody tr:first-child td{ color:var(--text); font-weight:700; }

/* Top 3 highlight - gold / silver / bronze */
.results-table tbody tr:nth-child(1){ background:rgba(255,209,102,0.07); }
.results-table tbody tr:nth-child(2){ background:rgba(201,210,220,0.055); }
.results-table tbody tr:nth-child(3){ background:rgba(217,154,99,0.06); }

.rank-badge{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-size:12px; font-weight:700; color:var(--muted); background:rgba(255,255,255,0.06); }
.results-table tbody tr:nth-child(1) .rank-badge{ background:#ffd166; color:#3a2c00; }
.results-table tbody tr:nth-child(2) .rank-badge{ background:#c9d2dc; color:#2b2f36; }
.results-table tbody tr:nth-child(3) .rank-badge{ background:#d99a63; color:#3a2210; }

/* Rezultati CTA - matches the filled-pill style used by "Prijavi se" / "Otvori kartu" */
.results-btn{ font-size:14px; font-weight:600; padding:12px 22px; border-radius:var(--r-pill); background:var(--accent); color:#fff; text-decoration:none; display:inline-block; border:none; cursor:pointer; }
.results-btn:hover{ background:var(--accent-hover); }

/* GALERIJA - accordion (native <details>, lazy-loads images only when opened) + lightbox */
.vqf-gallery{ display:flex; flex-direction:column; gap:12px; }
.vqf-gallery-item{ background:var(--surface); border-radius:var(--r-md); overflow:hidden; }
.vqf-gallery-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:20px 24px; font-weight:600; font-size:15.5px; color:var(--text); }
.vqf-gallery-item summary::-webkit-details-marker{ display:none; }
.vqf-gallery-item summary::after{ content:'+'; margin-left:auto; font-size:20px; font-weight:400; color:var(--muted); }
.vqf-gallery-item[open] summary::after{ content:'\2212'; }
.vqf-gallery-count{ color:var(--muted); font-weight:400; font-size:13.5px; }
.vqf-gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; padding:0 24px 24px; }
.vqf-gallery-thumb{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-sm); cursor:pointer; transition:opacity .15s ease, transform .15s ease; }
.vqf-gallery-thumb:hover{ opacity:.85; transform:scale(1.02); }

#vqf-lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.94); z-index:200; display:none; align-items:center; justify-content:center; flex-direction:column; padding:24px; }
#vqf-lightbox.open{ display:flex; }
#vqf-lightbox-img{ max-width:92vw; max-height:80vh; object-fit:contain; border-radius:var(--r-sm); }
.vqf-lightbox-close{ position:absolute; top:22px; right:26px; font-size:32px; color:#fff; background:none; border:none; cursor:pointer; line-height:1; opacity:.8; padding:6px; }
.vqf-lightbox-close:hover{ opacity:1; }
.vqf-lightbox-arrow{ position:absolute; top:50%; transform:translateY(-50%); font-size:30px; color:#fff; background:rgba(255,255,255,.08); border:none; width:52px; height:52px; border-radius:50%; cursor:pointer; opacity:.85; display:flex; align-items:center; justify-content:center; }
.vqf-lightbox-arrow:hover{ opacity:1; background:rgba(255,255,255,.16); }
.vqf-lightbox-prev{ left:20px; }
.vqf-lightbox-next{ right:20px; }
.vqf-lightbox-count{ margin-top:16px; color:var(--muted); font-size:14px; font-weight:500; }
@media (max-width:640px){
  .vqf-lightbox-arrow{ width:44px; height:44px; font-size:24px; }
  .vqf-lightbox-prev{ left:8px; }
  .vqf-lightbox-next{ right:8px; }
}

.rules-list{ counter-reset:rule; display:flex; flex-direction:column; gap:18px; }
.rules-list li{ display:flex; gap:14px; align-items:flex-start; list-style:none; counter-increment:rule; }
.rules-list li::before{ content:counter(rule); flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.08); color:var(--text); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.rule-title{ font-size:15px; font-weight:600; color:var(--text); }
.rule-desc{ font-size:13.5px; font-weight:400; color:var(--muted); margin-top:4px; line-height:1.5; }

.map-card{ border-radius:var(--r-md); overflow:hidden; background:var(--surface); }
.map-preview{ height:150px; position:relative; background-color:#15202b;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 34px); }
.map-preview::after{ content:''; position:absolute; width:130px; height:130px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(0,113,227,0.28) 0%, transparent 70%); }
.map-pin{ position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); color:var(--accent); }
.map-pin svg{ width:30px; height:30px; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
.map-info{ padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.map-address{ font-size:14.5px; font-weight:600; }
.map-address span{ display:block; font-size:13px; font-weight:400; color:var(--muted); margin-top:2px; }
.map-btn{ flex:0 0 auto; font-size:13.5px; font-weight:600; padding:10px 16px; border-radius:var(--r-pill); background:var(--accent); color:#fff; text-decoration:none; white-space:nowrap; }

.host-row{ display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.host-row:last-child{ border-bottom:none; }
.host-badge{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:#fff; flex:0 0 auto; }
.host-info .host-name{ font-size:15px; font-weight:600; }
.host-info .host-role{ font-size:13px; color:var(--muted); margin-top:2px; }

.poster-rail{ display:flex; gap:16px; }
.poster-card{ flex:1; height:170px; border-radius:var(--r-md); display:flex; flex-direction:column; justify-content:space-between; padding:20px; position:relative; }
.poster-card svg{ width:28px; height:28px; opacity:.9; }
.poster-label{ font-size:16px; font-weight:700; letter-spacing:-.01em; }
.poster-sub{ font-size:13px; font-weight:500; opacity:.85; margin-top:3px; }

.ts-list{ display:flex; flex-direction:column; }
.ts-row{ display:flex; align-items:center; gap:16px; padding:17px 0; border-bottom:1px solid rgba(255,255,255,0.08); text-decoration:none; color:inherit; }
.ts-row:last-child{ border-bottom:none; }
.ts-row:hover{ opacity:.75; }
.ts-row--past{ opacity:.45; }
.ts-row--past:hover{ opacity:.45; }
/* Blank row between months on Tematski raspored - same box height as a real
   row (so the gap reads as "one row tall"), but nothing is rendered: no
   border, no dot, no text, not clickable. */
.ts-row.ts-month-gap{ visibility:hidden; border-bottom:none; pointer-events:none; }
.ts-dot{ width:14px; height:14px; border-radius:50%; flex:0 0 auto; }
.ts-info{ flex:1; min-width:0; }
.ts-title{ font-size:16px; font-weight:600; letter-spacing:-.005em; }
.ts-host{ font-size:13.5px; color:var(--muted); margin-top:2px; }
.ts-when{ text-align:right; flex:0 0 auto; }
.ts-date{ font-size:15px; font-weight:600; color:var(--text); white-space:nowrap; }
.ts-day{ font-size:12px; color:var(--muted); margin-top:2px; }
.ts-day.soon{ color:var(--accent); font-weight:600; }
.ts-chevron{ flex:0 0 auto; width:16px; height:16px; color:var(--muted); opacity:.6; }

.shop-topbar{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.cart-pill{ display:flex; align-items:center; gap:9px; background:var(--surface); border-radius:var(--r-pill); padding:11px 18px; text-decoration:none; color:var(--text); font-size:14.5px; font-weight:600; }
.cart-pill svg{ width:17px; height:17px; opacity:.8; }
.filter-rail{ display:flex; gap:10px; flex-wrap:wrap; }
.filter-chip{ font-size:14.5px; font-weight:600; padding:11px 20px; border-radius:var(--r-pill); background:var(--surface); color:var(--muted); text-decoration:none; }
.filter-chip.active{ background:var(--text); color:#000; }

.shop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px; }
.product-card{ background:var(--surface); border-radius:var(--r-md); overflow:hidden; text-decoration:none; color:inherit; display:block; transition:transform .15s; }
.product-card:hover{ transform:translateY(-3px); }
.product-image{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 30% 20%, rgba(0,113,227,0.18), transparent 60%), #131320; position:relative; overflow:hidden; }
.product-image img{ width:100%; height:100%; object-fit:cover; }
.product-image svg{ width:44px; height:44px; opacity:.5; }
.product-badge{ position:absolute; top:14px; left:14px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:rgba(0,0,0,0.4); padding:5px 9px; border-radius:var(--r-pill); color:var(--text); }
.product-info{ padding:18px 20px 20px; }
.product-name{ font-size:14.5px; font-weight:600; letter-spacing:-.005em; line-height:1.3; }
.product-variants{ font-size:12.5px; color:var(--muted); margin-top:4px; }
.product-price{ font-size:16px; font-weight:700; color:var(--text); margin-top:10px; }

.pd-layout{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; margin-top:20px; }
.pd-gallery{ aspect-ratio:1; border-radius:var(--r-md); background:radial-gradient(circle at 30% 20%, rgba(0,113,227,0.18), transparent 60%), #131320; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pd-gallery img{ width:100%; height:100%; object-fit:cover; }
.pd-gallery svg{ width:84px; height:84px; opacity:.4; }
.pd-name{ font-size:32px; font-weight:700; letter-spacing:-.02em; }
.pd-price{ font-size:22px; font-weight:700; color:var(--accent); margin-top:10px; }
.pd-desc{ font-size:15px; color:var(--muted); line-height:1.6; margin-top:18px; }
.option-group{ margin-top:28px; }
.option-label{ font-size:14px; font-weight:600; color:var(--text); margin-bottom:12px; }
.option-label span{ color:var(--muted); font-weight:400; }
.swatch-row{ display:flex; gap:12px; flex-wrap:wrap; }
.swatch{ width:38px; height:38px; border-radius:50%; border:2px solid transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.swatch.selected{ border-color:var(--accent); }
.swatch i{ width:30px; height:30px; border-radius:50%; display:block; }
.size-row{ display:flex; gap:10px; flex-wrap:wrap; }
.size-chip{ min-width:48px; text-align:center; padding:11px 16px; border-radius:var(--r-sm); background:var(--surface); font-size:14px; font-weight:600; color:var(--text); cursor:pointer; border:none; }
.size-chip.selected{ background:var(--text); color:#000; }
.qty-row{ display:flex; align-items:center; gap:18px; margin-top:28px; }
.qty-stepper{ display:flex; align-items:center; background:var(--surface); border-radius:var(--r-pill); overflow:hidden; }
.qty-stepper button{ width:42px; height:42px; border:none; background:none; color:var(--text); font-size:19px; font-weight:600; cursor:pointer; }
.qty-stepper span,.qty-stepper input{ width:36px; text-align:center; font-size:15px; font-weight:600; background:none; border:none; color:var(--text); }
.pd-cta{ margin-top:32px; }
.pd-cta a,.pd-cta button{ display:inline-block; padding:16px 40px; border-radius:var(--r-pill); background:var(--accent); color:#fff; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; }

.rev-summary{ display:flex; align-items:center; gap:24px; }
.rev-score{ font-size:48px; font-weight:700; letter-spacing:-.02em; color:#fff; line-height:1; }
.rev-stars{ display:flex; gap:2px; margin-top:8px; }
.rev-stars svg{ width:15px; height:15px; }
.rev-count{ font-size:13px; color:var(--muted); margin-top:6px; }
.rev-bars{ flex:1; display:flex; flex-direction:column; gap:6px; max-width:320px; }
.rev-bar-row{ display:flex; align-items:center; gap:10px; }
.rev-bar-row span{ font-size:11.5px; color:var(--muted); width:10px; }
.rev-bar-track{ flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,0.08); overflow:hidden; }
.rev-bar-fill{ height:100%; background:#f5c344; border-radius:3px; }
.rev-list{ display:flex; flex-direction:column; margin-top:12px; }
.rev-row{ padding:18px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.rev-row:last-child{ border-bottom:none; }
.rev-top{ display:flex; align-items:center; gap:11px; }
.rev-avatar{ width:36px; height:36px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; flex:0 0 auto; }
.rev-name{ font-size:14.5px; font-weight:600; }
.rev-date{ font-size:12px; color:var(--muted); margin-top:1px; }
.rev-row-stars{ display:flex; gap:2px; margin:9px 0 7px 47px; }
.rev-row-stars svg{ width:13px; height:13px; }
.rev-text{ font-size:14.5px; color:var(--muted); line-height:1.55; margin-left:47px; }

.state-label{ margin:8px 0 12px; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); }
.gate-card{ border-radius:var(--r-md); padding:28px; background:var(--surface); text-align:center; }
.gate-card p{ font-size:14.5px; color:var(--muted); line-height:1.5; margin-bottom:18px; }
.gate-card a{ display:inline-block; padding:12px 26px; border-radius:var(--r-pill); background:var(--accent); color:#fff; font-size:14.5px; font-weight:600; text-decoration:none; }
.write-review{ border-radius:var(--r-md); padding:26px; background:var(--surface); }
.write-review .rev-top{ margin-bottom:14px; }
.write-stars{ display:flex; gap:6px; margin-bottom:16px; }
.write-stars svg{ width:24px; height:24px; }
.write-textarea{ width:100%; background:var(--bg); border:1px solid rgba(255,255,255,0.08); border-radius:var(--r-sm); padding:14px 16px; font-size:14.5px; color:var(--text); font-family:'Inter',sans-serif; min-height:90px; resize:none; }
.write-submit{ display:inline-block; margin-top:14px; padding:13px 26px; text-align:center; border-radius:var(--r-pill); background:var(--accent); color:#fff; font-size:14.5px; font-weight:600; text-decoration:none; border:none; cursor:pointer; }

.cart-layout{ display:grid; grid-template-columns:1fr 380px; gap:56px; align-items:start; margin-top:44px; }
.cart-list{ display:flex; flex-direction:column; }
.cart-row{ display:flex; gap:18px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.cart-row:last-child{ border-bottom:none; }
.cart-thumb{ width:84px; height:84px; border-radius:var(--r-sm); background:radial-gradient(circle at 30% 20%, rgba(0,113,227,0.18), transparent 60%), #131320; display:flex; align-items:center; justify-content:center; flex:0 0 auto; overflow:hidden; }
.cart-thumb img{ width:100%; height:100%; object-fit:cover; }
.cart-thumb svg{ width:34px; height:34px; opacity:.5; }
.cart-info{ flex:1; min-width:0; }
.cart-name{ font-size:16px; font-weight:600; }
.cart-meta{ font-size:13px; color:var(--muted); margin-top:3px; }
.cart-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.cart-qty{ display:flex; align-items:center; background:var(--surface); border-radius:var(--r-pill); }
.cart-qty button{ width:32px; height:32px; border:none; background:none; color:var(--text); font-size:16px; cursor:pointer; }
.cart-qty span,.cart-qty input{ width:28px; text-align:center; font-size:14px; font-weight:600; background:none; border:none; color:var(--text); }
.cart-price{ font-size:16px; font-weight:700; }
.order-summary{ border-radius:var(--r-md); padding:26px; background:var(--surface); }
.summary-row{ display:flex; justify-content:space-between; font-size:14.5px; color:var(--muted); padding:9px 0; }
.summary-row.total{ border-top:1px solid rgba(255,255,255,0.1); margin-top:8px; padding-top:18px; font-size:18px; font-weight:700; color:var(--text); }
.summary-row.total span:last-child{ color:var(--text); }
.place-order{ margin-top:24px; }
/* Scoped to button only (not "a") - WooCommerce reuses the real ".place-order"
   class name for the wrapper around its actual #place_order button, which
   also contains the (unstyled-on-purpose) privacy-policy link text right
   above it. A blanket ".place-order a" rule was turning that plain text
   link into a full-width blue pill with invisible text (same color as its
   own background), since WooCommerce's real order button is always a
   <button>, never an <a>. */
.place-order button{ display:block; width:100%; text-align:center; padding:17px 0; border-radius:var(--r-pill); background:var(--accent); color:#fff; font-size:16px; font-weight:600; text-decoration:none; border:none; cursor:pointer; }

.checkout-layout{ display:grid; grid-template-columns:1fr 380px; gap:56px; align-items:start; margin-top:44px; }
.form-section{ margin-bottom:40px; }
.form-section:last-child{ margin-bottom:0; }
.form-group{ margin-top:16px; }
.form-group:first-child{ margin-top:0; }
.form-label{ font-size:13px; font-weight:600; color:var(--muted); margin-bottom:9px; text-transform:uppercase; letter-spacing:.03em; display:block; }
.form-input{ width:100%; background:var(--surface); border:1px solid rgba(255,255,255,0.08); border-radius:var(--r-sm); padding:14px 16px; font-size:15px; color:var(--text); font-family:'Inter',sans-serif; }
.form-input::placeholder{ color:var(--muted); }
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.option-card{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--r-sm); background:var(--surface); border:1.5px solid transparent; margin-bottom:10px; }
.option-card.selected{ border-color:var(--accent); }
.option-radio{ width:21px; height:21px; border-radius:50%; border:2px solid rgba(255,255,255,0.2); flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.option-card.selected .option-radio{ border-color:var(--accent); }
.option-radio i{ width:11px; height:11px; border-radius:50%; background:var(--accent); display:none; }
.option-card.selected .option-radio i{ display:block; }
.option-text{ flex:1; }
.option-title{ font-size:15px; font-weight:600; }
.option-sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.option-cost{ font-size:14px; font-weight:600; color:var(--text); }

.auth-page{ display:flex; justify-content:center; padding:64px 0 40px; }
.auth-card{ width:420px; }
.auth-wrap{ text-align:center; }
.auth-icon{ width:60px; height:60px; border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.auth-icon svg{ width:26px; height:26px; color:var(--accent); }
.auth-title{ font-size:28px; font-weight:700; letter-spacing:-.02em; color:#fff; }
.auth-sub{ font-size:14.5px; color:var(--muted); margin-top:9px; line-height:1.5; }
.tab-switch{ display:flex; background:var(--surface); border-radius:var(--r-pill); padding:4px; margin:26px 0 0; }
.tab-switch a{ flex:1; text-align:center; padding:11px 0; border-radius:var(--r-pill); font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; }
.tab-switch a.active{ background:var(--text); color:#000; }
.auth-check{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.auth-check .box{ width:19px; height:19px; border-radius:5px; border:1.5px solid rgba(255,255,255,0.25); }
.auth-check label{ font-size:13.5px; color:var(--muted); }
.auth-forgot{ text-align:right; margin-top:8px; }
.auth-forgot a{ font-size:13px; color:var(--accent); text-decoration:none; font-weight:500; }
.auth-divider{ display:flex; align-items:center; gap:14px; margin-top:26px; }
.auth-divider .line{ flex:1; height:1px; background:rgba(255,255,255,0.08); }
.auth-divider span{ font-size:12px; color:var(--muted); }
.auth-footer{ text-align:center; margin-top:24px; font-size:14px; color:var(--muted); }
.auth-footer a{ color:var(--accent); font-weight:600; text-decoration:none; }
.guest-link{ display:block; text-align:center; padding:15px 0; border-radius:var(--r-pill); background:var(--surface); color:var(--text); font-size:14.5px; font-weight:600; text-decoration:none; }

/* Google Sign-In button (Nextend Social Login shortcode) on the auth pages.
   The plugin renders its own nsl-container/nsl-button markup + inline SVG;
   we just control spacing/width here so it lines up with the rest of the
   auth-card's full-width buttons/inputs. */
.social-login-wrap{ margin-top:4px; }
.social-login-wrap .nsl-container{ width:100% !important; }
.social-login-wrap .nsl-container .nsl-button{ width:100% !important; border-radius:var(--r-pill) !important; }
.social-login-wrap .nsl-container .nsl-button-google{ box-shadow:none !important; }
.social-login-wrap .nsl-container .nsl-button{ min-height:52px !important; padding:15px 0 !important; }
.social-login-wrap .nsl-container .nsl-button-label-container{ font-size:15.5px !important; }
.social-login-wrap .nsl-container .nsl-button-svg-container svg{ width:32px !important; height:32px !important; }
.auth-page form{ text-align:left; }
/* WooCommerce's own bundled woocommerce.css puts a light lavender box
   (border/padding/margin) around form.login / form.register, styled for
   its default light theme. Now that these forms sit inside a ".woocommerce"
   ancestor (needed so the dark input styling below applies), that box rule
   also matches and clashes with the auth-card's own dark design - strip it. */
.auth-card form.login, .auth-card form.register{ border:none !important; padding:0 !important; margin:0 !important; border-radius:0 !important; }

.story-list{ display:flex; flex-direction:column; }
.story-card{ padding:24px 0; border-bottom:1px solid rgba(255,255,255,0.08); text-decoration:none; color:inherit; display:block; }
.story-card:last-child{ border-bottom:none; }
.story-author{ display:flex; align-items:center; gap:11px; }
.story-avatar{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex:0 0 auto; }
.story-author-name{ font-size:14px; font-weight:600; }
.story-date{ font-size:12px; color:var(--muted); }
.story-venue{ margin-left:auto; font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:var(--r-pill); }
.story-title{ font-size:20px; font-weight:700; letter-spacing:-.01em; margin-top:14px; line-height:1.3; }
.story-excerpt{ font-size:15px; color:var(--muted); margin-top:8px; line-height:1.55; max-width:70ch; }
.story-more{ display:flex; align-items:center; gap:4px; font-size:13.5px; font-weight:600; color:var(--accent); margin-top:10px; }
.story-more svg{ width:14px; height:14px; }
.story-foot{ display:flex; align-items:center; gap:20px; margin-top:14px; }
.story-stat{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.story-stat svg{ width:16px; height:16px; opacity:.7; }

.sd-venue{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; padding:6px 13px; border-radius:var(--r-pill); margin-bottom:18px; }
.sd-title{ font-size:38px; font-weight:700; letter-spacing:-.025em; line-height:1.15; color:#fff; }
.sd-author-row{ display:flex; align-items:center; gap:12px; margin-top:22px; }
.sd-avatar{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#fff; flex:0 0 auto; }
.sd-author-name{ font-size:15.5px; font-weight:600; }
.sd-date{ font-size:13px; color:var(--muted); margin-top:2px; }
.sd-body{ font-size:17px; color:var(--text); line-height:1.75; margin-top:32px; max-width:70ch; }
.sd-body p{ margin-bottom:18px; }
.sd-body p:last-child{ margin-bottom:0; }
/* Defensive resets for legacy Gutenberg content pasted into story posts:
   old blocks sometimes carry "rounded" image styles or oversized/fixed-width
   buttons authored for a much wider column, which break on our narrower
   layout. Keep images at our normal corner radius and force buttons back
   to a sane auto-sized pill in our own accent color. */
.sd-body img{ border-radius:var(--r-md); max-width:100%; height:auto; margin:1.2em 0; }
.sd-body .wp-block-button__link{
  width:auto !important; max-width:100%;
  font-size:15.5px !important; font-weight:600;
  padding:14px 28px !important; border-radius:var(--r-pill);
  background:var(--accent); color:#fff !important; text-decoration:none;
  white-space:nowrap;
}
.sd-body .wp-block-button{ width:auto !important; }
.sd-body .wp-block-buttons{ flex-wrap:wrap; }
.sd-actions{ display:flex; align-items:center; gap:24px; margin-top:32px; }
.sd-action{ display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--muted); font-weight:600; background:none; border:none; text-decoration:none; cursor:pointer; }
.sd-action svg{ width:20px; height:20px; }
.sd-action.liked{ color:#ff5c7a; }
.sd-action.liked svg{ fill:#ff5c7a; stroke:#ff5c7a; }
.comment-list{ display:flex; flex-direction:column; }
.comment-row{ padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.comment-row:last-child{ border-bottom:none; }
.comment-top{ display:flex; align-items:center; gap:10px; }
.comment-avatar{ width:29px; height:29px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:#fff; flex:0 0 auto; }
.comment-name{ font-size:13.5px; font-weight:600; }
.comment-date{ font-size:11.5px; color:var(--muted); }
.comment-text{ font-size:14px; color:var(--muted); line-height:1.5; margin:7px 0 0 39px; }

.venue-picker-label{ font-size:13px; font-weight:600; color:var(--muted); margin:16px 0 9px; }
.venue-picker{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:16px; }
.venue-chip{ display:flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--r-pill); background:var(--bg); border:1.5px solid transparent; font-size:13.5px; font-weight:600; color:var(--muted); }
.venue-chip .vdot{ width:8px; height:8px; border-radius:50%; }
.venue-chip.selected{ border-color:var(--accent); color:var(--text); }

.woocommerce-cart .entry-content,.woocommerce-checkout .entry-content,.woocommerce-account .entry-content{ max-width:none; }
.woocommerce-cart .generic-page,.woocommerce-checkout .generic-page,.woocommerce-account .generic-page{ padding-top:56px; max-width:none; margin:0; }

/* ============ WOOCOMMERCE DEFAULT-MARKUP OVERRIDES ============
   Cart, Checkout, and the add-to-cart / review forms on the product page use
   WooCommerce's own generated HTML (kept intentionally, see single-product.php
   and page.php comments) - these rules re-skin that default markup to match
   the rest of the site instead of using the plugin's own light theme. */
.woocommerce, .woocommerce-page{ color:var(--text); }
.woocommerce table.shop_table{ border:none; border-collapse:collapse; width:100%; margin:24px 0; }
.woocommerce table.shop_table th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.1); }
.woocommerce table.shop_table td{ padding:16px 12px; border-bottom:1px solid rgba(255,255,255,0.08); font-size:14.5px; }
.woocommerce table.shop_table img{ border-radius:var(--r-sm); width:64px; height:64px; object-fit:cover; }
.woocommerce .cart-collaterals,.woocommerce-cart-form{ margin-top:20px; }
.woocommerce .cart_totals{ background:var(--surface); border-radius:var(--r-md); padding:26px; max-width:380px; margin-left:auto; }
.woocommerce .cart_totals table{ width:100%; }
.woocommerce .cart_totals th,.woocommerce .cart_totals td{ border:none; padding:9px 0; font-size:14.5px; color:var(--muted); }
.woocommerce .cart_totals .order-total th,.woocommerce .cart_totals .order-total td{ border-top:1px solid rgba(255,255,255,0.1); padding-top:16px; font-size:18px; font-weight:700; color:var(--text); }
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  background:var(--accent) !important; color:#fff !important; border:none !important; border-radius:var(--r-pill) !important;
  padding:14px 28px !important; font-weight:600 !important; font-size:15px !important; text-decoration:none !important; cursor:pointer;
}
.woocommerce a.button:hover,.woocommerce button.button:hover{ background:var(--accent-hover) !important; }
.woocommerce input.qty{ background:var(--surface); border:1px solid rgba(255,255,255,0.1); border-radius:var(--r-sm); color:var(--text); padding:10px; width:64px; text-align:center; }
.woocommerce input[type=text],.woocommerce input[type=email],.woocommerce input[type=tel],.woocommerce input[type=password],
.woocommerce select, .woocommerce textarea{
  background:var(--surface) !important; border:1px solid rgba(255,255,255,0.08) !important; border-radius:var(--r-sm) !important;
  padding:13px 15px !important; font-size:15px !important; color:var(--text) !important; font-family:'Inter',sans-serif !important; width:100%;
}
.woocommerce form .form-row label{ color:var(--muted); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
/* WooCommerce's "Change password" section on My Account > Account details is a
   plain <fieldset><legend> with no theme hook - browsers render that with a
   default light-grey inset border and a white legend chip, which stands out
   badly against the dark theme. Restyle it to match the rest of the account
   forms (surface-colored panel, subtle border, muted label). */
.woocommerce-EditAccountForm fieldset{ border:1px solid var(--border); border-radius:var(--r-md); padding:22px 22px 6px; margin:28px 0 22px; }
.woocommerce-EditAccountForm fieldset legend{ padding:0 10px; margin-left:-10px; color:var(--muted); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; background:var(--bg); }
.woocommerce-checkout #payment{ background:var(--surface); border-radius:var(--r-md); padding:20px; margin-top:24px; }
.woocommerce-checkout #payment ul.payment_methods{ list-style:none; }
.woocommerce-checkout #payment div.payment_box{ background:rgba(255,255,255,0.05); border-radius:var(--r-sm); color:var(--text); }
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
  background:var(--surface) !important; border:none !important; color:var(--text) !important; border-radius:var(--r-sm); padding:16px 20px 16px 50px !important; box-shadow:none !important; outline:none !important; position:relative;
}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before,.woocommerce-noreviews::before{ left:18px !important; top:50% !important; transform:translateY(-50%); }
/* Icon font "WooCommerce" nije ucitan u ovoj temi, pa se prije ovdje prikazivala
   prazna plava kockica (tofu glif) ispred ovih poruka. Jednostavno je uklanjamo. */
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before,.woocommerce-noreviews::before{ content:none !important; }
.woocommerce-message::before,.woocommerce-info::before{ color:var(--accent) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{ background:none; border:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ color:var(--muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:var(--text); }
.star-rating{ color:#f5c344 !important; }
.wc-add-to-cart-wrap .variations{ margin:24px 0; width:100%; }
.wc-add-to-cart-wrap .variations td{ border:none; padding:8px 0; }
.wc-add-to-cart-wrap .single_add_to_cart_button{ margin-top:20px; width:100%; text-align:center; padding:16px 40px !important; font-size:16px !important; }
.wc-add-to-cart-wrap .quantity{ display:inline-flex; align-items:center; background:var(--surface); border-radius:var(--r-pill); padding:4px; margin-right:12px; }
.wc-add-to-cart-wrap .quantity input.qty{ background:none; border:none; width:40px; }
#comments .comment-form-rating label,#comments label{ color:var(--muted); font-size:13px; }
#respond textarea, #commentform textarea{ min-height:100px; }

/* RESPONSIVE (mobile mockup values folded in) */
@media (max-width:900px){
  .wrap{ padding:0 20px; }
  .nav-inner{ padding:0 20px; justify-content:space-between; }
  .nav-toggle{ display:flex; }

  /* Mobile nav: hidden drawer under the header, opened via .nav-toggle */
  .nav-links{
    display:none; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(0,0,0,0.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,0.08);
    max-height:calc(100vh - 88px); overflow-y:auto;
    padding:8px 20px 20px;
  }
  .nav-links.nav-mobile-open{ display:flex; }
  .nav-links > li{ width:100%; }
  .nav-links .menu-item-has-children{ padding-bottom:0; margin-bottom:0; } /* desktop-only hover bridge, unset here */
  .nav-links a{ font-size:16px; opacity:1; }
  .nav-links > li > a{ display:flex; align-items:center; padding:15px 2px; border-bottom:1px solid rgba(255,255,255,0.07); }
  .nav-links > li:last-child > a{ border-bottom:none; }

  /* Dropdown submenu becomes an inline, static expand (not a floating box) on mobile */
  .nav-links .sub-menu{
    position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none;
    box-shadow:none; background:none; border:none; border-radius:0; min-width:0;
    display:none; padding:0 0 8px;
  }
  .nav-links .menu-item-has-children.nav-open > .sub-menu{ display:block; transform:none; }
  .nav-links .sub-menu .menu-item-has-children > a::after{ display:inline-block; transform:rotate(45deg); margin-top:-3px; }
  .nav-links .sub-menu .menu-item-has-children.nav-open > a::after{ transform:rotate(225deg); margin-top:2px; }
  .nav-links .sub-menu a{ padding:12px 14px; font-size:14.5px; opacity:.8; }
  .nav-links .sub-menu .sub-menu{ padding-left:14px; }
  .menu-item-arhiva > .sub-menu{ width:auto; max-height:none; overflow:visible; padding:0 0 8px; }
  .menu-item-arhiva > .sub-menu > li > a{ overflow:visible; text-overflow:clip; white-space:normal; }
  .nav-links .nav-divider > a{ padding:14px 2px 6px !important; }

  .nav-cta,.nav-account,.nav-sep{ display:none; } /* shown instead as rows at the bottom of the open mobile menu */
  .nav-mobile-cta-item{ display:block; margin-top:10px; }
  .nav-links .nav-mobile-cta-item a.nav-links-cta-mobile{
    display:block; text-align:center; background:var(--accent); color:#fff; font-weight:600;
    font-size:15px; padding:13px 0; border-radius:var(--r-pill); text-decoration:none; border-bottom:none;
  }
  .nav-mobile-login-item{ display:block; margin-top:10px; }
  .nav-mobile-account-row{ display:flex; align-items:stretch; gap:8px; }
  .nav-links .nav-mobile-login-item a.nav-links-login-mobile{ flex:1; }
  .nav-links-logout-mobile{
    display:flex; align-items:center; justify-content:center; flex:0 0 auto;
    width:48px; border:1.5px solid #ff4d4f; border-radius:var(--r-pill); color:#ff4d4f; text-decoration:none;
  }
  .nav-links-logout-mobile .nav-logout-icon{ width:18px; height:18px; }
  .nav-links .nav-mobile-login-item a.nav-links-login-mobile{
    display:flex; align-items:center; justify-content:center; gap:8px; text-align:center; background:transparent; color:#fff; font-weight:600;
    font-size:15px; padding:11.5px 0; border-radius:var(--r-pill); text-decoration:none; border:1.5px solid var(--accent);
  }
  .nav-links .nav-mobile-login-item a.nav-links-login-mobile .nav-login-avatar{
    width:22px; height:22px;
  }

  .hero h1{ font-size:44px; }
  .hero p{ font-size:16px; }
  .card-grid{ grid-template-columns:1fr; }
  .two-col{ grid-template-columns:1fr; }
  .theme-grid{ grid-template-columns:repeat(2,1fr); }
  .story-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .scoreboard{ gap:36px; }
  .detail-layout,.cart-layout,.checkout-layout{ grid-template-columns:1fr; gap:32px; }
  .pd-layout{ grid-template-columns:1fr; gap:32px; }
  .shop-grid{ grid-template-columns:repeat(2,1fr); }
  .poster-rail{ flex-direction:column; }
  .form-row-2{ grid-template-columns:1fr; }
  .auth-card{ width:100%; }
  .page-title{ font-size:34px; }
}

/* Medium desktop / small laptop widths: full nav row (menu links + CTA + account buttons) no longer fits in one line without overlapping, so reuse the same mobile drawer pattern here too. */
@media (min-width:901px) and (max-width:1200px){
  .nav-toggle{ display:flex; }

  /* Mobile nav: hidden drawer under the header, opened via .nav-toggle */
  .nav-links{
    display:none; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(0,0,0,0.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,0.08);
    max-height:calc(100vh - 88px); overflow-y:auto;
    padding:8px 20px 20px;
  }
  .nav-links.nav-mobile-open{ display:flex; }
  .nav-links > li{ width:100%; }
  .nav-links .menu-item-has-children{ padding-bottom:0; margin-bottom:0; } /* desktop-only hover bridge, unset here */
  .nav-links a{ font-size:16px; opacity:1; }
  .nav-links > li > a{ display:flex; align-items:center; padding:15px 2px; border-bottom:1px solid rgba(255,255,255,0.07); }
  .nav-links > li:last-child > a{ border-bottom:none; }

  /* Dropdown submenu becomes an inline, static expand (not a floating box) on mobile */
  .nav-links .sub-menu{
    position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none;
    box-shadow:none; background:none; border:none; border-radius:0; min-width:0;
    display:none; padding:0 0 8px;
  }
  .nav-links .menu-item-has-children.nav-open > .sub-menu{ display:block; transform:none; }
  .nav-links .sub-menu .menu-item-has-children > a::after{ display:inline-block; transform:rotate(45deg); margin-top:-3px; }
  .nav-links .sub-menu .menu-item-has-children.nav-open > a::after{ transform:rotate(225deg); margin-top:2px; }
  .nav-links .sub-menu a{ padding:12px 14px; font-size:14.5px; opacity:.8; }
  .nav-links .sub-menu .sub-menu{ padding-left:14px; }
  .menu-item-arhiva > .sub-menu{ width:auto; max-height:none; overflow:visible; padding:0 0 8px; }
  .menu-item-arhiva > .sub-menu > li > a{ overflow:visible; text-overflow:clip; white-space:normal; }
  .nav-links .nav-divider > a{ padding:14px 2px 6px !important; }

  .nav-cta,.nav-account,.nav-sep{ display:none; } /* shown instead as rows at the bottom of the open mobile menu */
  .nav-mobile-cta-item{ display:block; margin-top:10px; }
  .nav-links .nav-mobile-cta-item a.nav-links-cta-mobile{
    display:block; text-align:center; background:var(--accent); color:#fff; font-weight:600;
    font-size:15px; padding:13px 0; border-radius:var(--r-pill); text-decoration:none; border-bottom:none;
  }
  .nav-mobile-login-item{ display:block; margin-top:10px; }
  .nav-mobile-account-row{ display:flex; align-items:stretch; gap:8px; }
  .nav-links .nav-mobile-login-item a.nav-links-login-mobile{ flex:1; }
  .nav-links-logout-mobile{
    display:flex; align-items:center; justify-content:center; flex:0 0 auto;
    width:48px; border:1.5px solid #ff4d4f; border-radius:var(--r-pill); color:#ff4d4f; text-decoration:none;
  }
  .nav-links-logout-mobile .nav-logout-icon{ width:18px; height:18px; }
  .nav-links .nav-mobile-login-item a.nav-links-login-mobile{
    display:flex; align-items:center; justify-content:center; gap:8px; text-align:center; background:transparent; color:#fff; font-weight:600;
    font-size:15px; padding:11.5px 0; border-radius:var(--r-pill); text-decoration:none; border:1.5px solid var(--accent);
  }
  .nav-links .nav-mobile-login-item a.nav-links-login-mobile .nav-login-avatar{
    width:22px; height:22px;
  }
}


/* Cookie consent bar */
.cookie-bar{
  position:fixed; left:24px; right:24px; bottom:24px; z-index:60;
  max-width:640px; margin:0 auto;
  background:rgba(28,28,30,0.82); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.10); border-radius:var(--r-md);
  padding:20px 22px; box-shadow:0 20px 50px rgba(0,0,0,0.45);
  display:flex; align-items:center; gap:18px;
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.cookie-bar.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.cookie-bar p{ flex:1; font-size:13.5px; line-height:1.55; color:var(--muted); }
.cookie-bar p strong{ color:var(--text); font-weight:600; }
.cookie-bar-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.cookie-bar-accept{
  background:var(--accent); color:#fff; font-size:13.5px; font-weight:600;
  padding:10px 18px; border-radius:var(--r-pill); border:none; cursor:pointer;
  white-space:nowrap; transition:background .15s;
}
.cookie-bar-accept:hover{ background:var(--accent-hover); }
.cookie-bar-close{
  background:none; border:none; color:var(--muted); cursor:pointer;
  width:28px; height:28px; flex:0 0 auto; border-radius:50%;
  font-size:15px; line-height:1; transition:background .15s, color .15s;
}
.cookie-bar-close:hover{ background:rgba(255,255,255,0.08); color:var(--text); }
@media (max-width:560px){
  .cookie-bar{ left:14px; right:14px; bottom:14px; padding:18px; flex-direction:column; align-items:stretch; gap:14px; }
  .cookie-bar-actions{ justify-content:space-between; }
  .cookie-bar-accept{ flex:1; text-align:center; }
}


/* ------------------------------------------------------------------
 * Player loyalty UI (profil / "Moji kvizovi" tab / QR check-in)
 * ------------------------------------------------------------------ */
.profile-summary{ margin-bottom:28px; }
.profile-name{ font-size:24px; font-weight:700; color:#fff; }
.profile-meta{ display:flex; gap:20px; margin-top:8px; color:var(--muted); font-size:14px; flex-wrap:wrap; }
.profile-meta b{ color:var(--text); font-weight:600; }
.loyalty-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-bottom:8px; }
.loyalty-card{ background:var(--surface); border-radius:var(--r-md); padding:20px; border:1px solid var(--border); }
.loyalty-card.is-ready{ border-color:#30d158; box-shadow:0 0 0 1px #30d158 inset; }
.loyalty-venue{ font-weight:700; font-size:16px; color:#fff; margin-bottom:12px; }
.loyalty-bar{ height:8px; border-radius:4px; background:rgba(255,255,255,0.08); overflow:hidden; }
.loyalty-bar-fill{ height:100%; background:linear-gradient(90deg,var(--accent),#30d158); border-radius:4px; transition:width .3s; }
.loyalty-count{ margin-top:10px; font-size:13px; color:var(--muted); }
.loyalty-badge{ margin-top:12px; font-size:13px; font-weight:700; color:#30d158; }

/* Check-in stranica (skeniranje QR koda) - vizualna kartica umjesto golog teksta */
.checkin-card{
	background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
	padding:40px 28px; box-shadow:0 24px 60px rgba(0,0,0,0.5); text-align:center;
	animation:vqf-pop-in .35s ease;
}
@keyframes vqf-pop-in{ from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } }
.checkin-icon{
	width:72px; height:72px; border-radius:50%; margin:0 auto 18px;
	display:flex; align-items:center; justify-content:center; font-size:32px;
}
.checkin-icon.success{ background:rgba(48,209,88,0.15); }
.checkin-icon.error{ background:rgba(255,69,58,0.15); }
.checkin-venue{ margin-top:10px; font-size:14.5px; font-weight:600; color:var(--text); display:flex; align-items:center; justify-content:center; gap:8px; }
.checkin-venue-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.loyalty-badge-title{ margin-top:22px; font-size:28px; font-weight:700; letter-spacing:-.02em; color:#30d158; line-height:1.25; }
.loyalty-badge-sub{ margin-top:10px; font-size:14.5px; color:#30d158; line-height:1.5; }


/* Avatar sustav: preview na Detalji računa (upload) i header na Moj račun */
.vqf-avatar-preview{
  width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.vqf-myaccount-avatar-header{
  display:flex; align-items:center; gap:14px; margin-bottom:24px;
}
.vqf-myaccount-avatar{
  width:72px; height:72px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.vqf-myaccount-avatar-name{
  font-size:18px; font-weight:700; color:var(--text);
}

/* ============================================================
 * Moj račun: redizajn sidebar navigacije (desktop + mobile)
 * ============================================================ */
.woocommerce-account .woocommerce{
  display:flex; align-items:flex-start; gap:28px;
}
.woocommerce-account .woocommerce-MyAccount-navigation{
  float:none; width:260px; flex-shrink:0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:8px; position:sticky; top:104px;
}
.woocommerce-account .woocommerce-MyAccount-content{
  float:none; width:auto; flex:1; min-width:0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:32px;
}
.vqf-myaccount-avatar-header{
  display:flex; align-items:center; gap:12px;
  padding:10px 10px 16px; margin-bottom:8px;
  border-bottom:1px solid var(--border);
}
.vqf-myaccount-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.vqf-myaccount-avatar-name{ font-size:15px; font-weight:700; color:var(--text); line-height:1.25; }
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-MyAccount-navigation li{ margin:0; }
.woocommerce-MyAccount-navigation li a{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; margin-bottom:2px;
  border-radius:var(--r-sm);
  color:var(--muted); font-size:14.5px; font-weight:600;
  text-decoration:none; transition:background .15s ease, color .15s ease;
}
.woocommerce-MyAccount-navigation li a::before{
  content:""; width:18px; height:18px; flex-shrink:0;
  background-color:currentColor;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-image:var(--nav-icon); mask-image:var(--nav-icon);
}
.woocommerce-MyAccount-navigation li a:hover{ background:rgba(255,255,255,0.06); color:var(--text); }
.woocommerce-MyAccount-navigation li.is-active a{ background:var(--accent); color:#fff; }
.woocommerce-MyAccount-navigation-link--raskid-ugovora a,
.woocommerce-MyAccount-navigation-link--customer-logout a{ color:var(--muted); opacity:.85; }
.woocommerce-MyAccount-navigation-link--raskid-ugovora a:hover,
.woocommerce-MyAccount-navigation-link--customer-logout a:hover{ background:rgba(255,90,90,0.1); color:#ff8a8a; opacity:1; }
.woocommerce-MyAccount-navigation-link--dashboard a{ --nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--orders a{ --nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--moji-kvizovi a{ --nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M17 5h3a2 2 0 0 1-2 5M7 5H4a2 2 0 0 0 2 5'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--downloads a{ --nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-address a{ --nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--payment-methods a{ --nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-account a{ --nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--raskid-ugovora a{ --nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cline x1='9.5' y1='12.5' x2='14.5' y2='17.5'/%3E%3Cline x1='14.5' y1='12.5' x2='9.5' y2='17.5'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--customer-logout a{ --nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E"); }
@media (max-width:900px){
  .woocommerce-account .woocommerce{ flex-direction:column; align-items:stretch; gap:16px; }
  .woocommerce-account .woocommerce-MyAccount-navigation{
    width:100%; position:static; padding:0; background:none; border:none; border-radius:0;
  }
  .vqf-myaccount-avatar-header{ padding:2px 2px 12px; }
  .woocommerce-MyAccount-navigation ul{
    display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch;
  }
  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{ display:none; }
  .woocommerce-MyAccount-navigation li a{
    white-space:nowrap; padding:9px 16px; border-radius:var(--r-pill);
    background:var(--surface); border:1px solid var(--border); margin-bottom:0;
  }
  .woocommerce-MyAccount-navigation li a::before{ width:15px; height:15px; }
  .woocommerce-MyAccount-navigation li.is-active a{ border-color:var(--accent); }
  .woocommerce-account .woocommerce-MyAccount-content{ padding:20px; }
}


/* ============================================================
 * Fix paketa: Nadzorna ploča nav, Povijest dolazaka tablica,
 * mobile footer, login/register poravnanje polja.
 * ============================================================ */

/* "Povijest dolazaka" (check-in history) dijeli .results-table klasu s
 * ljestvicom rezultata, ali nema rang stupac - ta pravila (34px prvi stupac,
 * desno poravnat zadnji stupac) su za nju besmislena i razbijaju izgled.
 * Override samo za ovu tablicu preko dodatne .checkin-table klase. */
.results-table.checkin-table th:first-child,
.results-table.checkin-table td:first-child{ width:auto; }
.results-table.checkin-table td:last-child,
.results-table.checkin-table th:last-child{ text-align:left; }

/* Mobile footer: logo/tagline centriran preko cijele širine na vrhu,
 * ostale kolone (Navigacija/Trgovina/Račun/Pravno) ispod u 2 stupca. */
@media (max-width:900px){
  .footer-brand{ grid-column:1 / -1; text-align:center; margin-bottom:8px; }
  .footer-col{ text-align:center; }

/* ============================================================
 * Fix: Android Chrome horizontalni scroll (watermark fixed-width
 * overflow) + Android WebView "force dark" tamnjenje card gradienta.
 * ============================================================ */
body{ max-width:100%; overflow-x:hidden; }
:root{ color-scheme:light; }
  .footer-brand img{ margin-left:auto; margin-right:auto; }
  .footer-tag{ max-width:none; margin-left:auto; margin-right:auto; }
}

/* Login forma (WooCommerce-ov default woocommerce_login_form markup) koristi
 * float-based .form-row-first/.form-row-last (48%/48% dvostupčano) za
 * korisničko ime i lozinku. Uz uzak auth-card (420px) i dulji hrvatski label
 * "Korisničko ime ili e-pošta", label se lomi u 2 retka pa polja ispadnu
 * neporavnata (lozinka počinje više od korisničkog imena). Slažemo ih puna
 * širina jedno ispod drugog - jednostavnije i uvijek poravnato, na desktopu
 * i mobitelu. */
.auth-card form.login .form-row-first,
.auth-card form.login .form-row-last,
.auth-card form.register .form-row-first,
.auth-card form.register .form-row-last{
  float:none; width:100%;
}

/* Login forma: red "Zapamti me" + gumb za prijavu (WooCommerce-ov <p class="form-row">)
 * nema nikakav layout u defaultu - checkbox i gumb samo plutaju jedno pored drugog pa se
 * neuredno lome, a gumb je nasljedio mali opci .button pill stil (padding 14px 28px, bez
 * width-a) pa ispada malen i lijevo poravnat. "Izgubili ste lozinku?" nema razmaka od
 * reda iznad. Popravljeno: checkbox red na vrhu, pa pun-sirok veci gumb ispod, pa link
 * s razmakom, centriran - isti obrazac kao "Nastavi s Google racunom" gumb ispod. */
.auth-card form.login .form-row:not(.form-row-first):not(.form-row-last){ display:flex; flex-direction:column; gap:14px; margin:22px 0 4px; }
.auth-card form.login .form-row-last{ margin-top:14px !important; }
.auth-card form.login .woocommerce-form-login__rememberme{ display:flex; align-items:center; gap:8px; margin:0; font-size:13.5px; color:var(--muted); }
.auth-card form.login .woocommerce-form-login__rememberme input{ margin:0; }
.auth-card form.login button[name="login"]{ width:100%; padding:16px 28px !important; font-size:16px !important; }
.auth-card form.login .lost_password{ margin-top:16px; text-align:center; }
.auth-card form.login .lost_password a{ font-size:13.5px; color:var(--accent); text-decoration:none; }

/* Kontrolna ploča (host/admin dashboard za QR kodove i isplatu nagrada) */
.dash-venue-card{ border-top:1px solid var(--border); padding-top:20px; margin-top:20px; }
.dash-venue-card:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.dash-venue-flex{ display:flex; gap:24px; flex-wrap:wrap; margin-top:14px; align-items:flex-start; }
.dash-qr-wrap img{ border:1px solid var(--border); border-radius:8px; padding:10px; background:#fff; }
.dash-qr-caption{ margin-top:8px; font-size:12.5px; color:var(--muted); }
.dash-players-wrap{ flex:1; min-width:260px; }
.dash-players-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.dash-players-table th, .dash-players-table td{ padding:6px 4px; border-bottom:1px solid var(--border); text-align:left; }
.dash-players-table th{ color:var(--muted); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.04em; }
.dash-btn-small{ background:var(--accent); color:#fff; border:none; border-radius:var(--r-pill); padding:6px 14px; font-size:12.5px; font-weight:600; cursor:pointer; }
.dash-btn-small:hover{ background:var(--accent-hover); }

.dash-teams-tonight-label{ color:var(--muted); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.04em; margin-bottom:8px; }
.dash-teams-tonight{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; margin-bottom:20px; }
.dash-team-chip{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:10px 14px; }
.dash-team-chip.has-ready{ border-color:#30d158; box-shadow:0 0 0 1px #30d158 inset; }
.dash-team-chip-name{ font-weight:700; font-size:14px; color:#fff; margin-bottom:4px; }
.dash-team-chip-count{ font-size:12.5px; color:var(--muted); }
.dash-team-chip-ready{ margin-top:6px; font-size:12px; font-weight:700; color:#30d158; }
.dash-team-chip{ display:flex; flex-direction:column; }
.dash-team-chip-ready-list{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.dash-team-chip-ready-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dash-team-chip-ready-name{ font-size:12px; font-weight:700; color:#30d158; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-team-chip-redeem-form{ margin:0; flex-shrink:0; }
.dash-team-chip-redeem-form .dash-btn-small{ background:#30d158; }
.dash-team-chip-redeem-form .dash-btn-small:hover{ background:#28bb4d; }
.notice-inline.success{ background:rgba(48,209,88,0.15); color:#30d158; border-radius:var(--r-sm); padding:12px 16px; margin-bottom:18px; font-size:14px; font-weight:600; }
/* "Admin panel"/"Host panel" gumb u headeru - vidljiv samo povlaštenim (admin/host) racunima */

.nav-links .nav-mobile-cta-item a.nav-links-cta-mobile.nav-links-cta-panel{ background:#30d158; }
.nav-panel-btn{ display:inline-flex; align-items:center; white-space:nowrap; background:transparent; border:1.5px solid #30d158; color:#30d158; font-size:13px; font-weight:600; padding:7px 14px; border-radius:var(--r-pill); text-decoration:none; }
.nav-panel-btn:hover{ background:rgba(48,209,88,0.12); }