/**
 * Foreign Lottery — Powerball (Florida) Sheet Picker
 * Frontend Styles — ISRAELI PAIS.CO.IL AESTHETIC · JACKPOT ISRAELI GRADIENT
 * Version: 2.9.0
 * Author: Bitghost.com
 * Support: ghost@bitghost.com
 *
 * DESIGN LANGUAGE:
 *   Faithful tribute to the Israeli Mifal HaPayis (pais.co.il) lottery form.
 *   Pink sheet background, white number cells with red borders, red accent
 *   triangles and labels. v2.9.0 extends the pais language UP into the
 *   jackpot banner itself — the orange/tomato gradient is swapped for a
 *   pink → red → deep-red Israeli gradient ramp, fully closing the loop.
 *
 * ARCHITECTURE NOTE:
 *   All DOM selectors preserved 1:1 from v2.8.0 — frontend.js, shortcodes,
 *   AJAX handlers, WooCommerce checkout, Florida Powerball data pipeline
 *   untouched. This file is a pure visual skin.
 *
 * AGENT SIGNATURE:
 *   🧠 AGI Architect agent — diff analysis of v2.8.0 gold standard
 *   🧬 Evolution Engine — minimal-surface-area patch synthesis
 *   ✅ Constraint: formatting changes only; game logic invariant
 *
 * VERSION HISTORY:
 *   2.9.0 — Jackpot Israeli gradient + cross-plugin 3-col layout parity (2026-04-19)
 *   2.8.0 — Israeli pais.co.il sheet-picker restyle
 *   2.7.1 — Prior frontend grid layout
 */

/* ============================================================
   🎫  ISRAELI PAIS DESIGN TOKENS
   ============================================================ */
:root {
    /* Legacy Powerball brand (checkout + theme variations keep these) */
    --fl-primary-color: #FFA500;
    --fl-secondary-color: #FF6347;
    --fl-success-color: #4CAF50;
    --fl-danger-color: #f44336;
    --fl-border-radius: 8px;
    --fl-transition: all 0.3s ease;

    /* NEW — Israeli pais.co.il sheet-picker palette */
    --fl-pais-pink-soft:   #FADADD; /* outer sheet-card background */
    --fl-pais-pink-mid:    #F5BFC4; /* powerball/accent zone */
    --fl-pais-pink-deep:   #EFA3A9; /* divider + secondary accent */
    --fl-pais-white:       #FFFFFF; /* cell interior */
    --fl-pais-red:         #E63946; /* primary red border */
    --fl-pais-red-deep:    #C1272D; /* selected / hover red */
    --fl-pais-red-crimson: #8B1A1F; /* jackpot banner deep end */
    --fl-pais-red-shadow:  rgba(230, 57, 70, 0.35);
    --fl-pais-ink:         #1A1A1A; /* near-black cell number */
    --fl-pais-muted:       #6B6B6B;

    /* NEW v2.9.0 — Jackpot Israeli gradient (pink → red → crimson) */
    --fl-pais-jackpot-gradient: linear-gradient(
        135deg,
        var(--fl-pais-pink-deep)  0%,
        var(--fl-pais-red)        40%,
        var(--fl-pais-red-deep)   80%,
        var(--fl-pais-red-crimson) 100%
    );

    /* Kanban-Bitghost touches */
    --fl-kanban-radius:    22px;
    --fl-cell-radius:       6px;
    --fl-shimmer-speed:     2.2s;
}

/* ============================================================
   🎫  MAIN WRAPPER (unchanged branding)
   ============================================================ */
.fl-lottery-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   🎫  JACKPOT SECTION — ISRAELI GRADIENT (v2.9.0)
   Orange/tomato replaced with pink → red → crimson pais ramp.
   Florida Powerball data feed feeding this banner is unchanged.
   ============================================================ */
.fl-jackpot-section {
    background: var(--fl-pais-jackpot-gradient);
    color: white;
    padding: 40px 20px;
    text-align: center;
    border-radius: var(--fl-border-radius);
    margin-bottom: 30px;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 10px 40px rgba(193, 39, 45, 0.28);
    position: relative;
    overflow: hidden;
}

/* Subtle radial shimmer so the banner has life even on a solid-ish red */
.fl-jackpot-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%);
    animation: fl-jackpot-shimmer 3s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes fl-jackpot-shimmer {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fl-jackpot-section > * { position: relative; z-index: 1; }

.fl-jackpot-title {
    font-size: 2em;
    margin: 0 0 20px 0;
    font-weight: 700;
    position: relative;
}

.fl-live-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #4CAF50;
    border-radius: 50%;
    margin-left: 10px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

.fl-jackpot-amount {
    font-size: 3em;
    font-weight: 700;
    margin: 20px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.fl-jackpot-timer { font-size: 1.2em; opacity: 0.95; }
.fl-timer-value   { font-weight: 600; font-size: 1.3em; color: #FFFF00; }

/* ============================================================
   🎫  PICKER SECTION — Israeli pais canvas
   ============================================================ */
.fl-picker-section {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* Responsive sheet grid */
.fl-sheets-container {
    display: grid;
    gap: 24px;
    margin-bottom: 30px;
}

@media (min-width: 1200px) {
    .fl-sheets-container { grid-template-columns: repeat(3, 1fr); }
    .fl-sheets-container:has(.fl-lottery-sheet:nth-child(2)):not(:has(.fl-lottery-sheet:nth-child(3))) {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .fl-sheets-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .fl-sheets-container { grid-template-columns: 1fr; }
}

/* ============================================================
   🎫  INDIVIDUAL SHEET — Pais pink card w/ 22px kanban radius
   ============================================================ */
.fl-lottery-sheet {
    background: var(--fl-pais-pink-soft);
    border: 2px solid var(--fl-pais-red);
    border-radius: var(--fl-kanban-radius);
    padding: 0;
    transition: var(--fl-transition);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
        0 2px 0 var(--fl-pais-pink-deep) inset,
        0 6px 16px rgba(193, 39, 45, 0.08);
}

.fl-lottery-sheet.active {
    border-color: var(--fl-pais-red-deep);
    box-shadow:
        0 2px 0 var(--fl-pais-pink-deep) inset,
        0 8px 24px var(--fl-pais-red-shadow);
}

.fl-lottery-sheet:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 0 var(--fl-pais-pink-deep) inset,
        0 10px 28px rgba(193, 39, 45, 0.18);
}

/* Red bar at top of each sheet — Israeli form "טבלה" header */
.fl-lottery-sheet::before {
    content: '';
    display: block;
    height: 6px;
    background: linear-gradient(90deg, var(--fl-pais-red) 0%, var(--fl-pais-red-deep) 50%, var(--fl-pais-red) 100%);
}

/* ============================================================
   🎫  SHEET HEADER — "▶ Sheet N" pais-style red label
   ============================================================ */
.fl-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 14px 18px;
    background: var(--fl-pais-pink-soft);
    border-bottom: 2px solid var(--fl-pais-red);
    flex-wrap: wrap;
    gap: 10px;
}

.fl-sheet-title {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--fl-pais-red-deep);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Red play-triangle before the sheet title — mirrors the pais ▶ marker */
.fl-sheet-title::before {
    content: '▶';
    color: var(--fl-pais-red);
    font-size: 1.15em;
    line-height: 1;
}

.fl-sheet-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.fl-sheet-actions button {
    padding: 6px 10px;
    font-size: 0.75em;
    border: 2px solid var(--fl-pais-red);
    border-radius: var(--fl-cell-radius);
    cursor: pointer;
    transition: var(--fl-transition);
    font-weight: 600;
    white-space: nowrap;
    background: var(--fl-pais-white);
    color: var(--fl-pais-red-deep);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.fl-sheet-actions button:hover:not(:disabled) {
    background: var(--fl-pais-red);
    color: var(--fl-pais-white);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px var(--fl-pais-red-shadow);
}

.fl-quick-pick-btn  { background: var(--fl-pais-white); }
.fl-clear-btn       { background: var(--fl-pais-white); }
.fl-download-btn    { background: var(--fl-pais-white); }

.fl-download-btn:disabled {
    background: #f0f0f0;
    color: #bbb;
    border-color: #ddd;
    cursor: not-allowed;
    opacity: 0.6;
}

.fl-remove-sheet-btn {
    background: var(--fl-pais-red);
    color: var(--fl-pais-white);
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 1em;
    border-radius: 50%;
    border: 2px solid var(--fl-pais-red);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.fl-remove-sheet-btn:hover {
    background: var(--fl-pais-red-deep);
    border-color: var(--fl-pais-red-deep);
    transform: rotate(90deg);
}

/* ============================================================
   🎫  SHEET CONTENT — pink canvas holding the number grids
   ============================================================ */
.fl-sheet-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 18px;
    background: var(--fl-pais-pink-soft);
    gap: 14px;
}

/* ============================================================
   🎫  MAIN NUMBERS & POWERBALL — section headers w/ ▶
   ============================================================ */
.fl-main-numbers,
.fl-powerball-section {
    margin: 0;
    padding: 12px;
    background: var(--fl-pais-white);
    border: 2px solid var(--fl-pais-red);
    border-radius: var(--fl-cell-radius);
}

/* Powerball zone gets a subtle pink tint to differentiate (dual-tone nod) */
.fl-powerball-section {
    background: linear-gradient(180deg, var(--fl-pais-white) 0%, #FFF4F5 100%);
}

.fl-main-numbers h4,
.fl-powerball-section h4 {
    font-size: 0.82em;
    color: var(--fl-pais-red-deep);
    margin: 0 0 10px 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--fl-pais-pink-deep);
    width: 100%;
}

.fl-main-numbers h4::before,
.fl-powerball-section h4::before {
    content: '▶';
    color: var(--fl-pais-red);
    font-size: 0.9em;
}

/* ============================================================
   🎫  NUMBER GRIDS — pais cell matrix
   ============================================================ */
.fl-number-grid {
    display: grid;
    gap: 4px;
    margin-bottom: 0;
    justify-content: stretch;
    width: 100%;
    box-sizing: border-box;
}

.fl-main-grid {
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
    max-width: 100%;
}
.fl-powerball-grid {
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
    max-width: 100%;
}

@media (max-width: 1199px) {
    .fl-main-grid      { grid-template-columns: repeat(7, 1fr); }
    .fl-powerball-grid { grid-template-columns: repeat(7, 1fr); }
}

@media (max-width: 767px) {
    .fl-main-grid      { grid-template-columns: repeat(7, 1fr); }
    .fl-powerball-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================================
   🎫  NUMBER BUTTONS — white pais cells w/ red borders
   ============================================================ */
.fl-number-btn,
.fl-powerball-btn {
    aspect-ratio: 1;
    min-width: 26px;
    min-height: 26px;
    border: 2px solid var(--fl-pais-red);
    background: var(--fl-pais-white);
    color: var(--fl-pais-ink);
    font-weight: 700;
    font-size: 0.78em;
    border-radius: var(--fl-cell-radius);
    cursor: pointer;
    transition: var(--fl-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    position: relative;
    overflow: hidden;
}

.fl-number-btn:hover,
.fl-powerball-btn:hover {
    background: #FFF0F1;
    border-color: var(--fl-pais-red-deep);
    transform: scale(1.08);
    box-shadow: 0 2px 6px var(--fl-pais-red-shadow);
    z-index: 2;
}

/* Selected state — filled red w/ Bitghost shimmer sweep */
.fl-number-btn.selected,
.fl-powerball-btn.selected {
    background: var(--fl-pais-red);
    color: var(--fl-pais-white);
    border-color: var(--fl-pais-red-deep);
    box-shadow:
        0 2px 8px var(--fl-pais-red-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.fl-number-btn.selected::after,
.fl-powerball-btn.selected::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    animation: fl-pais-shimmer var(--fl-shimmer-speed) infinite;
    pointer-events: none;
}

@keyframes fl-pais-shimmer {
    0%   { left: -120%; }
    60%  { left: 120%; }
    100% { left: 120%; }
}

/* Powerball button gets a slightly stronger emphasis */
.fl-powerball-btn {
    border-width: 2px;
    background: linear-gradient(180deg, var(--fl-pais-white) 0%, #FFF4F5 100%);
}

.fl-powerball-btn.selected {
    background: var(--fl-pais-red-deep);
    border-color: var(--fl-pais-red-deep);
}

/* ============================================================
   🎫  SELECTION SUMMARY — pais footer readout
   ============================================================ */
.fl-selection-summary {
    background: var(--fl-pais-white);
    border: 2px solid var(--fl-pais-red);
    padding: 10px 14px;
    border-radius: var(--fl-cell-radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;
    font-size: 0.85em;
}

.fl-selected-main,
.fl-selected-powerball {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fl-label {
    font-weight: 700;
    color: var(--fl-pais-red-deep);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fl-selected-numbers,
.fl-selected-pb {
    font-weight: 700;
    color: var(--fl-pais-ink);
    font-size: 1em;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

/* ============================================================
   🎫  ADD-SHEET BUTTON — red pais accent, visible & consistent
   ============================================================ */
.fl-add-sheet-container {
    text-align: center;
    padding: 20px 0;
    margin-bottom: 20px;
}

.fl-add-sheet-btn,
#fl-add-sheet {
    background: var(--fl-pais-white);
    color: var(--fl-pais-red-deep);
    border: 2px solid var(--fl-pais-red);
    padding: 12px 30px;
    font-size: 0.95em;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--fl-transition);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fl-add-sheet-btn:hover:not(:disabled),
#fl-add-sheet:hover:not(:disabled) {
    background: var(--fl-pais-red);
    color: var(--fl-pais-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--fl-pais-red-shadow);
}

.fl-add-sheet-btn:disabled,
#fl-add-sheet:disabled {
    background: #f0f0f0;
    border-color: #ddd;
    color: #bbb;
    cursor: not-allowed;
    opacity: 0.6;
}

.fl-plus-icon {
    font-size: 1.5em;
    font-weight: bold;
}

.fl-sheet-limit { display: none; }

/* ============================================================
   🎫  PROCEED TO CHECKOUT (brand-preserved)
   ============================================================ */
.fl-proceed-checkout {
    text-align: center;
    margin: 30px 0;
}

.fl-proceed-btn {
    background: linear-gradient(135deg, var(--fl-success-color), #388e3c);
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 1.2em;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--fl-transition);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.fl-proceed-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #388e3c, var(--fl-success-color));
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(76, 175, 80, 0.3);
}

.fl-proceed-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ============================================================
   🎫  CHECKOUT SECTION (brand-preserved)
   ============================================================ */
.fl-checkout-section {
    display: none;
    background: white;
    padding: 30px;
    border-radius: var(--fl-border-radius);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 30px;
}
.fl-checkout-section.active { display: block; }

/* ============================================================
   🎫  RESPONSIVE MOBILE ADJUSTMENTS
   ============================================================ */
@media (max-width: 767px) {
    .fl-lottery-wrapper { padding: 10px; }
    .fl-jackpot-amount { font-size: 2em; }

    .fl-lottery-sheet { border-radius: 18px; }
    .fl-sheet-header { padding: 12px 14px; }
    .fl-sheet-content { padding: 14px; gap: 12px; }
    .fl-sheet-title { font-size: 0.95em; }

    .fl-sheet-actions button {
        padding: 5px 8px;
        font-size: 0.7em;
    }

    .fl-number-btn,
    .fl-powerball-btn {
        min-width: 32px;
        min-height: 32px;
        font-size: 0.82em;
    }

    .fl-main-numbers h4,
    .fl-powerball-section h4 {
        font-size: 0.78em;
    }

    .fl-selection-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .fl-proceed-btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 1em;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .fl-sheet-content { padding: 16px; }
    .fl-sheet-actions button { padding: 5px 10px; font-size: 0.78em; }
    .fl-number-btn,
    .fl-powerball-btn {
        min-width: 30px;
        min-height: 30px;
        font-size: 0.8em;
    }
}

@media (min-width: 1400px) {
    .fl-sheets-container {
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* ============================================================
   🎫  LOADING STATES & TOAST (brand-preserved)
   ============================================================ */
.fl-loading-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.fl-loading-overlay.active { display: flex; }

.fl-loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--fl-pais-red);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fl-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--fl-pais-ink);
    color: white;
    padding: 15px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transform: translateX(400px);
    transition: transform 0.3s ease;
    z-index: 10000;
    max-width: 300px;
    border-left: 4px solid var(--fl-pais-red);
}
.fl-toast.show { transform: translateX(0); }

/* Legacy theme variations (preserved for shortcode attributes) */
.fl-theme-blue   { --fl-primary-color: #2196F3; --fl-secondary-color: #1976D2; }
.fl-theme-green  { --fl-primary-color: #4CAF50; --fl-secondary-color: #388E3C; }
.fl-theme-purple { --fl-primary-color: #9C27B0; --fl-secondary-color: #7B1FA2; }

/* ============================================================
   🎫  CHECKOUT FORM STYLES (brand-preserved)
   ============================================================ */
.fl-checkout-wrapper    { max-width: 800px; margin: 0 auto; }
.fl-checkout-header     { text-align: center; margin-bottom: 30px; }
.fl-checkout-title      { font-size: 2em; color: #333; margin-bottom: 10px; }
.fl-checkout-subtitle   { color: #666; font-size: 1.1em; }

.fl-account-section,
.fl-form-section,
.fl-payment-section {
    background: #f9f9f9;
    padding: 25px;
    border-radius: var(--fl-border-radius);
    margin-bottom: 20px;
}

.fl-account-section h3,
.fl-form-section h3,
.fl-payment-section h3 {
    color: var(--fl-pais-red-deep);
    margin-bottom: 20px;
    font-size: 1.3em;
}

.fl-account-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
}

.fl-account-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: 600;
    color: #666;
    transition: var(--fl-transition);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.fl-account-tab.active {
    color: var(--fl-pais-red);
    border-bottom-color: var(--fl-pais-red);
}

.fl-tab-content         { display: none; padding: 20px 0; }
.fl-tab-content.active  { display: block; }

.fl-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .fl-form-row { grid-template-columns: 1fr; }
}

.fl-form-group  { margin-bottom: 20px; }

.fl-form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}
.fl-form-label .required { color: var(--fl-danger-color); }

.fl-form-input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1em;
    transition: var(--fl-transition);
}

.fl-form-input:focus {
    outline: none;
    border-color: var(--fl-pais-red);
    box-shadow: 0 0 0 3px var(--fl-pais-red-shadow);
}

.fl-form-input.error { border-color: var(--fl-danger-color); }
.fl-error-message    { color: var(--fl-danger-color); font-size: 0.9em; margin-top: 5px; display: none; }
.fl-form-group.error .fl-error-message { display: block; }

.fl-submit-btn {
    background: linear-gradient(135deg, var(--fl-success-color), #388e3c);
    color: white;
    border: none;
    padding: 15px 50px;
    font-size: 1.2em;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--fl-transition);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.fl-submit-btn:hover {
    background: linear-gradient(135deg, #388e3c, var(--fl-success-color));
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(76, 175, 80, 0.3);
}

/* ============================================================
   🎫  ACCESSIBILITY
   ============================================================ */
.fl-number-btn:focus,
.fl-powerball-btn:focus,
button:focus {
    outline: 3px solid var(--fl-pais-red);
    outline-offset: 2px;
}

/* ============================================================
   🎫  PRINT STYLES
   ============================================================ */
@media print {
    .fl-sheet-actions,
    .fl-add-sheet-container,
    .fl-proceed-checkout { display: none !important; }

    .fl-lottery-sheet {
        background: white !important;
        border: 2px solid #000 !important;
        box-shadow: none !important;
    }
    .fl-number-btn.selected,
    .fl-powerball-btn.selected {
        background: #000 !important;
        color: #fff !important;
    }
}

/* ============================================================
   🎫  REDUCED MOTION — honor user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .fl-number-btn.selected::after,
    .fl-powerball-btn.selected::after {
        animation: none;
        opacity: 0;
    }
    .fl-lottery-sheet,
    .fl-number-btn,
    .fl-powerball-btn {
        transition: none;
    }
}

/* ============================================================
   🎱  v2.12.0 — WINNING NUMBERS STRIP + STANDALONE CARDS
   Rendered by [powerball_winning_numbers], [powerball_jackpot],
   [powerball_jackpot_full]. Visual language mirrors
   floridalottery.com/powerball (red Powerball, 3x multiplier badge).
   ============================================================ */

.fl-standalone { width: 100%; margin: 1.5rem 0; }
.fl-align-left   { text-align: left; }
.fl-align-center { text-align: center; }
.fl-align-right  { text-align: right; }

.fl-winning-numbers {
    display: block;
    padding: 18px 22px;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fff5ed 100%);
    border: 1px solid rgba(255, 99, 71, 0.20);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    color: #1a1a1a;
    position: relative;
    overflow: hidden;
    margin-top: 18px;
}
.fl-winning-numbers::before {
    content: "";
    position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
    animation: fl-winning-shimmer 2.2s infinite;
    pointer-events: none;
}
@keyframes fl-winning-shimmer {
    0%   { left: -100%; }
    100% { left: 100%; }
}

.fl-winning-header {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.fl-winning-label {
    font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
    font-weight: 700; color: #6B6B6B;
}
.fl-winning-date {
    font-size: 13px; font-weight: 600; color: #D93025;
}
.fl-winning-sublabel {
    display: block;
    font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
    font-weight: 700; color: #6B6B6B;
    margin-top: 14px; margin-bottom: 8px;
}

.fl-winning-balls {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 10px; min-height: 48px;
}
.fl-align-left  .fl-winning-balls { justify-content: flex-start; }
.fl-align-right .fl-winning-balls { justify-content: flex-end; }

.fl-ball {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: #f5f1ea; color: #1a1a1a;
    font-weight: 800; font-size: 17px; line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-shadow: inset 0 -3px 6px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.08);
    transition: transform 160ms ease;
}
.fl-ball:hover { transform: translateY(-2px); }

.fl-ball--white     { /* default */ }
.fl-ball--powerball {
    background: #D93025; color: #ffffff;
    box-shadow: inset 0 -3px 6px rgba(0,0,0,0.18), 0 2px 6px rgba(217,48,37,0.38);
}
.fl-ball--multiplier {
    background: transparent; color: #D93025;
    border: 2px solid #D93025;
    font-size: 13px; box-shadow: none;
}

.fl-winning-numbers--compact { padding: 0; }
.fl-winning-numbers--compact .fl-ball { width: 38px; height: 38px; font-size: 15px; }

.fl-winning-placeholder {
    font-style: italic; color: #6B6B6B; font-size: 14px;
}

.fl-winning-dp { margin-top: 6px; }

/* Responsive */
@media (max-width: 768px) {
    .fl-winning-numbers { padding: 14px 16px; }
    .fl-ball { width: 40px; height: 40px; font-size: 15px; }
    .fl-winning-header { flex-direction: column; gap: 4px; align-items: flex-start; }
    .fl-align-center .fl-winning-header { align-items: center; }
}
@media (max-width: 480px) {
    .fl-winning-balls { gap: 7px; }
    .fl-ball { width: 36px; height: 36px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .fl-winning-numbers::before { animation: none; }
    .fl-ball { transition: none; }
}

/* Dark mode (Bitghost monochromatic) */
@media (prefers-color-scheme: dark) {
    .fl-winning-numbers {
        background: linear-gradient(180deg, #0a0a0a 0%, #000000 100%);
        border-color: rgba(255,255,255,0.12);
        color: #ffffff;
    }
    .fl-winning-label, .fl-winning-sublabel { color: #a0a0a0; }
    .fl-winning-date  { color: #ffffff; }
    .fl-ball--white   { background: #1a1a1a; color: #ffffff; }
    .fl-ball--powerball { background: #D93025; color: #ffffff; }
}

/* ============================================================
   🎱  v2.14.0 — JACKPOT-EMBEDDED WINNING NUMBERS (MM-PARITY FIX)
   Mirrors mega-millions-fl's .mml-jackpot-numbers-wrap exactly:
   the inner numbers card is TRANSPARENT so the parent jackpot
   gradient shows through; labels are WHITE (since they sit on
   red); ball chips are WHITE for max contrast on red.
   This replaces the v2.13.0 implementation which painted a
   white inner card AND had a prefers-color-scheme:dark override
   that flipped to black on user systems with dark-mode preference
   — producing the broken black bar reported in production.
   ============================================================ */

.fl-jackpot-numbers-wrap {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}

/* Inner numbers strip — transparent so the red jackpot gradient
   shows through. NO inner card background, NO inner border, NO
   inner shadow. Matches MM exactly. */
.fl-jackpot-numbers-wrap .fl-winning-numbers {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #ffffff;
    margin-top: 0;
    padding: 0;
}
.fl-jackpot-numbers-wrap .fl-winning-numbers::before { display: none; }

/* Labels + date in WHITE — they sit on red, must be light. */
.fl-jackpot-numbers-wrap .fl-winning-label,
.fl-jackpot-numbers-wrap .fl-winning-date,
.fl-jackpot-numbers-wrap .fl-winning-sublabel {
    color: #ffffff;
    opacity: 0.92;
}
.fl-jackpot-numbers-wrap .fl-winning-placeholder {
    color: #ffffff;
    opacity: 0.85;
    font-style: italic;
}

/* Ball chips — WHITE on red. Powerball remains red-on-white
   inverse for visual signal continuity with the source page. */
.fl-jackpot-numbers-wrap .fl-ball {
    width: 40px; height: 40px; font-size: 15px;
}
.fl-jackpot-numbers-wrap .fl-ball--white {
    background: #ffffff;
    color: #1a1a1a;
}
.fl-jackpot-numbers-wrap .fl-ball--powerball {
    background: #ffffff;
    color: #D93025;
    box-shadow: inset 0 -3px 6px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.18);
    border: 2px solid #ffffff;
}
.fl-jackpot-numbers-wrap .fl-ball--multiplier {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255,255,255,0.85);
    font-size: 12px;
}

/* Responsive — shrink balls on phones so they fit the card. */
@media (max-width: 768px) {
    .fl-jackpot-numbers-wrap { margin-top: 18px; padding-top: 14px; }
    .fl-jackpot-numbers-wrap .fl-ball { width: 36px; height: 36px; font-size: 14px; }
}
@media (max-width: 480px) {
    .fl-jackpot-numbers-wrap .fl-winning-balls { gap: 7px; }
    .fl-jackpot-numbers-wrap .fl-ball { width: 32px; height: 32px; font-size: 13px; }
}

/* INTENTIONALLY no prefers-color-scheme override here. The inner
   numbers strip always sits on the red jackpot gradient — its
   appearance must NOT change with OS dark-mode preference, or
   the v2.13.0 black-bar bug returns. */

/* =====================================================================
   v2.18.0 — 🧊 DRAW TIMES MODAL + DRAW PENDING STATE
   Dark mode #000/#fff · 22px kanban border · shimmer · draggable
   Pais palette accent: #EFA3A9 → #E63946 → #C1272D → #8B1A1F
   ===================================================================== */

.fl-drawinfo-trigger {
    appearance: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    margin-left: 10px;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.fl-drawinfo-trigger:hover,
.fl-drawinfo-trigger:focus-visible {
    background: #000;
    border-color: #fff;
    transform: translateY(-1px);
    outline: none;
}

.fl-drawinfo-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.fl-drawinfo-backdrop.is-open { opacity: 1; }
.fl-drawinfo-backdrop[hidden] { display: none; }

.fl-drawinfo-modal {
    position: relative;
    width: min(560px, calc(100vw - 32px));
    max-height: min(80vh, 640px);
    overflow: auto;
    background: #000;
    color: #fff;
    border: 22px solid #000;
    border-radius: 28px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 24px 64px rgba(0, 0, 0, 0.6);
    outline: none;
    will-change: transform;
}
.fl-drawinfo-modal.is-dragging { box-shadow: 0 0 0 2px #E63946, 0 32px 72px rgba(0,0,0,0.7); }

.fl-drawinfo-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    cursor: grab;
    user-select: none;
    touch-action: none;
    position: relative;
    overflow: hidden;
}
.fl-drawinfo-head::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.10), transparent);
    animation: fl-drawinfo-shimmer 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes fl-drawinfo-shimmer { 0% { left: -60%; } 60%, 100% { left: 120%; } }
.fl-drawinfo-modal.is-dragging .fl-drawinfo-head { cursor: grabbing; }
.fl-drawinfo-grip { opacity: 0.6; font-size: 15px; }
.fl-drawinfo-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: #fff; flex: 1; }
.fl-drawinfo-close {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.fl-drawinfo-close:hover { background: #E63946; border-color: #E63946; }

.fl-drawinfo-body { padding: 18px 20px 22px; font-size: 14px; line-height: 1.6; }
.fl-drawinfo-body p { color: rgba(255, 255, 255, 0.92); margin: 0 0 12px; }
.fl-drawinfo-list { list-style: none; margin: 0 0 14px; padding: 0; }
.fl-drawinfo-list li {
    padding: 8px 12px;
    margin: 6px 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid #E63946;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.92);
}
.fl-drawinfo-list li strong { color: #fff; }
.fl-drawinfo-note {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.7);
    border-top: 1px dashed rgba(255, 255, 255, 0.18);
    padding-top: 12px;
}

/* DRAW PENDING — honest post-draw state with a calm pulse */
.fl-jackpot--pending .fl-jackpot-value {
    color: #EFA3A9;
    animation: fl-pending-pulse 1.8s ease-in-out infinite;
    letter-spacing: 0.02em;
}
@keyframes fl-pending-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}