/* ============================================================
   Checkout Cards — tarjeta de datos de contacto (billing)
   ============================================================ */

.sp-wsv-checkout-card {
    background: var(--spwsv-panel-bg);
    border: 1px solid var(--spwsv-border);
    border-radius: var(--spwsv-radius);
    padding: var(--spwsv-space-xl);
    margin-bottom: var(--spwsv-space-xl);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sp-wsv-checkout-card:last-child {
    margin-bottom: 0;
}

/*
 * Animación de entrada (fade + slide-up), escalonada por orden de
 * aparición dentro de cada columna — mismo lenguaje visual que el check de
 * la thank you page (sp-fill/sp-scale, ver theme-common.css). Reutilizable
 * en cualquier lista de cards vía la clase .sp-wsv-fade-in-up; el delay
 * por nth-child cubre hasta 6 cards por columna, suficiente para
 * contacto/facturación/shipping/payment sin quedar mecánico.
 */
@keyframes sp-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.sp-wsv-checkout-card {
    animation: sp-fade-in-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sp-wsv-checkout-card:nth-child(1) { animation-delay: 0s; }
.sp-wsv-checkout-card:nth-child(2) { animation-delay: 0.08s; }
.sp-wsv-checkout-card:nth-child(3) { animation-delay: 0.16s; }
.sp-wsv-checkout-card:nth-child(4) { animation-delay: 0.24s; }
.sp-wsv-checkout-card:nth-child(5) { animation-delay: 0.32s; }
.sp-wsv-checkout-card:nth-child(6) { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    .sp-wsv-checkout-card {
        animation: none;
    }
}

/*
 * Mismo efecto de foco que ya tienen los inputs individuales (ver
 * theme-common.css: border-color + box-shadow con --spwsv-accent /
 * --spwsv-accent-2-ring), replicado en la card completa cuando CUALQUIER
 * campo dentro tiene el foco — :focus-within se activa con cualquier
 * descendiente enfocado, sin necesitar JS.
 */
.sp-wsv-checkout-card:focus-within {
    border-color: var(--spwsv-accent);
    /* --spwsv-accent-2-ring: mismo accent oscuro del panel (--spwsv-accent-2), con opacidad baja (18%) en vez de color sólido — efecto halo sutil, ver hex_to_rgba() en PHP. */
    box-shadow: 0 0 0 3px var(--spwsv-accent-2-ring);
}

/*
 * <details> es el elemento raíz de la card (ver render_checkout_card()) —
 * <summary> (el título) queda clicable de fábrica y es lo único visible
 * cuando la card está colapsada.
 */
.sp-wsv-checkout-card__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spwsv-space-md);
    margin: 0 0 var(--spwsv-space-lg);
    font-size: var(--spwsv-font-size-lg);
    font-weight: 600;
    color: var(--spwsv-text);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* Quita el marcador nativo del navegador (triángulo/flecha de <summary>). */
.sp-wsv-checkout-card__title::-webkit-details-marker {
    display: none;
}

.sp-wsv-checkout-card.is-collapsed .sp-wsv-checkout-card__title {
    margin-bottom: 0;
}

/*
 * Chevron propio, gira 180° al abrir — animado en paralelo a
 * grid-template-rows (misma clase "is-collapsed" decide ambos estados).
 */
.sp-wsv-checkout-card__title::after {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    color: var(--spwsv-muted);
    transition: transform 0.25s ease;
    transform: rotate(180deg);
}

.sp-wsv-checkout-card.is-collapsed .sp-wsv-checkout-card__title::after {
    transform: rotate(0deg);
}

/*
 * Animación de apertura/cierre vía CSS grid-template-rows (1fr abierto,
 * 0fr cerrado) — no requiere medir scrollHeight en JS y es inmune a saltos
 * por reflow del contenido interno a medio camino (ver
 * render_checkout_card() en PHP para el porqué de este wrapper extra).
 * grid-template-rows SÍ es animable con transition (a diferencia de
 * max-height cuando el valor de origen/destino es "none" o "auto").
 */
.sp-wsv-checkout-card__body-wrap {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
}

/*
 * "is-collapsed" (clase propia, JS) controla el estado visual — no el
 * atributo [open]: si initCollapsibleCards() quitara "open" al hacer clic,
 * el navegador aplicaría display:none al contenido de <details> de forma
 * NATIVA e instantánea, cortando la transición de grid-template-rows a
 * medio camino. "open" se mantiene siempre puesto; overflow:hidden +
 * grid-template-rows:0fr ya ocultan el contenido igual de bien.
 *
 * opacity:0 en paralelo da el efecto fade in/out. (Se probó escalonar con
 * transition-delay para separar fade y colapso, pero se veía como dos
 * animaciones desconectadas en vez de un solo dropdown fluido — revertido.
 * La causa real del salto/subida de inputs NO era esta superposición, sino
 * el floating label perdiendo el foco al hacer click en el título — ver
 * fix con mousedown+preventDefault() en initCollapsibleCards(), JS.)
 */
.sp-wsv-checkout-card.is-collapsed .sp-wsv-checkout-card__body-wrap {
    grid-template-rows: 0fr;
    opacity: 0;
}

/*
 * min-height:0 es obligatorio: por defecto un grid item no se encoge por
 * debajo de su contenido intrínseco (min-height:auto), lo que impedería que
 * 0fr colapse realmente la fila. overflow:hidden recorta el contenido
 * mientras la fila se reduce.
 *
 * (align-self:start se probó para evitar que el contenido interno se
 * reflowee durante la animación, pero rompía el recorte por completo: el
 * item dejaba de encogerse con la fila y quedaba con su altura intrínseca
 * completa, solapándose con la card siguiente. Revertido.)
 *
 * position:relative + el hijo directo en position:absolute (ver regla
 * siguiente) es lo que finalmente elimina el "salto"/subida de los inputs:
 * como el navegador anima el ALTO DE LA FILA del grid (grid-template-rows),
 * el contenido normal (in-flow) dentro de esa fila se ve forzado a
 * reflowear su propio layout interno en cada frame mientras el espacio
 * disponible cambia — eso es lo que "sube" los campos. Con el hijo en
 * position:absolute, su layout se calcula UNA SOLA VEZ contra su tamaño
 * intrínseco real (ancho del padre, alto natural) y deja de estar en el
 * flujo — el padre encogiéndose ya no lo afecta en absoluto, solo lo recorta
 * visualmente por overflow:hidden.
 */
.sp-wsv-checkout-card__body {
    min-height: 0;
    overflow: hidden;
    /*
     * contain:content aísla el layout/paint interno de este elemento del
     * resto de la página: el contenido (.sp-wsv-fields-grid) calcula su
     * propio tamaño una sola vez con normalidad y ya no se recalcula solo
     * porque el grid item padre cambia de alto durante la animación — evita
     * el salto/reflow visual de los inputs sin afectar el recorte por
     * overflow:hidden (a diferencia de align-self:start, que sí rompía el
     * recorte por completo — ver historial arriba, y de position:absolute
     * en el hijo, que quitaba al contenido del flujo y dejaba a
     * .sp-wsv-checkout-card__body sin altura intrínseca contra la que medir
     * el 1fr del grid abierto).
     */
    contain: content;
}

/*
 * "Ship to a different address?" (render_shipping_fields(), PHP propio —
 * ver class-sp-wsv-module-checkout-steps.php — reemplaza por completo
 * checkout/form-shipping.php de WooCommerce). El checkbox queda como toggle
 * suelto, sin fondo de card; .shipping_address (dentro, al marcarlo) ya
 * contiene dos .sp-wsv-checkout-card reales (contacto de envío + dirección
 * de envío, mismo componente que billing) que traen su propio fondo/borde.
 *
 * margin-bottom aquí (no solo en el <h3>): la ÚLTIMA card de shipping
 * (".sp-wsv-checkout-card:last-child") pierde su margin-bottom propio por
 * ser la última hija de .sp-wsv-shipping-address-inner — correcto DENTRO
 * de ese contenedor, pero "Additional information" es una card hermana de
 * TODO .sp-wsv-shipping-fields, no de esa card en particular, así que sin
 * este margin quedaban pegadas cuando el checkbox estaba marcado (bug
 * reportado: sin espacio entre "¿Cuál es tu dirección de envío?" y
 * "Additional information"). Con el checkbox desmarcado no afecta — el
 * <h3> ya tenía su propio margin-bottom para ese caso.
 */
body.sp-wsv-simple .sp-wsv-shipping-fields {
    margin-bottom: var(--spwsv-space-xl);
}

/*
 * Toggle "Ship to a different address?" con look de card propia (igual
 * lenguaje visual que .sp-wsv-checkout-card), no un checkbox nativo suelto.
 * El <label> de WooCommerce (woocommerce-form__label-for-checkbox) ya
 * envuelve checkbox+texto, así que se aprovecha como área clicable completa.
 *
 * CAUSA del checkbox "pegado" junto a la card siguiente, y de "Additional
 * information" desplazada a la derecha (bug reportado, persistente):
 * WooCommerce core (woocommerce.css) trae ".woocommerce-checkout .checkout
 * .col-2 h3#ship-to-different-address {float:left;clear:none}" — 1 id + 3
 * clases de especificidad. Nuestro <form> SÍ lleva las clases "checkout
 * woocommerce-checkout" y el shipping vive dentro de "<div class=\"col-2\">"
 * (ver form-checkout-steps.php), así que ese selector nativo matchea de
 * verdad. Dos intentos previos de anularlo con menos clases que el nativo
 * ("body.sp-wsv-simple .sp-wsv-shipping-fields h3#...", 2 clases, y luego
 * solo "body.sp-wsv-simple #ship-to-different-address", 1 clase) perdían la
 * pelea de especificidad (3 clases del nativo > 1-2 nuestras) y el float
 * seguía aplicando pese a "anularlo" — con el toggle flotando a la
 * izquierda y sin clear, el siguiente bloque visible (.woocommerce-additional-fields,
 * ya que .shipping_address va en display:none con el checkbox desmarcado)
 * se renderizaba junto a él en vez de debajo. Replicado aquí sí, de verdad,
 * el mismo selector completo (.woocommerce-checkout.checkout.col-2) con
 * "body.sp-wsv-simple" de más para SUPERAR esa especificidad (4 clases
 * contra 3) — así gana sin depender de qué hoja cargue después, evitando
 * que un orden de enqueue distinto vuelva a romper esto.
 */
body.sp-wsv-simple .woocommerce-checkout.checkout .col-2 #ship-to-different-address {
    float: none;
    clear: both;
    display: block;
    width: auto;
    margin: var(--spwsv-space-xl) 0 var(--spwsv-space-2xl);
    font-size: var(--spwsv-font-size-lg);
    font-weight: 600;
}

body.sp-wsv-simple .sp-wsv-shipping-fields h3#ship-to-different-address label {
    display: flex;
    align-items: center;
    gap: var(--spwsv-space-md);
    background: var(--spwsv-panel-bg);
    border: 1px solid var(--spwsv-border);
    border-radius: var(--spwsv-radius);
    padding: var(--spwsv-space-xl) var(--spwsv-space-xl);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.sp-wsv-simple .sp-wsv-shipping-fields h3#ship-to-different-address label:hover {
    border-color: var(--spwsv-accent);
}

body.sp-wsv-simple .sp-wsv-shipping-fields h3#ship-to-different-address label:has(input:focus-visible) {
    border-color: var(--spwsv-accent);
    box-shadow: 0 0 0 3px var(--spwsv-accent-2-ring);
}

/*
 * Toggle switch en vez del checkbox nativo del navegador: el checkbox
 * nativo con accent-color se veía inconsistente entre navegadores/SO (el
 * "se buguea a veces" reportado). El <input> real sigue existiendo con el
 * mismo id/name — WooCommerce core lo necesita tal cual (checkout.js
 * engancha 'change' sobre '#ship-to-different-address input', y el form
 * envía "ship_to_different_address" por su name al hacer submit) — solo se
 * oculta VISUALMENTE (nunca display:none, para no perder el foco por
 * teclado/lectores de pantalla) y se sustituye por .sp-wsv-toggle-switch,
 * un <span> puramente decorativo animado vía el selector :checked + span.
 */
.sp-wsv-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sp-wsv-toggle-switch {
    position: relative;
    flex-shrink: 0;
    width: 42px;
    height: 24px;
    border-radius: var(--spwsv-radius-pill, 999px);
    background: var(--spwsv-border);
    transition: background-color 0.2s ease;
}

.sp-wsv-toggle-switch::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.sp-wsv-toggle-input:checked + .sp-wsv-toggle-switch {
    background: var(--spwsv-accent);
}

.sp-wsv-toggle-input:checked + .sp-wsv-toggle-switch::before {
    transform: translateX(18px);
}

.sp-wsv-toggle-input:focus-visible + .sp-wsv-toggle-switch {
    box-shadow: 0 0 0 3px var(--spwsv-accent-2-ring);
}

/*
 * "shipping_address" ya NO recibe display:none/block inline de WooCommerce
 * (initShippingAddressAnimation() en checkout-steps.js bloquea ese listener
 * nativo con stopImmediatePropagation) — se queda siempre display:block,
 * visible en el DOM/accesible; quien realmente anima la apertura/cierre es
 * .sp-wsv-shipping-address-inner, vía max-height + opacity (ver más abajo
 * el porqué de max-height en vez de grid-template-rows aquí).
 */
body.sp-wsv-simple .sp-wsv-shipping-fields .shipping_address {
    display: block ;
}

.sp-wsv-shipping-address-inner {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
}

.shipping_address.sp-wsv-shipping-address-visible .sp-wsv-shipping-address-inner {
    max-height: 2000px;
    opacity: 1;
    margin-top: var(--spwsv-space-xl);
}

body.sp-wsv-simple .sp-wsv-fields-grid {
    display: grid;
    float: none;
    grid-template-columns: 1fr 1fr;
    gap: var(--spwsv-space-lg) var(--spwsv-space-xl);
}

@media (max-width: 320px) {
    body.sp-wsv-simple .sp-wsv-fields-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {
    body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell:has(#billing_email_field, #shipping_email_field, #billing_phone_field, #shipping_phone_field) {
        grid-column: 1 / -1;
    }

    body.sp-wsv-simple .sp-wsv-fields-grid {
        column-gap: var(--spwsv-space-xs);
    }
}


body.sp-wsv-simple .sp-wsv-fields-grid::before,
body.sp-wsv-simple .sp-wsv-fields-grid::after {
    content: none;
    display: none;
}


body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell:has(.woocommerce-input-wrapper > input[type="hidden"]:only-child) {
    display: none;
}

/*
 * Campos ocultos por locale de país (woocommerce_get_country_locale,
 * 'hidden' => true — ej. "state" en países sin provincias) — WooCommerce
 * core imprime igual el <p class="form-row" style="display:none">, pero
 * SOLO ese <p> queda oculto, no el .sp-wsv-field-cell que lo envuelve (que
 * sí es el grid item real). Sin esta regla, la celda del grid sigue
 * reservando su espacio/altura aunque esté visualmente vacía — hueco en
 * blanco reportado cuando pocos campos quedan visibles tras ocultar varios
 * desde "Campos del formulario" (admin) o por configuración de locale.
 */
body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell:has(> .form-row[style*="display: none"]),
body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell:has(> .form-row[style*="display:none"]) {
    display: none;
}


.sp-wsv-field-cell {
    min-width: 0;
    float: none;
}

.sp-wsv-field-cell--wide {
    grid-column: 1 / -1;
}
body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell .form-row {
    margin: 0;
}


body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell .form-row.form-row-first,
body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell .form-row.form-row-last {
    width: 100%;
    float: none;
}

body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell .form-row {
    --spwsv-field-height: 3.125rem;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
}

body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell .form-row label {
    position: absolute;
    left: var(--spwsv-space-lg);
    right: var(--spwsv-space-lg);
    top: 0;
    z-index: 1;
    height: var(--spwsv-field-height);
    display: flex;
    align-items: center;
    padding-top: 5px;
    margin: 0;
    font-size: var(--spwsv-font-size-md);
    font-weight: 400;
    line-height: 1;
    color: var(--spwsv-muted);
    pointer-events: none;
    transform-origin: left top;
    transition: transform 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell .form-row.woocommerce-invalid label {
    color: var(--spwsv-danger);
}




body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell .form-row.form-row--floated label {
    align-items: flex-start;
    padding-top: 7px;
    transform: scale(0.78);
    transform-origin: left top;
    color: var(--spwsv-text);
    font-weight: 600;
}

body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell .form-row:focus-within.form-row--floated label {
    color: var(--spwsv-accent);
}

/* asterisco de requerido dentro del label flotante */
body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell .form-row label .required {
    color: var(--spwsv-danger);
}

@media (prefers-reduced-motion: reduce) {
    body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell .form-row label {
        transition: none;
    }
}



body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell .form-row .select2-container {
    width: 100% ;
    z-index: 0;
}

body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell .form-row .select2-container .select2-selection--single {
    min-height: var(--spwsv-field-height);
    padding-top: 14px;
    padding-bottom: 0;
    display: block;
}

body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell .form-row .select2-container .select2-selection--single .select2-selection__rendered {
    display: flex;
    align-items: center;
    height: calc(var(--spwsv-field-height) - 14px);
    line-height: 1.2;
}

body.sp-wsv-simple .sp-wsv-fields-grid .sp-wsv-field-cell .form-row .select2-container .select2-selection--single .select2-selection__arrow {
    top: 14px;
}

/* ============================================================
   Barra de acciones fija abajo en móvil (Total + Ver detalles)
   ============================================================
*/
.spwsv-sidebar-mobile-summary {
    display: none;
}

@media (max-width: 768px) {
    body.sp-wsv-simple .spwsv-sidebar-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        margin-top: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        padding-bottom: max(var(--spwsv-space-md), env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    }
    body.sp-wsv-simple .spwsv-checkout-layout {
        padding-bottom: calc(var(--spwsv-sticky-bar-height, 96px) + var(--spwsv-space-lg));
    }

    .spwsv-sidebar-mobile-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spwsv-space-sm);
        padding-bottom: var(--spwsv-space-xs);
        margin-bottom: var(--spwsv-space-xs);
        text-decoration: none;
        color: var(--spwsv-text);
    }

    .spwsv-sidebar-mobile-summary__label {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: var(--spwsv-font-size-xs);
        font-weight: 500;
        color: var(--spwsv-muted);
    }

    .spwsv-sidebar-mobile-summary__icon {
        flex-shrink: 0;
    }

    .spwsv-sidebar-mobile-summary__total {
        font-size: var(--spwsv-font-size-sm);
        font-weight: 500;
        color: var(--spwsv-muted);
    }

    .spwsv-sidebar-mobile-summary__total strong {
        font-weight: 700;
        color: var(--spwsv-text);
    }
}

/* Trust badges (accepted payment methods), shown below the checkout/place
   order button on both the cart page and the checkout sidebar. */
.spwsv-trust-badges {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--spwsv-border, #e5e7eb);
    text-align: center;
}

/* Mismo estilo que .spwsv-sidebar-title (base.css), alineado a la
   izquierda — .spwsv-trust-badges (contenedor) tiene text-align:center
   para las imágenes, así que aquí se fuerza left solo para el título. */
.spwsv-trust-badges__title {
    margin: 0 0 var(--spwsv-space-md);
    font-size: var(--spwsv-font-size-md);
    font-weight: 800;
    color: var(--spwsv-text);
    text-align: left;
}

.spwsv-trust-badges__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/*
 * "Secure, encrypted payment" — debajo del botón "Place order" (ver
 * render_secure_checkout_message(), hook woocommerce_review_order_after_submit
 * en payment.php). Texto pequeño y discreto a propósito: refuerza
 * confianza sin competir visualmente con el botón ni con los trust badges.
 */
.spwsv-secure-checkout-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding-top: var(--spwsv-space-md);
    color: var(--spwsv-muted);
    font-size: var(--spwsv-font-size-xs);
    text-align: center;
}

.spwsv-secure-checkout-message__icon {
    flex-shrink: 0;
}

/*
 * "Delivery" (fila de métodos de envío en #order_review, checkout paso 3 —
 * ver templates/woocommerce/cart/cart-shipping.php). La card en sí es un
 * <details class="sp-wsv-checkout-card"> idéntico a las del paso 2 (mismo
 * <summary>, misma animación vía initCollapsibleCards()) dentro de una
 * <td colspan="2"> — sin CSS propio para eso, ya lo cubre cards.css más
 * arriba. Lo de aquí abajo es el contenido interno: una mini-card por
 * método (icono + nombre/precio), mismo lenguaje de "seleccionado" que los
 * métodos de pago (input:checked + label en theme-common.css: borde + halo
 * de accent) — el radio real se oculta visualmente (nunca display:none,
 * sigue enfocable/operable por teclado) y el <label> completo es la card
 * clicable.
 */
/*
 * #shipping_method (el <ul>, ver template) lleva ID propia y WooCommerce
 * core (woocommerce.css) tiene selectores propios sobre ella
 * (".woocommerce ul#shipping_method li label", 1 id + 1 clase + 3 tipos) —
 * un ID gana siempre a cualquier cantidad de clases, así que sin repetir
 * esa misma ID aquí (además de nuestras clases, que sí aportan el
 * desempate) el nativo seguía ganando la pelea de especificidad pese a nuestro
 * CSS — bug reportado ("se ve mal", icono y texto en fila en vez de
 * columna, sin el resaltado de seleccionado).
 */
body.sp-wsv-simple .sp-wsv-delivery-row .woocommerce-shipping-methods {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spwsv-space-sm);
}

body.sp-wsv-simple .sp-wsv-delivery-row ul#shipping_method.woocommerce-shipping-methods li {
    flex: 1 1 8rem;
    display: flex;
}

body.sp-wsv-simple .sp-wsv-delivery-row ul#shipping_method.woocommerce-shipping-methods li input.shipping_method {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.sp-wsv-simple .sp-wsv-delivery-row ul#shipping_method.woocommerce-shipping-methods li label {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spwsv-space-xs);
    min-height: 5rem;
    padding: var(--spwsv-space-md);
    border: 1.5px solid var(--spwsv-border);
    border-radius: var(--spwsv-radius);
    background: var(--spwsv-panel-bg);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.sp-wsv-simple .sp-wsv-delivery-row ul#shipping_method.woocommerce-shipping-methods li label:hover {
    border-color: var(--spwsv-accent);
}

body.sp-wsv-simple .sp-wsv-delivery-row ul#shipping_method.woocommerce-shipping-methods li input.shipping_method:checked + label,
body.sp-wsv-simple .sp-wsv-delivery-row ul#shipping_method.woocommerce-shipping-methods li input.shipping_method[type="hidden"] + label {
    border-color: var(--spwsv-accent);
    background: var(--spwsv-panel-bg);
}

body.sp-wsv-simple .sp-wsv-delivery-row ul#shipping_method.woocommerce-shipping-methods li input.shipping_method:focus-visible + label {
    box-shadow: 0 0 0 3px var(--spwsv-accent-2-ring);
}

.sp-wsv-delivery-method-text {
    font-size: var(--spwsv-font-size-sm);
    font-weight: 600;
    color: var(--spwsv-text);
}

.sp-wsv-delivery-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--spwsv-muted, #6b7280);
}

.sp-wsv-delivery-icon svg {
    display: block;
}

/*
 * Icono de fallback de métodos de pago (ver
 * SP_WSV_Module_Checkout_Steps::get_fallback_payment_icon_html(), usado en
 * templates/woocommerce/checkout/payment-method.php cuando el gateway no
 * trae $gateway->get_icon() propio). El resto del look de mini-card
 * (borde, fondo, seleccionado) ya lo cubre theme-common.css
 * (#payment ul.payment_methods li label) — esto solo centra/dimensiona el
 * SVG, ya que esa regla solo tiene tamaño para <img> (iconos reales de
 * gateway), no para un <span> con SVG inline.
 */
.sp-wsv-payment-icon {
    display: inline-flex;
    color: var(--spwsv-muted, #6b7280);
}

.sp-wsv-payment-icon svg {
    display: block;
    max-height: 22px;
}

/* Aviso "No necesario con recogida en tienda" (ver render_shipping_fields()
   en PHP) — oculto por defecto vía el atributo [hidden], mostrado por
   initLocalPickupNotice() en sp-checkout-steps.js. */
.sp-wsv-pickup-notice {
    margin: var(--spwsv-space-sm) 0 0;
    font-size: var(--spwsv-font-size-xs);
    color: var(--spwsv-muted, #6b7280);
}

.spwsv-trust-badges__img {
    /* width en vez de height: la reset "body.sp-wsv-simple img { height: auto }"
       (sp-checkout-steps-theme-common.css) tiene más especificidad que esta
       clase y pisaba un height fijo — width no choca con esa regla. */
    width: 52px;
    max-width: 100%;
    object-fit: contain;
}