/*
 * css/custom-style.css
 * Estilos personalizados (Solución Forzada y Estable)
 */

/* 1. Estilo del Logo */
.logo-text {
    font-size: 28px !important;
    font-weight: bold;
    letter-spacing: 2px;
}
.bg-dark {
    background-color: #000000 !important;
}

/* 2. SEPARADORES Y LAYOUT HORIZONTAL */
/* Solo aplica en pantallas grandes (desktop) */
@media (min-width: 992px) { 
    
    /* ¡ESTA ES LA REGLA CLAVE!
      Forzamos a la lista de links (UL) a ser horizontal.
      El apilamiento que muestras es porque está en 'column'.
    */
    .main-nav-links {
        flex-direction: row !important;
    }
    
    /* Hacemos que cada item (LI) sea un contenedor flex
      para alinear el separador y el link.
    */
    .main-nav-links .nav-item {
        display: flex;
        align-items: center; /* Centra el | y el link verticalmente */
    }
    
    /* El separador '|'
      Aparece ANTES de cada item, excepto el primero.
    */
    .main-nav-links .nav-item:not(:first-child)::before {
        content: "|";
        color: rgba(255, 255, 255, 0.3); /* Blanco suave */
        
        /* Espacio ENTRE el | y el texto del link */
        padding-right: 1.2rem; 
    }

    /* El link (A)
      Le quitamos el padding izquierdo (ahora lo controla el ::before)
      y le damos padding derecho para separarlo del siguiente.
    */
    .main-nav-links .nav-link {
        padding-left: 0;
        padding-right: 1.2rem;
    }
    
    /* El primer link no tiene separador,
      así que necesita su propio padding izquierdo.
    */
    .main-nav-links .nav-item:first-child .nav-link {
        padding-left: 1.2rem;
    }
}

/* 3. Ajuste de iconos */
.navbar-icons-container a {
    transition: color 0.2s ease-in-out;
}

.navbar-icons-container a:hover {
    color: #cccccc !important; 
}

/*
 * --- Estilos del Footer ---
 */

.footer-container {
    background-color: #212529; /* Un bg-dark un poco más claro, o usa #000 */
    color: #adb5bd; /* Un gris suave para el texto */
}

/* 1. Placeholder del Logo */
.footer-logo-placeholder {
    width: 100%;
    max-width: 200px;
    height: 150px;
    background-color: #6c757d; /* Gris como en la imagen */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
}

/* 2. Títulos de Columna */
.footer-title {
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* 3. Enlaces del Footer */
.footer-links li {
    margin-bottom: 8px;
}
.footer-links a {
    text-decoration: none;
    color: #adb5bd;
    transition: color 0.2s;
}
.footer-links a:hover {
    color: #fff;
    text-decoration: underline;
}

/* 4. Iconos Sociales */
.footer-social-icons a {
    color: #fff;
    margin-right: 15px;
    transition: color 0.2s;
    
    /* --- ¡NUEVAS REGLAS CLAVE PARA QUITAR LAS LÍNEAS! --- */
    border: none !important;        /* Asegura que no haya borde */
    outline: none !important;       /* Asegura que no haya contorno al hacer focus */
    text-decoration: none !important; /* Asegura que no haya subrayado */
}
.footer-social-icons a:hover {
    color: #cccccc; /* Un gris claro al pasar el mouse */
}

/* 5. Línea Divisoria */
.footer-divider {
    border-color: #495057; /* Un gris un poco más visible */
    margin-top: 1rem;
}

/* 6. Barra Inferior */
.footer-bottom-bar {
    font-size: 0.9rem;
}

/* 7. Iconos de Pago */
.footer-payment-icons i {
    color: #fff;
    margin-left: 10px;
    
    /* --- OPCIONAL: QUITAR CUALQUIER POSIBLE BORDE EN ICONOS DE PAGO TAMBIÉN --- */
    border: none !important;
    outline: none !important;
}
/*
 * --- Estilos del Offcanvas (Carrito) ---
 */

/* Forzamos el color de fondo para que sea idéntico 
  al 'bg-dark' de Bootstrap y tu navbar.
*/
.offcanvas.text-bg-dark {
    background-color: #212529 !important; 
}

/* Pequeño borde para las imágenes de los productos 
  para que se vean bien sobre el fondo oscuro.
*/
.cart-item-img {
    border: 1px solid #495057; /* Un gris sutil */
}

/* * --- ¡NUEVO! Estilos para Carrito Vacío (Mejora) ---
 */

.empty-cart-icon-container {
    /* Creamos un círculo grande y sutil para el icono */
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.empty-cart-icon-container .bi {
    font-size: 4.5rem; /* 72px */
    line-height: 1; /* Ajuste para centrar el icono */
}

/* Ajuste del botón 'outline-light' */
.offcanvas .btn-outline-light {
    border-width: 2px; /* Un poco más grueso */
    font-weight: 600; /* Más bold */
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    transition: all 0.3s ease;
}

.offcanvas .btn-outline-light:hover {
    background-color: #fff;
    color: #212529; /* El fondo oscuro al hacer hover */
}

.btn-success {
    font-family: 'Poppins', sans-serif;
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #771c1c;
    --bs-btn-border-color: #771c1c;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #491111;
    --bs-btn-hover-border-color: #491111;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #771c1c;
    --bs-btn-active-border-color: #771c1c;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #771c1c;
    --bs-btn-disabled-bg: #771c1c;
    --bs-btn-disabled-border-color: #771c1c;
    padding: 10px 30px;
    font-size: 1.2rem;
    border-radius: 50px; /* <--- Este es el cambio */
    text-decoration: none;
}

.btn-custom-red{
    background-color: #771c1c !important;
       font-family: 'Poppins', sans-serif;
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #771c1c;
    --bs-btn-border-color: #771c1c;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #491111;
    --bs-btn-hover-border-color: #491111;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #771c1c;
    --bs-btn-active-border-color: #771c1c;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #423232;
    --bs-btn-disabled-border-color: #423232;
    padding: 2px 25px !important;
    border-radius: 5px 5px 5px 5px !important;
    font-size: 1.1rem;
    text-decoration: none; 
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #771c1c;
    --bs-btn-border-color: #771c1c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #491111;
    --bs-btn-hover-border-color: #491111;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #491111;
    --bs-btn-active-border-color: #491111;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #771c1c;
    --bs-btn-disabled-border-color: #771c1c;
}

/*
 * --- Estilos para Notificaciones Flotantes (Toast) ---
 */

/* Asegura que el contenedor de toasts esté arriba de todo */
.toast-container {
    z-index: 1100 !important;
}

/* Diseño personalizado para la notificación */
.toast.text-bg-success {
    /* Un verde más elegante que el de Bootstrap */
    background-color: #28a745 !important;
    border-radius: 0.375rem;
}
.toast.text-bg-danger {
    /* Usamos tu rojo personalizado */
    background-color: #771c1c !important;
    border-radius: 0.375rem;
}

.toast {
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.15);
}

.toast-body {
    display: flex;
    align-items: center;
    font-weight: 600;
}

.toast-body .bi {
    font-size: 1.25rem; /* Icono un poco más grande */
}