/* Brand colors (--dg-primary / --dg-secondary and friends) live in
   common/assets/theme/css/tokens.css, shared with backend — see
   common\assets\ThemeAsset. Everything below is frontend-only layout.
   This file must never redeclare --dg-primary/--dg-secondary/etc. itself
   (it used to redefine --dg-secondary right here, silently diverging from
   theme.css behind its back — see PROMPTUL 18); it only ever reads them
   via var(), same as theme.css and backend/web/css/site.css do. */

/* The vertical-centering flex chain every non-homepage page relies on
   (e.g. site-login/site-signup's own d-flex align-items-center) — opt-in
   via this dedicated class (see layouts/main.php) rather than matching
   any ".container" that happens to be a direct child of <main>, which
   used to also (wrongly) stretch layouts/home.php's much smaller alert
   wrapper to fill the viewport. */

:root {
    --primary-color:#1D8C39;
    --secondary-color:#FFD400;
    --font-size-primary: clamp(2rem, 4vw, 3rem);
    --bg-color-sec: #f5f9fd;
    --black: #0B0D0C;
    --white:#ffffff;

    /* Originally added for the spin wheel (frontend/views/spins/wheel.php)
       but since reused wherever a spec hands us these token names — not a
       second palette, every one of these is the site's own existing color
       above (or a color-mix() of two of them), just named for what it
       means in that context so the component's own CSS reads clearly on
       its own. */
    --ink: var(--black);
    --text-primary: var(--black);
    --text-secondary: var(--bs-secondary-color, #6c757d);
    --brand-green: var(--primary-color);
    --brand-green-dark: var(--dg-secondary);
    --flame-gold: var(--secondary-color);
    --flame-lime: color-mix(in srgb, var(--primary-color) 55%, var(--secondary-color) 45%);
    --chrome-silver: #C4C9C7;
    --surface-100: var(--white);
    --surface-200: var(--bg-color-sec);
    --radius-sm: .375rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1.25rem;
    --space-5: 2rem;
    --space-6: 3rem;

    /* Explanatory/secondary note text (leaderboard rules, livestream
       status, etc.) — Bootstrap's own .small (.875em) reads too small
       next to the rest of the site's body copy; one variable instead of
       a one-off bump wherever this kind of text shows up. */
    --font-size-note: 1.05rem;

    /* Display face for the "Tezaurul Dragonului" instant-prize tab (see
       frontend/web/css/instant-prizes.css) — loaded there via
       frontend\assets\InstantPrizesAsset, not site-wide, so this variable
       is harmless to declare globally but only actually renders in
       Rajdhani where that bundle is registered. */
    --font-display: 'Rajdhani', sans-serif;
}

/* Page background everywhere on the frontend, instead of plain white —
   lets white surfaces (cards, form panels, ...) actually stand out
   against the page behind them. */
/* Yii's own dev-only debug toolbar (bottom-right corner widget) — hidden
   by request; the /debug panel itself still works if opened directly by
   URL, this just stops it floating on every page. */
#yii-debug-toolbar {
    display: none !important;
}

body {
    background-color: var(--bg-color-sec);
    /* Safety net against sideways scroll/rubber-band from any one-off
       element that pokes past the viewport edge. */
    overflow-x: hidden;
}

.hp-lasted-launched {
    background-color: var(--bg-color-sec);
}

/* Guarantees every page's own content area fills at least one full
   viewport height, on top of the header/footer around it — a page with
   very little content (an empty account tab, say) never feels this
   short with the footer sitting right underneath it. */
#main {
    min-height: 100vh;
}

.page-container {
    padding: 48px 15px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.btn-primary {
    /* border-radius: var(--bs-border-radius-xl); */
    /* --primary-color by explicit request — white text sits at 4.3:1 here,
       below the 4.5:1 AA minimum (was --brand-green-text/5.0:1, PROMPTUL 18).
       Accepted knowingly; revert to --brand-green-text if contrast matters. */
    background-color: var(--primary-color);
    color:white;
    font-weight: 700;
}

.primary-title {
    color:var(--black);
    font-size:var(--font-size-primary);
    text-transform: uppercase;
}
.primary-title-white{
    color:var(--white);
    font-size:var(--font-size-primary);
    text-transform: uppercase;
}
.show-up{
    color:var(--primary-color)
}

/* align navbar brand baseline with nav links */
.navbar > .container,
.navbar > .container-fluid {
    align-items: baseline;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* On mobile there's no inline nav text next to the brand to baseline-align
   with — just the logo image and the round toggler button, which baseline
   alignment leaves visibly off-center (an <img>'s baseline is its bottom
   edge). Center them instead, only below the breakpoint where the text
   baseline-alignment above stops mattering. */
@media (max-width: 991.98px) {
    .navbar > .container,
    .navbar > .container-fluid {
        align-items: center;
    }
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--secondary-color);
}
.nav-link {
    color: var(--white);
    font-size: clamp(0.95rem, 1vw, 1.1rem);
    font-weight: 600;
}

/* Account/cart icon badges (layouts/_header.php) — a small counter pill
   anchored to the top-right corner of the icon, capped at "99+" in the
   markup so a big number never blows past the icon's own size. */
.nav-icon-link {
    position: relative;
}

.nav-icon-badge {
    position: absolute;
    top: -.2rem;
    right: -.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--primary-color);
    color: var(--white);
    font-size: .65rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--black);
}

/* style navbar logout link color, hover state, and mobile layout */
.navbar-nav .nav-link.logout {
    color: var(--bs-navbar-color);
}

@media (max-width: 767.98px) {
    .navbar-nav .nav-link.logout {
        display: block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.navbar-nav .nav-link.logout:focus,
.navbar-nav .nav-link.logout:hover {
    color: var(--bs-navbar-hover-color);
}

.contest-progress {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    background-color: #d9dde1;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12);
}

.contest-progress-bar {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    box-shadow: 0 0 8px rgba(29, 140, 57, .45);
    transition: width .4s ease-in-out;
}

.contest-progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, .3) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, .3) 50%,
        rgba(255, 255, 255, .3) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
    animation: contest-progress-stripes 1s linear infinite;
}

@keyframes contest-progress-stripes {
    from {
        background-position: 1rem 0;
    }
    to {
        background-position: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contest-progress-bar::after {
        animation: none;
    }
}

/* A closed contest's progress bar is a historical record, not a live
   figure — no reason for the "still selling" stripe animation to keep
   moving under it. */
.contest-progress-bar.is-frozen::after {
    animation: none;
}

.hero-cta {
    background: var(--secondary-color);
    color: var(--dg-on-primary);
    border: none;
    
}

.hero-cta:hover {
    background: color-mix(in srgb, var(--secondary-color) 85%, black);
    color: var(--dg-on-primary);
}

/* contact form textarea height */
.site-contact textarea.form-control {
    height: 140px;
}

/* captcha: blend with card background */
.site-contact img[src*="captcha"] {
    border-radius: var(--bs-border-radius);
    mix-blend-mode: multiply;
}

/* centered page layout */
.site-login,
.site-signup,
.site-contact,
.site-request-password-reset,
.site-reset-password,
.site-resend-verification-email,
.site-index,
.site-error {
    flex: 1;
}

.site-error .site-error-content {
    width: 100%;
    max-width: 90%;
}

@media (min-width: 576px) {
    .site-error .site-error-content {
        max-width: 80%;
    }
}

@media (min-width: 768px) {
    .site-error .site-error-content {
        max-width: 60%;
    }
}

@media (min-width: 992px) {
    .site-error .site-error-content {
        max-width: 50%;
    }
}

.hero-lead {
    max-width: 520px;
}

/* =========================================================
   Login / signup split-card (frontend/views/site/login.php,
   frontend/views/site/signup.php — same markup, same classes). None of
   these classes had any CSS at all before this — the brand panel was
   plain white, the submit button was an unstyled outline, and the logo
   widget rendered as bare text.
   ========================================================= */

.login-split-card {
    max-width: 900px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
}

/* Dark brand gradient + radial glow for the brand panel of the auth
   split-card. */
.login-brand-panel {
    background: linear-gradient(150deg, var(--dg-secondary-light) 0%, var(--dg-secondary) 55%, #050d1a 100%);
    position: relative;
    overflow: hidden;
}

.login-brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 85%, rgba(212, 175, 55, .35) 0%, transparent 45%),
        radial-gradient(circle at 85% 10%, rgba(255, 255, 255, .1) 0%, transparent 40%);
    pointer-events: none;
}

.login-brand-panel > div {
    position: relative;
    z-index: 1;
}

.login-brand-title {
    font-size: 2.1rem;
    line-height: 1.15;
}

.login-brand-text {
    font-size: 1.05rem;
    max-width: 280px;
}

.login-btn {
    background: var(--brand-green);
    font-weight: 700;
    letter-spacing: .01em;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

.login-btn:hover,
.login-btn:focus-visible {
    background: var(--brand-green-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
    color: var(--white);
}

/* "Continuă cu Google" button (frontend/views/site/login.php,
   signup.php) — a plain, neutral outline rather than the brand-green
   .login-btn, so it reads as a distinct provider choice, not "the same
   action in another color". */
.google-btn {
    background: var(--white);
    border: 1px solid var(--chrome-silver);
    color: var(--black);
    font-weight: 600;
    transition: background-color 150ms ease, box-shadow 150ms ease;
}

.google-btn:hover,
.google-btn:focus-visible {
    background: var(--surface-200);
    border-color: var(--chrome-silver);
    color: var(--black);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

.login-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--text-secondary);
    font-size: .8rem;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--chrome-silver);
}

.login-link {
    color: var(--brand-green);
    font-weight: 600;
    text-decoration: none;
}

.login-link:hover,
.login-link:focus-visible {
    text-decoration: underline;
}

/* The "your account isn't verified yet, we just resent the email"
   notice (frontend/views/site/login.php) — shown only right after a
   login attempt that turned out to have the correct username/password
   for an unverified account, see LoginForm::getUnverifiedUser(). */
.login-verify-alert {
    background: color-mix(in srgb, var(--brand-green) 12%, var(--surface-100));
    border: 1px solid color-mix(in srgb, var(--brand-green) 35%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    color: var(--text-primary);
    font-size: .9rem;
}

.login-verify-alert i {
    color: var(--brand-green);
    flex-shrink: 0;
}

/* The "🐉 Dragon Giveaways" text lockup (common\widgets\BrandLogo) used
   across every auth-adjacent page (login/signup/password reset, the
   backend sidebar and admin login) — also completely unstyled before
   this, anywhere it's used. */
.brand-logo {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    font-weight: 800;
}

.brand-logo-icon {
    font-size: 1.15em;
}

.brand-logo-accent {
    color: var(--secondary-color);
}

/* The real logo image (frontend/web/images/logo/logo.webp — same file
   the navbar and footer use) on the login/signup split-card, instead of
   the plain-text BrandLogo widget lockup. The logo itself is green/black
   on a transparent background, so it disappears against the dark
   gradient brand panel — same fix as the footer's payment badges: a
   small white pill behind it guarantees contrast regardless of what's
   underneath. */
.login-brand-logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: .65rem 1rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}

.login-brand-logo {
    max-width: 150px;
    width: 100%;
    height: auto;
    display: block;
}

.login-brand-logo-mobile {
    max-width: 140px;
    width: 100%;
    height: auto;
}

/* =========================================================
   Welcome banner (frontend/views/layouts/_welcomeBanner.php) — shown
   once, right after a login/signup, on the homepage only. Same dark
   gradient + gold radial glow already established on
   the login split-card's brand panel, so this reads as the same brand
   moment rather than a generic Bootstrap alert.
   ========================================================= */

@keyframes welcome-banner-in {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.welcome-banner {
    background: linear-gradient(120deg, var(--dg-secondary-light) 0%, var(--dg-secondary) 55%, #050d1a 100%);
    position: relative;
    overflow: hidden;
    animation: welcome-banner-in 500ms cubic-bezier(.4, 0, .2, 1);
}

.welcome-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 50%, rgba(212, 175, 55, .32) 0%, transparent 45%),
        radial-gradient(circle at 92% 15%, rgba(255, 255, 255, .08) 0%, transparent 40%);
    pointer-events: none;
}

.welcome-banner-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-3);
    color: var(--white);
}

.welcome-banner-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--secondary-color);
    flex-shrink: 0;
}

.welcome-banner-text {
    flex: 1 1 auto;
    min-width: 0;
}

.welcome-banner-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}

.welcome-banner-name {
    color: var(--secondary-color);
}

.welcome-banner-subtitle {
    margin: .2rem 0 0;
    font-size: .9rem;
    opacity: .85;
}

.welcome-banner-cta {
    display: inline-flex;
    align-items: center;
    background: var(--secondary-color);
    color: var(--black);
    font-weight: 700;
    padding: .6rem 1.2rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.welcome-banner-cta:hover,
.welcome-banner-cta:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
    color: var(--black);
}

.welcome-banner-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, .65);
    font-size: 1rem;
    padding: .25rem;
    flex-shrink: 0;
    transition: color 150ms ease;
}

.welcome-banner-close:hover,
.welcome-banner-close:focus-visible {
    color: var(--white);
}

@media (max-width: 575.98px) {
    .welcome-banner-inner {
        flex-wrap: wrap;
    }

    .welcome-banner-cta {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   Header: announcement bar + sticky main navbar
   ========================================================= */

/* The whole header (announcement bar + navbar) sticks as one unit — it
   has to be here, on the outer wrapper, and not on .main-navbar alone:
   a sticky element can only stay "stuck" for as much extra height as its
   own containing block (its parent) has beyond it, and .main-navbar's
   parent used to be this same header with nothing taller wrapping it,
   so it ran out of room and un-stuck itself almost immediately. */
#header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.announcement-bar {
    position: relative;
    overflow: hidden;
    background: var(--dg-primary);
    color: var(--dg-on-primary);
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* A soft light sweep that glints across the bar every few seconds —
   stays subtle (a pause between passes, low opacity) but catches the
   eye enough that the bar doesn't just blend into the header. */
.announcement-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: announcement-shine 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes announcement-shine {
    0%, 45% {
        transform: translateX(-100%);
    }

    65%, 100% {
        transform: translateX(100%);
    }
}

.announcement-bar a,
.announcement-bar a:hover {
    color: var(--dg-on-primary) !important;
}

.announcement-bar .bi-telegram {
    display: inline-block;
    animation: announcement-icon-pulse 2.2s ease-in-out infinite;
}

@keyframes announcement-icon-pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }
}

.main-navbar {
    background: var(--black);
}

/* Yii's Nav dropdown items (used for the "Concursuri" submenu) render as
   Bootstrap's default light dropdown — fine on its own, just needs a touch
   of shadow to read clearly against the dark navbar. */
.main-navbar .dropdown-menu {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

/* =========================================================
   Mobile nav menu — _header.php's NavBar now uses offcanvasOptions
   instead of the default Collapse, so #main-nav-offcanvas is a real
   Bootstrap Offcanvas panel (fixed, Bootstrap's own .offcanvas class).
   Below 992px it's a full-screen takeover; >=992px (navbar-expand-lg's
   own breakpoint) this resets it back to a plain inline row, same as
   before.
   ========================================================= */
.offcanvas-backdrop {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.main-nav-offcanvas-close {
    display: none;
}

@media (max-width: 991.98px) {
    #main-nav-offcanvas {
        --bs-offcanvas-height: 100vh;
        --bs-offcanvas-bg: rgba(5, 8, 6, .94);
        --bs-offcanvas-border-width: 0;
        width: 100%;
    }

    #main-nav-offcanvas .offcanvas-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.75rem;
        padding: 5.5rem 1.5rem 2.5rem;
        overflow-y: auto;
        text-align: center;
    }

    #main-nav-offcanvas .navbar-nav {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    #main-nav-offcanvas .navbar-nav .nav-link {
        font-size: 1.4rem;
        font-weight: 700;
    }

    /* Explicit close button — the full-screen panel (100vh, top:0) sits
       right over the fixed navbar row, so the hamburger/X toggler up
       there isn't a reliable "how do I close this" affordance on its
       own; this one lives inside the panel itself, always in view. */
    #main-nav-offcanvas .main-nav-offcanvas-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 1.1rem;
        right: 1.1rem;
        width: 2.75rem;
        height: 2.75rem;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, .1);
        color: var(--white);
        font-size: 1.05rem;
        z-index: 1;
        transition: background-color .15s ease-in-out;
    }

    #main-nav-offcanvas .main-nav-offcanvas-close:hover,
    #main-nav-offcanvas .main-nav-offcanvas-close:focus-visible {
        background: color-mix(in srgb, var(--dg-primary) 45%, transparent);
        outline: none;
    }

    /* RO/EN — pulled to the top of the panel, right under the fixed
       header bar where the hamburger/X button stays put; styled as two
       real pill buttons (was plain, low-contrast text links) so it reads
       as tappable instead of blending into the dark background. */
    #main-nav-offcanvas .main-nav-lang-switch {
        order: -1;
    }

    #main-nav-offcanvas .main-nav-lang-switch .lang-switch {
        justify-content: center;
        gap: .5rem;
    }

    #main-nav-offcanvas .lang-link {
        font-size: 1rem;
        padding: .45rem 1rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, .1);
        color: rgba(255, 255, 255, .85);
    }

    #main-nav-offcanvas .lang-link + .lang-link::before {
        content: none;
    }

    #main-nav-offcanvas .lang-link:hover {
        background: rgba(255, 255, 255, .18);
        color: var(--white);
    }

    #main-nav-offcanvas .lang-link.active {
        background: var(--dg-primary);
        color: var(--white);
    }

    /* Account/cart/wallet/logout — its own icon row at the bottom,
       instead of mixed in with the main links. */
    #main-nav-offcanvas .main-nav-icons {
        order: 1;
        flex-direction: row;
        justify-content: center;
        gap: 1.25rem;
        margin-top: .5rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }

    #main-nav-offcanvas .main-nav-icons .nav-link {
        font-size: 1.6rem;
        padding: .5rem;
    }
}

@media (min-width: 992px) {
    #main-nav-offcanvas {
        position: static;
        visibility: visible;
        background-color: transparent !important;
    }

    #main-nav-offcanvas .offcanvas-header {
        display: none;
    }

    #main-nav-offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
        background-color: transparent !important;
    }
}

/* Mobile hamburger — a round button with 3 bars that morph into an X on
   open (see _header.php's togglerContent), instead of Bootstrap's bare
   bordered default icon. */
.brand-navbar-toggler {
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .32rem;
    padding: 0;
    transition: background-color .2s ease-in-out;
}

.brand-navbar-toggler:hover {
    background: color-mix(in srgb, var(--dg-primary) 35%, transparent);
}

.brand-navbar-toggler:focus-visible {
    background: color-mix(in srgb, var(--dg-primary) 35%, transparent);
    outline: none;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--dg-primary) 45%, transparent);
}

.navbar-toggler-bar {
    display: block;
    width: 1.35rem;
    height: 2px;
    border-radius: 2px;
    background: var(--white);
    transition: transform .25s ease-in-out, opacity .2s ease-in-out, width .2s ease-in-out;
}

.brand-navbar-toggler[aria-expanded="true"] .navbar-toggler-bar-top {
    transform: translateY(.54rem) rotate(45deg);
}

.brand-navbar-toggler[aria-expanded="true"] .navbar-toggler-bar-mid {
    opacity: 0;
    width: 0;
}

.brand-navbar-toggler[aria-expanded="true"] .navbar-toggler-bar-bottom {
    transform: translateY(-.54rem) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .navbar-toggler-bar {
        transition: none;
    }
}

/* =========================================================
   Homepage: hero
   ========================================================= */

.hero-section {
    background: url('/images/bg/bg-hero.webp') center / cover no-repeat;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
  radial-gradient(circle at 15% 85%, rgba(14, 58, 56, 0.65) 0%, rgba(5, 13, 26, 0.92) 55%, #050d1a 100%),
  radial-gradient(circle at 85% 100%, rgba(46, 189, 78, 0.16) 0%, rgba(11, 13, 12, 0.9) 55%, #0b0d0c 100%);
    pointer-events: none;
}

.hero-section .container {
    position: relative;
    min-height: 75vh;
}
.title-hero {
    color: var(--white);
    text-transform: uppercase;
    font-weight: 800;
}

.text-accent {
    color: var(--secondary-color);
}
.brand-logo-img {
    max-width:10rem;
    width: 100%;
    height: auto;
}

/* Contact page (site/contact.php) — the real image logo instead of the
   emoji+text BrandLogo lockup used elsewhere, kept small since this card
   is a compact split-panel, not a full-width header. */
.contact-logo-img {
    max-width: 100px;
    width: 100%;
    height: auto;
}

/* Hero coverflow carousel (Swiper — see frontend/assets/SwiperAsset and
   frontend/views/site/index.php). Every slide keeps its title, ticket
   price and "Participă acum" CTA, but only the centered/active slide
   reveals them — side slides show just the prize photo, echoing the
   fanned card-stack look. The whole card is a single link (like the
   homepage's category tiles below), so any slide — active or peeking —
   is clickable straight through to that contest. */
.hero-swiper {
    width: 100%;
    padding: 2rem 0 3rem;
    /* Clipped to the column's own width — without this, the peeking side
       slides can drift past the swiper's bounds at the first/last slide
       (where both neighbors pile up on one side) and overlap the hero
       text in the column next to it. A soft mask fade (rather than a hard
       clip) keeps that edge from looking abruptly cut off. */
    overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 3%,
    #000 97%,
    transparent 100%
);

mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 3%,
    #000 97%,
    transparent 100%
);
    --swiper-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.hero-swiper .swiper-wrapper {
    align-items: center;
}

.hero-swiper-slide {
    /* Scales with the viewport instead of a fixed size, so it can grow on
       wide screens without needing a media query per breakpoint — capped
       so peeking side cards always keep some room instead of filling the
       whole column. This carousel is the hero's centerpiece, so it's
       sized to dominate its (now wider, col-lg-7) column. */
    width: clamp(23rem, 55vw, 42rem);
    aspect-ratio: 16 / 11;
    height: auto;
}

/* On mobile the clamp()'s 23rem floor leaves the slide nearly as wide as
   the viewport, with .hero-swiper's own 0 horizontal padding — so the
   price badge's intentional overhang (right: -1.25rem, above) and the
   edges of the active card itself get eaten by the swiper's own
   overflow:hidden/mask-image fade. Narrower slides + real side padding
   give both room to breathe. */
@media (max-width: 767.98px) {
    .hero-swiper {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }

    .hero-swiper-slide {
        width: 78vw;
    }
}

.hero-swiper-card {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 1.25rem;
    overflow: hidden;
    background-color: var(--white);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .45);
    transition: filter .7s cubic-bezier(.4, 0, .2, 1), opacity .7s cubic-bezier(.4, 0, .2, 1);
}

/* Side (non-centered) slides sit slightly blurred and dimmed, like a
   soft depth-of-field — only the active slide is fully sharp. */
.swiper-slide:not(.swiper-slide-active) .hero-swiper-card {
    filter: blur(2px);
    opacity: .55;
}

.hero-swiper-card-placeholder {
    background: linear-gradient(135deg, var(--dg-secondary-lighter), var(--dg-secondary));
}

.hero-swiper-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(5, 13, 26, .92) 0%, rgba(5, 13, 26, .2) 60%, transparent 100%);
}

.hero-swiper-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 1.25rem;
    opacity: 0;
    transform: translateY(.5rem);
    transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1);
}

/* A "sale sticker" popping out over the image frame's own top-right
   corner — deliberately a sibling of .hero-swiper-card (not a child of
   it, see the view), since that card clips to its rounded corners and
   would otherwise cut the badge off wherever it overflows. The layered
   shadows + gradient + slight rotation are what read as "3D" rather than
   a flat rectangle sitting on top of the photo. */
.hero-swiper-price-badge {
    position: absolute;
    left: auto;
    top: -1.5rem;
    right: -1.25rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(155deg, #fff6c4 0%, var(--secondary-color) 45%, #e0b400 100%);
    color: var(--black);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1;
    padding: .85rem 1.35rem;
    border-radius: .75rem;
    border: 1px solid rgba(0, 0, 0, .1);
    opacity: 0;
    transform: translateY(.5rem) rotate(-6deg);
    transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1);
    box-shadow:
        0 3px 0 rgba(0, 0, 0, .2),
        0 12px 22px rgba(0, 0, 0, .4),
        inset 0 1px 0 rgba(255, 255, 255, .7);
}

.hero-swiper-price-original {
    font-size: 1rem;
    font-weight: 600;
    text-decoration: line-through;
    opacity: .65;
}

.hero-swiper-price-unit {
    font-size: .9rem;
    font-weight: 600;
    opacity: .75;
}

.hero-swiper-price-discount {
    background: var(--black);
    color: var(--secondary-color);
    font-size: 1rem;
    font-weight: 800;
    padding: .2rem .55rem;
    border-radius: .4rem;
}

/* A real, currently-active discount (see Contest::getDiscountPercent())
   makes the whole badge grow — the saving should be hard to miss, not
   just another same-size detail next to the price. */
.hero-swiper-price-badge-discounted {
    font-size: 1.5rem;
    padding: .75rem 1.15rem;
    top: -1.25rem;
    right: -1rem;
}

.hero-swiper-title {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: .85rem;
}

.swiper-slide-active .hero-swiper-content {
    opacity: 1;
    transform: none;
}

.swiper-slide-active .hero-swiper-price-badge {
    opacity: 1;
    /* Keeps the sticker's resting rotation instead of snapping upright
       like .hero-swiper-content does — only the entrance slide-up
       (translateY) is meant to settle out here. */
    transform: rotate(-6deg);
}

.hero-swiper-pagination.swiper-pagination {
    position: relative;
    bottom: 0;
    margin-top: .5rem;
}

.hero-swiper-pagination .swiper-pagination-bullet {
    background: var(--dg-secondary-lighter);
    opacity: .6;
}

.hero-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--secondary-color);
    opacity: 1;
}

/* =========================================================
   Trust band + countdown
   ========================================================= */

.trust-band {
   background-color: var(--bg-color-sec);
}

.countdown-block {
    position: relative;
    z-index: 2;
    background: var(--secondary-color);
    color: var(--black);
    box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, .35), 0 .5rem 1rem rgba(0, 0, 0, .2);
}

/* The banner's own copy sits directly on the yellow background, so the
   dark-card text utilities it was written with (text-warning,
   text-white-50) need to flip to dark here — everything else (the clock
   tiles below) stays light-on-dark since it's on its own black tile. */
.countdown-block h3 {
    color: var(--black);
    font-weight: 800;
}

.countdown-block .text-warning {
    color: var(--black) !important;
    font-weight: 800;
    letter-spacing: .06em;
}

.countdown-block .text-white-50 {
    color: rgba(11, 13, 12, .65) !important;
}

/* "Tragerea are loc în" — small on its own, so it needs the extra
   weight to hold up against the bold clock tiles next to it. */
.countdown-right .small {
    font-weight: 700;
}

.countdown-figures {
    font-variant-numeric: tabular-nums;
}

/* The clock tiles stretch to fill the banner's full height on desktop,
   matching the left column instead of sitting compact/centered. */
@media (min-width: 992px) {
    .countdown-block .row {
        align-items: stretch;
    }

    .countdown-right {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .countdown-figures {
        align-items: stretch !important;
        width: 100%;
    }

    .countdown-box {
        height: 100%;
        flex: 1 1 0;
        min-width: 5.5rem;
        padding: 1.25rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .countdown-value {
        font-size: 3.75rem;
    }

    .countdown-label {
        font-size: .85rem;
    }

    .countdown-separator {
        font-size: 2rem;
    }
}

/* Each unit reads like a black digital-clock tile sitting on the yellow
   banner, ticking digits included. */
.countdown-box {
    min-width: 3.75rem;
    padding: .65rem .5rem;
    border-radius: .75rem;
    text-align: center;
    background: var(--black);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 .4rem .85rem rgba(0, 0, 0, .3);
}

.countdown-separator {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--black);
    opacity: .45;
}

.countdown-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.countdown-label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .65);
    margin-top: .2rem;
}

/* =========================================================
   Contest cards
   ========================================================= */

.contest-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: #050d1a;
    /* Clips the image's drop-shadow glow to this box — without it, on a
       "full height" contain'd image (one that touches the box's top and
       bottom edges with no letterbox room to fade into first) the glow
       spills straight onto .card-body below it. */
    overflow: hidden;
}
.delimitare-card{    
    border-top: 1px solid #dcdcdc;
}

.contest-card-img {
    filter:
        drop-shadow(0 8px 8px rgba(124, 255, 0, 0.35))
        drop-shadow(0 14px 25px rgba(124, 255, 0, 0.45));
}
.contest-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 8 / 4;
    display: block;
}

.contest-card-img-placeholder {
    background: linear-gradient(135deg, var(--dg-secondary-lighter), var(--dg-secondary));
}

.contest-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.contest-card-price {

    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 700;
    color: var(--dg-secondary);
    margin-bottom: 0;
    margin: 0 auto;
    color: #118C4F;
}

.contest-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12) !important;
}

/* Card CTA ("Vezi concursul" etc.) hover: lighter green, by request —
   unlike the global .btn-primary (theme.css, PROMPTUL 18) which darkens on
   hover to keep white text AA-safe. A lighter fill can't keep white text
   above 4.5:1, so hover also switches the text to --text-on-light instead. */
.contest-card .btn-primary:hover,
.contest-card .btn-primary:focus-visible {
    --bs-btn-hover-bg: color-mix(in srgb, var(--dg-primary) 75%, white 25%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--dg-primary) 75%, white 25%);
    --bs-btn-hover-color: var(--text-on-light);
}

.contest-card-price-original {
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: line-through;
    margin-right: .4rem;
}

/* "-X%" discount badge — card image corner and (bigger) next to the
   price on the detail page. Red/urgent on purpose: the one place on the
   site that deliberately breaks from the green/gold palette, the same
   way a "sale" tag always does, so it reads as unmissable at a glance. */
.contest-card-discount-badge {
    position: absolute;
    top: .65rem;
    left: .65rem;
    z-index: 2;
    background-color: var(--bs-danger);
    color: var(--white);
    font-size: .85rem;
    font-weight: 800;
    padding: .3rem .6rem;
    border-radius: .5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* =========================================================
   Category grid
   ========================================================= */

.category-tile {
    position: relative;
    aspect-ratio: 4 / 5;
    background-color: var(--dg-secondary);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    transition: transform .15s ease-in-out;
}

.category-tile:hover {
    transform: translateY(-3px);
}

.category-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .1) 60%, transparent 100%);
}

.category-tile-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 1.25rem;
    z-index: 1;
}

.category-tile-name {
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 1.25rem;
}

.category-tile-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--dg-primary);
    color: var(--dg-on-primary);
    flex-shrink: 0;
}

/* Two per row (see index.php's col-6 col-md-4) instead of one full-width
   tile per row — shorter aspect ratio + smaller inner chrome so they
   read as a compact grid, not three tall stacked banners. */
@media (max-width: 767.98px) {
    .category-tile {
        aspect-ratio: 1 / 1.5;
    }

    .category-tile-inner {
        padding: .75rem;
    }

    .category-tile-arrow {
        width: 1.9rem;
        height: 1.9rem;
        font-size: .8rem;
    }
}

/* =========================================================
   How it works
   ========================================================= */

.how-it-works-section {
    background: var(--black);
    /* .how-it-works-row's negative margin-inline (edge-to-edge mobile
       scroll row) leaks out as real page-level horizontal scroll
       without this — same bug, same fix, as .fraud-trust-section. */
    overflow: hidden;
}

.how-it-works-card {
    background: #ffffff;
    color: var(--bs-body-color);
    padding: 2.75rem 2rem !important;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.how-it-works-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 8px rgba(124, 255, 0, .35), 0 14px 25px rgba(124, 255, 0, .45);
}

.how-it-works-card h3 {
    font-size: 1.4rem;
}

.how-it-works-card p {
    font-size: 1.1rem;
    line-height: 1.5;
}

.how-it-works-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: .85rem;
    background: var(--primary-color);
    color: var(--text-on-light);
    font-size: 1.6rem;
}

/* Horizontal swipe instead of 4 stacked full-width cards — each card
   keeps a fixed width and snaps into place as you scroll right. */
@media (max-width: 767.98px) {
    .how-it-works-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: .5rem;
        margin-inline: -1rem;
        padding-inline: 1rem;
        /* Native scrollbars auto-hide on touch/trackpad, so there's often
           no visible hint there's more to scroll to — an always-on
           styled one instead (Firefox: color only, no gradient; the
           ::-webkit- rules below carry the actual look). */
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color) rgba(255, 255, 255, .15);
    }

    .how-it-works-row > div {
        flex: 0 0 80%;
        scroll-snap-align: start;
    }

    .how-it-works-row::-webkit-scrollbar {
        height: 6px;
    }

    .how-it-works-row::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, .15);
        border-radius: 999px;
    }

    .how-it-works-row::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
        border-radius: 999px;
    }
}

/* =========================================================
   Testimonials
   ========================================================= */

.testimonial-card {
    background: var(--bs-gray-100);
    position: relative;
}

.testimonial-quote-icon {
    font-size: 2rem;
    color: var(--dg-primary);
    opacity: .5;
}

/* Bootstrap's carousel arrows default to a plain white icon, meant for a
   dark/image slide behind them — invisible on this section's light
   background, so give each a filled dark circle to sit on instead. */
.testimonials-section .carousel-control-prev,
.testimonials-section .carousel-control-next {
    width: 2.5rem;
    height: 2.5rem;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    background-color: var(--dg-primary);
    border-radius: 50%;
    opacity: .9;
}

.testimonials-section .carousel-control-prev {
    left: -1.25rem;
}

.testimonials-section .carousel-control-next {
    right: -1.25rem;
}

/* The negative offset above floats the arrows nicely past the card's edge
   on desktop, where there's room — on narrow screens it pushes them past
   the viewport edge instead, causing real horizontal scroll. Keep them
   inside on mobile. */
@media (max-width: 575.98px) {
    .testimonials-section .carousel-control-prev {
        left: .25rem;
    }

    .testimonials-section .carousel-control-next {
        right: .25rem;
    }
}

.testimonials-section .carousel-control-prev-icon,
.testimonials-section .carousel-control-next-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.testimonials-indicators {
    position: relative;
    margin-top: 1rem;
}

.testimonials-indicators [data-bs-target] {
    background-color: var(--bs-gray-400);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: .6;
}

.testimonials-indicators .active {
    background-color: var(--dg-primary);
    opacity: 1;
}

/* =========================================================
   Trust / fraud-prevention accordion
   ========================================================= */

.fraud-trust-section {
    background: #444444;
    /* Without this, .row.g-5's own negative gutter margin (-12px) leaks
       out as real page-level horizontal scroll — unlike the identical
       row in .hero-section, which has this same overflow:hidden. */
    overflow: hidden;
}

/* The "scam alert" graphic is a loud warning-sign yellow — full-size it
   reads as "this site is the scam", not as "here's how we protect you".
   Shown small, muted, and framed as a badge, it reads as a trust icon
   instead. The padded panel around it fills the column properly (rather
   than a tiny image floating in a mostly-empty half) so it doesn't look
   so lightweight next to the accordion column beside it. */
.fraud-trust-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 18rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
}

.fraud-trust-img {
    width: 100%;
    border-radius: 1.25rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .25);
    filter: saturate(.55) brightness(.92);
    opacity: .9;
}

.fraud-trust-eyebrow {
    letter-spacing: .08em;
}

.fraud-trust-title {
    font-size: clamp(1.5rem, 2.3vw, 2.1rem);
    line-height: 1.25;
}

.fraud-accordion .accordion-item {
    background: transparent;
    border-color: rgba(255, 255, 255, .15);
}

.fraud-accordion .accordion-button {
    background: rgba(255, 255, 255, .05);
    color: #ffffff;
    font-weight: 600;
}

.fraud-accordion .accordion-button:not(.collapsed) {
    background: rgba(212, 175, 55, .12);
    color: #ffffff;
    box-shadow: none;
}

.fraud-accordion .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(2);
}

.fraud-accordion .accordion-body {
    background: rgba(255, 255, 255, .03);
    color: rgba(255, 255, 255, .75);
}

/* =========================================================
   Footer — full-bleed background like the navbar (no .container
   directly on <footer>), with its actual content constrained to the
   same .container the rest of the page uses (see layouts/main.php and
   layouts/_footer.php).
   ========================================================= */

.site-footer {
    /* On-dark text tokens, local to the footer — the site's shared
       --text-primary/--text-secondary are tuned for the light surfaces
       the rest of the page uses, not for this footer's black one. */
    --footer-fg: var(--white);
    --footer-fg-muted: rgba(255, 255, 255, .7);
    background: var(--ink);
    border-top: 1px solid color-mix(in srgb, var(--chrome-silver) 20%, transparent);
}

.footer-inner {
    padding-top: var(--space-6);
    padding-bottom: var(--space-5);
    padding-left: 2rem;
    padding-right: 2rem;
}

.footer-heading {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-green);
    margin-bottom: var(--space-3);
}

.footer-link-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
}

.footer-link {
    color: var(--footer-fg-muted);
    text-decoration: none;
    font-size: 1.15rem;
    transition: color 150ms ease;
}

.footer-link:hover,
.footer-link:focus-visible {
    color: var(--footer-fg);
    text-decoration: underline;
}

.footer-brand-logo {
    max-width: 220px;
    width: 100%;
    height: auto;
    margin-bottom: var(--space-3);
}

.footer-brand-tagline {
    color: var(--footer-fg-muted);
    font-size: 1.1rem;
    max-width: 360px;
    margin: 0;
}

/* Mobile accordion (< 992px) — a plain Bootstrap .collapse trigger/panel
   pair (not the full .accordion component, to avoid overriding its
   default chrome), skinned to this footer's own look. Bootstrap's
   Collapse JS manages aria-expanded on the toggle button itself, which
   is what drives the chevron rotation and is already keyboard-operable
   since it's a real <button>. */
.footer-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: var(--space-3) 0;
    text-align: left;
}

.footer-accordion-toggle .footer-heading {
    margin-bottom: 0;
}

.footer-accordion-chevron {
    color: var(--brand-green);
    transition: transform 200ms ease;
    flex-shrink: 0;
}

.footer-accordion-toggle[aria-expanded="true"] .footer-accordion-chevron {
    transform: rotate(180deg);
}

.footer-accordion-panel.collapsing {
    transition-duration: 200ms;
    transition-timing-function: ease;
}

.footer-accordion-panel .footer-link-list {
    padding-bottom: var(--space-3);
}

.footer-company-info {
    color: var(--footer-fg-muted);
    font-size: 1.05rem;
    margin-top: var(--space-3);
    max-width: 360px;
}

.footer-company-info p {
    margin-bottom: var(--space-1);
}

.footer-company-info p:last-child {
    margin-bottom: 0;
}

.footer-social {
    margin-top: var(--space-5);
}

.footer-social-icons {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface-200);
    color: var(--text-primary);
    font-size: 1.1rem;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.footer-social-icon:hover,
.footer-social-icon:focus-visible {
    background: var(--brand-green);
    color: var(--ink);
    transform: translateY(-2px);
}

.footer-payment-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-5);
}

.footer-payment-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 32px;
    padding: var(--space-1) var(--space-2);
    background: #ffffff;
    border-radius: var(--radius-sm);
    border: 1px solid var(--chrome-silver);
    color: var(--black);
    font-size: .95rem;
    font-weight: 600;
}

.footer-age-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-align: center;
    color: var(--footer-fg-muted);
    font-size: 1.05rem;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--chrome-silver) 20%, transparent);
}

.footer-age-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--chrome-silver);
    font-size: .65rem;
    font-weight: 700;
    color: var(--footer-fg-muted);
    flex-shrink: 0;
}

.footer-age-gate a {
    color: var(--brand-green);
    font-weight: 600;
    text-decoration: none;
}

.footer-age-gate a:hover,
.footer-age-gate a:focus-visible {
    text-decoration: underline;
}

/* Contest detail page: gallery + price highlight */

.contest-gallery-thumbs {
    margin-top: .5rem;
}

.contest-gallery-thumb {
    width: 72px;
    height: 54px;
    padding: 0;
    overflow: hidden;
    background-color: var(--white);
    border-radius: .4rem;
    cursor: pointer;
    opacity: .6;
    border: 2px solid transparent;
    transition: opacity .15s ease, border-color .15s ease;
}

.contest-gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.contest-gallery-thumb:hover {
    opacity: .85;
}

.contest-gallery-thumb.active {
    opacity: 1;
    border-color: var(--dg-primary);
}

.contest-price-highlight {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.contest-price-value {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--dg-secondary);
}

.contest-price-label {
    color: var(--bs-secondary-color, #6c757d);
}

.contest-price-original {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: line-through;
    margin-right: .5rem;
}

/* Two info pills (icon-in-a-circle + text) instead of plain gray text
   floating under the price — same language as the coupon-applied/
   wallet-toggle rows elsewhere (cart, checkout). */
.contest-draw-info {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.contest-draw-info p {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .6rem .9rem;
    background: var(--surface-100);
    border: 1px solid var(--chrome-silver);
    border-radius: var(--radius-md);
    font-size: .95rem;
    color: var(--text-secondary);
}

/* flex's align-items:center looks right for one line, but once the
   Facebook/YouTube pills push the sentence onto 2-3 lines on mobile, it
   centers the whole wrapped block against the icon instead of just the
   first line — dropping flex here lets the icon sit as a normal inline
   glyph at the start of the (now naturally wrapping) text. */
@media (max-width: 575.98px) {
    .contest-draw-info p {
        display: block;
    }

    .contest-draw-info p i {
        margin-right: .5rem;
    }
}

.contest-draw-info i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
    font-size: .9rem;
    flex-shrink: 0;
}

/* A small pill/badge inline in the sentence — plain bold-green text
   blended into the surrounding paragraph and wrapped awkwardly on mobile,
   with nothing marking it as clickable besides the color. */
.contest-social-link {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: none;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    border-radius: 999px;
    padding: .05rem .6rem;
    margin: .15rem 0;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.contest-social-link:hover,
.contest-social-link:focus-visible {
    background: var(--primary-color);
    color: var(--white);
    text-decoration: none;
}

/* Winners page */

.winner-card-trigger {
    cursor: pointer;
}

/* Winner cards use a portrait frame (it's a photo of a person, not a
   16:9 product shot) — overrides .contest-card-media/.contest-card-img's
   shared landscape sizing and green product-glow drop-shadow, which
   don't suit a person's photo. */
.winner-card-media {
    aspect-ratio: 3 / 4;
}

.winner-card-media .contest-card-img {
    aspect-ratio: 3 / 4;
    object-fit: contain;
    filter: none;
}

/* Winner photo lightbox — frontend\views\winners\index.php's
   #winnerLightbox modal, opened by clicking a card (see _card.php's
   .winner-card-trigger), with Prev/Next cycling through every winner
   currently in the page (including ones loaded via "Încarcă mai multe"). */

.winner-lightbox-content {
    background: transparent;
}

.winner-lightbox-img {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 1rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .5);
}

.winner-lightbox-close {
    position: absolute;
    top: -2.5rem;
    right: 0;
    z-index: 2;
}

.winner-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.4rem;
    transition: background-color .15s ease-in-out;
}

.winner-lightbox-nav:hover {
    background-color: rgba(255, 255, 255, .25);
}

.winner-lightbox-prev {
    left: -1.5rem;
}

.winner-lightbox-next {
    right: -1.5rem;
}

@media (max-width: 576px) {
    .winner-lightbox-prev {
        left: .5rem;
    }

    .winner-lightbox-next {
        right: .5rem;
    }
}

.spin-wheel-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.spin-wheel-remaining {
    font-weight: 600;
    color: var(--text-secondary);
}

.spin-wheel-remaining strong {
    color: var(--ink);
    font-weight: 800;
}

/* The "Premiul a fost adăugat în contul tău!" confirmation in the result
   modal — deliberately bigger/bolder than the plain description line
   above it, so it reads as its own distinct, reassuring statement rather
   than just more small print. */
.spin-result-account-message {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-green);
}

.spin-wheel-lock-message {
    max-width: 420px;
    margin: 0 auto 1.25rem;
    text-align: center;
}

.spin-wheel-layout {
    margin-bottom: 3rem;
}

/* The whole graphic: a square stage everything else (ring, disc, arrow,
   hub) is positioned inside as percentages of, so it all scales together
   responsively with no extra media queries needed. */
.spin-wheel-stage {
    position: relative;
    /* 100% (not a vw cap) so it can actually fill its column on desktop
       — the old 88vw cap was measuring against the whole viewport, which
       made no sense once the wheel sits in a half-width column next to
       the steps instead of centered full-width. */
    width: min(560px, 100%);
    aspect-ratio: 1 / 1;
    margin: 0 auto 2rem;
}

/* Pulsing gold glow around the ring/disc while they're actually spinning
   (see the wheel's own JS — .is-spinning is added right as the rotation
   starts, removed on transitionend) — builds a little anticipation
   instead of the wheel just silently turning. */
.spin-wheel-stage.is-spinning .spin-wheel-graphic {
    animation: spin-wheel-glow-pulse 900ms ease-in-out infinite;
}

@keyframes spin-wheel-glow-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 0 transparent);
    }
    50% {
        filter: drop-shadow(0 0 16px var(--flame-gold));
    }
}

@media (prefers-reduced-motion: reduce) {
    .spin-wheel-stage.is-spinning .spin-wheel-graphic {
        animation: none;
    }
}

/* A small flung rectangle — see launchConfetti() in the wheel's JS, which
   creates a batch of these (each with its own --dx/--dy/--rot) right as a
   real prize (not "Ghinion") is revealed. Positioned in viewport
   coordinates (not relative to the wheel) so the burst isn't clipped by
   the stage's own bounds. */
.spin-confetti-piece {
    position: fixed;
    width: 8px;
    height: 10px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 2000;
    animation: spin-confetti-burst 1100ms cubic-bezier(.2, .8, .3, 1) forwards;
}

@keyframes spin-confetti-burst {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(.4);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spin-confetti-piece {
        display: none;
    }
}

/* One SVG for both the static outer ring (spin-wheel-ring-slices — flat
   color per wedge, drawn as real annulus shapes, not a CSS gradient) and
   the rotating disc (spin-wheel-wedges) — sharing one viewBox keeps the
   two lined up automatically instead of needing separately-positioned
   layers kept in sync by hand. Only the inner <g> actually rotates. */
.spin-wheel-graphic {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.spin-wheel-wedges {
    transform-box: view-box;
    transform-origin: 50% 50%;
    transform: rotate(0deg);
    transition: transform 5s cubic-bezier(.15, .65, .1, 1);
}

.spin-wheel-wedge-path {
    stroke: var(--ink);
    stroke-opacity: .85;
    stroke-width: 1;
}

.spin-wheel-wedge-text {
    font-weight: 800;
    text-transform: uppercase;
    fill: var(--ink);
    font-size: 13px;
}

/* Whichever wedge currently sits under the arrow, at rest — see
   updateActiveSegment() in the wheel's JS. */
.spin-wheel-wedge-path.is-active {
    fill: var(--flame-gold) !important;
}

.spin-wheel-wedge-text.is-active {
    font-weight: 800;
}

/* Fixed at 3 o'clock regardless of how the disc underneath is rotated. */
.spin-wheel-arrow {
    position: absolute;
    top: 50%;
    right: -1%;
    width: 9%;
    height: 11%;
    transform: translateY(-50%);
    background-color: var(--flame-gold);
    /* Tip on the left (pointing in, at the disc), flat base on the
       right — not the other way round, or it reads as pointing away
       from the wheel instead of indicating a segment on it. */
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    z-index: 4;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
}

.spin-wheel-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20%;
    height: 20%;
    transform: translate(-50%, -50%);
    z-index: 5;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* A little glossy "sphere" highlight (light catching the upper-left)
       rather than a flat fill — still the same muted green family, just
       with some depth to it. */
    background: radial-gradient(circle at 32% 28%, var(--flame-lime) 0%, var(--brand-green) 42%, var(--brand-green-dark) 100%);
    color: var(--surface-100);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-size: clamp(.55rem, 2.6vw, .75rem);
    line-height: 1.1;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
    transition: transform 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.spin-wheel-hub:hover:not(:disabled):not(.is-blocked) {
    transform: translate(-50%, -50%) scale(1.04);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}

.spin-wheel-hub:disabled {
    background: var(--surface-200);
    color: var(--text-secondary);
    box-shadow: none;
    cursor: not-allowed;
}

/* Looks the same "locked" as :disabled, but a blocked hub (guest, no
   ticket bought today, already spun) still handles its own click — see
   the wheel's own JS — to explain why via a popup, rather than a plain
   HTML disabled button silently doing nothing. */
.spin-wheel-hub.is-blocked {
    background: var(--surface-200);
    color: var(--text-secondary);
    box-shadow: none;
    cursor: pointer;
}

/* "No ticket bought today" — the wheel graphic itself dims, but the hub
   keeps its own :disabled look on top of that (handled separately) so
   the two locked states (no ticket vs. already spun) never look
   identical. */
.spin-wheel-stage.is-locked .spin-wheel-graphic {
    opacity: .5;
}

.spin-steps-title {
    color: var(--brand-green);
    font-weight: 800;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    margin-bottom: 1.5rem;
}

.spin-step {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    text-align: left;
}

.spin-step-number {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background-color: var(--brand-green);
    color: var(--white);
    font-weight: 800;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spin-step-text {
    color: var(--text-secondary);
    font-size: .95rem;
    padding-top: .3rem;
}

/* =========================================================
   Breadcrumbs — shared yii\bootstrap5\Breadcrumbs widget, rendered
   in layouts/main.php on every page that sets $this->params['breadcrumbs'].
   Restyled here first on /concursuri as a trial; this same rule already
   applies everywhere the widget is used since it's one shared component.
   ========================================================= */

nav[aria-label="breadcrumb"] {
    margin-bottom: 1.5rem;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    background-color: transparent;
    font-size: 1.05rem;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: .5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "\203A";
    padding-right: .5rem;
    color: rgba(11, 13, 12, .4);
    font-weight: 700;
}

.breadcrumb-item a {
    color: var(--black);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease-in-out;
}

.breadcrumb-item a:hover {
    color: var(--brand-green-text);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--primary-color);
    font-weight: 700;
}

/* A page's main H1 (e.g. contests/index's "Competiții") — .primary-title
   alone (shared with homepage section headers) only sets size/case/color,
   so the bold weight + decorative accent bar live in this separate
   modifier rather than changing that shared class's look everywhere. */
.page-title-hero {
    font-weight: 700;
    letter-spacing: .03em;
}

/* "Vezi toate" section-header links on the homepage (Recent lansate,
   Se închide curând, ...) — previously plain unstyled anchor text, too
   small/quiet to notice. Plain text + arrow icon, no border/background —
   just bigger, bolder, brand-colored, with the arrow nudging right on
   hover. */
.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--brand-green-text);
    font-size: 1.05rem;
    text-decoration: none;
    transition: color .15s ease-in-out;
}

.view-all-link i {
    transition: transform .15s ease-in-out;
}

.view-all-link:hover {
    color: var(--dg-secondary);
    text-decoration: underline;
}

.view-all-link:hover i {
    transform: translateX(.25rem);
}

/* .view-all-link's default brand-green doesn't read well on this section's
   dark background — same gold accent as .fraud-trust-eyebrow next to it. */
.fraud-trust-section .view-all-link {
    color: var(--secondary-color);
}

.fraud-trust-section .view-all-link:hover {
    color: #fff;
}

/* =========================================================
   SEO text block — frontend\views\common\_seoText.php, rendered at the
   end of each public listing page (contests index/category, entries,
   results, winners, spin wheel), above the footer. Plain text, no card:
   just a top divider separating it from the page's own content above.
   ========================================================= */

.seo-text-block {
    border-top: 1px solid #e5e5e5;
    margin-top: 3rem;
    padding-block: 3rem;
}

.seo-text-inner {
    /* Spans the same width as the rest of the page (.container), rather
       than a narrower centered column, per explicit feedback. */
    width: 100%;
}

.seo-text-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 1rem;
}

.seo-text-inner > p {
    line-height: 1.7;
}

.seo-text-faq {
    margin-top: 2rem;
}

.seo-text-faq-question {
    font-weight: 700;
    color: var(--black);
    margin-top: 1.25rem;
}

.seo-text-faq-question:first-child {
    margin-top: 0;
}

.seo-text-faq dd {
    margin-inline-start: 0;
    line-height: 1.7;
}

@media (max-width: 576px) {
    .seo-text-block {
        padding-block: 2rem;
    }

    .seo-text-title {
        font-size: 1.25rem;
    }
}

/* =========================================================
   Language switch — plain "RO / EN" text in the header, no flag
   emoji (previous version looked too busy at nav size).
   ========================================================= */

.lang-switch {
    display: flex;
    align-items: center;
    padding: 0 .5rem;
}

.lang-link {
    color: rgba(255, 255, 255, .6);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    padding: .25rem .3rem;
    transition: color .15s ease-in-out;
}

.lang-link + .lang-link::before {
    content: "/";
    color: rgba(255, 255, 255, .3);
    padding-right: .3rem;
    font-weight: 400;
}

.lang-link:hover {
    color: var(--secondary-color);
}

.lang-link.active {
    color: #fff;
}

/* =========================================================
   "Extras" — frontend\views\results\_card.php, marking a contest card on
   the Rezultate Tragere grid as already drawn: the whole image goes light
   grayscale, with thin green text centered over it (no band/overlay box).
   ========================================================= */

.result-drawn-img {
    filter: grayscale(1);
}

.result-drawn-label {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.result-drawn-label span {
    background-color: rgba(20, 20, 20, .78);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .35em;
    text-transform: uppercase;
    padding: .5rem 1.25rem;
    border-radius: .5rem;
}

/* Activ/Închis status line on the entry-list contest-selector cards
   (frontend\views\tickets\_selectorCard.php) — plain text (no badge
   pill), but bold/uppercase/larger with a solid color dot so it actually
   reads at a glance instead of blending into the card's other small text. */
.contest-status-text {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.contest-status-dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

/* =========================================================
   Entries table — frontend\views\tickets\entries.php's public
   participant list (GridView). A plain default Bootstrap table looked
   like an unstyled data dump; this wraps it in a card-like surface
   consistent with the rest of the site (rounded corners, soft shadow),
   with a distinct header row and horizontal scroll on narrow screens
   instead of the table ever breaking the page layout.
   ========================================================= */

.entries-table-wrap {
    overflow-x: auto;
    background-color: var(--white);
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
}

.entries-table {
    margin-bottom: 0;
    /* Overrides Bootstrap's own hover custom property — a plain
       background-color rule here loses the specificity fight against
       .table-hover's built-in one. */
    --bs-table-hover-bg: rgba(29, 140, 57, .08);
}

.entries-table thead th {
    background-color: var(--primary-color);
    color: var(--white);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: none;
    white-space: nowrap;
    padding: 1rem .9rem;
}

.entries-table thead th a {
    color: inherit;
    text-decoration: none;
}

.entries-table thead th a:hover {
    color: var(--secondary-color);
}

.entries-table tbody td {
    padding: .85rem .9rem;
    vertical-align: middle;
    border-color: #eef0f2;
}

.entries-table tbody tr:last-child td {
    border-bottom: none;
}

/* Below 576px a horizontally-scrolling table is hard to use (status/ID
   end up off-screen, nothing to anchor which row you're even reading) —
   each row becomes its own labeled card instead (label from the column's
   own data-label, see entries.php's contentOptions). */
@media (max-width: 575.98px) {
    .entries-table-wrap {
        overflow-x: visible;
        background-color: transparent;
        box-shadow: none;
    }

    .entries-table thead {
        display: none;
    }

    .entries-table,
    .entries-table tbody,
    .entries-table tr,
    .entries-table td {
        display: block;
        width: 100%;
    }

    .entries-table tr {
        margin-bottom: var(--space-3);
        background-color: var(--white);
        border-radius: var(--radius-lg);
        box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
        overflow: hidden;
    }

    .entries-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: .65rem .9rem;
        border-color: #eef0f2;
    }

    .entries-table td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--text-secondary);
        flex-shrink: 0;
    }

    .entries-table tbody tr:last-child td {
        border-bottom: inherit;
    }

    .entries-table tbody tr td:last-child {
        border-bottom: none;
    }
}

/* =========================================================
   Contest detail page polish — frontend\views\contests\view.php.
   Every color/radius below reuses the site's existing tokens
   (--primary-color, --secondary-color, --black, --white, --bg-color-sec,
   --dg-secondary and Bootstrap's own --bs-* variables) — no new
   hardcoded colors. Darker "hover/pressed" shades are derived from
   --primary-color with color-mix() rather than a second hardcoded hex.
   ========================================================= */

.contest-view-title {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: clamp(1.875rem, 3.2vw, 2.85rem);
    color: var(--black);
}

/* Status badges */
.badge-status-urgent {
    background-color: var(--bs-danger);
    color: var(--white);
}

.contest-status-badge-active {
    background-color: var(--brand-green);
    color: var(--white);
}

.contest-status-badge-closed {
    background-color: var(--surface-200);
    color: var(--text-secondary);
    /* --surface-200 is the same color as this page's own background
       (--bg-color-sec) — without a border the "pill" has zero contrast
       against the page and disappears into plain floating text. */
    border: 1px solid var(--chrome-silver);
}

/* Price */
.contest-price-value {
    color: var(--primary-color);
}

/* Gallery */
.contest-gallery-main-wrap {
    position: relative;
    width: 100%;
    margin-inline: auto;
}

.contest-gallery-main-img {
    display: block;
    width: 100%;
    object-fit: contain;
    background-color: var(--white);
    cursor: pointer;
}

.contest-gallery-zoom {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background-color: rgba(11, 13, 12, .55);
    color: var(--white);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color .15s ease-in-out;
}

.contest-gallery-zoom:hover {
    background-color: color-mix(in srgb, var(--primary-color) 85%, black);
}

/* Zoom lightbox modal */
.contest-gallery-lightbox-content {
    background: transparent;
}

.contest-gallery-lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    margin-inline: auto;
    display: block;
    border-radius: 1rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .5);
}

.contest-gallery-lightbox-close {
    position: absolute;
    top: -2.5rem;
    right: 0;
}

.contest-gallery-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.4rem;
    transition: background-color .15s ease-in-out;
}

.contest-gallery-lightbox-nav:hover {
    background-color: rgba(255, 255, 255, .25);
}

.contest-gallery-lightbox-prev {
    left: -1.5rem;
}

.contest-gallery-lightbox-next {
    right: -1.5rem;
}

@media (max-width: 576px) {
    .contest-gallery-lightbox-prev {
        left: .5rem;
    }

    .contest-gallery-lightbox-next {
        right: .5rem;
    }
}

.contest-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background-color: rgba(11, 13, 12, .55);
    color: var(--white);
    font-size: 1.1rem;
    opacity: 0;
    transition: opacity .15s ease-in-out, background-color .15s ease-in-out;
}

.contest-gallery-main-wrap:hover .contest-gallery-nav {
    opacity: 1;
}

.contest-gallery-nav:hover {
    background-color: color-mix(in srgb, var(--primary-color) 85%, black);
}

.contest-gallery-prev {
    left: .75rem;
}

.contest-gallery-next {
    right: .75rem;
}

.contest-gallery-thumb.active {
    border-color: var(--primary-color);
}

/* Both columns stick as the page scrolls, on desktop only — whichever
   one is shorter simply rides along at the same fixed offset while the
   taller one keeps scrolling past it. */
@media (min-width: 768px) {
    .contest-info-col,
    .contest-gallery {
        position: sticky;
        align-self: flex-start;
    }

    .contest-info-col {
        top: 6rem;
    }

    .contest-gallery {
        top: 10rem;
    }
}

/* Countdown-to-draw panel, in the sidebar under the price (see
   contests/view.php) — a rounded panel on --bg-color-sec, with each
   digit tile (.contest-countdown-box) on white for contrast against it. */
.contest-countdown-panel {
    background-color: var(--bg-color-sec);
    border-radius: 1rem;
    padding-block: 1rem;
    margin-bottom: 1.25rem;
}

.contest-progress-card {
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
}

.contest-countdown-panel-static {
    padding-block: .85rem;
}

.contest-countdown-ends-on {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: .35rem;
}

.contest-countdown-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: .6rem;
}

.contest-countdown-panel-static .contest-countdown-label {
    margin-bottom: 0;
}

/* Big, full-width countdown: each tile stretches equally to fill the
   sidebar column instead of sitting min-width-sized on the left. */
.countdown-figures {
    width: 100%;
}

.contest-countdown-box {
    flex: 1 1 0;
    min-width: 0;
    padding-block: .9rem;
    text-align: center;
}

.contest-countdown-box .stat-tile-value {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* Progress card */
.contest-progress-percent {
    font-weight: 700;
    color: var(--brand-green-text);
}

.contest-progress-stat-value {
    font-weight: 700;
    color: var(--black);
}

.contest-progress-stat-label {
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* Countdown — named distinctly from the homepage banner's own
   .countdown-box (black digital-clock tile, defined earlier in this
   file) so this contest-detail-page tile doesn't collide with and
   override that one. */
.contest-countdown-box {
    background-color: var(--primary-color);
    border-radius: .75rem;
    padding: .6rem .75rem;
    min-width: 4.25rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .25);
}

.stat-tile-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
}

.contest-countdown-box .stat-tile-value {
    color: var(--white);
}

.stat-tile-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color, #6c757d);
}

.contest-countdown-box .stat-tile-label {
    color: var(--white);
}

@media (max-width: 400px) {
    .contest-countdown-box {
        padding: .5rem .4rem;
        min-width: 3.25rem;
    }

    .stat-tile-value {
        font-size: 1.15rem;
    }
}

/* Segmented pill tabs — shared by the Descriere/Detalii tabs and the
   entry-widget's Quiz/Cumpără bilete/Intrare poștală tabs. */
.pill-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    border-bottom: none;
}

.pill-tabs .nav-link {
    border: none;
    border-radius: 999px;
    padding: .45rem 1.1rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    background-color: var(--bg-color-sec);
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.pill-tabs .nav-link:hover {
    color: var(--brand-green-text);
    isolation: isolate;
}

.pill-tabs .nav-link.active {
    background-color: var(--primary-color);
    color: var(--white);
}

/* Quiz options — pill buttons; the radio input stays in the DOM
   (existing .quiz-option JS listener keeps working unchanged) but is
   visually hidden, with the label acting as the clickable pill. */
.quiz-section-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--black);
    margin-bottom: .6rem;
}

.quiz-question-text {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--black);
}

.quiz-options {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .5rem;
}

.quiz-option-pill-wrap {
    flex: 1 1 0;
    min-width: 0;
}

/* One answer per row on mobile — flex:1 1 0 with wrap let two short
   options (e.g. "E-Class") share a row, cramped and inconsistent with
   the longer ones sitting alone on theirs. */
@media (max-width: 767.98px) {
    .quiz-option-pill-wrap {
        flex: 1 1 100%;
    }
}

.quiz-option-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.quiz-option-pill {
    display: block;
    text-align: center;
    padding: .6rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    color: var(--black);
    cursor: pointer;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out;
}

.quiz-option-input:hover + .quiz-option-pill {
    border-color: var(--primary-color);
}

.quiz-option-input:focus-visible + .quiz-option-pill {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.quiz-option-input:checked + .quiz-option-pill {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
    font-weight: 600;
}

/* Entry widget card — the "Cumpără bilete"/"Intrare poștală" box in the
   sidebar, explicitly white so it stands out against the page's
   --bg-color-sec ground even though it sits right below other
   --bg-color-sec panels (countdown, progress). */
.entry-widget-card {
    background-color: var(--white);
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
}

/* "Câștigătorul este" card — replaces the entry widget once a contest is
   closed (frontend/views/contests/view.php). */
.contest-winner-card {
    background-color: var(--surface-200);
    border-radius: var(--radius-lg);
    /* Same issue as .contest-status-badge-closed above — --surface-200
       matches this page's own background exactly, so the card needs its
       own visible edge or it reads as un-boxed floating content. Same
       shadow as .contest-progress-card right above it, for the same
       reason that one has it. */
    border: 1px solid var(--chrome-silver);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
}

.contest-winner-card .card-body {
    padding: var(--space-4);
}

.contest-winner-photo {
    width: 100%;
    max-width: 30rem;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
    display: block;
    margin-inline: auto;
    background-color: var(--white);
}

.contest-winner-ticket {
    font-weight: 700;
    color: var(--brand-green);
}

/* "Vezi intrările mele" / "Caută în lista de intrări" under the winner
   card — a plain outline pair, not the site's solid green CTA, since
   neither one is the primary action on a closed contest's page. */
.contest-outline-btn {
    background-color: transparent;
    border: 1px solid var(--chrome-silver);
    color: var(--text-primary);
    padding: .6rem 1.25rem;
    border-radius: .6rem;
    font-weight: 600;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, transform .15s ease-in-out, box-shadow .15s ease-in-out;
}

.contest-outline-btn:hover {
    background-color: var(--surface-200);
    border-color: var(--brand-green);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

/* The "Vezi intrările mele" / "Caută în lista de intrări" pair on a closed
   contest's results page — when both are shown they split the row evenly
   (50/50); with only one (no account entries to show), it grows to fill it. */
.contest-action-buttons {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.contest-action-buttons .contest-outline-btn {
    flex: 1 1 0;
    min-width: 200px;
    text-align: center;
}

.contest-closed-message {
    color: var(--text-primary);
}

.contest-info-card {
    background-color: var(--white);
    border-radius: 1rem;
    padding: 1.25rem;
    margin-block: 2rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
}

/* Quiz section, now a fixed panel above the tabs (not a tab itself) —
   the same quiz-options/quiz-option-pill styling from before still
   applies inside it unchanged. */
.quiz-section {
    background-color: var(--bg-color-sec);
    border-radius: .75rem;
    padding: 1rem;
    transition: box-shadow .3s ease-in-out;
}

/* Terms & conditions excerpt — "Intrare poștală" tab (contests/view.php),
   same look as .quiz-section since it fills the same slot on that tab. */
.terms-excerpt {
    background-color: var(--bg-color-sec);
    border-radius: .75rem;
    padding: 1rem;
}

.quiz-section-attention {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 60%, transparent);
}

/* Two tabs, 50/50 width, on the entry widget. rounded-4 (a Bootstrap
   utility, !important by design) overrides pill-tabs' own pill-shaped
   border-radius on just these two buttons — everything else about their
   look (colours, active state, hover) still comes from .pill-tabs. */
.entry-tabs-split {
    display: flex;
    /* .pill-tabs sets flex-wrap: wrap for the OTHER (Descriere/Detalii)
       tab group, where wrapping to a second line is fine — here it isn't:
       with wrap allowed, the browser was dropping "Intrare poștală
       gratuită" (the longer label) onto its own row instead of shrinking
       both buttons to fit one row. Same specificity, later in the
       stylesheet, so this wins for just these two tabs. */
    flex-wrap: nowrap;
}

.entry-tabs-split .nav-item {
    flex: 1 1 50%;
    min-width: 0;
}

.entry-tabs-split .nav-link {
    width: 100%;
    /* The flex row's default align-items:stretch already makes both
       <li>s equal height, but a <button> doesn't fill its own parent's
       height on its own — without this, "Intrare poștală gratuită"
       wrapping to 2 lines made that <li> taller while the button's own
       visible pill (background, rounded corners) stayed short, so the
       two pills looked mismatched even though the row was secretly
       even. */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* .pill-tabs' own default is transparent — these two get a visible
       fill even when inactive, so they read as two buttons sitting next
       to each other rather than one plain label plus one filled pill.
       Higher-specificity ".pill-tabs .nav-link.active" still wins over
       this once a tab is selected. */
    background-color: var(--bg-color-sec);
}

/* Ticket-quantity slider (replaces the old +/- stepper) */
.ticket-slider-wrap {
    background-color: var(--bg-color-sec);
    border-radius: .75rem;
    padding: 1rem;
}

.ticket-slider-value {
    text-align: center;
    margin-bottom: .5rem;
}

.ticket-slider-value #ticket-quantity-display {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary-color);
}

.ticket-slider-value-label {
    font-size: 1.1rem;
    color: var(--bs-secondary-color, #6c757d);
}

.ticket-slider-price {
    text-align: center;
    margin-top: .5rem;
    font-weight: 600;
    color: var(--black);
    min-height: 1.2em;
}

.ticket-slider-savings {
    text-align: center;
    font-weight: 700;
    font-size: .9rem;
    color: var(--brand-green-text);
    min-height: 1.1em;
}

.ticket-slider-row {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.ticket-slider {
    flex: 1 1 auto;
    width: 100%;
    height: 8px;
    accent-color: var(--primary-color);
}

.ticket-slider-step {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background-color: var(--white);
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    cursor: pointer;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.ticket-slider-step:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

/* Cart page — frontend\views\tickets\cart.php, the dedicated "Coșul tău"
   page a contest's "Cumpără bilete" button sends the visitor to. A
   classic two-column layout: a wider product list on the left, a
   sticky order-summary card (subtotal, coupon, checkout) on the right —
   same surface/border/radius language as the account section's cards. */
.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-4);
    align-items: start;
}

.cart-items-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.cart-summary-col {
    position: sticky;
    top: 1rem;
}

.cart-product-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--surface-100);
    border: 1px solid var(--chrome-silver);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: box-shadow 150ms ease;
}

.cart-product-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}

.cart-product-img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    background: var(--surface-200);
}

.cart-product-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-product-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .2rem;
}

.cart-product-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.cart-product-title a:hover,
.cart-product-title a:focus-visible {
    color: var(--brand-green);
    text-decoration: underline;
}

.cart-product-unit-price {
    color: var(--text-secondary);
    font-size: .9rem;
    margin-bottom: var(--space-2);
}

.cart-product-quantity-form {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cart-product-quantity-input {
    width: 4.5rem;
}

.cart-product-side {
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .4rem;
}

.cart-product-total {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-primary);
}

.cart-product-savings {
    color: var(--brand-green);
    font-weight: 700;
    font-size: .8rem;
    white-space: nowrap;
}

.cart-product-remove {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #dc3545;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    background: rgba(220, 53, 69, .06);
    border: 1px solid rgba(220, 53, 69, .25);
    border-radius: 999px;
    padding: .35rem .75rem;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.cart-product-remove:hover,
.cart-product-remove:focus-visible {
    background: #dc3545;
    color: var(--white);
}

.cart-summary-card {
    background: var(--surface-100);
    border: 1px solid var(--chrome-silver);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.cart-summary-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: var(--space-3);
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: .95rem;
    color: var(--text-secondary);
    padding-block: .3rem;
}

.cart-summary-row span:last-child {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

.cart-summary-savings span:last-child {
    color: var(--brand-green);
}

.cart-summary-total {
    border-top: 1px solid var(--chrome-silver);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
}

.cart-summary-total span:first-child {
    font-weight: 700;
    color: var(--text-primary);
}

.cart-summary-total span:last-child {
    color: var(--brand-green);
    font-size: 1.4rem;
    font-weight: 800;
}

/* Quick coupon entry in the summary card — applies to the cart's first
   item (see cart.php's own docblock: coupons are scoped per contest line,
   and this is a convenience shortcut, not a per-line picker). */
.cart-summary-coupon-form {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--chrome-silver);
}

.cart-summary-coupon-label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: .4rem;
}

.cart-summary-coupon-row {
    display: flex;
    gap: .5rem;
}

.cart-summary-coupon-input {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-summary-coupon-btn {
    flex: 0 0 auto;
}

.cart-summary-checkout-btn {
    width: 100%;
    margin-top: var(--space-3);
}

.cart-summary-continue-link {
    display: block;
    text-align: center;
    margin-top: var(--space-2);
    color: var(--text-secondary);
    font-size: .9rem;
    text-decoration: none;
}

.cart-summary-continue-link:hover,
.cart-summary-continue-link:focus-visible {
    color: var(--brand-green);
    text-decoration: underline;
}

/* Per-line coupon picker (frontend/views/tickets/cart.php) — a native
   <details>/<summary> disclosure rather than JS: no click handler
   needed to expand/collapse, and it's keyboard/screen-reader operable
   for free. */
.cart-product-coupon {
    margin-top: var(--space-2);
}

.cart-coupon-applied {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: color-mix(in srgb, var(--brand-green) 10%, var(--surface-100));
    border: 1px solid color-mix(in srgb, var(--brand-green) 35%, transparent);
    border-radius: 999px;
    padding: .3rem .3rem .3rem .3rem;
    font-size: .85rem;
}

.cart-coupon-applied-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--brand-green);
    color: var(--white);
    font-size: .8rem;
    flex-shrink: 0;
}

.cart-coupon-applied-info {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-right: .2rem;
}

.cart-coupon-applied-code {
    font-weight: 700;
    color: var(--text-primary);
}

.cart-coupon-applied-discount {
    color: var(--brand-green);
    font-weight: 700;
}

.cart-coupon-remove-form {
    display: inline-flex;
}

.cart-coupon-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--chrome-silver);
    color: var(--text-secondary);
    font-size: .7rem;
    padding: 0;
    transition: background-color .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out;
}

.cart-coupon-remove-btn:hover,
.cart-coupon-remove-btn:focus-visible {
    background: #dc3545;
    border-color: #dc3545;
    color: var(--white);
}

.cart-coupon-empty {
    color: var(--text-secondary);
    font-size: .85rem;
}

.cart-coupon-empty a {
    color: var(--brand-green);
}

.cart-coupon-error {
    color: #dc3545;
    font-size: .8rem;
    margin: .3rem 0 0;
}

.cart-coupon-picker {
    font-size: .85rem;
}

.cart-coupon-picker-summary {
    cursor: pointer;
    color: var(--brand-green);
    font-weight: 600;
    list-style: none;
}

.cart-coupon-picker-summary::-webkit-details-marker {
    display: none;
}

.cart-coupon-picker-summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: .35rem;
    transition: transform 150ms ease;
}

.cart-coupon-picker[open] .cart-coupon-picker-summary::before {
    transform: rotate(90deg);
}

/* The "scroll" the picker needs once someone has more than a handful
   of coupons — capped height, independent scroll, never grows the card
   itself unbounded. */
.cart-coupon-picker-list {
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .5rem;
    padding-right: .25rem;
}

.cart-coupon-picker-form {
    margin: 0;
}

.cart-coupon-picker-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    background: var(--surface-200);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: .4rem .6rem;
    text-align: left;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.cart-coupon-picker-btn:hover,
.cart-coupon-picker-btn:focus-visible {
    border-color: var(--brand-green);
    background: color-mix(in srgb, var(--brand-green) 10%, var(--surface-200));
}

.cart-coupon-picker-code {
    font-weight: 700;
    color: var(--text-primary);
}

.cart-coupon-picker-value {
    color: var(--brand-green);
    font-weight: 700;
    white-space: nowrap;
}

/* Checkout page — frontend\views\tickets\checkout.php. Same sidebar
   language as the cart page above: a sticky order-review card next to the
   wider billing/payment form, in place of the previously unstyled
   Bootstrap-default stack. */
.cart-page-layout {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.cart-review-summary {
    order: 2;
    flex: 0 0 340px;
    position: sticky;
    top: 1rem;
    background: var(--surface-100);
    border: 1px solid var(--chrome-silver);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.cart-page-layout .entry-widget-card {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
}

.cart-review-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: var(--space-3);
}

.cart-review-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 1rem;
    color: var(--text-secondary);
    padding-block: .35rem;
}

/* Checkout's secondary copy (guest/profile note, refund notice, terms
   checkbox label, captcha label) — was Bootstrap's .small (.875em),
   harder to read than the rest of the page; same size as the cart
   page's own body copy. */
.checkout-note {
    font-size: 1rem;
}

.cart-review-row span:last-child {
    color: var(--text-primary);
    font-weight: 600;
}

.cart-review-total {
    border-top: 1px solid var(--chrome-silver);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
}

.cart-review-total span:first-child {
    font-weight: 700;
    color: var(--text-primary);
}

.cart-review-total span:last-child {
    color: var(--brand-green);
    font-size: 1.3rem;
    font-weight: 800;
}

.cart-review-edit-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--text-secondary);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

.cart-review-edit-link:hover,
.cart-review-edit-link:focus-visible {
    color: var(--brand-green);
}

/* Wallet-balance toggle — a card row (icon + label + balance) with a real
   switch instead of a bare checkbox + wall of text, so "will this order
   use my wallet" reads as one glance, not a sentence to parse. */
.checkout-wallet-toggle {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    background: var(--surface-200);
    border: 1px solid var(--chrome-silver);
    border-radius: var(--radius-md);
    min-height: 0;
}

.checkout-wallet-toggle .form-check-input {
    flex-shrink: 0;
    width: 2.75rem;
    height: 1.5rem;
    margin: 0;
    cursor: pointer;
}

.checkout-wallet-toggle .form-check-input:checked {
    background-color: var(--dg-primary);
    border-color: var(--dg-primary);
}

.checkout-wallet-toggle .form-check-input:focus {
    border-color: var(--dg-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--dg-primary) 25%, transparent);
}

.checkout-wallet-toggle .form-check-label {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1 1 auto;
    cursor: pointer;
}

.checkout-wallet-toggle-icon {
    font-size: 1.3rem;
    color: var(--dg-primary);
}

.checkout-wallet-toggle-text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    font-size: 1rem;
    color: var(--text-secondary);
}

.checkout-wallet-toggle-balance {
    color: var(--brand-green);
    font-size: 1.1rem;
}

/* Brand-green focus ring on the billing fields, instead of Bootstrap's
   default blue — same treatment as .login-split-card's inputs. */
.checkout-field-label {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.checkout-field {
    font-size: 16px;
}

.cart-review-savings span:last-child {
    color: var(--brand-green);
}

.checkout-field:focus {
    border-color: var(--dg-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--dg-primary) 25%, transparent);
}

.checkout-field[readonly] {
    background-color: var(--surface-200);
    color: var(--text-secondary);
}

#ticket-payment-section {
    border-top: 1px solid var(--chrome-silver);
    padding-top: var(--space-3);
}

#ticket-pay-button {
    width: 100%;
}

#checkout-captcha {
    background: var(--surface-200);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

@media (max-width: 991.98px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary-col {
        position: static;
    }

    .cart-page-layout {
        flex-direction: column;
    }

    .cart-review-summary {
        flex-basis: auto;
        width: 100%;
        position: static;
        order: 1;
    }

    .cart-page-layout .entry-widget-card {
        order: 2;
    }
}

@media (max-width: 575.98px) {
    .cart-product-card {
        flex-wrap: wrap;
    }

    /* A clear split row (price left, remove right) under a divider,
       instead of both squeezed small/right-aligned under the title. */
    .cart-product-side {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        width: 100%;
        margin-top: .5rem;
        padding-top: .75rem;
        border-top: 1px solid var(--chrome-silver);
    }

    .cart-product-total {
        font-size: 1.35rem;
    }

    .cart-product-quantity-input {
        width: 5rem;
        font-size: 15px;
        padding-block: .5rem;
    }
}

/* Main CTA */
.contest-cta-btn {
    background-color: var(--primary-color);
    color: var(--white);
    font-weight: 700;
    border: none;
    border-radius: 999px;
    padding-block: .9rem;
    font-size: 1.05rem;
    transition: background-color .15s ease-in-out, opacity .15s ease-in-out;
}

.contest-cta-btn:disabled {
    background-color: var(--bs-secondary-color, #6c757d);
    color: var(--white);
    opacity: .55;
    cursor: not-allowed;
}

.contest-cta-btn:hover:not(:disabled) {
    background-color: var(--dg-primary-dark);
    color: var(--white);
}

/* The popup itself, not just its buttons — same rounded-card radius as
   .entry-widget-card elsewhere on the site, instead of Bootstrap's much
   smaller default modal radius. */
#spin-login-modal .modal-content,
#spin-result-modal .modal-content {
    border-radius: 1rem;
}

/* .contest-cta-btn is styled fully pill-shaped (999px) everywhere else
   it's used — reset back to Bootstrap's own default button radius just
   inside these two modals. */
#spin-login-modal .contest-cta-btn,
#spin-result-modal .contest-cta-btn {
    border-radius: var(--bs-border-radius, .375rem);
}

/* The one place gold (--secondary-color) accents this page: section
   subtitles inside the info tabs' content — a visual separator, not
   mixed in anywhere else on the page. */
.contest-tab-subtitle {
    /* --secondary-color (#FFD400) at full strength is close to
       unreadable as plain text on a white card (very low contrast) —
       darkened here via color-mix() rather than a second hardcoded
       hex, so it still reads as "gold" but stays legible body text. */
    color: color-mix(in srgb, var(--secondary-color) 65%, black);
}

/* "Top 10 Susținători" leaderboard — roomier than Bootstrap's
   table-sm, with a gold/silver/bronze rank pill for the top 3 so the
   placements people actually fight for stand out at a glance. */
.table-leaderboard th,
.table-leaderboard td {
    font-size: var(--font-size-note);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.leaderboard-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-pill);
    background: var(--surface-200);
    font-weight: 700;
}

.leaderboard-rank-1 {
    background: color-mix(in srgb, var(--secondary-color) 55%, white 45%);
}

.leaderboard-rank-2 {
    background: var(--chrome-silver);
}

.leaderboard-rank-3 {
    background: color-mix(in srgb, #CD7F32 50%, white 50%);
}

/* Mini-giveaway threshold markers on the "Bilete vândute" progress bar —
   one tick per configured ContestMilestone (see Contest::$milestones),
   at its threshold_percent position. */
.contest-progress-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: rgba(255, 255, 255, .85);
    transform: translateX(-50%);
    z-index: 1;
}

.contest-progress-tick.reached {
    background-color: var(--black);
}

.contest-progress-milestone-labels {
    position: relative;
    height: 1rem;
}

.contest-progress-milestone-label {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: .65rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
}

.contest-progress-milestone-label.reached {
    color: var(--brand-green-text);
    font-weight: 700;
}

/* "Câștiguri" tab — mini-giveaway thresholds configured for this
   contest, with whether each has already fired (ContestMilestoneTrigger). */
.milestone-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.milestone-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .9rem;
    background-color: var(--bg-color-sec);
    border-radius: .6rem;
}

.milestone-row.reached {
    background-color: color-mix(in srgb, var(--primary-color) 12%, var(--bg-color-sec));
}

.milestone-row-threshold {
    flex-shrink: 0;
    width: auto;
    display: inline-flex;
    padding: .25rem .8rem;
    border-radius: 999px;
    /* Always the brand-green pill, won or not. */
    background: var(--primary-color);
    color: var(--white);
    font-weight: 700;
}

.milestone-row-desc {
    flex: 1;
    color: var(--black);
}

.milestone-row-status {
    flex-shrink: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
}

.milestone-row.reached .milestone-row-status {
    color: var(--brand-green-text);
}

/* Stacked card instead of a cramped single row — threshold/desc/status
   squeezed on one line wrapped badly once "✓ Câștigător: Name" had to
   share space with everything else. */
@media (max-width: 575.98px) {
    .milestone-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .4rem;
        padding: .85rem 1rem;
    }

    .milestone-row-threshold {
        font-size: .95rem;
    }

    .milestone-row-desc {
        font-size: 1rem;
    }

    .milestone-row-status {
        font-size: .9rem;
    }
}

@media (max-width: 767.98px) {
    .contest-info-col {
        margin-top: 1rem;
    }
}

/* =========================================================
   Account sidebar ("Contul meu" — frontend/views/account/*)
   ========================================================= */

.account-sidebar {
    background: var(--surface-100);
    border: 1px solid var(--chrome-silver);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    position: sticky;
    top: 9rem;
}

.account-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
}

.account-sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* "Victorii" tab's own notification count (_nav.php) — same number as
   the header icon's badge, pinned to the far right of its row so it
   reads as "new since you last checked", not just a decoration. */
.account-sidebar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    margin-left: auto;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--primary-color);
    color: var(--white);
    font-size: .75rem;
    font-weight: 800;
    animation: account-sidebar-badge-pulse 1.6s ease-in-out infinite;
}

@keyframes account-sidebar-badge-pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-sidebar-badge {
        animation: none;
    }
}

/* Big "Ai câștigat X premii!" banner at the top of the Victorii page
   (account/wins.php) — shown whenever the account has ANY win on record,
   not just unseen ones; same brand-green gradient language as the order
   confirmation page's own win banners. */
.account-wins-hero {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dg-primary-dark) 100%);
    color: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.account-wins-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    font-size: 1.75rem;
    flex-shrink: 0;
}

.account-wins-hero-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: .2rem;
}

.account-wins-hero-sub {
    color: rgba(255, 255, 255, .85);
    margin: 0;
}

.account-sidebar-icon {
    font-size: 1.1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: color 150ms ease;
}

.account-sidebar-link:hover,
.account-sidebar-link:focus-visible {
    background: var(--surface-200);
    color: var(--text-primary);
}

/* The active section gets real contrast against the rest — a solid
   brand-green fill with its own accent border and a lifted shadow, not
   just a bolder label — so it's unmistakable, at a glance, which of the
   5 sections is currently open. */
.account-sidebar-link.active {
    background: var(--brand-green);
    border-left-color: var(--brand-green-dark);
    color: var(--white);
    font-weight: 700;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--brand-green) 40%, transparent);
}

.account-sidebar-link.active .account-sidebar-icon {
    color: var(--white);
}

@media (max-width: 991.98px) {
    .account-sidebar {
        position: static;
        padding: var(--space-2);
    }

    /* A 2-column grid instead of a single horizontal-scroll row — every
       tab visible at once, no scrolling (and no native-scrollbar
       visibility problem to work around). */
    .account-sidebar-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }

    .account-sidebar-link {
        /* Grid's default stretch makes each <li> match its row's tallest
           cell, but the <a> inside doesn't fill that height on its own —
           same issue as .entry-tabs-split's tabs: labels that wrap to 2
           lines got a taller invisible <li> while the visible pill
           stayed short, so the row looked uneven even though the cells
           were secretly the same height. */
        height: 100%;
        justify-content: center;
        text-align: center;
        /* No fill at all for the inactive state on desktop's plain list
           reads fine, but in this 2-column grid each tab needs its own
           visible boundary to read as a separate button, not blend into
           the sidebar card's own background. */
        background-color: #e4e7eb;
    }

    /* .account-sidebar-badge's margin-left:auto (desktop: pins it to the
       far right of a left-aligned row) fights this grid's centered pills
       — pushes the badge to the button's edge while the icon/label stay
       centered, looking split apart. Back to a normal inline gap. */
    .account-sidebar-badge {
        margin-left: 0;
    }
}

/* A short, plain-language line under "Contul meu" on every account tab
   — explains in one sentence what that specific section is, for a
   visitor who's never used an account dashboard before. */
.account-intro {
    color: var(--text-secondary);
    font-size: 1.05rem;
    max-width: 640px;
    margin-bottom: var(--space-4);
}

/* Bootstrap's .small (.875em) shows up ~29 times across the account
   views (badges, meta lines, hints) and reads too small next to the
   bumped sizes above it — one blanket bump instead of hunting down
   every view file individually. */
.account-layout .small {
    font-size: 1rem;
}

/* Shared size for explanatory/secondary note text sitewide — see
   --font-size-note above. Applied via this class instead of the
   .small that made it read too small; .text-body-secondary still
   supplies the muted color. */
.text-note {
    font-size: var(--font-size-note);
}

/* A full empty state (icon + plain-language explanation + one big,
   obvious button) instead of a single small line of text — someone
   unfamiliar with the site should never have to guess what an empty
   section means or what to click next. */
.account-empty-state {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    background: var(--surface-100);
    border: 1px solid var(--chrome-silver);
    border-radius: var(--radius-lg);
}

.account-empty-state-icon {
    font-size: 2.5rem;
    color: var(--brand-green);
    margin-bottom: var(--space-3);
}

.account-empty-state-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.account-empty-state-text {
    color: var(--text-secondary);
    font-size: 1.05rem;
    max-width: 420px;
    margin: 0 auto var(--space-4);
}

/* Shared row-card used by "Biletele mele" / "Victorii" / "Comenzi de
   bilete" — a thumbnail (or icon, when there's no photo), a title +
   small meta line, and one prominent value on the right (price, ticket
   number, or discount, depending on the page). Replaces the earlier
   generic 2-column grid of plain Bootstrap cards with something that
   actually reads as a purpose-built list, not a leftover placeholder. */
.account-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.account-list-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--surface-100);
    border: 1px solid var(--chrome-silver);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    transition: box-shadow 150ms ease, transform 150ms ease;
}

.account-list-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.account-list-card-thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    background-color: var(--surface-200);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.account-list-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.account-list-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 .3rem;
    color: var(--text-primary);
}

.account-list-card-meta {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-3);
    row-gap: .2rem;
    color: var(--text-secondary);
    font-size: .95rem;
    margin-bottom: 0;
}

.account-list-card-meta i {
    margin-right: .3rem;
    color: var(--brand-green);
}

/* The only thing that had to move: badge and value now sit together on
   one line (this was the actual complaint — the badge used to sit next
   to the title, visibly higher than the price). Vertically centered
   against the whole card, same as before. */
.account-list-card-end {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.account-list-card-value {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--brand-green);
    white-space: nowrap;
    text-align: right;
}

.account-list-card-value small {
    display: block;
    font-weight: 500;
    font-size: .85rem;
    color: var(--text-secondary);
}

@media (max-width: 575.98px) {
    /* The old fix indented the wrapped badge+price row by exactly the
       thumbnail's width to line it up under the title — fragile (breaks
       the moment either width changes) and, with a status badge plus a
       discount value both fighting for the remaining space, it was
       wrapping AGAIN internally and looking like a pile-up. A clean full
       -width row below, badge and price pushed to opposite ends, instead. */
    .account-list-card {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .account-list-card-end {
        width: 100%;
        margin-left: 0;
        margin-top: var(--space-2);
        justify-content: space-between;
    }
}

/* The "Revendică cupon" tab's claim box — a plain card, just with a
   brand-green accent border so the one actionable input on the page
   stands out from the passive list of already-claimed coupons below it. */
.coupon-claim-card {
    border: 1px solid color-mix(in srgb, var(--brand-green) 45%, transparent);
    background: color-mix(in srgb, var(--brand-green) 10%, var(--surface-100));
}

/* The code input itself was barely visible against the tinted card above
   (both near-white) — a solid white fill plus a darker, thicker border
   (instead of Bootstrap's default light-grey hairline) makes it read as
   a distinct, obviously-clickable field rather than blending into the
   card behind it. */
.coupon-claim-card input[name="code"] {
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--text-primary);
    background-color: var(--white);
    border: 2px solid var(--brand-green-dark);
}

.coupon-claim-card input[name="code"]::placeholder {
    color: var(--text-secondary);
    font-weight: 400;
}

.coupon-claim-card input[name="code"]:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-green) 30%, transparent);
}

/* "Panou" dashboard — one progress card per contest the account holds
   tickets for. */
.account-progress-card {
    background: var(--surface-100);
    border: 1px solid var(--chrome-silver);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    transition: box-shadow 150ms ease, transform 150ms ease;
}

.account-progress-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.account-progress-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.account-progress-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0;
}

.account-progress-card-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.account-progress-card-title a:hover,
.account-progress-card-title a:focus-visible {
    text-decoration: underline;
}

.account-progress-card-percent {
    font-weight: 800;
    font-size: 1rem;
    color: var(--brand-green);
    white-space: nowrap;
}

.account-progress-track {
    height: 10px;
    border-radius: 999px;
    background: var(--surface-200);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.account-progress-fill {
    height: 100%;
    background: var(--brand-green);
    border-radius: 999px;
}

.account-progress-card-footer {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

/* "Joc în siguranță" settings panels — same surface/border/radius
   language as the rest of the account section, with an icon in each
   heading so the purpose of each tool reads at a glance. */
.account-panel {
    background: var(--surface-100);
    border: 1px solid var(--chrome-silver);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.account-panel-danger {
    border-color: color-mix(in srgb, #dc3545 45%, var(--chrome-silver));
}

.account-panel-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: var(--space-3);
    color: var(--text-primary);
}

.account-panel-title i {
    color: var(--brand-green);
    font-size: 1.3rem;
}

.account-panel-danger .account-panel-title,
.account-panel-danger .account-panel-title i {
    color: #dc3545;
}

/* =========================================================
   Wallet ("Portofelul meu" — frontend/views/wallets/index.php)
   ========================================================= */

/* Same gold gradient + black text already established for a prominent
   money figure (see the hero price badge on the homepage) — the balance
   is the single most important number on this page. */
.wallet-hero {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: linear-gradient(155deg, #fff6c4 0%, var(--secondary-color) 55%, #e0b400 100%);
    color: var(--black);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-4);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    flex-wrap: wrap;
}

.wallet-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--black);
    flex-shrink: 0;
}

.wallet-hero-label {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    margin: 0 0 .25rem;
    opacity: .75;
}

.wallet-hero-amount {
    font-size: 2.75rem;
    font-weight: 800;
    margin: 0;
    line-height: 1;
}

.wallet-topup-panel {
    background: var(--surface-100);
    border: 1px solid var(--chrome-silver);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.wallet-topup-panel-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: var(--space-3);
}

.wallet-topup-panel-title i {
    color: var(--brand-green);
    font-size: 1.3rem;
}

/* One-click preset amounts — the fastest, least error-prone way to top
   up for someone who'd rather not type and pick a currency amount from
   scratch. Typing a custom amount in the field below still works fine. */
.wallet-amount-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.wallet-amount-chip {
    border: 1px solid var(--chrome-silver);
    background: var(--surface-200);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1rem;
    padding: .5rem 1.15rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.wallet-amount-chip:hover,
.wallet-amount-chip:focus-visible {
    border-color: var(--brand-green);
}

.wallet-amount-chip.active {
    background: var(--brand-green);
    border-color: var(--brand-green);
    color: var(--white);
}

.wallet-history-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: var(--space-3);
}

.wallet-history-title i {
    color: var(--brand-green);
}

/* "Total cheltuit" / "Total reîncărcat" stat pair, right under the
   balance hero — same surface/border language as the account panels. */
.wallet-stat-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--surface-100);
    border: 1px solid var(--chrome-silver);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    height: 100%;
}

.wallet-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--brand-green);
    flex-shrink: 0;
}

.wallet-stat-label {
    font-size: .8rem;
    color: var(--text-secondary);
    margin: 0 0 .1rem;
}

.wallet-stat-value {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0;
}

/* ==========================================================================
   Instant-win prizes — elements OUTSIDE the redesigned "Premii instant" tab
   itself (see frontend/web/css/instant-prizes.css for the tab's own .dg-ip-*
   styles): the "+N premii instant" title badge
   (frontend\views\contests\view.php) and the checkout-confirmation win
   banner (frontend\views\tickets\confirmation.php). Colors are
   design-system tokens only.
   ========================================================================== */

.instant-prize-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--flame-gold);
    color: var(--ink);
    font-weight: 700;
    font-size: .85rem;
    padding: .3rem .75rem;
    border-radius: 999px;
}

/* Same pill shape as .instant-prize-badge next to it, brand green instead
   of gold so the two read as two distinct kinds of info at a glance. */
.cash-alternative-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: color-mix(in srgb, var(--primary-color) 12%, var(--surface-100));
    border: 1px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
    color: var(--brand-green-text);
    font-weight: 700;
    font-size: .85rem;
    padding: .3rem .75rem;
    border-radius: 999px;
}

/* Order confirmation page's thank-you banner (frontend/views/tickets/
   confirmation.php) — shown once, above the per-order detail cards,
   only when at least one order actually paid. */
.order-thankyou-banner {
    text-align: center;
    background: var(--surface-100);
    border: 1px solid var(--chrome-silver);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-4);
    margin-bottom: var(--space-4);
}

.order-thankyou-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-green) 15%, transparent);
    color: var(--brand-green);
    font-size: 2.25rem;
    margin-bottom: var(--space-3);
}

.order-thankyou-title {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: .4rem;
}

.order-thankyou-sub {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin: 0;
}

/* The outline button is plain Bootstrap (.375rem .75rem padding, .375rem
   radius) next to .contest-cta-btn's pill shape (.9rem padding-block,
   999px radius) — different height/shape made them look mismatched and
   the shorter one's text off-center against the taller pill. */
.order-thankyou-banner .btn {
    padding-block: .9rem;
    padding-inline: 1.75rem;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 700;
}

.instant-prize-win-banner {
    background: linear-gradient(135deg, var(--flame-gold) 0%, color-mix(in srgb, var(--flame-gold) 70%, #000) 100%);
    color: var(--ink);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    font-weight: 700;
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.instant-prize-win-banner i {
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* Mini-giveaway (threshold %) win — same layout as the instant-prize
   banner above, brand green instead of gold so the two read as distinct
   kinds of win at a glance. */
.milestone-win-banner {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dg-primary-dark) 100%);
    color: var(--white);
}

/* Confirmation page's friendly "no win this time" note — deliberately
   calm (not a red/warning alert), since not winning an instant/milestone
   prize is the normal outcome, not a problem. */
.order-no-win-note {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--surface-100);
    border: 1px solid var(--chrome-silver);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    color: var(--text-secondary);
    font-size: 1.05rem;
}

.order-no-win-note i {
    font-size: 1.5rem;
    color: var(--brand-green);
    flex-shrink: 0;
}

.order-milestone-check-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    background: var(--surface-100);
    border: 1px solid var(--chrome-silver);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-4);
    margin-bottom: var(--space-4);
    text-align: center;
}

.order-milestone-check-loading p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin: 0;
}

/* Mobile sticky buy bar (contest page) — toggled by contests/view.php's
   script: visible while the buy box is off-screen and the footer isn't. */
.sticky-buy-bar {
    display: none;
}

@media (max-width: 767.98px) {
    .sticky-buy-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        background: var(--bs-body-bg);
        border-top: 1px solid var(--bs-border-color);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
    }

    .sticky-buy-bar[hidden] {
        display: none;
    }

    .sticky-buy-total {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .sticky-buy-total-label {
        font-size: 0.75rem;
        color: var(--bs-secondary-color);
    }

    .sticky-buy-bar .contest-cta-btn {
        flex: 1 1 auto;
        max-width: 60%;
    }
}

/* Instant-prize chip a ticket search just jumped to. */
.dg-ip-chip--found {
    outline: 2px solid var(--flame-gold, #f5b301);
    outline-offset: 2px;
}

/* Skip link (layouts/main.php, home.php): hidden until keyboard-focused. */
.skip-link:focus {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    padding: .5rem 1rem;
    border-radius: .4rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 0 0 2px var(--dg-primary);
}

#main:focus {
    outline: none;
}

/* Back-to-top button (layouts/_footer.php, on every frontend page) —
   toggled by dg.js's initScrollTop() past a scroll threshold. Fades via
   opacity/transform only; pointer-events (not display/visibility) is
   what actually disables it while hidden, so there's no interaction
   with the overlay's fixed positioning below. */
.dg-scroll-top {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--dg-primary, #15803D);
    color: #FFFFFF;
    font-size: 1.2rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
    cursor: pointer;
}

.dg-scroll-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.dg-scroll-top:hover,
.dg-scroll-top:focus-visible {
    background: var(--dg-primary-dark, #116631);
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    /* Clears the mobile sticky buy bar (.sticky-buy-bar, contest pages)
       so the two never overlap, whether or not that bar is actually
       showing on the current page. */
    .dg-scroll-top {
        bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

/* Static rules that used to be inline style="" attributes. */
.contest-progress {
    height: 10px;
}

.contest-progress.contest-progress-sm {
    height: 9px;
}

.wallet-topup-row {
    max-width: 420px;
}

.account-list-card-value.is-credit {
    color: var(--brand-green);
}

.account-list-card-value.is-debit {
    color: #dc3545;
}

.about-lead {
    max-width: 640px;
}

.otp-input {
    letter-spacing: .5em;
    font-weight: 700;
}