/* Self-hosted Rajdhani (latin + latin-ext, which covers Romanian diacritics); from Google Fonts, SIL Open Font License. */
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/rajdhani-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/rajdhani-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/rajdhani-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/rajdhani-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   "Tezaurul Dragonului" — the "Premii instant" tab's own visual identity.
   Loaded only where the tab itself renders (frontend\assets\InstantPrizesAsset,
   registered from frontend\views\contests\_instantPrizes.php) — nowhere
   else on the site uses .dg-ip-* or the Rajdhani display face.

   Concept: instant prizes are treasure a dragon guards. An available
   ticket "burns" (alive, glowing); a won one is "claimed" (dimmed,
   stamped). Everything sits on the site's own dark-accent palette —
   design-system tokens only, no new hardcoded colors.
   ========================================================================== */

/* --------------------------------------------------------------------
   0. Shared primitives
   -------------------------------------------------------------------- */

/* Dragon-scale texture — used only on the treasury panel, chip
   backgrounds, and category headers (never as a page-wide pattern). Two
   offset radial-gradient layers at very low opacity so it's felt, not
   seen. */
.dg-ip-scales {
    background-image:
        radial-gradient(circle at 50% 100%, transparent 56%, color-mix(in srgb, var(--brand-green) 6%, transparent) 58% 61%, transparent 63%),
        radial-gradient(circle at 50% 100%, transparent 56%, color-mix(in srgb, var(--brand-green) 6%, transparent) 58% 61%, transparent 63%);
    background-size: 28px 20px;
    background-position: 0 0, 14px 10px;
}

/* The "hero" numeral style — the prize value on a showcase card and in a
   category header, e.g. "1.000 LEI". Renders on either a dark chip
   (.dg-ip-chip, --dg-ip-fg: white) or a light category header
   (.dg-ip-category, --dg-ip-fg: var(--text-on-light)) — a flat gold/lime
   gradient-clip text can't read at 4.5:1 on both (it measured ~1.4-2.5:1
   on the light one), so this reads the same --dg-ip-fg custom property
   every other label in this file already uses to adapt to its container
   (PROMPTUL 18). */
.dg-ip-hero {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.1rem;
    line-height: 1.05;
    letter-spacing: .01em;
    color: var(--dg-ip-fg);
}

.dg-ip-eyebrow {
    /* Always used inside a .dg-ip-chip or .dg-ip-category, both of which
       define --dg-ip-fg-muted locally (see their own rules). */
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dg-ip-fg-muted);
}

/* --------------------------------------------------------------------
   1. Treasury panel (bara de sumar)
   -------------------------------------------------------------------- */

.dg-ip-panel {
    /* Back to the light surface (per direct feedback) — only the ticket
       chips/showcase cards and category headers keep the dark "vault"
       treatment now, not the summary panel. */
    background: var(--surface-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.dg-ip-panel-stats {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.dg-ip-stat-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.dg-ip-stat--available .dg-ip-stat-value {
    /* --flame-lime only reads at 2.5:1 on this panel's light surface —
       nowhere near the 3:1 a 2.5rem numeral needs, let alone 4.5:1
       (PROMPTUL 18). --brand-green-text clears both. */
    color: var(--brand-green-text);
}

.dg-ip-stat--claimed .dg-ip-stat-value {
    color: var(--text-secondary);
}

.dg-ip-stat-label {
    display: block;
    margin-top: .15rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    /* --text-secondary (Bootstrap's own --bs-secondary-color, ~#6c757d)
       only reads ~4.2-4.4:1 against this panel's light surface — under
       4.5:1 for this label's 12px text (PROMPTUL 18). */
    color: var(--text-on-light-muted);
}

.dg-ip-panel-bar {
    height: 6px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text-secondary) 18%, transparent);
    margin-top: var(--space-3);
    overflow: hidden;
}

.dg-ip-panel-bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--brand-green), var(--flame-lime));
}

.dg-ip-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.dg-ip-filters {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.dg-ip-filter-btn {
    border: 1.5px solid var(--brand-green);
    background: var(--surface-100);
    color: var(--brand-green);
    border-radius: var(--radius-pill);
    padding: .3rem .9rem;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.dg-ip-filter-btn.is-active,
.dg-ip-filter-btn:hover {
    background: var(--brand-green);
    border-color: var(--brand-green);
    color: var(--white);
}

.dg-ip-search {
    position: relative;
    min-width: 300px;
}

.dg-ip-search-input {
    width: 100%;
    border: 1.5px solid var(--chrome-silver);
    border-radius: var(--radius-pill);
    background: var(--surface-100);
    color: var(--text-primary);
    padding: .55rem 1.1rem .55rem 2.5rem;
    font-size: 1rem;
}

.dg-ip-search-icon {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 1rem;
    pointer-events: none;
}

.dg-ip-filter-btn:focus-visible,
.dg-ip-search-input:focus-visible,
.dg-ip-category-header:focus-visible,
.dg-ip-page-btn:focus-visible {
    /* --flame-lime only reads ~2.5-2.7:1 against these controls' white/
       light backgrounds — below the 3:1 a focus indicator needs
       (PROMPTUL 18). --brand-green already outlines these same controls'
       resting border (.dg-ip-filter-btn above), so this stays the
       expected color, just compliant. */
    outline: 2px solid var(--brand-green);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------
   2. The ticket chip — shared visual language for both display modes.
   Shape: rounded rect with one semicircular notch bitten out of each side
   at mid-height (CSS mask, three layers: two notch cut-outs intersected
   against a full-rect base) plus a dashed perforation line near one end.
   -------------------------------------------------------------------- */

.dg-ip-chip {
    /* Dark fill instead of a near-white one — against .contest-info-card's
       plain white background, a pale chip had almost no visible edge
       beyond its 1px border. Dark also makes the mask notches (below)
       read as genuine punched holes, since the page's white now shows
       through them against a clearly darker card. Same on-dark text
       convention as .dg-ip-panel above. */
    --dg-ip-fg: var(--white);
    --dg-ip-fg-muted: rgba(255, 255, 255, .68);
    --dg-ip-notch-r: 8px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background:
        linear-gradient(155deg, var(--dg-secondary-light), var(--dg-secondary)) padding-box,
        linear-gradient(135deg, var(--brand-green), var(--flame-lime)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 0 14px color-mix(in srgb, var(--flame-lime) 25%, transparent);
    mask-image:
        radial-gradient(circle var(--dg-ip-notch-r) at 0 50%, transparent 99%, #000 100%),
        radial-gradient(circle var(--dg-ip-notch-r) at 100% 50%, transparent 99%, #000 100%),
        linear-gradient(#000, #000);
    mask-composite: intersect, intersect, intersect;
    -webkit-mask-image:
        radial-gradient(circle var(--dg-ip-notch-r) at 0 50%, transparent 99%, #000 100%),
        radial-gradient(circle var(--dg-ip-notch-r) at 100% 50%, transparent 99%, #000 100%),
        linear-gradient(#000, #000);
    -webkit-mask-composite: source-in, source-in, source-in;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.dg-ip-chip::after {
    /* Dashed perforation line, offset from the right edge. */
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    right: 34px;
    width: 0;
    border-right: 1px dashed rgba(255, 255, 255, .3);
    pointer-events: none;
}

.dg-ip-chip:hover {
    transform: translateY(-3px);
}

/* Won: no glow, dim contour — but the number and winner name stay at
   full contrast (see their own rules below), only the ornamental
   border/glow/texture dim. */
.dg-ip-chip--won {
    /* Deliberately NOT a blanket `opacity` on the whole card — that would
       also dim the ticket number and winner's name, which accessibility
       requires stay at full contrast (see this file's header docblock),
       and CSS opacity can't be "un-dimmed" back above 1 on a child to
       compensate (values above 1 just clamp to 1). Only the ornamental
       bits — border tint and the scale texture (further down) — dim. */
    box-shadow: none;
    background:
        linear-gradient(155deg, var(--dg-secondary-light), var(--dg-secondary)) padding-box,
        color-mix(in srgb, var(--chrome-silver) 35%, transparent) border-box;
}

.dg-ip-chip--won .dg-ip-scales {
    opacity: .5;
}

/* Hover "shine" sweep — available chips only, transform-only so it's
   cheap even with hundreds on screen. */
.dg-ip-chip--available::before {
    content: "";
    position: absolute;
    inset: -20% -40%;
    background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--flame-lime) 35%, transparent) 50%, transparent 60%);
    transform: translateX(-140%);
    transition: transform 600ms ease;
    pointer-events: none;
}

.dg-ip-chip--available:hover::before {
    transform: translateX(140%);
}

.dg-ip-chip-label {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dg-ip-fg-muted);
}

.dg-ip-chip-number {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--dg-ip-fg);
}

.dg-ip-chip-status {
    display: inline-block;
    margin-top: .35rem;
    padding: .15rem .55rem;
    border-radius: var(--radius-pill);
    background: var(--brand-green);
    color: var(--white);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dg-ip-chip-winner {
    display: block;
    margin-top: .35rem;
    font-size: .75rem;
    color: var(--dg-ip-fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A corner ribbon instead of a centered rotated stamp — the centered
   version sat directly on top of the ticket number and winner's name
   (both still in normal flow underneath it), which read as cluttered.
   The ribbon lives in the dead space above the top-right corner and
   never overlaps real content. Doubles as the "Biletul tău" marker: one
   ribbon, its text/color swapping instead of stacking a second badge on
   top of it (see the PHP that renders this, which picks the wording). */
.dg-ip-chip-ribbon {
    /* var(--chrome-silver), not a green — the chip's own fill/border are
       already green->lime for the "available" state, so a lime ribbon on
       a won (still green-fill) chip read as green-on-green. Neutral
       silver reads as "spent ember" and stays distinct from both the
       available chip's green and the gold "Biletul tău" variant below. */
    position: absolute;
    top: 14px;
    right: -34px;
    width: 130px;
    padding: .3rem 0;
    background: var(--chrome-silver);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .68rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .05em;
    transform: rotate(35deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    pointer-events: none;
}

.dg-ip-chip--mine .dg-ip-chip-ribbon {
    background: var(--flame-gold);
}

/* --------------------------------------------------------------------
   3. Vitrina — grid mode, <= InstantPrize::GRID_MODE_MAX_PRIZES prizes
   -------------------------------------------------------------------- */

.dg-ip-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.dg-ip-showcase-card {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-height: 190px;
    padding: var(--space-4);
}

.dg-ip-showcase-card .dg-ip-hero {
    font-size: 1.9rem;
}

/* --------------------------------------------------------------------
   4. Categories — accordion mode, > InstantPrize::GRID_MODE_MAX_PRIZES
   -------------------------------------------------------------------- */

.dg-ip-categories {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.dg-ip-category {
    /* Back to the light surface too (per direct feedback) — only the
       ticket chips inside keep the dark "vault" treatment; each chip
       defines its own --dg-ip-fg/--dg-ip-fg-muted locally regardless of
       this, so nothing below needs touching for that. These two are kept
       as local aliases (rather than switching every descendant rule back
       to --text-on-light/--text-on-light-muted directly) purely so the
       same rules work under either background. --text-on-light(-muted),
       not --text-primary/--text-secondary: this panel IS the "white
       background" context those PROMPTUL 18 tokens exist for. */
    --dg-ip-fg: var(--text-on-light);
    --dg-ip-fg-muted: var(--text-on-light-muted);
    background: var(--surface-light);
    border-radius: var(--radius-lg);
}

.dg-ip-category-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: none;
    border: 0;
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: left;
    transition: filter 150ms ease;
}

.dg-ip-category-header:hover {
    filter: brightness(1.08);
}

.dg-ip-category-image {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: var(--radius-md);
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--flame-gold);
}

.dg-ip-category-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-100);
    color: var(--flame-gold);
    font-size: 2.1rem;
}

.dg-ip-category-info {
    flex: 1;
    min-width: 0;
}

.dg-ip-category-info .dg-ip-eyebrow {
    margin-bottom: .1rem;
}

.dg-ip-category-ring {
    flex-shrink: 0;
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--dg-ip-ring-color, var(--flame-lime)) calc(var(--dg-ip-ring-pct, 0) * 1%), color-mix(in srgb, var(--text-secondary) 20%, transparent) 0);
}

.dg-ip-category-ring::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    /* Matches the (light) category header background, so the ring reads
       as a ring (donut hole) rather than a filled disc. */
    background: var(--surface-light);
}

.dg-ip-category-ring-value {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    color: var(--dg-ip-fg);
    text-align: center;
    line-height: 1.05;
}

.dg-ip-category-ring-label {
    position: absolute;
    top: calc(100% + .2rem);
    left: 50%;
    transform: translateX(-50%);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dg-ip-fg-muted);
    white-space: nowrap;
}

.dg-ip-category-chevron {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--dg-ip-fg);
    transition: transform 200ms ease;
}

.dg-ip-category-header[aria-expanded="true"] .dg-ip-category-chevron {
    transform: rotate(180deg);
}

.dg-ip-category-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 200ms ease;
}

.dg-ip-category-panel.open {
    grid-template-rows: 1fr;
}

.dg-ip-category-content {
    overflow: hidden;
    min-height: 0;
    border-top: 1px solid color-mix(in srgb, var(--chrome-silver) 30%, transparent);
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + 12px);
    transition: opacity 150ms ease;
}

.dg-ip-category-panel:not(.open) .dg-ip-category-content {
    border-top-color: transparent;
    padding-top: 0;
    padding-bottom: 0;
}

.dg-ip-category-content.is-loading {
    opacity: .5;
}

.dg-ip-chip-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

.dg-ip-chip-grid .dg-ip-chip {
    width: 160px;
}

@media (prefers-reduced-motion: no-preference) {
    .dg-ip-chip-grid .dg-ip-chip {
        opacity: 0;
        animation: dg-ip-chip-in 300ms ease forwards;
        animation-delay: min(calc(var(--dg-ip-i, 0) * 20ms), 300ms);
    }
}

@keyframes dg-ip-chip-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dg-ip-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.dg-ip-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 .5rem;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--chrome-silver) 45%, transparent);
    background: none;
    /* --text-secondary fails 4.5:1 at this text's normal 16px size — see
       .dg-ip-stat-label above (PROMPTUL 18). */
    color: var(--text-on-light-muted);
    font-weight: 700;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
}

.dg-ip-page-btn:hover:not(:disabled) {
    color: var(--brand-green);
    border-color: var(--brand-green);
}

.dg-ip-page-btn:disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

.dg-ip-page-info {
    /* Same fix as .dg-ip-stat-label/.dg-ip-page-btn above (PROMPTUL 18). */
    color: var(--text-on-light-muted);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------
   5. Motion & accessibility
   -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .dg-ip-chip,
    .dg-ip-chip::before,
    .dg-ip-category-chevron,
    .dg-ip-category-panel,
    .dg-ip-page-btn,
    .dg-ip-filter-btn {
        transition: none !important;
    }

    .dg-ip-chip--available::before {
        display: none;
    }

    .dg-ip-chip-grid .dg-ip-chip {
        opacity: 1;
        animation: none !important;
        transform: none !important;
    }
}

/* --------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .dg-ip-showcase {
        grid-template-columns: 1fr;
    }

    /* .dg-ip-search's 200px min-width (its only width rule) stayed stuck
       at that width inside .dg-ip-controls' wrapping flex row instead of
       using the full line — the placeholder text didn't fit. */
    .dg-ip-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .dg-ip-search {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .dg-ip-showcase {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .dg-ip-panel-stats {
        gap: var(--space-4);
    }

    .dg-ip-category-image {
        width: 56px;
        height: 56px;
    }

    .dg-ip-hero {
        font-size: 1.6rem;
    }

    .dg-ip-chip-grid .dg-ip-chip {
        width: calc(50% - var(--space-3) / 2);
    }
}