/* Importamos fuente (opcional pero recomendada) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Montserrat:wght@300;400;600&display=swap');

:root {
    /* Tu Paleta Exacta */
    --color-negro: #1C1C1C;
    --color-gris: #8E8383;
    --color-marfil: #F4F1EC;
    --color-dorado: #CE9500;
    --color-dorado-hover: #b38200;
}

body {
    background-color: var(--color-negro);
    color: var(--color-marfil);
    font-family: 'Montserrat', sans-serif;
}

h1, h2, h3, .brand-font {
    font-family: 'Cinzel', serif;
}

/* --- OVERRIDES DE BOOTSTRAP (Personalización) --- */

/* Navegación Dorada */
.bg-gold-custom {
    background-color: var(--color-dorado) !important;
}

.nav-link {
    color: var(--color-negro) !important;
    font-weight: 600;
    text-transform: uppercase;
}

.nav-link:hover {
    color: var(--color-marfil) !important;
}

/* Tarjetas (Cards) */
.card-custom {
    background-color: #252525; /* Un poco más claro que el fondo */
    border: 1px solid #333;
    transition: transform 0.3s, border-color 0.3s;
}

.card-custom:hover {
    transform: translateY(-5px);
    border-color: var(--color-dorado);
}

.card-title {
    color: var(--color-marfil);
}

.card-price {
    color: var(--color-dorado);
    font-weight: bold;
    font-size: 1.25rem;
}

/* Botones Personalizados */
.btn-fenix {
    border: 2px solid var(--color-dorado);
    color: var(--color-dorado);
    background: transparent;
    border-radius: 0; /* Bordes cuadrados elegantes */
    font-weight: 600;
    transition: all 0.3s;
}

.btn-fenix:hover {
    background-color: var(--color-dorado);
    color: var(--color-negro);
}

.btn-hero {
    background-color: var(--color-dorado);
    color: var(--color-negro);
    border-radius: 30px;
    padding: 12px 30px;
    font-weight: bold;
    border: none;
}
.btn-hero:hover {
    background-color: var(--color-marfil);
}

/* --- INTERACTIVIDAD SEARCH (Mantenemos tu efecto) --- */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    width: 0;
    opacity: 0;
    transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
    background: var(--color-negro);
    border: 1px solid var(--color-dorado);
    border-radius: 30px;
    padding: 8px 20px;
    color: var(--color-marfil);
    outline: none;
    position: absolute;
    right: 100%; /* Se expande hacia la izquierda desde el botón */
    margin-right: 10px;
    font-size: 0.95rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.search-box.active .search-input {
    width: 260px;
    opacity: 1;
    border-color: var(--color-dorado-hover);
    box-shadow: 0 0 15px rgba(206, 149, 0, 0.15);
}

@media (max-width: 576px) {
    .search-box.active .search-input {
        width: 200px; /* Reducimos el ancho en móviles para que no se salga */
    }
}

/* --- RESULTADOS DE BÚSQUEDA AJAX --- */
.search-results-dropdown {
    position: absolute;
    top: 100%;
    /* Se alinea igual que el input expandido */
    right: 100%; 
    margin-right: 10px;
    width: 260px;
    background: var(--color-negro);
    border: 1px solid var(--color-dorado);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    display: none; /* Oculto por defecto */
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    border-radius: 20px; /* Bordes redondeados para coincidir con el input */
    padding: 5px 0;
}

.search-results-dropdown.active {
    display: block;
}

/* Corrección específica para Móvil: Reseteamos posición para que sea visible */
#searchResultsMobile {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-right: 0 !important;
    width: 100% !important;
    background: transparent;
    border: none;
    box-shadow: none;
    max-height: 60vh;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-decoration: none;
    color: var(--color-marfil);
    transition: background 0.2s;
}

.search-result-item:hover {
    background: #333;
    color: var(--color-dorado);
}

.search-result-item:last-child {
    border-bottom: none;
}

.icon-btn {
    background: none;
    border: none;
    color: var(--color-dorado);
    font-size: 1.2rem;
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.2s, color 0.2s;
    display: flex;
    align-items: center;
}

.icon-btn:hover {
    color: var(--color-marfil);
    transform: scale(1.1);
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    right: -8px;
    background-color: var(--color-dorado);
    color: var(--color-negro);
    font-size: 0.7rem;
    font-size: 0.75rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 2px 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--color-negro);
}

/* --- CAROUSEL NAVIGATION --- */
.carousel-control-prev, .carousel-control-next {
    width: 60px;
    opacity: 0.6;
    transition: all 0.3s ease;
    z-index: 10;
}
.carousel-control-prev:hover, .carousel-control-next:hover {
    opacity: 1;
    background: rgba(0,0,0,0.3); /* Fondo sutil al pasar el mouse */
}
.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 2.5rem;
    height: 2.5rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* --- HEADER LAYOUT & RESPONSIVE --- */
.top-bar {
    background-color: var(--color-negro);
    padding: 10px 0;
    position: relative;
    z-index: 1000;
}

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

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

.logo-img {
    height: 110px; /* Altura Desktop Aumentada */
    width: auto;
    max-height: 100%; /* Asegura que no exceda el contenedor */
    transition: height 0.3s ease;
}

/* Hamburger Button Styling */
.custom-toggler {
    border: 1px solid var(--color-dorado);
    border-radius: 5px;
    padding: 5px 10px;
    transition: all 0.3s ease;
}
.custom-toggler:hover {
    background-color: var(--color-dorado);
    color: var(--color-negro) !important;
}

/* Desktop Navigation (Gold Bar) */
.navbar-gold {
    background-color: var(--color-dorado);
    padding: 0;
    border-bottom: 1px solid #b38200;
}
.nav-link-custom {
    display: inline-block;
    color: var(--color-negro);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 25px;
    font-size: 0.9rem;
    transition: background 0.3s;
}
.nav-link-custom:hover {
    background-color: rgba(255,255,255,0.2);
    color: var(--color-negro);
}

/* Desktop Dropdown Styling */
.dropdown-menu-dark {
    background-color: var(--color-negro);
    border: 1px solid var(--color-dorado);
}
.hover-gold:hover {
    background-color: transparent;
    color: var(--color-dorado) !important;
    padding-left: 1.5rem; /* Efecto de desplazamiento suave */
    transition: all 0.2s ease;
}
/* Hacer que el dropdown se abra con Hover en Desktop */
@media (min-width: 992px) {
    .hover-dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* Pegado a la barra */
    }
}

/* Desktop Layout (Default) */
.header-layout {
    display: flex;
    align-items: center;
    position: relative; /* Necesario para el centrado absoluto */
}

/* Centrado Logo Desktop y Ajustes */
@media (min-width: 992px) {
    .header-layout {
        min-height: 130px; /* Reservamos altura para que el logo quepa sin salirse */
    }
    .header-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); /* Centrado perfecto X e Y */
    }
    .header-right {
        margin-left: auto; /* Empuja los iconos a la derecha */
    }
}

/* Mobile Layout (< 992px) */
@media (max-width: 991.98px) {
    /* Grid de 3 columnas para centrar logo perfectamente */
    .header-layout {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    .header-left { justify-self: start; }
    .header-center { justify-self: center; }
    .header-right { justify-self: end; }

    .logo-img {
        height: 75px; /* Aumentado para que se vea grande en móvil */
    }
}

/* Mobile Search Slide-Down */
.mobile-search-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-negro);
    padding: 15px;
    border-bottom: 2px solid var(--color-dorado);
    transform: translateY(-20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.mobile-search-wrapper.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.border-gold {
    border-color: var(--color-dorado) !important;
}
.btn-gold {
    background-color: var(--color-dorado);
    color: var(--color-negro);
    border: none;
}

/* --- PROFESSIONAL MOBILE MENU (Offcanvas) --- */
.offcanvas {
    background-color: var(--color-negro);
    /* border-right: 2px solid var(--color-dorado); Opcional, Bootstrap ya tiene borde */
}

.offcanvas-header {
    background-color: var(--color-negro);
    border-bottom: 1px solid #333;
}

.mobile-nav-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--color-marfil);
    text-decoration: none;
    display: block;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(142, 131, 131, 0.2); /* Gris humo transparente */
    transition: all 0.3s ease;
}

.mobile-nav-link:hover {
    background-color: rgba(206, 149, 0, 0.1); /* Dorado muy sutil */
    color: var(--color-dorado);
    padding-left: 30px; /* Efecto de desplazamiento */
    border-left: 4px solid var(--color-dorado); /* Borde indicador activo */
}

/* Sub-links para el acordeón móvil */
.mobile-sub-link {
    display: block;
    padding: 10px 0;
    color: #ccc; /* Gris claro */
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s;
}
.mobile-sub-link:hover {
    color: var(--color-dorado);
}

/* --- FLOATING CART & OFFCANVAS --- */
.floating-btn-cart {
    width: 60px; 
    height: 60px; 
    background-color: var(--color-dorado); 
    border-radius: 50%; 
    z-index: 1000; 
    margin-right: 90px; /* Separación del botón de WhatsApp */
    transition: all 0.3s ease;
    /* Estado inicial oculto */
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
}
.floating-btn-cart.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}
.floating-btn-cart:hover {
    transform: scale(1.1);
    background-color: var(--color-marfil);
}
.floating-btn-cart:hover i {
    color: var(--color-negro) !important;
}

/* Items del carrito */
.cart-item {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
}
.cart-item-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid var(--color-dorado);
}

/* Botones pequeños del carrito (+ / -) */
.btn-outline-gold {
    border: 1px solid var(--color-dorado);
    color: var(--color-dorado);
    background: transparent;
    transition: all 0.2s;
}
.btn-outline-gold:hover {
    background: var(--color-dorado);
    color: var(--color-negro);
}

/* Animación de rebote para el carrito */
@keyframes cartBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.floating-btn-cart.bounce {
    animation: cartBounce 0.4s ease-in-out;
}

/* --- FILTROS Y SLIDER --- */
.custom-range::-webkit-slider-thumb {
    background: var(--color-dorado);
    border: 2px solid var(--color-negro);
    box-shadow: 0 0 5px rgba(206, 149, 0, 0.5);
}

.custom-range::-webkit-slider-runnable-track {
    background: #333;
}

.custom-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(206, 149, 0, 0.3);
}

.form-select:focus {
    border-color: var(--color-dorado);
    box-shadow: 0 0 0 0.25rem rgba(206, 149, 0, 0.25);
}

/* Animación Fade In para Grid */
@keyframes fadeInGrid {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-grid {
    animation: fadeInGrid 0.4s ease-out forwards;
}

/* --- BOTÓN VOLVER ARRIBA --- */
.btn-back-to-top {
    position: fixed;
    bottom: 100px; /* Encima del botón de WhatsApp */
    right: 24px;   /* Alineado con el margen m-4 de Bootstrap (1.5rem) */
    width: 45px;
    height: 45px;
    background-color: var(--color-negro);
    color: var(--color-dorado);
    border: 2px solid var(--color-dorado);
    border-radius: 50%;
    z-index: 990; /* Debajo de modales pero sobre contenido */
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.btn-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-back-to-top:hover {
    background-color: var(--color-dorado);
    color: var(--color-negro);
    transform: translateY(-5px);
}

/* --- PLACEHOLDERS GLOBALES --- */
::placeholder {
    color: var(--color-marfil) !important;
    opacity: 0.8;
}

/* --- FIX FORM FLOATING DARK THEME --- */
.form-floating > label {
    background-color: transparent !important; /* Quita el fondo blanco */
    color: var(--color-marfil);
}

/* Fix: Eliminar el fondo blanco que Bootstrap agrega automáticamente al label flotante */
.form-floating > label::after {
    background-color: transparent !important;
}

/* Fix: Ocultar placeholder real en form-floating cuando no tiene foco para evitar duplicidad con el label */
.form-floating > .form-control:not(:focus)::placeholder {
    color: transparent !important;
    opacity: 0;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--color-dorado); /* Color dorado al subir */
    background-color: transparent !important;
    opacity: 1;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    backdrop-filter: none; /* Asegura que no haya efectos extraños */
}