/**
 * Estilos base para elementos WooCommerce (Cart, Checkout, Order, Account)
 * Permite que los elementos se vean correctamente sin depender de Tailwind.
 *
 * Todo va dentro de @layer a propósito: el CSS en capa cede siempre ante el que
 * está fuera de capa, sea cual sea su especificidad. Así estos estilos hacen de
 * suelo —el elemento se ve bien recién insertado, sin Tailwind y sin tocar
 * nada— y encima pintan sin pelearse tanto los controles de estilo de Bricks
 * como las clases de utilidad o las clases globales. Las dos vías conviven.
 *
 * Todos los selectores son propios (flowtitude-*, ft-*): la capa no cede
 * terreno frente a WooCommerce ni al tema.
 *
 * Usa la capa "components" (no un nombre propio) porque el orden de capas
 * -tanto el de WindPress como el fallback de Layers_Injector::get_detected_layer_order()-
 * declara "theme, components, utilities, custom" de antemano. Una capa sin
 * pre-declarar entra por orden de primera aparición, es decir, después de
 * "utilities": el suelo ganaría a las utilidades, justo lo contrario de lo
 * que dice este comentario. Con "components" el orden coincide con el
 * contrato de verdad.
 *
 * @package Flowtitude
 * @subpackage WooCommerce
 * @since 1.0.6
 */

@layer components {

/* --- Carrito: subtotal, total, envío --- */
.flowtitude-cart-subtotal,
.flowtitude-cart-order-total {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.flowtitude-cart-subtotal__label,
.flowtitude-cart-order-total__label {
    font-weight: 700;
}

.flowtitude-cart-subtotal__value,
.flowtitude-cart-order-total__value {
    flex: 1;
    min-width: 0;
    text-align: right;
}

.flowtitude-cart-subtotal__price,
.flowtitude-cart-order-total__price {
    display: flex;
    justify-content: flex-end;
    font-weight: 700;
}

.flowtitude-cart-order-total__tax {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
    text-align: right;
}

/* Row layout para order total (label + valor) */
.flowtitude-cart-order-total__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

/* Price amount styling */
.flowtitude-price-amount {
    font-weight: 700;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

/* --- Carrito: envío --- */
.flowtitude-cart-shipping-totals__wrapper table {
    width: 100%;
}

.flowtitude-cart-shipping-totals__wrapper td {
    padding: 0.25rem 0;
}

/* --- Carrito: calculadora de envío ---
 * ft-cart-shipping-calculator no tenia estructura BEM previa: no habia CSS
 * al que enganchar, se define aqui de cero junto a sus controles nativos.
 */
.flowtitude-cart-shipping-calculator__title {
    margin-bottom: var(--spacing-content-sm, 0.5rem);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
}

/* --- Carrito: lista de cupones aplicados ---
 * Antes vivian en CartCoupons.css: fuera de capa y con !important, ganaba
 * siempre a los controles nativos. Se traen aqui, sin !important, junto a
 * Woo_Element_Styles::parts(). Las clases brt-cart-coupon-* no se
 * renombran: CartCoupons.js las usa para el AJAX de eliminar cupón.
 */
.brt-cart-coupons-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 100%;
}

.brt-cart-coupon-item {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.625rem;
    padding: 0.3125rem;
    width: 100%;
}

.brt-cart-coupon-item__label {
    display: flex;
    align-items: center;
    gap: var(--spacing-content-xs, 0.5rem);
    flex: 1;
    min-width: 0;
}

.brt-cart-coupon-item__cost {
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 700;
}

.brt-cart-coupon-item__remove {
    cursor: pointer;
    padding: 0.3125rem;
    flex-shrink: 0;
}

/* --- Carrito: cupon AJAX ---
 * ft-cart-ajax-coupon no escribia ninguna clase estable: las clases brt-*
 * (input, boton, mensaje) son funcionales -las usa CartAjaxCoupon.js- y se
 * mantienen; las ft-* de aqui son solo para estilo, conviven con ellas.
 */
.ft-cart-ajax-coupon__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-content-xs, 0.5rem);
    align-items: center;
}

.ft-cart-ajax-coupon__field {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--color-neutral-300, #d1d5db);
    border-radius: var(--radius-md, 0.375rem);
    padding: var(--spacing-content-xs, 0.5rem);
    font-size: var(--text-sm, 0.875rem);
}

.ft-cart-ajax-coupon__button {
    flex-shrink: 0;
    padding: var(--spacing-content-xs, 0.5rem) var(--spacing-content-md, 0.75rem);
    border-radius: var(--radius-md, 0.375rem);
    font-size: var(--text-sm, 0.875rem);
}

.ft-cart-ajax-coupon__message:empty {
    display: none;
}

.ft-cart-ajax-coupon__message {
    margin-top: var(--spacing-content-xs, 0.5rem);
    padding: var(--spacing-content-sm, 0.75rem);
    border-radius: var(--radius-sm, 0.25rem);
    font-size: var(--text-sm, 0.875rem);
}

/* --- Checkout: formulario de cupon ---
 * ft-checkout-coupon-form-container/-wrapper/-input/-button ya estaban
 * publicadas y con estilo activo en checkout-optimized.css (con !important,
 * fuera de capa): se traen aqui, sin !important, para que los controles
 * nativos de Woo_Element_Styles puedan pintar encima. Los nombres no
 * cambian -ver la nota en checkout-optimized.css-.
 */
.ft-checkout-coupon-form-container {
    width: 100%;
}

.ft-checkout-coupon-form-wrapper {
    display: flex;
    gap: var(--spacing-content-xs, 0.25rem);
    align-items: center;
    flex-wrap: nowrap;
}

.ft-checkout-coupon-input {
    flex: 1;
    min-width: 0;
    border: var(--checkout-field-border, 1px solid var(--color-neutral-300, #d1d5db));
    border-radius: var(--checkout-field-border-radius, var(--radius-md, 0.375rem));
    padding: var(--checkout-field-padding, var(--spacing-content-xs, 0.5rem)) var(--spacing-content-sm, 0.75rem);
    font-size: var(--text-sm, 0.875rem);
}

.ft-checkout-coupon-input:focus {
    outline: none;
    border: var(--checkout-field-border-focus, 1px solid var(--color-neutral-900, #111827));
    background-color: var(--checkout-field-bg-focus, var(--color-white, #ffffff));
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.ft-checkout-coupon-button {
    flex-shrink: 0;
    padding: var(--checkout-field-padding, var(--spacing-content-xs, 0.5rem)) var(--spacing-content-md, 0.75rem);
    font-size: var(--text-sm, 0.875rem);
    white-space: nowrap;
    min-width: auto;
}

.ft-checkout-coupon-form__message:empty {
    display: none;
}

.ft-checkout-coupon-form__message {
    margin-top: var(--spacing-content-xs, 0.5rem);
    padding: var(--spacing-content-sm, 0.75rem);
    border-radius: var(--radius-sm, 0.25rem);
    font-size: var(--text-sm, 0.875rem);
}

/* --- Carrito: botón checkout y express --- */
.flowtitude-cart-proceed-checkout-container,
.flowtitude-cart-proceed-checkout-wrapper {
    width: 100%;
}

.flowtitude-cart-proceed-checkout__express {
    margin-bottom: 0.75rem;
}

.flowtitude-cart-proceed-checkout__express--below {
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* --- Checkout: contenedores genéricos ---
   (los flowtitude-* son el convenio antiguo, congelado por los sitios
   publicados; ft-checkout-order-detail sustituye al w-full que llevaba
   hardcodeado en el marcado) */
.flowtitude-checkout-submit-container,
.flowtitude-checkout-billing-detail,
.flowtitude-checkout-order-detail,
.ft-checkout-order-detail,
.flowtitude-checkout-shipping-methods-wrapper {
    width: 100%;
}

.flowtitude-checkout-order-total__value,
.flowtitude-checkout-order-total__price {
    text-align: right;
    font-weight: 700;
}

.flowtitude-checkout-order-total__tax {
    font-size: 0.875rem;
    color: #6b7280;
}

/* --- Order Summary: layouts --- */
.ft-order-summary--horizontal {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ft-order-summary--vertical {
    display: flex;
    flex-direction: column;
}

/* --- Simple Add to Cart: layouts --- */
.ft-add-to-cart--inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ft-add-to-cart--stacked {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* --- Checkout: botón de envío (ft-checkout-submit) ---
 * Antes el elemento leía las clases del usuario con una expresión regular
 * sobre el HTML ya renderizado del _root y las reinyectaba en el <button>
 * (cinco manipulaciones distintas, ver checkout-submit.php). Ahora las clases
 * del usuario se leen del ajuste _cssClasses (mismo patrón que
 * checkout-terms.php) y se añaden directamente al botón en render(); esta
 * regla solo pone el aspecto por defecto de esa clase estable.
 */
.ft-checkout-submit-button {
    width: 100%;
}

/* --- Checkout: botones de pago rápido (ft-checkout-express-payment) ---
 * El contenedor ya no lleva "flex flex-col" escrito en el marcado (regla de
 * oro: nada de utilidades de Tailwind en el PHP, ver woocommerce-patterns.md).
 * El layout dinámico (fila/columna, gap) sigue siendo un <style> inline
 * porque depende de ajustes del panel por instancia; eso no es CSS estático.
 */
.flowtitude-express-payment-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ============================================================
 * Checkout: formulario compartido (billing/shipping/create-account
 * + edición de dirección en Mi Cuenta)
 * ------------------------------------------------------------
 * checkout-billing-detail, checkout-create-account y
 * checkout-shipping-detail comparten la clase de raíz ".ft-checkout-form"
 * (más ".woocommerce-address-form.ft-checkout-form" en Mi Cuenta > editar
 * dirección) y, con ella, todo este bloque: campos, select2, labels y el
 * layout en dos columnas de los field-wrapper. No es CSS de un elemento
 * suelto, es CSS de la forma compartida, así que vive junto pero
 * documentado aparte de las partes que sí son de un solo elemento.
 * Antes vivía en checkout-optimized.css, fuera de capa; aquí no hace falta
 * !important salvo donde se indica.
 * ============================================================ */

.ft-checkout-form,
.ft-checkout-payment-form {
    width: 100%;
}

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

.ft-checkout-form textarea,
.woocommerce-address-form.ft-checkout-form textarea {
    min-height: 100px;
    resize: vertical;
}

.ft-checkout-form input:focus,
.woocommerce-address-form.ft-checkout-form input:focus,
.ft-checkout-form textarea:focus,
.woocommerce-address-form.ft-checkout-form textarea:focus,
.ft-checkout-form .select2-selection.select2-selection--single:focus,
.woocommerce-address-form.ft-checkout-form .select2-selection.select2-selection--single:focus {
    border: var(--checkout-field-border-focus, 1px solid var(--color-neutral-900));
    background-color: var(--checkout-field-bg-focus, var(--color-white));
    outline: none;
}

.ft-checkout-form input::placeholder,
.woocommerce-address-form.ft-checkout-form input::placeholder,
.ft-checkout-form textarea::placeholder,
.woocommerce-address-form.ft-checkout-form textarea::placeholder {
    color: var(--checkout-field-placeholder, var(--color-neutral-500));
}

.ft-checkout-form .woocommerce-input-wrapper strong,
.woocommerce-address-form.ft-checkout-form .woocommerce-input-wrapper strong {
    background-color: var(--checkout-field-bg, var(--color-white));
    border: var(--checkout-field-border, 1px solid var(--color-neutral-300));
    border-radius: var(--checkout-field-border-radius, var(--radius-md));
    color: var(--checkout-field-text, var(--color-neutral-900));
    padding: var(--checkout-field-padding, var(--spacing-content-xs));
    line-height: 1;
    width: 100%;
    font-weight: 400;
    display: block;
}

.ft-checkout-form label,
.woocommerce-address-form.ft-checkout-form label {
    color: var(--checkout-label-text, var(--color-neutral-700));
    font-size: var(--checkout-label-size, var(--text-sm));
    font-weight: var(--checkout-label-weight, 400);
    margin-bottom: var(--checkout-label-margin-bottom, 0.25rem);
}

/* Ocultar labels cuando el modo placeholders está activo (billing/shipping-detail) */
.ft-checkout-form[data-field-display="placeholders"] label[for*="country"],
.ft-checkout-form[data-field-display="placeholders"] label[for*="state"],
.ft-checkout-form[data-field-display="placeholders"] label[for*="billing_country"],
.ft-checkout-form[data-field-display="placeholders"] label[for*="billing_state"],
.ft-checkout-form[data-field-display="placeholders"] label[for*="shipping_country"],
.ft-checkout-form[data-field-display="placeholders"] label[for*="shipping_state"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Select2 (país / provincia) */
.ft-checkout-form .select2-container,
.woocommerce-address-form.ft-checkout-form .select2-container {
    width: 100%;
}

.ft-checkout-form .select2-selection.select2-selection--single,
.woocommerce-address-form.ft-checkout-form .select2-selection.select2-selection--single {
    background-color: var(--checkout-field-bg, var(--color-white));
    border: var(--checkout-field-border, 1px solid var(--color-neutral-300));
    border-radius: var(--checkout-field-border-radius, var(--radius-md));
    color: var(--checkout-field-text, var(--color-neutral-900));
    padding: var(--checkout-field-padding, var(--spacing-content-xs));
    padding-right: calc(var(--checkout-field-padding, var(--spacing-content-xs)) * 2 + 1.5rem);
    line-height: 1.5;
    margin: 0;
    height: auto;
    min-height: calc(1.5em + (var(--checkout-field-padding, var(--spacing-content-xs)) * 2) - 1px);
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.ft-checkout-form .select2-selection.select2-selection--single > span.select2-selection__rendered,
.woocommerce-address-form.ft-checkout-form .select2-selection.select2-selection--single > span.select2-selection__rendered {
    line-height: 1.5;
    padding: 0;
    color: var(--checkout-field-text, var(--color-neutral-900));
    display: block;
    width: 100%;
    font-size: 1rem;
}

.ft-checkout-form .select2-selection.select2-selection--single > span.select2-selection__arrow,
.woocommerce-address-form.ft-checkout-form .select2-selection.select2-selection--single > span.select2-selection__arrow {
    height: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: var(--checkout-field-padding, var(--spacing-content-xs));
    width: 1.5rem;
}

.ft-checkout-form .select2-container--default .select2-dropdown,
.woocommerce-address-form.ft-checkout-form .select2-container--default .select2-dropdown {
    background-color: var(--checkout-field-bg, var(--color-white));
    border: var(--checkout-field-border, 1px solid var(--color-neutral-300));
    border-radius: var(--checkout-field-border-radius, var(--radius-md));
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    margin-top: 4px;
}

.ft-checkout-form .select2-container--default .select2-results,
.woocommerce-address-form.ft-checkout-form .select2-container--default .select2-results {
    padding: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
}

.ft-checkout-form .select2-container--default .select2-results__option,
.woocommerce-address-form.ft-checkout-form .select2-container--default .select2-results__option {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    padding-inline: 3px;
    color: var(--checkout-field-text, var(--color-neutral-900));
    font-size: 16px;
    line-height: 1.5;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    margin: 0.25rem 0;
    border-radius: var(--checkout-field-border-radius, var(--radius-md));
}

.ft-checkout-form .select2-container--default .select2-results__option:first-child,
.woocommerce-address-form.ft-checkout-form .select2-container--default .select2-results__option:first-child {
    margin-top: 0.5rem;
}

.ft-checkout-form .select2-container--default .select2-results__option:last-child,
.woocommerce-address-form.ft-checkout-form .select2-container--default .select2-results__option:last-child {
    margin-bottom: 0.5rem;
}

.ft-checkout-form .select2-container--default .select2-results__option--highlighted[aria-selected],
.woocommerce-address-form.ft-checkout-form .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-neutral-100, #f3f4f6);
    color: var(--checkout-field-text, var(--color-neutral-900));
}

.ft-checkout-form .select2-container--default .select2-results__option[aria-selected="true"],
.woocommerce-address-form.ft-checkout-form .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--color-neutral-200, #e5e7eb);
    font-weight: 500;
    color: var(--checkout-field-text, var(--color-neutral-900));
}

.ft-checkout-form .select2-container--default .select2-search--dropdown,
.woocommerce-address-form.ft-checkout-form .select2-container--default .select2-search--dropdown {
    padding: 1rem;
    border-bottom: 1px solid var(--color-neutral-200);
    background-color: var(--checkout-field-bg, var(--color-white));
    margin-bottom: 0.5rem;
}

.ft-checkout-form .select2-container--default .select2-search--dropdown .select2-search__field,
.woocommerce-address-form.ft-checkout-form .select2-container--default .select2-search--dropdown .select2-search__field {
    border: var(--checkout-field-border, 1px solid var(--color-neutral-300));
    border-radius: var(--checkout-field-border-radius, var(--radius-md));
    padding: 0.875rem 1.25rem;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--checkout-field-bg, var(--color-white));
    color: var(--checkout-field-text, var(--color-neutral-900));
    font-size: 0.9375rem;
    line-height: 1.5;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.ft-checkout-form .select2-container--default .select2-search--dropdown .select2-search__field::placeholder,
.woocommerce-address-form.ft-checkout-form .select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
    color: var(--checkout-field-placeholder, var(--color-neutral-500));
    opacity: 1;
}

.ft-checkout-form .select2-container--default .select2-search--dropdown .select2-search__field:focus,
.woocommerce-address-form.ft-checkout-form .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--checkout-field-border-focus, var(--color-neutral-900));
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* Layout en dos columnas de los campos (billing/shipping/account) */
.ft-checkout-form .woocommerce-billing-fields__field-wrapper,
.ft-checkout-form .woocommerce-shipping-fields__field-wrapper,
.ft-checkout-form .woocommerce-account-fields__field-wrapper,
.woocommerce-address-form.ft-checkout-form .woocommerce-billing-fields__field-wrapper,
.woocommerce-address-form.ft-checkout-form .woocommerce-shipping-fields__field-wrapper,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--checkout-field-gap, var(--spacing-content-sm));
    justify-content: space-between;
}

.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p,
.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p,
.ft-checkout-form .woocommerce-account-fields__field-wrapper > p,
.woocommerce-address-form.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p,
.woocommerce-address-form.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p {
    width: auto;
    float: unset;
    flex: 0 0 100%;
    margin-top: var(--spacing-content-lg);
}

.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_address_2_field,
.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_address_2_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_address_2_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_address_2_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#billing_address_2_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#shipping_address_2_field {
    margin-top: 0.5rem;
}

.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_first_name_field,
.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_last_name_field,
.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_phone_field,
.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_email_field,
.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_first_name_field,
.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_last_name_field,
.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_phone_field,
.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_email_field,
.ft-checkout-form .woocommerce-account-fields__field-wrapper > p#account_username_field,
.ft-checkout-form .woocommerce-account-fields__field-wrapper > p#account_password_field,
.ft-checkout-form .woocommerce-account-fields__field-wrapper > p:has(input[name="account_username"]),
.ft-checkout-form .woocommerce-account-fields__field-wrapper > p:has(input[name="account_password"]),
.woocommerce-address-form.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_first_name_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_last_name_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_phone_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_email_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_first_name_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_last_name_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#billing_first_name_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#billing_last_name_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#billing_phone_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#billing_email_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#shipping_first_name_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#shipping_last_name_field {
    flex: 1 0 calc((100% - var(--checkout-field-gap, var(--spacing-content-sm))) / 2);
}

.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_phone_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_phone_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#billing_phone_field {
    order: -1;
    margin-top: 0;
}

.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_email_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_email_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#billing_email_field {
    order: -2;
    margin-top: 0;
}

.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_first_name_field,
.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_last_name_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_first_name_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_last_name_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#shipping_first_name_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#shipping_last_name_field {
    margin-top: 0;
}

.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_city_field,
.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_state_field,
.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_postcode_field,
.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_city_field,
.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_state_field,
.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_postcode_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_city_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_state_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_postcode_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_city_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_state_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_postcode_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#billing_city_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#billing_state_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#billing_postcode_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#shipping_city_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#shipping_state_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#shipping_postcode_field {
    flex: 1 0 calc(33% - var(--spacing-content-xs));
}

.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_company_field,
.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_company_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_company_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_company_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#billing_company_field,
.woocommerce-address-form.ft-checkout-form .woocommerce-address-fields__field-wrapper > p#shipping_company_field {
    display: none;
}

@media (max-width: 767px) {
    .ft-checkout-form .woocommerce-billing-fields__field-wrapper > p,
    .ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p,
    .ft-checkout-form .woocommerce-account-fields__field-wrapper > p,
    .ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_first_name_field,
    .ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_last_name_field,
    .ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_phone_field,
    .ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_email_field,
    .ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_first_name_field,
    .ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_last_name_field,
    .ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_phone_field,
    .ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_email_field,
    .ft-checkout-form .woocommerce-account-fields__field-wrapper > p#account_username_field,
    .ft-checkout-form .woocommerce-account-fields__field-wrapper > p#account_password_field,
    .ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_city_field,
    .ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_state_field,
    .ft-checkout-form .woocommerce-billing-fields__field-wrapper > p#billing_postcode_field,
    .ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_city_field,
    .ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_state_field,
    .ft-checkout-form .woocommerce-shipping-fields__field-wrapper > p#shipping_postcode_field {
        flex: 1 0 100%;
    }
}

/* Campos de creación de cuenta: mismo estilo que el resto del formulario.
 * (antes era un bloque duplicado con !important en checkout-optimized.css;
 * ".ft-checkout-form input" de aquí arriba ya cubre estos inputs por
 * descendencia, así que ese duplicado se elimina).
 */
.ft-checkout-form .woocommerce-account-fields .ft-create-account-wrapper {
    margin-top: var(--spacing-content-md);
}

/* --- Checkout: toggles compartidos (switch) ---
 * Usados por checkout-create-account (crear cuenta), checkout-shipping-detail
 * (enviar a otra dirección) y checkout-order-note (notas, ya migrado). Es
 * infraestructura compartida, no de un solo elemento.
 */
.ft-toggle-switch {
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 1.5rem;
    flex-shrink: 0;
    order: 2;
}

.ft-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ft-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-neutral-300);
    transition: 0.3s;
    border-radius: 1.5rem;
}

.ft-toggle-slider:before {
    position: absolute;
    content: "";
    height: 1.125rem;
    width: 1.125rem;
    left: 0.1875rem;
    bottom: 0.1875rem;
    background-color: var(--color-white);
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.ft-toggle-switch input:checked + .ft-toggle-slider {
    background-color: var(--color-primary-500);
}

.ft-toggle-switch input:checked + .ft-toggle-slider:before {
    transform: translateX(1.5rem);
}

.ft-toggle-switch input:focus + .ft-toggle-slider {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.ft-checkout-form #ship-to-different-address.ft-ship-to-different-address {
    font-size: var(--text-base);
    font-weight: 700;
    margin-bottom: var(--spacing-content-md);
}

.ft-checkout-form .ft-ship-to-different-address-toggle-label,
.ft-checkout-form .ft-create-account-toggle-label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--checkout-field-gap, var(--spacing-content-sm));
    cursor: pointer;
    margin-bottom: 0;
    width: 100%;
}

.ft-checkout-form .ft-create-account-toggle {
    margin-bottom: var(--spacing-content-md);
}

.ft-checkout-form .ft-create-account-toggle-label {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-neutral-900);
}

.ft-checkout-form .ft-ship-to-different-address-toggle-label span,
.ft-checkout-form .ft-create-account-toggle-label span {
    order: 1;
    flex: 1 1 auto;
    font-size: var(--text-base);
    font-weight: 700;
    text-align: left;
    margin-right: auto;
}

.ft-checkout-order-note .ft-order-note-toggle {
    margin-bottom: var(--spacing-content-md);
}

.ft-checkout-order-note .ft-order-note-toggle-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--checkout-field-gap, var(--spacing-content-sm));
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-neutral-900);
    margin-bottom: 0;
}

.ft-checkout-order-note .ft-order-note-toggle-label span {
    order: 1;
    flex: 1;
}

.ft-checkout-order-note .ft-order-note-wrapper label {
    display: none;
}

.ft-checkout-order-note textarea {
    background-color: var(--checkout-field-bg, var(--color-white));
    border: var(--checkout-field-border, 1px solid var(--color-neutral-300));
    border-radius: var(--checkout-field-border-radius, var(--radius-md));
    color: var(--checkout-field-text, var(--color-neutral-900));
    padding: var(--checkout-field-padding, var(--spacing-content-xs));
    line-height: 1.5;
    width: 100%;
}

.ft-checkout-order-note textarea:focus {
    border: var(--checkout-field-border-focus, 1px solid var(--color-neutral-900));
    background-color: var(--checkout-field-bg-focus, var(--color-white));
    outline: none;
}

/* --- Checkout: métodos de pago (ft-checkout-payment) --- */
.ft-checkout-payment-form #payment {
    padding: 0;
}

.ft-checkout-payment-form #payment ul.payment_methods {
    border: var(--checkout-field-border, 1px solid var(--color-neutral-300));
    border-radius: var(--checkout-field-border-radius, var(--radius-md));
    background-color: var(--checkout-field-bg, var(--color-white));
    overflow: hidden;
}

.ft-checkout-payment-form #payment ul.payment_methods li {
    margin-bottom: 0;
    position: relative;
}

.ft-checkout-payment-form #payment ul.payment_methods li .payment_box {
    margin: 0;
    padding: var(--spacing-content-md) var(--spacing-content-md) var(--spacing-content-md) var(--spacing-content-xl);
    font-size: var(--text-sm);
    background-color: var(--color-neutral-50, #f9fafb);
}

.ft-checkout-payment-form #payment ul.payment_methods li .payment_box > p {
    margin-bottom: var(--spacing-content-lg);
}

.ft-checkout-payment-form #payment ul.payment_methods li .payment_box > p:last-child {
    margin-bottom: 0;
}

.ft-checkout-payment-form #payment ul.payment_methods li .payment_box label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-content-xs);
}

.ft-checkout-payment-form #payment ul.payment_methods li:not(:last-child) {
    border-bottom: var(--checkout-field-border, 1px solid var(--color-neutral-300));
}

.ft-checkout-payment-form #payment ul.payment_methods li label {
    padding: var(--spacing-content-md) var(--spacing-content-md) var(--spacing-content-md) 2.5rem;
    font-weight: var(--checkout-label-weight, 400);
    color: var(--checkout-label-text, var(--color-neutral-900));
    margin-bottom: 0;
}

.ft-checkout-payment-form #payment .payment_methods li input[type="radio"] {
    float: unset;
    margin: 0;
    position: absolute;
    top: var(--spacing-content-md);
    left: var(--spacing-content-md);
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    background-color: var(--color-white);
    border-radius: 100%;
    border: 1px solid var(--color-neutral-900);
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    min-height: 1.25rem;
    box-shadow: inset 0 0 0 3px var(--color-white);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.ft-checkout-payment-form #payment .payment_methods li input[type="radio"]:checked:before {
    background: var(--color-neutral-900);
    border-radius: 50%;
    content: "";
    display: block;
    height: .75em;
    margin: 0;
    min-height: 0.75rem;
    min-width: 0.75rem;
    width: .75em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ft-checkout-payment-form #payment .payment_methods li input[type="radio"]:checked:after {
    content: "";
    position: absolute;
    background-color: var(--color-neutral-900);
    border-radius: 100%;
    width: 0.625rem;
    height: 0.625rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ft-checkout-payment-form #payment .payment_methods li input[type="radio"]:checked + label {
    font-weight: 700;
}

p.woocommerce-SavedPaymentMethods-saveNew {
    margin-top: 1rem;
}

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

/* --- Checkout: lista de métodos de envío (ft-checkout-shipping-methods) ---
 * Elemento ya migrado (Komandesk #224); esta lista se quedó atrás en
 * checkout-optimized.css cuando se le añadieron los controles nativos.
 */
.ft-checkout-shipping-form {
    width: 100%;
}

.ft-checkout-shipping-form ul.woocommerce-shipping-methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--checkout-field-gap, var(--spacing-content-sm));
}

.ft-checkout-shipping-form ul.woocommerce-shipping-methods li {
    border: var(--checkout-field-border, 1px solid var(--color-neutral-300));
    border-radius: var(--checkout-field-border-radius, var(--radius-md));
    overflow: hidden;
    position: relative;
    background-color: var(--color-neutral-50);
    margin-bottom: 0;
}

.ft-checkout-shipping-form ul.woocommerce-shipping-methods li:hover,
.ft-checkout-shipping-form ul.woocommerce-shipping-methods li.active {
    border: var(--checkout-field-border-focus, 1px solid var(--color-neutral-900));
}

.ft-checkout-shipping-form li label {
    margin-bottom: 0;
    padding: var(--spacing-content-md) var(--spacing-content-md) var(--spacing-content-md) 2.5rem;
    font-weight: var(--checkout-label-weight, 400);
    color: var(--checkout-label-text, var(--color-neutral-900));
}

.ft-checkout-shipping-form ul.woocommerce-shipping-methods li input {
    float: unset;
    margin: 0;
    position: absolute;
    top: 50%;
    left: var(--spacing-content-md);
    transform: translateY(-50%);
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    background-color: var(--color-neutral-50);
    border-radius: 100%;
    border: 1px solid var(--color-neutral-900);
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    min-height: 1.25rem;
    box-shadow: inset 0 0 0 3px var(--color-neutral-50);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.ft-checkout-shipping-form ul.woocommerce-shipping-methods li input:checked:before {
    background: var(--color-neutral-900);
    border-radius: 50%;
    content: "";
    display: block;
    height: .75em;
    margin: 0;
    min-height: 0.75rem;
    min-width: 0.75rem;
    width: .75em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ft-checkout-shipping-form ul.woocommerce-shipping-methods li input:checked:after {
    content: "";
    position: absolute;
    background-color: var(--color-neutral-900);
    border-radius: 100%;
    width: 0.625rem;
    height: 0.625rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ft-checkout-shipping-form ul.woocommerce-shipping-methods li input:checked + label {
    font-weight: 700;
}

.ft-checkout-shipping-form ul.woocommerce-shipping-methods li input[type="hidden"] + label {
    position: relative;
    font-weight: 700;
}

.ft-checkout-shipping-form ul.woocommerce-shipping-methods li input[type="hidden"] + label:before {
    background: var(--color-neutral-900);
    border-radius: 50%;
    content: "";
    display: block;
    height: .75rem;
    margin: 0;
    min-height: 0.75rem;
    min-width: 0.75rem;
    width: .75rem;
    position: absolute;
    top: 50%;
    left: calc(var(--spacing-content-md) + 0.25rem);
    transform: translateY(-50%);
}

.ft-checkout-shipping-form ul.woocommerce-shipping-methods li input[type="hidden"] + label:after {
    content: "";
    position: absolute;
    margin: 0;
    top: 50%;
    left: var(--spacing-content-md);
    transform: translateY(-50%);
    border-radius: 100%;
    border: 1px solid var(--color-neutral-900);
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    min-height: 1.25rem;
    cursor: pointer;
    padding: 0;
}

/* --- Desistimiento UE (botón + confirmación) --- */
.ft-withdrawal {
    margin-top: 1.5rem;
}

.ft-withdrawal__details > summary {
    list-style: none;
    display: inline-block;
    cursor: pointer;
}

.ft-withdrawal__details > summary::-webkit-details-marker {
    display: none;
}

.ft-withdrawal__confirm {
    margin-top: 0.75rem;
    padding: 1rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    max-width: 560px;
}

.ft-withdrawal__deadline {
    font-weight: 600;
}

.ft-withdrawal__state {
    opacity: 0.75;
    font-size: 0.9em;
}

.ft-order-access__error {
    color: #b42318;
}

.ft-order-access__form input {
    max-width: 320px;
}

/* --- Avisos WooCommerce (error, info, success) ---
 * Antes vivian repartidos con !important en dos sitios que se pisaban entre
 * si: estilo inline por PHP en woocommerce/notices/{error,notice,success}.php
 * (ganaba siempre, por especificidad de atributo inline) y un <style> sin
 * capa inyectado en wp_head por Config::inject_tokens() (nunca llegaba a
 * pintarse mientras el inline seguia ahi). Aqui unificados sin !important:
 * la capa "components" ya cede ante utilidades y clases globales por si
 * misma (ver cabecera del fichero), asi que no hace falta forzar nada.
 * Los tokens (--woo-notice-*) los sigue inyectando inject_tokens() en :root,
 * eso es configuracion dinamica del panel y no puede ser CSS estatico.
 */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-width: var(--woo-notice-border-width, 1px);
    border-style: solid;
    border-radius: var(--woo-notice-border-radius, 8px);
    list-style: none;
}

.woocommerce-error {
    background-color: var(--woo-notice-error-bg, transparent);
    color: var(--woo-notice-error-border, var(--color-neutral-900, #111827));
    border-color: var(--woo-notice-error-border, currentColor);
}

.woocommerce-info {
    background-color: var(--woo-notice-info-bg, transparent);
    color: var(--woo-notice-info-border, var(--color-neutral-900, #111827));
    border-color: var(--woo-notice-info-border, currentColor);
}

.woocommerce-message {
    background-color: var(--woo-notice-success-bg, transparent);
    color: var(--woo-notice-success-border, var(--color-neutral-900, #111827));
    border-color: var(--woo-notice-success-border, currentColor);
}

.woocommerce-error li {
    padding: 0.5rem 0;
    margin-bottom: 0;
}

.ft-woo-notice li {
    list-style: none;
}

/* Botones de accion dentro de avisos ("Ver carrito", "Finalizar compra"...).
 * La clase .btn (y .btn--outline en avisos info) ya la anaden
 * Config::process_notice_content() / process_notice_content_info(), enganchadas
 * a woocommerce_add_message/add_error/add_notice: llegan puestas en el HTML
 * del aviso antes de que el template lo pinte, así que aquí solo hace falta
 * el selector.
 */
.ft-woo-notice-success .btn:not(.btn--outline),
.ft-woo-notice-error .btn:not(.btn--outline) {
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    color: white;
}

.ft-woo-notice-success .btn:not(.btn--outline) {
    background-color: var(--woo-notice-success-color);
}

.ft-woo-notice-error .btn:not(.btn--outline) {
    background-color: var(--woo-notice-error-color);
}

.ft-woo-notice-success .btn:not(.btn--outline):hover,
.ft-woo-notice-error .btn:not(.btn--outline):hover {
    opacity: 0.9;
}

.ft-woo-notice-info .btn.btn--outline {
    background-color: transparent;
    color: white;
    border: 1px solid var(--woo-notice-info-color);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
}

.ft-woo-notice-info .btn.btn--outline:hover {
    background-color: var(--woo-notice-info-color);
    color: white;
}

.ft-woo-notice a:not(.btn) {
    color: inherit;
    text-decoration: underline;
    font-weight: 500;
}

.ft-woo-notice a:not(.btn):hover {
    opacity: 0.8;
}

/* --- Checkout: términos y condiciones --- */
.ft-checkout-terms__wrapper {
    width: 100%;
}

.ft-checkout-terms__content {
    margin-bottom: 0.75rem;
}

.ft-checkout-terms__row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.ft-checkout-terms__label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.ft-checkout-terms__checkbox {
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.ft-checkout-terms__required {
    text-decoration: none;
}

/* --- Mi cuenta: login / registro (myaccount/form-login.php) ---
 * Sustituye las utilidades Tailwind que llevaba el override
 * (max-w-xl !border-4 border-zinc-200 rounded-lg text-left bg-white shadow-md).
 * El border-width se fuerza con !important porque así estaba en el original
 * (Tailwind !border-4): sin el forzado, WooCommerce puede pisar el ancho de
 * borde del formulario.
 */
.ft-login-form {
    max-width: 36rem;
    border-width: 4px !important;
    border-style: solid;
    border-color: var(--color-neutral-200, #e4e4e7);
    border-radius: var(--radius-lg, 0.5rem);
    background-color: var(--color-white, #ffffff);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    text-align: left;
}

/* --- Mi cuenta: editar cuenta (myaccount/form-edit-account.php) --- */
.ft-edit-account-form__wrapper {
    max-width: 48rem;
    border: 2px solid var(--color-white, #ffffff);
    border-radius: var(--radius-lg, 0.5rem);
    padding: var(--spacing-content-md, 0.75rem);
    margin-bottom: var(--spacing-content-md, 0.75rem);
}

.ft-edit-account-form__wrapper .form-row-last {
    margin-top: 0;
}

.ft-edit-account-form__hint,
.ft-edit-account-form__label-hint {
    font-size: var(--text-sm, 0.875rem);
}

.ft-edit-account-form__section-title {
    margin-top: var(--spacing-content-lg, 1.5rem);
}

/* --- Mi cuenta: listado de pedidos (myaccount/orders.php) --- */
.ft-orders-table {
    border: 4px solid var(--color-neutral-200, #e4e4e7);
    border-radius: 12px;
    border-collapse: separate;
    margin-top: var(--spacing-content-md, 0.75rem);
    background-color: var(--color-white, #ffffff);
}

.ft-orders-table__cell {
    padding-inline: var(--spacing-content-md, 0.75rem);
    padding-block: 1rem;
    border: none;
    vertical-align: middle;
}

/* --- Mi cuenta: ver pedido, cabecera (myaccount/view-order.php) --- */
.ft-view-order__header {
    margin-bottom: var(--spacing-content-lg, 1.5rem);
}

.ft-view-order__header .woocommerce-order-number {
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 700;
    margin: 0;
}

.ft-view-order__meta {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-neutral-600, #4b5563);
    margin-bottom: var(--spacing-content-lg, 1.5rem);
}

/* --- Detalles de pedido (order/order-details.php + subtemplates) ---
 * Los selectores se apoyan en las clases estables que ya pone WooCommerce
 * (.woocommerce-order-details, .woocommerce-table--order-details,
 * .woocommerce-order-summary, .woocommerce-columns--addresses,
 * .woocommerce-column--*, .product-total, .woocommerce-table__product-name,
 * .woocommerce-table__line-item) para no inventar clases donde ya hay una.
 * Solo se añaden ft-* donde el nodo no llevaba ninguna clase propia.
 */
.woocommerce-order-details {
    margin-top: var(--spacing-content-lg, 1.5rem);
}

.woocommerce-order-details__title {
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 700;
    margin-bottom: var(--spacing-content-lg, 1.5rem);
    color: var(--color-neutral-900, #111827);
}

.ft-order-details__grid {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .ft-order-details__grid {
        grid-template-columns: 3fr 1fr;
    }
}

.ft-order-details__items {
    border: 2px solid var(--color-neutral-300, #d1d5db);
    background-color: var(--color-white, #ffffff);
}

@media (min-width: 1024px) {
    .ft-order-details__items {
        border-top-left-radius: var(--radius-lg, 0.5rem);
        border-bottom-left-radius: var(--radius-lg, 0.5rem);
    }
}

.woocommerce-table--order-details {
    border: 0;
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-table--order-details thead th {
    background-color: var(--color-neutral-50, #f9fafb);
    border-bottom: 2px solid var(--color-neutral-200, #e5e7eb);
}

.woocommerce-table__product-name {
    padding: var(--spacing-content-lg, 1.5rem);
}

th.woocommerce-table__product-name {
    text-align: left;
    font-weight: 600;
}

.product-total {
    padding: var(--spacing-content-lg, 1.5rem);
    text-align: right;
}

th.woocommerce-table__product-table.product-total {
    font-weight: 600;
}

td.woocommerce-table__product-total.product-total {
    font-weight: 700;
    vertical-align: middle;
}

.woocommerce-table--order-details tbody tr.woocommerce-table__line-item {
    background-color: var(--color-white, #ffffff);
    border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
}

.woocommerce-table--order-details tbody tr.woocommerce-table__line-item:last-child {
    border-bottom: 0;
}

.ft-order-details__product-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-content-md, 0.75rem);
    flex-wrap: wrap;
}

.ft-order-details__product-cell img,
.ft-order-details__product-cell .flow-order-product-image-wrapper {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    border-radius: var(--radius-md, 0.375rem);
}

.woocommerce-order-details .woocommerce-order-summary {
    border: 2px solid var(--color-neutral-300, #d1d5db);
    border-left: 0;
    background-color: var(--color-secondary-100, #f3f4f6);
    padding: var(--spacing-content-lg, 1.5rem);
    color: var(--color-neutral-900, #111827);
}

.woocommerce-order-details .woocommerce-order-summary * {
    color: var(--color-neutral-900, #111827) !important;
}

@media (min-width: 1024px) {
    .woocommerce-order-details .woocommerce-order-summary {
        border-top-right-radius: var(--radius-lg, 0.5rem);
        border-bottom-right-radius: var(--radius-lg, 0.5rem);
    }
}

.ft-order-details__totals > div {
    margin-bottom: var(--spacing-content-md, 0.75rem);
}

.ft-order-details__totals > div:last-child {
    margin-bottom: 0;
}

.ft-order-details__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.ft-order-details__total-row--tax {
    flex-direction: column;
    align-items: flex-start;
}

.ft-order-details__total-label {
    text-transform: uppercase;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-neutral-900, #111827) !important;
}

.ft-order-details__total-value {
    font-weight: 600;
    font-size: var(--text-lg, 1.125rem);
    color: var(--color-neutral-900, #111827) !important;
}

.ft-order-details__note {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-content-xs, 0.25rem);
    padding-top: var(--spacing-content-md, 0.75rem);
    border-top: 1px solid var(--color-neutral-300, #d1d5db);
}

.ft-order-details__note-text {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-neutral-900, #111827) !important;
}

.ft-order-details__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-content-md, 0.75rem);
    margin-top: var(--spacing-content-lg, 1.5rem);
}

/* Botones btn-dark / btn-outline en el detalle de pedido.
 * Migrado desde el antiguo library/woocommerce/assets/css/order-details.css
 * (fichero retirado: dependía de que Tailwind generase clases exactas).
 */
.btn.btn-dark,
a.btn.btn-dark {
    color: #ffffff !important;
    font-size: 1.07453125rem !important;
    padding: 0.4375rem 0.875rem !important;
}

.btn.btn-outline,
a.btn.btn-outline,
.btn.btn-dark.btn-outline,
a.btn.btn-dark.btn-outline {
    background-color: transparent !important;
    border: 2px solid var(--color-neutral-900, #111827) !important;
    color: var(--color-neutral-900, #111827) !important;
    padding: 0.4375rem 0.875rem !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.07453125rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    min-height: auto !important;
    line-height: 1.5 !important;
}

.btn.btn-outline:hover,
a.btn.btn-outline:hover,
.btn.btn-dark.btn-outline:hover,
a.btn.btn-dark.btn-outline:hover {
    background-color: var(--color-neutral-900, #111827) !important;
    color: #ffffff !important;
}

/* --- Detalles de cliente del pedido (order/order-details-customer.php) --- */
.woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
}

.woocommerce-column--billing-address,
.woocommerce-column--shipping-address,
.woocommerce-column--3 {
    padding: var(--spacing-content-lg, 1.5rem);
}

.woocommerce-columns--addresses .woocommerce-column--billing-address,
.woocommerce-columns--addresses .woocommerce-column--shipping-address {
    border-right: 2px solid var(--color-neutral-300, #d1d5db);
}

/* --- Carrito: barra de coste de envío (elements/cart-shipping-totals.php,
 * elements/cart-totals-ajax-handler.php). Reutiliza .flowtitude-price-amount,
 * que ya trae flex + justify-end + font-weight 700 desde el bloque de
 * carrito de este mismo fichero. */

/* --- Reseñas de producto: barra de progreso (snippet
 * datos-resenas-producto.php, solo el ejemplo de la documentación) --- */
.ft-review-bar {
    width: 100%;
    background-color: var(--color-neutral-200, #e5e7eb);
    border-radius: 9999px;
    height: 0.5rem;
}

.ft-review-bar__fill {
    background-color: #facc15;
    border-radius: 9999px;
    height: 0.5rem;
}

} /* @layer components */