/* ==========================================================================

   1. ESTRUCTURA PRINCIPAL DEL PANEL

   ========================================================================== */

.mmc-sc-wrapper { position: fixed; top: 0; right: -500px; width: 450px; max-width: 100vw; height: 100vh; z-index: 999999; transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); font-family: system-ui, -apple-system, sans-serif !important; }

.mmc-sc-wrapper.open { right: 0; }

.mmc-sc-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.4); display: none; z-index: 999998; }

.mmc-sc-wrapper.open .mmc-sc-overlay { display: block; }



.mmc-sc-panel { background: #fff; height: 100%; display: flex; flex-direction: column; color: #111; position: relative; z-index: 999999; }



/* ==========================================================================

   2. TOP SECTION (Fijo arriba)

   ========================================================================== */

.mmc-sc-top-section { flex-shrink: 0; background: #fff; z-index: 10; padding-bottom: 15px; border-bottom: 1px solid #eee; }



/* Busca esto en css/slide-cart.css */

.mmc-sc-header { 

    display: flex; 

    justify-content: center; 

    align-items: center; 

    padding: 15px 20px; /* 🔥 ACTUALIZADO: 15px arriba/abajo */

    position: relative; 

}

.mmc-sc-header h3 { font-size: 16px; margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

.mmc-count { background: #000; color: #fff; border-radius: 50%; padding: 2px 6px; font-size: 12px; }

.mmc-sc-close { position: absolute; right: 0px; background: none; border: none; font-size: 28px; color: #999; cursor: pointer; width: 15px !important; height: 15px !important; align-items: center !important; justify-content: center !important; display: flex !important;}

/* Bloqueo total de diseño en interacción para las flechas */
.mmc-sc-close, 
.mmc-sc-close:hover,
.mmc-sc-close:active,
.mmc-sc-close:focus {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    
    /* 🔥 Fuerza a que el color de la flecha NO cambie a blanco */
    color: #444 !important; 
    
    /* 🔥 Quita el destello gris/azul que sale en celulares al tocar */
    -webkit-tap-highlight-color: transparent !important; 
    
    /* Evita que el navegador intente "seleccionar" la flecha como texto */
    user-select: none !important;
}


/* Busca o añade esto en css/slide-cart.css */

.mmc-sc-badges { 

    display: flex; 

    justify-content: center; /* Mantenemos el centrado del bloque completo */

    gap: 15px; /* Espacio entre los bloques de beneficios */

    font-size: 12px; 

    color: #555; 

    padding-bottom: 15px; 

}



.badge-item {

    display: flex;

    align-items: center; /* 🔥 Centrado vertical del icono con el texto */

    gap: 6px; /* 🔥 Espacio entre imagen y texto */

}



.badge-icon-img {

    width: 25px; /* Tamaño del icono */

    height: 25px;

    object-fit: contain;

}

.mmc-sc-badges .divider { color: #ccc; }



.mmc-sc-coupons { background: #e6f3f8; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; }

.cp-slider-track { flex: 1; text-align: center; overflow: hidden; }

.cp-slide { font-size: 13px; cursor: pointer; user-select: none; }

.cp-slide strong { color: #000; }

.cp-prev, .cp-next { background: none; border: none; font-size: 20px; cursor: pointer; color: #333;  width: 15px !important; height: 15px !important; align-items: center !important; justify-content: center !important; display: flex !important;}

/* Bloqueo total de diseño en interacción para las flechas */
.cp-prev, .cp-next,
.cp-prev:hover, .cp-next:hover,
.cp-prev:active, .cp-next:active,
.cp-prev:focus, .cp-next:focus {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    
    /* 🔥 Fuerza a que el color de la flecha NO cambie a blanco */
    color: #444 !important; 
    
    /* 🔥 Quita el destello gris/azul que sale en celulares al tocar */
    -webkit-tap-highlight-color: transparent !important; 
    
    /* Evita que el navegador intente "seleccionar" la flecha como texto */
    user-select: none !important;
}




/* Busca esto en css/slide-cart.css */

.mmc-sc-progress { 

    padding: 10px 30px 0; /* 🔥 ACTUALIZADO: 10px arriba */

    text-align: center; /* Mantenemos el centrado del contenedor por si acaso */

}



.prog-msg { 

    font-size: 13px; 

    margin: 0 0 35px 0; 

    color: #555; 

    text-align: left; /* 🔥 NUEVO: Alineación a la izquierda */

}

.prog-bar-track { height: 4px; background: #e0e0e0; border-radius: 4px; position: relative; }

.prog-bar-fill { height: 100%; background: #000; border-radius: 4px; transition: width 0.3s ease; }

/* ==========================================================================
   BARRA DE PROGRESO (NODOS Y TEXTOS LATERALES)
   ========================================================================== */
/* 🔥 ESTOS SON LOS ÚNICOS QUE CAMBIAN PARA LA BARRA 🔥 */
.prog-node { 
    position: absolute; 
    top: -12px; /* Ajuste para centrar perfecto el círculo de 28px con la barra de 4px */
    width: 28px; /* Le damos ancho fijo idéntico al círculo */
    height: 28px; /* Le damos alto fijo idéntico al círculo */
    transform: translateX(-50%); 
}

.node-icon { 
    width: 100%; /* Toma el 100% de su contenedor (28px) */
    height: 100%; 
    background: #fff; 
    border: 2px solid #ddd; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 12px; 
    position: relative; 
    z-index: 2; /* Asegura que el círculo tape la barra */
}

.node-icon img { 
    width: 20px; 
    height: 20px; 
}

/* 🔥 Texto del premio centrado justo ARRIBA del círculo 🔥 */
.prog-node span { 
    position: absolute;
    bottom: 100%; /* Lo empuja justo por encima del borde superior del círculo */
    left: 50%; /* Mueve el inicio del texto al centro exacto del círculo */
    transform: translateX(-50%); /* Centra el texto perfectamente sobre su propio eje */
    margin-bottom: 0.5px; /* Un pequeño respiro de 6px entre el texto y el círculo */
    font-size: 10px; 
    color: #555; 
    font-weight: 400;
    white-space: nowrap; /* Mantiene todo el texto en una sola línea */
    letter-spacing: 0.5px;
}

.n1 { left: 33%; } .n2 { left: 66%; } .n3 { left: 100%; }



/* EFECTO CUANDO SE ALCANZA UNA META */

.prog-node.reached .node-icon {

    background: #000000;

    border-color: #000000;

    color: #ffffff;

}

.prog-node.reached .node-icon img {

    filter: brightness(0) invert(1);

}



/* ==========================================================================

   3. MIDDLE SECTION (Scrollable - Productos)

   ========================================================================== */

.mmc-sc-cart-items { flex: 1; overflow-y: auto; padding: 20px; background: #fafafa; }

.mmc-cart-item { display: flex; padding: 5px; background: #fff; border: 1px solid #eee; border-radius: 8px; margin-bottom: 15px; }



/* Imagen y la "X" superpuesta */

.mmc-item-img { position: relative; width: 80px; flex-shrink: 0; margin-right: 15px; }

.mmc-item-img img { width: 100%; border-radius: 6px; border: 1px solid #f0f0f0; }

.mmc-remove-x { position: absolute; top: -8px; left: -8px; background: #fff; border: 1px solid #ccc; color: #888; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 18px; font-size: 14px; text-decoration: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

.mmc-remove-x:hover { background: #ff4c4c; color: #fff; border-color: #ff4c4c; }



.mmc-item-details { flex: 1; }

.mmc-item-title { font-size: 14px; margin: 0 0 5px 0; font-weight: 600; line-height: 1.2; }

.mmc-item-meta { font-size: 11px; color: #777; }

.mmc-item-price { font-size: 14px; font-weight: 700; text-align: right; }



.mmc-item-price del { color: #e74c3c; font-size: 12px; text-decoration: line-through; margin-right: 5px; font-weight: normal; }

.mmc-item-price ins { text-decoration: none; color: #111; font-weight: 700; }



/* ==========================================================================

   4. BOTTOM SECTION (Fixed - Upsell, Discount, Botones)

   ========================================================================== */

.mmc-sc-bottom-section { flex-shrink: 0; background: #fff; border-top: 1px solid #eee; padding: 10px; z-index: 10; }



/* --- UPSELLS (COMPACTOS Y FLUIDOS) --- */

.mmc-sc-upsells { border-bottom: 1px solid #eee; padding-bottom: 15px; }

.up-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

.up-head h4 { font-size: 14px; margin: 0; font-weight: 700; }

.up-nav { display: flex; gap: 8px; align-items: center; }

.up-nav button { background: none; border: 1px solid #ddd; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; color: #555; display: flex; align-items: center; justify-content: center; padding: 0; }

.up-nav button:hover { border-color: #111; color: #111; }



.up-track { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 5px; scroll-snap-type: x mandatory; margin: 0 -5px; padding: 0 5px; }

.up-track::-webkit-scrollbar { display: none; }



.up-card-new { flex: 0 0 85%; scroll-snap-align: start; display: flex; align-items: center; padding: 12px !important; border: 1px solid #eaeaea !important; border-radius: 12px !important; gap: 12px !important; background: #fff; }



.up-img-wrap { width: 60px !important; flex-shrink: 0; }

.up-img-wrap img { width: 100% !important; height: auto !important; border-radius: 6px; border: 1px solid #f9f9f9; }



.up-content-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3px; overflow: hidden; }



.up-details-top-line { display: flex; justify-content: space-between; align-items: center; }

.up-title-new { font-size: 13px !important; font-weight: 600 !important; margin: 0 !important; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.up-info-btn-new { background: transparent; border: 1px solid #ccc; color: #888; border-radius: 50%; width: 20px; height: 20px; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 5px; }



.up-color-info-wrap { min-height: 12px; }

.up-color-info { font-size: 11px !important; color: #777 !important; line-height: 1; display: block; }



.up-details-bottom-line { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }

.up-price-new { font-size: 13px !important; font-weight: 700 !important; color: #111; }

.up-price-new del { color: #e74c3c; font-size: 11px; text-decoration: line-through; font-weight: normal; margin-right: 4px; }

.up-price-new ins { text-decoration: none; color: #111; font-weight: 700; }



.up-add-btn-new { background: #fff !important; color: #111 !important; border: 1px solid #111 !important; padding: 6px 14px !important; border-radius: 20px !important; font-size: 11px !important; font-weight: 700 !important; cursor: pointer; transition: all 0.2s; white-space: nowrap; }

.up-add-btn-new:hover { background: #111 !important; color: #fff !important; }



/* 🔥 BLOQUEO DE INYECCIONES DEL TEMA Y WOOCOMMERCE 🔥 */

.up-details-bottom-line .added_to_cart,

.up-details-bottom-line > *:not(.up-price-new):not(.up-add-btn-new) { display: none !important; }

.up-add-btn-new.success-added { background: #28a745 !important; border-color: #28a745 !important; color: #fff !important; }



/* --- SECCIÓN DESCUENTO --- */

.mmc-sc-discount-wrapper {

    border-top: 1px solid #eee;

    border-bottom: 1px solid #eee;

    margin: 0 15px; 

    padding: 5px 10px;

}



.mmc-sc-discount-trigger {

    display: flex;

    justify-content: center; 

    align-items: center;

    gap: 8px;

    font-size: 15px;

    font-weight: 700;

    color: #111;

    cursor: pointer;

}



.mmc-sc-discount-form { display: none; }

.mmc-sc-discount-form-inner { display: flex; gap: 10px; margin-top: 15px; }

.mmc-sc-discount-form-inner input { flex: 1; padding: 10px 15px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; }

.mmc-sc-discount-form-inner button { background: #000; color: #fff; border: none; padding: 0 20px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 12px; transition: all 0.2s; }

.mmc-sc-discount-form-inner button:hover { background: #333; }



/* --- TOTALES Y BOTONES FINALES --- */

.mmc-sc-totals { margin-bottom: 5px; }

.total-row { display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 700; color: #111; }



.mmc-sc-actions { display: flex; gap: 10px; margin-bottom: 10px; }

.btn-checkout, .btn-viewcart { flex: 1; text-align: center; padding: 10px 0; border-radius: 13px; font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s; display: block; }

.btn-checkout { background: #000; color: #fff; border: 1px solid #000; }

.btn-checkout:hover { background: #333; }

.btn-viewcart { background: #fff; color: #000; border: 1px solid #000; }

.btn-viewcart:hover { background: #f9f9f9; }



.mmc-tax-note { text-align: center; font-size: 11px; color: #888; margin: 0; }



/* ==========================================================================

   5. POPUP DE INFO 

   ========================================================================== */

.mmc-popup-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 1000000; }
.mmc-popup-box { background: #fff; width: 740px; max-width: 92vw; border-radius: 14px; position: relative; padding: 0; overflow: hidden; display: flex; height: 480px; }
.mmc-popup-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 20px; cursor: pointer; color: #aaa; z-index: 10; line-height: 1; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.15s; }
.mmc-popup-close:hover { background: #f1f1f1; color: #333; }
.pop-layout { display: flex; width: 100%; height: 100%; }

/* IZQUIERDA 50% — fija, no crece ni se reduce */
.pop-left { width: 50%; min-width: 50%; max-width: 50%; background: #f7f7f7; display: flex; flex-direction: column; padding: 20px 16px; gap: 12px; }
.pop-main-img { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 0; }
.pop-main-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; transition: opacity 0.15s; }
.pop-thumbs { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; flex-shrink: 0; padding-bottom: 2px; height: 62px; }
.pop-thumbs::-webkit-scrollbar { height: 3px; }
.pop-thumbs::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
.pop-thumb { width: 58px; height: 58px; min-width: 58px; object-fit: cover; border-radius: 6px; border: 2px solid transparent; cursor: pointer; transition: all 0.15s; opacity: 0.6; flex-shrink: 0; }
.pop-thumb:hover { opacity: 1; }
.pop-thumb.active { border-color: #111; opacity: 1; }

/* DERECHA 50% — fija, scroll interno */
.pop-right { width: 50%; min-width: 50%; max-width: 50%; padding: 28px 24px 20px; display: flex; flex-direction: column; overflow-y: auto; }
.pop-title { font-size: 16px; font-weight: 600; color: #111; margin: 0 0 8px; line-height: 1.4; padding-right: 20px; }
.pop-price { font-size: 15px; font-weight: 600; margin: 0 0 14px; flex-shrink: 0; }
.pop-price del { color: #aaa; font-weight: 400; font-size: 13px; margin-right: 5px; }
.pop-price ins { text-decoration: none; color: #111; }
.pop-variations { margin-bottom: 0px; flex-shrink: 0; }
.pop-attr-group { margin-bottom: 10px; }
.pop-attr-label { font-size: 13px; color: #555; margin: 0 0 7px; }
.pop-attr-label strong { font-weight: 600; color: #111; }
.pop-swatches-wrap { display: flex; gap: 7px; flex-wrap: wrap; }
.pop-swatch { border: 2px solid transparent; cursor: pointer; background: none; padding: 0; transition: all 0.15s; display: flex; align-items: center; justify-content: center; }
.pop-swatch-color { width: 28px; height: 28px; border-radius: 50%; outline: 3px solid transparent; outline-offset: 2px; font-size: 10px; font-weight: 600; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,0.4); }
.pop-swatch-color:hover { outline-color: #bbb; }
.pop-swatch-color.selected { outline-color: #111; border-color: #fff; }
.pop-swatch-text { padding: 4px 11px; border-radius: 6px; border: 1.5px solid #ddd; font-size: 12px; color: #333; }
.pop-swatch-text:hover { border-color: #999; }
.pop-swatch-text.selected { border-color: #111; background: #111; color: #fff; }
.pop-variation-msg { font-size: 12px; color: #e74c3c; min-height: 16px; margin-bottom: 6px; flex-shrink: 0; }
.pop-desc { font-size: 13px; color: #666; line-height: 1.6; margin-bottom: 16px; flex: 1; overflow-y: auto; min-height: 0; }
.pop-desc p { margin: 0 0 4px; }
.pop-add-btn { background: #2563eb; color: #fff; border: none; padding: 13px 20px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; width: 100%; transition: background 0.2s; flex-shrink: 0; margin-top: auto; }
.pop-add-btn:hover:not(:disabled) { background: #1d4ed8; }
.pop-add-btn:disabled { background: #c5c5c5; cursor: not-allowed; }

@media (max-width: 600px) {
    .mmc-popup-box { height: auto; max-height: 90vh; }
    .pop-layout { flex-direction: column; }
    .pop-left { width: 100%; min-width: 100%; max-width: 100%; height: 260px; flex-shrink: 0; }
    .pop-right { width: 100%; min-width: 100%; max-width: 100%; padding: 20px; }
}




@media (max-width: 768px) {

    .pop-layout { flex-direction: column; }

    .pop-left, .pop-right { width: 100%; }

    .pop-right { padding: 20px; }

}









/* ==========================================================================
/*   DISEÑO PREMIUM DE CUPÓN (TOTALES)
/*   ========================================================================== */
.discount-premium {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3px;
}

.discount-label-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.discount-label-text {
    font-size: 12px;
    color: #444;
}

/* La etiqueta verde punteada */
.coupon-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #f4fdf8; /* Fondo verde muy clarito */
    border: 1px dashed #73c88e; /* Borde punteado verde */
    color: #4a5568;
    padding: 3px 6px 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

/* El botoncito gris con la "X" */
.coupon-badge .mmc-remove-coupon {
    background-color: #8c98a4;
    color: #fff !important;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    transition: background 0.2s ease;
}

.coupon-badge .mmc-remove-coupon:hover {
    background-color: #6c757d;
}

/* El monto descontado en verde */
.discount-amount-green {
    color: #65a30d !important;
    font-weight: 500;
    font-size: 12px;
}


.total-final { margin-top: 4px; }
.total-final-label { font-size: 15px; font-weight: 500; }
.total-final-amount { font-size: 18px; font-weight: 500; }










/* ==========================================================================
   TRIGGER DEL CARRITO (ICONO FLOTANTE)
   ========================================================================== */
.mmc-cart-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.mmc-cart-trigger svg {
    width: 24px;
    height: 24px;
    stroke: #111;
}

.mmc-cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid #fff;
}