/**
 * PayU LATAM & PayPal Checkout Styles - ABDigitizing
 * Diseño UI/UX moderno en formato de "Acordeón" Unificado
 * Compatible con WooCommerce estándar, Blocksy Child y FunnelKit Builder.
 */

/* ==========================================================================
   1. CONTENEDOR GLOBAL (EL ACORDEÓN COMPLETO)
   ========================================================================== */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_methods,
body #payment .payment_methods,
#payment ul.payment_methods,
.wfacp_main_form ul.payment_methods,
.wffn-checkout-form ul.payment_methods {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    list-style: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
}

/* ==========================================================================
   2. FILAS DE MÉTODOS DE PAGO (LAS OPCIONES)
   ========================================================================== */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_methods li.wc_payment_method,
body #payment .payment_methods li.wc_payment_method,
.wfacp_main_form ul.payment_methods > li.wc_payment_method,
.wffn-checkout-form ul.payment_methods > li.wc_payment_method {
    border-bottom: 1px solid #e5e7eb !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #ffffff !important;
    border-radius: 0 !important;
    transition: background-color 0.2s ease-in-out !important;
    list-style: none !important;
    box-shadow: none !important; /* Elimina sombras y bordes por defecto de FunnelKit */
}

/* ==========================================================================
   2.5 EFECTO HOVER EN MÉTODOS INACTIVOS
   ========================================================================== */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_methods li.wc_payment_method:not(:has(input[name="payment_method"]:checked)):hover,
body #payment .payment_methods li.wc_payment_method:not(:has(input[name="payment_method"]:checked)):hover,
.wfacp_main_form ul.payment_methods > li.wc_payment_method:not(:has(input[name="payment_method"]:checked)):hover,
.wffn-checkout-form ul.payment_methods > li.wc_payment_method:not(:has(input[name="payment_method"]:checked)):hover {
    background-color: #f1f5f9 !important;
    cursor: pointer !important;
}

/* Quitar borde a la última fila para que no choque con el border-radius del padre */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_methods li.wc_payment_method:last-child,
body #payment .payment_methods li.wc_payment_method:last-child {
    border-bottom: none !important;
}

/* ==========================================================================
   3. ESTADO ACTIVO (MÉTODO SELECCIONADO)
   ========================================================================== */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_methods li.wc_payment_method:has(input[name="payment_method"]:checked),
body .wfacp_main_form .woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:has(input[name="payment_method"]:checked),
body #payment ul.payment_methods > li.wc_payment_method:has(input[name="payment_method"]:checked) {
    background-color: #cfe7f5 !important;
    border-radius: 12px !important; /* base; sobreescrita por reglas posicionales abajo */
    position: relative !important;
}

/* --- Border-radius CONDICIONAL según posición en el acordeón --- */
/* Primero (solo esquinas superiores) */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_methods li.wc_payment_method:first-child:has(input[name="payment_method"]:checked),
body #payment ul.payment_methods > li.wc_payment_method:first-child:has(input[name="payment_method"]:checked) {
    border-radius: 12px 12px 0 0 !important;
}
/* Medio (sin radio en ninguna esquina) */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_methods li.wc_payment_method:not(:first-child):not(:last-child):has(input[name="payment_method"]:checked),
body #payment ul.payment_methods > li.wc_payment_method:not(:first-child):not(:last-child):has(input[name="payment_method"]:checked) {
    border-radius: 0 !important;
}
/* Último (solo esquinas inferiores) */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_methods li.wc_payment_method:last-child:has(input[name="payment_method"]:checked),
body #payment ul.payment_methods > li.wc_payment_method:last-child:has(input[name="payment_method"]:checked) {
    border-radius: 0 0 12px 12px !important;
}
/* Único método (radio completo) */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_methods li.wc_payment_method:first-child:last-child:has(input[name="payment_method"]:checked),
body #payment ul.payment_methods > li.wc_payment_method:first-child:last-child:has(input[name="payment_method"]:checked) {
    border-radius: 12px !important;
}

/* Pseudo-elemento ::after — mismo radio condicional para el borde azul */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_methods li.wc_payment_method:has(input[name="payment_method"]:checked)::after,
body .wfacp_main_form .woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:has(input[name="payment_method"]:checked)::after,
body #payment ul.payment_methods > li.wc_payment_method:has(input[name="payment_method"]:checked)::after {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 2px solid #358cb8 !important;
    border-radius: 12px !important; /* base */
    pointer-events: none !important;
    z-index: 10 !important;
}
/* ::after — Primero */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_methods li.wc_payment_method:first-child:has(input[name="payment_method"]:checked)::after,
body #payment ul.payment_methods > li.wc_payment_method:first-child:has(input[name="payment_method"]:checked)::after {
    border-radius: 12px 12px 0 0 !important;
}
/* ::after — Medio */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_methods li.wc_payment_method:not(:first-child):not(:last-child):has(input[name="payment_method"]:checked)::after,
body #payment ul.payment_methods > li.wc_payment_method:not(:first-child):not(:last-child):has(input[name="payment_method"]:checked)::after {
    border-radius: 0 !important;
}
/* ::after — Último */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_methods li.wc_payment_method:last-child:has(input[name="payment_method"]:checked)::after,
body #payment ul.payment_methods > li.wc_payment_method:last-child:has(input[name="payment_method"]:checked)::after {
    border-radius: 0 0 12px 12px !important;
}
/* ::after — Único */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_methods li.wc_payment_method:first-child:last-child:has(input[name="payment_method"]:checked)::after,
body #payment ul.payment_methods > li.wc_payment_method:first-child:last-child:has(input[name="payment_method"]:checked)::after {
    border-radius: 12px !important;
}

/* Forzar que el label (título) tenga el fondo #cfe7f5 para pisar a FunnelKit */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_methods li.wc_payment_method > input[type="radio"]:checked + label,
body #wfacp-e-form .wfacp_main_form.woocommerce .woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > input[type="radio"]:checked + label,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment ul.payment_methods > li.wc_payment_method > input[type="radio"]:checked + label,
body #wfacp-e-form #payment ul.payment_methods > li.wc_payment_method > input[type="radio"]:checked + label,
body #payment ul.payment_methods > li.wc_payment_method > input[type="radio"]:checked + label {
    background-color: #cfe7f5 !important;
}

/* ==========================================================================
   4. LABELS Y RADIO BUTTONS (ALINEACIÓN ABSOLUTA PARA FUNNELKIT)
   ========================================================================== */
/* El contenedor de la fila debe ser relativo para posicionar el radio button */
#payment ul.payment_methods > li.wc_payment_method,
.wfacp_main_form ul.payment_methods > li.wc_payment_method {
    position: relative !important;
}

/* Posicionar el radio button absolutamente a la izquierda */
body .wfacp_main_form.woocommerce .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
    position: absolute !important;
    left: 20px !important;
    top: 30px !important;
    transform: translateY(-50%) scale(1.3) !important;
    z-index: 10 !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
}

/* El label ocupa todo el ancho y tiene un padding-left enorme para dejarle espacio al radio button */
body .wfacp_main_form .woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label,
body #payment ul.payment_methods > li.wc_payment_method > label,
body .wfacp_main_form ul.payment_methods > li.wc_payment_method > label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 18px 20px 18px 50px !important; /* 50px de espacio para el radio button */
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    cursor: pointer !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    min-height: 60px !important;
}

/* Iconos (Logos de franquicias alineados a la derecha) */
#payment ul.payment_methods > li.wc_payment_method > label img,
.wfacp_main_form ul.payment_methods > li.wc_payment_method > label img {
    max-height: 28px !important;
    width: auto !important;
    object-fit: contain !important;
    margin-left: auto !important;
    display: block !important;
}

/* ==========================================================================
   5. CONTENEDORES INTERNOS DE LOS FORMULARIOS (.payment_box)
   ========================================================================== */
.woocommerce-checkout .payment_box.payment_method_payu_credit_card,
.woocommerce-checkout .payment_box.payment_method_payu_pse,
.woocommerce-checkout .payment_box.payment_method_eh_paypal_express,
.woocommerce-account .payment_box.payment_method_payu_credit_card,
.wfacp-checkout-form-block .payment_box.payment_method_payu_credit_card,
.wfacp-checkout-form-block .payment_box.payment_method_payu_pse,
.wfacp-checkout-form-block .payment_box.payment_method_eh_paypal_express,
.wcf-embed-checkout .payment_box.payment_method_payu_credit_card,
.wcf-embed-checkout .payment_box.payment_method_payu_pse,
.wcf-embed-checkout .payment_box.payment_method_eh_paypal_express,
.wffn-checkout-form .payment_box.payment_method_payu_credit_card,
.wffn-checkout-form .payment_box.payment_method_payu_pse,
.wffn-checkout-form .payment_box.payment_method_eh_paypal_express {
    background-color: #f1faff !important; /* Tono azul pastel para todos los métodos */
    border: none !important;
    border-top: 1px solid #cbd5e1 !important; /* Línea divisoria elegante */
    border-radius: 0 !important;
    padding: 20px !important;
    margin: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    color: #192a3d !important;
    box-sizing: border-box !important;
}

/* Ocultar pico/triángulo superior de la caja para un acabado limpio */
.payment_box::before {
    display: none !important;
}

/* ==========================================================================
   5.5 ESTILOS DE LA DESCRIPCIÓN DEL MÉTODO DE PAGO
   ========================================================================== */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_methods li.wc_payment_method .payment_box > p:first-child,
body #payment .payment_methods li.wc_payment_method .payment_box > p:first-child,
body .payment_box > p:first-child {
    background-color: #f8fafc !important; /* Gris super claro */
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    color: #475569 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: block !important;
}

/* ==========================================================================
   6. ESTILOS DE CAMPOS CON GRADIENTE AZUL Y BORDES REDONDEADOS (15px)
   ========================================================================== */
body .payu-input-group,
body .payu-payment-form,
body #payu-cc-form,
body #wc-payu_credit_card-cc-form,
body #wc-payu_pse-cc-form {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
}

body .payu-input-group,
body .payu-payment-form {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    position: relative !important;
}

/* Filas custom del PSE (reemplazan .form-row de WooCommerce para evitar que FunnelKit inyecte bold) */
body .payu-form-row-wide {
    width: 100% !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
}

/* Labels de Campos */
body .payu-payment-form label,
body #payu-cc-form label,
body #wc-payu_credit_card-cc-form label,
body #wc-payu_pse-cc-form label {
    font-weight: 400 !important;
    font-size: 13px !important;
    color: #334155 !important;
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}

/* Quitar el margin-bottom residual que inyecta FunnelKit en AMBAS columnas de la fila expiry/CVV */
body .wfacp_main_form.woocommerce .woocommerce-checkout #payment ul.payment_methods li .form-row.form-row-first {
    margin-bottom: 0px !important;
}

/* Eliminar margin-bottom de la columna CVV (form-row-last) para que no desplace verticalmente el grupo */
body .wfacp_main_form.woocommerce .woocommerce-checkout #payment ul.payment_methods li .form-row.form-row-last {
    margin-bottom: 0px !important;
}

body .payu-payment-form label .required {
    color: #e30058 !important;
    font-weight: 400 !important;
}

/* Inputs y Selects con Gradiente Azul (#358cb8 -> #80d4ff) */
body .payu-payment-form input[type="text"],
body .payu-payment-form input[type="password"],
body .payu-payment-form input[type="tel"],
body #payu-cc-form .input-text,
body #wc-payu_credit_card-cc-form .input-text,
body #wc-payu_pse-cc-form .input-text {
    padding: 10px 15px 10px 15px !important;
    padding-left: 15px !important; /* garantía explícita de espacio interior izquierdo */
    margin-bottom: 6px !important;
    border-radius: 15px !important;
    border: 1px solid transparent !important;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to top, #358cb8, #80d4ff) border-box !important;
    font-size: 15px !important;
    color: #192a3d !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important; /* Anula min-height:48px de FunnelKit wfacp-form.min.css */
    line-height: 20px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
    text-indent: 0 !important;
}

/* Refuerzo de alta especificidad para ganarle a FunnelKit en el padding izquierdo */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payu-payment-form input[type="text"],
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payu-payment-form input[type="tel"],
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payu-payment-form input[type="password"],
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payu-pse-payment-form input[type="text"],
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payu-pse-payment-form input[type="tel"],
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .input-text {
    padding-left: 15px !important;
    text-indent: 0 !important;
}

/* Alineación vertical perfecta para elementos select (País, Bancos PSE, etc.) */
body .payu-payment-form select,
body #payu-cc-form select,
body #wc-payu_credit_card-cc-form select,
body #wc-payu_pse-cc-form select,
body .payu-pse-select {
    padding: 10px 15px 10px 15px !important;
    padding-left: 15px !important; /* garantía explícita de espacio interior izquierdo */
    margin-bottom: 6px !important;
    border-radius: 15px !important;
    border: 1px solid transparent !important;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to top, #358cb8, #80d4ff) border-box !important;
    font-size: 15px !important;
    color: #192a3d !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important; /* Anula min-height:48px de FunnelKit wfacp-form.min.css */
    line-height: 20px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
    text-indent: 0 !important;
}

/* Refuerzo de alta especificidad para ganarle a FunnelKit en el padding izquierdo (selects) */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payu-payment-form select,
body #wfacp-e-form .wfacp_main_form.woocommerce #payment select.payu-pse-select {
    padding-left: 15px !important;
    text-indent: 0 !important;
}

/* Matar la transición 'all' que FunnelKit inyecta en el wrapper .payu-input-group.
   Esto es lo que causaba el delay de ~1.5s al hacer focus en los CC inputs. */
body .payu-input-group,
body .payu-payment-form .payu-input-group {
    transition: none !important;
}

/* State Focus — instantáneo (transition: none) */
body .payu-payment-form input:focus,
body .payu-payment-form select:focus,
body #payu-cc-form .input-text:focus,
body #payu-cc-form select:focus,
body #wc-payu_pse-cc-form .input-text:focus,
body #wc-payu_pse-cc-form select:focus {
    border-width: 2px !important;
    border-color: transparent !important;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to top, #358cb8, #80d4ff) border-box !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(53, 140, 184, 0.15) !important;
    transition: none !important;
}

/* SelectWoo (Country) — outline limpio en todos los estados */
body .payment_method_payu_credit_card .select2-container,
body .payment_method_payu_credit_card .select2-container--default,
body .payment_method_payu_credit_card .select2-container--open,
body .payment_method_payu_credit_card .select2-container--focus,
body .payment_method_payu_credit_card .select2-container--above {
    outline: none !important;
}

/* Estado DEFAULT: gradiente + border-radius 15px en el .select2-selection--single.
   FIX: SelectWoo asigna background:white y border-radius:4px por defecto al
   .select2-selection--single. Como nuestro gradient border usa 15px, los 11px
   de diferencia hacen visibles unas esquinas blancas cuadradas detrás del borde
   redondeado. Aplicar el mismo gradiente + 15px elimina el artefacto. */
body .payment_method_payu_credit_card .select2-container .select2-selection--single {
    border: 1px solid transparent !important;
    border-radius: 15px !important;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to top, #358cb8, #80d4ff) border-box !important;
    height: 42px !important;
    min-height: 42px !important;
    outline: none !important;
}

/* FIX DOBLE BORDE: el .select2-selection__rendered (span interior) recibe por
   separado dos capas de borde: una de FunnelKit (border: 1px solid #bfbfbf) y
   otra del CSS personalizado de FunnelKit (gradient border, ya existía antes de hoy).
   Como ahora .select2-selection--single también tiene gradient, se superponen
   creando un doble borde visible. Limpiamos el span interior — el gradiente del
   contenedor (selection--single) es suficiente para el efecto visual correcto.
   CENTRADO VERTICAL: FunnelKit inyecta padding-top: 20px vía inline CSS de alta
   especificidad. Restauramos: (42px - 21px line-height) / 2 ≈ 10px top para centrar.
   El padding-right: 30px preserva espacio para el arrow indicator de SelectWoo. */
body .payment_method_payu_credit_card .select2-container .select2-selection__rendered {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 9px 30px 10px 12px !important;
    line-height: 22px !important;
    height: 100% !important;
    min-height: 0 !important; /* Anula min-height de FunnelKit */
    box-sizing: border-box !important;
}


/* Estado FOCUS / OPEN — borde más grueso + glow azul */
body .payment_method_payu_credit_card .select2-container--open .select2-selection--single,
body .payment_method_payu_credit_card .select2-container--focus .select2-selection--single,
body .payment_method_payu_credit_card .select2-container--open.select2-container--above .select2-selection--single {
    border: 2px solid transparent !important;
    border-radius: 15px !important;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to top, #358cb8, #80d4ff) border-box !important;
    box-shadow: 0 0 0 3px rgba(53, 140, 184, 0.15) !important;
    outline: none !important;
    transition: none !important;
}

/* Search input dentro del dropdown Select2 */
body .payment_method_payu_credit_card .select2-search--dropdown .select2-search__field {
    outline: none !important;
    border-radius: 8px !important;
    border: 1px solid #d1d5db !important;
}

/* ==========================================================================
   FIX CRÍTICO: <select> nativo oculto por SelectWoo (.select2-hidden-accessible)
   SelectWoo oculta el <select> nativo con clip + width:1px + height:1px.
   Nuestro CSS general (body .payu-payment-form select) sobreescribía esas
   reglas con !important, dejando el nativo visible con 48px + gradient border
   superpuesto al SelectWoo — generando el doble borde en el Country field.
   Este bloque restaura el comportamiento correcto de ocultación.
   ========================================================================== */
body .payment_method_payu_credit_card .payu-payment-form select.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}



/* Inputs Inválidos */
body .payu-input-invalid,
body input.payu-input-error,
body select.payu-input-error {
    border: 1px solid #e30000 !important;
    background: #fff2f4 none !important;
    background-clip: padding-box !important;
}

/* ==========================================================================
   7. ICONO DE FRANQUICIA DE TARJETA
   ========================================================================== */
/* Asegurar que el contenedor del input y del ícono sea relativo para anclar el ícono firmemente */
body .payu-input-group > div,
body .form-row > div:has(#payu-card-icon),
body .payu-card-number-wrapper {
    position: relative !important;
}

body #payu-card-icon,
body .payu-card-brand-icon {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 24px !important;
    width: auto !important;
    display: inline-block !important;
    opacity: 0.85 !important;
    background: transparent !important;
    pointer-events: none !important;
}

body.woocommerce-account #payu-card-icon {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    background: transparent !important;
}

/* ==========================================================================
   8. FILA DE DETALLES (Expiry + CVV + Country + Postal Code en 2 columnas)
   ========================================================================== */

/* Contenedor principal: 2 columnas 50/50, alineadas por la base de los inputs */
body .wc-gateway-payu-cc-details-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    align-items: stretch !important;
    margin-top: 0 !important;
    padding-top: 7px !important; /* 7px padding + 5px margin-bottom de Row1 = 12px gap visual */
    margin-bottom: 4px !important; /* JS (adjustDetailsRowMargin) amplía dinámicamente cuando hay errores */
    clear: both !important;
    width: 100% !important;
}

/* --- Columna izquierda (Expiry + CVV) --- */
body .payu-details-left-col {
    flex: 0 0 calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    display: flex !important;
    gap: 8px !important;
    align-items: stretch !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Expiry group: label + sub-fila de MM+YY */
body .payu-expiry-group {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

/* Sub-fila de inputs de expiración: MM + YY lado a lado */
body .payu-expiry-inputs-container {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
}

/* MM y YY: ancho fijo, solo 2 dígitos */
body .payu-expiry-month-wrapper {
    flex: 0 0 88px !important;
    width: 88px !important;
    min-width: 0 !important;
}
body .payu-expiry-month-wrapper input { width: 100% !important; box-sizing: border-box !important; }

body .payu-expiry-year-wrapper {
    flex: 0 0 88px !important;
    width: 88px !important;
    min-width: 0 !important;
}
body .payu-expiry-year-wrapper input { width: 100% !important; box-sizing: border-box !important; }

/* CVV group: hermano del expiry-group, llena el resto del 50% izquierdo */
body .payu-cvv-group {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}
body .payu-cvv-group input { width: 100% !important; box-sizing: border-box !important; }

/* Alta especificidad FunnelKit: resetear overrides */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payu-expiry-group,
body #payu-cc-form .payu-expiry-group {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payu-cvv-group,
body #payu-cc-form .payu-cvv-group {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* --- Columna derecha (Country + Postal Code) --- */
body .payu-details-right-col {
    flex: 0 0 calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    display: flex !important;
    gap: 8px !important;
    align-items: stretch !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Country: ligeramente más ancho */
body .payu-country-group {
    flex: 0 0 55% !important;
    width: 55% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}
body .payu-country-group .select2-container,
body .payu-country-group select {
    width: 100% !important;
}
/* Select2 container: margen inferior igualado con text inputs */
body .payu-country-group .select2-container {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}
/* Igualar la altura del Select2 con los text inputs para alineación pixel-perfect */
body .payu-country-group .select2-container .select2-selection--single {
    height: 42px !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* Postal Code: llena el resto */
body .payu-postal-group {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}
body .payu-postal-group input { width: 100% !important; box-sizing: border-box !important; }

/* Reset margin-top de inputs en Row 2: iguala label→input gap (5px) con Row 1.
   Debe superar #payment ul li input[type="tel"] { margin-top:5px!important } de wfacp_combined.min.css */
#payment .wc-gateway-payu-cc-details-row input[type="text"],
#payment .wc-gateway-payu-cc-details-row input[type="tel"],
#payment .wc-gateway-payu-cc-details-row input[type="password"],
#payment .wc-gateway-payu-cc-details-row input[type="number"],
#payment .wc-gateway-payu-cc-details-row .select2-container {
    margin-top: 0 !important;
}

.payu-form-row-flex {
    display: flex !important;
    gap: 12px !important;
    margin-top: 12px !important;
    width: 100% !important;
}

.payu-form-row-flex .payu-col-half {
    flex: 1 !important;
    width: calc(50% - 6px) !important;
}

/* ── Card Number + Card Holder Name: 2 columnas en desktop ─────────────────
   Usa float en lugar de flex para respetar la estructura existente del
   fieldset.payu-payment-form sin añadir wrappers extra al PHP.
   El clearfix se aplica en .wc-gateway-payu-cc-expiry-cvv-row que ya existe. */
body .payment_method_payu_credit_card .payment_box .form-row:has(#payu_cc_number),
body .payment_method_payu_credit_card .payment_box .form-row:has(#payu_cc_name) {
    width: calc(50% - 8px) !important;
    float: left !important;
    clear: none !important;
    box-sizing: border-box !important;
}
body .payment_method_payu_credit_card .payment_box .form-row:has(#payu_cc_number) {
    margin-right: 8px !important;
}
body .payment_method_payu_credit_card .payment_box .form-row:has(#payu_cc_name) {
    margin-left: 8px !important;
}
/* Clearfix: la fila de detalles limpia el float superior */
body .payment_method_payu_credit_card .payment_box .wc-gateway-payu-cc-details-row {
    clear: both !important;
}

/* Mobile (≤ 768px): colapsar Card Number / Card Holder a columna única
   y redistribuir Expiry+CVV / Country+Postal con proporciones flexibles */
@media (max-width: 768px) {
    body .payment_method_payu_credit_card .payment_box .form-row:has(#payu_cc_number),
    body .payment_method_payu_credit_card .payment_box .form-row:has(#payu_cc_name) {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Fila de detalles: apilar las 2 columnas principales verticalmente */
    body .wc-gateway-payu-cc-details-row {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    body .payu-details-left-col,
    body .payu-details-right-col {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    /* Left col: Expiry + CVV side by side con proporciones flexibles */
    body .payu-details-left-col {
        flex-wrap: nowrap !important;
        gap: 12px !important;
    }
    body .payu-expiry-group {
        flex: 1 1 55% !important;
        width: auto !important;
        min-width: 0 !important;
    }
    body .payu-expiry-month-wrapper {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 50px !important;
    }
    body .payu-expiry-year-wrapper {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 50px !important;
    }
    body .payu-expiry-inputs-container {
        gap: 8px !important;
    }
    body .payu-cvv-group {
        flex: 1 1 40% !important;
        min-width: 0 !important;
    }
    /* Right col: Country + Postal Code side by side */
    body .payu-details-right-col {
        flex-wrap: nowrap !important;
        gap: 12px !important;
    }
    body .payu-country-group {
        flex: 1 1 55% !important;
        width: auto !important;
    }
    body .payu-postal-group {
        flex: 1 1 45% !important;
        width: auto !important;
    }
}

/* Very small mobile (≤ 380px): apilar TODO en columna única */
@media (max-width: 380px) {
    /* Expiry y CVV en columnas separadas */
    body .payu-details-left-col {
        flex-wrap: wrap !important;
        gap: 0 !important;
    }
    body .payu-expiry-group {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    body .payu-cvv-group {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    /* Country y Postal Code en columnas separadas */
    body .payu-details-right-col {
        flex-wrap: wrap !important;
        gap: 0 !important;
    }
    body .payu-country-group {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    body .payu-postal-group {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   8b. FIX ORDER-PAY: Forzar visibilidad de métodos de pago y restaurar estilos
   WooCommerce oculta .payment_methods con inline style="display:none"
   en order-pay cuando la orden ya tiene un método asignado.
   Además, cuando FunnelKit no carga (ej. tras un error POST), los radios se rompen.
   ========================================================================== */
body.woocommerce-order-pay #payment .payment_methods {
    display: block !important;
}



/* ==========================================================================
   9. MENSAJES DE ERROR DE VALIDACIÓN
   ========================================================================== */
/*
 * ESTRATEGIA ANTI-SOLAPAMIENTO:
 * Todos los mensajes de error fluyen en el documento de forma normal
 * (position: relative / static). El campo que los antecede tiene
 * margin-bottom: 0 para que la separación la maneje el propio mensaje
 * con su margin-bottom. Esto evita que los mensajes tapen al campo
 * siguiente cuando usan position: absolute.
 */

/* Errores dinámicos de FunnelKit/WooCommerce inyectados por jQuery Validate (label.error) */
body #wfacp-e-form .wfacp_main_form.woocommerce #payment .payment_methods li.wc_payment_method label.error,
body #payment .payment_methods li.wc_payment_method label.error {
    display: block !important;
    color: #e30058 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important; /* empuja físicamente el siguiente campo hacia abajo */
    padding: 0 !important;
    position: static !important; /* Flujo normal — NO absoluto */
    line-height: 1.3 !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    min-height: 0 !important;
}

/* Contenedores de campos: posición relativa para errores absolutos y el icono de franquicia */
body .payu-expiry-month-wrapper, 
body .payu-expiry-year-wrapper,
body .payu-cvv-group,
body .payu-country-group,
body .payu-postal-group,
body .payu-col-half {
    position: relative !important;
}

/* Errores de validación en la fila de detalles: absolutos para no romper flex layout */
body .wc-gateway-payu-cc-details-row .payu-field-error-message {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    margin-top: 2px !important;
    z-index: 1 !important;
}

/*
 * .payu-field-error-message — mensajes propios del plugin
 * Ahora fluyen normalmente en el documento (position: static).
 * El margin-bottom empuja el siguiente campo hacia abajo sin solaparlo.
 */
body .payu-field-error-message {
    color: #e30058 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-top: 3px !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
    display: none;
    width: 100%;
    line-height: 1.3;
    position: static !important; /* Flujo normal — ya NO absoluto */
}

body .payu-field-error-message.is-visible {
    display: block !important;
}

/* ==========================================================================
   10. TOOLTIP DE GUARDAR TARJETA
   ========================================================================== */
body .payu-tooltip-container {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    position: relative !important;
}

/* Especificidad reforzada para el form-row que envuelve el tooltip en FunnelKit */
body .form-row.payu-tooltip-container,
body .woocommerce-form-row.payu-tooltip-container {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

/* Checkbox personalizado para total visibilidad */
.payu-tooltip-container input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #a0a0a0 !important;
    background-color: #fff !important;
    border-radius: 4px !important;
    display: inline-block !important;
    position: relative !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}
.payu-tooltip-container input[type="checkbox"]:checked {
    background-color: #358cb8 !important;
    border-color: #358cb8 !important;
}
.payu-tooltip-container input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 5px !important;
    top: 2px !important;
    width: 4px !important;
    height: 8px !important;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.payu-custom-tooltip {
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 9px !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    text-align: center !important;
    background: #8d8d8d !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    font-weight: bold !important;
    cursor: help !important;
}

.payu-custom-tooltip:hover::after {
    content: attr(data-tip) !important;
    position: absolute !important;
    bottom: 125% !important;
    padding: 8px 12px !important;
    border-radius: 5px !important;
    background: #333 !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    z-index: 1000 !important;
    min-width: 350px !important;
    text-align: left !important;
    right: 50% !important;
    transform: translateX(50%) !important;
    max-width: calc(100vw - 30px) !important;
}

/* ==========================================================================
   11. MENSAJES DE ERROR DE WOOCOMMERCE / PAYU
   ========================================================================== */
.woocommerce-order > ul, 
.woocommerce-checkout > ul:not(.wc_payment_methods),
#order_review > ul,
.woocommerce-error {
    background-color: #fce4e4 !important;
    border-left: 5px solid #cc0033 !important;
    border-radius: 10px !important;
    color: #cc0033 !important;
    padding: 10px 25px !important;
    margin: 0 0 25px 0 !important;
    list-style-type: none !important;
    display: block !important;
}

.woocommerce-order > ul li,
.woocommerce-checkout > ul:not(.wc_payment_methods) li,
#order_review > ul li,
.woocommerce-error li {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-left: 0 !important;
}

/* ── Tarjetas Guardadas (SavedPaymentMethods) ────────────────────────────── */

/* Margen superior de la lista completa de tarjetas guardadas */
body .woocommerce-SavedPaymentMethods {
    margin-top: 12px !important;
}

/* Separación entre el item del token guardado y el item "Use a new card" */
body .woocommerce-SavedPaymentMethods-new {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ── Label del CVV del token guardado ────────────────────────────────────── */

/* Mismo estilo que los labels del formulario CC: sin negrita, tamaño normal */
body .payu-token-cvv-label {
    font-weight: 400 !important;
    font-size: 13px !important;
    display: block !important;
    margin-bottom: 4px !important;
}

/* Asterisco rojo en el CVV del token y en todos los formularios PayU */
body .payu-token-cvv-label .required,
body .payu-payment-form .required,
body .payu-col .required {
    color: #e2401c !important;
    font-weight: 400 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   MY ACCOUNT > ADD PAYMENT METHOD
   Scope: body.woocommerce-add-payment-method (NO afecta el checkout)
   ════════════════════════════════════════════════════════════════════════════ */

/* Lista sin bullets ni padding */
body.woocommerce-add-payment-method .payment_methods {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Contenedor principal: borde azul, sin padding */
body.woocommerce-add-payment-method .payment_methods li {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 0 !important;
    border: 2px solid #007bff !important;
    border-radius: 10px !important;
    background: #f0f8ff !important;
    margin-bottom: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Radio button alineado con el título */
body.woocommerce-add-payment-method .payment_methods li input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 10px 0 20px !important;
    flex-shrink: 0 !important;
    accent-color: #007bff !important;
    align-self: center !important;
}

/* Label: título grande, centrado vertical con radio */
body.woocommerce-add-payment-method .payment_methods li > label {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    cursor: pointer !important;
    padding: 14px 20px 14px 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Ocultar iconos de marca del label (redundantes con los del input) */
body.woocommerce-add-payment-method .payment_methods li > label img {
    display: none !important;
}

/* Ocultar descripción del método de pago */
body.woocommerce-add-payment-method .payment_box > p:first-child {
    display: none !important;
}

/* Payment box: divisor superior, padding compacto */
body.woocommerce-add-payment-method .payment_box,
.woocommerce-account .payment_box.payment_method_payu_credit_card {
    flex-basis: 100% !important;
    margin: 0 !important;
    padding: 12px 20px 20px 20px !important;
    border: none !important;
    border-top: 1px solid rgba(0, 123, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

/* Fieldset: grid 2 columnas (Card Number + Card Holder en 1 fila) */
body.woocommerce-add-payment-method #wc-payu_credit_card-cc-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Card Number: primera columna */
body.woocommerce-add-payment-method #wc-payu_credit_card-cc-form > .form-row-wide:first-child {
    grid-column: 1 !important;
}

/* Card Holder Name: segunda columna */
body.woocommerce-add-payment-method #wc-payu_credit_card-cc-form > .form-row-wide:nth-child(2) {
    grid-column: 2 !important;
}

/* Details row: ancho completo, separación 12px respecto a fila 1 */
body.woocommerce-add-payment-method .wc-gateway-payu-cc-details-row {
    grid-column: 1 / -1 !important;
    padding-top: 12px !important;
}

/* Ocultar div.clear residual */
body.woocommerce-add-payment-method #wc-payu_credit_card-cc-form > .clear {
    display: none !important;
}

/* Labels compactos */
body.woocommerce-add-payment-method .payu-payment-form .form-row label,
body.woocommerce-add-payment-method .payu-payment-form .payu-input-group label {
    padding: 0 !important;
    margin-bottom: 2px !important;
    margin-top: 0 !important;
}

/* Inputs sin margin-top extra */
body.woocommerce-add-payment-method .payu-payment-form .form-row input,
body.woocommerce-add-payment-method .payu-payment-form .form-row select {
    margin-top: 0 !important;
}

/* ==========================================================================
   14. BOTÓN DE SPINNER ORDER-PAY
   ========================================================================== */
button.payu-is-loading {
    pointer-events: none !important;
    opacity: 0.8 !important;
}

button.payu-is-loading::after {
    content: "";
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    margin-left: 10px !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-top-color: #ffffff !important;
    border-radius: 50% !important;
    animation: payu-button-spin 0.8s linear infinite !important;
}

@keyframes payu-button-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   14. ICONO DE MARCA EN MOVIL  (consolidado)
   --------------------------------------------------------------------------
   Antes vivia repartido en tres sitios fuera del plugin, con tres
   especificidades distintas: el CSS global de FunnelKit lo ocultaba dos veces
   y el CSS de FunnelKit Cart lo ocultaba una tercera SIN cualificar, de modo
   que en movil desaparecia tambien el icono de Visa/Mastercard/Amex ya
   detectado. Aqui se oculta unicamente el icono generico; en cuanto
   detect-card-brand.js reconoce la marca retira .default-card-icon y el icono
   real se muestra. El !important es necesario porque ese mismo script llama a
   .show(), que escribe un display en el atributo style.
   ========================================================================== */
@media (max-width: 768px) {
    body #payu-card-icon.default-card-icon,
    body img#payu-card-icon.default-card-icon {
        display: none !important;
    }
}