/* ==========================================================
   TEMA "VIBRANTE CLARO" - MIGTEC
   Carregado por último em includes/header.php.
   Para voltar ao visual antigo, basta remover o <link> deste arquivo.
   ========================================================== */

:root {
    /* Cor principal (substitui o antigo teal) - violeta vibrante */
    --teal: #6D4AFF;
    --teal-dark: #5433E6;
    --teal-light: #9B85FF;
    --teal-deeper: #3B1FB8;
    --teal-bg: #F1EEFF;

    /* Cor de destaque - coral */
    --accent: #FF5A6E;
    --accent-dark: #E8405A;
    --grad-main: linear-gradient(135deg, #6D4AFF 0%, #A24BFF 55%, #FF5A6E 100%);
    --grad-soft: linear-gradient(135deg, #F1EEFF 0%, #FFF0F3 100%);

    --dark: #14112B;
    --dark-light: #24204A;
    --text-dark: #14112B;
    --text-primary: #14112B;
    --text-secondary: #4B4868;
    --text-muted: #6E6A8A;

    --gray-50: #FAFAFF;
    --gray-100: #F4F3FB;
    --gray-200: #E8E6F5;

    --shadow: 0 6px 24px rgba(40, 20, 120, 0.07);
    --shadow-lg: 0 18px 48px rgba(40, 20, 120, 0.14);
    --shadow-teal: 0 10px 28px rgba(109, 74, 255, 0.35);

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 22px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Base ---------- */
body {
    font-family: 'Plus Jakarta Sans', 'Outfit', -apple-system, 'Segoe UI', sans-serif;
    background: #FFFFFF;
    color: var(--text-dark);
}
h1, h2, h3, h4, .section-title { letter-spacing: -0.02em; color: var(--text-dark); }
.accent {
    background: var(--grad-main);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
::selection { background: var(--teal); color: #fff; }

/* ---------- Botões ---------- */
.btn { border-radius: 999px; font-weight: 700; letter-spacing: 0.01em; }
.btn-primary {
    background: var(--grad-main);
    background-size: 160% 160%;
    background-position: 0% 50%;
    box-shadow: var(--shadow-teal);
    transition: background-position .5s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover {
    background: var(--grad-main);
    background-size: 160% 160%;
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(162, 75, 255, 0.4);
}
.btn-outline-dark { color: var(--teal); border-color: var(--teal); }
.btn-outline-dark:hover { background: var(--teal); color: #fff; }

/* ---------- Top bar / Header ---------- */
.top-bar { background: var(--grad-main); color: #fff; font-weight: 500; }
.top-bar a:hover { opacity: .8; }

.header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--gray-200);
    position: sticky; top: 0; z-index: 100;
}
.header-search form {
    border-radius: 999px;
    border: 2px solid var(--gray-200);
    background: var(--gray-100);
    overflow: hidden;
    transition: var(--transition);
}
.header-search form:focus-within {
    border-color: var(--teal);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(109, 74, 255, 0.12);
}
.header-search input, .header-search select { background: transparent; }
.header-search button { background: var(--grad-main); color: #fff; border-radius: 999px; }
.header-action { transition: var(--transition); border-radius: 12px; }
.header-action:hover { color: var(--teal); background: var(--teal-bg); }
.cart-badge, .wishlist-count { background: var(--accent); color: #fff; }

.nav { background: transparent; }
.nav-list > li > a { font-weight: 600; position: relative; transition: var(--transition); }
.nav-list > li > a::after {
    content: ''; position: absolute; left: 50%; bottom: 4px;
    width: 0; height: 3px; border-radius: 3px;
    background: var(--grad-main); transition: var(--transition); transform: translateX(-50%);
}
.nav-list > li > a:hover, .nav-list > li > a.active { color: var(--teal); }
.nav-list > li > a:hover::after, .nav-list > li > a.active::after { width: 60%; }
.dropdown { border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); }
.dropdown a:hover { color: var(--teal); }

/* ---------- Trust bar ---------- */
.trust-bar { background: var(--grad-soft); border-bottom: none; }
.trust-item svg { color: var(--teal); }

/* ---------- Hero / Categoria ---------- */
.hero-fallback, .category-hero {
    background: var(--grad-main);
    position: relative; overflow: hidden;
}
.hero-fallback::before, .category-hero::before {
    content: ''; position: absolute; inset: -40%;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.25), transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,.18), transparent 40%);
    animation: vibrantFloat 14s ease-in-out infinite alternate;
    pointer-events: none;
}
.hero-inner, .category-hero-inner { position: relative; z-index: 1; }
@keyframes vibrantFloat {
    from { transform: translate(0, 0) rotate(0deg); }
    to   { transform: translate(4%, -3%) rotate(8deg); }
}

/* ---------- Cards de produto ---------- */
.product-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: none;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.product-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}
.product-card img { transition: transform .5s ease; }
.product-card:hover img { transform: scale(1.05); }

/* ---------- Carrinho / Checkout ---------- */
.cart-summary, .checkout-summary {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    position: sticky; top: 140px;
}
.cart-summary::before, .checkout-summary::before {
    content: ''; display: block; height: 4px; margin: -2rem -2rem 1.5rem;
    background: var(--grad-main); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.checkout-section {
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow);
}
.cart-item-image { border-radius: 14px; }

/* ---------- Formulários ---------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], select, textarea {
    border-radius: 12px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.auth-card input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(109, 74, 255, 0.14);
}

/* ---------- Login / Cadastro ---------- */
.auth-page { background: var(--grad-soft); }
.auth-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
}
.auth-card-accent { height: 5px; background: var(--grad-main); }

/* ---------- Mensagens ---------- */
.flash { border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- Rodapé ---------- */
.footer {
    background: radial-gradient(ellipse at top left, #2A1F6B 0%, var(--dark) 60%);
    position: relative;
}
.footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--grad-main);
}
.footer a:hover { color: var(--teal-light); }

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