/*
 * ================================================
 * LIQUID GLASS UI V4.0 - SISTEMA COMPLETO CENTRALIZADO
 * ================================================
 */

/* ==========================================================================
   1. CONFIGURACIÓN DE TEMAS (VARIABLES)
   ========================================================================== */

/* ==========================================================================
   1. SISTEMA DE TEMAS Y PALETAS (MODULAR)
   ========================================================================== */

/* --- TEMA BASE: GLASS (MODA / LUJO) --- */
:root,
body.theme-glass {
    /* Estructura Visual */
    --backdrop: blur(20px);
    --radius: 25px;
    --shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    --border-opacity: 0.2;

    /* Tipografía */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Outfit', sans-serif;
}


/* Paletas para Theme Glass han sido movidas a palettes/glass.css */


/* --- TEMA BASE: AGRO / CAFÉ (ORGÁNICO) --- */
body.theme-agro {
    /* Estructura Visual - Más sólida, menos "glass" */
    --backdrop: blur(10px);
    --radius: 12px;
    --shadow: 0 4px 12px rgba(93, 64, 55, 0.15);
    --border-opacity: 0.1;

    /* Tipografía */
    --font-heading: 'Merriweather', serif;
    --font-body: 'Lato', sans-serif;
}

/* Paletas para Theme Agro */
body.theme-agro.palette-coffee {
    --bg-body: #fdfbf7;
    --bg-hero: url('https://images.unsplash.com/photo-1497935586351-b67a49e012bf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
    /* Textura café */
    --primary-color: #6d4c41;
    /* Café Suave */
    --accent-color: #d7ccc8;
    --text-color: #3e2723;
    --text-inverse: #ffffff;

    /* UI */
    --card-bg: #ffffff;
    --card-border: 1px solid #efebe9;
    --nav-bg: #4e342e;
    /* Nav sólida café */
    --nav-text: #ffffff;
    --sticky-nav-bg: #3e2723;
    --sticky-nav-text: #ffffff;
}

body.theme-agro.palette-green {
    --bg-body: #f1f8e9;
    --bg-hero: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
    --primary-color: #2e7d32;
    /* Verde Bosque */
    --accent-color: #a5d6a7;
    --text-color: #1b5e20;
    --text-inverse: #ffffff;

    /* UI */
    --card-bg: rgba(255, 255, 255, 0.9);
    --card-border: 1px solid #c8e6c9;
    --nav-bg: rgba(46, 125, 50, 0.95);
    --nav-text: #ffffff;
    --sticky-nav-bg: #1b5e20;
    --sticky-nav-text: #ffffff;
}

/* Variables Genéricas derivadas */
:root {
    --input-bg: var(--card-bg);
    --input-border: var(--card-border);
    --btn-glass-bg: var(--primary-color);
    --btn-glass-text: var(--text-inverse);

    /* Default fallback */
    --text-color: #333;
    --bg-body: #fff;
    --card-bg: #fff;
}

/* --- TEMA: PRESTIGE (Lujo / Black & Gold) --- */
body.theme-prestige {
    --backdrop: blur(25px);
    --radius: 12px;
    --shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

    /* Tipografía */
    --font-heading: 'Merriweather', serif;
    --font-body: 'Merriweather', serif;
}

/* Paletas en prestige.css */

/* --- TEMA 5: AUTOMOTRIZ (Industrial / Repuestos / Motos) --- */
body.theme-auto {
    /* Fondos: Gris metálico y asfalto */
    --bg-body: #f3f4f6;
    --bg-hero: linear-gradient(160deg, #111827 0%, #374151 100%);

    /* Tarjetas: Estilo técnico/industrial */
    --card-bg: #ffffff;
    --card-hover-bg: #f9fafb;
    --card-border: 1px solid #9ca3af;

    /* Efectos: Sombras duras y bordes casi cuadrados */
    --backdrop: none;
    --shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
    /* Sombra sólida técnica */
    --radius: 4px;

    /* Tipografía y Colores */
    --font-heading: 'Exo 2', sans-serif;
    /* Fuente tecnológica/racing */
    --text-color: #111827;
    --text-muted: #4b5563;
    --primary-color: #dc2626;
    /* Rojo Motor */

    /* Nav & UI */
    --nav-bg: #000000;
    /* Negro Puro */
    --nav-text: #ffffff;
    --sticky-nav-bg: #000000;
    --sticky-nav-text: #ffffff;
    --input-bg: #e5e7eb;
    --table-header-bg: #d1d5db;
    --table-border: #9ca3af;

    /* Footer */
    --bg-footer: #111827;
    --footer-text: #9ca3af;
    --footer-heading: #f3f4f6;
    --footer-border: 1px solid #374151;
}

/* --- TEMA 6: NEUTRAL / TECH (Modo Oscuro Tecnológico) --- */
body.theme-neutral {
    --bg-body: #0f172a;
    --bg-hero: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    --primary-color: #38bdf8;
    --accent-color: #818cf8;
    --text-color: #f1f5f9;
    --text-inverse: #0f172a;

    /* UI Glass - Tech Style */
    --backdrop: blur(15px);
    --radius: 12px;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    --card-bg: rgba(30, 41, 59, 0.7);
    --card-border: 1px solid rgba(255, 255, 255, 0.1);
    --nav-bg: rgba(15, 23, 42, 0.9);
    --sticky-nav-bg: #0f172a;
    --sticky-nav-text: #38bdf8;
    --input-bg: rgba(255, 255, 255, 0.05);

    /* Tables */
    --table-header-bg: #1e293b;
    --table-border: #334155;
}

/* --- TEMA 7: MINIMAL (Limpio y Corporativo) --- */
body.theme-minimal {
    --bg-body: #ffffff;
    --bg-hero: #f8fafc;
    --primary-color: #111827;
    --accent-color: #64748b;
    --text-color: #1f2937;
    --text-inverse: #ffffff;

    /* UI Simple */
    --backdrop: none;
    --radius: 8px;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --card-bg: #ffffff;
    --card-border: 1px solid #e5e7eb;
    --nav-bg: #ffffff;
    --sticky-nav-bg: #ffffff;
    --sticky-nav-text: #111111;
    --input-bg: #f9fafb;

    /* Tables */
    --table-header-bg: #f3f4f6;
    --table-border: #e5e7eb;
}

/* --- TEMA: INNOVACELL (TECH STORE) --- */
body.theme-innovacell {
    /* Fondo: Turquesa vibrante */
    --bg-body: linear-gradient(135deg, #00D4FF 0%, #0090FF 100%);
    --bg-hero: transparent;
    /* Banner es imagen */

    /* Colores */
    --primary-color: #00D4FF;
    --accent-color: #FF3366;
    --text-color: #1a1a1a;
    --text-inverse: #ffffff;

    /* Navbar: Oscuro translúcido */
    --nav-bg: rgba(0, 0, 0, 0.85);
    --nav-text: #ffffff;
    --sticky-nav-bg: rgba(0, 0, 0, 0.95);
    --sticky-nav-text: #00D4FF;

    /* Cards: Blancas limpias */
    --card-bg: #ffffff;
    --card-border: 1px solid #e5e5e5;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --radius: 16px;

    /* Efectos: Mínimos */
    --backdrop: blur(10px);

    /* Inputs */
    --input-bg: #f9fafb;
}

/* ==========================================================================
   2. ESTILOS BASE Y UTILIDADES
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background: var(--bg-body);
    background-attachment: fixed;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Títulos y Enlaces */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--text-color);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

a {
    color: var(--text-color);
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    opacity: 0.7;
}

p,
li,
span,
label {
    color: var(--text-color);
}

/* Corrección forzada para contenedores de texto */
.uk-container p,
.uk-container span,
.uk-container div,
.uk-container label {
    color: inherit;
    /* Permite que el color fluya del padre o de las variables */
}

/* --- UTILIDADES GLASS --- */
.glass-card {
    background: var(--card-bg, rgba(255, 255, 255, 0.1));
    backdrop-filter: var(--backdrop, blur(15px));
    -webkit-backdrop-filter: var(--backdrop, blur(15px));
    border: var(--card-border, 1px solid rgba(255, 255, 255, 0.2));
    border-radius: var(--radius, 20px);
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

.glass-heading {
    color: var(--text-color, white) !important;
}

.glass-heading span {
    color: var(--text-color, white) !important;
    font-family: var(--font-heading);
}

.glass-subtitle {
    color: var(--text-muted, rgba(255, 255, 255, 0.8));
    font-size: 1.1rem;
}

.glass-input {
    background: var(--input-bg, rgba(255, 255, 255, 0.1)) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--text-color, white) !important;
    border-radius: 8px;
    padding-left: 15px;
}

.glass-input:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: var(--primary-color) !important;
}

.text-white {
    color: var(--text-color, white) !important;
}

.text-white-50 {
    color: var(--text-muted, rgba(255, 255, 255, 0.6)) !important;
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   4. COMPONENTES UI (GLASS)
   ========================================================================== */

/* Cards & Containers - EFECTO VIDRIO GLOBAL */
.uk-card,
.uk-card-default,
.uk-card-primary,
.uk-card-secondary,
.product-card,
.vcard-glass {
    background: var(--card-bg) !important;
    backdrop-filter: var(--backdrop) !important;
    -webkit-backdrop-filter: var(--backdrop) !important;
    border: var(--card-border) !important;
    box-shadow: var(--shadow) !important;
    border-radius: var(--radius) !important;
}

/* Excepción para tarjetas dentro de otras tarjetas (evitar doble vidrio si se desea) */
.uk-card .uk-card {
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Títulos y Textos en Glass */
.uk-card-title,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-color);
    font-family: var(--font-heading);
}

p,
span,
div {
    color: var(--text-color);
    /* Assuming --font-body is defined elsewhere or falls back to default */
    /* font-family: var(--font-body); */
}

/* Inputs & Forms Glass */
.uk-input,
.uk-select,
.uk-textarea {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--text-color) !important;
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: var(--primary-color) !important;
}

/* Botones Glass */
.uk-button-primary,
.btn-primary {
    background: var(--primary-color) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-inverse, #ffffff) !important;
    backdrop-filter: blur(4px);
    box-shadow: var(--shadow);
    border-radius: var(--radius, 10px);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.uk-button-primary:hover,
.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

.uk-button-default {
    background: var(--input-bg, rgba(255, 255, 255, 0.1)) !important;
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.2)) !important;
    color: var(--text-color) !important;
    border-radius: var(--radius, 10px);
    backdrop-filter: blur(4px);
}

/* V-Card Wrapper (Si existe) */
.vcard-profile {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}

/* ==========================================================================
   3. COMPONENTES PRINCIPALES
   ========================================================================== */

/* --- Navbar --- */
.navbar-glass {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 1000;
    display: flex;
    align-items: center;
    border-bottom: var(--card-border);
    background: var(--nav-bg);
    backdrop-filter: var(--backdrop);
    -webkit-backdrop-filter: var(--backdrop);
    transition: 0.3s;
}

/* Ajuste específico para modo neutro (fondo oscuro) */
body.theme-neutral .navbar-glass a,
body.theme-neutral .navbar-brand {
    color: white !important;
}

.navbar-brand {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* --- Hero & Slideshow UIkit Tweaks --- */

/* Ajuste para móviles: Altura del slider */
@media (max-width: 768px) {
    .uk-slideshow-items {
        min-height: 500px !important;
        height: 60vh !important;
    }
}

/* Redefinición del Glass Content para UIkit */
.hero-glass-content {
    padding: 2rem;
    max-width: 700px;
    width: 90vw;
    /* Responsive width */
    background: rgba(255, 255, 255, 0.25);
    /* Un poco más transparente */
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    color: #fff !important;
    /* Forzar texto blanco en el banner para contraste */
}

/* Forzar colores dentro del glass del hero */
.hero-glass-content h1,
.hero-glass-content p {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Placeholder de carga de archivos (Admin) */
.js-upload.uk-placeholder {
    border: 2px dashed #e0e0e0;
    padding: 30px;
    background: #fafafa;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.js-upload.uk-placeholder:hover {
    border-color: var(--primary-color);
    background: #fff;
}

/* --- Tarjetas Universales (Productos, Categorías, Info) --- */
.glass-card,
.card-glass,
.category-card,
.gallery-card {
    background: var(--card-bg);
    border: var(--card-border);
    backdrop-filter: var(--backdrop);
    -webkit-backdrop-filter: var(--backdrop);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: 0.3s;
    overflow: hidden;
}

.glass-card:hover,
.card-glass:hover,
.gallery-card:hover {
    transform: translateY(-5px);
    background: var(--card-hover-bg);
    border-color: var(--primary-color);
}

/* --- Galería "Apple Style" (Migrado desde index.php) --- */
.apple-gallery-section {
    padding: 2rem 0;
    background: transparent;
    overflow: hidden;
}

.gallery-row {
    margin-bottom: 3rem;
    padding-left: max(1rem, env(safe-area-inset-left));
}

.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
    padding-right: 1rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.gallery-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
}

.gallery-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 1.2rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 1.5rem;
    scrollbar-width: none;
}

.gallery-scroller::-webkit-scrollbar {
    display: none;
}

.gallery-card {
    position: relative;
    height: 420px;
    padding: 0 !important;
}

.gallery-click-area {
    text-decoration: none;
    color: inherit;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.img-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-card:hover .img-wrapper img {
    transform: scale(1.05);
}

.gallery-info {
    padding: 1.2rem;
    background: var(--card-bg);
    z-index: 2;
    border-top: var(--card-border);
}

.gallery-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

@media (min-width: 768px) {
    .gallery-scroller {
        grid-auto-columns: 40%;
        gap: 1.5rem;
    }

    .gallery-card {
        height: 500px;
    }
}

@media (min-width: 1024px) {
    .gallery-scroller {
        grid-auto-columns: 28%;
        padding-left: calc((100vw - 1200px) / 2);
    }
}

/* --- Tablas (Para el Admin y Frontend) --- */
.table-responsive {
    overflow-x: auto;
}

.table,
.uk-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.table th,
.table td,
.uk-table th,
.uk-table td {
    padding: 1rem;
    vertical-align: middle;
    border-top: 1px solid var(--table-border);
    color: var(--text-color);
}

.table thead th,
.uk-table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--table-border);
    background-color: var(--table-header-bg);
    color: var(--text-color);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
}

/* Arreglo para Admin Dashboard */
#content-wrapper .table {
    color: #5a5c69 !important;
}

/* --- Botones --- */
.btn-glass-lg,
.uk-button-primary,
.uk-button-secondary {
    background: var(--primary-color);
    color: #fff !important;
    border-radius: var(--radius);
    padding: 12px 30px;
    border: none;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    font-size: 0.9rem;
    display: inline-block;
}

.btn-glass-lg:hover,
.uk-button-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* --- Botón Whatsapp Glow --- */
.btn-whatsapp-glow {
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.4);
    animation: pulseGreen 2s infinite;
    background-color: #25D366 !important;
}

@keyframes pulseGreen {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* --- Formularios --- */
/* --- Formularios --- */
.form-input,
.uk-input,
.uk-select,
.uk-textarea,
.glass-input-white,
.input-glass {
    width: 100%;
    padding: 12px 15px;
    border: var(--card-border) !important;
    border-radius: var(--radius) !important;
    background: var(--input-bg) !important;
    color: var(--text-color) !important;
    font-size: 1rem;
    transition: all 0.2s;
}

.form-input:focus,
.uk-input:focus,
.glass-input-white:focus {
    outline: none;
    border-color: var(--primary-color) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #333 !important;
}

/* Placeholder visible */
::placeholder {
    color: var(--text-color);
    opacity: 0.7;
}


/* --- Ajustes Móviles --- */
@media (max-width: 768px) {
    .hero-slider-container {
        padding-top: 0;
        height: 60vh;
    }

    h1 {
        font-size: 2rem;
    }

    .gallery-card {
        height: 350px;
    }
}

/* --- ARREGLO DE CATEGORÍAS --- */
.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 180px;
    /* Altura mínima para que se vean uniformes */
    padding: 2rem !important;
}

.category-icon {
    margin-bottom: 1rem;
    color: var(--primary-color);
    /* Icono color morado/tema */
    transition: transform 0.3s ease;
}

.category-name {
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    color: var(--text-color);
}

/* Efecto Hover bonito */
.category-card:hover .category-icon {
    transform: scale(1.2) rotate(-5deg);
}

/* Línea decorativa al hacer hover */
.hover-line {
    width: 0;
    height: 3px;
    background: var(--primary-color);
    margin-top: 10px;
    transition: width 0.3s;
}

.category-card:hover .hover-line {
    width: 40px;
}

/* --- Footer --- */
.site-footer {
    background: var(--bg-footer);
    color: var(--footer-text);
    padding: 60px 0 30px;
    margin-top: 50px;
    border-top: var(--footer-border);
}

.site-footer h4,
.site-footer h5 {
    color: var(--footer-heading);
}

.footer-link {
    color: var(--footer-text);
    text-decoration: none;
    transition: 0.3s;
}

.footer-link:hover {
    color: var(--primary-color);
    padding-left: 5px;
}
/* ==========================================================================
   PHASE 2026 - BUILDER HARMONIZATION + MOBILE EXPERIENCE
   ========================================================================== */

:root {
    --card-text: var(--text-color);
    --card-price-color: var(--primary-color);
    --card-btn-bg: var(--primary-color);
    --card-btn-text: var(--text-inverse, #ffffff);
    --hero-overlay-opacity: 0.3;
    --hero-title-color: #ffffff;
    --hero-btn-bg: var(--primary-color);
    --hero-btn-text: #ffffff;
    --inner-banner-overlay: 0.36;
    --inner-banner-text: #ffffff;
    --inner-banner-subtext: #f8fafc;
    --footer-title-color: var(--primary-color);
    --button-radius: var(--radius, 10px);
    --nav-border: 1px solid rgba(255, 255, 255, 0.12);
    --product-meta-color: var(--card-text, var(--text-color));
    --product-muted-color: var(--text-muted, #64748b);
    --product-card-bg: var(--card-bg);
    --product-card-text: var(--card-text, var(--text-color));
    --product-price-color: var(--card-price-color, var(--primary-color));
    --product-alert-bg: rgba(239, 68, 68, 0.1);
    --product-alert-border: 1px solid #ef4444;
    --product-alert-text: #b91c1c;
    --product-whatsapp-bg: #25D366;
    --product-whatsapp-text: #ffffff;
    --product-fav-bg: #ffffff;
    --product-fav-icon: #e11d48;
}

body {
    font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading, inherit);
}

/* Evita contaminar todo el DOM con color forzado */
body p,
body li {
    color: var(--text-color);
}

body span,
body label,
body div {
    color: inherit;
}

/* Hero builder tokens */
.hero-glass-content {
    position: relative;
}

.hero-glass-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--hero-overlay-opacity, 0.3));
    border-radius: inherit;
    pointer-events: none;
}

.hero-glass-content>* {
    position: relative;
    z-index: 1;
}

.hero-glass-content h1,
.hero-glass-content h2,
.hero-glass-content p {
    color: var(--hero-title-color, #ffffff) !important;
}

.hero-glass-content .uk-button,
.hero-glass-content .btn-primary {
    background: var(--hero-btn-bg, var(--primary-color)) !important;
    color: var(--hero-btn-text, #ffffff) !important;
    border-radius: var(--button-radius, var(--radius, 10px));
}

/* Card builder tokens */
.product-card,
.uk-card.product-card,
.glass-card.product-card {
    color: var(--card-text, var(--text-color));
}

.product-card .price,
.product-card .product-price,
.product-card [class*='price'] {
    color: var(--card-price-color, var(--primary-color)) !important;
}

.product-card .uk-button-primary,
.product-card .btn-primary,
.product-card .uk-button,
.product-card button {
    border-radius: var(--button-radius, var(--radius, 10px));
}

.product-card .uk-button-primary,
.product-card .btn-primary {
    background: var(--card-btn-bg, var(--primary-color)) !important;
    color: var(--card-btn-text, #ffffff) !important;
}

/* Footer tokens */
.site-footer .footer-section-title,
.site-footer .footer-title,
.site-footer h4,
.site-footer h5 {
    color: var(--footer-title-color, var(--primary-color));
}

/* Mobile-first tuning for Glass and high-effect themes */
@media (max-width: 768px) {
    body.theme-glass,
    body.theme-commerce,
    body.theme-flash {
        --backdrop: blur(10px);
        --radius: 14px;
        --shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
    }

    .hero-glass-content {
        padding: 1.2rem !important;
        width: 92vw;
    }

    .uk-card,
    .product-card,
    .glass-card {
        border-radius: max(10px, var(--radius));
    }

    .btn-whatsapp-glow {
        animation: none;
        box-shadow: 0 0 12px rgba(37, 211, 102, 0.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   AUTH FOUNDATION (LOGIN + REGISTER)
   Keep auth controls readable across every theme/palette.
   ========================================================================== */
.auth-shell {
    min-height: 80vh;
}

.auth-card {
    padding: 40px;
    border-radius: var(--radius, 20px) !important;
    background: var(--card-bg, #ffffff) !important;
    border: var(--card-border, 1px solid rgba(15, 23, 42, 0.14)) !important;
    box-shadow: var(--shadow, 0 10px 30px rgba(0, 0, 0, 0.14)) !important;
}

.auth-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 999px;
    background: var(--bg-hero, rgba(15, 23, 42, 0.08));
    color: var(--primary-color) !important;
}

.auth-title {
    color: var(--text-color) !important;
    font-weight: 500;
}

.auth-subtitle,
.auth-footer-text,
.auth-helper-text {
    color: var(--text-color) !important;
    opacity: 0.86;
}

.auth-form-icon {
    color: var(--primary-color) !important;
}

.auth-input {
    padding-left: 40px !important;
    border-radius: 16px !important;
    color: var(--text-color) !important;
    background: var(--card-bg, #ffffff) !important;
    border: 1px solid rgba(15, 23, 42, 0.2) !important;
    border-color: color-mix(in srgb, var(--text-color) 26%, transparent) !important;
}

.auth-input::placeholder {
    color: var(--text-color) !important;
    opacity: 0.62;
}

.auth-input:focus {
    border-color: var(--primary-color) !important;
    background: var(--card-bg, #ffffff) !important;
    color: var(--text-color) !important;
}

.auth-btn {
    border-radius: 50px !important;
    background: var(--primary-color) !important;
    color: var(--text-inverse, #ffffff) !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
}

.auth-divider {
    border-top-color: var(--card-border) !important;
}

.auth-link {
    color: var(--primary-color) !important;
}

.auth-link-muted {
    color: var(--text-color) !important;
    opacity: 0.78;
    text-decoration: underline;
}

.auth-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(15, 23, 42, 0.35) !important;
    border-color: color-mix(in srgb, var(--text-color) 35%, transparent) !important;
    background: transparent !important;
}

.auth-checkbox:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23fff' points='12 1 5 7.5 2 5.5 1 7 5 11 13 2'/%3E%3C/svg%3E");
}

.auth-checkbox:focus {
    border-color: var(--primary-color) !important;
    outline: none;
}

@media (max-width: 640px) {
    .auth-card {
        padding: 28px 22px;
    }
}