/* ========================================
   CAIXA LOTERIAS STYLE - Mega-Sena
   Based on official Caixa Loterias design
   ======================================== */

/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

/* === COLOR PALETTE === */
:root {
    --caixa-blue: #005ca8;
    --caixa-blue-dark: #004a8c;
    --caixa-orange: #f7941d;
    --caixa-teal: #2a9d8f;
    --caixa-teal-dark: #238a7d;
    --caixa-green: #209869;
    --caixa-gray: #c4c4c4;
    --caixa-gray-light: #f5f5f5;
    --caixa-text: #333;
    --caixa-text-light: #666;
}

/* === AGE VERIFICATION MODAL === */
.age-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--caixa-blue);
    z-index: 10000;
    display: none;
    /* Start hidden, show with JS */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.age-modal.show {
    display: flex;
    opacity: 1;
}

.age-modal.hiding {
    opacity: 0;
}

.age-modal-content {
    text-align: center;
    padding: 40px;
}

.age-modal-logo {
    margin-bottom: 30px;
}

.age-modal-logo svg {
    width: 50px;
    height: 50px;
}

.age-modal-title {
    font-family: 'Roboto', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    color: white;
    margin-bottom: 40px;
    letter-spacing: 0.5px;
}

.age-modal-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.age-btn {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    padding: 12px 40px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

.age-btn-no {
    background: transparent;
    color: var(--caixa-gray);
    border: 2px solid var(--caixa-gray);
}

.age-btn-no:hover {
    background: rgba(255, 255, 255, 0.1);
}

.age-btn-yes {
    background: var(--caixa-orange);
    color: white;
    border: 2px solid var(--caixa-orange);
}

.age-btn-yes:hover {
    background: #e8850f;
    border-color: #e8850f;
}

/* === INSTRUCTION TEXT === */
.bet-instructions {
    margin-bottom: 20px;
    padding: 20px 20px 15px 20px;
    background: white;
    border-radius: 12px;
}

.bet-instructions h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--caixa-blue);
    margin-bottom: 12px;
}

.bet-instructions p {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    color: var(--caixa-text-light);
    line-height: 1.5;
    margin-bottom: 8px;
}

.bet-instructions .highlight {
    color: var(--caixa-blue);
    font-weight: 500;
}

/* === NUMBER GRID (VOLANTE) === */
.numbers-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    padding: 15px;
    background: white;
    border-radius: 8px;
    margin-bottom: 15px;
}

@media (max-width: 500px) {
    .numbers-grid {
        grid-template-columns: repeat(8, 1fr);
        gap: 6px;
        padding: 12px;
        margin-left: 0;
        margin-right: 0;
    }

    .step-card .numbers-section {
        padding: 0 10px;
    }

    .step-card .card-body {
        padding: 10px !important;
    }

    .bet-instructions {
        margin: 0 0 15px 0;
        padding: 15px;
    }
}

@media (max-width: 360px) {
    .numbers-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 5px;
        padding: 10px;
    }
}

.number-ball {
    width: 100%;
    aspect-ratio: 1;
    max-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: white;
    background: var(--caixa-gray);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    outline: none;
    user-select: none;
}

.number-ball:hover:not(.selected) {
    background: #b0b0b0;
    transform: scale(1.05);
}

.number-ball.selected {
    background: var(--caixa-green);
    box-shadow: 0 2px 8px rgba(32, 152, 105, 0.4);
}

/* === SELECTED NUMBERS DISPLAY === */
.selected-numbers-display {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 15px;
    background: white;
    border-top: 1px solid #eee;
    min-height: 50px;
}

.selected-number-pill {
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--caixa-green);
    padding: 5px 10px;
}

/* === ACTION BUTTONS (Complete o Jogo / Limpar Volante) === */
.volante-actions {
    display: flex;
    gap: 15px;
    padding: 15px;
    justify-content: center;
}

.btn-complete-jogo {
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 12px 25px;
    background: var(--caixa-teal);
    color: white;
    border: 2px solid var(--caixa-teal);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-complete-jogo:hover {
    background: var(--caixa-teal-dark);
    border-color: var(--caixa-teal-dark);
}

.btn-limpar-volante {
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 12px 25px;
    background: white;
    color: var(--caixa-text-light);
    border: 2px solid var(--caixa-gray);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-limpar-volante:hover {
    background: var(--caixa-gray-light);
}

/* === SURPRESINHA BOX === */
.surpresinha-box {
    background: var(--caixa-gray-light);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.surpresinha-box p {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    color: var(--caixa-text-light);
    margin-bottom: 15px;
}

.btn-surpresinha {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 12px 30px;
    background: white;
    color: var(--caixa-teal);
    border: 2px solid var(--caixa-teal);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-surpresinha:hover {
    background: rgba(42, 157, 143, 0.1);
}

.btn-surpresinha .icon {
    font-size: 1.2rem;
}

/* === APOSTAS RECENTES (Cart Summary) === */
.apostas-recentes {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.apostas-recentes h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--caixa-blue);
    margin-bottom: 8px;
}

.apostas-recentes .subtitle {
    font-size: 0.85rem;
    color: var(--caixa-text-light);
    margin-bottom: 15px;
}

.apostas-recentes .subtitle .highlight {
    color: var(--caixa-green);
}

.aposta-item {
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
}

.aposta-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background: var(--caixa-green);
    color: white;
}

.aposta-item-header .game-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: lowercase;
}

.aposta-item-header .delete-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.8;
}

.aposta-item-header .delete-btn:hover {
    opacity: 1;
}

.aposta-item-body {
    padding: 15px;
}

.aposta-item-body .label {
    font-size: 0.8rem;
    color: var(--caixa-text-light);
    margin-bottom: 8px;
}

.aposta-item-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 15px;
}

.aposta-item-numbers .number {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--caixa-green);
}

.aposta-item-info {
    font-size: 0.85rem;
    color: var(--caixa-text-light);
}

.aposta-item-info strong {
    color: var(--caixa-text);
}

/* === TOTAL AND PAYMENT BUTTON === */
.total-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.total-label {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--caixa-text);
}

.total-value {
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--caixa-blue);
}

.btn-ir-pagamento {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 15px;
    background: var(--caixa-blue);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-ir-pagamento:hover {
    background: var(--caixa-blue-dark);
}

.btn-ir-pagamento .icon {
    font-size: 1.2rem;
}

/* === OVERRIDE EXISTING STYLES === */

/* Make existing .btn-surprise match Complete o Jogo style */
#btn-surprise,
.btn-surprise {
    background: var(--caixa-teal) !important;
    color: white !important;
    border: 2px solid var(--caixa-teal) !important;
    border-radius: 6px !important;
    font-family: 'Roboto', sans-serif !important;
}

#btn-surprise:hover,
.btn-surprise:hover {
    background: var(--caixa-teal-dark) !important;
    border-color: var(--caixa-teal-dark) !important;
}

/* Override number buttons in existing grid */
.step-card .number,
.step-card .number-btn {
    background: var(--caixa-gray) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    font-family: 'Roboto', sans-serif !important;
}

.step-card .number.selected,
.step-card .number-btn.selected {
    background: var(--caixa-green) !important;
    box-shadow: 0 2px 8px rgba(32, 152, 105, 0.4) !important;
}

/* Primary buttons - Blue Caixa style */
.btn-primary {
    background: var(--caixa-blue) !important;
    border-color: var(--caixa-blue) !important;
    border-radius: 6px !important;
    font-family: 'Roboto', sans-serif !important;
}

.btn-primary:hover {
    background: var(--caixa-blue-dark) !important;
    border-color: var(--caixa-blue-dark) !important;
}

/* ========================================
   CAIXA BOLÃO SCREEN - Gradient Style
   ======================================== */

.caixa-screen {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

.caixa-gradient-bg {
    min-height: 100vh;
    background: linear-gradient(135deg, #2a9d8f 0%, #006994 50%, #004a8c 100%);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Back button */
.caixa-back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 10px 18px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.caixa-back-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Main white card */
.caixa-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 500px;
    margin-top: 60px;
    overflow: hidden;
}

/* Card header with logo */
.caixa-card-header {
    text-align: center;
    padding: 30px 20px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.caixa-card-logo {
    height: 45px;
    margin-bottom: 15px;
}

.caixa-card-title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--caixa-blue);
    margin-bottom: 5px;
}

.caixa-card-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    color: var(--caixa-green);
    font-weight: 500;
}

/* Packages container */
.caixa-packages {
    padding: 15px;
    max-height: 400px;
    overflow-y: auto;
}

/* Individual package */
.caixa-package {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.caixa-package:hover {
    border-color: var(--caixa-green);
    box-shadow: 0 2px 8px rgba(32, 152, 105, 0.15);
}

/* Mega-Sena green header bar */
.mega-sena-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--caixa-green);
    padding: 10px 15px;
}

.mega-sena-header .clover-icon {
    width: 22px;
    height: 22px;
    color: white;
    flex-shrink: 0;
}

.mega-sena-header .mega-sena-text {
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: white;
    text-transform: lowercase;
    letter-spacing: 0.5px;
}

.caixa-package-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
}

.caixa-package-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.caixa-package-name {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--caixa-text);
}

.caixa-package-details {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    color: var(--caixa-text-light);
}

.caixa-package-price {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--caixa-green);
}

/* Package actions row */
.caixa-package-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: white;
    border-top: 1px solid #e9ecef;
}

/* Quantity control */
.caixa-qty-control {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--caixa-blue);
    border-radius: 8px;
    overflow: hidden;
}

.caixa-qty-btn {
    width: 35px;
    height: 35px;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.caixa-qty-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.caixa-qty-value {
    width: 45px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    background: transparent;
}

/* Toggle numbers button */
.caixa-toggle-numbers {
    background: none;
    border: none;
    color: var(--caixa-teal);
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    padding: 5px 10px;
}

.caixa-toggle-numbers:hover {
    text-decoration: underline;
}

/* Numbers list */
.caixa-numbers-list {
    background: #f0f4f8;
    padding: 12px 15px;
    border-top: 1px solid #e9ecef;
}

.caixa-number-row {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.75rem;
    color: var(--caixa-text-light);
    padding: 4px 0;
    word-break: break-all;
}

/* Card footer */
.caixa-card-footer {
    padding: 20px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}

.caixa-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.caixa-total-label {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: var(--caixa-text-light);
}

.caixa-total-value {
    font-family: 'Roboto', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--caixa-blue);
}

.caixa-btn-primary {
    width: 100%;
    padding: 15px;
    background: var(--caixa-orange);
    border: none;
    border-radius: 8px;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.caixa-btn-primary:hover {
    background: #e8850f;
    transform: translateY(-1px);
}

/* Mobile responsive for bolão */
@media (max-width: 520px) {
    .caixa-gradient-bg {
        padding: 15px;
    }

    .caixa-card {
        margin-top: 50px;
        border-radius: 12px;
    }

    .caixa-back-btn {
        top: 15px;
        left: 15px;
        padding: 8px 14px;
        font-size: 0.85rem;
    }

    .caixa-packages {
        padding: 12px;
        max-height: 350px;
    }

    .caixa-package-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .caixa-package-price {
        font-size: 1.1rem;
    }

    .caixa-package-actions {
        flex-wrap: wrap;
        gap: 10px;
    }

    .caixa-card-header {
        padding: 25px 15px 15px;
    }

    .caixa-card-logo {
        height: 38px;
    }
}

/* Hide old bolão styles when using new structure */
#step-1b.caixa-screen .bolao-header,
#step-1b.caixa-screen .bolao-footer,
#step-1b.caixa-screen .package-card {
    display: none;
}