/*
 Theme Name:   hello-elementor-child
 Template:     hello-elementor
 Description:  Tema hijo para preservar personalizaciones (woocommerce)
 Author:       Raycom Soluciones
 Version:      1.0
*/
/* --- LIMPIEZA DEL CHECKOUT --- */

/* 1. Ocultar el "Subtotal" (redundante si ya está el Total) */
.wc-block-components-totals-item.wc-block-components-totals-subtotal {
    display: none !important;
}

/* 2. Ocultar el texto pequeño "$ xxx due today" debajo de cada producto */
/* Esto elimina la línea repetida en inglés que sale bajo el precio del ítem */
.wc-block-components-order-summary-item__total .wc-block-components-order-summary-item__total-description {
    display: none !important;
}

/* 3. (Opcional) Si quieres ocultar el contador repetido "3 artículos" y dejar solo el número "3" */
/* Nota: Esto depende de tu tema, prueba si te gusta cómo queda */
.wc-block-components-quantity-selector__text {
    display: none !important;
}

/* 4. Asegurar que el cupón no salga (por si el ajuste de Woo no lo quita en bloques) */
.wc-block-components-totals-coupon-link {
    display: none !important;
}


/* --- 2. TUNNING DEL LAYOUT DE BLOQUES --- */

/* COLUMNA IZQUIERDA: Formulario de Datos (Sombrita Suave) */
/* Selector basado en tu HTML */
form.wc-block-checkout__form {
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); 
    border: 3px solid #f0f0f0 !important;
    margin-bottom: 30px; /* Separación en móvil */
}

/* COLUMNA DERECHA: Resumen de Pedido (Borde Degradado) */
/* Selector basado en tu HTML */
.wp-block-woocommerce-checkout-order-summary-block {
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    /* El truco del borde degradado */
    border: 4px solid transparent !important;
    background: linear-gradient(white, white) padding-box, 
                linear-gradient(to bottom right, #fcc219, #80c451, #30a2e2, #e53d33) border-box;
    /* Sombra más fuerte */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* Ajuste de títulos dentro de las cajas */
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title-text {
    font-family: inherit; /* Heredar fuente del tema (Urbanist si la tienes) */
    font-weight: 800;
    font-size: 22px;
    color: #333;
}

/* --- 3. CAJA DE MÉTODOS DE PAGO (Tarjeta Flotante) --- */
#payment-method {
    background: #fcfcfc;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

/* Botón Realizar Pedido (Resaltar) */
.wc-block-components-checkout-place-order-button {
    background-color: #F8AC11 !important;
    color: #000 !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 10px !important;
    font-size: 16px !important;
    box-shadow: 0 5px 15px rgba(248, 172, 17, 0.4);
    transition: transform 0.2s ease;
    margin-top: 20px;
    border: 0px solid #c36;
}
.wc-block-components-checkout-place-order-button:hover {
    transform: translateY(-2px);
    background-color: #333 !important;
    color: #fff !important;
}

/* --- 4. LIMPIEZA (OCULTAR ELEMENTOS QUE ESTORBAN) --- */

/* Ocultar la descripción corta del producto en el resumen */
.wc-block-components-product-metadata__description {
    display: none !important;
}

/* Ocultar el Subtotal repetido (Usando tu clase específica) */
.wp-block-woocommerce-checkout-order-summary-subtotal-block {
    display: none !important;
}

/* Ocultar enlace de cupón (si aparece) */
.wc-block-components-totals-coupon-link {
    display: none !important;
}
/* =========================================================
   BARRA DE PASOS CHECKOUT (ESTILO TIPO SINGLE PRODUCT)
   ========================================================= */

.epayco-checkout-steps-wrapper {
    width: 100%;
    margin-bottom: 40px;
    border-bottom: 1px solid #eee; /* Línea sutil abajo del header */
}

.elementor-kit-7 a {
    color: #3f444b;
    font-family: "Urbanist", Sans-serif;
}

.checkout-header-steps {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 30px 0; 
}

/* Títulos a la izquierda */
.checkout-header-steps .titulos h6 { 
    margin: 0; color: #333; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}
.checkout-header-steps .titulos h2 { 
    margin: 5px 0 0; font-size: 30px; font-weight: 800; color: #000;
}

/* Contenedor de los pasos a la derecha */
.progreso-pasos { display: flex; align-items: center; gap: 12px; }

/* --- ESTILO BASE (PENDIENTE / PASO 3) --- */
/* Borde gris punteado por defecto */
.paso-progreso {
    width: 90px; 
    height: 80px; 
    border: 3px dotted #BDBDBD; /* Borde punteado gris */
    border-radius: 12px;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    gap: 6px; 
    color: #aaaaaa; /* Texto gris */
    font-weight: 600; 
    font-size: 13px; 
    background: #fff;
    text-decoration: none;
}
.paso-progreso img { width: 26px; height: 26px; opacity: 0.4; } /* Icono tenue */

/* --- ESTILO ACTIVO (PASO 2 - DATOS) --- */
/* Borde degradado con los colores de tu marca */
.paso-progreso.activo {
    color: #333; /* Texto oscuro */
    border: 3px solid transparent; /* Truco para el degradado */
    background: linear-gradient(white, white) padding-box, 
                linear-gradient(to top, #fcc219, #80c451, #30a2e2, #e53d33) border-box;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Sombra suave para resaltar */
}
.paso-progreso.activo img { opacity: 1; } /* Icono full color */

/* --- ESTILO COMPLETADO (PASO 1 - COTIZACIÓN) --- */
/* Borde verde sólido */
.paso-progreso.completado {
    border: 3px solid #3c763d; /* Verde oscuro (o usa #80c451 para verde claro) */
    color: #3c763d;
    background: #fff;
}
.paso-progreso.completado img { 
    opacity: 1; 
    /* Filtro para volver el icono verde (opcional, si quieres que se vea verde) */
    filter: brightness(0) saturate(100%) invert(37%) sepia(93%) saturate(357%) hue-rotate(91deg) brightness(93%) contrast(89%);
}

/* Flechas separadoras */
.progreso-flecha { width: 10px; height: auto; opacity: 0.5; }

/* Responsividad para móviles */
@media (max-width: 768px) {
    .checkout-header-steps { flex-direction: column; gap: 25px; align-items: flex-start; }
    .progreso-pasos { width: 100%; justify-content: space-between; }
    .paso-progreso { width: 75px; height: 70px; font-size: 11px; }
}

.page-header {
    display: none !important;
}

/* =========================================================
   DISEÑO CARRITO DE BLOQUES (ESTILO TARJETAS)
   ========================================================= */

/* 1. TRANSFORMAR TABLA EN LISTA DE TARJETAS */
.wc-block-cart-items {
    border: none !important;
}
/* Ocultar encabezados de la tabla (Producto, Total, etc.) */
.wc-block-cart-items thead {
    display: none;
}
/* Convertir el cuerpo en un contenedor flexible */
.wc-block-cart-items tbody {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* Estilo de cada Tarjeta (Fila) */
.wc-block-cart-items__row {
    display: flex !important; /* Romper comportamiento de tabla */
    align-items: center;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    flex-wrap: wrap; /* Para móviles */
    position: relative;
}

/* 2. IMAGEN DEL PRODUCTO */
.wc-block-cart-item__image {
    width: 90px; /* Tamaño fijo */
    padding: 0 20px 0 0 !important;
    border: none !important;
}
.wc-block-cart-item__image img {
    border-radius: 8px;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 3. DETALLES DEL PRODUCTO (Centro) */
.wc-block-cart-item__product {
    flex-grow: 1;
    padding: 0 !important;
    border: none !important;
}
/* Contenedor interno de detalles */
.wc-block-cart-item__wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Título del Producto */
.wc-block-components-product-name {
    width: 100%;
    font-family: "Urbanist", sans-serif; /* Tu fuente */
    font-weight: 700;
    font-size: 18px;
    color: #111;
    text-decoration: none;
    margin-bottom: 5px;
}

/* Precio / Ciclo */
.wc-block-cart-item__prices {
    font-weight: 600;
    color: #333;
    margin-right: auto; /* Empuja la cantidad a la derecha */
    font-size: 16px;
}

/* Selector de Cantidad */
.wc-block-cart-item__quantity {
    margin-left: 20px;
}
.wc-block-components-quantity-selector {
    border: 1px solid #ddd;
    border-radius: 6px;
}
.wc-block-components-quantity-selector__input {
    background: transparent;
    font-weight: 600;
}

/* 4. BOTÓN ELIMINAR (Convertir texto en Icono Basurera) */
.wc-block-cart-item__remove-link {
    font-size: 0 !important; /* Ocultar texto "Eliminar artículo" */
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    margin-left: 15px;
    opacity: 0.6;
    transition: opacity 0.3s;
}
.wc-block-cart-item__remove-link:hover { opacity: 1; }

/* Dibujar icono de basurera con CSS (SVG data) */
.wc-block-cart-item__remove-link::before {
    content: '';
    position: absolute;
    top: 37%; left: 95%;
    transform: translate(-50%, -50%);
    width: 20px; height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* 5. OCULTAR ELEMENTOS SOBRANTES */
/* Ocultar la columna de "Total" de la fila (ya tenemos el precio) */
.wc-block-cart-item__total {
    display: none !important;
}
/* Ocultar descripción larga también en el carrito */
.wc-block-cart .wc-block-components-product-metadata__description {
    display: none !important;
}
/* =========================================================
   1. ARREGLOS ESTRUCTURALES (Márgenes y Espaciado)
   ========================================================= */

/* Quitar el desbordamiento lateral que rompe el diseño */
.alignwide {
    margin-inline: 0px !important;
    max-width: 100% !important; /* Asegurar que no se salga */
}

/* Bajar el contenido para que no se pegue al header */
.wc-block-components-sidebar-layout.wc-block-cart {
    padding-top: 20px !important;
    padding-bottom: 20px; /* Un poco de aire abajo también */
}

/* =========================================================
   2. DISEÑO LISTA DE PRODUCTOS (ESTILO TARJETAS)
   ========================================================= */

/* Quitar bordes de la tabla general */
.wc-block-cart-items {
    border: none !important;
}
/* Ocultar encabezados de tabla (Producto, Precio, etc) */
.wc-block-cart-items thead {
    display: none !important;
}

/* Convertir cada fila en una "Tarjeta" flotante */
.wc-block-cart-items__row {
    display: flex !important;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e5e5; /* Borde sutil */
    border-radius: 12px;
    padding: 20px 25px;
    margin-bottom: 20px; /* Separación entre tarjetas */
    box-shadow: 0 5px 15px rgba(0,0,0,0.03); /* Sombra suave */
    position: relative;
    flex-wrap: wrap;
}

/* Imagen del producto */
.wc-block-cart-item__image {
    width: 80px !important;
    padding: 0 20px 0 0 !important;
}
.wc-block-cart-item__image img {
    border-radius: 8px;
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* Contenedor de Textos (Nombre, Precio) */
.wc-block-cart-item__product {
    flex-grow: 1;
    padding: 0 !important;
}
.wc-block-cart-item__wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* Título del Producto */
.wc-block-components-product-name {
    font-family: inherit; /* Tu fuente (Urbanist) */
    font-weight: 700;
    font-size: 18px;
    color: #111;
    text-decoration: none;
    margin-right: auto; /* Empuja precio a la derecha */
    width: 100%;
}

/* Precio */
.wc-block-cart-item__prices {
    font-weight: 700;
    font-size: 16px;
    color: #333;
}

/* Selector de Cantidad (Estilo Minimalista) */
.wc-block-cart-item__quantity {
    margin-left: 20px;
}
.wc-block-components-quantity-selector {
    border: 1px solid #ccc;
    border-radius: 6px;
    height: 36px;
}
.wc-block-components-quantity-selector__input {
    background: transparent;
    font-weight: 600;
    border: none;
}
.wc-block-components-quantity-selector__button {
    color: #555;
}

/* Icono de Eliminar (Basurera) */
.wc-block-cart-item__remove-link {
    font-size: 0 !important; /* Ocultar texto */
    width: 34px;
    height: 34px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.wc-block-cart-item__remove-link:hover {
    background-color: #ffe5e5;
    border-color: #ffcccc;
}
/* Dibujar la basurera */
.wc-block-cart-item__remove-link::before {
    content: '';
    display: block;
    width: 18px; height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Ocultar elementos sobrantes */
.wc-block-cart-item__total, /* Columna Total repetida */
.wc-block-components-product-metadata__description /* Descripción larga */
{
    display: none !important;
}

/* =========================================================
   3. DISEÑO SIDEBAR (RESUMEN DARK)
   ========================================================= */

/* Caja Negra contenedora */
.wc-block-cart__sidebar {
    background-color: #0A0A0A; /* Negro */
    color: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 100px; /* Para que te siga al bajar */
}

/* Título Dorado */
.wc-block-cart__totals-title {
    color: #F8AC11;
    font-family: inherit;
    font-weight: 800;
    font-size: 26px;
    border-bottom: none;
    margin-bottom: 20px;
}

/* Textos internos blancos */
.wc-block-components-totals-item__label {
    color: #ccc;
    font-size: 15px;
}
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount {
    color: #fff;
    font-weight: 600;
}

/* TOTAL GRANDE */
.wc-block-components-totals-footer-item {
    border-top: 1px solid #333;
    padding-top: 20px;
    margin-top: 20px;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: 20px;
    color: #fff;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: #F8AC11; /* Dorado */
    font-size: 36px;
    font-weight: 900;
}

/* Botón Proceder al Pago */
.wc-block-cart__submit-button {
    background-color: #F8AC11 !important;
    color: #000 !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 10px !important;
    font-size: 16px !important;
    margin-top: 25px;
    width: 100%;
    display: block;
    text-align: center;
    box-shadow: 0 5px 15px rgba(248, 172, 17, 0.3);
    transition: transform 0.2s;
}
.wc-block-cart__submit-button:hover {
    transform: translateY(-3px);
    background-color: #fff !important;
}

/* =========================================================
   4. RESPONSIVIDAD (MÓVIL)
   ========================================================= */
@media (max-width: 768px) {
    .wc-block-cart-items__row {
        align-items: flex-start;
        padding-right: 50px; /* Espacio para la basurera */
    }
    .wc-block-cart-item__remove-link {
        position: absolute;
        top: 20px;
        right: 15px;
        margin: 0;
    }
    .wc-block-cart-item__quantity {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
    }
    .wc-block-components-product-name {
        width: 100%;
    }
}
/* =========================================================
   CORRECCIONES URGENTES CARRITO (PRECIO Y CANECA)
   ========================================================= */

/* 1. PRECIO NEGRO (Forzar visibilidad sobre fondo blanco) */
.wc-block-cart-items__row .wc-block-cart-item__prices,
.wc-block-cart-items__row .wc-block-formatted-money-amount,
.wc-block-cart-items__row .price {
    color: #000000 !important; /* Negro puro */
    font-weight: 700 !important;
}

/* 2. CANECA AL LADO (Alineación Horizontal) */

/* El contenedor padre de la cantidad y la caneca */
.wc-block-cart-item__quantity {
    display: flex !important;
    flex-direction: row !important; /* Forzar fila horizontal */
    align-items: center !important; /* Centrados verticalmente */
    justify-content: flex-end !important; /* Alineados a la derecha */
    gap: 15px !important; /* Espacio entre selector y caneca */
    width: auto !important; /* Que no ocupe el 100% si no es necesario */
    margin-left: auto !important; /* Empujar a la derecha en la tarjeta */
}

/* El selector numérico (input +/-) */
.wc-block-components-quantity-selector {
    margin-bottom: 0 !important; /* Quitar márgenes que empujen la caneca */
    display: inline-flex !important;
}

/* El botón de la caneca */
.wc-block-cart-item__remove-link {
    margin-top: 0 !important; /* Asegurar que no tenga margen arriba */
    position: static !important; /* Quitar posición absoluta */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 0 !important; /* Ocultar texto */
}

/* Icono SVG de la caneca (Asegurar color) */
.wc-block-cart-item__remove-link::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* CORRECCIÓN MÓVIL (Para que no se rompa en celulares) */
@media (max-width: 768px) {
    .wc-block-cart-item__quantity {
        justify-content: space-between !important; /* Separar extremos */
        width: 100% !important;
        margin-top: 15px !important;
    }
}
/* =========================================================
   CORRECCIÓN URGENTE: TEXTOS CHECKOUT (VOLVER A NEGRO)
   ========================================================= */

/* Respetar textos blancos SOLO en el Carrito (Fondo Negro) */
.wc-block-cart .wc-block-components-totals-item__label,
.wc-block-cart .wc-block-components-totals-item__value {
    color: #fff !important;
}

/* Forzar textos oscuros en el CHECKOUT (Fondo Blanco) */
.wc-block-checkout .wc-block-components-totals-item__label,
.wc-block-checkout .wc-block-components-totals-item__value,
.wc-block-checkout .wc-block-components-totals-item__description, 
.wc-block-checkout .wc-block-formatted-money-amount {
    color: #333 !important; /* Gris oscuro para leer bien */
}

/* Título "Total" del pie de página en Checkout */
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    color: #333 !important;
    font-size: 20px;
}

/* Valor del Total en Checkout (Mantener Naranja o poner Negro) */
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
    color: #F8AC11 !important; /* Naranja para destacar */
    font-size: 28px !important;
}
/* =========================================================
   LIMPIEZA PÁGINA INTERMEDIA DE PAGO (Order Pay)
   ========================================================= */

/* Solo aplicar en la página de pagar pedido */
.woocommerce-order-pay .entry-content .woocommerce {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 0;
}

/* 1. OCULTAR EL RESUMEN FEO (Tabla de detalles) */
.woocommerce-order-pay ul.order_details,
.woocommerce-order-pay .wc-bacs-bank-details-account-name {
    display: none !important;
}

/* 2. ESTILIZAR EL ÁREA DEL BOTÓN EPAYCO */
/* Ocultamos el texto "Cargando..." por defecto para poner uno propio si queremos, 
   o simplemente lo dejamos minimalista */
.woocommerce-order-pay #order_review {
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

/* 3. MENSAJE DE ESPERA */
/* Agregamos un texto visual agradable antes de que salga el popup */
.woocommerce-order-pay #order_review::before {
    content: "Conectando con la pasarela de pagos segura...";
    display: block;
    font-family: "Urbanist", sans-serif;
    font-size: 18px;
    color: #555;
    margin-bottom: 20px;
    font-weight: 600;
}

/* 4. BOTÓN EPAYCO (Si llega a verse) */
/* Lo hacemos bonito por si el popup falla y tienen que darle click */
.woocommerce-order-pay #payment .place-order button#place_order,
.epayco-button-render {
    background-color: #F8AC11 !important;
    color: #000 !important;
    font-weight: 900 !important;
    border-radius: 50px !important; /* Redondito */
    padding: 15px 40px !important;
    font-size: 18px !important;
    border: none !important;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(248, 172, 17, 0.4);
    transition: transform 0.2s;
    width: auto !important; /* No full width */
    margin: 0 auto;
    display: inline-block;
}
.woocommerce-order-pay #payment .place-order button#place_order:hover {
    transform: scale(1.05);
}

/* Ocultar bordes de tabla si quedan residuos */
.woocommerce-order-pay table.shop_table {
    border: none !important;
}
.woocommerce-order-pay table.shop_table td, 
.woocommerce-order-pay table.shop_table th {
    border: none !important;
}
/* =========================================================
   LIMPIEZA TOTAL PÁGINA "PAGAR" (ORDER-PAY)
   ========================================================= */

/* 1. OCULTAR ELEMENTOS DE EPAYCO Y WOOCOMMERCE (¡FUERZA BRUTA!) */

/* Ocultar Textos: "Cargando métodos...", subtítulos, etc. */
.woocommerce-order-pay #epayco_title,
.woocommerce-order-pay .epayco-title,
.woocommerce-order-pay .epayco-subtitle,
.woocommerce-order-pay .animated-points {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
}

/* Ocultar Botones: "Pagar con ePayco", formulario de pago y botón estándar */
.woocommerce-order-pay #payment, 
.woocommerce-order-pay .place-order,
.woocommerce-order-pay .epayco-button-render,
.woocommerce-order-pay #btn_epayco, /* ID común del botón */
.woocommerce-order-pay input[type="submit"],
.woocommerce-order-pay button[type="submit"] {
    display: none !important;
}

/* Ocultar Tablas de resumen viejas */
.woocommerce-order-pay table.shop_table,
.woocommerce-order-pay ul.order_details,
.woocommerce-order-pay .woocommerce-notice {
    display: none !important;
}

/* 2. ESPACIO Y ESTRUCTURA (HEADER Y FOOTER SEPARADOS) */

/* Forzar que el contenedor principal tenga altura mínima de pantalla */
body.woocommerce-order-pay #content,
body.woocommerce-order-pay .site-main, 
body.woocommerce-order-pay .page-content {
    min-height: 80vh !important; /* Ocupa el 80% de la altura de la ventana */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Contenido arriba */
    padding-top: 50px !important;
}

/* Dar aire a la barra de pasos */
.woocommerce-order-pay .epayco-checkout-steps-wrapper {
    margin-bottom: 50px !important;
    width: 100%;
}

/* 3. MENSAJE DE CARGA LIMPIO (OPCIONAL) */
/* Este texto reemplaza todo lo oculto para que no se vea vacío mientras carga el popup */
.woocommerce-order-pay .entry-content .woocommerce::after {
    content: "Conectando con la pasarela de pagos...";
    display: block;
    text-align: center;
    font-family: inherit;
    font-size: 20px;
    color: #333;
    font-weight: 600;
    margin-top: 100px; /* Bajar el texto para que no se pegue a la barra */
    animation: palpitar 1.5s infinite;
}

@keyframes palpitar {
    0% { opacity: 0.4; }
    50% { opacity: 1; }
    100% { opacity: 0.4; }
}
/* =========================================================
   FIX HEADER Z-INDEX EN PÁGINA DE PAGO (Para que el popup se vea encima)
   ========================================================= */

body.woocommerce-order-pay .elementor-752 .elementor-element.elementor-element-7153a6df {
    z-index: 0 !important;
}
/* =========================================================
   DISEÑO MÓVIL ESPECÍFICO (TIPO APP)
   ========================================================= */

@media (max-width: 768px) {

    /* --- 1. ESTRUCTURA GENERAL --- */
    
    /* Asegurar que el contenido no se desborde */
    .wc-block-components-sidebar-layout {
        display: flex;
        flex-direction: column;
        gap: 0px;
    }

    /* --- 2. TARJETAS DE PRODUCTO (Estilo Compacto) --- */
    
    .wc-block-cart-items__row {
        flex-direction: row !important; /* Mantener imagen al lado del texto */
        align-items: flex-start !important; /* Alinear arriba */
        padding: 15px !important;
        position: relative; /* Para posicionar la caneca */
        flex-wrap: wrap !important; /* Permitir que el selector baje si es necesario */
    }

    /* Imagen (Izquierda) */
    .wc-block-cart-item__image {
        width: 80px !important;
        padding: 0 15px 0 0 !important;
        margin-bottom: 0 !important; /* Quitar margen que la empujaba */
    }
    .wc-block-cart-item__image img {
        border-radius: 8px;
        width: 100%;
        height: auto;
    }

    /* Contenido (Derecha de la imagen) */
    .wc-block-cart-item__product {
        width: calc(100% - 80px) !important; /* El resto del espacio */
        padding-right: 30px !important; /* Espacio para que no tape la caneca */
    }
    
    .wc-block-cart-item__wrap {
        display: flex;
        flex-direction: column; /* Título arriba, precio abajo */
        align-items: flex-start;
        gap: 5px;
    }

    /* Título */
    .wc-block-components-product-name {
        font-size: 16px;
        line-height: 1.2;
        margin-bottom: 5px;
    }

    /* Precio */
    .wc-block-cart-item__prices {
        font-size: 15px;
        color: #111;
        margin-bottom: 5px;
        width: 100%;
    }

    /* Selector de Cantidad (Moverlo abajo o dejarlo compacto) */
    .wc-block-cart-item__quantity {
        width: 100% !important;
        margin-top: 10px !important;
        justify-content: flex-start !important; /* Alinear a la izquierda en móvil */
        gap: 15px !important;
    }
    
    /* Hacer el selector un poco más pequeño en móvil */
    .wc-block-components-quantity-selector {
        height: 30px !important;
    }
    .wc-block-components-quantity-selector__button {
        padding: 0 10px !important;
    }

    /* --- 3. ICONO DE BASURA (Posición Absoluta como los 'tres puntos') --- */
    /* Lo colocamos flotando arriba a la derecha, imitando el menú de tu imagen */
    .wc-block-cart-item__remove-link {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        margin: 0 !important;
        width: 24px !important;
        height: 24px !important;
    }

    /* --- 4. RESUMEN (CAJA NEGRA AL FINAL) --- */
    
    .wc-block-cart__sidebar {
        margin-top: 20px;
        padding: 25px !important;
        position: static !important; /* Quitar sticky en móvil */
    }

    /* Título Resumen */
    .wc-block-cart__totals-title {
        font-size: 22px;
        color: #F8AC11;
    }

    /* Filas del resumen */
    .wc-block-components-totals-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    
    /* Total Grande */
    .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
        font-size: 28px;
    }

    /* Botón Pagar */
    .wc-block-cart__submit-button {
        width: 100%;
        padding: 10px !important;
        font-size: 14px !important;
    }
}
/* ESTILOS CABECERA CARRITO (Shortcode) */
.epayco-cart-header-section {
    width: 100%;
    margin-bottom: 20px;
}

/* Título Grande */
.cart-main-title {
    font-family: inherit;
    font-weight: 800;
    font-size: 24px;
    color: #000;
    margin: 0;
}

/* Subtítulo "Producto" */
.cart-subtitle {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin-bottom: 5px;
}

/* Descripción gris */
.cart-description {
    font-size: 15px;
    color: #777;
    margin: 0;
}

/* Botón Volver */
.cart-back-link {
    font-size: 16px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
}
.cart-back-link:hover {
    text-decoration: underline;
}

/* Ajuste Móvil */
@media (max-width: 768px) {
    .cart-sub-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .cart-back-link {
        align-self: flex-end; /* Mover a la derecha en móvil */
    }
}
/* AJUSTE DE MÁRGENES PARA TABLA DEL CARRITO EN MÓVIL */
@media (max-width: 768px) {
    .wc-block-cart table.wc-block-cart-items, 
    .wc-block-cart table.wc-block-cart-items td, 
    .wc-block-cart table.wc-block-cart-items th {
        margin: 0 0 0px !important;
        display: block; /* Asegura que el margen vertical funcione si los elementos son celdas */
    }
}

/* =========================================================
   AJUSTE BARRA DE PROGRESO CARRITO (SOLO DESKTOP)
   ========================================================= */

@media (min-width: 769px) {
    /* Forzar que el contenedor principal de la cabecera ocupe todo el ancho */
    .epayco-cart-header-section {
        width: 100% !important;
        max-width: 100% !important;
        display: block;
    }

    /* Forzar la barra a usar Flexbox y separar extremos */
    .cart-steps-override.checkout-header-steps {
        display: flex !important;
        justify-content: space-between !important; /* Clave: Uno a la izq, otro a la der */
        align-items: center !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Asegurar que los textos (Título) no se encojan */
    .cart-steps-override .titulos {
        flex-shrink: 0;
    }

    /* Asegurar que los pasos (Iconos) no se encojan y se alineen a la derecha */
    .cart-steps-override .progreso-pasos {
        flex-shrink: 0;
        margin-left: auto; /* Empujar a la derecha si hace falta */
    }
}
/* Ocultar bloque de productos duplicado en el Checkout */
.wp-block-woocommerce-checkout-order-summary-cart-items-block ~ .wp-block-woocommerce-checkout-order-summary-cart-items-block {
    display: none !important;
}
/* =========================================================
   CAMBIAR NOMBRE "EPAYCO" POR CSS (TRUCO VISUAL)
   ========================================================= */

/* 1. Ocultar el texto original "epayco" */
.epayco-payment-label-responsive .wc-block-components-payment-method-label {
    visibility: hidden !important;
    font-size: 0 !important; /* Lo reducimos a 0 para que desaparezca */
    position: relative;
}
/* =========================================================
   FIX TEXTO PAGO EPAYCO EN MÓVIL (EVITAR DESBORDE)
   ========================================================= */

@media (max-width: 480px) {
    .epayco-payment-label-responsive .wc-block-components-payment-method-label::after {
        white-space: normal !important; /* Permitir que el texto baje a la siguiente línea */
        position: relative !important;  /* Quitar posición absoluta para que ocupe espacio real */
        display: block !important;      /* Comportarse como bloque */
        line-height: 1.3 !important;    /* Espacio entre líneas para que se lea bien */
        font-size: 14px !important;     /* Un poquito más pequeño para asegurar que quepa */
        width: 100% !important;         /* Ocupar todo el ancho disponible */
        margin-bottom: 5px !important;  /* Dar un respiro antes de los logos */
    }

    /* Asegurar que el contenedor padre se expanda */
    .epayco-payment-label-responsive .wc-block-components-payment-method-label {
        height: auto !important;
        width: 100% !important;
        margin-bottom: 5px !important;
    }
}
/* 2. Escribir el Nuevo Texto encima */
.epayco-payment-label-responsive .wc-block-components-payment-method-label::after {
    content: "Tarjetas de crédito, débito y tarjetas Peoplepass)"; /* <--- CAMBIA ESTO */
    visibility: visible !important;
    font-size: 16px !important; /* Restauramos el tamaño de letra */
    color: #333 !important; /* Color del texto (negro/gris) */
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap; /* Evita que se rompa en dos líneas si es largo */
    font-weight: 700; /* Opcional: ponerlo en negrita */
}
/* =========================================================
   FIX BANNER PRODUCTO MÓVIL (QUITA FRANJAS BLANCAS)
   ========================================================= */

@media (max-width: 768px) {
    .producto-banner-dinamico-fullwidth {
        width: 100vw !important;       /* Ancho total de la ventana */
        max-width: 100vw !important;   /* Asegurar que no se limite */
        position: relative !important;
        left: 50% !important;          /* Mover al centro */
        right: auto !important;
        transform: translateX(-50%) !important; /* Centrar matemáticamente */
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;      /* Sin margen negativo arriba en móvil */
        box-sizing: border-box !important;
    }
    
    /* Opcional: Si el banner se ve muy pegado o cortado, ajusta el padding interno */
    .producto-banner-dinamico-fullwidth > .elementor {
        width: 100% !important;
    }
}
/* =========================================================
   CORRECCIÓN ALINEACIÓN CHECKLIST (RESET H5)
   ========================================================= */

/* 1. Quitar los márgenes por defecto del H5 para que suba */
.features-list-container li h5 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important; /* Altura de línea normal para que no se vea apretado */
    font-size: 15px !important; /* Asegurar tamaño legible */
}

/* 2. Bajar el chulito ligeramente para centrarlo con la primera línea */
.features-list-container li::before {
    margin-top: 3px !important; /* Empuja el icono 3px hacia abajo */
    align-self: flex-start !important;
}

/* Asegurar que la lista (li) esté alineada arriba */
.features-list-container li {
    align-items: flex-start !important;
}
/* =========================================================
   OCULTAR RESUMEN SUPERIOR EN MÓVIL (QUEDAR SOLO CON EL FINAL)
   ========================================================= */

@media (max-width: 768px) {
    /* Ocultar el contenedor de la barra lateral (el acordeón de arriba) */
    .wc-block-checkout__sidebar {
        display: none !important;
    }

    /* Asegurar que el resumen de abajo (Actions) se vea bien y ocupe el ancho */
    .wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-block {
        display: block !important;
        width: 100% !important;
        margin-top: 20px !important;
        background-color: #fff; /* Asegurar fondo blanco si lo necesita */
        border-radius: 12px;
    }
}
/* --- ESTILO MENSAJES DE ERROR WOOCOMMERCE --- */
.woocommerce-error, .woocommerce-message, .woocommerce-info {
    border-top: 0 !important; /* Quitar borde de color superior */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Sombra suave */
    padding: 15px 20px !important;
    font-size: 14px;
    font-weight: 500;
}

/* Error (Rojo suave) */
.woocommerce-error {
    background-color: #FFF2F2 !important; /* Fondo rojo muy pálido */
    color: #D32F2F !important; /* Texto rojo oscuro elegante */
    border-left: 5px solid #D32F2F !important; /* Borde izquierdo */
}

/* Icono de error (Opcional, requiere FontAwesome o similar, o se puede usar un caracter) */
.woocommerce-error::before {
    content: '\26A0'; /* Carácter de alerta (⚠) */
    margin-right: 10px;
    font-size: 18px;
}

/* Traducción visual del mensaje técnico de ePayco */
/* Esto ocultará el mensaje técnico feo si logramos identificarlo por clase, 
   pero como viene dinámico, lo mejor es el filtro de texto de abajo */
.wc-block-components-quantity-selector {
    display: none !important;
}
/* --- Estilos Específicos para Caja Resumen de Compra (Fondo Negro) --- */

.resumen-compra-box {
    background-color: #000000 !important; /* Fondo Negro */
    color: #ffffff !important;            /* Texto General Blanco */
    border: 1px solid #333333 !important; /* Borde gris oscuro sutil */
}

/* Forzar títulos internos a blanco */
.resumen-compra-box h3, 
.resumen-compra-box h4 {
    color: #ffffff !important;
}

/* Forzar etiquetas, precios y textos a blanco */
.resumen-compra-box span, 
.resumen-compra-box small,
.resumen-compra-box .woocommerce-Price-amount {
    color: #ffffff !important;
}

.gracias-columna-derecha .button.wc-backward {
    background-color: #F8AC11 !important; /* Amarillo */
    color: #000000 !important;            /* Letra Negra */
    border: none !important;
    border-radius: 10px !important;
    width: 100%;
    text-align: center;
    padding: 15px;
    font-weight: bold !important;
    transition: background-color 0.3s ease;
}

/* Opcional: Para que se oscurezca un poco al pasar el mouse */
.gracias-columna-derecha .button.wc-backward:hover {
    background-color: #df9b10 !important; 
    color: #000000 !important;
}
/* --- ESTILO DE ALERTAS Y ERRORES WOOCOMMERCE --- */

/* 1. El Contenedor (La tarjeta) */
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
    background-color: #ffffff !important; /* Fondo Blanco Limpio */
    color: #333333 !important;            /* Texto Gris Oscuro (Legible) */
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 8px !important;        /* Bordes redondeados */
    padding: 20px 25px !important;        /* Más espacio interno */
    margin-bottom: 25px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important; /* Sombra suave y elegante */
    list-style: none !important;          /* Quitar puntos de lista */
    position: relative;
    overflow: hidden;
}

/* 2. Borde lateral para ERRORES (Rojo) */
.woocommerce-notices-wrapper .woocommerce-error {
    border-left: 6px solid #e74c3c !important; /* Rojo moderno */
}

/* 3. Borde lateral para MENSAJES DE ÉXITO (Verde) - Por si sale alguno */
.woocommerce-notices-wrapper .woocommerce-message {
    border-left: 6px solid #27ae60 !important; /* Verde */
}

/* 4. Borde lateral para INFORMACIÓN (Azul/Amarillo) */
.woocommerce-notices-wrapper .woocommerce-info {
    border-left: 6px solid #2980b9 !important; /* Azul */
}

/* 5. El Texto y el Icono */
.woocommerce-notices-wrapper .woocommerce-error li,
.woocommerce-notices-wrapper .woocommerce-message li,
.woocommerce-notices-wrapper .woocommerce-info li {
    display: flex !important;
    align-items: center !important; /* Centra el icono con el texto */
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

/* 6. El Icono Personalizado (Círculo con signo) */
.woocommerce-notices-wrapper .woocommerce-error li::before,
.woocommerce-notices-wrapper .woocommerce-message li::before,
.woocommerce-notices-wrapper .woocommerce-info li::before {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;         /* Lo hace redondo */
    margin-right: 15px !important;
    font-family: sans-serif !important;
    font-weight: bold;
    font-size: 16px;
    flex-shrink: 0;             /* Evita que el icono se aplaste */
}

/* Icono Específico para ERROR (X roja) */
.woocommerce-notices-wrapper .woocommerce-error li::before {
    content: '✕';               /* X de cierre */
    background-color: #fceceb;  /* Fondo rojo muy suave */
    color: #e74c3c;             /* X roja */
}

/* Icono Específico para ÉXITO (Check verde) */
.woocommerce-notices-wrapper .woocommerce-message li::before {
    content: '✓';
    background-color: #eafaf1;
    color: #27ae60;
}

/* Ocultar el icono por defecto feo de WooCommerce */
.woocommerce-error::after, 
.woocommerce-message::after, 
.woocommerce-info::after {
    display: none !important;
}
/* Fuerza bruta para móvil en Elementor My Account */
@media (max-width: 1024px) {
    /* Atacamos el contenedor raíz del formulario */
    .woocommerce-account .woocommerce,
    .elementor-widget-woocommerce-my-account .woocommerce {
        padding-left: 20px !important;
        padding-right: 20px !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Forzamos a que el formulario interno respete el ancho */
    .woocommerce-account form.login, 
    .woocommerce-account form.register {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        padding: 20px !important; /* Relleno interno del cuadro blanco */
        box-sizing: border-box !important;
    }

    /* Ajuste para las columnas de login/registro si están activas ambas */
    .u-columns.col2-set {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
}
/* =========================================================
   DISEÑO ELEGANTE PARA ALERTAS DE ERROR EN CHECKOUT BLOCKS
   ========================================================= */

/* Apuntamos al contenedor de error específico de los bloques de WooCommerce */
.wc-block-checkout .wc-block-components-notice-banner.is-error {
    background-color: #ffffff !important;
    border-left: 6px solid #e74c3c !important; /* Borde rojo moderno */
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 20px rgba(231, 76, 60, 0.15) !important; /* Sombra rojiza suave */
    padding: 20px 25px !important;
    margin-bottom: 25px !important;
    display: flex !important;
    align-items: center !important;
}

/* El texto del error */
.wc-block-checkout .wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__content {
    color: #333333 !important;
    font-family: "Urbanist", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* El icono de SVG nativo (Hacerlo rojo para que combine) */
.wc-block-checkout .wc-block-components-notice-banner.is-error svg {
    fill: #e74c3c !important;
    width: 24px !important;
    height: 24px !important;
    margin-right: 15px !important;
}
/* =========================================================
   FORZAR POPUP SWEETALERT POR ENCIMA DE EPAYCO EN MÓVILES
   ========================================================= */
.swal2-container.swal2-center {
    z-index: 9999999 !important; /* Capa máxima, por encima de ePayco */
}
/* Forzar color y borde del botón de SweetAlert */
.swal2-actions .swal2-styled.swal2-confirm {
    background-color: #F8AC11 !important;
    border: 2px solid #F8AC11 !important; /* Aquí cambias el color del borde */
    box-shadow: none !important; /* Esto quita la sombra azulada por defecto al hacer clic */
}
/* =========================================================
   LIMPIEZA DE MENSAJES DE ERROR DE WOOCOMMERCE
   ========================================================= */

/* 1. Ocultar el icono/elemento (::before) que estorba encima del texto */
.woocommerce-error::before {
    display: none !important;
    content: none !important; /* Doble seguridad para que desaparezca */
}

/* 2. Ajustar el contenedor rojo para que se vea bien sin el icono */
/* A veces los temas dejan un hueco grande a la izquierda para el icono, esto lo arregla */
.woocommerce-error {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    padding-left: 20px !important; /* Ajusta este valor si lo quieres más pegado al borde */
    display: block !important; /* Asegura que la caja ocupe bien el espacio */
}