.sp-wsv-checkout-steps-wrapper[data-step="4"] .sp-wsv-sidebar-placeorder #place_order,
.sp-wsv-page-checkout #place_order{
    background: var(--spwsv-accent) !important;
    border-color: var(--spwsv-accent) !important;
    color: var(--spwsv-on-accent) !important;
}

body.sp-wsv-simple,
body.sp-wsv-simple :where(button,input,select,textarea){
    font-family: var(--spwsv-font-family);
    font-size: var(--spwsv-font-size);
    line-height: var(--spwsv-line-height);
}

body.sp-wsv-simple :where(*, *::before, *::after){
    box-sizing: border-box;
}

body.sp-wsv-simple img{
    max-width: 100%;
    height: auto;
}

body.sp-wsv-simple table{
    border-collapse: collapse;
    border-spacing: 0;
}

body.sp-wsv-simple :where(p){
    margin: 0 0 var(--spwsv-space-md);
}

body.sp-wsv-simple :where(h1,h2,h3,h4,h5,h6){
    margin: 0 0 var(--spwsv-space-md);
    color: var(--spwsv-text);
}

body.sp-wsv-simple hr{
    border: 0;
    border-top: 1px solid var(--spwsv-border-soft);
    margin: var(--spwsv-space-xl) 0;
}

body.sp-wsv-simple :where(a, a:hover, a:focus, a:active, a:visited){
    color: var(--spwsv-accent);
    text-decoration: none;
}

body.sp-wsv-simple .woocommerce :where(a, a:hover, a:focus, a:active, a:visited){
    color: var(--spwsv-accent);
    text-decoration: none;
}

body.sp-wsv-simple :where(.sp-wsv-simple-logo a, .sp-wsv-site-name-link, .sp-wsv-steps-nav a){
    color: var(--spwsv-text);
}

body.sp-wsv-simple .woocommerce form{
    margin: 0;
}

body.sp-wsv-simple .woocommerce form .form-row{
    margin: 0 0 var(--spwsv-space-md);
    width: 100%;
}

body.sp-wsv-simple .woocommerce form .form-row label{
    display: block;
    margin: 0 0 var(--spwsv-space-xs);
    font-weight: 600;
    font-size: var(--spwsv-font-size-sm);
    color: var(--spwsv-text);
}

body.sp-wsv-simple .woocommerce form .form-row .required{
    color: var(--spwsv-danger);
}

body.sp-wsv-simple .woocommerce :where(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea){
    border-radius: var(--spwsv-radius-sm) !important;
    border: 1px solid var(--spwsv-border) !important;
    background: var(--spwsv-panel-bg) !important;
    color: var(--spwsv-text) !important;
    box-shadow: none !important;
}

body.sp-wsv-simple .woocommerce form .form-row :where(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea){
    width: 100%;
    margin: 0;
    padding: var(--spwsv-space-sm) var(--spwsv-space-md);
    min-height: 3.125rem;
    outline: none;
}
body.sp-wsv-simple .woocommerce form .form-row :where(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea):hover{

    border: 1px solid blue;
}


body.sp-wsv-simple .woocommerce form .form-row textarea{
    min-height: calc(var(--spwsv-control-min-height) * 2);
    resize: vertical;
}

body.sp-wsv-simple .woocommerce form .form-row :where(input.input-text, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea):focus{
    border-color: var(--spwsv-accent) !important;
    box-shadow: 0 0 0 3px var(--spwsv-accent-2-ring) !important;
}

body.sp-wsv-simple .woocommerce .woocommerce-invalid :where(input,select,textarea){
    border-color: var(--spwsv-danger);
}

body.sp-wsv-simple .woocommerce input[type="checkbox"],
body.sp-wsv-simple .woocommerce input[type="radio"]{
    accent-color: var(--spwsv-accent);
}

body.sp-wsv-simple .woocommerce :where(a.button, button.button, input.button){
    border-radius: var(--spwsv-radius-sm);
    border: 1px solid var(--spwsv-border);
    background: var(--spwsv-panel-bg);
    color: var(--spwsv-text);
    box-shadow: none;
    font-weight: 700;
    padding: var(--spwsv-space-sm) var(--spwsv-space-lg);
    line-height: var(--spwsv-line-height-tight);
    min-height: var(--spwsv-button-min-height);
}

body.sp-wsv-simple .woocommerce :where(a.button.alt, button.button.alt, input.button.alt, a.checkout-button){
    background: var(--spwsv-accent);
    border-color: var(--spwsv-accent);
    color: var(--spwsv-on-accent);
}

body.sp-wsv-simple .woocommerce table{
    width: 100%;
}

body.sp-wsv-simple .woocommerce table.shop_table{
    background: transparent;
    border: 0;
    border-radius: 0;
    color: inherit;
}

body.sp-wsv-simple .woocommerce table.shop_table th,
body.sp-wsv-simple .woocommerce table.shop_table td{
    background: transparent;
    color: inherit;
    border-color: var(--spwsv-border-soft);
    padding: var(--spwsv-space-sm) 0;
}

body.sp-wsv-simple .woocommerce table.shop_table th.product-total{
    text-align: right;
}

body.sp-wsv-simple .woocommerce table.shop_table tbody:first-child tr:first-child td,
body.sp-wsv-simple .woocommerce table.shop_table tbody:first-child tr:first-child th{
    border-top: 0;
}

body.sp-wsv-simple .woocommerce-checkout #payment,
body.sp-wsv-simple .woocommerce-checkout #payment ul.payment_methods,
body.sp-wsv-simple .woocommerce-checkout #payment div.payment_box,
body.sp-wsv-simple.woocommerce-order-pay #payment,
body.sp-wsv-simple.woocommerce-order-pay #payment div.payment_box,
body.sp-wsv-simple.woocommerce-order-pay #payment ul.payment_methods{
    background: transparent;
    box-shadow: none;
}

body.sp-wsv-simple .woocommerce-checkout #payment ul.payment_methods{
    padding: 0;
    margin: 0 0 var(--spwsv-space-md);
    border: 0;
    list-style: none;
}

/*
 * Fila de "pastillas" de método de pago (estilo Klarna/Simpler). Cada
 * <li> es un item de la fila con ancho igual (flex:1). El contenido
 * dinámico (div.payment_box) del método activo se traslada por JS
 * (checkout-steps.js, initPaymentMethodsLayout) fuera del <li>, a
 * .sp-wsv-payment-box-slot — un contenedor hermano del <ul> que ya
 * ocupa el ancho completo del panel, así el texto/campos no quedan
 * limitados al ancho estrecho de la columna del <li>. La clase
 * "sp-wsv-payment-method-active" solo marca visualmente la pastilla
 * seleccionada, ya no controla el ancho del payment_box.
 */
body.sp-wsv-simple .woocommerce-checkout #payment ul.payment_methods,
body.sp-wsv-simple.woocommerce-order-pay #payment ul.payment_methods{
    display: flex;
    flex-wrap: wrap;
    gap: var(--spwsv-space-sm);
}

body.sp-wsv-simple .woocommerce-checkout #payment ul.payment_methods li,
body.sp-wsv-simple.woocommerce-order-pay #payment ul.payment_methods li{
    position: relative;
    flex: 1 1 0;
    min-width: 84px;
    margin: 0;
}

/* El payment_box del método activo ya NO vive dentro de su <li>
   (se traslada por JS a .sp-wsv-payment-box-slot, ver
   checkout-steps.js), así que el <li> activo se queda con el mismo
   tamaño de pastilla que el resto — todas siguen en una sola fila. */

body.sp-wsv-simple .woocommerce-checkout #payment ul.payment_methods li input[type="radio"],
body.sp-wsv-simple.woocommerce-order-pay #payment ul.payment_methods li input[type="radio"]{
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

body.sp-wsv-simple .woocommerce-checkout #payment ul.payment_methods li label,
body.sp-wsv-simple.woocommerce-order-pay #payment ul.payment_methods li label{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 64px;
    padding: var(--spwsv-space-sm) 6px;
    border: 1.5px solid var(--spwsv-border);
    border-radius: var(--spwsv-radius-sm);
    background: var(--spwsv-panel-bg);
    text-align: center;
    font-size: var(--spwsv-font-size-xs);
    font-weight: 600;
    line-height: 1.2;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

body.sp-wsv-simple .woocommerce-checkout #payment ul.payment_methods li label img,
body.sp-wsv-simple.woocommerce-order-pay #payment ul.payment_methods li label img{
    max-height: 22px;
    width: auto;
    margin: 0;
}

body.sp-wsv-simple .woocommerce-checkout #payment ul.payment_methods li label:hover,
body.sp-wsv-simple.woocommerce-order-pay #payment ul.payment_methods li label:hover{
    border-color: var(--spwsv-accent);
}

body.sp-wsv-simple .woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked + label,
body.sp-wsv-simple.woocommerce-order-pay #payment ul.payment_methods li input[type="radio"]:checked + label{
    border-color: var(--spwsv-accent);
    box-shadow: 0 0 0 1px var(--spwsv-accent);
    background: var(--spwsv-panel-bg);
}

body.sp-wsv-simple .woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:focus-visible + label,
body.sp-wsv-simple.woocommerce-order-pay #payment ul.payment_methods li input[type="radio"]:focus-visible + label{
    box-shadow: 0 0 0 3px var(--spwsv-accent-2-ring, rgba(0,0,0,.15));
}

/*
 * Contenido dinámico del método de pago (instrucciones de "Cash on
 * delivery", campos de Bizum, iframe de Redsys, etc.). checkout-steps.js
 * lo traslada del <li> activo a .sp-wsv-payment-box-slot (hermano del
 * <ul>, ancho completo del panel — sin el hack de 100vw que rompía el
 * scroll horizontal y el position:fixed de la barra inferior). Se le
 * da su propio estilo de "tarjeta" (fondo suave, borde) para que se
 * note que es lo que cambia según el método elegido.
 */
body.sp-wsv-simple .woocommerce-checkout #payment .sp-wsv-payment-box-slot div.payment_box,
body.sp-wsv-simple.woocommerce-order-pay #payment .sp-wsv-payment-box-slot div.payment_box{
    width: 100%;
    margin-top: 0;
    padding: var(--spwsv-space-md);
    border: 1px solid var(--spwsv-border-soft);
    border-radius: var(--spwsv-radius-sm);
    background: var(--spwsv-border-soft);
    color: var(--spwsv-text);
}

.sp-wsv-payment-box-slot{
    margin-top: var(--spwsv-space-sm);
}

.sp-wsv-payment-box-slot:empty{
    margin-top: 0;
}

/* Fade-in-up al mostrar el payment_box del método recién elegido
   (checkout-steps.js re-dispara esta clase en cada cambio). */
@keyframes sp-wsv-payment-box-fade-in-up{
    from{
        opacity: 0;
        transform: translateY(8px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

.sp-wsv-payment-box-fade-in{
    animation: sp-wsv-payment-box-fade-in-up .25s ease-out;
}

@media (prefers-reduced-motion: reduce){
    .sp-wsv-payment-box-fade-in{
        animation: none;
    }
}

@media screen and (min-width: 769px){
    /* En escritorio: misma pastilla, pero apiladas en una sola columna
       en vez de en fila. */
    body.sp-wsv-simple .woocommerce-checkout #payment ul.payment_methods,
    body.sp-wsv-simple.woocommerce-order-pay #payment ul.payment_methods{
        flex-direction: column;
    }

    body.sp-wsv-simple .woocommerce-checkout #payment ul.payment_methods li,
    body.sp-wsv-simple.woocommerce-order-pay #payment ul.payment_methods li{
        flex-basis: auto;
        min-width: 0;
    }

    body.sp-wsv-simple .woocommerce-checkout #payment ul.payment_methods li label,
    body.sp-wsv-simple.woocommerce-order-pay #payment ul.payment_methods li label{
        flex-direction: row;
        justify-content: flex-start;
        min-height: 48px;
        padding: var(--spwsv-space-sm) var(--spwsv-space-md);
    }

    /* En columna todos los <li> ya son 100% de ancho de por sí, así
       que la pastilla activa puede estirarse como las demás. */
    body.sp-wsv-simple .woocommerce-checkout #payment ul.payment_methods li.sp-wsv-payment-method-active > label,
    body.sp-wsv-simple.woocommerce-order-pay #payment ul.payment_methods li.sp-wsv-payment-method-active > label{
        align-self: stretch;
        width: 100%;
        min-width: 0;
    }
}

body.sp-wsv-simple .woocommerce-checkout #payment div.payment_box,
body.sp-wsv-simple.woocommerce-order-pay #payment div.payment_box{
    margin: var(--spwsv-space-sm) 0 0;
    padding: var(--spwsv-space-md);
    border: 1px solid var(--spwsv-border-soft);
    border-radius: var(--spwsv-radius-sm);
    background: var(--spwsv-border-soft);
    color: var(--spwsv-text);
}

body.sp-wsv-simple .woocommerce-checkout #payment div.payment_box::before,
body.sp-wsv-simple.woocommerce-order-pay #payment div.payment_box::before {
    border: 1em solid var(--spwsv-border-soft);
    border-right-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
}

body.sp-wsv-simple .select2-container--default .select2-selection--single{
    border-radius: var(--spwsv-radius-sm);
    border: 1px solid var(--spwsv-border);
    background: var(--spwsv-panel-bg);
    min-height: var(--spwsv-control-min-height);
    display: flex;
    align-items: center;
}

body.sp-wsv-simple .select2-container--default .select2-selection--single .select2-selection__rendered{
    color: var(--spwsv-text);
    line-height: 1;
    padding-left: var(--spwsv-space-md);
    padding-right: calc(var(--spwsv-space-md) * 2);
}

body.sp-wsv-simple .select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 100%;
    right: var(--spwsv-space-sm);
}

body.sp-wsv-simple .woocommerce-additional-fields h3,
body.sp-wsv-simple .woocommerce-shipping-fields h3,
body.sp-wsv-simple .woocommerce-billing-fields h3,
body.sp-wsv-simple .sp-wsv-step-panel h2{
    margin-top: 12px;
    margin-bottom: 20px;
}

.woocommerce .quantity .qty{
    width: 5.631em;
}

body.sp-wsv-simple.sp-wsv-page-cart .woocommerce-cart-form .coupon #coupon_code{
    height: 43px;
    width: 160px;
}

body.sp-wsv-simple .woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received{
    text-align: center;
    margin-bottom: var(--spwsv-space-xl);
    margin-top: var(--spwsv-space-xl);
    font-size: var(--spwsv-font-size-xl);
    font-weight: 800;
}

body.sp-wsv-simple.woocommerce-order-received :where(h1,h2,h3,h4,h5,h6){
    font-size: var(--spwsv-font-size-xl);
}

/* --- Página de agradecimiento: hero con check, estilo Simpler --- */

body.sp-wsv-simple .sp-wsv-thankyou-hero{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spwsv-space-md);
}

body.sp-wsv-simple .sp-wsv-thankyou-check{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    flex-shrink: 0;
}

body.sp-wsv-simple .sp-wsv-thankyou-check svg{
    width: 30px;
    height: 30px;
}

body.sp-wsv-simple .sp-wsv-thankyou-hero-text{
    display: block;
}

/* Overview (nº pedido, fecha, email, total, método de pago): de lista
   en línea a columna de "boxes", como en la referencia de Simpler. */
body.sp-wsv-simple.woocommerce-order-received ul.woocommerce-order-overview{
    display: flex;
    flex-direction: column;
    gap: var(--spwsv-space-sm);
    max-width: 480px;
    margin: 0 auto var(--spwsv-space-xl);
    padding: 0;
    list-style: none;
}

body.sp-wsv-simple.woocommerce-order-received ul.woocommerce-order-overview li{
    margin: 0;
    padding: var(--spwsv-space-sm) var(--spwsv-space-md);
    border: 1px solid var(--spwsv-border-soft);
    border-radius: var(--spwsv-radius-sm);
    background: var(--spwsv-panel-bg);
    font-size: var(--spwsv-font-size-sm);
}

body.sp-wsv-simple.woocommerce-order-received ul.woocommerce-order-overview li strong{
    display: block;
    margin-top: 2px;
    font-size: var(--spwsv-font-size);
}

/* Tabla "Order details" (productos del pedido) como card blanca */
body.sp-wsv-simple.woocommerce-order-received table.woocommerce-table--order-details{
    max-width: 480px;
    margin: 0 auto var(--spwsv-space-xl);
    border: 1px solid var(--spwsv-border-soft);
    border-radius: var(--spwsv-radius-sm);
    overflow: hidden;
}

/* Caja de ayuda tras la confirmación — misma card que .sp-order-summary-card
   (ver más abajo en este archivo), fuera de .sp-thankyou-additional-content
   para no mezclarse con Order details/direcciones (ver thankyou.php). */
.sp-checkout-thankyou-wrapper .sp-wsv-thankyou-help{
    background: var(--sp-card-bg);
    border-radius: 20px;
    padding: 32px 40px;
    box-shadow: 0 8px 30px var(--sp-shadow);
    border: 1px solid var(--sp-border);
    /* Mismo gap que entre el resto de cards (16px, ver .sp-order-summary-card
       más abajo) — antes tenía margin-top:40px propio y quedaba con más
       aire que el resto, rompiendo la cuadrícula uniforme. */
    margin-top: 16px;
    margin-bottom: 16px;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sp-checkout-thankyou-wrapper .sp-wsv-thankyou-help:hover,
.sp-checkout-thankyou-wrapper .sp-wsv-thankyou-help:focus-within{
    border-color: var(--spwsv-accent);
    box-shadow: 0 0 0 3px var(--spwsv-accent-2-ring);
}

.sp-checkout-thankyou-wrapper .sp-wsv-thankyou-help__title{
    font-size: 18px;
    font-weight: 600;
    color: var(--sp-text-main);
    margin: 0 0 6px;
}

.sp-checkout-thankyou-wrapper .sp-wsv-thankyou-help__desc{
    color: var(--sp-text-muted);
    font-size: 14px;
    margin: 0 0 20px;
}

.sp-checkout-thankyou-wrapper .sp-wsv-thankyou-help__actions{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.sp-checkout-thankyou-wrapper .sp-wsv-thankyou-help__link{
    padding: 10px 20px;
    border: 1px solid var(--sp-border);
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    color: var(--sp-text-main);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.sp-checkout-thankyou-wrapper .sp-wsv-thankyou-help__link:hover{
    border-color: var(--spwsv-accent);
    color: var(--spwsv-accent);
}

.sp-checkout-thankyou-wrapper .sp-wsv-thankyou-back{
    text-align: center;
    margin-top: 16px;
}

.sp-checkout-thankyou-wrapper .sp-wsv-thankyou-back .button{
    display: inline-block;
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
}

@media screen and (max-width: 768px) {
    body.sp-wsv-simple.woocommerce-order-received .addresses{
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    body.sp-wsv-simple .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,
    body.sp-wsv-simple .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
        width: 100%;
    }

    body.sp-wsv-simple .woocommerce-order-pay #place_order{
        width: 100%;
        margin-top: 16px;
    }
}

body.sp-wsv-simple p.sp-wsv-checkout-login-required-msg{
    font-size: var(--spwsv-text-xl);
    color: var(--spwsv-text);
    font-weight: 600;
    line-height: 1.5;
    margin-top: var(--spwsv-space-md);
    margin-bottom: var(--spwsv-space-md);
}

body.sp-wsv-simple .woocommerce form.login{
    background: var(--spwsv-panel-bg);
}


/* THANK YOU PAGE */
/* ========================================================
   ESTRUCTURA GENERAL Y ESPACIADOS (Sin forzar tipografía)
   ======================================================== */
.sp-checkout-thankyou-wrapper {
    max-width: 760px;
    margin: 60px auto;
    color: var(--sp-text-main);
}

.sp-thankyou-success-header {
    text-align: center;
    margin-bottom: 48px;
}

.sp-thankyou-title {
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--sp-text-main);
}

.sp-thankyou-subtitle {
    font-size: 17px;
    color: var(--sp-text-muted);
    margin: 0;
    opacity: 0.8;
}

/* ========================================================
   ANIMACIÓN DEL CHECK (VECTORIAL)
   ======================================================== */
.sp-success-icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.sp-checkmark {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: block;
    stroke-width: 2.5;
    stroke: var(--sp-success-green);
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px var(--sp-success-green);
    animation: sp-fill .4s ease-in-out .4s forwards, sp-scale .3s ease-in-out .9s both;
}

.sp-checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2.5;
    stroke-miterlimit: 10;
    stroke: var(--sp-success-green);
    fill: none;
    animation: sp-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.sp-checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: sp-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes sp-stroke {
    100% { stroke-dashoffset: 0; }
}
@keyframes sp-scale {
    0%, 100% { transform: none; }
    50% { transform: scale3d(1.1, 1.1, 1); }
}
@keyframes sp-fill {
    100% { box-shadow: inset 0px 0px 0px 35px var(--sp-success-bg); }
}

/* ========================================================
   CARDS DE LA THANK YOU PAGE — mismo lenguaje visual que
   .sp-wsv-checkout-card (cards.css): cada bloque (resumen, order details,
   billing/shipping) es su propia card independiente, no un panel único.
   Hover reutiliza el mismo tratamiento que :focus-within en el checkout
   (borde acento + halo), en vez de un hover distinto ad-hoc.
   ======================================================== */
/*
 * Animación de entrada (fade + slide-up) — mismo keyframe que
 * .sp-wsv-checkout-card en cards.css, redefinido aquí porque
 * theme-common.css se encola ANTES que cards.css (ver enqueue_assets()) y
 * no se puede depender de que el otro archivo ya esté parseado.
 */
@keyframes sp-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.sp-order-summary-card,
.sp-thankyou-additional-content > details,
.sp-checkout-thankyou-wrapper .sp-wsv-thankyou-help,
.sp-checkout-thankyou-wrapper .sp-wsv-thankyou-back {
    animation: sp-fade-in-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sp-order-summary-card:nth-of-type(1) { animation-delay: 0.05s; }
.sp-thankyou-additional-content > details:nth-child(1) { animation-delay: 0.1s; }
.sp-thankyou-additional-content > details:nth-child(2) { animation-delay: 0.18s; }
.sp-thankyou-additional-content > details:nth-child(3) { animation-delay: 0.26s; }
.sp-checkout-thankyou-wrapper .sp-wsv-thankyou-help { animation-delay: 0.34s; }
.sp-checkout-thankyou-wrapper .sp-wsv-thankyou-back { animation-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
    .sp-order-summary-card,
    .sp-thankyou-additional-content > details,
    .sp-checkout-thankyou-wrapper .sp-wsv-thankyou-help,
    .sp-checkout-thankyou-wrapper .sp-wsv-thankyou-back {
        animation: none;
    }
}

.sp-order-summary-card,
.sp-thankyou-additional-content > details {
    background: var(--sp-card-bg);
    border-radius: 20px;
    padding: 0 40px;
    box-shadow: 0 8px 30px var(--sp-shadow);
    border: 1px solid var(--sp-border);
    margin-bottom: 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sp-order-summary-card:last-child,
.sp-thankyou-additional-content > details:last-child {
    margin-bottom: 0;
}

/*
 * :focus-within (no :focus-visible) a propósito para inputs reales dentro
 * de la card — PERO el <summary> también es focusable de forma nativa y
 * un click de RATÓN lo deja enfocado sin soltar el foco después del
 * toggle, así que ":focus-within" se quedaba "pegado" en verde/acento
 * indefinidamente tras colapsar/expandir con click (bug reportado: el
 * borde no se quitaba nunca). Se separa en dos reglas: inputs reales usan
 * :focus-within (irrelevante aquí, no hay inputs, pero por si se añaden);
 * el summary usa :focus-visible, que el navegador SOLO activa con
 * navegación por teclado (Tab/Enter), nunca con click de ratón — mismo
 * resultado de accesibilidad sin el efecto "atascado" visual.
 */
.sp-order-summary-card:hover,
.sp-thankyou-additional-content > details:hover,
.sp-order-summary-card:has(> .sp-card-summary-toggle:focus-visible),
.sp-thankyou-additional-content > details:has(> .sp-card-summary-toggle:focus-visible) {
    border-color: var(--spwsv-accent);
    box-shadow: 0 0 0 3px var(--spwsv-accent-2-ring);
}

.sp-order-details-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-detail-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.sp-detail-label {
    font-size: 12px;
    color: var(--sp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.sp-detail-value {
    font-size: 18px;
    color: var(--sp-text-main);
    font-weight: 500;
    word-break: break-word;
}

.sp-thankyou-additional-content {
    color: var(--sp-text-main);
}

/* ========================================================
   RESPONSIVE MÓVIL
   ======================================================== */
@media (max-width: 650px) {
    .sp-order-details-grid {
        flex-direction: column;
        gap: 20px;
    }

    .sp-order-summary-card,
    .sp-thankyou-additional-content > details,
    .sp-checkout-thankyou-wrapper .sp-wsv-thankyou-help {
        padding-left: 24px;
        padding-right: 24px;
    }

    .sp-order-summary-card > .sp-card-summary-toggle,
    .sp-thankyou-additional-content details > .sp-card-summary-toggle {
        min-height: 64px;
    }

    .sp-card-body {
        padding-bottom: 24px;
    }

    .sp-detail-item {
        border-bottom: 1px solid var(--sp-border);
        padding-bottom: 16px;
    }

    .sp-detail-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}
/* ========================================================
   TABLA DE DETALLES DEL PEDIDO (WOOCOMMERCE NATIVO)
   La línea de producto va dentro de su propia mini-card (fondo sutil), y
   el bloque de totales (Subtotal/Shipping/Total/Payment method) se agrupa
   visualmente aparte, con la fila real de "Total" (marcada con la clase
   .sp-order-total-row por thankyou.js — no siempre es la última fila del
   tfoot: "Payment method" suele venir después) destacada en acento.
   ======================================================== */
.sp-thankyou-additional-content table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    border: none;
    border-radius: 0;
}

.sp-thankyou-additional-content table.shop_table thead {
    display: none;
}

.sp-thankyou-additional-content table.shop_table tbody {
    display: block;
    margin-bottom: 20px;
}

.sp-thankyou-additional-content table.shop_table tbody tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 10px;
    background: var(--spwsv-border-soft);
    border-radius: 14px;
}

.sp-thankyou-additional-content table.shop_table tbody tr:last-child {
    margin-bottom: 0;
}

.sp-thankyou-additional-content table.shop_table tfoot {
    display: block;
}

.sp-thankyou-additional-content table.shop_table tfoot tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.sp-thankyou-additional-content table.shop_table th,
.sp-thankyou-additional-content table.shop_table td {
    padding: 10px 0;
    border: none;
    color: var(--sp-text-main);
    text-align: left;
    background: transparent;
    flex: 0 0 auto;
}

.sp-thankyou-additional-content table.shop_table tbody th,
.sp-thankyou-additional-content table.shop_table tbody td {
    padding: 0;
}

/* Nombre del producto y el "x 1" */
.sp-thankyou-additional-content table.shop_table td.product-name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-thankyou-additional-content table.shop_table td.product-name a {
    color: var(--sp-text-main);
    text-decoration: none;
    font-weight: 600;
}

.sp-thankyou-additional-content table.shop_table td.product-name strong.product-quantity {
    color: var(--sp-text-muted);
    font-weight: 500;
    font-size: 12px;
    background: var(--sp-card-bg);
    border: 1px solid var(--sp-border);
    border-radius: 999px;
    padding: 2px 8px;
}

.sp-thankyou-additional-content table.shop_table td.product-total {
    font-weight: 700;
    white-space: nowrap;
}

/* Subtotal / Envío / Total / método de pago: fila etiqueta ↔ valor, tenue */
.sp-thankyou-additional-content table.shop_table tfoot tr {
    border-bottom: 1px dashed var(--sp-border);
    padding: 10px 0;
}

.sp-thankyou-additional-content table.shop_table tfoot th {
    font-weight: 400;
    color: var(--sp-text-muted);
    flex: 1 1 auto;
}

.sp-thankyou-additional-content table.shop_table tfoot td {
    font-weight: 600;
}

/* Fila real de "Total" (ver thankyou.js) — destacada con el acento del
   checkout, independientemente de si es la última fila del tfoot o no. */
.sp-thankyou-additional-content table.shop_table tfoot tr.sp-order-total-row {
    border-bottom: none;
    margin-top: 6px;
    padding-top: 16px;
}

.sp-thankyou-additional-content table.shop_table tfoot tr.sp-order-total-row th,
.sp-thankyou-additional-content table.shop_table tfoot tr.sp-order-total-row td {
    font-size: 20px;
    font-weight: 700;
}

.sp-thankyou-additional-content table.shop_table tfoot tr.sp-order-total-row td {
    color: var(--spwsv-accent);
}

.sp-thankyou-additional-content table.shop_table tfoot tr:last-child {
    border-bottom: none;
}

/* ========================================================
   CAJAS DE DIRECCIÓN (BILLING / SHIPPING)
   Cada columna es su propia mini-card con icono, en vez de un bloque de
   texto gris plano — mismo radio/borde que el resto de cards de la página.
   ======================================================== */
.sp-thankyou-additional-content .woocommerce-customer-details .col2-set {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.sp-thankyou-additional-content .woocommerce-customer-details .col2-set .col-1,
.sp-thankyou-additional-content .woocommerce-customer-details .col2-set .col-2 {
    flex: 1;
    min-width: 220px;
    width: 100%;
}

/* Subtítulo de columna ("Billing address" / "Shipping address") — cuando
   hay una sola dirección (sin col2-set) no hay <h2> real que mostrar aquí:
   el título de la card ("Addresses", ver thankyou.js) ya lo cubre. */
.sp-thankyou-additional-content .woocommerce-customer-details .woocommerce-column__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sp-text-muted);
    margin: 0 0 12px;
}

.sp-thankyou-additional-content .woocommerce-customer-details .woocommerce-column__title::before {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    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%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%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%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sp-thankyou-additional-content .woocommerce-customer-details address {
    border: 1px solid var(--sp-border);
    border-radius: 14px;
    padding: 18px 20px;
    background: var(--spwsv-border-soft);
    font-style: normal;
    line-height: 1.7;
    color: var(--sp-text-main);
    margin-bottom: 0;
    font-size: 14px;
}

.sp-thankyou-additional-content .woocommerce-customer-details address .woocommerce-customer-details--phone,
.sp-thankyou-additional-content .woocommerce-customer-details address .woocommerce-customer-details--email {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px dashed var(--sp-border);
    color: var(--sp-text-muted);
}

/* ========================================================
   CONFETI SOBRE EL CHECK
   ======================================================== */
.sp-confetti-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

.sp-confetti-piece {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 10px;
    opacity: 0;
    will-change: transform, opacity;
    animation-name: sp-confetti-fly;
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1);
    animation-fill-mode: forwards;
}

@keyframes sp-confetti-fly {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--sp-confetti-x, 0), var(--sp-confetti-y, -120px)) rotate(var(--sp-confetti-r, 360deg));
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-checkmark,
    .sp-checkmark-circle,
    .sp-checkmark-check,
    .sp-confetti-piece {
        animation: none !important;
    }
}

/* ========================================================
   CARDS COLAPSABLES (resumen de pedido + bloques nativos WC)
   Mismo patrón que .sp-wsv-checkout-card en cards.css: <details> se deja
   siempre con [open] puesto (el navegador nunca debe aplicar su propio
   display:none nativo, que cortaría la transición a medio camino) y es la
   clase "is-collapsed" (JS, ver thankyou.js) la que decide el estado visual
   animando grid-template-rows 1fr↔0fr en el wrapper interno.
   ======================================================== */
.sp-card-summary-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /*
     * min-height (no padding vertical simétrico) para dar altura clicable
     * completa al título: con padding:32px 0 el área de click quedaba bien
     * cuando la card estaba cerrada, pero al abrirla sumaba 32px de más
     * entre el título y el contenido (el summary + el padding-top del
     * .sp-card-body se acumulaban). Con min-height + align-items:center el
     * texto queda centrado en esa franja tanto abierta como cerrada, sin
     * inflar el espacio hacia el contenido cuando está abierta.
     */
    min-height: 76px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.sp-card-summary-toggle::-webkit-details-marker {
    display: none;
}

.sp-card-chevron {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    transform: rotate(180deg);
}

.is-collapsed > .sp-card-summary-toggle .sp-card-chevron {
    transform: rotate(0deg);
}

/* grid-template-rows sí es animable con transition (a diferencia de
   max-height cuando origen/destino es "none"/"auto") — ver cards.css. */
.sp-card-body-wrap {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
}

.is-collapsed > .sp-card-body-wrap {
    grid-template-rows: 0fr;
    opacity: 0;
}

.sp-card-body {
    min-height: 0;
    overflow: hidden;
    /* padding-top: separa del título ahora que .sp-card-summary-toggle usa
       min-height en vez de padding-bottom propio (ver más arriba). */
    padding-top: 4px;
    padding-bottom: 32px;
}

/*
 * Con la card colapsada, .sp-card-body-wrap ya va a grid-template-rows:0fr
 * (arriba), pero eso NO pone a 0 el padding vertical de .sp-card-body — el
 * padding de un grid item no se colapsa aunque su fila mida 0fr, solo se
 * recorta con overflow:hidden mientras algo de esa altura siga "reservada"
 * por line-height/padding acumulados. Resultado visible: la card cerrada
 * quedaba más alta de los 76px del summary, con el texto pegado arriba de
 * ese sobrante en vez de centrado en la card completa. Se anula el padding
 * explícitamente en colapsado para que la altura cerrada sea EXACTAMENTE
 * la del summary.
 */
.is-collapsed > .sp-card-body-wrap .sp-card-body {
    padding-top: 0;
    padding-bottom: 0;
}

/* Título de cada card de thank you (resumen + bloques nativos WC) — mismo
   tamaño/peso que .sp-wsv-checkout-card__title del checkout. El padding
   vertical (32px 0, ver .sp-card-summary-toggle) ya separa del borde
   superior de la card; aquí solo queda el tamaño/peso del texto. */
.sp-order-summary-card > .sp-card-summary-toggle,
.sp-thankyou-additional-content details > .sp-card-summary-toggle {
    font-size: 18px;
    font-weight: 600;
    color: var(--sp-text-main);
    letter-spacing: -0.01em;
}