/* =========================================================================
 * GlassLiquid — tema glassmorphism para shomex.com.mx
 * Aplica vidrio esmerilado semitransparente a los elementos clave de la UI
 * conservando los colores de marca (naranja). Controlado por variables CSS
 * que el panel (glassliquid.js) ajusta en vivo y guarda en localStorage.
 * Rendimiento: usa backdrop-filter (acelerado por GPU), no WebGL.
 * ========================================================================= */

:root {
    --gl-blur: 14px;
    --gl-saturate: 1.6;
    --gl-tint: 255, 255, 255;        /* rgb base del vidrio (blanco) */
    --gl-tint-opacity: 0.55;          /* opacidad del tinte */
    --gl-radius: 16px;
    --gl-border: 0.35;                /* opacidad del borde claro */
    --gl-shadow: 0.10;                /* opacidad de la sombra */
    --gl-brand: 238, 77, 45;          /* naranja marca #EE4D2D */
}

/* ===== Variantes de estilo de tema =====
   brand (naranja, motor de refracción) = valores por defecto del :root.
   visionOS y Liquid Glass = vidrio neutro, claro y ligero (solo CSS). */
.glassliquid-active.gl-style-visionos {
    --gl-tint: 255, 255, 255;
    --gl-tint-opacity: 0.42;
    --gl-blur: 24px;
    --gl-saturate: 1.4;
    --gl-radius: 22px;
    --gl-border: 0.55;
    --gl-shadow: 0.08;
}
.glassliquid-active.gl-style-liquidglass {
    --gl-tint: 255, 255, 255;
    --gl-tint-opacity: 0.16;
    --gl-blur: 8px;
    --gl-saturate: 1.9;
    --gl-radius: 26px;
    --gl-border: 0.60;
    --gl-shadow: 0.12;
}
/* En estilos claros, dar desenfoque también a las tarjetas/secciones blancas */
.glassliquid-active.gl-style-visionos .bg-white,
.glassliquid-active.gl-style-visionos .aiz-card-box,
.glassliquid-active.gl-style-liquidglass .bg-white,
.glassliquid-active.gl-style-liquidglass .aiz-card-box {
    -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-saturate));
    backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-saturate));
    border: 1px solid rgba(255, 255, 255, var(--gl-border)) !important;
    border-radius: var(--gl-radius) !important;
}

/* Fondo de página: capa fija a pantalla completa (cover + center), robusta en móvil.
   El JS setea --gl-bg-img con la url del fondo elegido. */
body.glassliquid-active { background: transparent !important; }
body.glassliquid-active::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--gl-bg-img, linear-gradient(135deg, #fde3da, #ffd9c2));
    background-size: cover;            /* cubre todo el ancho y alto de la pantalla */
    background-position: center;       /* en móvil se ve la parte central, manteniendo aspecto */
    background-repeat: no-repeat;
    transition: background-image .8s ease-in-out;
}

/* Dejar ver el fondo: el wrapper/secciones opacas se vuelven semitransparentes */
.glassliquid-active .aiz-main-wrapper { background: transparent !important; }
.glassliquid-active .bg-white,
.glassliquid-active .bg-light,
.glassliquid-active .bg-gray,
.glassliquid-active .aiz-card-box {
    background-color: rgba(var(--gl-tint), var(--gl-tint-opacity)) !important;
}
/* Elementos a los que se aplicó refracción real (LiquidGlass): fondo transparente
   para que se vea la refracción; el "chrome"/tinte de la librería da el vidrio. */
.glassliquid-active .liquid-glass {
    background-color: transparent !important;
}

/* Legibilidad: glow estilo Aero/7.css (toggle con la clase .gl-glow en el body) */
.glassliquid-active.gl-glow h1, .glassliquid-active.gl-glow h2,
.glassliquid-active.gl-glow h3, .glassliquid-active.gl-glow h4,
.glassliquid-active.gl-glow h5, .glassliquid-active.gl-glow h6,
.glassliquid-active.gl-glow p, .glassliquid-active.gl-glow a,
.glassliquid-active.gl-glow span, .glassliquid-active.gl-glow li,
.glassliquid-active.gl-glow label, .glassliquid-active.gl-glow .text-dark,
.glassliquid-active.gl-glow .fw-700, .glassliquid-active.gl-glow .fw-600 {
    text-shadow: 0 0 2px rgba(255, 255, 255, .92), 0 0 6px rgba(255, 255, 255, .55);
}
/* Texto claro (sobre naranja/oscuro): glow oscuro para el contraste inverso */
.glassliquid-active.gl-glow .text-white,
.glassliquid-active.gl-glow header.header0-desktop .h0-link,
.glassliquid-active.gl-glow header.header0-desktop span,
.glassliquid-active.gl-glow .flash-deal-header * {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 0 2px rgba(0, 0, 0, .35) !important;
}
/* Sin glow en el contador de la barra Flash ni en los precios de las cards flash
   (el glow hacía que números/letras se vieran "cortados"). */
.glassliquid-active.gl-glow #flash-header-countdown,
.glassliquid-active.gl-glow #flash-header-countdown *,
.glassliquid-active.gl-glow .flash-countdown-compact *,
.glassliquid-active.gl-glow .flash-product-card .fw-700,
.glassliquid-active.gl-glow .flash-product-card del {
    text-shadow: none !important;
}
/* Evitar recorte de caracteres en precios pequeños */
.glassliquid-active .flash-product-card .fw-700 { line-height: 1.45 !important; overflow: visible; }

/* Base de vidrio reutilizable */
.glassliquid-active .gl-glass,
.glassliquid-active header.header0-desktop,
.glassliquid-active .aiz-card-box,
.glassliquid-active .flash-deal-products-wrap,
.glassliquid-active .home-voucher__item-info-wrap,
.glassliquid-active .home-cat-grid,
.glassliquid-active .footer,
.glassliquid-active .modal-content,
.glassliquid-active .header0-locale-panel,
.glassliquid-active .h0-imgsearch-panel,
.glassliquid-active .aiz-category-menu,
.glassliquid-active .card.shadow-sm,
.glassliquid-active .product-card-wrap {
    background-color: rgba(var(--gl-tint), var(--gl-tint-opacity)) !important;
    -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-saturate));
    backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-saturate));
    border: 1px solid rgba(255, 255, 255, var(--gl-border)) !important;
    border-radius: var(--gl-radius) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, var(--gl-shadow));
}

/* Elementos NARANJA: vidrio que conserva el color de marca (toggle .gl-brandtint) */
.glassliquid-active.gl-brandtint header.header0-desktop,
.glassliquid-active.gl-brandtint .flash-deal-header,
.glassliquid-active.gl-brandtint .top-banner,
.glassliquid-active.gl-brandtint .btn-primary,
.glassliquid-active.gl-brandtint .home-voucher__item-save {
    background-color: rgba(var(--gl-brand), 0.78) !important;
    -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-saturate));
    backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-saturate));
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.glassliquid-active.gl-brandtint .btn-primary {
    border-radius: 999px !important;
    box-shadow: 0 6px 18px rgba(var(--gl-brand), .35);
}

/* Esquinas redondeadas para elementos cuadrados/rectangulares clave */
.glassliquid-active .aiz-card-box,
.glassliquid-active .flash-product-card {
    border-radius: var(--gl-radius) !important;
}
/* overflow:hidden sólo en contenedores de imagen (no en tarjetas, para no recortar menús/flyouts) */
.glassliquid-active .hsb-icon,
.glassliquid-active .grid-cell__img,
.glassliquid-active .flash-img-wrap {
    border-radius: var(--gl-radius) !important;
    overflow: hidden;
}

/* Mantener legibilidad: el contenido sobre vidrio no hereda blur */
.glassliquid-active .gl-glass > * { position: relative; }

/* ============================ Panel de controles ========================= */
#gl-controls {
    position: fixed; top: 12px; left: 12px; bottom: 12px; width: 272px;
    background: rgba(22, 22, 26, 0.72);
    -webkit-backdrop-filter: blur(40px) saturate(1.4);
    backdrop-filter: blur(40px) saturate(1.4);
    color: #fff; border-radius: 20px; font-size: 13px; z-index: 200000;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex; flex-direction: column; overflow: hidden;
    transform: translateX(calc(-100% - 24px));
    transition: transform .35s cubic-bezier(.32,.72,0,1);
    font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
#gl-controls.open { transform: translateX(0); }
.gl-ctrl-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 0; flex-shrink: 0; }
.gl-ctrl-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); }
.gl-close-btn { width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: rgba(255,255,255,.6); cursor: pointer; font-size: 18px; line-height: 1; }
.gl-close-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.gl-ctrl-scroll { flex: 1; overflow-y: auto; padding: 10px 14px 20px; scrollbar-width: thin; }
.gl-ctrl-scroll::-webkit-scrollbar { width: 3px; }
.gl-ctrl-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
#gl-controls h2 { margin: 16px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.3); }
#gl-controls h2:first-child { margin-top: 0; }
#gl-controls label { display: flex; justify-content: space-between; align-items: center; margin: 7px 0; font-size: 12.5px; color: rgba(255,255,255,.65); gap: 8px; }
#gl-controls input[type=range] { flex: 1; min-width: 0; accent-color: #EE4D2D; }
#gl-controls .gl-vd { font-family: ui-monospace, monospace; font-size: 11px; color: rgba(255,255,255,.4); min-width: 34px; text-align: right; flex-shrink: 0; }
#gl-controls input[type=color] { width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 0; cursor: pointer; background: transparent; flex-shrink: 0; }
#gl-controls select { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 5px 8px; font-size: 12px; cursor: pointer; flex-shrink: 0; max-width: 150px; }
#gl-controls select option { color: #111; }
.gl-eng { font-size: 9px; font-weight: 700; letter-spacing: .05em; padding: 2px 7px; border-radius: 50px; background: rgba(238,77,45,.3); border: 1px solid rgba(238,77,45,.5); color: #ffd2c7; margin-left: 4px; }
#gl-controls .gl-switch { width: 38px; height: 22px; border-radius: 12px; background: rgba(255,255,255,.18); position: relative; cursor: pointer; flex-shrink: 0; transition: background .2s; }
#gl-controls .gl-switch.on { background: #EE4D2D; }
#gl-controls .gl-switch::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: left .2s; }
#gl-controls .gl-switch.on::after { left: 18px; }

.gl-bg-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.gl-bg-thumb { width: 46px; height: 46px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; object-fit: cover; background: rgba(255,255,255,.06); transition: border-color .15s, transform .1s; }
.gl-bg-thumb:hover { border-color: rgba(255,255,255,.35); transform: scale(1.05); }
.gl-bg-thumb.active { border-color: #EE4D2D; box-shadow: 0 0 0 1px #EE4D2D; }
.gl-btn { font-size: 12px; font-weight: 600; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 8px 12px; cursor: pointer; width: 100%; margin-top: 8px; }
.gl-btn:hover { background: rgba(255,255,255,.18); }

/* Botón flotante para abrir el panel */
#gl-toggle {
    position: fixed; top: 50%; left: 0; transform: translateY(-50%); z-index: 199999;
    width: 38px; height: 46px; border: 0; border-radius: 0 12px 12px 0;
    background: rgba(var(--gl-brand), .92); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 2px 2px 12px rgba(0,0,0,.25);
}
#gl-toggle svg { width: 20px; height: 20px; }
#gl-toggle.hidden { opacity: 0; pointer-events: none; }

@media (max-width: 600px) {
    #gl-controls { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 62vh; border-radius: 20px 20px 0 0; transform: translateY(100%); }
    #gl-controls.open { transform: translateY(0); }
    #gl-toggle { top: auto; bottom: 80px; }
}