/* ========================================================
   THEME MÁGICA & ILUSIONISMO - IDENTIDADE AZUL CLEAN
   Design limpo, moderno, sofisticado e centralizado
   ======================================================== */

:root {
    --theme-magic-dark: #091b29;
    --theme-magic-surface: #0c2d4a;
    --theme-magic-primary: #0284c7;
    --theme-magic-primary-hover: #0369a1;
    --theme-magic-accent: #0ea5e9;
    --theme-magic-accent-light: #38bdf8;
    --theme-magic-blue-light: #e0f2fe;
    --theme-magic-border: #bae6fd;
}

body.theme-magica {
    background-color: #f8fafc;
    color: #0f172a;
}

/* ==================== BARRA SUPERIOR (HEADER) ==================== */
body.theme-magica .cc-top-bar {
    background: #091b29 !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2) !important;
}

body.theme-magica .cc-top-bar a:hover {
    color: #38bdf8 !important;
}

body.theme-magica .cc-top-badge {
    background: rgba(14, 165, 233, 0.2) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
}

/* ==================== HEADER PRINCIPAL ==================== */
body.theme-magica .cc-header-main {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.05) !important;
}

body.theme-magica .cc-search-inner {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}

body.theme-magica .cc-search-inner:focus-within {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15) !important;
    background: #ffffff !important;
}

body.theme-magica .cc-search-btn {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
}

body.theme-magica .cc-search-btn:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.45) !important;
}

body.theme-magica .cc-search-chips a {
    color: #0284c7 !important;
}

/* Botões do Topo */
body.theme-magica .cc-whats-btn {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #15803d !important;
}

body.theme-magica .cc-whats-btn i {
    color: #16a34a !important;
}

body.theme-magica .cc-cart-btn {
    background: linear-gradient(135deg, #091b29 0%, #0c2d4a 100%) !important;
    border: 1px solid #0284c7 !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25) !important;
}

body.theme-magica .cc-cart-btn:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.4) !important;
}

body.theme-magica .cc-cart-badge {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #091b29 !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.4) !important;
}

/* Sub-Navbar */
body.theme-magica .cc-navbar {
    border-bottom: 2px solid #e0f2fe !important;
    background: #ffffff !important;
}

body.theme-magica .cc-nav-link:hover,
body.theme-magica .cc-nav-item.active .cc-nav-link {
    color: #0284c7 !important;
}

body.theme-magica .destaque-pill {
    background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
}

/* Categorias Stories */
body.theme-magica .cc-cat-bubble:hover .cc-cat-bubble-img {
    border-color: #0284c7 !important;
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.3) !important;
}

body.theme-magica .cc-cat-bubble:hover .cc-cat-bubble-name {
    color: #0284c7 !important;
}

/* ==================== CARDS DE PRODUTOS ==================== */
body.theme-magica .cc-product-card {
    border-color: #e2e8f0 !important;
    box-shadow: 0 3px 12px rgba(2, 132, 199, 0.04) !important;
}

body.theme-magica .cc-product-card:hover {
    border-color: #38bdf8 !important;
    box-shadow: 0 12px 28px rgba(2, 132, 199, 0.14) !important;
    transform: translateY(-5px);
}

body.theme-magica .cc-badge-vivos {
    background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
}

body.theme-magica .cc-badge-discount {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
}

body.theme-magica .cc-prod-category {
    color: #0284c7 !important;
}

body.theme-magica .cc-prod-title:hover {
    color: #0284c7 !important;
}

body.theme-magica .cc-buy-btn {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
}

body.theme-magica .cc-buy-btn:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.4) !important;
}

body.theme-magica .theme-btn,
body.theme-magica .shop-btn {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

body.theme-magica .theme-btn:hover,
body.theme-magica .shop-btn:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
}

/* ==================== FOOTER ==================== */
body.theme-magica .cc-footer {
    background: #091b29 !important;
    border-top: 3px solid #0284c7 !important;
}

body.theme-magica .cc-footer h4::after {
    background: #0ea5e9 !important;
}

body.theme-magica .cc-footer ul li a:hover {
    color: #38bdf8 !important;
}

body.theme-magica .cc-badge-box i {
    color: #38bdf8 !important;
}

/* Botão Finalizar Checkout */
body.theme-magica .btn-finalizar {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.35) !important;
}

body.theme-magica .btn-finalizar:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45) !important;
}

body.theme-magica .btn-finalizar-orcamento {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%) !important;
    border: none;
    color: #fff;
    padding: 14px 20px;
    border-radius: 10px;
    font-weight: 700;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
    transition: all 0.25s ease;
}

body.theme-magica .btn-finalizar-orcamento:hover {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45);
}

/* ==================== MODO ORÇAMENTO GLOBAL ==================== */
body.modo-orcamento .cc-price-box,
body.modo-orcamento .price-section,
body.modo-orcamento .product-price,
body.modo-orcamento .cc-pix-price,
body.modo-orcamento .cc-installments,
body.modo-orcamento .cc-old-price,
body.modo-orcamento .cc-main-price,
body.modo-orcamento .shipping-calc-box,
body.modo-orcamento .shipping-box,
body.modo-orcamento #cart-frete-box,
body.modo-orcamento .bloco-pagamentos {
    display: none !important;
}

/* ==================== NORMALIZAÇÃO DE TEXTO (SEM CAPITALIZAÇÃO INDEVIDA) ==================== */
body.theme-magica p,
body.theme-magica span:not(.badge):not(.cc-prod-category):not(.cc-nav-link),
body.theme-magica .product-description-body,
body.theme-magica .product-description-body * {
    text-transform: none !important;
}

/* ==================== CONTROLES DE QUANTIDADE (TEXTO ESCURO VISÍVEL) ==================== */
#qtd-produto-detalhe,
input#qtd-produto-detalhe,
.cart-quantity input,
.qty input,
.qty-stepper input {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    background-color: #ffffff !important;
    font-weight: 700 !important;
}

#qtd-produto-detalhe::-webkit-inner-spin-button,
#qtd-produto-detalhe::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#qtd-produto-detalhe[type=number] {
    -moz-appearance: textfield;
}