/* ==========================================================
   TEMA "MIDNIGHT TECH" - MIGTEC (nova cara)
   Carregado por último em includes/header.php.
   Para voltar ao tema anterior, troque o <link> por theme-vibrant.css.
   ========================================================== */

:root {
    --ink: #07090F;
    --ink-2: #0D111B;
    --ink-3: #151B29;
    --line-dark: rgba(255, 255, 255, 0.08);

    --lime: #B6F23C;
    --lime-2: #8EDB1F;
    --cyan: #22D3EE;
    --grad-nova: linear-gradient(120deg, #B6F23C 0%, #4ADE80 45%, #22D3EE 100%);

    --teal: #65C61A !important;
    --teal-dark: #4FA30F !important;
    --teal-light: #B6F23C !important;
    --teal-deeper: #2F6B05 !important;
    --teal-bg: #F1FBE3 !important;
    --accent: #22D3EE;

    --text-dark: #0B0F19;
    --text-primary: #0B0F19;
    --text-secondary: #475069;
    --text-muted: #6B7390;
    --gray-50: #F7F8FA;
    --gray-100: #F1F3F6;
    --gray-200: #E4E7EE;

    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 26px;
    --shadow: 0 1px 2px rgba(10, 15, 30, .04), 0 8px 24px rgba(10, 15, 30, .06);
    --shadow-lg: 0 24px 60px -12px rgba(10, 15, 30, .22);
    --shadow-teal: 0 10px 30px -6px rgba(142, 219, 31, .55);
    --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Base ---------- */
body {
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif !important;
    background: var(--gray-50) !important;
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .section-title, .sale-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    letter-spacing: -0.03em;
}
::selection { background: var(--lime); color: var(--ink); }
.accent {
    background: var(--grad-nova);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Botões ---------- */
.btn { border-radius: 14px !important; font-weight: 700; transition: transform .25s var(--ease), box-shadow .25s, background .25s; }
.btn-primary, .btn-mini-cart, .btn-sale-cta {
    background: var(--lime) !important;
    color: var(--ink) !important;
    border: none !important;
    box-shadow: var(--shadow-teal);
}
.btn-primary:hover, .btn-mini-cart:hover, .btn-sale-cta:hover {
    background: #C8FF55 !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -8px rgba(182, 242, 60, .7);
}
.btn-outline, .btn-outline-light {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    color: #fff !important;
    backdrop-filter: blur(8px);
}
.btn-outline:hover, .btn-outline-light:hover { background: rgba(255,255,255,.14) !important; }

/* ---------- Top bar ---------- */
.top-bar {
    background: var(--ink) !important;
    color: rgba(255,255,255,.7) !important;
    border-bottom: 1px solid var(--line-dark);
    font-size: .8rem; letter-spacing: .02em;
}
.top-bar span::before {
    content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px;
    border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime);
    animation: novaPulse 2s infinite;
}
.top-bar a { color: rgba(255,255,255,.7) !important; }
.top-bar a:hover { color: var(--lime) !important; opacity: 1; }

/* ---------- Header (escuro, vidro) ---------- */
.header {
    background: rgba(13, 17, 27, .88) !important;
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--line-dark) !important;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
    position: sticky; top: 0; z-index: 100;
}
.header .logo {
    background: transparent !important; padding: 0 !important; border-radius: 0;
    box-shadow: none !important;
    transition: transform .3s var(--ease);
}
.header .logo:hover { transform: scale(1.03) rotate(-1deg); }
.header .logo { display: flex; align-items: center; align-self: center; }
.header .logo img { height: 52px !important; width: auto; border-radius: 10px; }

.header-search form {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 16px !important;
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.header-search form:focus-within {
    background: rgba(255,255,255,.1) !important;
    border-color: var(--lime) !important;
    box-shadow: 0 0 0 4px rgba(182, 242, 60, .15) !important;
}
.header-search input, .header-search select {
    background: transparent !important; color: #fff !important; border: none !important;
}
.header-search input::placeholder { color: rgba(255,255,255,.45); }
.header-search select option { color: var(--ink); }
.header-search button {
    background: var(--lime) !important; color: var(--ink) !important;
    border-radius: 12px !important; margin: 4px;
}

.header-action, .header-action svg, .mini-cart-toggle, .cart-total-display {
    color: rgba(255,255,255,.85) !important;
}
.header-action { border-radius: 12px; transition: background .2s, color .2s; }
.header-action:hover { background: rgba(255,255,255,.08) !important; color: var(--lime) !important; }
.cart-badge, .wishlist-count {
    background: var(--lime) !important; color: var(--ink) !important; font-weight: 800;
    box-shadow: 0 0 0 2px var(--ink-2);
}
.nav-toggle span { background: #fff !important; }

/* Navegação */
.nav { background: transparent !important; border-top: 1px solid var(--line-dark); }
.nav-list > li > a {
    color: rgba(255,255,255,.7) !important; font-weight: 600;
    background: transparent !important; border-radius: 10px;
    position: relative; transition: color .2s, background .2s;
}
.nav-list > li > a::after { display: none !important; }
.nav-list > li > a:hover { color: #fff !important; background: rgba(255,255,255,.06) !important; }
.nav-list > li > a.active { color: var(--ink) !important; background: var(--lime) !important; }
.dropdown {
    background: var(--ink-2) !important; border: 1px solid var(--line-dark) !important;
    border-radius: var(--radius) !important; box-shadow: 0 30px 60px rgba(0,0,0,.5) !important;
}
.dropdown h4 { color: var(--lime) !important; }
.dropdown a { color: rgba(255,255,255,.7) !important; }
.dropdown a:hover { color: #fff !important; }

/* ---------- Trust bar ---------- */
.trust-bar {
    background: var(--ink-2) !important; border: none !important;
    border-bottom: 1px solid var(--line-dark) !important;
}
.trust-item { color: rgba(255,255,255,.75) !important; }
.trust-item svg { color: var(--lime) !important; }

/* ---------- Hero / Slider ---------- */
.hero-slider, .slider-container { background: var(--ink) !important; }
.slide-bg, .hero-fallback, .category-hero {
    background:
        radial-gradient(60% 80% at 85% 40%, rgba(34, 211, 238, .22), transparent 60%),
        radial-gradient(50% 70% at 10% 90%, rgba(182, 242, 60, .18), transparent 60%),
        linear-gradient(180deg, #0D111B 0%, #07090F 100%) !important;
}
.slide-bg::after, .hero-fallback::after, .category-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.hero-fallback::before, .category-hero::before { display: none !important; }
.slide { position: relative; }
.slide-text h1, .hero-content h1, .category-hero h1 {
    color: #fff !important; font-weight: 700 !important;
    font-size: clamp(2.2rem, 4.6vw, 4rem) !important; line-height: 1.02;
}
.slide-subtitle, .hero-content p, .category-hero p {
    color: rgba(255,255,255,.65) !important; font-weight: 400 !important;
    letter-spacing: .02em;
}
.promo-label, .hero-badge, .slide .badge {
    background: rgba(182, 242, 60, .12) !important; color: var(--lime) !important;
    border: 1px solid rgba(182, 242, 60, .35); border-radius: 999px !important;
    text-transform: uppercase; letter-spacing: .12em; font-size: .7rem !important; font-weight: 700;
}
.slide-image img, .hero-image {
    filter: drop-shadow(0 30px 60px rgba(34, 211, 238, .25)) drop-shadow(0 10px 20px rgba(0,0,0,.6));
    animation: novaFloat 6s ease-in-out infinite;
}
.slider-prev, .slider-next {
    background: rgba(255,255,255,.06) !important; color: #fff !important;
    border: 1px solid rgba(255,255,255,.15) !important; backdrop-filter: blur(10px);
}
.slider-prev:hover, .slider-next:hover { background: var(--lime) !important; color: var(--ink) !important; }
.slider-dots button, .slider-dots span { background: rgba(255,255,255,.3) !important; }
.slider-dots .active { background: var(--lime) !important; }

/* ---------- Promo cards (bento) ---------- */
.promo-banners { background: transparent !important; }
.promo-card {
    background: #fff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
    position: relative; overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.promo-card::before {
    content: '' !important; position: absolute; inset: 0 0 auto 0; height: 3px !important;
    background: var(--grad-nova) !important; transform: scaleX(0); transform-origin: left;
    transition: transform .45s var(--ease);
}
.promo-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg) !important; border-color: transparent !important; }
.promo-card:hover::before { transform: scaleX(1); }
.promo-card .promo-label {
    background: var(--ink) !important; color: var(--lime) !important; border: none;
}
.promo-link { color: var(--text-dark) !important; font-weight: 700; }
.promo-card:hover .promo-link { color: var(--teal) !important; }
.promo-card-img { transition: transform .5s var(--ease); }
.promo-card:hover .promo-card-img { transform: scale(1.08) rotate(-3deg); }

/* ---------- Seções ---------- */
.section-title { color: var(--text-dark) !important; font-weight: 700 !important; }
.section-title::after {
    background: var(--grad-nova) !important; border-radius: 4px;
}
.section-subtitle { color: var(--text-muted) !important; }

.category-card {
    background: #fff !important; border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius) !important; transition: transform .3s var(--ease), box-shadow .3s;
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.category-icon { background: var(--ink) !important; color: var(--lime) !important; border-radius: 14px !important; }

/* ---------- Ofertas (painel escuro) ---------- */
.sale-section {
    background:
        radial-gradient(45% 70% at 100% 0%, rgba(34, 211, 238, .18), transparent 65%),
        radial-gradient(40% 60% at 0% 100%, rgba(182, 242, 60, .14), transparent 65%),
        linear-gradient(160deg, #111725 0%, #07090F 100%) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 32px;
    width: min(1280px, calc(100% - 2rem));
    margin: 3rem auto !important;
    padding: 3.5rem 0 !important;
    color: #fff; position: relative; overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(7, 9, 15, .55);
}
.sale-section::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, #000, transparent 70%);
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.sale-section > * { position: relative; z-index: 1; }
.sale-section-header {
    padding-bottom: 1.75rem; margin-bottom: 2.25rem !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sale-section .sale-title { color: #fff !important; font-weight: 700 !important; }
.sale-section .sale-title-text {
    background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 40%, var(--lime) 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.sale-section .sale-subtitle { color: rgba(255,255,255,.6) !important; }
.sale-badge-pill {
    background: rgba(182, 242, 60, .12) !important; color: var(--lime) !important;
    border: 1px solid rgba(182, 242, 60, .35) !important; box-shadow: none !important;
    text-transform: uppercase; letter-spacing: .12em !important; font-size: .68rem !important;
}
.sale-badge-pill::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--lime); box-shadow: 0 0 8px var(--lime); animation: novaPulse 1.6s infinite;
}
.btn-sale-cta { border-radius: 14px !important; padding: 13px 24px !important; }

/* Cards dentro do painel escuro: vidro */
.sale-section .product-card {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    backdrop-filter: blur(10px);
}
.sale-section .product-card:hover {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(182, 242, 60, .45) !important;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 4px rgba(182, 242, 60, .1) !important;
}
.sale-section .product-image-wrap { background: #fff !important; }
.sale-section .product-category { color: rgba(255,255,255,.45) !important; }
.sale-section .product-info a, .sale-section .product-info h3, .sale-section .product-info-link, .sale-section .product-info-link * { color: #fff !important; }
.sale-section .product-price { color: var(--lime) !important; }
.sale-section .product-old-price { color: rgba(255,255,255,.35) !important; }
.sale-section .product-add-cart { background: var(--lime) !important; color: var(--ink) !important; }
.sale-section .product-add-cart:hover { background: #fff !important; }
.sale-section .product-badge { background: #F43F5E !important; color: #fff !important; }

/* ---------- Cards de produto ---------- */
.product-card {
    background: #fff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important; overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(101, 198, 26, .45) !important;
    box-shadow: 0 24px 50px -16px rgba(10, 15, 30, .25), 0 0 0 4px rgba(182, 242, 60, .12) !important;
}
.product-image-wrap { background: #fff !important; border-radius: 18px; margin: 8px; overflow: hidden; }
.product-image { background: transparent !important; height: 220px !important; padding: 1rem; }
.product-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.product-card img { transition: transform .6s var(--ease); }
.product-card:hover img { transform: scale(1.07); }
.product-badge { background: var(--ink) !important; color: var(--lime) !important; border-radius: 8px !important; font-weight: 800; }
.product-category { color: var(--text-muted) !important; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem !important; }
.product-price { color: var(--text-dark) !important; font-weight: 800 !important; }
.product-add-cart {
    background: var(--ink) !important; color: #fff !important; border-radius: 12px !important;
    transition: background .2s, color .2s, transform .2s;
}
.product-add-cart:hover { background: var(--lime) !important; color: var(--ink) !important; transform: scale(1.05); }
.product-wishlist-btn:hover { color: #F43F5E !important; }
.star, .stars { color: #FACC15 !important; }

/* ---------- Mini cart ---------- */
.mini-cart-dropdown { border-radius: var(--radius) !important; border: 1px solid var(--gray-200) !important; box-shadow: var(--shadow-lg) !important; }
.mini-cart-progress-fill { background: var(--grad-nova) !important; }

/* ---------- Formulários ---------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], select, textarea { border-radius: 12px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.auth-card input:focus {
    outline: none; border-color: var(--teal) !important;
    box-shadow: 0 0 0 4px rgba(182, 242, 60, .2) !important;
}

/* ---------- Carrinho / Checkout / Auth ---------- */
.cart-summary, .checkout-summary, .checkout-section, .auth-card {
    border-radius: var(--radius-lg) !important; border: 1px solid var(--gray-200) !important;
    box-shadow: var(--shadow) !important;
}
.cart-summary::before, .checkout-summary::before, .auth-card-accent { background: var(--grad-nova) !important; }
.auth-page { background: var(--ink) !important; }

/* ---------- Rodapé ---------- */
.footer {
    background:
        radial-gradient(40% 60% at 0% 0%, rgba(182, 242, 60, .08), transparent 60%),
        var(--ink) !important;
    border-top: 1px solid var(--line-dark); position: relative;
}
.footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: var(--grad-nova) !important;
}
.footer h4 { color: #fff !important; }
.footer a { color: rgba(255,255,255,.6) !important; }
.footer a:hover { color: var(--lime) !important; }

/* ---------- Flutuantes ---------- */
.cart-float { background: var(--ink) !important; color: var(--lime) !important; border: 1px solid rgba(182,242,60,.4) !important; }
.flash { border-radius: var(--radius) !important; }

/* ---------- Animações ---------- */
@keyframes novaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes novaPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Responsivo ---------- */
@media (max-width: 768px) {
    .header .logo img { height: 32px !important; }
    .nav { background: var(--ink-2) !important; }
    .sale-section { border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}