/*
 * BAUMARKT - Custom CSS
 * Complementa TailwindCSS. Compatible con Chrome, Brave, Edge, Safari (iOS/macOS), Firefox.
 * Optimizado para móvil y escritorio.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   VARIABLES DE MARCA
═══════════════════════════════════════════════════════════════════════════ */
:root {
    --bm-red:   #E87722;
    --bm-dark:  #091248;
    --bm-gray:  #A6A6A6;
    --bm-light: #F3F4F6;
    --navbar-h: 64px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET / BASE CROSS-BROWSER
═══════════════════════════════════════════════════════════════════════════ */

/* Scroll suave – Safari 15.4+, Chrome, Edge */
html {
    scroll-behavior: smooth;
    /* Evitar salto al abrir/cerrar modales con overflow:hidden en body */
    overflow-x: hidden;
}

/* Prevenir zoom automático en iOS al enfocar inputs (font-size < 16px) */
@supports (-webkit-touch-callout: none) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Quitar highlight azul al tocar en iOS/Android */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Eliminar apariencia nativa en inputs para consistencia cross-browser */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Selects con apariencia consistente (Safari los estiliza diferente) */
select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A6A6A6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px !important;
}

/* Botones: eliminar 300 ms delay en mobile y quitar estilos nativos */
button,
[role="button"],
a {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

/* Texto seleccionable normalmente */
p, h1, h2, h3, h4, h5, h6, span, li, label, td, th {
    -webkit-user-select: text;
    user-select: text;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR PERSONALIZADA (Chrome, Edge, Brave – no aplica a Safari/Firefox)
═══════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar        { width: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--bm-gray); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--bm-dark); }

/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════════════════════════ */
#navbar {
    /* Safari necesita -webkit-sticky para position: sticky */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 50;
    /* Evitar subpixel rendering bug en Safari con sticky + shadow */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.navbar-scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════════════════ */
.hero-bg {
    background-color: var(--bm-dark);
    background-image:
        radial-gradient(circle at 20% 50%, rgba(232, 119, 34, 0.14) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(232, 119, 34, 0.08) 0%, transparent 40%),
        linear-gradient(135deg, #091248 0%, #060C30 100%);
    /* Borde inferior limpio: degradado hacia el siguiente bloque */
    border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMACIÓN FADE-IN AL SCROLL
═══════════════════════════════════════════════════════════════════════════ */
.fade-in {
    opacity: 0;
    -webkit-transform: translateY(18px);
    transform: translateY(18px);
    -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease;
    /* Optimizar para GPU en todos los navegadores */
    will-change: opacity, transform;
}
.fade-in.visible {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

/* Respetar preferencia de movimiento reducido (accesibilidad) */
@media (prefers-reduced-motion: reduce) {
    .fade-in {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
        -webkit-transition: none;
        transition: none;
    }
    html {
        scroll-behavior: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS DE PRODUCTOS
═══════════════════════════════════════════════════════════════════════════ */
.card-hover {
    -webkit-transition: -webkit-transform 0.2s ease, box-shadow 0.2s ease;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
    /* Corrige artefactos de borde en Safari */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.card-hover:hover {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.11);
}

/* Imagen del producto: ratio mas compacto + mas padding interior
   (mantiene la calidad percibida al mostrar las imagenes mas pequenas) */
.product-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%; /* contenedor cuadrado: las fotos cuadradas llenan el ancho */
    overflow: hidden;
    background: #ffffff;
}
.product-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    padding: 7.5%;       /* imagen al 85% del contenedor */
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
}
.card-hover:hover .product-img-wrap img {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGES Y ETIQUETAS
═══════════════════════════════════════════════════════════════════════════ */
.badge-category {
    display: inline-block;
    background: #f3f4f6;
    color: var(--bm-dark);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    /* Asegurar que no se corte el texto en Safari */
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TÍTULOS DE SECCIÓN (línea decorativa inferior)
═══════════════════════════════════════════════════════════════════════════ */
.section-title::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3px;
    background: var(--bm-red);
    margin-top: 0.5rem;
    border-radius: 2px;
}
.section-title.center::after {
    margin-left: auto;
    margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTONES
═══════════════════════════════════════════════════════════════════════════ */
.btn-primary {
    background-color: var(--bm-red);
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 0.5rem;
    -webkit-transition: background-color 0.2s, -webkit-transform 0.15s;
    transition: background-color 0.2s, transform 0.15s;
    /* Evitar que el botón se deforme en Safari mobile */
    -webkit-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    line-height: 1.25;
    text-decoration: none;
}
.btn-primary:hover {
    background-color: #C8611A;
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}
.btn-primary:active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.btn-outline {
    border: 2px solid var(--bm-red);
    color: var(--bm-red);
    font-weight: 600;
    padding: 0.7rem 1.4rem;
    border-radius: 0.5rem;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 0.5rem;
    -webkit-transition: background-color 0.2s, color 0.2s;
    transition: background-color 0.2s, color 0.2s;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.25;
}
.btn-outline:hover {
    background-color: var(--bm-red);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMULARIOS – FOCUS CROSS-BROWSER
═══════════════════════════════════════════════════════════════════════════ */
.form-input,
.form-textarea {
    /* Evitar que Safari añada bordes propios */
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0.5rem;
}
.form-input:focus,
.form-textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.2);
    border-color: var(--bm-red) !important;
}

/* Firefox: quitar inner-shadow en inputs */
input::-moz-focus-inner {
    border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLA DE VARIANTES
═══════════════════════════════════════════════════════════════════════════ */
.variants-table {
    width: 100%;
    border-collapse: collapse;
    /* Scroll horizontal en mobile sin romper el layout */
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) {
    .variants-table {
        display: table;
        overflow: visible;
    }
}
.variants-table th {
    background: var(--bm-dark);
    color: #fff;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.65rem 1rem;
    white-space: nowrap;
}
.variants-table td {
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}
.variants-table tr:last-child td { border-bottom: none; }
.variants-table tr:hover td { background: #f9fafb; }

/* ═══════════════════════════════════════════════════════════════════════════
   CARRITO DRAWER
═══════════════════════════════════════════════════════════════════════════ */
#cart-drawer {
    /* Safari: asegurar que el fixed funcione correctamente */
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    /* GPU layer para animación fluida */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#cart-drawer.translate-x-full {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
#cart-drawer:not(.translate-x-full) {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

/* Scroll suave dentro del drawer en iOS */
#cart-item-list,
.cart-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Body bloqueado cuando el drawer está abierto */
body.overflow-hidden {
    overflow: hidden;
    /* En iOS Safari, overflow:hidden en body no bloquea el scroll */
    position: fixed;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPINNER / LOADING
═══════════════════════════════════════════════════════════════════════════ */
.spinner {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--bm-red);
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    -webkit-animation: spin 0.7s linear infinite;
    animation: spin 0.7s linear infinite;
}
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes spin          { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

/* Spinner inline en botones */
@-webkit-keyframes btn-spin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes btn-spin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.animate-spin {
    -webkit-animation: btn-spin 0.8s linear infinite;
    animation: btn-spin 0.8s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN PANEL
═══════════════════════════════════════════════════════════════════════════ */
.admin-sidebar {
    background: var(--bm-dark);
    min-height: 100vh;
    /* Fallback para Safari que no acepta dvh */
    min-height: -webkit-fill-available;
}
.admin-nav-link {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #d1d5db;
    -webkit-transition: background-color 0.15s, color 0.15s;
    transition: background-color 0.15s, color 0.15s;
    text-decoration: none;
}
.admin-nav-link:hover,
.admin-nav-link.active {
    background-color: rgba(232, 119, 34, 0.15);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MÓVIL: AJUSTES ESPECÍFICOS
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Reducir padding del hero en móvil */
    .hero-bg .max-w-7xl {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    /* Cards más compactas en móvil */
    .card-hover:hover {
        -webkit-transform: none;
        transform: none;
        box-shadow: none;
    }

    /* Evitar overflow horizontal en tablas */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    /* Botones full-width más accesibles en mobile */
    .btn-primary,
    .btn-outline {
        padding: 0.85rem 1.25rem;
        font-size: 0.95rem;
    }

    /* Drawer ocupa pantalla completa en móvil pequeño */
    #cart-drawer {
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SAFARI-ESPECÍFICO: fixes de rendering
═══════════════════════════════════════════════════════════════════════════ */

/* Safari: border-radius + overflow:hidden en imágenes/cards */
.product-img-wrap,
#cart-drawer {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* SVG rendering más nítido en Retina/Safari */
svg {
    shape-rendering: geometricPrecision;
}

/* Placeholder color consistente entre navegadores */
::-webkit-input-placeholder { color: #9ca3af; opacity: 1; }
::-moz-placeholder           { color: #9ca3af; opacity: 1; }
:-ms-input-placeholder       { color: #9ca3af; }
::placeholder                { color: #9ca3af; opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT – ocultar elementos interactivos al imprimir
═══════════════════════════════════════════════════════════════════════════ */
@media print {
    #navbar,
    #cart-drawer,
    #cart-backdrop,
    .fixed,
    footer .bg-bm-red {
        display: none !important;
    }
}