/**
 * CSS residual del checkout: solo lo que de verdad pelea con CSS ajeno al
 * tema (WooCommerce core sin capa, Select2 con estilo inline por JS, o el
 * widget nativo de Bricks para editar direcciones). Todo lo demás -formulario
 * compartido, toggles, pagos, métodos de envío, resumen del pedido sin
 * necesidad de forzar- se migró a elements-base.css dentro de @layer
 * components (Komandesk #227). Cada regla que sigue aquí explica en un
 * comentario de una línea contra qué compite.
 *
 * @package Flowtitude
 * @subpackage WooCommerce
 * @since 1.2.0
 */

@layer components {

/* Select2 fija un "width" inline por JS en el contenedor: sin !important
 * cualquier CSS pierde contra ese estilo inline, capa o no. */
.ft-checkout-form .select2-container,
.woocommerce-address-form.ft-checkout-form .select2-container {
    width: 100% !important;
}

/* ============================================
   PAGOS — compite con el CSS que cargan los propios gateways
   (Stripe y similares lo cargan sin capa, a veces con reglas inline)
   ============================================ */

/* Enlaces dentro del payment_box (p.ej. "usar otra tarjeta") — el gateway
 * les pone su propio color de enlace fuera de capa. */
.ft-checkout-payment-form #payment ul.payment_methods li .payment_box a,
.ft-checkout-payment-form #payment ul.payment_methods li .payment_box a:link,
.ft-checkout-payment-form #payment ul.payment_methods li .payment_box a:visited {
    color: var(--color-primary-500) !important;
    text-decoration: none !important;
}

.ft-checkout-payment-form #payment ul.payment_methods li .payment_box a:hover,
.ft-checkout-payment-form #payment ul.payment_methods li .payment_box a:focus {
    color: var(--color-primary-600) !important;
    text-decoration: none !important;
}

/* Espacio tras el campo de email del gateway antes del bloque "usar
 * información guardada" — el HTML de ese bloque lo genera el gateway con su
 * propio margin inline. */
.ft-checkout-payment-form #payment ul.payment_methods li .payment_box > p:has(input[type="email"]),
.ft-checkout-payment-form #payment ul.payment_methods li .payment_box > p:first-of-type {
    margin-bottom: var(--spacing-content-xl) !important;
}

.ft-checkout-payment-form #payment ul.payment_methods li .payment_box > p:has(input[type="email"]) + *,
.ft-checkout-payment-form #payment ul.payment_methods li .payment_box > p:first-of-type + * {
    margin-top: var(--spacing-content-xl) !important;
    padding-top: var(--spacing-content-lg) !important;
}

.ft-checkout-payment-form #payment ul.payment_methods li .payment_box > div,
.ft-checkout-payment-form #payment ul.payment_methods li .payment_box > section {
    padding: var(--spacing-content-lg) 0 !important;
}

.ft-checkout-payment-form #payment ul.payment_methods li .payment_box > div > *,
.ft-checkout-payment-form #payment ul.payment_methods li .payment_box > section > * {
    margin-bottom: var(--spacing-content-md) !important;
}

.ft-checkout-payment-form #payment ul.payment_methods li .payment_box > div > *:last-child,
.ft-checkout-payment-form #payment ul.payment_methods li .payment_box > section > *:last-child {
    margin-bottom: 0 !important;
}

/* Checkbox de "guardar método de pago" — el gateway lo pinta con su propio
 * margin inline/JS al montar el formulario. */
.ft-checkout-payment-form #payment ul.payment_methods li .payment_box input[type="checkbox"] {
    margin: 0 !important;
    margin-top: 0.125rem !important;
    flex-shrink: 0;
}

.ft-checkout-payment-form #payment ul.payment_methods li .payment_box > p:has(label input[type="checkbox"]) {
    margin-top: var(--spacing-content-md) !important;
    margin-bottom: 0 !important;
}

/* Tamaño del label de cada método de pago — woocommerce.css (sin capa) trae
 * su propio font-size para "ul.payment_methods li label". */
.ft-checkout-payment-form #payment ul.payment_methods li label {
    font-size: var(--text-base) !important;
}

p.woocommerce-SavedPaymentMethods-saveNew label {
    padding-left: 0.5rem !important;
    padding-top: 0 !important;
    font-size: var(--text-sm) !important;
}

/* ============================================
   RESUMEN DEL PEDIDO (ft-checkout-order-detail)
   Compite con woocommerce.css (tabla de revisión del pedido, sin capa)
   ============================================ */

/* Ocultar el toggle nativo del cupón — WooCommerce lo pinta visible por
 * defecto desde su propio CSS. */
.woocommerce-form-coupon-toggle,
.woocommerce-form-coupon-toggle .woocommerce-info,
.checkout_coupon,
.showcoupon,
a.showcoupon,
.woocommerce-checkout .woocommerce-info a.showcoupon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Ocultar productos y cabecera de la tabla nativa: el elemento ya renderiza
 * el listado de productos aparte (order-items-loop), aquí solo va el total. */
.ft-checkout-order-detail .woocommerce-checkout-review-order-table tbody,
.ft-checkout-order-detail .woocommerce-checkout-review-order-table .cart_item,
.ft-checkout-order-detail .woocommerce-checkout-review-order-table tr.cart_item {
    display: none !important;
}

.ft-checkout-order-detail .woocommerce-checkout-review-order-table thead,
.ft-checkout-order-detail .woocommerce-checkout-review-order-table thead tr,
.ft-checkout-order-detail .woocommerce-checkout-review-order-table thead th {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

.ft-checkout-order-detail .woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Filas del tfoot en fila (subtotal, envío, total) — la tabla nativa las
 * pinta como tr/td normales; forzamos flex por encima de esa tabla. */
.ft-checkout-order-detail .woocommerce-checkout-review-order-table tfoot tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: var(--spacing-content-md) 0 !important;
    border-bottom: 1px solid var(--color-neutral-200) !important;
}

.ft-checkout-order-detail .woocommerce-checkout-review-order-table tfoot tr:last-child {
    border-bottom: none !important;
}

.ft-checkout-order-detail .woocommerce-checkout-review-order-table .cart-subtotal,
.ft-checkout-order-detail .woocommerce-checkout-review-order-table .shipping {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: var(--spacing-content-md) 0 !important;
    border-bottom: 1px solid var(--color-neutral-200) !important;
    font-size: var(--text-base) !important;
}

.ft-checkout-order-detail .woocommerce-checkout-review-order-table .cart-subtotal td:last-child,
.ft-checkout-order-detail .woocommerce-checkout-review-order-table .shipping td:last-child {
    text-align: right !important;
    font-weight: 700 !important;
    font-size: var(--text-base) !important;
}

.ft-checkout-order-detail .woocommerce-checkout-review-order-table .order-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: var(--spacing-content-lg) 0 0 0 !important;
    border-top: 2px solid var(--color-neutral-300) !important;
    border-bottom: none !important;
    margin-top: 0 !important;
    font-size: var(--text-lg) !important;
}

.ft-checkout-order-detail .woocommerce-checkout-review-order-table tfoot tr.shipping + tr.order-total {
    border-top: 2px solid var(--color-neutral-300) !important;
    margin-top: 0 !important;
}

.ft-checkout-order-detail .woocommerce-checkout-review-order-table tfoot tr.shipping:has(+ tr.order-total) {
    border-bottom: none !important;
}

.ft-checkout-order-detail .woocommerce-checkout-review-order-table tfoot tr.shipping:last-of-type:not(:last-child) {
    border-bottom: none !important;
}

.ft-checkout-order-detail .woocommerce-checkout-review-order-table .order-total td:first-child,
.ft-checkout-order-detail .woocommerce-checkout-review-order-table .order-total td:last-child {
    font-weight: 700 !important;
    font-size: var(--text-lg) !important;
}

.ft-checkout-order-detail .woocommerce-checkout-review-order-table .order-total td:last-child {
    text-align: right !important;
}

.ft-checkout-order-detail .woocommerce-checkout-review-order-table .order-total td:last-child .flowtitude-checkout-order-total__value {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    width: 100% !important;
}

.ft-checkout-order-detail .woocommerce-checkout-review-order-table .order-total td:last-child .flowtitude-checkout-order-total__price {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.ft-checkout-order-detail .woocommerce-checkout-review-order-table .order-total td:last-child .flowtitude-checkout-order-total__tax {
    width: 100% !important;
    text-align: right !important;
    margin-top: 0.25rem !important;
    font-size: 0.875rem !important;
    color: var(--color-neutral-900) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    font-weight: 400 !important;
}

.ft-checkout-order-detail .woocommerce-checkout-review-order-table .order-total td:last-child .woocommerce-Price-amount > small,
.ft-checkout-order-detail .woocommerce-checkout-review-order-table .order-total td:last-child .woocommerce-Price-wrapper > small,
.ft-checkout-order-detail .woocommerce-checkout-review-order-table .order-total td:last-child small {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    margin-top: 0.25rem !important;
    font-size: 0.875rem !important;
}

/* Respaldo del PHP que ya elimina filas de envío duplicadas: si alguna se
 * escapa sin precio, se oculta aquí. */
.ft-checkout-order-detail .woocommerce-checkout-review-order-table tfoot tr.shipping:not(:has(.woocommerce-Price-amount)):not(:has(.woocommerce-Price-wrapper)) {
    display: none !important;
}

.ft-checkout-order-detail .woocommerce-checkout-review-order-table tfoot tr.shipping:has(.woocommerce-Price-amount),
.ft-checkout-order-detail .woocommerce-checkout-review-order-table tfoot tr.shipping:has(.woocommerce-Price-wrapper) {
    display: table-row !important;
}

/* ============================================
   CANTIDADES DE PRODUCTOS EN CHECKOUT
   Los selectores enganchan a utilidades de Tailwind que WindPress genera en
   @layer utilities, posterior a "components": sin !important esas
   utilidades ganarían y el badge dejaría de centrarse.
   ============================================ */

.brxe-div.bg-secondary-500.rounded-full[class*="w-5"][class*="h-5"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.brxe-div.bg-secondary-500.rounded-full div[data-script-id],
.brxe-div.bg-secondary-500.rounded-full .brxe-code,
.brxe-div.bg-secondary-500.rounded-full > div {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
}

.ft-checkout-order-detail .product-quantity,
.ft-checkout-order-detail .quantity,
.ft-checkout-order-detail td.product-quantity,
.ft-checkout-order-detail td.quantity {
    text-align: center !important;
    vertical-align: middle !important;
}

/* ============================================
   MI CUENTA — EDITAR DIRECCIÓN
   Widget nativo de Bricks (WooCommerce Account Form: Edit Address, clase
   auto "brxe-woocommerce-account-form-edit-address") con clase de plantilla
   "bt-account-addresses--edit"; su CSS por defecto no es nuestro, hace falta
   ganarle con !important igual que al resto de CSS ajeno al tema.
   ============================================ */

.bt-account-addresses--edit.brxe-woocommerce-account-form-edit-address input,
.bt-account-addresses--edit.brxe-woocommerce-account-form-edit-address .woocommerce-Input,
.bt-account-addresses--edit.brxe-woocommerce-account-form-edit-address textarea {
    background-color: var(--checkout-field-bg, var(--color-white)) !important;
    border: var(--checkout-field-border, 1px solid var(--color-neutral-300)) !important;
    border-radius: var(--checkout-field-border-radius, var(--radius-md)) !important;
    color: var(--checkout-field-text, var(--color-neutral-900)) !important;
    padding: var(--checkout-field-padding, var(--spacing-content-xs)) !important;
    line-height: 1.5 !important;
    min-height: calc(1.5em + (var(--checkout-field-padding, var(--spacing-content-xs)) * 2)) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.bt-account-addresses--edit.brxe-woocommerce-account-form-edit-address .select2-selection.select2-selection--single {
    background-color: var(--checkout-field-bg, var(--color-white)) !important;
    border: var(--checkout-field-border, 1px solid var(--color-neutral-300)) !important;
    border-radius: var(--checkout-field-border-radius, var(--radius-md)) !important;
    color: var(--checkout-field-text, var(--color-neutral-900)) !important;
    padding: var(--checkout-field-padding, var(--spacing-content-xs)) !important;
    padding-right: calc(var(--checkout-field-padding, var(--spacing-content-xs)) * 2 + 1.5rem) !important;
    line-height: 1.5 !important;
    min-height: calc(1.5em + (var(--checkout-field-padding, var(--spacing-content-xs)) * 2) - 1px) !important;
    height: calc(1.5em + (var(--checkout-field-padding, var(--spacing-content-xs)) * 2) - 1px) !important;
}

.bt-account-addresses--edit.brxe-woocommerce-account-form-edit-address label {
    color: var(--checkout-label-text, var(--color-neutral-700)) !important;
    font-size: var(--checkout-label-size, var(--text-sm)) !important;
    font-weight: var(--checkout-label-weight, 400) !important;
    margin-bottom: var(--checkout-label-margin-bottom, 0.25rem) !important;
}

} /* @layer components */