/* ===== NEW LAYOUT - SEMPRE CAROUSEL TYPE 0 ===== */
/* Força o layout a sempre usar carousel em cima, independente da seleção no admin */

/* Product Section - sempre em coluna (carousel em cima) */
.rifa-v2-page .product-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    grid-template-columns: unset !important;
}

/* Purchase form - sempre largura total */
.rifa-v2-page .purchase-form {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
}

/* Carousel - sempre largura total */
.rifa-v2-page .carousel-container {
    width: calc(100% + 2rem) !important;
    max-width: none !important;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
}

/* ===== TEMA LIGHT - NEW LAYOUT ===== */

.light .rifa-v2-page {
    background-color: #f9f9f9 !important;
}

.light .rifa-v2-page .main-content {
    background-color: #f9f9f9 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.light .rifa-v2-page .container {
    background-color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Carousel no tema light */
.light .rifa-v2-page .carousel-wrapper {
    background: #fff !important;
}

/* Prize cards no tema light - background branco */
.light .rifa-v2-page .prize-card {
    background: #ffffff !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

.light .rifa-v2-page .prize-card .prize-title {
    color: #3a3a3a !important;
}

/* Prize box prizes no tema light - IGUAL aos prêmios da roleta */
.light .rifa-v2-page .pbox-prize-card {
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

.light .rifa-v2-page .pbox-prize-card .pbox-prize-title {
    color: #3a3a3a !important;
}

.light .rifa-v2-page .pbox-prize-indicator {
    background: #e1e1e1 !important;
}

.light .rifa-v2-page .pbox-prize-card.won {
    background-color: rgb(25, 135, 84) !important;
    border: none !important;
}

.light .rifa-v2-page .pbox-prize-card.won .pbox-prize-indicator {
    display: none !important;
}

.light .rifa-v2-page .pbox-prize-card.won .pbox-prize-title {
    color: #fff !important;
}

/* Títulos das seções no tema light */
.light .rifa-v2-page .section-title-container h2 {
    color: #3a3a3a !important;
}

.light .rifa-v2-page .section-subtitle {
    color: #6b7280 !important;
}

/* Ícones no tema light - cor removida, agora usa cor primária dinâmica */

/* Botões no tema light */
.light .rifa-v2-page .btn-view {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
}

.light .rifa-v2-page .btn-view:hover {
    background: #e5e7eb !important;
}

.light .rifa-v2-page .btn-buy {
    background: #28a745 !important;
    color: #fff !important;
}

.light .rifa-v2-page .btn-buy:hover {
    background: #218838 !important;
}

/* Progress bar no tema light */
.light .rifa-v2-page .progress-bar {
    background-color: #e5e7eb !important;
}

.light .rifa-v2-page .progress-text {
    color: #374151 !important;
}

/* Promoções no tema light */
.light .rifa-v2-page .promotion-btn {
    /* background removido - agora usa cor primária dinâmica */
    color: #000 !important;
}

/* Purchase form no tema light */
.light .rifa-v2-page .purchase-form {
    background: transparent !important;
    border-color: #d1d5db !important;
}

/* Remover background fixo - permitir personalização via admin */
/* .light .rifa-v2-page .quantity-display {
    background: #000 !important;
} */

/* Remover cor de texto fixa - usar a cor do tema light */
/* .light .rifa-v2-page .quantity-text,
.light .rifa-v2-page .discount-text {
    color: #fff !important;
} */

.light .rifa-v2-page .form-title {
    color: #3a3a3a !important;
}

.light .rifa-v2-page .form-subtitle {
    color: #6b7280 !important;
}

/* Combos e cards no tema light - manter gradientes originais */
.light .rifa-v2-page .combo-card {
    /* Não sobrescrever background - manter gradientes do admin */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

.light .rifa-v2-page .pbox-card {
    /* Não sobrescrever background - manter gradientes do admin */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
    height: 75px !important;
    min-height: 75px !important;
}

.light .rifa-v2-page .pbox-content {
    padding: 0.5rem 0.75rem !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.light .rifa-v2-page .pbox-header {
    align-items: flex-start !important;
    margin-bottom: 0 !important;
}

.light .rifa-v2-page .pbox-title {
    font-size: 0.9rem !important;
    font-weight: bold !important;
    color: #fff !important;
}

.light .rifa-v2-page .pbox-reward {
    background: rgba(255, 255, 255, 0.2) !important;
    padding: 0.2rem 0.6rem !important;
    border-radius: 0.375rem !important;
    color: #fff !important;
    font-size: 0.85rem !important;
}

/* Grid de números no tema light */
.light #tbl-rifa.rifa_table_container {
    background-color: #fff !important;
    border: none !important;
}

.light .manual-legends {
    background-color: transparent !important;
}

/* Remover bordas laterais dos botões Ver Meus Números e Prêmios */
.light .rifa-v2-page .btn-view,
.light .rifa-v2-page #btn-prizes-modal {
    border-left: none !important;
    border-right: none !important;
}

/* ===== TEMA DARK - NEW LAYOUT ===== */

/* Background do body no dark mode */
.dark body {
    background-color: rgb(22, 28, 36) !important;
}

/* Background da página rifa-v2 com efeitos de roleta */
.rifa-v2-page.roulette-effects-active {
    background-color: rgb(22, 28, 36) !important;
}

/* Background claro para tema light */
.light .rifa-v2-page.roulette-effects-active {
    background-color: #f9f9f9 !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Remover padding top e bottom do main-content */
.rifa-v2-page .main-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Container principal - altura fixa com flexbox */
.purchase-form-container#panel_right {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 400px !important;
    padding: 0 !important; /* Sem padding - badges encostam na borda */
}

/* Tema dark - background transparente para pegar o fundo escuro da página */
.dark .purchase-form-container#panel_right {
    background: transparent !important;
}
.dark .purchase-form-container#panel_right .box-automatic-buy {
    border-top: 1px solid #374151;
}

.dark .purchase-form-container#panel_right .box-automatic-buy,
.dark .purchase-form-container#panel_right .box-selectors {
    background: transparent !important;
}

/* Preço e Data - fixo no topo, sem espaçamento lateral */
.purchase-form-container#panel_right .prices {
    flex-shrink: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.purchase-form-container#panel_right .prices > div {
    border-radius: 0 !important;
}

/* Descrição - ocupa o espaço do meio com scroll */
.purchase-form-container#panel_right #description_right {
    flex: 1 !important;
    overflow-y: auto !important;
    margin: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    padding: 0.5rem !important;
    border-radius: 0 !important;
    min-height: 0 !important; /* Importante para o scroll funcionar */
}

.purchase-form-container#panel_right #description_right p {
    margin: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}


/* Scrollbar da descrição */
.purchase-form-container#panel_right #description_right::-webkit-scrollbar {
    width: 6px;
}

.purchase-form-container#panel_right #description_right::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.purchase-form-container#panel_right #description_right::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.dark .purchase-form-container#panel_right #description_right::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.dark .purchase-form-container#panel_right #description_right::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
}

/* Box de compra aleatória - fixo no bottom */
.purchase-form-container#panel_right .box-automatic-buy {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding: 0.75rem !important;
    padding-bottom: 0.5rem !important;
    border-radius: 0 !important;
}

.purchase-form-container#panel_right .box-automatic-buy .header {
    margin-bottom: 0.75rem !important;
}

.purchase-form-container#panel_right .box-automatic-buy .header h3 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.25rem !important;
    color: #fff !important;
}

.purchase-form-container#panel_right .box-automatic-buy .header small {
    font-size: 0.75rem !important;
    color: #d1d5db !important;
}

/* Seletores e botão comprar */
.purchase-form-container#panel_right .box-selectors {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
}

.purchase-form-container#panel_right .box-selectors .seletores {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

.purchase-form-container#panel_right .box-selectors .seletores .btn-link {
    padding: 0.25rem !important;
    font-size: 1.25rem !important;
}

.purchase-form-container#panel_right .box-selectors .seletores input {
    width: 70px !important;
    text-align: center !important;
    font-weight: bold !important;
    padding: 0.25rem 0.75rem !important;
}

.purchase-form-container#panel_right .box-selectors .btn-warning {
    padding: 0.5rem 1.25rem !important;
    font-weight: 600 !important;
}

/* Botão Esgotados - mesmo tamanho do Comprar (lado a lado com seletores) */
.purchase-form-container#panel_right .box-selectors .btn-sold-out {
    background: #dc3545 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0.25rem !important;
    padding: 0.5rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    cursor: not-allowed !important;
    text-transform: uppercase !important;
    width: auto !important;
    flex: none !important;
}

.purchase-form-container#panel_right .box-selectors .btn-sold-out i {
    font-size: 1rem !important;
}

/* ===== TEMA LIGHT - Painel direito ===== */
.light .purchase-form-container#panel_right .box-automatic-buy {
    background: transparent !important;
    border-top: 1px solid #d1d5db;
}

.light .purchase-form-container#panel_right .box-automatic-buy .header h3 {
    color: #1f2937 !important;
}

.light .purchase-form-container#panel_right .box-automatic-buy .header small {
    color: #6b7280 !important;
}

.light .purchase-form-container#panel_right .box-selectors {
    background: transparent !important;
}

.light .purchase-form-container#panel_right .box-selectors .seletores .btn-link {
    color: #1f2937 !important;
    background: transparent !important;
    border: none !important;
}

.light .box-automatic-buy .box-selectors .btn-link i {
    color: #000 !important;
}

.light .purchase-form-container#panel_right .box-selectors .seletores input {
    background: #fff !important;
    color: #1f2937 !important;
    border: 1px solid #d1d5db !important;
}

/* Legendas - container */
.manual-legends {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    background-color: #f9f9f9; /* Light mode */
}

.dark .manual-legends {
    background-color: transparent !important; /* Dark mode - cor do container */
}

/* Legendas - estilo base */
.manual-legends .rifa_number.legend {
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 12px !important;
}

/* Grid de números */
#tbl-rifa.rifa_table_container {
    padding: 20px;
    padding-bottom: 3rem;
    max-width: 600px !important;
    width: 100%;
    margin: 0 auto !important;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center; /* Centraliza o grid */
    box-sizing: border-box;
    background-color: #f9f9f9; /* Light mode */
}

.dark #tbl-rifa.rifa_table_container {
    background-color: #212b36; /* Dark mode - cor do container */
}

#tbl-rifa.rifa_table_container .rifa_number {
    margin: 0;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
}

/* Formatos de números - Square (Quadrado) */
body.square #tbl-rifa.rifa_table_container .rifa_number {
    width: 46px !important;
    height: 46px !important;
    border-radius: 3px !important;
}

/* Formatos de números - Retangle (Retangular) */
body.retangle #tbl-rifa.rifa_table_container .rifa_number {
    width: 46px !important;
    height: 36px !important;
    border-radius: 3px !important;
}

body.dark.retangle #tbl-rifa.rifa_table_container .rifa_number {
    border: none !important;
}

/* Legendas - formato padrão (circular) */
.manual-legends .rifa_number.legend {
    border-radius: 20px;
    height: 26px;
}

/* Legendas para formatos square e retangle */
body.square .manual-legends .rifa_number.legend,
body.retangle .manual-legends .rifa_number.legend {
    padding: 2px 8px !important;
    border-radius: 5px !important;
    height: auto !important;
}

/* Tooltip - centralizar texto */
.tooltip-content-flip > span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
}

/* Mensagem de seleção manual no topo - GERAL (ambos os tipos) */
.manual-selection-message {
    margin-bottom: 1rem;
}

.manual-selection-message .form-title {
    margin-bottom: 0.25rem;
}

.manual-selection-message .form-subtitle {
    margin-bottom: 0;
}

/* Purchase Form Manual - Box interno de compra automática - GERAL (ambos os tipos) */
.automatic-purchase-box {
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    padding: 1.25rem !important;
    background: transparent !important;
    margin-top: auto !important;
    margin-bottom: 0.75rem !important;
}

/* Tema dark - mesma borda do purchase-form */
.dark .automatic-purchase-box {
    border-color: #374151 !important;
}

/* Type 1 (ao lado): Layout padrão vertical */
.purchase-form:not(.purchase-form-type-0) .automatic-purchase-box {
    display: flex;
    flex-direction: column;
}

.purchase-form:not(.purchase-form-type-0) .automatic-right {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.purchase-form:not(.purchase-form-type-0) .controls-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    align-items: center;
    padding-top: 0.5rem;
}

/* Type 1: Centralizar controles de quantidade */
.purchase-form:not(.purchase-form-type-0) .quantity-controls {
    display: flex;
    justify-content: center;
}

/* Type 1: Botão COMPRAR ocupa 100% da largura */
.purchase-form:not(.purchase-form-type-0) .controls-row #btn-automatic-buy {
    width: 100%;
}

.purchase-form:not(.purchase-form-type-0) .controls-row .btn-buy {
    width: 100%;
    justify-content: center;
}

/* Type 1: Espaçamento no topo da mensagem "Escolha seus Números" */
.purchase-form:not(.purchase-form-type-0) .manual-selection-message {
    margin-top: 1.5rem;
    flex-shrink: 0;
}

/* Type 1: Box de compra automática empurrado para o final */
.purchase-form:not(.purchase-form-type-0) .automatic-purchase-box {
    margin-top: auto;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

/* Type 1: Diminuir textos de Compra Automática (igual ao Type 0) */
.purchase-form:not(.purchase-form-type-0) .automatic-purchase-box .automatic-left .form-title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

.purchase-form:not(.purchase-form-type-0) .automatic-purchase-box .automatic-left .form-subtitle {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
}

/* Type 1: Sobrescrever para tema dark */
body.dark .purchase-form:not(.purchase-form-type-0) .automatic-purchase-box .automatic-left .form-title {
    font-size: 0.95rem !important;
}

body.dark .purchase-form:not(.purchase-form-type-0) .automatic-purchase-box .automatic-left .form-subtitle {
    font-size: 0.75rem !important;
}

/* Botão Ver Meus Números no fundo */
.btn-view-bottom {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
}

/* Form content com flexbox para empurrar box e botão para o fundo */
.purchase-form-container .form-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding-bottom: 1.5rem !important;
}

/* Permitir que o purchase-form cresça quando necessário (quando tem date-lottery-header) */
@media (min-width: 768px) {
    .purchase-form-container:has(.date-lottery-header:not(.hidden)) {
        height: auto !important;
        min-height: 536px !important;
    }
    
    .purchase-form:has(.date-lottery-header:not(.hidden)) {
        height: auto !important;
        min-height: 536px !important;
    }
}

/* ===== AJUSTES PARA TYPE 0 (CAROUSEL EMBAIXO) ===== */

/* Type 0: Layout horizontal mais compacto */
.purchase-form-type-0 .form-content {
    min-height: auto !important;
    padding: 1.5rem !important;
    display: block !important;
}

/* Type 0: Mensagem manual centralizada e compacta */
.purchase-form-type-0 .manual-selection-message {
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Type 0: Box de compra automática - layout em linha única */
.purchase-form-type-0 .automatic-purchase-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2rem !important;
    padding: 1.25rem 2.5rem !important;
    margin-bottom: 1rem !important;
}

/* Type 0: Coluna esquerda (textos) - 50% da largura */
.purchase-form-type-0 .automatic-purchase-box .automatic-left {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-right: 1rem;
}

/* Type 0: Coluna direita (controles) - 50% da largura, alinhado à esquerda */
.purchase-form-type-0 .automatic-purchase-box .automatic-right {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-right: 0;
}

/* Type 0: Títulos alinhados à esquerda - seletores específicos */
.purchase-form-type-0 .automatic-purchase-box .automatic-left .form-title {
    text-align: left !important;
    font-size: 0.95rem !important;
    margin-top: 0 !important;
    margin-bottom: 0.25rem !important;
    font-weight: 600 !important;
}

.purchase-form-type-0 .automatic-purchase-box .automatic-left .form-subtitle {
    text-align: left !important;
    font-size: 0.75rem !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
}

/* Sobrescrever regras do rifa-automate-dark.css */
body.dark .purchase-form-type-0 .automatic-purchase-box .automatic-left .form-title {
    font-size: 0.95rem !important;
}

body.dark .purchase-form-type-0 .automatic-purchase-box .automatic-left .form-subtitle {
    font-size: 0.75rem !important;
}

/* Type 0: Quantity text */
.purchase-form-type-0 .quantity-text {
    font-size: 0.875rem;
    white-space: nowrap;
    margin-bottom: 0.5rem;
}

/* Type 0: Controls row - layout horizontal */
.purchase-form-type-0 .controls-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.purchase-form-type-0 .quantity-controls {
    flex-shrink: 0;
}

/* Type 0: Botão comprar ao lado dos controles */
.purchase-form-type-0 .controls-row #btn-automatic-buy {
    flex: 1;
}

.purchase-form-type-0 .controls-row .btn-buy {
    width: 100%;
    font-size: 0.875rem !important;
    height: 40px !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
    justify-content: center !important;
}

.purchase-form-type-0 .controls-row .btn-buy .btn-content {
    margin: 0 auto;
}

/* Type 0: Esconder botão Ver Meus Números */
.purchase-form-type-0 .btn-view-bottom {
    display: none !important;
}

/* Responsivo: Mobile volta para layout vertical */
@media (max-width: 768px) {
    /* Remover margin-top do panel_right no mobile */
    #panel_right, #description_right {
        margin-top: 0 !important;
    }
    
    /* Box em coluna vertical */
    .purchase-form-type-0 .automatic-purchase-box {
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 1.25rem 1.5rem !important;
    }
    
    /* Colunas ocupam 100% */
    .purchase-form-type-0 .automatic-purchase-box .automatic-left,
    .purchase-form-type-0 .automatic-purchase-box .automatic-right {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Textos centralizados no mobile */
    .purchase-form-type-0 .automatic-purchase-box .automatic-left .form-title,
    .purchase-form-type-0 .automatic-purchase-box .automatic-left .form-subtitle {
        text-align: center !important;
    }
    
    /* Controls row em coluna no mobile */
    .purchase-form-type-0 .controls-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Botão comprar ocupa 100% no mobile */
    .purchase-form-type-0 .controls-row #btn-automatic-buy {
        width: 100%;
    }
    
    .purchase-form-type-0 .controls-row .btn-buy {
        width: 100% !important;
    }
}

.tooltip-back {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 8px !important;
}

/* `box_cart - sticky shopping cart at bottom */
.box_cart {
    min-height: 70px;
    z-index: 999999 !important;
    padding: 1rem 1.5rem;
    position: sticky;
    bottom: 0;
    margin-bottom: 4rem;
    background-color: #fff;
    border-top: 2px solid #d1d5db;
    border-bottom: 2px solid #d1d5db;
    color: #000;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Espaçamento abaixo da barra - removido */
.box_cart + * {
    margin-top: 0 !important;
}

.box_cart .cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    gap: 1rem;
}

.box_cart .cart .cart-numbers {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-right: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 90px;
    flex: 0 0 auto;
}

/* Scrollbar tema light */
.box_cart .cart .cart-numbers::-webkit-scrollbar {
    width: 8px;
}

.box_cart .cart .cart-numbers::-webkit-scrollbar-track {
    background: #e5e7eb;
    border-radius: 4px;
}

.box_cart .cart .cart-numbers::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 4px;
}

.box_cart .cart .cart-numbers::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

.box_cart .cart .cart-numbers span {
    margin: 3px 3px 3px 0px;
    padding: 2px 6px;
    border: 1px solid #000000;
    border-radius: 3px;
    background-color: #fff;
    color: #000;
    display: inline-block;
    font-weight: 500;
    font-size: 11px;
}

.box_cart .cart .cart-numbers span i {
    cursor: pointer;
    margin-left: 5px;
}

.box_cart .cart .cart-total {
    text-align: center;
    flex: 1;
    padding: 0 0.5rem;
    font-size: 13px;
}

.box_cart .cart .cart-qtd {
    margin-bottom: 0.25rem;
}

.box_cart .cart .cart-qtd small {
    font-size: 11px;
}

.box_cart .cart .cart-promotional .total small {
    font-size: 11px;
}

.box_cart .cart .cart-btn {
    text-align: right;
    padding: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Botão Comprar do carrinho - estilo padronizado */
.box_cart .cart .cart-btn .btn.reserved {
    background: #28a745 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0.375rem !important;
    height: 31px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    transition: background-color 0.3s !important;
    padding: 0 1rem !important;
    white-space: nowrap !important;
}

.box_cart .cart .cart-btn .btn.reserved:hover {
    background: #218838 !important;
}

.box_cart .cart .cart-promotional .from span {
    text-decoration: line-through
}

.box_cart .cart .cart-promotional .total span {
    font-size: 1.2rem;
    font-weight: bold;
}

.box_cart.hidden {
    display: none !important;
}

/* Tema dark */
.tpl-dark .box_cart,
.dark .box_cart {
    background-color: #111827 !important;
    border-top: 2px solid #374151 !important;
    border-bottom: 2px solid #374151 !important;
}

.dark .box_cart .cart .cart-numbers span {
    background-color: #2a2a2a !important;
    color: #fff !important;
    border-color: #444 !important;
}

.dark .box_cart .cart-qtd,
.dark .box_cart .cart-qtd span,
.dark .box_cart .cart-qtd small,
.dark .box_cart .cart-promotional,
.dark .box_cart .cart-promotional small,
.dark .box_cart .cart-promotional span {
    color: #fff !important;
}

.tpl-dark .box_cart .cart-qtd,
.tpl-dark .box_cart .cart-qtd span,
.tpl-dark .box_cart .cart-qtd small,
.tpl-dark .box_cart .cart-promotional,
.tpl-dark .box_cart .cart-promotional small,
.tpl-dark .box_cart .cart-promotional span {
    color: #fff !important;
}

/* Scrollbar tema dark */
.dark .box_cart .cart .cart-numbers::-webkit-scrollbar,
.tpl-dark .box_cart .cart .cart-numbers::-webkit-scrollbar {
    width: 8px;
}

.dark .box_cart .cart .cart-numbers::-webkit-scrollbar-track,
.tpl-dark .box_cart .cart .cart-numbers::-webkit-scrollbar-track {
    background: #374151;
    border-radius: 4px;
}

.dark .box_cart .cart .cart-numbers::-webkit-scrollbar-thumb,
.tpl-dark .box_cart .cart .cart-numbers::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 4px;
}

.dark .box_cart .cart .cart-numbers::-webkit-scrollbar-thumb:hover,
.tpl-dark .box_cart .cart .cart-numbers::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}

/* Mobile responsivo */
@media only screen and (max-width: 480px) {
    .box_cart .cart .cart-numbers {
        border-bottom: 1px solid #CCC;
        max-height: 95px;
    }
    
    .box_cart .cart .cart-total {
        margin-bottom: 10px;
    }
    
    .box_cart {
        padding: 1rem 1.5rem !important;
    }
}

/* FORÇA MÁXIMA - Garantir que a barra fique por cima de TUDO */
.rifa-v2-page .box_cart,
.box_cart {
    z-index: 999 !important;
    position: sticky !important;
    bottom: 0 !important;
    background-color: #fff !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0 !important;
    right: 0 !important;
}

.dark .box_cart,
.tpl-dark .box_cart {
    background-color: #111827 !important;
    border-top: 2px solid #374151 !important;
    border-bottom: 2px solid #374151 !important;
}

/* Garantir texto branco no dark */
.dark .box_cart *,
.tpl-dark .box_cart * {
    color: #fff !important;
}

.dark .box_cart .cart .cart-numbers span,
.tpl-dark .box_cart .cart .cart-numbers span {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
}

/* Prize Boxes Section - Sobrescrever espaçamento do rifa-manual-v2.css para templates 3/4 */
.pboxes-section {
  margin-bottom: 0 !important;
}

/* ===== AJUSTE DE ALINHAMENTO DOS COMBOS - LIGHT ===== */
/* Combos da Roleta - alinhamento correto */
.light .combo-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

.light .combo-info {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
}

.light .combo-reward {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

/* Combos das Caixas Premiadas - alinhamento correto */
.light .pbox-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
}

.light .pbox-info {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
}

.light .pbox-reward {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

/* ===== AJUSTE DE ALINHAMENTO DOS COMBOS - DARK ===== */
/* Combos da Roleta - alinhamento correto */
.dark .combo-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

.dark .combo-info {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
}

.dark .combo-reward {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

/* Combos das Caixas Premiadas - alinhamento correto */
.dark .pbox-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
}

.dark .pbox-info {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
}

.dark .pbox-reward {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

/* Dark - Ajustes específicos para pbox-content */
.dark .rifa-v2-page .pbox-content {
  justify-content: flex-start !important;
  align-items: stretch !important;
}

.dark .rifa-v2-page .pbox-header {
  align-items: flex-start !important;
  margin-bottom: 0 !important;
}

/* Prize Box Prizes Section - CSS específico para não conflitar com roleta */
.pbox-prizes-section {
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.pbox-prizes-column {
  width: 100%;
}

.rifa-v2-page .pbox-prizes-container {
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.5rem !important;
}

.pbox-prizes-list {
  max-height: 320px;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
  padding-right: 0.5rem;
}

.pbox-prizes-list.expanded {
  max-height: none;
  overflow: visible;
}

/* ===== PRIZE CARDS - NEW LAYOUT ===== */
/* Sobrescreve estilos dos arquivos rifa-v2-dark.css e rifa-v2-light.css */

/* Prize Cards da Roleta - disponíveis com background #374151 */
.rifa-v2-page .prize-card {
  position: relative !important;
  background: #374151 !important;
  border: none !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  margin-bottom: 0.6rem !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 40px !important;
  max-height: 40px !important;
}

.rifa-v2-page .prize-card.won {
  background-color: rgb(25, 135, 84) !important;
  border: none !important;
}

.rifa-v2-page .prize-header {
  padding: 0.5rem 0.75rem !important;
  min-height: 40px !important;
  max-height: 40px !important;
  display: flex !important;
  align-items: center !important;
}

.rifa-v2-page .prize-title {
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
}

/* Prize Box Prize Cards - IGUAL aos prêmios da roleta */
.rifa-v2-page .pbox-prize-card {
  position: relative !important;
  background: #374151 !important;
  border: none !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  margin-bottom: 0.6rem !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 40px !important;
  max-height: 40px !important;
}

.rifa-v2-page .pbox-prize-indicator {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 5px !important;
  height: 100% !important;
  background: #328ee6 !important;
}

/* Prêmio já sorteado - fundo verde SEM barra verde */
.rifa-v2-page .pbox-prize-card.won {
  background-color: rgb(25, 135, 84) !important;
  border: none !important;
}

.rifa-v2-page .pbox-prize-card.won .pbox-prize-indicator {
  display: none !important;
}

.rifa-v2-page .pbox-prize-card.won .pbox-prize-title {
  color: #fff !important;
}

.rifa-v2-page .pbox-prize-header {
  padding: 0.5rem 0.75rem !important;
  padding-left: 1rem !important;
  min-height: 40px !important;
  max-height: 40px !important;
  display: flex !important;
  align-items: center !important;
}

.rifa-v2-page .pbox-prize-title {
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
}


.pbox-prize-content {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.pbox-prize-title {
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
  flex: 1;
}

/* Nome do ganhador nos prêmios das caixas - sem fundo verde, só texto branco com troféu */
.pbox-prize-winner-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  min-width: 80px;
  text-align: center;
  height: 28px;
  box-sizing: border-box;
  background: transparent;
  color: #fff;
}