/* ==========================================================================
   GoTroppo Loyalty — Public shortcode styling
   --------------------------------------------------------------------------
   Loads for logged-in AND logged-out visitors. gtl-frontend.css is dark-themed
   and login-gated, which left the public [gtl_drawings] / [gtl_loyalty_widget]
   output unstyled on light pages such as /gt-rewards/.

   Structure here is theme-neutral. Colour treatments are scoped to
   .gtr-section (the GT Rewards landing page, light background) so dark
   surfaces — cart sidebar, NBN flow — keep the gtl-frontend.css treatment.
   ========================================================================== */

:root {
    --gtl-navy: #1a1a2e;
    --gtl-ink: #4a4a5e;
    --gtl-muted: #6b6b80;
    --gtl-coral: #ff6b6b;
    --gtl-sunset: #ff8e53;
    --gtl-gold: #ffd93d;
    --gtl-lagoon: #20d6b4;
    /* Accessible coral for text on white: 4.6:1 against #fff */
    --gtl-coral-text: #d65427;
    --gtl-hairline: rgba(15, 15, 30, 0.08);
}

/* ==========================================================================
   1. DRAWINGS SHOWCASE — structure
   ========================================================================== */

.gtl-drawings-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem auto 0;
    max-width: 1080px;
    width: 100%;
}

/* A single draw should not stretch edge to edge on desktop. */
.gtl-drawings-showcase:has(> .gtl-drawing-card:only-child) {
    max-width: 720px;
}

.gtl-drawing-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.gtl-drawing-card h4 {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.gtl-drawing-desc {
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0 0 1.1rem;
}

.gtl-drawing-desc p {
    margin: 0 0 0.75rem;
}

.gtl-drawing-desc p:last-child {
    margin-bottom: 0;
}

/* Permit numbers / legal line — quiet it down and separate it. */
.gtl-drawing-desc small {
    display: block;
    margin-top: 0.4rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gtl-hairline);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* Meta row: cost pill + end date sit together above the entry count. */
.gtl-drawing-cost {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.95rem;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gtl-drawing-ends {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.gtl-drawing-entries {
    display: block;
    width: 100%;
    margin: 1rem 0 1.1rem;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
}

.gtl-enter-drawing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.9rem;
    border: none;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.gtl-enter-drawing-btn:hover:not(:disabled) {
    transform: translateY(-2px);
}

.gtl-enter-drawing-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.gtl-drawing-entered {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.2rem;
    border-radius: 50px;
    font-size: 0.88rem;
    font-weight: 700;
}

.gtl-drawing-login {
    margin: 0;
    padding: 0.85rem 1.2rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* ==========================================================================
   2. LOYALTY WIDGET — structure
   ========================================================================== */

.gtl-widget {
    display: block;
    max-width: 560px;
    margin: 2rem auto 0;
    text-align: left;
}

.gtl-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.gtl-tier-badge-sm {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gtl-widget-balance {
    font-size: 1.05rem;
    font-weight: 800;
}

/* Headline entry figure — the number a customer actually came to see. */
.gtl-widget-figure {
    display: block;
    margin: 1.25rem 0 0.15rem;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
}

.gtl-widget-figure-label {
    display: block;
    margin: 0 0 1.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Two-up stat grid: earn rate + current draw entries. */
.gtl-widget-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.85rem;
    margin: 0 0 1.25rem;
}

.gtl-widget-stat {
    padding: 0.95rem 1.05rem;
    border-radius: 12px;
}

.gtl-widget-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.1;
}

.gtl-widget-stat-label {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

.gtl-widget-promo {
    margin: 0 0 1rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}

.gtl-widget-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0.9rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gtl-widget-link:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.gtl-widget-teaser {
    text-align: center;
}

.gtl-widget-teaser p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ==========================================================================
   3. LIGHT-SURFACE COLOUR TREATMENT — scoped to the GT Rewards page
   --------------------------------------------------------------------------
   The page template already forces the card shell (background/border/radius)
   with !important. Everything below styles the contents, which the page
   template does not cover.
   ========================================================================== */

.gtr-section .gtl-drawing-card h4 {
    color: var(--gtl-navy);
}

.gtr-section .gtl-drawing-desc,
.gtr-section .gtl-drawing-desc p {
    color: var(--gtl-ink);
}

.gtr-section .gtl-drawing-desc strong {
    color: var(--gtl-navy);
    font-weight: 800;
}

.gtr-section .gtl-drawing-desc small {
    color: var(--gtl-muted);
}

.gtr-section .gtl-drawing-desc a {
    color: var(--gtl-coral-text);
    font-weight: 600;
}

.gtr-section .gtl-drawing-cost {
    background: linear-gradient(135deg, var(--gtl-coral), var(--gtl-sunset));
    color: #fff;
}

.gtr-section .gtl-drawing-ends {
    background: rgba(15, 15, 30, 0.05);
    border: 1px solid var(--gtl-hairline);
    color: var(--gtl-navy);
}

.gtr-section .gtl-drawing-entries {
    background: linear-gradient(135deg, rgba(255, 142, 83, 0.1), rgba(255, 217, 61, 0.07));
    border: 1px solid rgba(255, 142, 83, 0.25);
    color: var(--gtl-navy);
}

.gtr-section .gtl-enter-drawing-btn {
    background: linear-gradient(135deg, var(--gtl-coral) 0%, var(--gtl-sunset) 50%, var(--gtl-gold) 100%);
    color: var(--gtl-navy);
    box-shadow: 0 8px 22px rgba(255, 142, 83, 0.3);
}

.gtr-section .gtl-enter-drawing-btn:hover:not(:disabled) {
    box-shadow: 0 14px 32px rgba(255, 142, 83, 0.42);
}

.gtr-section .gtl-drawing-entered {
    background: rgba(32, 214, 180, 0.12);
    border: 1px solid rgba(32, 214, 180, 0.4);
    color: #0d7d63;
}

.gtr-section .gtl-drawing-login {
    background: rgba(15, 15, 30, 0.04);
    border: 1px solid var(--gtl-hairline);
    color: var(--gtl-ink);
}

/* --- Widget on light surface --- */

.gtr-section .gtl-widget-balance,
.gtr-section .gtl-widget-figure {
    color: var(--gtl-navy);
}

.gtr-section .gtl-widget-figure-label {
    color: var(--gtl-coral-text);
}

.gtr-section .gtl-widget-stat {
    background: rgba(15, 15, 30, 0.035);
    border: 1px solid var(--gtl-hairline);
}

.gtr-section .gtl-widget-stat-value {
    color: var(--gtl-navy);
}

.gtr-section .gtl-widget-stat-label {
    color: var(--gtl-muted);
}

.gtr-section .gtl-widget-promo {
    background: rgba(255, 142, 83, 0.1);
    border: 1px solid rgba(255, 142, 83, 0.28);
    color: var(--gtl-coral-text);
}

/* The GT Rewards page template sets .gtr-section .gtl-widget-link { color:#d65427
   !important } from an inline <style> in the post content. That block is parsed
   after this stylesheet, so an equally specific !important rule there would win
   on document order. Qualifying with the element selector raises specificity
   enough to keep the button legible against its navy fill. */
.gtr-section .gtl-widget a.gtl-widget-link {
    background: var(--gtl-navy);
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(15, 15, 30, 0.2);
}

.gtr-section .gtl-widget a.gtl-widget-link:hover {
    background: #0f0f1e;
    color: #fff !important;
    box-shadow: 0 16px 34px rgba(15, 15, 30, 0.28);
}

.gtr-section .gtl-widget-teaser p {
    color: var(--gtl-ink);
}

.gtr-section .gtl-widget-teaser strong {
    color: var(--gtl-coral-text);
}

/* ==========================================================================
   4. DARK-SURFACE COLOUR TREATMENT — .gtr-section--dark blocks
   ========================================================================== */

.gtr-section--dark .gtl-drawing-card h4,
.gtr-section--dark .gtl-widget-balance,
.gtr-section--dark .gtl-widget-figure,
.gtr-section--dark .gtl-widget-stat-value {
    color: #fff;
}

.gtr-section--dark .gtl-drawing-desc,
.gtr-section--dark .gtl-drawing-desc p {
    color: rgba(255, 255, 255, 0.78);
}

.gtr-section--dark .gtl-drawing-desc strong {
    color: #fff;
}

.gtr-section--dark .gtl-drawing-entries {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.gtr-section--dark .gtl-widget-figure-label {
    color: #ffd093;
}

.gtr-section--dark .gtl-widget-stat {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}

.gtr-section--dark .gtl-widget-stat-label {
    color: rgba(255, 255, 255, 0.65);
}

/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */

@media (max-width: 880px) {
    .gtl-drawings-showcase {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .gtl-drawing-card h4 {
        font-size: 1.2rem;
    }

    .gtl-widget-figure {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .gtl-drawing-cost,
    .gtl-drawing-ends {
        font-size: 0.72rem;
        padding: 0.35rem 0.8rem;
    }

    .gtl-enter-drawing-btn,
    .gtl-widget-link {
        width: 100%;
        box-sizing: border-box;
    }

    .gtl-widget-figure {
        font-size: 2.2rem;
    }

    .gtl-widget-stats {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   6. ACCESSIBILITY
   ========================================================================== */

.gtl-enter-drawing-btn:focus-visible,
.gtl-widget-link:focus-visible {
    outline: 3px solid var(--gtl-lagoon);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .gtl-enter-drawing-btn,
    .gtl-widget-link {
        transition: none;
    }

    .gtl-enter-drawing-btn:hover:not(:disabled),
    .gtl-widget-link:hover {
        transform: none;
    }
}