/* ============================================================
   BiGameStore — Design System v3
   Editoriale / Reale — niente AI tropes
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* Superfici */
    --bg:       #0e0e0e;
    --surface:  #171717;
    --surface2: #202020;
    --surface3: #282828;
    --border:   #2a2a2a;
    --border-h: #3c3c3c;

    /* Brand */
    --red:       #d90429;
    --red-dark:  #a80320;
    --red-dim:   rgba(217,4,41,0.1);
    --red-glow:  rgba(217,4,41,0.25);
    --amber:     #f5a623;
    --amber-dim: rgba(245,166,35,0.1);
    --blue:      #1d6cf5;
    --green:     #16a34a;
    --green-dim: rgba(22,163,74,0.1);

    /* Testo */
    --white:  #f0f0f0;
    --muted:  #7a7a7a;
    --dim:    #3a3a3a;

    /* Font */
    --f-display: 'Oswald', sans-serif;
    --f-body:    'Inter', sans-serif;

    /* Misc */
    --ease: 0.2s ease;
    --r: 6px;
    --r-sm: 3px;
    --shadow: 0 4px 24px rgba(0,0,0,0.5);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:60px; }
body { font-family:var(--f-body); background:var(--bg); color:var(--white); overflow-x:hidden; line-height:1.6; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    position:sticky; top:0; z-index:200;
    background:rgba(14,14,14,0.96);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
    transition:border-color var(--ease);
}
.site-header.scrolled { border-color:var(--red); }
.header-inner {
    max-width:1240px; margin:0 auto;
    padding:0 1.5rem; height:60px;
    display:flex; align-items:center; gap:2rem;
}

.brand { display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.brand-logo {
    height:60px; width:60px; object-fit:contain;
    mix-blend-mode: screen; /* Hides the black background */
}
.brand-text { display:flex; flex-direction:column; }
.brand-name {
    font-family:var(--f-display); font-size:1.75rem; font-weight:700;
    color:var(--white); letter-spacing:.5px; line-height:1;
}
.brand-name span { color:var(--red); }
.brand-tag {
    font-size:.62rem; color:var(--muted); letter-spacing:.1em;
    text-transform:uppercase; font-family:var(--f-display);
}

.main-nav { display:flex; align-items:center; gap:.1rem; margin-left:auto; }
.nav-link {
    padding:.45rem .85rem; color:var(--muted); font-size:.88rem;
    font-weight:500; text-decoration:none; font-family:var(--f-body);
    transition:color var(--ease); border-bottom:2px solid transparent;
    letter-spacing:.01em;
}
.nav-link:hover { color:var(--white); }
.nav-link.active { color:var(--white); border-bottom-color:var(--red); }

.rt-indicator {
    display:flex; align-items:center; gap:5px; padding:.3rem .7rem;
    background:var(--green-dim); border:1px solid rgba(22,163,74,.25);
    border-radius:var(--r-sm); font-size:.7rem; font-weight:600;
    color:var(--green); opacity:0; transition:opacity .5s; flex-shrink:0;
}
.rt-indicator.visible { opacity:1; }
.rt-dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse-dot 2s ease infinite; }
@keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.5);}50%{box-shadow:0 0 0 4px transparent;} }

.hamburger {
    display:none; background:none; border:1px solid var(--border-h);
    color:var(--white); padding:.4rem .6rem; cursor:pointer; font-size:.95rem;
    border-radius:var(--r-sm); margin-left:auto; transition:all var(--ease);
}
.hamburger:hover { border-color:var(--red); color:var(--red); }
.mobile-menu { display:none; flex-direction:column; border-top:1px solid var(--border); }
.mobile-menu.open { display:flex; }
.mobile-link {
    padding:.85rem 1.5rem; color:var(--muted); font-size:.95rem; font-weight:500;
    text-decoration:none; transition:all var(--ease); border-left:3px solid transparent;
}
.mobile-link:hover { color:var(--white); background:var(--surface); border-left-color:var(--red); }
@media(max-width:900px) {
    .main-nav { display:none; }
    .hamburger { display:block; }
    .brand-tag { display:none; }
}

/* ============================================================
   HERO — Compact Version
   ============================================================ */
.hero-section {
    position:relative; min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:5rem 1.5rem 4rem; overflow:hidden;
}
/* Hero compatto (homepage) */
.hero-section.hero-compact {
    min-height:auto;
    padding:5rem 1.5rem 3.5rem;
}
/* Sottile linea rossa in fondo all'hero */
.hero-section::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, transparent, var(--red) 30%, var(--amber) 70%, transparent);
}
/* Background: texture dot-grid molto sottile */
.hero-section::before {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size:28px 28px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent);
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent);
}

.hero-content { position:relative; z-index:1; max-width:720px; }

.hero-kicker {
    display:inline-block; padding:.3rem 1rem;
    background:var(--red); color:#fff;
    font-family:var(--f-display); font-size:.8rem; font-weight:600;
    letter-spacing:.12em; text-transform:uppercase;
    margin-bottom:1.75rem;
}

.hero-title {
    font-family:var(--f-display); font-size:clamp(3rem,8vw,5.5rem);
    font-weight:700; line-height:.95; letter-spacing:-1px;
    text-transform:uppercase; margin-bottom:1.1rem;
}
.hero-title .t1 { display:block; color:var(--white); }
.hero-title .t2 { display:block; color:var(--red); }

.hero-sub {
    font-size:1rem; color:var(--muted); max-width:500px;
    margin:0 auto 1.5rem; line-height:1.7; font-weight:400;
}

/* Hero search bar */
.hero-search-wrap { max-width:560px; margin:0 auto 2rem; }
.hero-search-box {
    display:flex; align-items:center; gap:.6rem;
    background:var(--surface); border:1.5px solid var(--border-h);
    border-radius:var(--r); padding:.55rem 1rem;
    transition:border-color var(--ease), box-shadow var(--ease);
}
.hero-search-box:focus-within {
    border-color:var(--red); box-shadow:0 0 0 3px var(--red-glow);
}
.hero-search-icon { color:var(--muted); font-size:.95rem; flex-shrink:0; }
.hero-search-input {
    flex:1; background:none; border:none; outline:none;
    color:var(--white); font-family:var(--f-body); font-size:.95rem;
    min-width:0;
}
.hero-search-input::placeholder { color:var(--dim); }
.hero-search-clear {
    background:none; border:none; color:var(--muted); cursor:pointer;
    font-size:.85rem; padding:.15rem .35rem; border-radius:3px;
    transition:color var(--ease);
}
.hero-search-clear:hover { color:var(--white); }
.hero-search-noresult {
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
    padding:1rem; border:1px solid var(--border); border-radius:var(--r-sm);
    background:var(--surface2); margin-top:.5rem;
    font-size:.88rem; color:var(--muted); text-align:center;
}
.hero-search-noresult i { font-size:1.6rem; color:var(--dim); }
.hero-search-noresult strong { color:var(--white); }

/* Section footer CTA "Richiedi ora" */
.section-request-footer {
    display:flex; align-items:center; justify-content:center;
    gap:1rem; flex-wrap:wrap; margin-top:2rem; padding:1.1rem 1.5rem;
    border:1px dashed var(--border-h); border-radius:var(--r-sm);
    background:rgba(255,255,255,.02);
}
.section-request-footer span { font-size:.88rem; color:var(--muted); }
.btn-request-inline {
    display:inline-flex; align-items:center; gap:6px;
    padding:.45rem 1rem; border:1px solid var(--red);
    background:var(--red-dim); color:var(--red);
    font-family:var(--f-display); font-size:.82rem; font-weight:600;
    letter-spacing:.05em; text-transform:uppercase; cursor:pointer;
    border-radius:var(--r-sm); transition:all var(--ease);
}
.btn-request-inline:hover { background:var(--red); color:#fff; }

/* Trust badges */
.hero-trust {
    display:flex; align-items:center; justify-content:center;
    flex-wrap:wrap; gap:.5rem;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r); padding:.75rem 1.25rem;
    width:fit-content; margin:0 auto;
}
.trust-item {
    display:flex; align-items:center; gap:.6rem;
    padding:.1rem .5rem;
}
.trust-item i { font-size:1.1rem; color:var(--red); flex-shrink:0; }
.trust-item div { display:flex; flex-direction:column; text-align:left; }
.trust-item strong { font-size:.88rem; font-weight:700; color:var(--white); line-height:1.2; }
.trust-item span { font-size:.72rem; color:var(--muted); }
.trust-divider { width:1px; height:32px; background:var(--border); flex-shrink:0; }
@media(max-width:600px){ .trust-divider{display:none;} .hero-trust{flex-direction:column;gap:.6rem;padding:.85rem 1rem;} .trust-item{width:100%;} }


.hero-ctas { display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.25rem; }

.btn-hero { /* solid red */
    display:inline-flex; align-items:center; gap:8px;
    padding:.8rem 1.75rem; background:var(--red); color:#fff;
    font-family:var(--f-display); font-size:.95rem; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase;
    text-decoration:none; border:2px solid var(--red); cursor:pointer;
    border-radius:var(--r-sm); transition:all var(--ease);
}
.btn-hero:hover { background:var(--red-dark); border-color:var(--red-dark); transform:translateY(-2px); box-shadow:0 6px 20px var(--red-glow); }
.btn-hero-outline {
    display:inline-flex; align-items:center; gap:8px;
    padding:.8rem 1.75rem; background:transparent; color:var(--white);
    font-family:var(--f-display); font-size:.95rem; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase;
    text-decoration:none; border:2px solid var(--border-h); cursor:pointer;
    border-radius:var(--r-sm); transition:all var(--ease);
}
.btn-hero-outline:hover { border-color:var(--white); transform:translateY(-2px); }

.hero-counters { display:flex; gap:0; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; width:fit-content; margin:0 auto; }
.hcount {
    padding:.85rem 1.75rem; text-align:center;
    border-right:1px solid var(--border); background:var(--surface);
}
.hcount:last-child { border-right:none; }
.hcount-n { font-family:var(--f-display); font-size:1.8rem; font-weight:700; color:var(--red); line-height:1; }
.hcount-l { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-top:3px; }

.hero-scroll {
    position:absolute; bottom:1.25rem; left:50%; transform:translateX(-50%);
    font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.12em;
    display:flex; flex-direction:column; align-items:center; gap:6px; z-index:1;
    animation:sb 2s ease infinite;
}
@keyframes sb { 0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(5px);} }


/* ============================================================
   RICHIEDI UN GIOCO — Callout
   ============================================================ */
.request-section { padding:2rem 1.5rem; }
.request-callout {
    display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
    background:var(--surface); border:1px solid var(--border);
    border-left:4px solid var(--red);
    padding:1.5rem 2rem; border-radius:var(--r); flex-wrap:wrap;
}
.request-callout-text {
    display:flex; align-items:center; gap:1.25rem; flex:1; min-width:0;
}
.request-icon { font-size:1.75rem; color:var(--red); flex-shrink:0; }
.request-title {
    font-family:var(--f-display); font-size:1.25rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.3px; line-height:1.1; margin-bottom:.3rem;
}
.request-sub { font-size:.85rem; color:var(--muted); margin:0; line-height:1.5; }
@media(max-width:680px){
    .request-callout { flex-direction:column; align-items:flex-start; gap:1rem; padding:1.25rem; }
    .request-callout .btn-hero { width:100%; justify-content:center; }
}



/* ============================================================
   SEZIONI
   ============================================================ */
.page-section { position:relative; padding:5.5rem 1.5rem; z-index:1; }
.section-inner { max-width:1240px; margin:0 auto; }
.alt-bg { background:var(--surface); }

.section-header { margin-bottom:2.5rem; position:relative; }
.section-number {
    font-family:var(--f-display); font-size:7rem; font-weight:700;
    color:rgba(255,255,255,.03); line-height:1; position:absolute;
    top:-1.5rem; left:-0.5rem; pointer-events:none; user-select:none; z-index:0;
}
.section-label {
    font-family:var(--f-display); font-size:.78rem; font-weight:600;
    color:var(--red); text-transform:uppercase; letter-spacing:.14em;
    margin-bottom:.5rem; display:flex; align-items:center; gap:7px;
    position:relative; z-index:1;
}
.section-label.green-l { color:var(--green); }
.section-label.amber-l { color:var(--amber); }
.section-label.muted-l { color:var(--muted); }
.section-title {
    font-family:var(--f-display); font-size:clamp(1.9rem,4vw,2.75rem);
    font-weight:700; text-transform:uppercase; letter-spacing:.5px; line-height:1.05;
    margin-bottom:.5rem; position:relative; z-index:1;
}
.section-sub { color:var(--muted); font-size:.95rem; max-width:480px; position:relative; z-index:1; }

/* ---- SEARCH + FILTER ---- */
.search-filter-bar { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-bottom:1.75rem; }
.search-wrap { position:relative; flex:1; min-width:200px; max-width:380px; }
.search-wrap i { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--muted); font-size:.82rem; pointer-events:none; }
.search-input {
    width:100%; background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--r-sm); padding:.6rem .85rem .6rem 2.4rem;
    color:var(--white); font-family:var(--f-body); font-size:.9rem; outline:none;
    transition:border-color var(--ease);
}
.search-input:focus { border-color:var(--red); }
.search-input::placeholder { color:var(--dim); }
.filter-chips { display:flex; gap:.35rem; margin-left:auto; }
.chip {
    padding:.35rem .85rem; border-radius:var(--r-sm); border:1px solid var(--border);
    background:transparent; color:var(--muted); font-family:var(--f-body); font-size:.82rem;
    font-weight:500; cursor:pointer; transition:all var(--ease);
}
.chip:hover { border-color:var(--border-h); color:var(--white); }
.chip.active { background:var(--red); border-color:var(--red); color:#fff; font-weight:600; }

/* ============================================================
   GAME CARDS
   ============================================================ */


.game-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column;
    transition:border-color var(--ease), transform var(--ease), box-shadow var(--ease);
    animation:card-in .35s ease both;
}
@keyframes card-in { from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);} }
.game-card:hover { border-color:var(--red); transform:translateY(-3px); box-shadow:0 8px 30px rgba(0,0,0,.4); }

/* Portrait cover */
.game-card-img-wrap { position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--surface2); flex-shrink:0; }
.game-card-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.game-card:hover .game-card-img { transform:scale(1.04); }
.game-card-img-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3.5rem; color:var(--dim); }
/* Gradient overlay bottom of image */
.game-card-img-wrap::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:40%;
    background:linear-gradient(to top,rgba(14,14,14,.9),transparent);
    pointer-events:none;
}
/* Platform badges */
.img-badges { position:absolute; top:8px; left:8px; z-index:2; display:flex; flex-direction:column; gap:3px; }
/* Promo sticker */
.promo-sticker {
    position:absolute; top:8px; right:8px; z-index:2;
    background:var(--amber); color:#000;
    font-family:var(--f-display); font-size:.7rem; font-weight:700;
    padding:.2rem .5rem; border-radius:var(--r-sm); letter-spacing:.05em; text-transform:uppercase;
}
.promo-expire-badge {
    position:absolute; bottom:6px; right:6px; z-index:4;
    background:rgba(217,4,41,0.95); color:#fff;
    font-size:.65rem; font-weight:700; font-family:var(--f-display);
    padding:.3rem .5rem; border-radius:var(--r-sm);
    display:flex; align-items:center; gap:4px;
    text-transform:uppercase; letter-spacing:.05em;
    backdrop-filter:blur(4px); box-shadow:0 2px 10px rgba(0,0,0,0.5);
}
/* Release date */
.release-strip {
    position:absolute; bottom:0; left:0; right:0; z-index:3;
    background:var(--red); color:#fff;
    font-size:.7rem; font-weight:600; font-family:var(--f-display);
    padding:.3rem .75rem; display:flex; align-items:center; gap:6px;
    text-transform:uppercase; letter-spacing:.05em;
}

.game-card-body { padding:.85rem .9rem; flex:1; display:flex; flex-direction:column; gap:.4rem; }
.game-card-title { font-family:var(--f-display); font-size:1rem; font-weight:600; line-height:1.2; text-transform:uppercase; letter-spacing:.3px; }
.badge-row { display:flex; flex-wrap:wrap; gap:.25rem; }
.badge { font-size:.67rem; font-weight:600; padding:.15rem .45rem; border-radius:var(--r-sm); font-family:var(--f-display); text-transform:uppercase; letter-spacing:.04em; }
.badge-ps5 { background:rgba(29,108,245,.12); color:#74a8ff; border:1px solid rgba(29,108,245,.25); }
.badge-ps4 { background:rgba(120,80,220,.12); color:#b39ddb; border:1px solid rgba(120,80,220,.25); }
.badge-new { background:var(--green-dim); color:#4ade80; border:1px solid rgba(22,163,74,.25); }
.badge-hot { background:var(--red-dim); color:#ff7a7a; border:1px solid rgba(217,4,41,.25); }
.badge-gold { background:var(--amber-dim); color:var(--amber); border:1px solid rgba(245,166,35,.25); }
.badge-default { background:rgba(255,255,255,.05); color:var(--muted); border:1px solid var(--border); }

.prices-row { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.2rem; }
.price-chip { display:flex; flex-direction:column; padding:.25rem .55rem; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-sm); }
.price-chip-l { font-size:.58rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.price-chip-v { font-family:var(--f-display); font-size:.92rem; font-weight:700; color:var(--amber); }
.price-chip-v.promo { color:var(--red); }
.price-chip-v.normal { color:var(--white); }

.game-card-foot { padding:.5rem .9rem .85rem; }

/* Bottoni card */
.btn-book { width:100%; padding:.62rem; border:2px solid var(--red); background:transparent; color:var(--red); font-family:var(--f-display); font-size:.88rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; border-radius:var(--r-sm); transition:all var(--ease); display:flex; align-items:center; justify-content:center; gap:7px; }
.btn-book:hover { background:var(--red); color:#fff; box-shadow:0 4px 16px var(--red-glow); }
.btn-whatsapp { width:100%; padding:.62rem; border:2px solid #25D366; background:transparent; color:#25D366; font-family:var(--f-display); font-size:.88rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; border-radius:var(--r-sm); transition:all var(--ease); display:flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; }
.btn-whatsapp:hover { background:#25D366; color:#000; }
.btn-interesse { width:100%; padding:.62rem; border:2px solid var(--amber); background:transparent; color:var(--amber); font-family:var(--f-display); font-size:.88rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; border-radius:var(--r-sm); transition:all var(--ease); display:flex; align-items:center; justify-content:center; gap:7px; }
.btn-interesse:hover { background:var(--amber); color:#000; }

/* Preorder sticker */
.preorder-sticker {
    position:absolute; top:8px; right:8px; z-index:2;
    background:#5b4fcf; color:#fff;
    font-family:var(--f-display); font-size:.7rem; font-weight:700;
    padding:.2rem .5rem; border-radius:var(--r-sm); letter-spacing:.05em; text-transform:uppercase;
}
/* When both stickers exist, stack them */
.promo-sticker + .preorder-sticker,
.preorder-sticker { top:8px; right:8px; }
.promo-sticker { top:8px; right:8px; z-index:2; }

/* Account type chips inside prontaconsegna cards */
.account-type-row { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.2rem; }
.acc-chip {
    font-size:.67rem; font-weight:700; padding:.15rem .45rem;
    border-radius:var(--r-sm); font-family:var(--f-display); text-transform:uppercase; letter-spacing:.04em;
    display:flex; align-items:center; gap:3px;
}
.acc-pri { background:rgba(217,4,41,.1); color:#ff7a7a; border:1px solid rgba(217,4,41,.25); }
.acc-sec { background:rgba(255,255,255,.05); color:var(--muted); border:1px solid var(--border); }

/* Section label colors */
.preorder-l { color:#9d8fff; }

/* ============================================================
   SECTION DISCLAIMER (prenotazioni + promozioni)
   ============================================================ */
.section-disclaimer {
    display:flex; gap:1rem; padding:1rem 1.25rem;
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
    border-left:3px solid var(--muted); border-radius:var(--r-sm);
    margin-bottom:2rem;
}
.section-disclaimer i { color:var(--muted); font-size:1.1rem; flex-shrink:0; margin-top:2px; }
.section-disclaimer strong { display:block; font-family:var(--f-display); font-size:.82rem; color:var(--white); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.2rem; }
.section-disclaimer p { font-size:.83rem; color:var(--muted); line-height:1.6; margin:0; }

/* Amber variant — promozioni */
.section-disclaimer.amber-disc {
    background:var(--amber-dim); border-color:rgba(245,166,35,.15);
    border-left-color:var(--amber);
}
.section-disclaimer.amber-disc i { color:var(--amber); }
.section-disclaimer.amber-disc strong { color:var(--amber); }


/* ============================================================
   FAQ
   ============================================================ */
.faq-list { max-width:760px; display:flex; flex-direction:column; gap:.4rem; }
.faq-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; transition:border-color var(--ease); }
.faq-item.open { border-color:var(--red); }
.faq-question { display:flex; justify-content:space-between; align-items:center; padding:.95rem 1.1rem; cursor:pointer; font-weight:600; font-size:.92rem; user-select:none; gap:1rem; font-family:var(--f-body); }
.faq-icon { color:var(--red); transition:transform var(--ease); flex-shrink:0; font-size:.8rem; }
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item.open .faq-answer { max-height:400px; }
.faq-answer-inner { padding:.75rem 1.1rem 1rem; color:var(--muted); font-size:.88rem; line-height:1.7; border-top:1px solid var(--border); }

/* ============================================================
   CHATBOT
   ============================================================ */
.chatbot-wrap { width:100%; height:100%; }
.chatbot-window { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.chatbot-header { display:flex; align-items:center; gap:12px; padding:.85rem 1.1rem; border-bottom:1px solid var(--border); background:var(--surface2); }
.chatbot-avatar { width:38px; height:38px; border-radius:var(--r-sm); background:var(--red); display:flex; align-items:center; justify-content:center; font-size:.95rem; color:#fff; flex-shrink:0; }
.chatbot-name { font-family:var(--f-display); font-size:.95rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.chatbot-status { display:flex; align-items:center; gap:5px; font-size:.72rem; color:var(--green); }
.chatbot-messages { padding:1rem; display:flex; flex-direction:column; gap:.6rem; min-height:300px; max-height:480px; overflow-y:auto; }
.chatbot-messages::-webkit-scrollbar { width:3px; }
.chatbot-messages::-webkit-scrollbar-thumb { background:var(--border-h); border-radius:2px; }
.chat-bubble { padding:.7rem 1rem; font-size:.92rem; line-height:1.5; max-width:92%; animation:bubble-in .25s ease; border-radius:var(--r-sm); }
@keyframes bubble-in { from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);} }
.chat-bubble.bot { background: #1a1a1a; border: 1px solid #333; color: #fff; align-self:flex-start; border-bottom-left-radius:0; }
.chat-bubble.user { background:var(--red); color:#fff; font-weight:500; align-self:flex-end; border-bottom-right-radius:0; }
.chatbot-options { display:flex; flex-wrap:wrap; gap:.4rem; padding:.5rem 1rem 1rem; }
.chatbot-opt { padding:.45rem .85rem; border:1px solid var(--border-h); background:transparent; color:var(--white); font-family:var(--f-body); font-size:.83rem; font-weight:500; cursor:pointer; border-radius:var(--r-sm); transition:all var(--ease); }
.chatbot-opt:hover { border-color:var(--red); color:var(--red); background:var(--red-dim); }
.chatbot-restart { display:flex; align-items:center; gap:6px; margin:.25rem 1rem .85rem; padding:.45rem; border:1px solid var(--border); background:transparent; color:var(--muted); font-family:var(--f-body); font-size:.82rem; cursor:pointer; justify-content:center; border-radius:var(--r-sm); transition:all var(--ease); }
.chatbot-restart:hover { color:var(--white); border-color:var(--border-h); }
.typing-ind { display:flex; align-items:center; gap:3px; padding:.4rem; }
.typing-dot { width:6px; height:6px; border-radius:50%; background:var(--muted); animation:td .8s ease infinite; }
.typing-dot:nth-child(2){animation-delay:.2s;} .typing-dot:nth-child(3){animation-delay:.4s;}
@keyframes td { 0%,60%,100%{opacity:.3;transform:scale(.8);}30%{opacity:1;transform:scale(1.1);} }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { border-top:1px solid var(--border); background:var(--surface); padding:2.5rem 1.5rem 1.5rem; position:relative; z-index:1; }
.footer-inner { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:2rem 3rem; align-items:start; }
.footer-logo-wrap { display:flex; align-items:center; gap:10px; margin-bottom:.6rem; }
.footer-logo { height:55px; mix-blend-mode: screen; /* Hides the black background */ }
.footer-name { font-family:var(--f-display); font-size:1.3rem; font-weight:700; text-transform:uppercase; }
.footer-name span { color:var(--red); }
.footer-sub { font-size:.78rem; color:var(--muted); margin-top:2px; }
.footer-links { display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; justify-content:flex-end; }
.footer-links a { display:flex; align-items:center; gap:7px; color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:500; transition:color var(--ease); }

.footer-bottom { grid-column:1/-1; padding-top:1.25rem; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
.footer-nav { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; }
.footer-nav a { color:var(--dim); text-decoration:none; font-size:.8rem; transition:color var(--ease); }
.footer-nav a:hover { color:var(--muted); }
.footer-copy { font-size:.78rem; color:var(--dim); }
@media(max-width:600px) { .footer-inner{grid-template-columns:1fr;} .footer-links{align-items:flex-start; justify-content:flex-start;} }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay { position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.75); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; pointer-events:none; transition:opacity var(--ease); }
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-box { width:100%; max-width:650px; max-height:90vh; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:0 15px 50px rgba(0,0,0,0.6); animation:modal-in .4s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes modal-in { from{opacity:0;transform:translateY(30px) scale(0.97);}to{opacity:1;transform:translateY(0) scale(1);} }
.modal-box::-webkit-scrollbar{width:3px;} .modal-box::-webkit-scrollbar-thumb{background:var(--border-h);}
.modal-inner { padding:1.5rem; }
.modal-close { position:absolute; top:.85rem; right:.85rem; background:var(--surface2); border:1px solid var(--border); color:var(--muted); width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--ease); font-size:.82rem; z-index:10; border-radius:var(--r-sm); }
.modal-close:hover { background:var(--red-dim); color:var(--red); border-color:rgba(217,4,41,.4); }
.modal-header { display:flex; gap:1rem; margin-bottom:1.5rem; padding-right:2.5rem; }
.modal-img-wrap { flex-shrink:0; }
.modal-img { width:70px; height:94px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--border); }
.modal-img-ph { width:70px; height:94px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--dim); }
.modal-lbl { font-size:.72rem; color:var(--muted); margin-bottom:.2rem; text-transform:uppercase; letter-spacing:.07em; }
.modal-game-title { font-family:var(--f-display); font-size:1.3rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px; margin-bottom:.35rem; }

.form-group { margin-bottom:1rem; }
.form-lbl { display:flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; color:var(--muted); margin-bottom:.4rem; text-transform:uppercase; letter-spacing:.06em; }
.form-hint { display:block; font-size:.72rem; color:var(--dim); margin-top:.3rem; }
.req { color:var(--red); }
.form-control { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-sm); padding:.6rem .85rem; color:var(--white); font-family:var(--f-body); font-size:.9rem; outline:none; transition:border-color var(--ease); resize:vertical; }
.form-control:focus { border-color:var(--red); }
.form-control::placeholder { color:var(--dim); }
select.form-control { cursor:pointer; }

/* Edition selector */
.edition-select { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.85rem; }
.edition-opt { display:flex; align-items:center; justify-content:space-between; padding:.6rem .85rem; border:1px solid var(--border); background:var(--surface2); cursor:pointer; border-radius:var(--r-sm); transition:all var(--ease); user-select:none; }
.edition-opt:hover { border-color:var(--border-h); }
.edition-opt.selected { border-color:var(--red); background:var(--red-dim); }
.edition-opt input { display:none; }
.edition-name { font-weight:600; font-size:.9rem; }
.edition-price { font-family:var(--f-display); font-size:1rem; font-weight:700; color:var(--amber); }
.edition-price.promo { color:var(--red); }

/* Slot selector */
.slot-selector { display:flex; flex-direction:column; gap:.35rem; }
.slot-opt { display:flex; align-items:center; justify-content:space-between; padding:.6rem .85rem; border:1px solid var(--border); background:var(--surface2); cursor:pointer; border-radius:var(--r-sm); transition:all var(--ease); user-select:none; }
.slot-opt:hover { border-color:var(--border-h); }
.slot-opt.selected { border-color:var(--red); background:var(--red-dim); }
.slot-opt input { display:none; }
.slot-opt-lbl { display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:500; }
.slot-opt-lbl i { color:var(--red); width:12px; }
.slot-price { font-family:var(--f-display); font-size:.95rem; font-weight:700; color:var(--amber); }
.slot-price.promo { color:var(--red); }

.booking-summary { background:var(--surface2); border:1px solid var(--border); padding:.8rem 1rem; margin:.85rem 0; display:flex; flex-direction:column; gap:.4rem; border-radius:var(--r-sm); }
.sum-row { display:flex; justify-content:space-between; align-items:center; font-size:.85rem; }
.sum-row span { color:var(--muted); }
.sum-row strong { color:var(--white); font-weight:600; }
.price-row { border-top:1px solid var(--border); padding-top:.4rem; margin-top:.1rem; }
.price-val { font-family:var(--f-display); font-size:1.1rem !important; color:var(--amber) !important; }

.btn-confirm { width:100%; padding:.85rem; border:none; background:var(--red); color:#fff; font-family:var(--f-display); font-size:1rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; border-radius:var(--r-sm); transition:all var(--ease); display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-confirm:hover { background:var(--red-dark); box-shadow:0 4px 20px var(--red-glow); }
.btn-confirm:disabled { opacity:.5; cursor:not-allowed; }

.booking-success { text-align:center; padding:1.75rem 0 .5rem; }
.success-icon { font-size:3.5rem; color:var(--green); display:block; margin-bottom:.85rem; }
.booking-success h3 { font-family:var(--f-display); font-size:1.4rem; font-weight:700; text-transform:uppercase; margin-bottom:.5rem; }
.booking-success p { color:var(--muted); margin-bottom:1.1rem; font-size:.9rem; }
.contact-btns-list { display:flex; flex-direction:column; gap:.4rem; margin-bottom:.85rem; }
.cbtn { display:flex; align-items:center; justify-content:center; gap:8px; padding:.65rem; text-decoration:none; font-family:var(--f-display); font-size:.88rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; border-radius:var(--r-sm); transition:all var(--ease); border:1px solid; }
.cbtn.tg  { background:rgba(0,136,204,.08);color:#29b6f6;border-color:rgba(0,136,204,.25); }
.cbtn.ig  { background:rgba(228,64,95,.08);color:#f48fb1;border-color:rgba(228,64,95,.25); }
.cbtn.wa  { background:rgba(37,211,102,.08);color:#25D366;border-color:rgba(37,211,102,.25); }
.cbtn:hover { filter:brightness(1.2); transform:translateY(-1px); }

/* Platform selector */
.platform-selector { display:flex; gap:.5rem; }
.plat-btn {
    flex:1; padding:.55rem .75rem; border:2px solid var(--border);
    background:var(--surface2); color:var(--muted);
    font-family:var(--f-display); font-size:.95rem; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
    border-radius:var(--r-sm); transition:all var(--ease); text-align:center;
}
.plat-btn:hover { border-color:var(--border-h); color:var(--white); }
.plat-btn.active { border-color:var(--red); background:var(--red-dim); color:var(--white); }

/* Account info box */
.account-info-box {
    margin:.4rem 0 .75rem;
    padding:.75rem 1rem;
    border-radius:var(--r-sm);
    font-size:.83rem; line-height:1.6;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    color:var(--muted);
}
.account-info-box.warning {
    border-color:rgba(245,166,35,.25);
    background:var(--amber-dim);
}
.account-info-box strong { display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.3rem; }
.account-info-box.warning strong { color:var(--amber); }
.account-info-box i { margin-right:5px; }

/* Edition contents box */
.edition-contents-wrap {
    margin:.3rem 0 .85rem;
    padding:.85rem 1.15rem;
    background:linear-gradient(145deg, rgba(91,79,207,0.08) 0%, rgba(91,79,207,0.02) 100%);
    border:1px solid rgba(91,79,207,0.25);
    border-left:4px solid #5b4fcf;
    border-radius:var(--r-sm);
    animation:slide-down-fade .35s ease both;
}
@keyframes slide-down-fade { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);} }
.edition-contents-wrap strong { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#a99fff; display:flex; align-items:center; gap:6px; margin-bottom:.4rem; }
.edition-contents-wrap p { font-size:.85rem; color:var(--white); line-height:1.55; margin:0; }

/* Urgency options */
.urgency-opts { display:flex; flex-direction:column; gap:.35rem; }
.urgency-opt {
    display:flex; align-items:center; gap:.75rem; padding:.65rem .85rem;
    border:1px solid var(--border); background:var(--surface2); cursor:pointer;
    border-radius:var(--r-sm); transition:all var(--ease); user-select:none;
}
.urgency-opt:hover { border-color:var(--border-h); }
.urgency-opt.selected { border-color:var(--red); background:var(--red-dim); }
.urgency-opt input { display:none; }
.urgency-content { display:flex; align-items:center; gap:.65rem; flex:1; }
.urgency-content i { color:var(--red); font-size:1rem; flex-shrink:0; }
.urgency-content div { display:flex; flex-direction:column; }
.urgency-content strong { font-size:.88rem; font-weight:600; color:var(--white); }
.urgency-content span { font-size:.75rem; color:var(--muted); }
.urgency-hint {
    margin-top:.5rem; padding:.5rem .75rem; border-radius:var(--r-sm);
    background:rgba(255,255,255,.03); border:1px solid var(--border);
    font-size:.8rem; color:var(--muted); display:flex; align-items:center; gap:6px;
}
.urgency-hint i { color:var(--amber); }



/* ============================================================
   BUTTONS GENERICI
   ============================================================ */
.btn-primary { display:inline-flex; align-items:center; gap:7px; padding:.55rem 1.1rem; background:var(--red); color:#fff; font-family:var(--f-display); font-size:.88rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; border:none; cursor:pointer; border-radius:var(--r-sm); transition:all var(--ease); }
.btn-primary:hover { background:var(--red-dark); box-shadow:0 3px 14px var(--red-glow); }
.btn-ghost { display:inline-flex; align-items:center; gap:7px; padding:.55rem 1.1rem; background:transparent; border:1px solid var(--border-h); color:var(--muted); font-family:var(--f-body); font-size:.87rem; font-weight:500; cursor:pointer; border-radius:var(--r-sm); transition:all var(--ease); }
.btn-ghost:hover { color:var(--white); border-color:var(--white); }
.btn-danger { display:inline-flex; align-items:center; gap:5px; padding:.38rem .75rem; border:1px solid rgba(217,4,41,.3); background:rgba(217,4,41,.07); color:var(--red); font-family:var(--f-body); font-size:.8rem; font-weight:500; cursor:pointer; border-radius:var(--r-sm); transition:all var(--ease); }
.btn-danger:hover { background:rgba(217,4,41,.15); }
.btn-success { display:inline-flex; align-items:center; gap:5px; padding:.38rem .75rem; border:1px solid rgba(22,163,74,.3); background:rgba(22,163,74,.07); color:var(--green); font-family:var(--f-body); font-size:.8rem; font-weight:500; cursor:pointer; border-radius:var(--r-sm); transition:all var(--ease); }
.btn-success:hover { background:rgba(22,163,74,.15); }

/* ============================================================
   EMPTY / LOADING
   ============================================================ */
.empty-state { text-align:center; padding:4rem 1.5rem; color:var(--muted); }
.empty-state i { font-size:3rem; display:block; margin-bottom:1rem; opacity:.2; }
.empty-state h3 { font-family:var(--f-display); font-size:1.3rem; font-weight:700; text-transform:uppercase; color:var(--white); margin-bottom:.4rem; }
.loading-spinner { display:flex; flex-direction:column; align-items:center; padding:4rem; gap:.75rem; color:var(--muted); font-size:.82rem; }
.spinner { width:30px; height:30px; border:2px solid var(--border-h); border-top-color:var(--red); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }

/* ============================================================
   ADMIN
   ============================================================ */
.admin-overlay { position:fixed; inset:0; z-index:1000; background:var(--bg); }
.admin-login-wrap { display:flex; align-items:center; justify-content:center; height:100%; background:radial-gradient(ellipse at center, rgba(217,4,41,.04) 0%, transparent 65%); }
.admin-login-card { width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--red); padding:2rem; border-radius:var(--r); }
.admin-login-card h2 { font-family:var(--f-display); font-size:1.4rem; font-weight:700; text-transform:uppercase; text-align:center; margin-bottom:.3rem; }
.admin-login-card p { color:var(--muted); font-size:.85rem; text-align:center; margin-bottom:1.5rem; }
.admin-pwd-error { display:flex; align-items:center; gap:6px; color:var(--red); font-size:.82rem; padding:.5rem .75rem; background:var(--red-dim); border:1px solid rgba(217,4,41,.2); border-radius:var(--r-sm); margin-bottom:.75rem; }

.admin-dashboard { display:flex; height:100%; overflow:hidden; }
.admin-sidebar { width:210px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:1rem .65rem; overflow-y:auto; }
.admin-sidebar-brand { display:flex; align-items:center; gap:8px; padding:.5rem .5rem 1rem; font-family:var(--f-display); font-size:1.1rem; font-weight:700; text-transform:uppercase; color:var(--red); border-bottom:1px solid var(--border); margin-bottom:.65rem; }
.admin-sidebar-brand img { height:28px; mix-blend-mode:screen; filter:brightness(1.15); }
.admin-nav { display:flex; flex-direction:column; gap:.15rem; flex:1; }
.admin-nav-btn { display:flex; align-items:center; gap:9px; padding:.6rem .8rem; border:none; background:transparent; color:var(--muted); font-family:var(--f-body); font-size:.87rem; font-weight:500; cursor:pointer; transition:all var(--ease); text-align:left; border-radius:var(--r-sm); }
.admin-nav-btn:hover { background:var(--surface2); color:var(--white); }
.admin-nav-btn.active { background:var(--red-dim); color:var(--red); font-weight:600; }
.admin-nav-btn i { width:14px; flex-shrink:0; }
.count-badge { margin-left:auto; background:var(--red); color:#fff; font-size:.65rem; font-weight:700; padding:.1rem .4rem; border-radius:3px; min-width:18px; text-align:center; }
.admin-logout-btn { display:flex; align-items:center; gap:8px; padding:.6rem .8rem; border:1px solid rgba(217,4,41,.25); background:transparent; color:var(--red); font-family:var(--f-body); font-size:.85rem; font-weight:500; cursor:pointer; transition:all var(--ease); width:100%; margin-top:auto; border-radius:var(--r-sm); }
.admin-logout-btn:hover { background:var(--red-dim); }
.admin-mobile-tabs { display:none; gap:.2rem; padding:.4rem; background:var(--surface); border-bottom:1px solid var(--border); overflow-x:auto; flex-shrink:0; }
.admin-tab { background:transparent; border:1px solid transparent; color:var(--muted); font-size:1rem; padding:.45rem .65rem; cursor:pointer; border-radius:var(--r-sm); transition:all var(--ease); flex-shrink:0; }
.admin-tab:hover { background:var(--surface2); color:var(--white); }
.admin-tab.active { background:var(--red-dim); color:var(--red); border-color:rgba(217,4,41,.25); }
.admin-content { flex:1; overflow-y:auto; padding:1.75rem; background:var(--bg); }
@media(max-width:640px) { .admin-sidebar{display:none;} .admin-mobile-tabs{display:flex;} .admin-dashboard{flex-direction:column;} .admin-content{padding:.9rem;} }

.admin-page-title { font-family:var(--f-display); font-size:1.5rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:.2rem; }
.admin-page-sub { color:var(--muted); font-size:.82rem; margin-bottom:1.5rem; }
.admin-card { background:var(--surface); border:1px solid var(--border); border-top:2px solid var(--red); padding:1.25rem; margin-bottom:1.1rem; border-radius:var(--r); }
.admin-card h3 { font-family:var(--f-display); font-size:.9rem; font-weight:600; color:var(--red); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.9rem; display:flex; align-items:center; gap:7px; }
.admin-card.amber-top { border-top-color:var(--amber); }
.admin-card.amber-top h3 { color:var(--amber); }
.admin-search-bar {
    display:flex; align-items:center; gap:.6rem;
    background:var(--surface); border:1px solid var(--border-h);
    border-radius:var(--r-sm); padding:.4rem .75rem; margin-bottom:.75rem;
    transition:border-color var(--ease);
}
.admin-search-bar:focus-within { border-color:var(--red); }
.admin-search-bar input {
    flex:1; background:none; border:none; outline:none;
    color:var(--white); font-size:.9rem; font-family:var(--f-body);
}

.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:.8rem; margin-bottom:.8rem; }
.form-full { grid-column:1/-1; }

.sections-select { display:flex; flex-wrap:wrap; gap:.4rem; }
.section-cb { display:flex; align-items:center; gap:.5rem; padding:.45rem .8rem; border:1px solid var(--border); background:var(--surface2); cursor:pointer; transition:all var(--ease); user-select:none; font-size:.85rem; font-weight:500; border-radius:var(--r-sm); }
.section-cb:has(input:checked) { border-color:var(--red); background:var(--red-dim); color:var(--white); }
.section-cb input { width:13px; height:13px; accent-color:var(--red); }

.img-upload-wrap { border:1px dashed rgba(217,4,41,.3); background:var(--red-dim); padding:1rem; text-align:center; cursor:pointer; border-radius:var(--r-sm); transition:border-color var(--ease); }
.img-upload-wrap:hover { border-color:var(--red); }
.img-upload-wrap i { font-size:1.4rem; color:var(--red); margin-bottom:.3rem; display:block; }
.img-upload-wrap span { font-size:.75rem; color:var(--muted); }
.img-preview { max-width:100%; max-height:110px; object-fit:cover; border:1px solid var(--border); display:block; margin:.5rem auto 0; border-radius:var(--r-sm); }

.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:.75rem; margin-bottom:1.5rem; }
.stat-box { background:var(--surface); border:1px solid var(--border); padding:.9rem; text-align:center; border-top:2px solid var(--red); border-radius:var(--r-sm); }
.stat-box.s-amber { border-top-color:var(--amber); }
.stat-box.s-green { border-top-color:var(--green); }
.stat-box.s-muted { border-top-color:var(--muted); }
.stat-box-val { font-family:var(--f-display); font-size:1.75rem; font-weight:700; color:var(--red); line-height:1; }
.stat-box.s-amber .stat-box-val { color:var(--amber); }
.stat-box.s-green .stat-box-val { color:var(--green); }
.stat-box.s-muted .stat-box-val { color:var(--muted); }
.stat-box-lbl { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-top:3px; }

.admin-table-wrap { overflow-x:auto; }
.admin-table { width:100%; border-collapse:collapse; font-size:.83rem; }
.admin-table th { text-align:left; padding:.55rem .8rem; color:var(--muted); font-weight:600; text-transform:uppercase; font-size:.68rem; letter-spacing:.07em; border-bottom:1px solid var(--border); white-space:nowrap; font-family:var(--f-body); }
.admin-table td { padding:.7rem .8rem; border-bottom:1px solid rgba(255,255,255,.03); color:var(--white); vertical-align:middle; }
.admin-table tr:hover td { background:rgba(255,255,255,.015); }

.status-badge { padding:.2rem .55rem; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; border-radius:var(--r-sm); }
.s-pending   { background:var(--amber-dim); color:var(--amber); border:1px solid rgba(245,166,35,.25); }
.s-confirmed { background:var(--green-dim); color:var(--green); border:1px solid rgba(22,163,74,.25); }
.s-cancelled { background:var(--red-dim);   color:var(--red);   border:1px solid rgba(217,4,41,.25); }
.new-bk { animation:bk-hl 2s ease-out; }
@keyframes bk-hl { 0%{background:rgba(217,4,41,.08);}100%{background:transparent;} }

/* ============================================================
   FIREBASE SETUP
   ============================================================ */
.setup-overlay { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.97); display:flex; align-items:center; justify-content:center; padding:1rem; }
.setup-card { width:100%; max-width:540px; background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--red); padding:2.5rem; max-height:90vh; overflow-y:auto; border-radius:var(--r); }
.setup-card h2 { font-family:var(--f-display); font-size:1.4rem; font-weight:700; text-transform:uppercase; text-align:center; margin-bottom:.5rem; }
.setup-card > p { color:var(--muted); font-size:.87rem; text-align:center; margin-bottom:1.25rem; }
.setup-steps { display:flex; flex-direction:column; gap:.6rem; }
.setup-step { display:flex; align-items:flex-start; gap:10px; font-size:.86rem; color:var(--muted); }
.step-n { flex-shrink:0; width:22px; height:22px; background:var(--red-dim); border:1px solid rgba(217,4,41,.3); color:var(--red); font-size:.75rem; display:flex; align-items:center; justify-content:center; font-weight:700; border-radius:var(--r-sm); }
.setup-card a { color:var(--red); }
.setup-err { display:flex; align-items:center; gap:7px; color:var(--red); font-size:.82rem; padding:.5rem .85rem; background:var(--red-dim); border:1px solid rgba(217,4,41,.2); border-radius:var(--r-sm); margin-bottom:.6rem; }

/* ============================================================
   TOAST
   ============================================================ */
.toast { position:fixed; bottom:1.75rem; left:50%; transform:translateX(-50%) translateY(100px); background:var(--surface2); border:1px solid var(--border-h); padding:.6rem 1.25rem; font-size:.85rem; font-weight:600; color:var(--white); z-index:9999; transition:transform .35s ease,opacity .25s; opacity:0; white-space:nowrap; border-radius:var(--r); box-shadow:var(--shadow); }
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
.toast.success { border-color:rgba(22,163,74,.4); color:var(--green); }
.toast.error   { border-color:rgba(217,4,41,.4); color:var(--red); }

/* ============================================================
   MISC
   ============================================================ */
@keyframes shake { 0%,100%{transform:translateX(0);}20%{transform:translateX(-6px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);} }
.shake { animation:shake .4s ease; }
::-webkit-scrollbar { width:5px; } ::-webkit-scrollbar-track { background:var(--bg); } ::-webkit-scrollbar-thumb { background:var(--border-h); border-radius:3px; }

/* ---- UI / UX OPTIMIZATIONS ---- */
.carousel-wrapper {
    position: relative;
    width: 100%;
}
.games-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.games-grid::-webkit-scrollbar {
    display: none;
}
.games-grid .game-card {
    flex: 0 0 calc(20% - 0.8rem);
    min-width: 200px;
    scroll-snap-align: start;
}
.carousel-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: var(--white);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: 10;
    cursor: pointer;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, opacity 0.2s;
    opacity: 0.7;
}
.carousel-btn:hover {
    background: var(--red);
    opacity: 1;
}
.carousel-btn.prev { left: -20px; }
.carousel-btn.next { right: -20px; }

/* Contrast enhancements for PS4 / PS5 badges */
.badge-ps5 {
    background: #00439c !important; /* Deep Playstation Blue */
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    font-weight: 800;
}
.badge-ps4 {
    background: #002359 !important; /* Darker Blue */
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    font-weight: 800;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .games-grid {
        gap: 0.6rem;
    }
    .games-grid .game-card {
        flex: 0 0 calc(45% - 0.6rem);
        min-width: 140px;
    }
    /* Removed fixed height to respect aspect-ratio */
        .carousel-btn {
        display: flex; /* Restored for mobile */
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    .carousel-btn.prev { left: -10px; }
    .carousel-btn.next { right: -10px; }
    .container {
        padding: 0 0.8rem; /* Tighter margins */
    }
    h2.section-title {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    .game-card-title {
        font-size: .85rem;
    }
}
/* ---- EDITION CONTENTS PS STORE STYLE ---- */
.edition-details-box {
    background: #191825;
    border-radius: var(--r-md);
    padding: 1.5rem;
    margin-top: 1.2rem;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.edition-details-title {
    color: #ffd700;
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 1.8rem;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
    letter-spacing: 0.05em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.edition-details-sub {
    font-size: 0.9rem;
    color: #cccccc;
    margin-bottom: 1.2rem;
}
.edition-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.9rem;
    color: #eaeaea;
    line-height: 1.4;
}
.edition-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.edition-item-icon {
    color: #ffd700;
    margin-top: 0.2rem;
    font-size: 1rem;
    flex-shrink: 0;
}
.edition-item-text strong {
    color: #ffd700;
}
.edition-badge {
    color: #00d2ff;
    font-weight: 700;
}
/* FLOATING CHATBOT WIDGET */
.global-chatbot {
    position: fixed;
    bottom: 95px;
    right: 25px;
    z-index: 9999;
    width: 380px;
    max-width: calc(100vw - 40px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    border-radius: var(--r);
    animation: slide-up 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: bottom right;
}
@keyframes slide-up {
    from { opacity: 0; transform: scale(0.8) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.chatbot-close-btn {
    background: none; border: none; color: var(--muted);
    font-size: 1.2rem; cursor: pointer; transition: color var(--ease);
}
.chatbot-close-btn:hover { color: var(--white); }

/* FAB BUTTON */
.chatbot-fab-container {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.chatbot-fab-tooltip {
    background: var(--surface2);
    color: var(--white);
    padding: 0.6rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    border: 1px solid var(--border);
    animation: bounce-subtle 2s infinite ease-in-out;
}
.chatbot-fab-tooltip::after {
    content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
    border-width: 6px 0 6px 6px; border-style: solid;
    border-color: transparent transparent transparent var(--border);
}
@keyframes bounce-subtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.chatbot-fab {
    width: 60px; height: 60px;
    background: var(--red);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 4px 20px rgba(229,9,20, 0.5);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.chatbot-fab-container:hover .chatbot-fab {
    transform: scale(1.1);
}

/* SOCIAL LINKS */
.social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none !important;
    color: #fff !important;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.social-link:hover { transform: translateY(-3px); filter: brightness(1.1); }
.sl-wa { background: #25D366; box-shadow: 0 4px 12px rgba(37,211,102,0.3); }
.sl-tg { background: #229ED9; box-shadow: 0 4px 12px rgba(34,158,217,0.3); }
.sl-ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); box-shadow: 0 4px 12px rgba(220,39,67,0.3); }