/* ROG Football 2026 — theme overlay on top of the inherited UYL style.css.
   Brief asks for a soccer / black / gold look. style.css is ROG-red; here we
   shift the accents to gold while keeping the ROG dark chrome + button shapes. */

:root {
    --gold: #f3c318;
    --gold-deep: #b8860b;
    /* Metallic gold for buttons — a vertical sheen: pale highlight near the top,
       rich gold through the middle, deep amber at the foot. Reads as polished
       gold rather than flat yellow, matching the KV / Gamesplanet voucher gold. */
    --gold-grad: linear-gradient(180deg, #fff4c2 0%, #f6d24e 18%, #e9b821 50%, #cf9a12 82%, #a9760a 100%);
    --gold-grad-hover: linear-gradient(180deg, #fff8d6 0%, #f9da64 18%, #f0c233 50%, #d8a317 82%, #b5810d 100%);
    /* Re-point the shared accent vars used across style.css to gold. */
    --main-color-highlight: var(--gold);
    --main-color-highlight2: #fff;
    --cta-bg-1: var(--gold);
    --cta-bg-2: #4a3a00;
}

/* Centered dark content "card" on white page gutters — matches ProArt /
   Level Up. The white body + .container max-width come from the preview
   <style>; here the dark block gets the card shadow and clips its corners. */
#lp-content {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Hero headline: gold glow instead of red. line-height keeps multi-line
   diacritic-heavy headings (cs/sk: č ž ě ů) from colliding (feedback 2026-06-18). */
#lp-content h2 {
    color: var(--gold);
    text-shadow: 0 0 12px rgba(243, 195, 24, 0.55);
    line-height: 1.3;
}

/* Hero subhead — enlarged + centered (ASUS 2026-06-15, "similar to ProArt").
   Overrides the UYL template's 1.2em / 80% width. */
#lp-content .headline h3.hero-sub {
    font-size: 1.45em;
    line-height: 1.4;
    max-width: 760px;
    width: 90%;
    margin: 0.6em auto 0.2em;
    text-align: center;
}

/* User-flow banner (BUY → REDEEM → JOIN & WIN), below the key visual.
   The KV <img.header> already has a 30px bottom margin; pull this up to
   sit flush under it, and give it room before the headline. */
#lp-content .headline img.user-flow-banner {
    display: block;
    width: 100%;
    margin: -10px 0 26px;
}

/* Section headlines: gold underline. */
#lp-content h3.lp-block-headline {
    border-bottom: 1px solid var(--gold);
}

/* Spain asked for the section titles centered (feedback 2026-06-18). Scoped to
   the Spanish page via the <html lang="es"> attribute so other locales are
   unaffected (each locale ships its own copy of this stylesheet). */
html[lang="es"] #lp-content h3.lp-block-headline {
    text-align: center;
}

/* CTA button: gold fill, dark text, gold glow on hover (keeps the clip-path arrow).
   NOTE: style.css has a high-specificity `#lp-content * { color: ... }` that
   recolours the inner <span>; we must force the dark text onto the span itself
   (and its ::before/::after arrow glyphs) or the label disappears on gold. */
#lp-content a.cta-button {
    background: var(--gold-grad);
    color: #2a1d00;
    border: 1px solid #d8a82a;
    /* top inner highlight + bottom inner shade = bevelled metal edge */
    box-shadow: inset 0 1px 0 rgba(255, 252, 224, 0.75),
                inset 0 -2px 4px rgba(120, 80, 0, 0.35);
    text-shadow: 0 1px 0 rgba(255, 248, 210, 0.4);
}
#lp-content a.cta-button span,
#lp-content a.cta-button span::before,
#lp-content a.cta-button span::after {
    color: #2a1d00;
}
#lp-content a.cta-button:hover,
#lp-content a.cta-button:focus {
    background: var(--gold-grad-hover);
    color: #2a1d00;
    box-shadow: inset 0 1px 0 rgba(255, 252, 224, 0.85),
                inset 0 -2px 4px rgba(120, 80, 0, 0.3),
                0 6px 16px rgba(243, 195, 24, 0.45);
}
#lp-content a.cta-button:hover span,
#lp-content a.cta-button:focus span { color: #2a1d00; }

/* Links + emphasised legals in gold. */
#lp-content a:link,
#lp-content a:active,
#lp-content a:visited { color: var(--gold); }
#lp-content p.legals,
#lp-content small { color: var(--gold); }
#lp-content strong, #lp-content b { color: var(--gold); }

/* How-It-Works sub-headers (Voucher Redemption / Lucky Draw). */
#lp-content h4.hiw-sub {
    color: var(--gold);
    font-size: 1.25em;
    margin: 1.4em auto 0.3em;
    width: 650px;
    max-width: 90%;
    text-align: start;
    border-bottom: 1px dashed rgba(243, 195, 24, 0.4);
    padding-bottom: 0.2em;
}

/* Current chapter dot in gold. */
#lp-content .chapters-list div.current_chapter { background: var(--gold); }
#lp-content .chapters-list div.current_chapter span { color: #1a1300; }


/* =====================================================================
   PRODUCT FINDER — adapted from "Upgrade What Matters" (tiles + type-ahead).
   UWM used cyan/blue accents; here re-themed to the Football gold/black.
   Tile = one of the 9 product groups; card = one eligible model.
   ===================================================================== */

:root {
    --bg-elevated:   #15110a;   /* card surface (warm near-black) */
    --bg-elevated-2: #211a0d;   /* card hover */
    --border-soft:   rgba(243, 195, 24, 0.18);
    --border-strong: rgba(243, 195, 24, 0.35);
    --text-muted:    #b9b08f;
}

/* --- Search input --- */
#lp-content .pf-search { padding: 6px 0 18px; margin: 0 auto 14px; }
#lp-content .pf-search-inner { width: 100%; max-width: 560px; margin: 0 auto; position: relative; }
#lp-content .pf-search .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
#lp-content .pf-search input[type="search"] {
    width: 100%;
    padding: 0.85em 1em 0.85em 2.8em;
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    background: var(--bg-elevated);
    color: #fff;
    font-family: var(--main-font);
    font-size: 1em; line-height: 1.2; outline: none;
    transition: border-color 0.15s linear, box-shadow 0.15s linear;
}
#lp-content .pf-search input[type="search"]:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(243, 195, 24, 0.25);
}
#lp-content .pf-search input[type="search"]::placeholder { color: var(--text-muted); }
#lp-content .pf-search .search-icon {
    position: absolute; left: 1.1em; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--text-muted); pointer-events: none;
}
#lp-content .pf-search-count { margin-top: 8px; font-size: 0.85em; color: var(--text-muted); text-align: center; }

/* --- Group tiles --- */
#lp-content .pf-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin: 1.4em auto 1.6em; padding: 0; max-width: 100%;
}
#lp-content .pf-tab {
    appearance: none; background: #000;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff; -webkit-text-fill-color: #fff;
    font-family: var(--main-headline-font);
    font-size: 0.85em; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    padding: 1.1em 0.8em; border-radius: 3px; cursor: pointer; line-height: 1.25;
    transition: background-color 0.15s linear, color 0.15s linear, border-color 0.15s linear;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
#lp-content .pf-tab:hover { background: #1a1407; border-color: var(--gold); }
#lp-content .pf-tab.is-active {
    background: var(--gold-grad); border-color: #d8a82a;
    color: #2a1d00; -webkit-text-fill-color: #2a1d00;
    box-shadow: inset 0 1px 0 rgba(255, 252, 224, 0.7);
}
#lp-content .pf-tab .tab-icon { display: block; width: 60px; height: 60px; flex-shrink: 0; }
/* Inline SVG icons are stroke-only; colour follows the tab text state. */
#lp-content .pf-tab .tab-icon .st0,
#lp-content .pf-tab .tab-icon path,
#lp-content .pf-tab .tab-icon polyline,
#lp-content .pf-tab .tab-icon polygon,
#lp-content .pf-tab .tab-icon circle,
#lp-content .pf-tab .tab-icon line,
#lp-content .pf-tab .tab-icon rect {
    fill: none; stroke: #fff; stroke-width: 1.5px;
    stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
#lp-content .pf-tab.is-active .tab-icon .st0,
#lp-content .pf-tab.is-active .tab-icon path,
#lp-content .pf-tab.is-active .tab-icon polyline,
#lp-content .pf-tab.is-active .tab-icon polygon,
#lp-content .pf-tab.is-active .tab-icon circle,
#lp-content .pf-tab.is-active .tab-icon line,
#lp-content .pf-tab.is-active .tab-icon rect { stroke: #1a1300; }
#lp-content .pf-tab .tab-label { display: block; text-align: center; }
#lp-content .pf-tab .tab-count {
    display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 999px;
    background: rgba(0,0,0,0.25); color: inherit; -webkit-text-fill-color: inherit;
    font-size: 0.9em; font-weight: 700; line-height: 1.5;
}
#lp-content .pf-tab:not(.is-active) .tab-count { background: rgba(243,195,24,0.18); }

@media (max-width: 700px) {
    #lp-content .pf-tabs { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    #lp-content .pf-tab .tab-icon { width: 50px; height: 50px; }
}
@media (max-width: 460px) {
    #lp-content .pf-tabs { grid-template-columns: 1fr; }
}

/* --- Group sections + cards --- */
#lp-content .pf-group { display: none; margin-top: 0; }
#lp-content .pf-group.is-active { display: block; }
#lp-content #pf-grid.is-searching .pf-group { display: block; }
#lp-content #pf-grid.is-searching .pf-group > h4 { display: inline-block; margin: 1.6em 0 0.8em; color: var(--gold); }
#lp-content .pf-group > h4 { display: none; }   /* in tile mode the tile is the heading */

/* Multi-column on desktop — fill horizontal space, cut the tall single column.
   auto-fill keeps cards a sensible width and reflows to 1 column on mobile. */
#lp-content .pf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
    margin: 0 auto;
    max-width: 950px;
}
@media (max-width: 600px) {
    #lp-content .pf-grid { grid-template-columns: 1fr; }
}
#lp-content .pf-card {
    background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 8px;
    padding: 10px 18px; text-align: left;
    transition: box-shadow 0.18s linear, transform 0.18s linear, background-color 0.18s linear;
}
#lp-content .pf-card:hover { background: var(--bg-elevated-2); transform: translateY(-1px); }
#lp-content .pf-card.is-hidden { display: none; }
#lp-content .pf-card a.pf-name { color: #fff; font-weight: 600; font-size: 0.98em; }
#lp-content .pf-card a.pf-name:hover { color: var(--gold); }
#lp-content .pf-card.no-link .pf-name { color: #fff; font-weight: 600; font-size: 0.98em; }
#lp-content .pf-card .pf-meta { display: block; color: var(--text-muted); font-size: 0.72em; margin-top: 2px; }

/* Empty state */
#lp-content .pf-empty {
    display: none; background: var(--bg-elevated); border: 1px dashed var(--border-strong);
    border-radius: 8px; padding: 32px 24px; margin: 0 auto; max-width: 650px; text-align: center;
}
#lp-content .pf-empty.is-visible { display: block; }
#lp-content .pf-empty p { color: var(--main-color); margin: 0; }
