/*!
 * H88 Casino List — plugin styles.
 * All rules scoped under .pl-casino-list. Tokens injected by PHP at render time.
 * No outside-of-scope styles touched.
 */

/* Token block here is a fallback; PHP emits the real one from admin overrides + Sisu tokens. */
:where(.pl-casino-list) {
    --pl-bg: #fafaf7;
    --pl-bg-alt: #f4f4ef;
    --pl-ink: #1a1a1a;
    --pl-ink-2: #4a4a47;
    --pl-ink-3: #8a8a85;
    --pl-line: #e8e8e5;
    --pl-line-2: #dcdcd7;
    --pl-brand: #003580;
    --pl-brand-hover: #002a66;
    --pl-accent: #ffce00;
    --pl-success: #5c7f5a;
    --pl-success-bg: #edf2ec;
    --pl-info-bg: #edf1f8;
    --pl-cta-bg: #22c55e;
    --pl-cta-text: #ffffff;
    --pl-radius: 4px;
    --pl-radius-sm: 2px;
    --pl-radius-full: 999px;
    --pl-font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --pl-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --pl-font-size: 15px;
    --pl-card-spacing: 12px;
    --pl-container-mt: 0;
    --pl-container-mb: 0;
    --pl-container-pt: 0;
    --pl-container-pb: 0;

    /* Card context — overrides cascade onto .pl-casino-row scope */
    --pl-card-bg: var(--pl-brand);                   /* theme blue → see PHP chain */
    --pl-card-border: rgba(255, 255, 255, 0.12);
    --pl-card-fg: #ffffff;
    --pl-card-fg-2: rgba(255, 255, 255, 0.78);
    --pl-card-fg-3: rgba(255, 255, 255, 0.55);
    --pl-card-surface: rgba(255, 255, 255, 0.08);    /* badges/inset chips */
    --pl-card-logo-bg: #ffffff;
}

/* ============== Container ============== */
.pl-casino-list {
    box-sizing: border-box;
    width: 100%;
    margin-block: var(--pl-container-mt) var(--pl-container-mb);
    padding-block: var(--pl-container-pt) var(--pl-container-pb);
    color: var(--pl-ink);
    font-family: var(--pl-font-sans);
    font-size: var(--pl-font-size);
    line-height: 1.5;
}
.pl-casino-list *, .pl-casino-list *::before, .pl-casino-list *::after { box-sizing: border-box; }

/* ============== List head ============== */
.pl-casino-list__head {
    margin-block-end: 1rem;
}
.pl-casino-list__title {
    margin: 0 0 .25rem;
    font-family: var(--pl-font-sans);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pl-ink);
}
/* ============== Rows wrapper ============== */
.pl-rows {
    display: flex;
    flex-direction: column;
    gap: var(--pl-card-spacing);
}

/* ============== Single row — mobile-first stack ============== */
.pl-casino-row {
    /* Re-scope shared tokens to the card's dark context — everything below inherits */
    --pl-ink:    var(--pl-card-fg);
    --pl-ink-2:  var(--pl-card-fg-2);
    --pl-ink-3:  var(--pl-card-fg-3);
    --pl-line:   var(--pl-card-border);
    --pl-line-2: var(--pl-card-border);
    --pl-bg-alt: var(--pl-card-surface);

    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "id     id"
        "bamt   bamt"
        "badges rating"
        "cta    cta"
        "review review";
    gap: .75rem 1rem;
    padding: 1rem;
    color: var(--pl-card-fg);
    background: var(--pl-card-bg);
    border: 1px solid var(--pl-card-border);
    border-radius: var(--pl-radius);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pl-casino-row:hover {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.pl-casino-row[hidden] { display: none; }

/* Lift bonus children into the row grid so badges + rating share a row on mobile */
.pl-casino-bonus { display: contents; }
.pl-casino-id        { grid-area: id; }
.pl-casino-bonus-amt { grid-area: bamt; }
.pl-badges           { grid-area: badges; align-self: center; }
.pl-casino-rating    { grid-area: rating; justify-self: end; align-self: center; }
.pl-cta              { grid-area: cta; }
.pl-review-content   { grid-area: review; }

/* Top-pick: subtle gold tint overlay over card bg */
.pl-casino-row--top {
    background:
        linear-gradient(to right, rgba(255, 206, 0, 0.18) 0%, transparent 55%),
        var(--pl-card-bg);
    border-color: rgba(255, 206, 0, 0.35);
}
.pl-casino-row--top:hover {
    background:
        linear-gradient(to right, rgba(255, 206, 0, 0.26) 0%, transparent 55%),
        var(--pl-card-bg);
}

/* Rank ----------------------------------------------------- */
.pl-rank {
    position: absolute;
    top: .75rem;
    right: .75rem;
    text-align: right;
    font-family: var(--pl-font-mono);
}
.pl-rank-num {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pl-ink-3);
    letter-spacing: 0.04em;
}
.pl-casino-row--top .pl-rank-num { color: var(--pl-accent); }
.pl-rank-tag {
    display: none; /* mobile: hide; rely on top-row gradient */
}

/* Casino identity (logo + name + license) ------------------ */
.pl-casino-id {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-inline-end: 3rem; /* leave space for absolute rank */
}
.pl-casino-logo {
    flex: 0 0 100px;
    width: 100px;
    height: auto;
    background: transparent;
    border-radius: var(--pl-radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pl-casino-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    max-height: 75px;
}
.pl-casino-logo-fallback {
    font-family: var(--pl-font-mono);
    font-size: .9rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.04em;
}
/* Bonus + badges ------------------------------------------- */
.pl-casino-bonus-amt {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--pl-ink);
}
.pl-casino-bonus-amt :where(span, strong, b, .pl-bonus-hi) {
    color: var(--pl-bonus-hi, var(--pl-accent));
    font-weight: 800;
}
.pl-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .375rem;
}
.pl-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--pl-radius-full);
    line-height: 1.5;
    white-space: nowrap;
}
.pl-badge--green {
    background: rgba(74, 222, 128, 0.14);
    color: #4ade80;
}
.pl-badge--blue {
    background: rgba(147, 197, 253, 0.14);
    color: #93c5fd;
}
.pl-badge--neutral {
    background: var(--pl-card-surface);
    color: var(--pl-card-fg-2);
}

/* Rating + stars ------------------------------------------ */
.pl-casino-rating {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
    white-space: nowrap;
}
.pl-casino-rating-num {
    display: inline-flex;
    align-items: baseline;
    gap: .2rem;
    font-family: var(--pl-font-mono);
    line-height: 1;
    color: var(--pl-ink);
    white-space: nowrap;
}
.pl-casino-rating-num .pl-rating-val {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
}
.pl-casino-rating-num small {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--pl-ink-3);
    margin: 0;
    line-height: 1;
    letter-spacing: 0;
}
.pl-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: var(--pl-accent);
}
.pl-stars svg,
.pl-star {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    display: block;
}

/* CTA block ----------------------------------------------- */
.pl-cta {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.pl-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
    padding: .75rem 1.5rem;
    background: var(--pl-cta-bg);
    color: var(--pl-cta-text);
    font-family: var(--pl-font-sans);
    font-weight: 700;
    font-size: .9375rem;
    letter-spacing: 0.01em;
    border-radius: var(--pl-radius);
    border: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
}
.pl-play-btn:hover,
.pl-play-btn:focus-visible {
    background: var(--pl-cta-bg);
    color: var(--pl-cta-text);
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    text-decoration: none;
}
.pl-play-btn:active {
    transform: translateY(0);
    filter: brightness(0.95);
}
.pl-play-btn svg { transition: transform .15s ease; }
.pl-play-btn:hover svg { transform: translateX(2px); }

.pl-review-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    width: 100%;
    min-height: 36px;
    padding: .375rem .75rem;
    background: transparent;
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius);
    color: var(--pl-ink-2);
    font: inherit;
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.pl-review-toggle:hover {
    border-color: var(--pl-line-2);
    color: var(--pl-ink);
}
.pl-chevron {
    display: inline-block;
    transition: transform .2s ease;
}
.pl-casino-row--expanded .pl-chevron {
    transform: rotate(180deg);
}

/* Review content ------------------------------------------ */
.pl-review-content {
    grid-column: 1 / -1;
    overflow: hidden;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}
.pl-casino-row--expanded .pl-review-content {
    grid-template-rows: 1fr;
}
.pl-review-content[hidden] {
    display: none;
}
.pl-casino-row--expanded .pl-review-content[hidden] {
    display: grid;
}
.pl-review-inner {
    min-height: 0;
    padding-block-start: 1rem;
    margin-block-start: .5rem;
    border-block-start: 1px dashed var(--pl-line-2);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.pl-review-col h4 {
    margin: 0 0 .375rem;
    font-family: var(--pl-font-mono);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pl-ink-3);
    font-weight: 600;
}
.pl-review-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pl-review-col li {
    padding: .125rem 0;
    font-size: .8125rem;
    color: var(--pl-ink);
}
.pl-review-col li::before {
    content: "·";
    margin-inline-end: .375rem;
    color: var(--pl-ink-3);
}
.pl-review-col p {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--pl-ink-2);
}
.pl-review-col p span {
    color: var(--pl-accent);
    font-weight: 600;
}

/* ============== Pagination ============== */
.pl-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-block-start: 1.5rem;
}
.pl-load-more {
    padding: .75rem 1.5rem;
    background: transparent;
    border: 1px solid var(--pl-line-2);
    border-radius: var(--pl-radius);
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    color: var(--pl-ink);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.pl-load-more:hover:not(:disabled) {
    background: var(--pl-bg-alt);
    border-color: var(--pl-ink-3);
}
.pl-load-more:disabled {
    opacity: 0.6;
    cursor: wait;
}
.pl-pagination-meta {
    margin: 0;
    font-family: var(--pl-font-mono);
    font-size: .75rem;
    color: var(--pl-ink-3);
}
.pl-pagination-meta strong {
    color: var(--pl-ink);
    font-weight: 600;
}

/* ============== Empty / error states ============== */
.pl-casino-list--empty,
.pl-casino-list--error {
    padding: 1.5rem;
    background: var(--pl-bg-alt);
    border: 1px dashed var(--pl-line-2);
    border-radius: var(--pl-radius);
    text-align: center;
}
.pl-empty,
.pl-error {
    margin: 0;
    color: var(--pl-ink-2);
    font-size: .875rem;
}

/* ============== Desktop layout (>= 900px) ============== */
@media (min-width: 900px) {
    .pl-casino-row {
        grid-template-columns: 64px 1.3fr 1.7fr 0.8fr 170px;
        grid-template-areas: none;
        align-items: center;
        gap: 1rem;
        padding: 1.25rem 1rem;
    }
    /* Re-collapse bonus children back into the bonus container on desktop */
    .pl-casino-bonus {
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }
    .pl-casino-id,
    .pl-casino-bonus-amt,
    .pl-badges,
    .pl-casino-rating,
    .pl-cta,
    .pl-review-content {
        grid-area: auto;
        justify-self: stretch;
    }
    .pl-casino-bonus-amt { text-align: center; }
    .pl-review-content { grid-column: 1 / -1; }

    .pl-rank {
        position: static;
        text-align: center;
        font-family: var(--pl-font-mono);
    }
    .pl-rank-num {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--pl-ink-3);
        letter-spacing: 0.04em;
        line-height: 1;
    }
    .pl-casino-row--top .pl-rank-num { color: var(--pl-accent); }
    .pl-rank-tag {
        display: block;
        margin-block-start: 6px;
        font-size: 9px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--pl-accent);
    }

    .pl-casino-id { padding-inline-end: 0; }
    .pl-casino-logo {
        flex: 0 0 150px;
        width: 150px;
        height: auto;
    }

    .pl-casino-rating {
        flex-direction: row;
        align-items: center;
        gap: .5rem;
    }

    .pl-badges {
        justify-content: center;
    }

    .pl-cta { gap: .375rem; }
    .pl-play-btn { width: auto; min-width: 100%; }
    .pl-review-toggle { width: 100%; }

    .pl-review-inner {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* ============== Focus ring (a11y) ============== */
.pl-casino-list :where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--pl-brand);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ============== Sticky Bar (bottom CTA) ============== */
:where(.pl-sticky) {
    --pl-sticky-bg: #ffffff;
    --pl-sticky-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
}
.pl-sticky {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 999990; /* above most theme footers, below WP toolbar (999999) */
    padding: env(safe-area-inset-bottom, 0);
    background: var(--pl-sticky-bg);
    border-block-start: 1px solid var(--pl-line, #e8e8e5);
    box-shadow: var(--pl-sticky-shadow);
    color: var(--pl-ink, #1a1a1a);
    font-family: var(--pl-font-sans, 'Manrope', system-ui, sans-serif);
    font-size: 14px;
    line-height: 1.4;
    transform: translateY(110%);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.pl-sticky[hidden] { display: none; }
.pl-sticky.pl-sticky--in  { transform: translateY(0); }
.pl-sticky.pl-sticky--out { transform: translateY(110%); }
.pl-sticky *, .pl-sticky *::before, .pl-sticky *::after { box-sizing: border-box; }

.pl-sticky__inner {
    display: grid;
    grid-template-columns: 100px 1fr auto auto;
    align-items: center;
    gap: .75rem;
    max-width: 920px;
    margin-inline: auto;
    padding: .625rem .75rem;
}

.pl-sticky__logo {
    width: 100px;
    height: auto;
    background: transparent;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pl-sticky__logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.pl-sticky__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pl-sticky__bonus {
    margin: 0;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--pl-ink, #1a1a1a);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pl-sticky__bonus span {
    color: var(--pl-brand, #003580);
    font-weight: 700;
}

.pl-sticky__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-height: 40px;
    padding: .5rem 1rem;
    background: var(--pl-cta-bg, var(--pl-brand, #003580));
    color: var(--pl-cta-text, #ffffff);
    font-weight: 600;
    font-size: .875rem;
    letter-spacing: -0.005em;
    border-radius: var(--pl-radius, 4px);
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
}
.pl-sticky__cta:hover,
.pl-sticky__cta:focus-visible {
    background: var(--pl-brand-hover, #002a66);
    color: var(--pl-cta-text, #ffffff);
    transform: translateY(-1px);
    text-decoration: none;
}

.pl-sticky__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    border-radius: var(--pl-radius-full, 999px);
    color: var(--pl-ink-3, #8a8a85);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.pl-sticky__close:hover {
    background: var(--pl-bg-alt, #f4f4ef);
    color: var(--pl-ink, #1a1a1a);
}

/* Mobile-first → on narrow screens, tighten the bar */
@media (max-width: 520px) {
    .pl-sticky__inner {
        grid-template-columns: 72px 1fr auto auto;
        gap: .5rem;
        padding: .5rem .5rem;
    }
    .pl-sticky__logo {
        width: 72px;
        height: auto;
    }
    .pl-sticky__cta {
        padding: .5rem .75rem;
        font-size: .8125rem;
    }
    .pl-sticky__close {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 480px) {
    .pl-sticky__inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        padding-right: 2.5rem; /* room for absolute close button */
    }
    .pl-sticky__body,
    .pl-sticky__cta {
        width: 100%;
    }
    .pl-sticky__close {
        position: absolute;
        right: 0;
    }
}

/* a11y focus */
.pl-sticky :where(a, button):focus-visible {
    outline: 2px solid var(--pl-brand, #003580);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ============== Reduced motion ============== */
@media (prefers-reduced-motion: reduce) {
    .pl-casino-row,
    .pl-play-btn,
    .pl-review-toggle,
    .pl-review-content,
    .pl-chevron,
    .pl-stars svg,
    .pl-load-more,
    .pl-sticky,
    .pl-sticky__cta,
    .pl-sticky__close {
        transition: none !important;
        animation: none !important;
    }
    .pl-play-btn:hover,
    .pl-sticky__cta:hover { transform: none; }
}