/*
 * Luckyhills UI layer: buttons, tables, cards, backdrop.
 * Loaded last (after sticky-cta.css); the "body" prefix beats global.css,
 * core-blocks-v2.css and the inlined block styles.
 * Colours live in global.css :root; this file only adds the Luckyhills-specific shapes.
 *
 * Starting point generated by recolor-site from templates/ui.css. Edit freely:
 * shapes (radius, uppercase, glow, gradients) come from the user's UI notes.
 */
:root {
    --ui-bg: #13081a;
    --ui-card: #1d1027;
    --ui-inner: #22122e;
    --ui-accent: #ffc107;
    --ui-border: #351d48;
    --ui-border-strong: #4d2a66;
    --ui-text: #ffffff;
    --ui-muted: #a692b8;
    --ui-cta-from: #fe7216;
    --ui-cta-to: #fe7216;
    --ui-cta-text: #ffffff;
    --ui-login-bg: #3a1c52;
    --ui-login-text: #ffffff;
    --ui-secondary-bg: #3a1c52;
    --ui-secondary-border: #4d2a66;
    --ui-secondary-text: #ffffff;
    --ui-head: #311342;
    --ui-head-text: #ffc107;
    --ui-radius-btn: 8px;
    --ui-radius-secondary: 8px;
    --ui-radius-card: 12px;
    --ui-radius-table: 8px;
    --ui-card-border: #351d48;
    --ui-row-border: #351d48;
    --ui-zebra: #241333;
    --ui-row-hover: #2e1840;
    --ui-card-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    --ui-callout-bg: #281436;
    --ui-callout-border: #351d48;
    --ui-row: #1a0d24;
    --ui-banner: #281436;
    --ui-banner-deep: #311342;
    --ui-action-from: #e32636;
    --ui-action-to: #d81b60;
    --ui-highlight: #ffc107;
    --ui-highlight-alt: #ff6f00;
}

/*
 * Primary CTA. The promo hero has its own, more specific button rule
 * (.wp-block-new-theme-hero.page-hero--promo .wp-block-button__link), so it is listed explicitly.
 */
body .wp-block-button__link,
body .wp-block-new-theme-hero .wp-block-button__link,
body .wp-block-new-theme-hero .page-hero__cta,
body .wp-block-new-theme-hero.page-hero--promo .wp-block-button__link,
body .wp-block-new-theme-hero.page-hero--promo .page-hero__cta,
body .vox-header__btn .wp-block-button__link,
body .nt-sticky-cta .nt-sticky-cta__link,
body .nt-button--primary {
    background: linear-gradient(180deg, var(--ui-cta-from) 0%, var(--ui-cta-to) 100%);
    border: 0;
    border-radius: var(--ui-radius-btn);
    box-shadow: none;
    color: var(--ui-cta-text);
    font-weight: 700;
    transition: filter .2s ease, box-shadow .2s ease;
}

body .wp-block-button__link:hover,
body .wp-block-button__link:focus-visible,
body .wp-block-new-theme-hero .wp-block-button__link:hover,
body .wp-block-new-theme-hero .page-hero__cta:hover,
body .wp-block-new-theme-hero.page-hero--promo .wp-block-button__link:hover,
body .wp-block-new-theme-hero.page-hero--promo .page-hero__cta:hover,
body .vox-header__btn .wp-block-button__link:hover,
body .vox-header__btn .wp-block-button__link:focus-visible,
body .nt-sticky-cta .nt-sticky-cta__link:hover,
body .nt-button--primary:hover {
    background: linear-gradient(180deg, var(--ui-cta-from) 0%, var(--ui-cta-to) 100%);
    color: var(--ui-cta-text);
    filter: brightness(1.1);
}

/* Header "Registration" keeps the pulse, recoloured */
body .vox-header__btn--register .wp-block-button__link {
    box-shadow: 0 4px 14px rgba(254, 114, 22, 0.35);
}

/* Header "Log In" (second button in the header) */
body .vox-header__actions .wp-block-button + .wp-block-button .wp-block-button__link {
    animation: none;
    background: var(--ui-login-bg);
    box-shadow: none;
    color: var(--ui-login-text);
}

body .vox-header__actions .wp-block-button + .wp-block-button .wp-block-button__link:hover,
body .vox-header__actions .wp-block-button + .wp-block-button .wp-block-button__link:focus-visible {
    background: var(--ui-login-bg);
    color: var(--ui-login-text);
    filter: brightness(1.1);
}

/* Secondary / outlined buttons (incl. the outline button inside the promo hero) */
body .wp-block-button.is-style-outline > .wp-block-button__link,
body .wp-block-button__link.is-style-outline,
body .wp-block-new-theme-hero.page-hero--promo .wp-block-button.is-style-outline > .wp-block-button__link,
body .nt-button--secondary {
    background: var(--ui-secondary-bg);
    border: 1px solid var(--ui-secondary-border);
    border-radius: var(--ui-radius-secondary);
    box-shadow: none;
    color: var(--ui-secondary-text);
    filter: none;
    text-transform: none;
}

body .wp-block-button.is-style-outline > .wp-block-button__link:hover,
body .wp-block-button__link.is-style-outline:hover,
body .wp-block-new-theme-hero.page-hero--promo .wp-block-button.is-style-outline > .wp-block-button__link:hover,
body .nt-button--secondary:hover {
    background: var(--ui-secondary-border);
    border-color: var(--ui-secondary-border);
    color: var(--ui-text);
    filter: none;
}

/* Tables: dark plate, coloured headers, thin dividers */
body .wp-block-table table {
    background: var(--ui-card);
    border: 1px solid var(--ui-card-border);
    border-collapse: separate;
    border-radius: var(--ui-radius-table);
    border-spacing: 0;
    overflow: hidden;
}

body .wp-block-table thead {
    border: 0;
}

body .wp-block-table th,
body .wp-block-table td {
    border: 0;
    border-bottom: 1px solid var(--ui-row-border);
    padding: 12px 16px;
}

body .wp-block-table th {
    background: var(--ui-head);
    color: var(--ui-head-text);
    text-align: left;
}

body .wp-block-table td {
    color: var(--ui-text);
}

body .wp-block-table tbody tr:last-child td {
    border-bottom: 0;
}

/*
 * Zebra. core-blocks-v2.css paints rows with
 * ":not(.is-style-stripes) tbody tr:nth-child(even) td" - override with the same selector.
 */
/* is-style-stripes: WP core paints the <tr> itself (#f0f0f0 on odd rows), not the td */
body .wp-block-table.is-style-stripes {
    border-bottom: 0;
}

body .wp-block-table tbody tr,
body .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: transparent;
}

body .wp-block-table tbody tr td,
body .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td {
    background: transparent;
    transition: background .15s;
}

body .wp-block-table tbody tr:nth-child(even) td,
body .wp-block-table:not(.is-style-stripes) tbody tr:nth-child(even) td,
body .wp-block-table.is-style-stripes tbody tr:nth-child(even) td {
    background: var(--ui-zebra);
}

body .wp-block-table tbody tr:hover td,
body .wp-block-table:not(.is-style-stripes) tbody tr:nth-child(even):hover td {
    background: var(--ui-row-hover);
}

body .wp-block-table td strong,
body .wp-block-table td b {
    color: var(--ui-head-text);
}

/*
 * Phones: tables with 2-3 columns fit the screen instead of scrolling sideways
 * (core CSS gives them min-width: 640px). Tables with 4+ columns keep the scroll.
 */
@media (max-width: 767px) {
    body .wp-block-table table:not(:has(tr > :nth-child(4))) {
        min-width: 0;
    }

    body .wp-block-table th,
    body .wp-block-table td {
        font-size: 14px;
        padding: 10px 12px;
        word-break: break-word;
    }
}

/* Cards */
body .nt-link-card,
body .nt-faq-item,
body .nt-icon-card {
    background: var(--ui-card);
    border: 1px solid var(--ui-card-border);
    border-radius: var(--ui-radius-card);
    box-shadow: none;
    transition: box-shadow .2s, border-color .2s;
}

body .nt-link-card:hover,
body .nt-faq-item:hover,
body .nt-icon-card:hover {
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-card-shadow);
}

/* Pastel icon tiles and callouts from the light theme -> dark */
body .nt-icon-card .nt-icon-card__icon {
    background: var(--ui-bg);
    color: var(--ui-cta-from);
}

body .nt-icon-card--tone-violet .nt-icon-card__icon,
body .nt-icon-card--tone-blue .nt-icon-card__icon,
body .nt-icon-card--tone-sky .nt-icon-card__icon,
body .nt-icon-card--tone-pink .nt-icon-card__icon {
    color: var(--ui-accent);
}

body .nt-icon-card--tone-green .nt-icon-card__icon {
    color: var(--ui-muted);
}

body .nt-icon-card__note,
body .wp-block-new-theme-warning-callout.nt-warning-callout {
    background: var(--ui-callout-bg);
    border-color: var(--ui-callout-border);
    color: var(--ui-text);
}

body .wp-block-new-theme-warning-callout.nt-warning-callout {
    border-left-color: var(--ui-cta-to);
}

body .nt-warning-callout__icon,
body .nt-warning-callout__title,
body .nt-icon-card__note svg {
    color: var(--ui-cta-from);
}

/*
 * List bullets: legacy-reference.css paints "ul li::before" green #12a96a behind a long :not() chain
 * (specificity ~0,10,2), so !important is the sane way to recolour them.
 */
body .nt-anchor-nav__item::before,
body ul.wp-block-list > li::before {
    color: var(--ui-accent) !important;
}

/* Muted text */
body .age-disclaimer,
body figcaption {
    color: var(--ui-muted);
}

/* Backdrop: the glow gradient from global.css stays at the top of the page, not pinned to the viewport */
body {
    background-attachment: scroll;
    background-color: var(--ui-bg);
    background-repeat: no-repeat;
    color: var(--ui-text);
}

/* ---------------- Luckyhills specifics ---------------- */

/* Primary CTA: solid orange, bold uppercase */
body .wp-block-button__link,
body .vox-header__btn .wp-block-button__link,
body .nt-button--primary {
    letter-spacing: .02em;
    text-transform: uppercase;
}

/*
 * Action / bonus buttons (hero CTA, sticky "Claim bonus"): red -> crimson gradient.
 * The header "Sign up" stays orange (rules above).
 */
body .wp-block-new-theme-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
body .wp-block-new-theme-hero .page-hero__cta,
body .wp-block-new-theme-hero.page-hero--promo .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
body .wp-block-new-theme-hero.page-hero--promo .page-hero__cta,
body .nt-sticky-cta .nt-sticky-cta__link {
    background: linear-gradient(135deg, var(--ui-action-from) 0%, var(--ui-action-to) 100%);
    box-shadow: 0 4px 16px rgba(227, 38, 54, 0.35);
    color: #ffffff;
    text-transform: uppercase;
}

body .wp-block-new-theme-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
body .wp-block-new-theme-hero .page-hero__cta:hover,
body .wp-block-new-theme-hero.page-hero--promo .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
body .wp-block-new-theme-hero.page-hero--promo .page-hero__cta:hover,
body .nt-sticky-cta .nt-sticky-cta__link:hover {
    background: linear-gradient(135deg, var(--ui-action-from) 0%, var(--ui-action-to) 100%);
    color: #ffffff;
    filter: brightness(1.12);
}

/* Secondary buttons (Play / More): #3a1c52 with white text, uppercase like the CTAs */
body .wp-block-button.is-style-outline > .wp-block-button__link,
body .wp-block-new-theme-hero.page-hero--promo .wp-block-button.is-style-outline > .wp-block-button__link,
body .nt-button--secondary,
body .vox-header__actions .wp-block-button + .wp-block-button .wp-block-button__link {
    border: 1px solid var(--ui-secondary-border);
    text-transform: uppercase;
}

/* Sticky bar and banners: deep violet plate */
body .nt-sticky-cta {
    background: var(--ui-banner);
    border-top: 1px solid var(--ui-border);
}

/* Table rows: #1a0d24 / #241333 plates, #351d48 dividers, gold highlights */
body .wp-block-table tbody tr td,
body .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td {
    background: var(--ui-row);
}

body .wp-block-table th {
    border-bottom: 1px solid var(--ui-border);
}

body .wp-block-table td strong,
body .wp-block-table td b,
body .wp-block-table td mark {
    color: var(--ui-highlight);
}

/* Links: gold, orange on hover */
body .wp-block-table td a:hover,
body .entry-content a:not(.wp-block-button__link):hover {
    color: var(--ui-highlight-alt);
}