/**
 * Sistema Global de Scrollbars Minimalistas
 * Aplicado em todo o sistema (loja, modais, containers)
 */

/* ==========================================
   SCROLLBAR GLOBAL PADRÃO (Fundo Claro)
   ========================================== */

/* Scrollbar padrão para todo o site */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* ==========================================
   SCROLLBAR PARA FUNDOS ESCUROS
   ========================================== */

/* Elementos com fundos escuros precisam scrollbar clara */
.dark-background,
.shabbat-modal-content,
.shabbat-body,
#bloco-cartao,
.components-modal-content.dark-mode,
[data-theme="dark"] {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.6) transparent;
}

.dark-background::-webkit-scrollbar,
.shabbat-modal-content::-webkit-scrollbar,
.shabbat-body::-webkit-scrollbar,
#bloco-cartao::-webkit-scrollbar,
.components-modal-content.dark-mode::-webkit-scrollbar,
[data-theme="dark"]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.dark-background::-webkit-scrollbar-track,
.shabbat-modal-content::-webkit-scrollbar-track,
.shabbat-body::-webkit-scrollbar-track,
#bloco-cartao::-webkit-scrollbar-track,
.components-modal-content.dark-mode::-webkit-scrollbar-track,
[data-theme="dark"]::-webkit-scrollbar-track {
    background: transparent;
}

.dark-background::-webkit-scrollbar-thumb,
.shabbat-modal-content::-webkit-scrollbar-thumb,
.shabbat-body::-webkit-scrollbar-thumb,
#bloco-cartao::-webkit-scrollbar-thumb,
.components-modal-content.dark-mode::-webkit-scrollbar-thumb,
[data-theme="dark"]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
}

.dark-background::-webkit-scrollbar-thumb:hover,
.shabbat-modal-content::-webkit-scrollbar-thumb:hover,
.shabbat-body::-webkit-scrollbar-thumb:hover,
#bloco-cartao::-webkit-scrollbar-thumb:hover,
.components-modal-content.dark-mode::-webkit-scrollbar-thumb:hover,
[data-theme="dark"]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* ==========================================
   MODAL PIX (Fundo Claro)
   ========================================== */

.pix-modal-content,
.pix-modal-body {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}

.pix-modal-content::-webkit-scrollbar,
.pix-modal-body::-webkit-scrollbar {
    width: 6px;
}

.pix-modal-content::-webkit-scrollbar-track,
.pix-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.pix-modal-content::-webkit-scrollbar-thumb,
.pix-modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

.pix-modal-content::-webkit-scrollbar-thumb:hover,
.pix-modal-body::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* ==========================================
   MODAL DE COMPONENTES (Fundo Claro)
   ========================================== */

.components-modal-body {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}

.components-modal-body::-webkit-scrollbar {
    width: 6px;
}

.components-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.components-modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

.components-modal-body::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* ==========================================
   MODAL DE CUPOM (Fundo Claro)
   ========================================== */

.coupon-modal-content,
.coupon-modal-body {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}

.coupon-modal-content::-webkit-scrollbar,
.coupon-modal-body::-webkit-scrollbar {
    width: 6px;
}

.coupon-modal-content::-webkit-scrollbar-track,
.coupon-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.coupon-modal-content::-webkit-scrollbar-thumb,
.coupon-modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

.coupon-modal-content::-webkit-scrollbar-thumb:hover,
.coupon-modal-body::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* ==========================================
   RESPONSIVIDADE MOBILE
   ========================================== */

@media (max-width: 768px) {
    /* Scrollbars um pouco menores no mobile */
    *::-webkit-scrollbar,
    .components-modal-body::-webkit-scrollbar,
    .pix-modal-content::-webkit-scrollbar,
    .coupon-modal-content::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
    
    .dark-background::-webkit-scrollbar,
    .shabbat-modal-content::-webkit-scrollbar,
    .shabbat-body::-webkit-scrollbar,
    #bloco-cartao::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}

/* ==========================================
   CONTAINERS ESPECÍFICOS DA LOJA
   ========================================== */

/* Dropdown customizado */
.dropdown-options {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}

.dropdown-options::-webkit-scrollbar {
    width: 6px;
}

.dropdown-options::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-options::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

.dropdown-options::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Container de frete */
.freight-options-container,
.opcoes-frete {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}

.freight-options-container::-webkit-scrollbar,
.opcoes-frete::-webkit-scrollbar {
    width: 6px;
}

.freight-options-container::-webkit-scrollbar-track,
.opcoes-frete::-webkit-scrollbar-track {
    background: transparent;
}

.freight-options-container::-webkit-scrollbar-thumb,
.opcoes-frete::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

.freight-options-container::-webkit-scrollbar-thumb:hover,
.opcoes-frete::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}
