/*
 * Donaciones YBS — checkout clásico de WooCommerce.
 * Capa visual únicamente. La lógica de producto, carrito, importes, AJAX y pago
 * permanece en PHP/JS exactamente igual que en la rama funcional v3.
 */

.customtpv-ybs-checkout-page {
    --ybs-blue: #183668;
    --ybs-blue-dark: #102b55;
    --ybs-muted: #a7a8aa;
    --ybs-soft: #f5f9ff;
    --ybs-radius: 24px;
}

/* El checkout YBS ocupa una sola columna. */
.customtpv-ybs-checkout-page form.checkout,
.customtpv-ybs-checkout-page #customer_details,
.customtpv-ybs-checkout-page #customer_details .col-1,
.customtpv-ybs-checkout-page #order_review,
.customtpv-ybs-checkout-page .woocommerce-checkout-review-order {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    clear: both !important;
}

.customtpv-ybs-checkout-page #customer_details .col-2 {
    display: none !important;
}

.customtpv-ybs-checkout-page .woocommerce-billing-fields > h3:first-child {
    display: none;
}

/* Títulos de secciones. */
.customtpv-ybs-checkout-page .customtpv-ybs-section-title,
.customtpv-ybs-checkout-page .customtpv-ybs-donation-box h3,
.customtpv-ybs-checkout-page .customtpv-ybs-payment-title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: var(--ybs-blue) !important;
    font-size: clamp(25px, 2.1vw, 30px) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em;
}

.customtpv-ybs-checkout-page .customtpv-ybs-personal-title {
    margin-top: 0 !important;
}

.customtpv-ybs-checkout-page .required {
    color: var(--ybs-blue) !important;
    text-decoration: none !important;
}

/* Filas 1-3: 1 / 4 / 4 columnas como en la referencia. */
.customtpv-ybs-checkout-page .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 10px;
}

.customtpv-ybs-checkout-page .woocommerce-billing-fields__field-wrapper .form-row {
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.customtpv-ybs-checkout-page .woocommerce-billing-fields__field-wrapper .ybs-span-1 { grid-column: span 1; }
.customtpv-ybs-checkout-page .woocommerce-billing-fields__field-wrapper .ybs-span-2 { grid-column: span 2; }
.customtpv-ybs-checkout-page .woocommerce-billing-fields__field-wrapper .ybs-span-3 { grid-column: span 3; }
.customtpv-ybs-checkout-page .woocommerce-billing-fields__field-wrapper .ybs-span-4 { grid-column: 1 / -1; }

/* Labels disponibles para accesibilidad, pero visualmente usamos placeholders. */
.customtpv-ybs-checkout-page .woocommerce-billing-fields__field-wrapper .form-row > label,
.customtpv-ybs-checkout-page .customtpv-ybs-extra-fields .customtpv-ybs-field > label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Inputs y selects: estilo azul YBS. */
.customtpv-ybs-checkout-page .woocommerce-billing-fields__field-wrapper input.input-text,
.customtpv-ybs-checkout-page .woocommerce-billing-fields__field-wrapper select,
.customtpv-ybs-checkout-page .customtpv-ybs-extra-fields input.input-text,
.customtpv-ybs-checkout-page .customtpv-ybs-extra-fields input[type="text"],
.customtpv-ybs-checkout-page .customtpv-ybs-extra-fields input[type="number"],
.customtpv-ybs-checkout-page .customtpv-ybs-extra-fields select,
.customtpv-ybs-checkout-page .customtpv-ybs-custom-input input {
    width: 100% !important;
    max-width: none !important;
    min-height: 45px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px 20px !important;
    color: #3b3d42 !important;
    background: #fff !important;
    border: 3px solid var(--ybs-blue) !important;
    border-radius: var(--ybs-radius) !important;
    box-shadow: none !important;
    outline: 0 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.customtpv-ybs-checkout-page .woocommerce-billing-fields__field-wrapper input.input-text:focus,
.customtpv-ybs-checkout-page .woocommerce-billing-fields__field-wrapper select:focus,
.customtpv-ybs-checkout-page .customtpv-ybs-extra-fields input:focus,
.customtpv-ybs-checkout-page .customtpv-ybs-extra-fields select:focus,
.customtpv-ybs-checkout-page .customtpv-ybs-custom-input input:focus {
    border-color: var(--ybs-blue-dark) !important;
    box-shadow: 0 0 0 2px rgba(24, 54, 104, .10) !important;
}

.customtpv-ybs-checkout-page input::placeholder {
    color: var(--ybs-muted) !important;
    opacity: 1 !important;
}

/* Select2 usado por país/provincia en algunos temas/configuraciones. */
.customtpv-ybs-checkout-page .select2-container {
    width: 100% !important;
    max-width: none !important;
}

.customtpv-ybs-checkout-page .select2-container .select2-selection--single {
    height: 45px !important;
    min-height: 45px !important;
    padding: 0 18px !important;
    background: #fff !important;
    border: 3px solid var(--ybs-blue) !important;
    border-radius: var(--ybs-radius) !important;
    box-shadow: none !important;
}

.customtpv-ybs-checkout-page .select2-container .select2-selection--single .select2-selection__rendered {
    height: 39px !important;
    padding: 0 28px 0 0 !important;
    color: #3b3d42 !important;
    line-height: 39px !important;
    font-size: 15px !important;
}

.customtpv-ybs-checkout-page .select2-container .select2-selection--single .select2-selection__arrow {
    height: 39px !important;
    right: 12px !important;
}

.customtpv-ybs-checkout-page .select2-container--open .select2-selection--single {
    border-color: var(--ybs-blue-dark) !important;
}

/* Bloque adicional YBS. */
.customtpv-ybs-checkout-page .customtpv-ybs-extra-fields {
    margin-top: 10px;
}

.customtpv-ybs-checkout-page .customtpv-ybs-form-row {
    margin: 0 0 10px;
}

.customtpv-ybs-checkout-page .customtpv-ybs-form-row .form-row {
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.customtpv-ybs-checkout-page .customtpv-ybs-donor-data {
    margin-top: 20px;
}

.customtpv-ybs-checkout-page .customtpv-ybs-donor-data > .customtpv-ybs-section-title {
    margin-bottom: 10px !important;
}

.customtpv-ybs-checkout-page .customtpv-ybs-row-document {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(240px, 1fr);
    gap: 10px;
    align-items: center;
    max-width: 525px;
}

.customtpv-ybs-checkout-page .customtpv-ybs-row-help {
    margin-top: 16px;
}

.customtpv-ybs-checkout-page .customtpv-ybs-row-help::before {
    content: "¿Cómo quieres ayudar?*";
    display: block;
    margin: 0 0 8px;
    color: var(--ybs-blue);
    font-size: clamp(25px, 2.1vw, 30px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.customtpv-ybs-checkout-page .customtpv-ybs-monthly-note {
    margin: 8px 0 0;
    padding: 10px 16px;
    color: #3b3d42;
    background: var(--ybs-soft);
    border: 1px solid rgba(24, 54, 104, .16);
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.45;
}

.customtpv-ybs-checkout-page .customtpv-ybs-monthly-note[hidden] {
    display: none !important;
}

/*
 * Fila de la aportación.
 * Los radios siguen siendo los controles reales (misma lógica/AJAX), pero
 * visualmente se presentan como selectores compactos coherentes con el resto
 * de inputs y selects del formulario YBS.
 */
.customtpv-ybs-donation-box {
    margin: 16px 0 18px;
}

.customtpv-ybs-donation-box h3 {
    margin-bottom: 10px !important;
}

.customtpv-ybs-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
}

.customtpv-ybs-option {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0 !important;
    cursor: pointer;
    line-height: 1.35;
}

/* Ocultación visual accesible del radio: sigue recibiendo foco y enviándose. */
.customtpv-ybs-option input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}

.customtpv-ybs-option > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 92px;
    min-height: 45px;
    box-sizing: border-box;
    padding: 8px 20px;
    color: #3b3d42 !important;
    background: #fff !important;
    border: 3px solid var(--ybs-blue) !important;
    border-radius: var(--ybs-radius) !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    text-align: center;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.customtpv-ybs-option:last-child > span {
    min-width: 150px;
}

.customtpv-ybs-option:hover > span {
    background: #f7faff !important;
    border-color: var(--ybs-blue-dark) !important;
}

/* Estado seleccionado: azul muy suave, como selector visual activo. */
.customtpv-ybs-option input[type="radio"]:checked + span {
    background: #eaf2ff !important;
    border-color: var(--ybs-blue) !important;
    box-shadow: inset 0 0 0 1px rgba(24, 54, 104, .08) !important;
}

.customtpv-ybs-option input[type="radio"]:focus-visible + span {
    outline: 3px solid rgba(24, 54, 104, .24);
    outline-offset: 3px;
}

/* Los radios de las pasarelas sí conservan su aspecto nativo. */
.customtpv-ybs-checkout-page .wc_payment_methods input[type="radio"] {
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    accent-color: var(--ybs-blue);
}

.customtpv-ybs-custom-wrap {
    margin-top: 12px;
}

.customtpv-ybs-custom-wrap[hidden] {
    display: none !important;
}

.customtpv-ybs-custom-wrap > label {
    display: block;
    margin: 0 0 6px;
    color: var(--ybs-blue);
    font-weight: 500;
}

.customtpv-ybs-custom-input {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 320px;
    color: var(--ybs-blue);
    font-weight: 600;
}

/* La cantidad ya está visible en los radios/input; evitamos repetirla. */
.customtpv-ybs-selected {
    display: none !important;
}

/*
 * WooCommerce: el resumen de carrito es redundante en una donación de un único
 * producto y la aportación ya se muestra/actualiza arriba. Solo lo ocultamos.
 */
.customtpv-ybs-checkout-page #order_review_heading,
.customtpv-ybs-checkout-page .woocommerce-checkout-review-order-table {
    display: none !important;
}

.customtpv-ybs-checkout-page .customtpv-ybs-payment-title {
    margin-top: 20px !important;
}

/* Zona de pasarelas: mantiene radios, IDs, eventos y cajas nativas de WooCommerce. */
.customtpv-ybs-checkout-page #payment.woocommerce-checkout-payment {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.customtpv-ybs-checkout-page #payment ul.payment_methods,
.customtpv-ybs-checkout-page #payment ul.wc_payment_methods {
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    list-style: none !important;
}

.customtpv-ybs-checkout-page #payment ul.payment_methods > li {
    position: relative;
    margin: 0 0 10px !important;
    padding: 0 !important;
    background: #fff !important;
    border: 3px solid var(--ybs-blue) !important;
    border-radius: var(--ybs-radius) !important;
    overflow: hidden;
}

.customtpv-ybs-checkout-page #payment ul.payment_methods > li > input[type="radio"] {
    position: absolute;
    top: 15px;
    left: 18px;
    z-index: 2;
}

.customtpv-ybs-checkout-page #payment ul.payment_methods > li > label {
    display: flex !important;
    min-height: 45px;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 8px 18px 8px 42px !important;
    color: #3b3d42 !important;
    background: #fff !important;
    cursor: pointer;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.35;
}

.customtpv-ybs-checkout-page #payment ul.payment_methods > li > label img {
    width: auto !important;
    max-width: 110px !important;
    max-height: 28px !important;
    margin: 0 0 0 auto !important;
    object-fit: contain;
}

.customtpv-ybs-checkout-page #payment div.payment_box {
    width: auto !important;
    margin: 0 !important;
    padding: 0 18px 14px 42px !important;
    color: #555 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.customtpv-ybs-checkout-page #payment div.payment_box::before {
    display: none !important;
}

.customtpv-ybs-checkout-page #payment div.payment_box p:last-child {
    margin-bottom: 0 !important;
}

/* WooCommerce imprime un texto genérico de privacidad; YBS ya tiene aceptación propia. */
.customtpv-ybs-checkout-page #payment .woocommerce-privacy-policy-text {
    display: none !important;
}

/* Privacidad YBS justo antes del botón de pago. */
.customtpv-ybs-checkout-page #payment .form-row.place-order {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.customtpv-ybs-checkout-page .customtpv-ybs-row-privacy {
    margin: 10px 0 14px;
}

.customtpv-ybs-checkout-page .customtpv-ybs-privacy-field {
    margin: 0 !important;
    padding: 0 !important;
}

.customtpv-ybs-checkout-page .customtpv-ybs-privacy-field label {
    display: inline-flex !important;
    align-items: flex-start;
    gap: 8px;
    margin: 0 !important;
    color: #4b4d52 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4;
}

.customtpv-ybs-checkout-page .customtpv-ybs-privacy-field input[type="checkbox"] {
    flex: 0 0 auto;
    width: 14px !important;
    height: 14px !important;
    margin: 2px 0 0 !important;
    accent-color: var(--ybs-blue);
}

.customtpv-ybs-checkout-page .customtpv-ybs-privacy-field a {
    color: var(--ybs-blue) !important;
    text-decoration: underline;
}

/* Botón final: mismo lenguaje azul que el formulario. */
.customtpv-ybs-checkout-page #payment #place_order {
    float: none !important;
    width: auto !important;
    min-width: 250px;
    min-height: 46px;
    margin: 0 !important;
    padding: 10px 24px !important;
    color: #fff !important;
    background: var(--ybs-blue) !important;
    border: 0 !important;
    border-radius: 25px !important;
    box-shadow: none !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-transform: none !important;
    transition: background-color .15s ease, transform .15s ease;
}

.customtpv-ybs-checkout-page #payment #place_order:hover,
.customtpv-ybs-checkout-page #payment #place_order:focus {
    background: var(--ybs-blue-dark) !important;
    transform: translateY(-1px);
}

.customtpv-ybs-checkout-page #payment #place_order:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Avisos de validación más coherentes con el formulario. */
.customtpv-ybs-checkout-page .woocommerce-error,
.customtpv-ybs-checkout-page .woocommerce-message,
.customtpv-ybs-checkout-page .woocommerce-info {
    border-radius: 14px;
}

@media (max-width: 900px) {
    .customtpv-ybs-checkout-page .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customtpv-ybs-checkout-page .woocommerce-billing-fields__field-wrapper .ybs-span-4 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .customtpv-ybs-checkout-page .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .customtpv-ybs-checkout-page .woocommerce-billing-fields__field-wrapper .ybs-grid-field {
        grid-column: 1 / -1;
    }

    .customtpv-ybs-checkout-page .customtpv-ybs-row-document {
        grid-template-columns: 1fr;
        max-width: none;
        gap: 10px;
    }

    .customtpv-ybs-options {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .customtpv-ybs-option > span {
        min-height: 45px;
        padding: 8px 16px;
        border-width: 3px !important;
        font-size: 15px !important;
    }

    .customtpv-ybs-checkout-page #payment #place_order {
        width: 100% !important;
        min-width: 0;
    }
}

/*
 * YBS no utiliza cupones.
 * Además del formulario/toggle eliminamos márgenes, bordes y pseudo-elementos
 * que algunos temas dejan dibujados aun cuando el contenido está oculto.
 */
.customtpv-ybs-checkout-page .woocommerce-form-coupon-toggle,
.customtpv-ybs-checkout-page form.checkout_coupon,
.customtpv-ybs-checkout-page .woocommerce-form-coupon {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.customtpv-ybs-checkout-page .woocommerce-form-coupon-toggle::before,
.customtpv-ybs-checkout-page .woocommerce-form-coupon-toggle::after,
.customtpv-ybs-checkout-page form.checkout_coupon::before,
.customtpv-ybs-checkout-page form.checkout_coupon::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
}

/* Limpieza del separador residual que algunos temas añaden antes del checkout. */
.customtpv-ybs-checkout-page .woocommerce > hr,
.customtpv-ybs-checkout-page form.woocommerce-checkout > hr,
.customtpv-ybs-checkout-page form.checkout > hr {
    display: none !important;
}

.customtpv-ybs-checkout-page form.woocommerce-checkout,
.customtpv-ybs-checkout-page form.checkout,
.customtpv-ybs-checkout-page #customer_details,
.customtpv-ybs-checkout-page #customer_details .col-1,
.customtpv-ybs-checkout-page .woocommerce-billing-fields {
    border-top: 0 !important;
    box-shadow: none !important;
}