/* ==========================================================================
   Checkout estilo "Shopify" — 100% WooCommerce nativo (sin FunnelKit)
   Ruta: tu-child-theme/assets/css/wfacp-shopify-style.css
   ========================================================================== */

   :root {
    --wfacp-shop-border: #d1d1d1;
    --wfacp-shop-border-light: #e4e4e4;
    --wfacp-shop-radius: 8px;
    --wfacp-shop-text: #202020;
    --wfacp-shop-muted: #6b6b6b;
    --wfacp-shop-bg-panel: #fafafa;
    --wfacp-shop-focus: #202020;
    --wfacp-shop-error: #d82c0d;
    --wfacp-shop-success: #0a7d3e;
    --wfacp-shop-success-bg: #eaf7ef;
    --wfacp-shop-selected-bg: #eef4fb;
    --wfacp-shop-badge-bg: #616161;
    --wfacp-shop-accent-blue: #2F6FED;
    --wfacp-shop-accent-blue-bg: #EAF1FE;
}

.woocommerce-checkout,
.woocommerce-checkout input,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout button {
    font-family: 'Varela Round', sans-serif;
}

/* --------------------------------------------------------------------
   0. Layout de 2 columnas (form-checkout.php override)
-------------------------------------------------------------------- */
.woocommerce-checkout.wfacp-shopify-checkout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 56px;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 20px 80px;
}

.wfacp-shopify-col-left {
    grid-column: 1;
    min-width: 0;
}

.wfacp-shopify-col-right {
    grid-column: 2;
}

.wfacp-shopify-order-summary-sticky {
    position: sticky;
    top: 24px;
}

@media (max-width: 900px) {
    .woocommerce-checkout.wfacp-shopify-checkout {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 16px 48px;
    }

    .wfacp-shopify-col-right {
        grid-column: 1;
        order: -1;
        margin: 0 -16px 16px;
    }

    .wfacp-shopify-order-summary-sticky {
        position: static;
    }

    .wfacp_wrapper_start,
    .wfacp_order_summary_container {
        border-radius: 0 !important;
    }
}

/* --------------------------------------------------------------------
   1. Base
-------------------------------------------------------------------- */
.woocommerce-checkout {
    color: var(--wfacp-shop-text);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------
   2. Campos del formulario (billing/shipping fields nativos de WC)
-------------------------------------------------------------------- */
.woocommerce-checkout .form-row {
    margin-bottom: 14px;
    padding: 0;
}

.woocommerce-checkout .form-row label {
    display: block;
    font-size: 13px;
    color: var(--wfacp-shop-muted);
    margin-bottom: 6px;
    font-weight: 400;
}

.woocommerce-checkout .form-row label.checkbox,
.woocommerce-checkout .form-row label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    font-size: 11px;
    color: var(--wfacp-shop-text);
    cursor: pointer;
    margin-bottom: 0;
}

.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--wfacp-shop-border);
    border-radius: var(--wfacp-shop-radius);
    padding: 13px 14px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--wfacp-shop-text);
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.woocommerce-checkout ::placeholder {
    color: #9a9a9a;
}

.woocommerce-checkout input.input-text:hover,
.woocommerce-checkout textarea:hover {
    border-color: #a8a8a8;
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus {
    outline: none;
    border-color: var(--wfacp-shop-focus);
    box-shadow: 0 0 0 1px var(--wfacp-shop-focus);

}

/* select2 (país / departamento / etc., WooCommerce ya lo carga solo) */
.woocommerce-checkout .select2-container .select2-selection--single {
    height: 48px;
    border: 1px solid var(--wfacp-shop-border) !important;
    border-radius: var(--wfacp-shop-radius) !important;
    display: flex;
    align-items: center;
    margin: 0 0 3px;
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 14px;
    line-height: normal !important;
    font-size: 15px;
    color: var(--wfacp-shop-text);
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
    height: 46px;
    right: 10px;
}

.woocommerce-checkout .select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--open .select2-selection--single {
    border-color: var(--wfacp-shop-focus) !important;
    box-shadow: 0 0 0 1px var(--wfacp-shop-focus);
}

/* filas de dos columnas nativas de WooCommerce */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    width: calc(50% - 8px);
    float: left;
}

.woocommerce-checkout .form-row-last {
    float: right !important;
}

.woocommerce-checkout .form-row-wide {
    width: 100% !important;
    clear: both !important;
}

/* --------------------------------------------------------------------
   3. Validación (borde + texto rojo)
-------------------------------------------------------------------- */
.woocommerce-checkout .woocommerce-invalid input.input-text,
.woocommerce-checkout .woocommerce-invalid .select2-selection--single {
    border-color: var(--wfacp-shop-error) !important;
}

.woocommerce-checkout .woocommerce-error {
    color: var(--wfacp-shop-error);
    font-size: 12.5px;
    margin: 6px 0 14px;
    list-style: none;
    padding: 2px;
}

/* --------------------------------------------------------------------
   4. Checkboxes (GLOBAL — se usa en billing, newsletter, términos, etc.)
   Idéntico a tu primer archivo, sin tocar.
-------------------------------------------------------------------- */
.woocommerce-checkout input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--wfacp-shop-border);
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    flex: 0 0 18px;
}

.woocommerce-checkout input[type="checkbox"]:checked {
    background-color: var(--wfacp-shop-text);
    border-color: var(--wfacp-shop-text);
}

.woocommerce-checkout input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* --------------------------------------------------------------------
   5. Encabezados de sección
-------------------------------------------------------------------- */
.woocommerce-checkout h3,
.wfacp-shopify-section-title {
    font-size: 19px;
    font-weight: 600;
    margin: 28px 0 14px;
    color: var(--wfacp-shop-text);
}

.wfacp-shopify-payment-secure {
    font-size: 13px;
    color: var(--wfacp-shop-muted);
    margin: -6px 0 16px;
}

/* --------------------------------------------------------------------
   6. Métodos de PAGO (ul.wc_payment_methods)
   Todo aquí está prefijado con "ul.wc_payment_methods" a propósito,
   para que NUNCA se filtre a los checkboxes (sección 4) ni al radio
   oculto del bloque de métodos de ENVÍO (sección 17), que usa su
   propio <label> con fondo gris y display:none en el input real.
-------------------------------------------------------------------- */
.woocommerce-checkout ul.wc_payment_methods {
    padding: 0;
    margin: 0 0 16px;
    list-style: none;
}

.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
    border: 1px solid var(--wfacp-shop-border);
    border-radius: var(--wfacp-shop-radius);
    margin-bottom: 10px;
    list-style: none;
    overflow: hidden;
    position: relative;
    transition: border-color .15s ease, background-color .15s ease;
}

/* Fila clickeable: radio + título + iconos de tarjetas */
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    width: 70%;
    margin: 0 !important;
    padding: 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--wfacp-shop-text);
}

/* Radio personalizado estilo "Shopify" (anillo azul + punto).
   Escopado SOLO a ul.wc_payment_methods — nunca toca otros radios. */
.woocommerce-checkout ul.wc_payment_methods input.input-radio {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #c7c7c7 !important;
    border-radius: 50% !important;
    background: #fff !important;
    margin: 0 12px 0 0 !important;
    position: relative;
    flex: 0 0 20px;
    cursor: pointer;
    transition: border-color .15s ease;
    box-shadow: none !important;
    outline: none !important;
}

.woocommerce-checkout ul.wc_payment_methods input.input-radio:checked {
    border-color: var(--wfacp-shop-accent-blue) !important;
}

.woocommerce-checkout ul.wc_payment_methods input.input-radio:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--wfacp-shop-accent-blue);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Empuja los íconos (Visa/Mastercard/etc, que Woo imprime después del texto) a la derecha */
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > label img {
    max-height: 22px;
    width: auto;
    vertical-align: middle;
}

.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > label img:first-of-type {
    margin-left: auto;
}

.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > label img + img {
    margin-left: 6px;
}

/* Estado seleccionado (borde + fondo azul claro, como en la referencia) */
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
    border-color: var(--wfacp-shop-accent-blue);
    background-color: var(--wfacp-shop-accent-blue-bg);
}

/* --------------------------------------------------------------------
   6b. Anular el "globo" nativo de WooCommerce (triángulo + doble caja)
       para que el payment_box quede fusionado con el label, como una
       sola tarjeta. Escopado también SOLO a ul.wc_payment_methods.
-------------------------------------------------------------------- */
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method .payment_box::before,
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method .payment_box::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method .payment_box {
    position: static !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    background: var(--wfacp-shop-bg-panel) !important;
    padding: 16px !important;
    font-size: 13px;
    font-family: 'Varela Round', sans-serif !important;
    border-top: 1px solid var(--wfacp-shop-border-light) !important;
}

/* Algunos gateways (transferencia bancaria, cuenta, etc.) devuelven el número
   de cuenta dentro de <code>/<pre>; forzamos que respeten la tipografía */
.woocommerce-checkout ul.wc_payment_methods .payment_box code,
.woocommerce-checkout ul.wc_payment_methods .payment_box pre {
    font-family: 'Varela Round', sans-serif !important;
    white-space: pre-wrap;
    word-break: break-word;
    background: transparent;
    padding: 0;
}

.woocommerce-checkout #payment .form-row.place-order {
    margin-top: 20px;
}

.woocommerce-checkout #place_order {
    width: 100%;
    padding: 15px 20px;
    border-radius: var(--wfacp-shop-radius);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

/* --------------------------------------------------------------------
   6c. Checkbox de Términos y condiciones (place-order)
-------------------------------------------------------------------- */
.woocommerce-checkout #payment .form-row.validate-required {
    margin: 18px 0 4px;
}

.woocommerce-checkout #payment .form-row.validate-required label.checkbox {
    align-items: flex-start;
    line-height: 1.45;
    font-size: 12.5px;
    color: var(--wfacp-shop-muted);
}

.woocommerce-checkout #payment .form-row.validate-required label.checkbox input[type="checkbox"] {
    margin-top: 2px;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a {
    color: var(--wfacp-shop-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --------------------------------------------------------------------
   6d. Botón "Realizar el pedido" — forzar full width y centrado
   (el botón queda como hijo directo de #payment en tu HTML, fuera
   del .form-row.place-order, por eso necesita reglas propias)
-------------------------------------------------------------------- */
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout #payment button#place_order {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 20px 0 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

#payment.woocommerce-checkout-payment {
    display: block !important;
    width: 100% !important;
}



/* --------------------------------------------------------------------
   8. RESUMEN DE PEDIDO (panel gris)
-------------------------------------------------------------------- */
.wfacp_order_summary_container {
    background: var(--wfacp-shop-bg-panel);
    border-radius: var(--wfacp-shop-radius);
    padding: 4px;
}



.wfacp-order-summary-label {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

table.wfacp_mini_cart_items {
    width: 100%;
    border-collapse: collapse;
}

table.wfacp_mini_cart_items tr.cart_item td {
    border: none;
    padding: 12px 0;
    vertical-align: top;
}

table.wfacp_mini_cart_items td.product-name-area {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}

.wfacp-pro-thumb {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: visible;
    border: 1px solid var(--wfacp-shop-border-light);
}

.wfacp-pro-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.wfacp-qty-ball {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 2;
}

.wfacp-qty-count {
    background: var(--wfacp-shop-badge-bg);
    color: #fff;
    border: 2px solid var(--wfacp-shop-bg-panel);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.product-name {
    flex: 1 1 auto;
}

.wfacp_cart_title_sec {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wfacp_mini_cart_item_title {
    font-size: 13.5px;
    color: var(--wfacp-shop-text);
    line-height: 1.4;
}

.wc-item-meta,
dl.variation {
    font-size: 12.5px;
    color: var(--wfacp-shop-muted) !important;
    margin: 2px 0 0 !important;
}

td.product-total {
    text-align: right;
    white-space: nowrap;
    font-size: 13.5px;
    min-width: 110px;
}

.wfacp_item_regular_price {
    display: block;
    color: var(--wfacp-shop-muted);
    text-decoration: line-through;
    font-size: 12.5px;
}

.wfacp_item_savings_tag {
    display: inline-block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--wfacp-shop-success);
    background: var(--wfacp-shop-success-bg);
    border-radius: 4px;
    padding: 2px 6px;
}

/* --------------------------------------------------------------------
   9. Totales (subtotal / envío / total / ahorro)
-------------------------------------------------------------------- */
table.wfacp_mini_cart_reviews {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    border-top: 1px solid var(--wfacp-shop-border-light);
    padding-top: 12px;
}

table.wfacp_mini_cart_reviews tr th,
table.wfacp_mini_cart_reviews tr td {
    border: none;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--wfacp-shop-text);
}

table.wfacp_mini_cart_reviews tr th {
    text-align: left;
}

table.wfacp_mini_cart_reviews tr td {
    text-align: right;
}

table.wfacp_mini_cart_reviews tr.cart-subtotal th span,
table.wfacp_mini_cart_reviews tr.cart-subtotal td {
    color: var(--wfacp-shop-muted);
}

table.wfacp_mini_cart_reviews tr.order-total {
    border-top: 1px solid var(--wfacp-shop-border-light);
}

table.wfacp_mini_cart_reviews tr.order-total th,
table.wfacp_mini_cart_reviews tr.order-total td {
    font-size: 18px;
    font-weight: 700;
    padding-top: 14px;
}

table.wfacp_mini_cart_reviews tr.order-total td .woocommerce-Price-currencySymbol {
    font-size: 16px;
    font-weight: 700;
    color: #202020;
    margin-right: 1px;
}

.wfacp_total_savings_row {
    text-align: right;
    margin-top: 8px;
}

.wfacp_savings_badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--wfacp-shop-success);
}

.wfacp_savings_badge svg {
    width: 13px;
    height: 13px;
    fill: var(--wfacp-shop-success);
}


/* --------------------------------------------------------------------
   10. Resumen colapsable (mobile) — <details>/<summary> nativo
-------------------------------------------------------------------- */
.wfacp-order-summary-details {
    border-bottom: 1px solid var(--wfacp-shop-border-light);
    background-color: #F5F5F5;
    padding: 10px 13px 10px;
}

.wfacp-order-summary-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
    padding: 0px 0;
    font-size: 15px;
    font-weight: 500;
}

.wfacp-order-summary-label::-webkit-details-marker {
    display: none;
}

.wfacp-summary-label-text {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding-top: 10px;
}

.wfacp-summary-label-text::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--wfacp-shop-text);
    border-bottom: 1.5px solid var(--wfacp-shop-text);
    transform: rotate(45deg);
    transition: transform .15s ease;
    margin-top: -3px;
}

.wfacp-order-summary-details[open] .wfacp-summary-label-text::after {
    transform: rotate(-135deg);
    margin-top: 3px;
}

.wfacp-summary-label-total {
    font-weight: 600;
}

.wfacp_order_summary_container {
    padding-top: 0;
}

/* En escritorio: siempre expandido, sin toggle visible */
@media (min-width: 901px) {
    .wfacp-order-summary-details:not([open]) .wfacp_order_summary_container {
        display: block !important;
    }

    .wfacp-order-summary-details {
        border-bottom: none;
    }

    .wfacp-order-summary-label {
        cursor: default;
        pointer-events: none;
    }

    .wfacp-summary-label-text::after {
        display: none;
    }
}


/* --------------------------------------------------------------------
   11. Anular el estilo core "table.shop_table" de WooCommerce dentro
       de nuestro panel (border, border-radius, margin propios de WC
       que rompen el diseño limpio del resumen).
-------------------------------------------------------------------- */
.wfacp_order_summary_container table.shop_table {
    border: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.wfacp_order_summary_container table.wfacp_mini_cart_items {
    margin-bottom: 4px !important;
}

/* Asegura el padding correcto de filas en la tabla de totales
   (por si el core también mete su propio padding en th/td) */
.wfacp_order_summary_container table.wfacp_mini_cart_reviews th,
.wfacp_order_summary_container table.wfacp_mini_cart_reviews td {
    padding: 8px 0 !important;
}


/* --------------------------------------------------------------------
   12. Anular por completo padding/border nativos de WooCommerce
       (wc-form-border-width / wc-form-border-color) en los inputs
-------------------------------------------------------------------- */
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
    border: var(--wc-form-border-width) solid rgb(193 193 193 / 80%) !important;
    border-radius: 8px !important;

}


/* --------------------------------------------------------------------
   13. Floating labels — el texto vive DENTRO del input (estilo Shopify)
-------------------------------------------------------------------- */
.woocommerce-checkout .form-row {
    position: relative;
}

.woocommerce-checkout .form-row label:not(.checkbox) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 30px);
    position: absolute;
    left: 15px;
    top: 14px;
    margin: 0;
    font-size: 15px;
    color: #9a9a9a;
    pointer-events: none;
    transition: transform .15s ease, font-size .15s ease, top .15s ease, color .15s ease;
    z-index: 2;
    background: transparent;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea {
    padding-top: 22px;
    padding-bottom: 6px;
}

/* Flota cuando: tiene foco, o JS detectó contenido (clase wfacp-filled) */
.woocommerce-checkout .form-row:has(input:focus) label,
.woocommerce-checkout .form-row:has(textarea:focus) label,
.woocommerce-checkout .form-row.wfacp-filled label {
    top: 6px;
    font-size: 11px;
    color: var(--wfacp-shop-muted);
}




/* Selects (País, Departamento): select2 siempre muestra un valor,
   así que el label queda flotando arriba de forma permanente */
.woocommerce-checkout .form-row:has(select) label,
.woocommerce-checkout .form-row:has(.select2-container) label {
    top: 6px;
    font-size: 11px;
    color: var(--wfacp-shop-muted);
}

/* Checkboxes: sin cambios, comportamiento normal */
.woocommerce-checkout .form-row label.checkbox {
    position: static;
    font-size: 13.5px;
    color: var(--wfacp-shop-text);
    pointer-events: auto;
}


/* --------------------------------------------------------------------
   14. Validación — el label NO se pone rojo/grueso, solo el borde
       y el asterisco de "requerido". Sobrescribe el estilo por
       defecto de WooCommerce para .woocommerce-invalid label.
-------------------------------------------------------------------- */
.woocommerce-checkout .woocommerce-invalid label,
.woocommerce-checkout .form-row.woocommerce-invalid label {
    color: #9a9a9a !important;
    font-weight: 400 !important;
    font-size: 15px !important;
}

/* Excepción: los labels de checkbox NUNCA deben heredar el tamaño
   de validación de 15px — deben mantenerse siempre en 13.5px,
   estén marcados, sin marcar, válidos o inválidos. */
.woocommerce-checkout .woocommerce-invalid label.checkbox,
.woocommerce-checkout .form-row.woocommerce-invalid label.checkbox,
.woocommerce-checkout .woocommerce-invalid label:has(input[type="checkbox"]),
.woocommerce-checkout .form-row.woocommerce-invalid label:has(input[type="checkbox"]) {
    font-size: 11px !important;
    color: var(--wfacp-shop-text) !important;
    font-weight: 400 !important;
}

/* Cuando el label ya está flotando arriba (campo con foco o con
   contenido), debe mantener el tamaño/color pequeño de siempre,
   incluso si la fila está marcada como inválida */
.woocommerce-checkout .form-row.woocommerce-invalid:has(input:focus) label,
.woocommerce-checkout .form-row.woocommerce-invalid.wfacp-filled label,
.woocommerce-checkout .form-row.woocommerce-invalid:has(select) label,
.woocommerce-checkout .form-row.woocommerce-invalid:has(.select2-container) label {
    top: 6px !important;
    font-size: 11px !important;
    color: var(--wfacp-shop-muted) !important;
}

/* Solo el asterisco de "campo requerido" se ve rojo */
.woocommerce-checkout .form-row label .required,
.woocommerce-checkout .form-row label abbr.required {
    color: var(--wfacp-shop-error) !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    border: none !important;
}

/* El borde rojo del input/select2 ya lo tenías, lo reafirmo aquí
   por si el estilo core de WooCommerce lo está ganando */
.woocommerce-checkout .woocommerce-invalid input.input-text,
.woocommerce-checkout .woocommerce-invalid textarea,
.woocommerce-checkout .woocommerce-invalid .select2-selection--single {
    border-color: var(--wfacp-shop-error) !important;
    box-shadow: none !important;
    border-width: 2px !important;

}

/* --------------------------------------------------------------------
   15. Quitar el asterisco rojo de "campo requerido"
-------------------------------------------------------------------- */
.woocommerce-checkout .form-row label .required,
.woocommerce-checkout .form-row label abbr.required {
    display: none !important;
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
    padding-top: 20px !important;
}


/* Encabezado "Contacto" + link de login */
.wfacp-shopify-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.wfacp-shopify-section-header .wfacp-shopify-section-title {
    margin: 0;
}

.wfacp-shopify-login-link {
    font-size: 14px;
    color: var(--wfacp-shop-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Checkbox de newsletter */
.wfacp-newsletter-optin {
    margin: 12px 0 0 !important;
}

.wfacp-newsletter-optin label.checkbox {
    font-size: 13.5px;
    color: var(--wfacp-shop-text);
}

/* Título "Entrega" */
.wfacp-shopify-delivery-title {
    margin-top: 32px !important;
    margin-bottom: 14px !important;
}

/* --------------------------------------------------------------------
   16. Filas flexibles robustas (2 y 3 columnas)
   NOTA: requiere envolver los campos en <div class="wfacp-row-2col">
   o <div class="wfacp-row-3col"> en content-billing.php
-------------------------------------------------------------------- */
@media (min-width: 1025px) {

    .wfacp-row-2col,
    .wfacp-row-3col {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 14px;
    }

}

.wfacp-row-2col .form-row,
.wfacp-row-3col .form-row {
    flex: 1 1 0;
    /* clave: reparte el espacio disponible en partes EXACTAMENTE iguales */
    min-width: 0;
    /* evita que el ancho intrínseco del input rompa la fila */
    margin: 0 !important;
    box-sizing: border-box;
}

.wfacp-row-2col .form-row input.input-text,
.wfacp-row-2col .form-row select,
.wfacp-row-3col .form-row input.input-text,
.wfacp-row-3col .form-row select {
    box-sizing: border-box;
    width: 100%;
}

@media (max-width: 600px) {

    .wfacp-row-2col,
    .wfacp-row-3col {
        flex-direction: column;
        gap: opx;
        margin-bottom: 0px;
    }

    .wfacp-row-2col .form-row,
    .wfacp-row-3col .form-row {
        flex: 1 1 100%;
    }
}

/* Quitar el fondo gris del resumen (imagen 2 lo muestra plano) */
.wfacp_order_summary_container {
    background: transparent;
    padding: 0;
}

/* Código de moneda antes del total */
.wfacp-currency-code {
    font-size: 11px;
    font-weight: 500;
    color: var(--wfacp-shop-muted);
    margin-right: 2px;
}

/* Envío gratis: precio tachado + etiqueta verde */
.wfacp-free-label {
    color: var(--wfacp-shop-success);
    font-weight: 600;
    margin-right: 24px;
}

.wfacp-free-shipping-tag {
    display: inline-block;
    font-size: 11px;
    color: var(--wfacp-shop-success);
    background: var(--wfacp-shop-success-bg);
    border-radius: 4px;
    padding: 2px 8px;
    margin-top: 4px;
}

.wfacp-free-shipping-tag-row td {
    text-align: right;
    padding-top: 0 !important;
}


/* Oculta el aviso nativo de WooCommerce en su ubicación real: hijo directo
   del wrapper del bloque de Gutenberg del checkout */
.wp-block-group.alignwide>.woocommerce-message,
.wp-block-group.alignwide>.woocommerce-error {
    display: none !important;
}

/* Una vez que el JS lo mueva a nuestro contenedor, debe mostrarse */
.wfacp_coupon_msg .woocommerce-message,
.wfacp_coupon_msg .woocommerce-error {
    display: block !important;
}


.wfacp_coupon_msg {
    margin-top: 8px;
}

.wfacp-coupon-notice {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
}

.wfacp-coupon-notice svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

.wfacp-coupon-notice.is-error {
    color: var(--wfacp-shop-error);
}

.wfacp-coupon-notice.is-success {
    color: var(--wfacp-shop-success);
}


/* --------------------------------------------------------------------
   17. Bloque "Métodos de envío" (antes de Pago)
   INTACTO respecto a tu primer archivo — usa su propio <label> con
   fondo gris y oculta el radio real con display:none, por eso NUNCA
   comparte selector con la sección 6 (pago).
-------------------------------------------------------------------- */
.wfacp-shopify-shipping-block {
    margin: 0 0 8px;
}

.wfacp-shopify-shipping-block ul.woocommerce-shipping-methods {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wfacp-shopify-shipping-block ul.woocommerce-shipping-methods li {
    list-style: none;
    border: 1px solid var(--wfacp-shop-border);
    border-radius: var(--wfacp-shop-radius);
    padding: 14px 16px;
    margin: 0 0 10px;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease;
}

.wfacp-shopify-shipping-block ul.woocommerce-shipping-methods li:has(input:checked) {
    border-color: var(--wfacp-shop-focus);
    background-color: var(--wfacp-shop-selected-bg);
}

.wfacp-shopify-shipping-block ul.woocommerce-shipping-methods li input[type="radio"],
.wfacp-shopify-shipping-block ul.woocommerce-shipping-methods li input[type="hidden"] {
    display: none;
}

.wfacp-shopify-shipping-block ul.woocommerce-shipping-methods li label {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 15px;
    width: 100%;
    margin: 0;
    padding: 8px 0px 8px 0px;
    border-radius: 10px;
    background: #F5F5F5;
    cursor: pointer;
    font-size: inherit;
    color: inherit;
}

@media (min-width: 1024px) {
    .wfacp-shopify-shipping-block ul.woocommerce-shipping-methods li label {
        
        gap: 300px !important;
       
    }

    
}

.wfacp-ship-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.wfacp-ship-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--wfacp-shop-text);
    margin: 0 10px;
}

.wfacp-ship-desc {
    font-size: 12.5px;
    color: var(--wfacp-shop-muted);
    margin: 0 10px;
}

.wfacp-ship-price {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.wfacp-ship-price del {
    color: var(--wfacp-shop-muted);
    font-size: 12.5px;
    text-decoration: line-through;
}


/* --------------------------------------------------------------------
   18. Enlaces legales debajo del botón "Pagar"
-------------------------------------------------------------------- */
.wfacp-legal-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.wfacp-legal-links a {
    font-size: 12.5px;
    color: var(--wfacp-shop-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.wfacp-legal-links a:hover {
    color: var(--wfacp-shop-text);
}

/* El del medio queda centrado gracias a space-between + flex-grow en los extremos */
.wfacp-legal-links a:first-child {
    text-align: left;
}

.wfacp-legal-links a:last-child {
    text-align: right;
}

@media (max-width: 480px) {
    .wfacp-legal-links {
        justify-content: center;
        gap: 30px;
    }
}

/* --------------------------------------------------------------------
   19. Logo centrado arriba en mobile (antes del resumen del pedido)
-------------------------------------------------------------------- */
.wfacp-shopify-mobile-logo {
    display: none;
}

@media (max-width: 900px) {
    .wfacp-shopify-mobile-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 16px;
    }

    .wfacp-shopify-mobile-logo img {
        height: 42px;
        width: auto;
        max-width: 160px;
    }
}


#add_payment_method #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {

    margin: 10px;
    padding: 0 !important;
}

.woocommerce-NoticeGroup-checkout {
    display: none !important;
}


/* --------------------------------------------------------------------
   20. Mensajes "Campo requerido" — mismo ícono que el aviso de cupón
-------------------------------------------------------------------- */
.woocommerce-error li:has(.wfacp-required-msg) {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    color: var(--wfacp-shop-error) !important;
    font-weight: 500;
    font-size: 12.5px;
    margin-bottom: 6px;
}

.woocommerce-error li:has(.wfacp-required-msg)::before {
    content: "";
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    background-color: var(--wfacp-shop-error);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cline x1='10' y1='6' x2='10' y2='11' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14' r='1' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cline x1='10' y1='6' x2='10' y2='11' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14' r='1' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
}

.woocommerce-error li:has(.wfacp-required-msg) a {
    color: inherit;
    text-decoration: none;
}

/* --------------------------------------------------------------------
   21. Formulario de cupón custom (wfacp_woocommerce_form_coupon)
-------------------------------------------------------------------- */
.wfacp_coupon_row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    align-items: stretch;
    margin: 8px 0 4px;
    width: 100%;
}

.wfacp_coupon_row .form-row {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
    box-sizing: border-box;
}

/* Aquí controlas la proporción, NO en el input */
.wfacp_coupon_row .form-row-first {
    flex: 1 1 auto !important;   /* toma todo el espacio sobrante */
    min-width: 0 !important;
    width: auto !important;       /* nunca fijo aquí */
}

.wfacp_coupon_row .form-row-last {
    flex: 0 0 auto !important;   /* el botón solo ocupa lo que su texto necesita */
    width: auto !important;
}

/* El input SIEMPRE al 100% de SU contenedor (.form-row-first), nunca fijo */
.wfacp_coupon_row input#coupon_code.input-text {
    width: 100% !important;
    padding: 0 14px !important;
    height: 46px;
    font-size: 14px;
    border: 1px solid var(--wfacp-shop-border);
    border-radius: var(--wfacp-shop-radius);
    box-sizing: border-box;
}

.wfacp_coupon_row button.wfacp-coupon-btn {
    height: 46px;
    padding: 0 20px;
    white-space: nowrap;
    border: 1px solid var(--wfacp-shop-text);
    background: #fff;
    color: var(--wfacp-shop-text);
    border-radius: var(--wfacp-shop-radius);
    font-family: 'Varela Round', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.wfacp_coupon_row button.wfacp-coupon-btn:hover {
    background: var(--wfacp-shop-text);
    color: #fff;
}

.wfacp_coupon_row .clear {
    display: none; /* ya no es necesario con flex */
}

@media (max-width: 480px) {
    .wfacp_coupon_row {
        flex-direction: row !important; /* fuerza fila también en mobile */
        gap: 8px;
        margin-left: 14px;
    }

    .wfacp_coupon_row .form-row-first {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .wfacp_coupon_row .form-row-last {
        flex: 0 0 auto !important;
        width: auto !important; /* ya no 100% */
    }

    .wfacp_coupon_row input#coupon_code.input-text {
        font-size: 13px;
        padding: 0 10px !important;
    }

    .wfacp_coupon_row button.wfacp-coupon-btn {
        width: auto !important; /* ya no 100% */
        padding: 0 14px;
        font-size: 13px;
    }
}