/* ===================================================
   CSS PERSONALIZADO DA LOJA
   Gerado dinamicamente em 2026-03-12 02:03:24   =================================================== */

:root {
    /* Cores principais */
    --loja-primary: #591a78;
    --loja-primary-dark: #4b1666;
    /*primary color versão transparente*/
    --loja-primary-transparent: #591a7880;
    --loja-secondary: #f6ce04;
    --loja-secondary-dark: #d1af03;
    --loja-text: #f5f5f5;
    
    /* Cores de texto acessíveis (calculadas automaticamente) */
    --loja-text-on-primary: #ffffff;
    --loja-text-on-secondary: #212529;
    --loja-text-on-primary-dark: #ffffff;
}

/* ===== Botões ===== */
.btn-primary {
    background-color: var(--loja-primary) !important;
    border-color: var(--loja-primary) !important;
    color: var(--loja-text-on-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--loja-primary-dark) !important;
    border-color: var(--loja-primary-dark) !important;
    color: var(--loja-text-on-primary-dark) !important;
}

.btn-secondary {
    background-color: var(--loja-secondary) !important;
    border-color: var(--loja-secondary) !important;
    color: var(--loja-text-on-secondary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--loja-secondary-dark) !important;
    border-color: var(--loja-secondary-dark) !important;
}

/* ===== Backgrounds ===== */
.bg-primary {
    background-color: var(--loja-primary) !important;
}

.bg-secondary {
    background-color: var(--loja-secondary) !important;
}

/* ===== Textos ===== */
.text-primary {
    color: var(--loja-primary) !important;
}

.text-secondary {
    color: var(--loja-secondary) !important;
}

/* ===== Links ===== */
a.text-primary:hover,
a.text-primary:focus {
    color: var(--loja-primary-dark) !important;
}

/* ===== Navbar ===== */
.navbar-giftu {
    background: linear-gradient(135deg, var(--loja-primary) 0%, var(--loja-primary-dark) 100%) !important;
}

.navbar-brand {
    color: var(--loja-text-on-primary) !important;
}

/* ===== Footer ===== */
.footer-section h5,
.footer-section .fw-bold {
    color: var(--loja-primary) !important;
}

.social-link:hover {
    background-color: var(--loja-primary) !important;
    color: #fff !important;
}

/* ===== Badges ===== */
.badge-primary {
    background-color: var(--loja-primary) !important;
    color: var(--loja-text-on-primary) !important;
}

/* ===== Borders ===== */
.border-primary {
    border-color: var(--loja-primary) !important;
}

/* ===== Cards ===== */
.card-primary .card-header {
    background-color: var(--loja-primary) !important;
    border-color: var(--loja-primary) !important;
    color: var(--loja-text-on-primary) !important;
}

/* ===== Dropdowns ===== */
.dropdown-item:hover,
.dropdown-item:focus {
    border-left: 2px solid var(--loja-primary) !important;
    color: var(--loja-text-on-primary) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--loja-primary) !important;
    color: var(--loja-text-on-primary) !important;
}

/* Dropdown de categorias */
.categories-dropdown-menu .dropdown-item:hover,
.categories-dropdown-menu .dropdown-item:focus {
    border-left: 2px solid var(--loja-primary) !important;
    color: var(--loja-text-on-primary) !important;
}

/* ===== Forms ===== */
.form-control:focus {
    border-color: var(--loja-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(89, 26, 120, 0.25) !important;
}

/* ===== Paginação ===== */
.page-link {
    color: var(--loja-primary) !important;
}

.page-link:hover {
    color: var(--loja-primary-dark) !important;
}

.page-item.active .page-link {
    background-color: var(--loja-primary) !important;
    border-color: var(--loja-primary) !important;
    color: var(--loja-text-on-primary) !important;
}

/* ===== AdminLTE Sidebar (para admin) ===== */
.main-sidebar {
    background-color: var(--loja-primary) !important;
}

.main-sidebar .brand-link,
.main-sidebar .nav-link,
.main-sidebar .user-panel .info a {
    color: var(--loja-text-on-primary) !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--loja-primary-dark) !important;
    color: var(--loja-text-on-primary-dark) !important;
}

.brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Garantir alinhamento correto do brand-image */
.brand-link .brand-image {
    float: left;
    line-height: 0.8;
    margin-left: 0.8rem;
    margin-right: 0.5rem;
    margin-top: -3px;
    max-height: 33px;
    width: auto;
}

/* Alinhamento dos ícones do menu sidebar */
.nav-sidebar .nav-icon {
    margin-left: 0;
    font-size: 1.2rem;
    margin-right: 0.2rem;
    text-align: center;
    width: 1.6rem;
}

/* Alinhamento dos itens do menu */
.nav-sidebar > .nav-item {
    margin-bottom: 0;
}

.nav-sidebar .nav-link {
    padding: 0.5rem 0.5rem 0.5rem 1rem;
}

.nav-sidebar .nav-link > .nav-icon {
    margin-left: 0;
    margin-right: 0.2rem;
}

/* Header do menu (CONFIGURAÇÕES) */
.nav-sidebar .nav-header {
    font-size: 0.9rem;
    padding: 1.5rem 1rem 0.5rem 1rem;
}

/* User panel na sidebar */
.user-panel {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.user-panel .image {
    padding-left: 0.8rem;
}

.user-panel .info {
    padding: 5px 5px 5px 10px;
}

/* ===== Hover Effects ===== */
.product-card:hover {
    border-color: var(--loja-primary) !important;
}

.category-card:hover {
    background-color: var(--loja-primary) !important;
    color: var(--loja-text-on-primary) !important;
}

/* ===== Alerts ===== */
.alert-primary {
    background-color: rgba(89, 26, 120, 0.1) !important;
    border-color: var(--loja-primary) !important;
    color: var(--loja-primary) !important;
}

/* ===== Progress Bars ===== */
.progress-bar {
    background-color: var(--loja-primary) !important;
    color: var(--loja-text-on-primary) !important;
}

/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar-thumb {
    background-color: var(--loja-primary) !important;
}

/* ===== Responsividade ===== */
@media (max-width: 768px) {
    .navbar-giftu {
        padding: 0.5rem 1rem;
    }
}