/* =========================================
   1. POPUP DE CONFIRMACIÓN (TOAST)
   ========================================= */
.toast-notification {
    position: fixed;
    top: 20px;
    right: -400px; /* Oculto inicialmente */
    width: 350px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    z-index: 9999;
    transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote suave */
    border-left: 4px solid #000;
    padding: 15px;
}

.toast-notification.show { right: 20px; }

.toast-header { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.9rem; }
.toast-body { display: flex; gap: 15px; align-items: center; margin-bottom: 15px; }
.toast-body img { width: 50px; height: 60px; object-fit: cover; }
.toast-info p { margin: 0; font-weight: bold; font-family: 'Marcellus', serif; }

.btn-view-cart {
    display: block; width: 100%; background: #dcc8b6; color: #000; 
    text-align: center; padding: 10px; text-decoration: none; 
    font-family: 'Marcellus'; font-weight: bold; text-transform: uppercase;
    transition: background 0.3s;
}
.btn-view-cart:hover { background: #cbb096; }

/* =========================================
   2. CARRITO LATERAL (SLIDE OUT)
   ========================================= */
.side-cart-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 400px;
    height: 100vh;
    background: #fff;
    z-index: 10000;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    transition: right 0.4s ease;
    display: flex;
    flex-direction: column;
}

.side-cart-panel.open { right: 0; }

#cart-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 9999;
    display: none; /* Oculto por defecto */
    backdrop-filter: blur(2px); /* Efecto borroso pro */
}
#cart-overlay.open { display: block; }

.side-cart-header {
    padding: 20px; border-bottom: 1px solid #eee; 
    display: flex; justify-content: space-between; align-items: center;
}
.side-cart-header h3 { margin: 0; font-family: 'Marcellus'; font-size: 1.2rem; }

.side-cart-items { flex: 1; overflow-y: auto; padding: 20px; }

/* Items dentro del carrito lateral */
.cart-item-mini {
    display: flex; gap: 15px; margin-bottom: 20px; border-bottom: 1px solid #f5f5f5; padding-bottom: 15px;
}
.cart-item-mini img { width: 70px; height: 90px; object-fit: cover; }
.cart-item-info h4 { margin: 0; font-size: 0.9rem; font-weight: bold; }
.cart-item-info span { font-size: 0.8rem; color: #666; display: block; }

.side-cart-footer { padding: 20px; border-top: 1px solid #eee; background: #fff; }

.btn-checkout {
    display: block; width: 100%; background: #000; color: #fff;
    padding: 15px; text-align: center; text-decoration: none;
    text-transform: uppercase; font-weight: bold; letter-spacing: 1px;
    margin-bottom: 10px; transition: opacity 0.3s;
}
.btn-checkout:hover { opacity: 0.8; }

/* =========================================
   3. CHECKOUT PAGE (Estilos específicos)
   ========================================= */
.checkout-steps {
    text-align: center; margin-bottom: 40px; color: #ccc; font-family: 'Marcellus';
}
.checkout-steps span.active { color: #000; font-weight: bold; border-bottom: 2px solid #000; }

.order-summary-card {
    background: #f9f9f9; padding: 30px; border-radius: 5px; position: sticky; top: 20px;
}

/* =========================================
   4. PÁGINA DE CARRITO COMPLETA (DISEÑO MODERNO)
   ========================================= */

.cart-page-container {
    max-width: 1200px;
    margin: 60px auto 100px;
    padding: 0 20px;
}

.cart-page-header { text-align: center; margin-bottom: 50px; }
.cart-page-header h1 { font-family: 'Marcellus', serif; letter-spacing: 2px; font-size: 2rem; margin-bottom: 15px; }
.cart-page-header .divider { width: 50px; height: 2px; background: #000; margin: 0 auto; }

/* LAYOUT GENERAL: Dos columnas en Desktop */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 350px; /* Lista ancha | Resumen fijo */
    gap: 40px;
    align-items: start;
}

/* --- LISTA DE PRODUCTOS --- */
.cart-labels {
    display: grid;
    grid-template-columns: 45% 15% 15% 15% 10%;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    font-family: 'Marcellus';
    font-size: 0.85rem;
    color: #888;
    letter-spacing: 1px;
}

/* TARJETA DE PRODUCTO INDIVIDUAL */
.cart-item-card {
    display: grid;
    grid-template-columns: 100px 1fr 15% 15% 15% 50px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #f5f5f5;
    gap: 15px;
}

.item-image img { width: 100%; height: 120px; object-fit: cover; border-radius: 4px; }

/* Ocultar icono de imagen rota */
img[src=""], img:not([src]) { visibility: hidden; }

.item-info h3 { margin: 0 0 5px; font-size: 1rem; font-family: 'Marcellus'; }
.item-info h3 a { text-decoration: none; color: #000; transition: color 0.3s; }
.item-info h3 a:hover { color: #666; }
.variant-text { font-size: 0.85rem; color: #777; margin: 0; }
.variant-text .separator { margin: 0 5px; color: #ddd; }

.qty-badge {
    border: 1px solid #ddd; padding: 5px 15px; 
    font-family: 'Montserrat', sans-serif; font-size: 0.9rem;
}

.item-price { color: #555; font-weight: 500; }
.item-total { color: #000; font-weight: 700; font-size: 1.05rem; }

.btn-delete {
    background: none; border: none; cursor: pointer; color: #ccc; font-size: 1.1rem;
    transition: color 0.3s;
}
.btn-delete:hover { color: #d00; }

.continue-shopping {
    display: inline-block; margin-top: 30px; text-decoration: none; 
    color: #666; font-size: 0.9rem; border-bottom: 1px solid transparent;
    transition: all 0.3s;
}
.continue-shopping:hover { color: #000; border-color: #000; }

/* --- CAJA DE RESUMEN (Sticky) --- */
.cart-summary-box {
    background: #fdfdfd;
    border: 1px solid #eee;
    padding: 30px;
    position: sticky;
    top: 100px;
}

.cart-summary-box h2 { font-family: 'Marcellus'; font-size: 1.2rem; margin-top: 0; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; }

.summary-row { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 0.95rem; color: #555; }
.summary-row.total { font-weight: 700; color: #000; font-size: 1.3rem; margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px; }

.shipping-note { font-size: 0.8rem; color: #888; margin-bottom: 25px; display: flex; align-items: center; gap: 8px; }

.btn-checkout-page {
    display: block; width: 100%; background: #000; color: #fff; text-align: center;
    padding: 15px; font-family: 'Montserrat'; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; text-decoration: none; transition: background 0.3s;
}
.btn-checkout-page:hover { background: #333; }

.security-badges { text-align: center; margin-top: 15px; font-size: 0.8rem; color: #999; }

/* CARRITO VACÍO */
.empty-cart-state { text-align: center; padding: 80px 0; }
.empty-cart-state i { font-size: 3rem; color: #eee; margin-bottom: 20px; }
.empty-cart-state h2 { font-family: 'Marcellus'; margin-bottom: 10px; }
.btn-dark-action { background: #000; color: #fff; padding: 12px 30px; text-decoration: none; display: inline-block; margin-top: 20px; font-weight: bold; }


/* =========================================
   5. RESPONSIVE (CELULAR) - UNIFICADO
   ========================================= */
@media (max-width: 900px) {
    
    /* A. Ajuste del Carrito Lateral (Slide out) */
    .side-cart-panel { 
        width: 100%; 
        right: -100%;
    }
    
    /* B. Ajuste del Popup (Toast) - CORREGIDO */
    .toast-notification {
        width: 90%; 
        left: 50%; /* Centrado horizontalmente */
        transform: translateX(-50%); 
        top: -200px; /* ESTADO INICIAL: OCULTO ARRIBA */
        right: auto; /* Anulamos el right de escritorio */
        transition: top 0.5s ease;
    }

    /* ESTADO VISIBLE DEL TOAST: BAJA */
    .toast-notification.show {
        top: 20px; 
        right: auto; 
    }

    /* C. PÁGINA DE CARRITO (Grid a Lista) */
    .cart-layout { grid-template-columns: 1fr; gap: 30px; }
    
    .desktop-only { display: none !important; }

    /* Transformar la tarjeta del producto a diseño móvil */
    .cart-item-card {
        grid-template-columns: 90px 1fr; /* Foto | Info */
        grid-template-areas: 
            "img info"
            "img total"
            "img action";
        gap: 10px;
        position: relative;
        padding: 25px 0;
    }

    .item-image { grid-area: img; }
    .item-details { grid-area: info; }
    .item-info h3 { font-size: 0.95rem; }
    
    /* Ocultamos la cantidad numérica simple y mostramos el total */
    .item-qty { grid-area: total; justify-self: start; }
    
    .item-total { 
        grid-area: total; 
        justify-self: end; 
        font-size: 1.1rem;
    }

    .item-remove {
        position: absolute;
        top: 25px; right: 0;
    }

    .cart-summary-box { position: static; background: #fafafa; border: none; }
}

/* =========================================
   NUEVO FOOTER DEL CARRITO LATERAL
   ========================================= */

.side-cart-footer {
    padding: 25px;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.02);
}

.cart-subtotal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
}

.cart-subtotal-row .label { font-weight: 600; font-size: 0.95rem; color: #000; }
.cart-subtotal-row .amount { font-weight: 700; font-size: 1.1rem; }

.cart-divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 15px 0;
}

/* --- CALCULADORA DE ENVÍO --- */
.shipping-calculator { margin: 20px 0; }

.shipping-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 10px;
    color: #333;
}

.zip-input-group {
    display: flex;
    gap: 0; /* Pegados */
}

.zip-input {
    flex: 1;
    border: 1px solid #ccc;
    border-right: none; /* Para unirlo con el botón */
    padding: 10px;
    font-size: 0.9rem;
    border-radius: 4px 0 0 4px; /* Redondear solo izquierda */
    outline: none;
}

.btn-calculate {
    background: #fff;
    color: #000;
    border: 1px solid #000;
    padding: 0 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 0 4px 4px 0; /* Redondear solo derecha */
    transition: all 0.3s;
}

.btn-calculate:hover {
    background: #000;
    color: #fff;
}

.zip-help {
    display: block;
    margin-top: 8px;
    font-size: 0.8rem;
    color: #777;
    text-decoration: none;
}
.zip-help:hover { text-decoration: underline; }

/* --- TOTAL FINAL GRANDE --- */
.cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.label-big { font-size: 1.2rem; font-weight: 700; font-family: 'Marcellus'; }
.amount-big { font-size: 1.5rem; font-weight: 700; font-family: 'Montserrat'; }

.view-more-link {
    font-size: 0.85rem;
    color: #666;
    text-decoration: none;
}
.view-more-link:hover { text-decoration: underline; }

/* =========================================
   ESTILOS DE CHECKOUT (FINALIZAR COMPRA)
   ========================================= */

.checkout-container {
    max-width: 1100px;
    margin: 40px auto 100px; /* Margen inferior amplio */
    padding: 0 20px;
}

/* --- BARRA DE PROGRESO (Pasos) --- */
.checkout-steps {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 60px;
    color: #ccc;
    font-family: 'Marcellus', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.step {
    display: flex;
    align-items: center;
    gap: 10px;
}

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all 0.3s;
}

/* Estado Activo (Paso actual) */
.step.active {
    color: #000;
    font-weight: 700;
}

.step.active .step-number {
    border-color: #000;
    background-color: #000;
    color: #fff;
}

/* --- LAYOUT DE 2 COLUMNAS --- */
.checkout-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr; /* Izquierda más ancha que derecha */
    gap: 60px;
    align-items: start; /* Importante para que el sticky funcione */
}

/* --- FORMULARIO (Izquierda) --- */
.form-section-title {
    font-family: 'Marcellus', serif;
    font-size: 1.3rem;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    color: #000;
}

.form-group {
    margin-bottom: 20px;
}

.form-control {
    width: 100%;
    padding: 14px 18px; /* Inputs altos y cómodos */
    border: 1px solid #e0e0e0;
    background-color: #fff;
    font-size: 0.95rem;
    font-family: 'Montserrat', sans-serif;
    color: #333;
    border-radius: 4px; /* Borde sutilmente redondeado */
    transition: all 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: #000; /* Borde negro al escribir */
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

.form-check-input:checked {
    background-color: #000;
    border-color: #000;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* --- RESUMEN DE ORDEN (Derecha Sticky) --- */
.order-summary-card {
    background-color: #f9f9f9; /* Fondo gris claro diferenciador */
    padding: 35px;
    border-radius: 8px;
    border: 1px solid #eee;
    
    /* MAGIA STICKY: Se queda fijo al bajar */
    position: sticky;
    top: 120px; /* Ajustado para que no choque con el header */
}

.summary-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 15px;
    align-items: center;
}

.summary-img {
    width: 65px;
    height: 85px;
    object-fit: cover;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #eee;
}

.summary-info h4 {
    margin: 0 0 5px 0;
    font-family: 'Marcellus', serif;
    font-size: 0.95rem;
    color: #000;
}

.summary-info p {
    margin: 0;
    font-size: 0.8rem;
    color: #666;
}

.summary-price {
    margin-left: auto; /* Empuja el precio a la derecha */
    font-weight: 600;
    font-size: 0.95rem;
}

/* Totales */
.summary-totals {
    margin-top: 25px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: #555;
}

.total-row.final {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ccc;
    font-size: 1.3rem;
    font-weight: 700;
    color: #000;
    font-family: 'Montserrat', sans-serif;
}

/* BOTÓN PAGAR */
.btn-pay {
    display: block;
    width: 100%;
    background-color: #000;
    color: #fff;
    padding: 18px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    margin-top: 25px;
    transition: background 0.3s;
}

.btn-pay:hover {
    background-color: #333;
}

/* --- RESPONSIVE (Móvil) --- */
@media (max-width: 900px) {
    .checkout-layout {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 40px;
        
        /* IMPORTANTE: Invertimos el orden visual en móvil */
        /* Queremos ver primero el formulario, luego el resumen */
        display: flex;
        flex-direction: column-reverse; 
    }

    .order-summary-card {
        position: static; /* Ya no es sticky en el celular */
        border: none;
        background: #f5f5f5;
    }

    .checkout-steps {
        font-size: 0.75rem;
        gap: 15px;
    }
}

/* =========================================
   1. BOTÓN FLOTANTE WHATSAPP (REPARADO)
   ========================================= */
.whatsapp-float {
    position: fixed;          /* Fijo en la pantalla, no se mueve al scrollear */
    bottom: 30px;             /* Separación desde abajo */
    right: 30px;              /* Separación desde la derecha */
    background-color: #25d366; /* Color Verde Oficial */
    color: #fff !important;   /* Icono Blanco (forzado) */
    width: 60px;              /* Ancho del círculo */
    height: 60px;             /* Alto del círculo */
    border-radius: 50%;       /* Círculo perfecto */
    text-align: center;
    font-size: 32px;          /* Tamaño del icono */
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3); /* Sombra para que flote */
    z-index: 10000;           /* Por encima de todo */
    display: flex;            /* Para centrar el icono */
    align-items: center;      /* Centrado vertical */
    justify-content: center;  /* Centrado horizontal */
    text-decoration: none;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #1da851; /* Verde un poco más oscuro al pasar mouse */
    transform: scale(1.1);     /* Efecto de agrandarse un poquito */
    color: #fff !important;
}

/* Ajuste específico para móvil para que no tape contenido */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 28px;
        bottom: 20px;
        right: 20px;
    }
}