/* =============================================
   EDMAGO - Component Styles
   ============================================= */

/* ---- Product Card ---- */
.product-card {
    border: 1px solid #e5e7eb;
    will-change: transform;
    transition: transform    0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow   0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease;
}

.product-card:hover {
    transform: translateY(-6px);
    border-color: var(--site-color-primary);
    box-shadow: 0 20px 40px rgba(var(--site-color-primary-rgb, 0, 0, 0), 0.15);
}

/* ---- Cart Sidebar ---- */
#cart-sidebar.open {
    transform: translateX(0);
}

/* Cart item in sidebar */
.cart-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.cart-item img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: #f9fafb;
    border-radius: 0.5rem;
}

.cart-item-info {
    flex: 1;
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.cart-item-qty button {
    width: 28px;
    height: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    transition: all 0.2s;
}

.cart-item-qty button:hover {
    border-color: var(--site-color-primary);
    color: var(--site-color-primary);
}

.cart-item-qty span {
    min-width: 24px;
    text-align: center;
    font-weight: 600;
}

/* ---- Search suggestions ---- */
#search-suggestions .suggestion-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
}

#search-suggestions .suggestion-item:hover {
    background-color: #f5f5f5;
}

#search-suggestions .suggestion-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 0.25rem;
    background: #f9fafb;
}

/* ---- Image Gallery ---- */
.gallery-thumbs img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    cursor: pointer;
    padding: 4px;
    background: white;
    transition: border-color 0.2s;
}

.gallery-thumbs img:hover,
.gallery-thumbs img.active {
    border-color: var(--site-color-primary);
}

/* ---- Flash messages ---- */
.flash-message {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.flash-message.success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.flash-message.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.flash-message.info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* ---- Formulario de contacto reusable (templates/contact-form.php) ----
   Estilos de input + texto apagado. El wrapper visual (tarjeta, banda de color)
   lo provee cada consumer (contacto.php, home.php, etc). */
.contact-input {
    display: block;
    width: 100%;
    background: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: var(--site-color-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    outline: none;
    transition: box-shadow 0.2s;
}
.contact-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--site-color-primary-rgb), 0.18);
}
.contact-input::placeholder {
    color: #9ca3af;
}
.contact-muted {
    color: var(--site-color-text);
    opacity: 0.6;
}

/* ---- Bloque "Hablemos." (home) ----
   Banda con form de contacto que vive después de Marcas. Todos los colores y el
   tamaño del título salen de CSS vars seteadas por el theme — el operador los
   ajusta desde Configuración → Diseño → "Sección de contacto". */
.contact-section {
    background-color: var(--site-contact-bg, #E2EBF4);
}
.contact-section-pretitle {
    color: var(--site-contact-text-color, var(--site-color-text));
    opacity: 0.75;
}
.contact-section-title {
    color: var(--site-contact-title-color, var(--site-color-primary));
    /* clamp: en mobile no baja de 1.875rem (30px); en desktop respeta el size del
       slider con tope absoluto de 72px (que es el max del slider en el admin). */
    font-size: clamp(1.875rem, 5vw, var(--site-contact-title-size, 36px));
    line-height: 1.15;
}
.contact-section-text {
    color: var(--site-contact-text-color, var(--site-color-text));
}

/* ---- Spec cards (ficha técnica del producto) ----
   Grid modular: cada spec en su propia mini-card con ícono inferido por
   keyword (ver spec_icon_for_key en includes/functions.php). El consumer
   arma el grid responsive con clases Tailwind. */
.spec-card {
    /* Fondo: color primary del tema al 5% (95% transparente) — apenas
       perceptible, da una tinta de marca sin pesar visualmente. */
    background: rgba(var(--site-color-primary-rgb), 0.05);
    border: 1px solid #f0f0f0;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.spec-card:hover {
    border-color: var(--site-color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
.spec-card-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: rgba(var(--site-color-primary-rgb), 0.08);
    color: var(--site-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.625rem;
}
.spec-card-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin: 0 0 0.125rem 0;
    line-height: 1.3;
}
.spec-card-value {
    font-size: 0.95rem;
    font-weight: 400;
    color: #111827;
    line-height: 1.35;
    word-break: break-word;
    margin: 0;
}

/* ---- Order Status Badge ---- */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge.pendiente { background: #fef3c7; color: #92400e; }
.status-badge.confirmado { background: #dbeafe; color: #1e40af; }
.status-badge.en_preparacion { background: #e0e7ff; color: #3730a3; }
.status-badge.enviado { background: #d1fae5; color: #065f46; }
.status-badge.entregado { background: #f0fdf4; color: #166534; }
.status-badge.cancelado { background: #fef2f2; color: #991b1b; }

/* =============================================
   Social Carousel (compartido por Instagram y YouTube)
   ---
   Patrón: track horizontal con scroll-snap, flechas prev/next en los extremos
   y dots como indicador secundario. Cantidad de cards visibles responsive:
     - mobile (<640px):     1 card (peek mínimo de la siguiente)
     - sm (640px+):         2 cards
     - md (768px+):         3 cards
     - lg (1024px+):        4 cards
   Gap consistente de 1.25rem entre cards.
   ============================================= */
.social-carousel {
    position: relative;
}

.social-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0 1rem;  /* 10px arriba: absorbe el hover-lift más alto del sitio (product-card: translateY(-6px) + border 1px). */
    scrollbar-width: none;
}
.social-track::-webkit-scrollbar { display: none; }

.social-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    /* Ancho responsive: 1 / 2 / 3 / 4 cards visibles según viewport */
    width: calc(100% - 3rem);                    /* mobile: 1 con peek de la siguiente */
}
@media (min-width: 640px) {
    .social-card { width: calc((100% - 1.25rem) / 2); }
}
@media (min-width: 768px) {
    .social-card { width: calc((100% - 2.5rem)  / 3); }
}
@media (min-width: 1024px) {
    .social-card { width: calc((100% - 3.75rem) / 4); }
}

/* Flechas de navegación */
.social-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
    z-index: 5;
    cursor: pointer;
    transition: all 0.25s ease;
    opacity: 1;
}
.social-arrow:hover {
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.08);
}
.social-arrow.is-prev { left: -22px; }
.social-arrow.is-next { right: -22px; }
.social-arrow[disabled],
.social-arrow.is-disabled {
    opacity: 0;
    pointer-events: none;
}
/* En viewports muy chicos las flechas estorban — solo dots en mobile */
@media (max-width: 639px) {
    .social-arrow { display: none; }
}

/* Dots como indicador secundario */
.social-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.social-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #d1d5db;
    transition: background-color 0.25s ease, width 0.25s ease;
    cursor: pointer;
    border: 0;
    padding: 0;
}
.social-dot.is-active {
    width: 1.5rem;
    background: #1f2937;
}
@media (min-width: 768px) {
    .social-dots { display: none; }
}

/* =============================================
   Instagram Feed (specifics: ratio + ig-tinted accents)
   ============================================= */
.ig-feed .ig-media {
    aspect-ratio: 1 / 1;
}

/* =============================================
   YouTube Feed (specifics: red-tinted dots when active)
   ============================================= */
.yt-feed .social-dot.is-active {
    background: #dc2626;
}
.yt-feed .yt-card iframe {
    display: block;
}

/* =============================================
   Pretty Scroll — barra de scroll fina, tintada con el color primario del
   sitio y con fallback gris si la variable no está cargada. Aplicable a
   cualquier contenedor con overflow vertical. DRY.
   ============================================= */
.pretty-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--site-color-primary-rgb, 100, 116, 139), 0.35) transparent;
}
.pretty-scroll::-webkit-scrollbar       { width: 6px; height: 6px; }
.pretty-scroll::-webkit-scrollbar-track { background: transparent; }
.pretty-scroll::-webkit-scrollbar-thumb {
    background: rgba(var(--site-color-primary-rgb, 100, 116, 139), 0.35);
    border-radius: 3px;
    transition: background-color .2s ease;
}
.pretty-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--site-color-primary-rgb, 100, 116, 139), 0.7);
}

/* =============================================
   Sidebar de Categorías (usado en pages/productos.php y pages/categoria.php
   vía templates/category-sidebar.php).
   ---
   Desktop (lg+): sticky al viewport. El elemento que scrollea es
   `.category-sidebar-inner` — `max-height` y `overflow-y:auto` viven ahí
   directamente para evitar la cadena flex de 3 niveles (que se rompe en el
   wrapper collapsible — su `max-height:none` rompe la propagación).

   El gradient overlay del fondo (::after) da feedback visual de "hay más
   contenido abajo". Es pointer-events:none para no interferir con clicks
   sobre los últimos ítems. Se atenúa con el modificador .is-scrolled-end
   (lo setea el template cuando el scroll llegó al final).

   Mobile (<lg): se renderiza colapsado por default con un toggle "Categorías".
   La animación de altura usa max-height para mantenerla CSS-only.
   ============================================= */
.category-sidebar-toggle { display: flex; }     /* visible en mobile */

@media (min-width: 1024px) {
    .category-sidebar {
        position: sticky;
        /* top alineado con el navbar scrolled (4rem = 64px en base.css) + 1rem
           de breathing room. Sin esto, los primeros ítems del árbol quedan
           tapados por el navbar sticky (z:50) al scrollear. */
        top: 5rem;
        align-self: flex-start;
    }
    .category-sidebar-toggle { display: none; }
    .category-sidebar-collapsible {
        max-height: none !important;
        overflow: visible;
    }
    .category-sidebar-inner {
        /* viewport menos top (5rem) menos margen al pie (1.5rem) */
        max-height: calc(100vh - 6.5rem);
    }
}

.category-sidebar-collapsible {
    /* Mobile: animación de despliegue. La altura máxima alcanza con cubrir
       el contenido razonable de categorías (suficiente para cualquier árbol).
       En desktop la regla de arriba la neutraliza. */
    overflow: hidden;
    transition: max-height .3s ease;
}
.category-sidebar-collapsible.is-collapsed { max-height: 0; }
.category-sidebar-collapsible.is-expanded  { max-height: 2000px; }

.category-sidebar-inner {
    position: relative;
    overflow-y: auto;
    padding-right: 6px;     /* respiro para que el scroll no tape texto */
}
.category-sidebar-inner::after {
    /* Fade gradient al pie — indica visualmente "hay más abajo". Solo en
       desktop (donde tiene altura limitada); en mobile colapsable molesta. */
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    height: 2rem;
    margin-top: -2rem;
    background: linear-gradient(to bottom, transparent, var(--site-color-bg, #ffffff));
    pointer-events: none;
    transition: opacity .25s ease;
}
.category-sidebar-inner.is-scrolled-end::after { opacity: 0; }
@media (max-width: 1023px) {
    .category-sidebar-inner::after { display: none; }
}