/**
 * SuperPyme Checkout Blocks - Components
 * UI components: header, footer, benefits, auth, quantity selector, coupons
 */

/* ============================================
   BOTON REALIZAR PEDIDO - v1.8.41
   Con ícono de candado y efecto shimmer
   ============================================ */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
    background: var(--spcb-accent);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: var(--spcb-radius);
    border: none;
    width: 100%;
    cursor: pointer;
    transition: background var(--spcb-transition), transform 0.15s ease;
    position: relative;
    overflow: hidden;
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
    background: var(--spcb-accent-hover);
    transform: translateY(-1px);
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button:active {
    transform: translateY(0);
}

/* Ícono de candado SVG antes del texto */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button__text::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Efecto shimmer (reflejo de luz) */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 60%,
        transparent 100%
    );
    animation: spcb-shimmer 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes spcb-shimmer {
    0% {
        left: -100%;
    }
    20% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

/* Pausar shimmer en hover para no distraer */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover::after {
    animation-play-state: paused;
    opacity: 0;
}

/* ============================================
   STORE HEADER (Logo + Contact Info)
   ============================================ */
.spcb-store-header {
    text-align: center;
    padding: 20px 0 25px;
    margin-bottom: 10px;
}

.spcb-store-logo {
    display: inline-block;
    margin-bottom: 12px;
}

.spcb-store-logo img {
    max-width: var(--spcb-logo-width, 200px);
    height: auto;
    object-fit: contain;
}

/* Contact info */
.spcb-store-contact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.spcb-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.spcb-contact-whatsapp {
    background: #dcfce7;
    color: #15803d;
}

.spcb-contact-whatsapp:hover {
    background: #bbf7d0;
    color: #166534;
}

.spcb-contact-email {
    background: #e0f2fe;
    color: #0369a1;
}

.spcb-contact-email:hover {
    background: #bae6fd;
    color: #0c4a6e;
}

.spcb-contact-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .spcb-store-header {
        padding: 10px 0 20px;
        margin-top: -20px; /* Subir header en móvil sin cortar el logo */
    }

    .spcb-store-logo {
        margin-bottom: 10px;
    }

    .spcb-store-logo img {
        max-width: min(var(--spcb-logo-width, 160px), 80vw);
        height: auto;
    }

    .spcb-store-contact {
        gap: 10px;
    }

    .spcb-contact-link {
        padding: 5px 10px;
        font-size: 12px;
    }

    .spcb-contact-icon {
        width: 14px;
        height: 14px;
    }
}

/* ============================================
   CHECKOUT NOTICE (INFORMATIVE TEXT)
   ============================================ */
.spcb-checkout-notice {
    margin-top: 15px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
    border: 1px solid #fbbf24;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: #78350f;
    text-align: left;
}

.spcb-checkout-notice h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
}

.spcb-checkout-notice p {
    margin: 0 0 8px 0;
}

.spcb-checkout-notice p:last-child {
    margin-bottom: 0;
}

.spcb-checkout-notice strong,
.spcb-checkout-notice b {
    font-weight: 600;
    color: #92400e;
}

.spcb-checkout-notice em,
.spcb-checkout-notice i {
    font-style: italic;
}

.spcb-checkout-notice a {
    color: #b45309;
    text-decoration: underline;
}

.spcb-checkout-notice a:hover {
    color: #92400e;
}

@media (max-width: 600px) {
    .spcb-checkout-notice {
        padding: 10px 12px;
        font-size: 12px;
    }

    .spcb-checkout-notice h4 {
        font-size: 13px;
    }
}

/* ============================================
   QUANTITY SELECTOR IN ORDER SUMMARY
   ============================================ */

.spcb-qty-control {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e5e5;
}

.spcb-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
}

.spcb-qty-btn:hover:not(:disabled) {
    border-color: var(--spcb-accent, #008060);
    color: var(--spcb-accent, #008060);
    background: var(--spcb-accent-light, rgba(0, 128, 96, 0.08));
}

.spcb-qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.spcb-qty-btn svg {
    display: block;
}

.spcb-qty-input {
    width: 40px;
    height: 28px;
    padding: 0 4px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #1f2937;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    -moz-appearance: textfield;
}

.spcb-qty-input::-webkit-outer-spin-button,
.spcb-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.spcb-qty-input:focus {
    outline: none;
    border-color: var(--spcb-accent, #008060);
    box-shadow: 0 0 0 2px var(--spcb-accent-light, rgba(0, 128, 96, 0.1));
}

.spcb-qty-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.15s ease;
}

.spcb-qty-remove:hover {
    color: #ef4444;
    background: #fef2f2;
    border-color: #fecaca;
}

.spcb-qty-remove svg {
    display: block;
}

/* Loading state for order summary */
.wc-block-components-order-summary.spcb-loading {
    opacity: 0.6;
    pointer-events: none;
}

.wc-block-components-order-summary.spcb-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid #e5e7eb;
    border-top-color: var(--spcb-accent, #008060);
    border-radius: 50%;
    animation: spcb-spin 0.8s linear infinite;
}

@keyframes spcb-spin {
    to { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .spcb-qty-control {
        gap: 3px;
    }

    .spcb-qty-btn {
        width: 26px;
        height: 26px;
    }

    .spcb-qty-input {
        width: 36px;
        height: 26px;
        font-size: 12px;
    }

    .spcb-qty-remove {
        width: 26px;
        height: 26px;
        margin-left: 4px;
    }
}

/* ============================================
   POLICY LINKS FOOTER
   ============================================ */
.spcb-policy-footer {
    margin-top: 20px;
    text-align: center;
}

.spcb-policy-divider {
    height: 1px;
    background: #e5e5e5;
    margin-bottom: 16px;
}

.spcb-policy-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.spcb-policy-links a {
    font-size: 12px;
    color: var(--spcb-text-muted, #666666);
    text-decoration: none;
    transition: color 0.2s ease;
}

.spcb-policy-links a:hover {
    color: var(--spcb-accent, #008060);
    text-decoration: underline;
}

.spcb-policy-separator {
    color: #d1d5db;
    font-size: 12px;
    line-height: 1;
}

@media (max-width: 600px) {
    .spcb-policy-footer {
        margin-top: 16px;
    }

    .spcb-policy-divider {
        margin-bottom: 12px;
    }

    .spcb-policy-links {
        gap: 6px;
    }

    .spcb-policy-links a {
        font-size: 11px;
    }

    .spcb-policy-separator {
        font-size: 11px;
    }
}

/* ============================================
   MODAL ELIMINAR PRODUCTO (v1.8.51)
   ============================================ */

.spcb-remove-confirm-modal .spcb-modal-body {
    text-align: center;
    padding: 32px 24px;
}

.spcb-remove-confirm-modal .spcb-modal-footer {
    justify-content: center;
}

.spcb-remove-confirm-icon {
    margin-bottom: 16px;
    color: #d63638;
}

.spcb-remove-confirm-icon svg {
    stroke: currentColor;
}

.spcb-remove-confirm-message {
    margin: 0;
    font-size: 15px;
    color: #333;
    line-height: 1.5;
}

.spcb-remove-confirm-message strong {
    color: #1d2327;
}

/* Delete button - red danger style */
.spcb-modal-delete {
    background: #d63638 !important;
}

.spcb-modal-delete:hover {
    background: #b32d2e !important;
}

@media (max-width: 480px) {
    .spcb-remove-confirm-modal .spcb-modal-body {
        padding: 24px 20px;
    }

    .spcb-remove-confirm-icon svg {
        width: 40px;
        height: 40px;
    }
}

/* ============================================
   PRODUCTOS CLICKABLES EN RESUMEN
   ============================================ */

/* Hacer el nombre del producto parecer un enlace */
body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
    color: var(--spcb-accent, #008060);
    cursor: pointer;
    transition: color 0.2s ease;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name:hover {
    color: var(--spcb-accent-hover, #006e52);
    text-decoration: underline;
}

/* Hacer la imagen del producto clickable */
body.woocommerce-checkout .wc-block-components-order-summary-item__image {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__image:hover {
    opacity: 0.85;
}

/* ============================================
   SELECT DE COMUNAS (SPCB v2.4)
   Corregir estilos cuando nuestro select está inyectado
   ============================================ */

/* Cuando el wrapper tiene nuestro container, aplicar estilos de select */
.wc-block-components-address-form__city:has(.spcb-comuna-container),
.spcb-comuna-active.wc-block-components-text-input {
    position: relative !important;
}

/* El container interno debe ocupar todo el espacio Y tener position relative */
.wc-block-components-address-form__city .spcb-comuna-container,
.spcb-comuna-active .spcb-comuna-container {
    position: relative;
    width: 100%;
    display: block;
    /* Quitar borde del contenedor - solo el select tiene borde */
    border: none !important;
    background: transparent !important;
}

/* El select de comunas - estilos completos */
.wc-block-components-address-form__city .spcb-comuna-select,
.spcb-comuna-active .spcb-comuna-select {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 40px 12px 16px !important;
    font-size: 16px !important;
    /* Borde igual a los otros campos del checkout */
    border: 1px solid #5a5a5a !important;
    border-radius: var(--spcb-radius, 8px) !important;
    background-color: #fff !important;
    color: var(--spcb-text, #1a1a1a) !important;
    /* Quitar apariencia nativa del select (incluyendo flecha) */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    /* Quitar la flecha de IE/Edge */
    background-image: none !important;
    cursor: pointer;
    height: 48px !important;
    box-sizing: border-box !important;
}

.wc-block-components-address-form__city .spcb-comuna-select:focus,
.spcb-comuna-active .spcb-comuna-select:focus {
    border-color: var(--spcb-accent, #008060) !important;
    box-shadow: 0 0 0 1px var(--spcb-accent, #008060) !important;
    outline: none !important;
}

/* Quitar flecha en IE/Edge */
.wc-block-components-address-form__city .spcb-comuna-select::-ms-expand,
.spcb-comuna-active .spcb-comuna-select::-ms-expand {
    display: none;
}

/* Label de Región - alinear con el valor */
.wc-block-components-address-form__state .wc-blocks-components-select__label {
    padding-left: 12px !important;
}


/* Label de comuna - forzar posición flotante siempre (igual que Región) */
.spcb-comuna-container .wc-blocks-components-select__label {
    position: absolute !important;
    top: 9px !important;
    left: 16px !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    padding: 0 2px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

/* Flecha SVG de WC Blocks - posición absoluta */
.wc-block-components-address-form__city .spcb-comuna-container .wc-blocks-components-select__expand,
.spcb-comuna-active .spcb-comuna-container .wc-blocks-components-select__expand {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    pointer-events: none;
    color: var(--spcb-text-muted, #666666);
    z-index: 1;
}

/* ============================================
   INTL-TEL-INPUT v24 - BANDERAS DE TELÉFONO
   Estilos para integrar con WooCommerce Blocks
   ============================================ */

/* Wrapper del campo */
.wc-block-components-text-input:has(.iti) {
    position: relative !important;
    height: 48px !important;
}

/* Container principal iti */
.wc-block-components-text-input .iti {
    width: 100% !important;
    height: 48px !important;
    display: flex !important;
    align-items: stretch !important;
}

/* Input de teléfono */
.wc-block-components-text-input .iti input,
.wc-block-components-text-input .iti input.iti__tel-input {
    width: 100% !important;
    height: 48px !important;
    padding-top: 18px !important;
    padding-bottom: 6px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    line-height: 24px !important;
}

/* Country container (v24 usa este nombre) */
.wc-block-components-text-input .iti .iti__country-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 10px !important; /* Bajar para compensar label */
}

/* Selected country button */
.wc-block-components-text-input .iti .iti__selected-country {
    height: auto !important;
    padding: 0 6px 0 12px !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    gap: 2px !important;
}

.wc-block-components-text-input .iti .iti__selected-country:hover {
    background: rgba(0, 0, 0, 0.02) !important;
}

/* Primary container (flag + arrow) */
.wc-block-components-text-input .iti .iti__selected-country-primary {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}

/* Dial code */
.wc-block-components-text-input .iti .iti__selected-dial-code {
    font-size: 14px !important;
    color: var(--spcb-text, #1a1a1a) !important;
    margin-left: 4px !important;
}

/* Separador visual después del código */
.wc-block-components-text-input .iti .iti__country-container::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 14px !important;
    bottom: 8px !important;
    width: 1px !important;
    background: #d9d9d9 !important;
}

/* Label flotante */
.wc-block-components-text-input:has(.iti) > label,
.wc-block-components-text-input .iti + label {
    position: absolute !important;
    top: 4px !important;
    left: 12px !important;
    font-size: 12px !important;
    color: var(--spcb-text-muted, #767676) !important;
    z-index: 3 !important;
    background: transparent !important;
    transform: none !important;
    pointer-events: none !important;
}

/* Dropdown de países */
.iti__dropdown-content {
    max-height: 300px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e0e0e0 !important;
}

/* Buscador de países */
.iti__search-input {
    padding: 10px 12px 10px 32px !important;
    font-size: 14px !important;
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-radius: 8px 8px 0 0 !important;
}

.iti__search-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Lista de países */
.iti__country-list {
    max-height: 250px !important;
}

/* Item de país */
.iti__country {
    padding: 8px 12px !important;
    font-size: 14px !important;
}

.iti__country:hover {
    background: var(--spcb-accent-light, rgba(0, 128, 96, 0.08)) !important;
}

.iti__country.iti__highlight {
    background: var(--spcb-accent-light, rgba(0, 128, 96, 0.08)) !important;
}

/* País activo/seleccionado */
.iti__country.iti__active {
    background: var(--spcb-accent-light, rgba(0, 128, 96, 0.12)) !important;
    color: var(--spcb-accent, #008060) !important;
}

/* Nombre del país */
.iti__country-name {
    margin-right: 8px !important;
}

/* Código de marcación en la lista */
.iti__dial-code {
    color: var(--spcb-text-muted, #666) !important;
}

/* Países preferidos - separador */
.iti__preferred {
    border-bottom: 1px solid #e0e0e0 !important;
}

/* Responsive - móviles */
@media (max-width: 768px) {
    .wc-block-components-text-input .iti input {
        padding-left: 90px !important;
    }

    .iti__dropdown-content {
        max-width: calc(100vw - 40px) !important;
    }
}

/* ============================================
   ÁREA DE CUPONES - REDISEÑO v1.8.40
   PC: solo input + botón | Móvil: con toggle
   ============================================ */

/* --- PC: Solo input y botón, sin título --- */
@media (min-width: 783px) {
    /* Ocultar el botón toggle "Añadir cupones" */
    .wc-block-components-totals-coupon .wc-block-components-panel__button {
        display: none !important;
    }

    /* Forzar contenido siempre visible */
    .wc-block-components-totals-coupon .wc-block-components-panel__content {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* --- Móvil: Con toggle (comportamiento por defecto) --- */
@media (max-width: 782px) {
    /* Mostrar toggle normal */
    .wc-block-components-totals-coupon .wc-block-components-panel__button {
        display: flex !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--spcb-text, #1a1a1a) !important;
        padding: 12px 0 !important;
    }

    .wc-block-components-totals-coupon .wc-block-components-panel__button:hover {
        color: var(--spcb-accent, #008060) !important;
    }

    /* Icono de flecha */
    .wc-block-components-totals-coupon .wc-block-components-panel__button-icon {
        fill: var(--spcb-text-muted, #666) !important;
    }
}

/* Formulario de cupón - layout */
.wc-block-components-totals-coupon__form {
    display: flex !important;
    gap: 10px !important;
    align-items: stretch !important;
}

/* Input del código de cupón - ocupa espacio restante */
.wc-block-components-totals-coupon__input {
    flex: 1 1 auto !important;
    min-width: 0 !important; /* Permite que se encoja */
    position: relative !important; /* Para label absolute */
}

.wc-block-components-totals-coupon__input input {
    width: 100% !important;
    height: 52px !important;
    padding: 18px 14px 6px 14px !important; /* Espacio arriba para label */
    font-size: 14px !important;
    border: 1px solid var(--spcb-border, #d9d9d9) !important;
    border-radius: var(--spcb-radius, 8px) !important;
    background: #fff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.wc-block-components-totals-coupon__input input:focus {
    border-color: var(--spcb-accent, #008060) !important;
    box-shadow: 0 0 0 2px rgba(0, 128, 96, 0.12) !important;
    outline: none !important;
}

.wc-block-components-totals-coupon__input input::placeholder {
    color: var(--spcb-text-muted, #999) !important;
}

/* Label flotante del input - posición correcta cuando is-active */
.wc-block-components-totals-coupon__input label {
    position: absolute !important;
    top: 4px !important;
    left: 14px !important;
    font-size: 10px !important;
    color: var(--spcb-text-muted, #767676) !important;
    pointer-events: none !important;
    background: transparent !important;
    z-index: 1 !important;
}

/* Cuando NO tiene valor, label centrado */
.wc-block-components-totals-coupon__input:not(.is-active) label {
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
}

@media (min-width: 783px) {
    .wc-block-components-totals-coupon__input.spcb-coupon-label-resting label {
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 14px !important;
    }

    .wc-block-components-totals-coupon__input.spcb-coupon-label-active label {
        top: 4px !important;
        transform: none !important;
        font-size: 10px !important;
    }
}

/* Botón "Aplicar" - ancho fijo, no crece */
.wc-block-components-totals-coupon__button {
    flex: 0 0 auto !important; /* No crece ni encoge */
    width: auto !important;
    min-width: 80px !important;
    height: 52px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: var(--spcb-radius, 8px) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    /* Degradado usando tonos del color primario */
    background: linear-gradient(135deg, var(--spcb-accent, #008060) 0%, #006e52 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(0, 128, 96, 0.2) !important;
}

.wc-block-components-totals-coupon__button:hover:not(:disabled) {
    background: linear-gradient(135deg, #009970 0%, var(--spcb-accent, #008060) 100%) !important;
    box-shadow: 0 4px 8px rgba(0, 128, 96, 0.3) !important;
    transform: translateY(-1px) !important;
}

.wc-block-components-totals-coupon__button:active:not(:disabled) {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 128, 96, 0.2) !important;
}

/* Botón deshabilitado */
.wc-block-components-totals-coupon__button:disabled,
.wc-block-components-totals-coupon__button[aria-disabled="true"] {
    background: linear-gradient(135deg, #a8d5c8 0%, #8cc4b4 100%) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Texto interno del botón */
.wc-block-components-totals-coupon__button .wc-block-components-button__text {
    font-weight: 600 !important;
}

/* Contenido del panel de cupón - sin padding extra ya que no hay toggle */
.wc-block-components-totals-coupon .wc-block-components-panel__content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Wrapper del cupón - agregar padding al contenedor */
.wc-block-components-totals-coupon {
    padding: 16px !important;
}

/* Mensaje de cupón aplicado (si existe) */
.wc-block-components-chip {
    background: var(--spcb-accent-light, rgba(0, 128, 96, 0.08)) !important;
    border: 1px solid var(--spcb-accent, #008060) !important;
    border-radius: 20px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    color: var(--spcb-accent, #008060) !important;
}

.wc-block-components-chip__remove-icon {
    fill: var(--spcb-accent, #008060) !important;
}

/* Responsive */
@media (max-width: 500px) {
    .wc-block-components-totals-coupon__form {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .wc-block-components-totals-coupon__button {
        width: 100% !important;
        height: 42px !important;
    }
}

/* ============================================
   TRUST BENEFITS - GRID 2x2 (v1.8.46)
   ============================================ */
.spcb-trust-benefits {
    margin-top: 20px;
    padding: 16px;
    background: #fff;
    border-radius: 0; /* Sin redondeo - está dentro del resumen */
    border: none;
    border-top: 1px solid var(--spcb-border, #e0e0e0); /* Solo borde superior */
}

.spcb-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.spcb-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
}

.spcb-benefit-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--spcb-accent, #008060);
}

.spcb-benefit-icon svg.spcb-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.spcb-benefit-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spcb-benefit-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--spcb-text, #1a1a1a);
    line-height: 1.3;
}

.spcb-benefit-desc {
    font-size: 11px;
    color: var(--spcb-text-muted, #666);
    line-height: 1.3;
}

/* Responsive - Stack en móvil */
@media (max-width: 500px) {
    .spcb-benefits-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .spcb-benefit-item {
        padding: 6px;
        gap: 8px;
    }

    .spcb-benefit-icon {
        font-size: 20px;
    }

    .spcb-benefit-icon svg.spcb-icon {
        width: 18px;
        height: 18px;
    }

    .spcb-benefit-title {
        font-size: 12px;
    }

    .spcb-benefit-desc {
        font-size: 10px;
    }
}

/* ============================================
   FOOTER CONTACT (v1.8.34)
   ============================================ */
.spcb-footer-contact {
    margin-top: 24px;
    padding: 16px 20px;
    background: #f8f8f8;
    border-radius: var(--spcb-radius, 8px);
    border: 1px solid var(--spcb-border, #e0e0e0);
}

.spcb-footer-contact-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;
}

.spcb-footer-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--spcb-text-muted, #666);
}

.spcb-footer-icon {
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    color: var(--spcb-accent, #008060);
}

.spcb-footer-icon svg.spcb-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.spcb-footer-item a,
.spcb-footer-item a:link,
.spcb-footer-item a:visited {
    color: color-mix(in srgb, var(--spcb-accent, #008060) 70%, #000) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.spcb-footer-item a:hover,
.spcb-footer-item a:active {
    color: var(--spcb-accent-hover, #006e52) !important;
    text-decoration: underline !important;
}

.spcb-footer-store a {
    font-weight: 600;
}

.spcb-footer-link-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--spcb-accent, #008060) 70%, #000);
    font: inherit;
    cursor: pointer;
}

.spcb-footer-link-button:hover,
.spcb-footer-link-button:focus-visible {
    color: var(--spcb-accent-hover, #006e52);
    text-decoration: underline;
}

.spcb-locations-modal .spcb-ui-modal__surface {
    max-width: min(720px, calc(100vw - 32px));
}

.spcb-locations-modal__intro {
    margin: 0 0 16px;
    color: var(--spcb-text-muted, #666);
}

.spcb-locations-modal__section + .spcb-locations-modal__section {
    margin-top: 22px;
}

.spcb-locations-modal__section h4 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--spcb-text, #1f2937);
}

.spcb-locations-list {
    display: grid;
    gap: 10px;
}

.spcb-location-card {
    padding: 12px 14px;
    border: 1px solid var(--spcb-border, #e0e0e0);
    border-radius: 8px;
    background: #fff;
}

.spcb-location-card--pickup {
    border-color: color-mix(in srgb, var(--spcb-accent, #008060) 32%, #e0e0e0);
    background: color-mix(in srgb, var(--spcb-accent, #008060) 5%, #fff);
}

.spcb-location-card__header {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
}

.spcb-location-card__badge {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 11px;
    font-weight: 700;
}

.spcb-location-card--pickup .spcb-location-card__badge {
    background: color-mix(in srgb, var(--spcb-accent, #008060) 14%, #fff);
    color: color-mix(in srgb, var(--spcb-accent, #008060) 72%, #000);
}

.spcb-location-card__address,
.spcb-location-card__description {
    margin: 6px 0 0;
    color: var(--spcb-text-muted, #666);
    font-size: 13px;
}

.spcb-location-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 8px;
    font-size: 12px;
}

/* Responsive */
@media (max-width: 600px) {
    .spcb-footer-contact-inner {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .spcb-footer-item {
        font-size: 12px;
    }

    .spcb-location-card__header {
        display: block;
    }

    .spcb-location-card__badge {
        display: inline-flex;
        margin-top: 6px;
    }
}

/* ============================================
   LOGIN BANNER + MODAL (v1.7.0)
   ============================================ */

/* Login Banner */
.spcb-login-banner {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
    text-align: center;
}

.spcb-login-banner__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.spcb-login-banner__text {
    font-size: 15px;
    font-weight: 500;
    color: #495057;
}

.spcb-login-banner__button {
    background: var(--spcb-accent, #008060);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.spcb-login-banner__button:hover {
    background: var(--spcb-accent-hover, #005a87);
}

.spcb-login-banner__subtitle {
    font-size: 13px;
    color: #6c757d;
    margin-top: 8px;
}

.spcb-login-form .spcb-field {
    margin-bottom: 16px;
}

.spcb-login-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.spcb-login-form input[type="text"],
.spcb-login-form input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.spcb-login-form input:focus {
    border-color: var(--spcb-accent, #008060);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 128, 96, 0.2);
}

.spcb-remember-field {
    margin-bottom: 20px !important;
}

.spcb-remember-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    cursor: pointer;
}

.spcb-remember-field input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.spcb-login-submit {
    width: 100%;
    padding: 12px;
    background: var(--spcb-accent, #008060);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.spcb-login-submit:hover:not(:disabled) {
    background: var(--spcb-accent-hover, #006e52);
}

.spcb-login-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.spcb-login-submit[aria-busy="true"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: wait;
}

.spcb-login-submit[aria-busy="true"]::after {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
    animation: spcbLoginSubmitSpin 0.75s linear infinite;
}

@keyframes spcbLoginSubmitSpin {
    to {
        transform: rotate(360deg);
    }
}

.spcb-login-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 10px 12px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
}

.spcb-login-error:focus {
    outline: 2px solid #dc3545;
    outline-offset: 2px;
}

.spcb-lost-password {
    display: block;
    text-align: center;
    margin-top: 16px;
    color: var(--spcb-accent, #008060);
    font-size: 13px;
    text-decoration: none;
}

.spcb-lost-password:hover {
    text-decoration: underline;
}

/* Screen reader only (hidden visually but accessible) */
.spcb-screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible for keyboard navigation */
.spcb-login-modal input:focus,
.spcb-login-modal button:focus,
.spcb-login-modal a:focus {
    outline: 2px solid var(--spcb-accent, #008060);
    outline-offset: 2px;
}

/* ============================================
   REGISTRATION BUTTON + MODAL (v1.7.0)
   ============================================ */

/* Registration Button */
.spcb-registration-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border: 1px solid #a5d6a7;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 16px 0;
}

.spcb-registration-button:hover {
    background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
    border-color: #81c784;
}

.spcb-registration-button.spcb-registration-active {
    background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%);
    border-color: #2e7d32;
}

.spcb-registration-button.spcb-registration-active .spcb-registration-icon,
.spcb-registration-button.spcb-registration-active .spcb-registration-title {
    color: #fff;
}

.spcb-registration-button .spcb-registration-icon {
    font-size: 22px;
    line-height: 1;
}

.spcb-registration-button .spcb-registration-title {
    font-size: 15px;
    font-weight: 600;
    color: #2e7d32;
}

.spcb-registration-description {
    font-size: 14px;
    color: #666;
    margin: 0 0 16px 0;
    padding: 10px 12px;
    background: #f0f7ff;
    border-left: 3px solid #2196f3;
    border-radius: 0 4px 4px 0;
}

#spcb-registration-modal .spcb-registration-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 12px 16px;
}

#spcb-registration-modal .spcb-registration-benefits li {
    font-size: 14px;
    color: #388e3c;
    padding: 6px 0;
}

.spcb-registration-checkbox-area {
    margin-bottom: 16px;
}

.spcb-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 12px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.spcb-checkbox-label:hover {
    border-color: var(--spcb-accent, #008060);
}

.spcb-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--spcb-accent, #008060);
}

.spcb-checkbox-label span {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

.spcb-birthday-area {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.spcb-birthday-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #fff8e1;
    border-radius: 6px;
    font-size: 13px;
    color: #f57f17;
}

.spcb-birthday-area .spcb-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.spcb-birthday-area input[type="date"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
}

.spcb-birthday-area input[type="date"]:focus {
    border-color: var(--spcb-accent, #008060);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 128, 96, 0.2);
}

/* Registration Modal Footer */
#spcb-registration-modal .spcb-modal-footer {
    display: flex;
    gap: 12px;
    flex-direction: row;
}

.spcb-registration-cancel {
    flex: 1;
    padding: 12px;
    background: #f5f5f5;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.spcb-registration-cancel:hover {
    background: #e8e8e8;
    border-color: #ccc;
}

.spcb-registration-confirm {
    flex: 2;
    padding: 12px;
    background: var(--spcb-accent, #008060);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.spcb-registration-confirm:hover {
    background: var(--spcb-accent-hover, #005a87);
}

/* v1.16.5: Login benefits message */
.spcb-login-benefits {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 12px 14px;
    background: #f0f7ff;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #1e40af;
}

.spcb-login-benefits svg {
    flex-shrink: 0;
    color: #3b82f6;
    margin-top: 2px;
}

.spcb-login-benefits span {
    flex: 1;
}

/* v1.16.7: Separador entre mensaje y form */
.spcb-login-divider {
    border: none;
    border-top: 1px solid #f3f4f6;
    margin: 0 0 16px;
}

/* v1.16.7: Campos con icono */
.spcb-field-with-icon .spcb-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.spcb-field-with-icon .spcb-field-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}

.spcb-field-with-icon input {
    padding-left: 40px !important;
    width: 100%;
}

/* v1.16.7: Checkbox personalizado */
.spcb-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.spcb-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.spcb-checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    transition: all 0.2s;
    position: relative;
    flex-shrink: 0;
}

.spcb-checkbox-label input:checked + .spcb-checkbox-custom {
    background: var(--spcb-accent, #dc2626);
    border-color: var(--spcb-accent, #dc2626);
}

.spcb-checkbox-label input:checked + .spcb-checkbox-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* v1.16.7: Link registrarse */
.spcb-login-register {
    text-align: center;
    margin-top: 8px;
    font-size: 14px;
    color: #6b7280;
}

.spcb-register-link {
    color: var(--spcb-accent, #dc2626);
    font-weight: 500;
    text-decoration: none;
}

.spcb-register-link:hover {
    text-decoration: underline;
}

/* v1.16.7: Efecto shake para botón registro */
@keyframes spcb-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

.spcb-shake {
    animation: spcb-shake 0.5s ease-in-out;
}

/* ============================================
   LOGIN BANNER + REGISTRATION - RESPONSIVE
   ============================================ */

@media (max-width: 480px) {
    .spcb-login-banner__content {
        flex-direction: column;
        gap: 10px;
    }

    .spcb-login-banner__button {
        width: 100%;
    }

    .spcb-registration-button {
        padding: 12px 16px;
    }

    .spcb-registration-button .spcb-registration-title {
        font-size: 14px;
    }

    /* Stack registration modal buttons on mobile */
    #spcb-registration-modal .spcb-modal-footer {
        flex-direction: column-reverse;
    }

    .spcb-registration-cancel,
    .spcb-registration-confirm {
        flex: none;
        width: 100%;
    }
}

/* ============================================
   PHONE SHADOW INPUT
   Input "shadow" fuera del control de React
   ============================================ */
.spcb-phone-shadow {
    position: relative !important;
    height: 48px !important;
}

.spcb-phone-shadow .iti {
    width: 100% !important;
    height: 48px !important;
}

.spcb-phone-shadow .iti__tel-input {
    width: 100% !important;
    height: 48px !important;
    padding-top: 20px !important;
    padding-bottom: 6px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    border: 1px solid #8c8f94 !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    background: #fff !important;
}

.spcb-phone-shadow .iti__tel-input:focus {
    border-color: var(--spcb-accent, #008060) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px var(--spcb-accent, #008060) !important;
}

.spcb-phone-shadow label {
    position: absolute !important;
    top: 4px !important;
    left: 12px !important;
    font-size: 12px !important;
    color: #767676 !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

.spcb-phone-shadow .iti__country-container {
    position: absolute !important;
    top: 12px !important;
    bottom: 6px !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    border-right: 1px solid #d9d9d9 !important;
    padding-right: 4px !important;
}

.spcb-phone-shadow .spcb-phone-error {
    color: #cc1818;
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ================================================
   HIDE REDUNDANT WC BLOCKS ELEMENTS (v1.10.21)
   SPCB provides its own login modal with better UX
   ================================================ */
.wc-block-checkout__login-prompt {
    display: none !important;
}

/* ============================================
   YITH POINTS & REWARDS (v1.16.27)
   Fixed: JS moves element, CSS handles styling and overflow
   v1.16.28: Improved desktop layout - structured card design
   ============================================ */

/* Contenedor principal - prevenir overflow */
body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container {
    /* Sizing - CRÍTICO para evitar overflow */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    /* Spacing */
    margin: 16px 0 20px 0;
    padding: 20px 24px;

    /* Estilo card elegante */
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border: 1px solid #a5d6a7;
    border-radius: var(--spcb-radius, 8px);

    /* Typography */
    font-size: 14px;
    color: #2e7d32;
    line-height: 1.6;
}

body.woocommerce-checkout .spcb-ywpar-rewards-container[hidden] {
    display: none !important;
}

body.woocommerce-checkout .spcb-ywpar-rewards-loading {
    font-weight: 600;
}

body.woocommerce-checkout .spcb-ywpar-rewards-error {
    margin-top: 10px;
}

body.woocommerce-checkout .spcb-ywpar-rewards-container.processing,
body.woocommerce-checkout .spcb-ywpar-rewards-container .processing {
    opacity: 0.65;
    pointer-events: none;
}

body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container.spcb-ywpar-rewards-container {
    display: block;
}

body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container.spcb-ywpar-rewards-container::before {
    content: none;
    display: none;
}

body.woocommerce-checkout .spcb-ywpar-earned-message,
body.woocommerce-checkout .spcb-ywpar-redeem-message {
    width: 100%;
}

body.woocommerce-checkout .spcb-ywpar-earned-message {
    margin: 0 0 10px;
}

body.woocommerce-checkout .spcb-ywpar-earned-message:empty,
body.woocommerce-checkout .spcb-ywpar-redeem-message:empty {
    display: none;
}

body.woocommerce-checkout .spcb-ywpar-earned-message #yith-par-message-cart {
    margin: 0;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid rgba(46, 125, 50, 0.18);
    color: #2e7d32;
    font-size: 13px;
    line-height: 1.35;
}

body.woocommerce-checkout .spcb-ywpar-applied-messages {
    display: grid;
    gap: 10px;
    width: 100%;
}

body.woocommerce-checkout .spcb-ywpar-applied-messages .woocommerce-notices-wrapper,
body.woocommerce-checkout .spcb-ywpar-applied-messages .woocommerce-message,
body.woocommerce-checkout .spcb-ywpar-applied-messages #yith-par-message-cart {
    margin: 0;
}

body.woocommerce-checkout .spcb-ywpar-applied-messages .woocommerce-message,
body.woocommerce-checkout .spcb-ywpar-applied-messages #yith-par-message-cart {
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(46, 125, 50, 0.22);
    color: #2e7d32;
}

/* Contenedor interno YITH */
body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container .wp-block-yith-par-message-reward-cart,
body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container .yith-par-message-reward-cart {
    display: block;
}

/* Form interno */
body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container form.ywpar_apply_discounts,
body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container [data-spcb-ywpar-form="1"].ywpar_apply_discounts {
    display: block;
    text-align: center;
}

/* === DESKTOP LAYOUT (min-width: 601px) - v1.16.28 Horizontal mejorado === */
@media (min-width: 601px) {
    /* Contenedor principal - layout horizontal con icono */
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 16px 20px;
    }

    /* Icono a la izquierda */
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container::before {
        content: "🎁";
        font-size: 26px;
        flex-shrink: 0;
        line-height: 1.2;
    }

    /* Form ocupa el resto del espacio */
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container form.ywpar_apply_discounts,
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container [data-spcb-ywpar-form="1"].ywpar_apply_discounts {
        flex: 1;
        text-align: left;
    }

    /* NO usar pseudo-elemento en form para desktop horizontal */
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container form.ywpar_apply_discounts::before,
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container [data-spcb-ywpar-form="1"].ywpar_apply_discounts::before {
        display: none;
    }

    /* Input de puntos - inline con texto */
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container input#ywpar-points-max,
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container input[name="ywpar_input_points"] {
        width: 70px;
        padding: 6px 10px;
        border: 2px solid #a5d6a7;
        border-radius: 5px;
        text-align: center;
        font-weight: 600;
        font-size: 14px;
        color: #2e7d32;
        background: white;
        margin: 0 3px;
        vertical-align: baseline;
    }

    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container input#ywpar-points-max:focus {
        outline: none;
        border-color: #2e7d32;
        box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
    }

    /* Span del botón - línea separada, alineado a la derecha */
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container form.ywpar_apply_discounts > span:last-of-type,
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container [data-spcb-ywpar-form="1"].ywpar_apply_discounts > span:last-of-type {
        display: block;
        margin-top: 10px;
        text-align: right;
    }

    /* Botón desktop - compacto */
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container .button,
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container button#ywpar_apply_discounts {
        background: #2e7d32 !important;
        color: white !important;
        border: none !important;
        padding: 10px 24px !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.1s ease;
        display: inline-block;
    }

    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container .button:hover,
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container button#ywpar_apply_discounts:hover {
        background: #1b5e20 !important;
        transform: translateY(-1px);
    }
}

/* === MOBILE LAYOUT (max-width: 600px) - NO TOCAR === */
@media (max-width: 600px) {
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container {
        padding: 16px;
        text-align: center;
    }

    /* Icono arriba centrado */
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container::before {
        content: "🎁";
        display: block;
        font-size: 28px;
        margin-bottom: 10px;
    }

    /* Form centrado */
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container form.ywpar_apply_discounts,
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container [data-spcb-ywpar-form="1"].ywpar_apply_discounts {
        text-align: center;
    }

    /* Ocultar pseudo-elemento del form en móvil (usamos el del contenedor) */
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container form.ywpar_apply_discounts::before,
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container [data-spcb-ywpar-form="1"].ywpar_apply_discounts::before {
        display: none;
    }

    /* Input móvil */
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container input#ywpar-points-max,
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container input[name="ywpar_input_points"] {
        width: 70px;
        padding: 6px 10px;
        border: 2px solid #a5d6a7;
        border-radius: 6px;
        text-align: center;
        font-weight: 600;
        font-size: 14px;
        color: #2e7d32;
        background: white;
        margin: 0 4px;
    }

    /* Span del botón - bloque separado */
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container form.ywpar_apply_discounts > span:last-of-type,
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container [data-spcb-ywpar-form="1"].ywpar_apply_discounts > span:last-of-type {
        display: block;
        margin-top: 12px;
    }

    /* Botón móvil - ancho completo */
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container .button,
    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container button#ywpar_apply_discounts {
        background: #2e7d32 !important;
        color: white !important;
        border: none !important;
        padding: 12px 24px !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        cursor: pointer;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        display: block;
    }

    body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container .button:hover {
        background: #1b5e20 !important;
    }
}

@media (min-width: 601px) {
    body.woocommerce-checkout .spcb-ywpar-redeem-message {
        display: flex;
        align-items: flex-start;
        gap: 14px;
    }

    body.woocommerce-checkout .spcb-ywpar-redeem-message::before {
        content: "🎁";
        font-size: 26px;
        flex-shrink: 0;
        line-height: 1.2;
    }
}

@media (max-width: 600px) {
    body.woocommerce-checkout .spcb-ywpar-earned-message {
        margin-bottom: 8px;
    }

    body.woocommerce-checkout .spcb-ywpar-redeem-message {
        text-align: center;
    }

    body.woocommerce-checkout .spcb-ywpar-redeem-message::before {
        content: "🎁";
        display: block;
        font-size: 28px;
        margin-bottom: 10px;
    }
}

/* Limpiar floats de YITH */
body.woocommerce-checkout .wp-block-yith-par-message-reward-cart_container .clear {
    display: none;
}

/* All policy links in native terms block (v1.16.27) */
.wc-block-checkout__terms a {
    color: var(--spcb-accent, #005942);
    text-decoration: underline;
}

.wc-block-checkout__terms a:hover {
    color: var(--spcb-accent-hover, #004634);
}

/* Ocultar bloque nativo cuando checkbox SPCB está activo */
body.spcb-force-terms-checkbox .wc-block-checkout__terms {
    display: none !important;
}

/* ============================================
   TERMS & CONDITIONS CHECKBOX (v1.16.26)
   Custom checkbox for terms/privacy/refund acceptance
   v1.16.29: Fixed visibility inside additional-information block
   ============================================ */

/* v1.16.29: Asegurar que el checkbox sea visible dentro del bloque adicional */
body.spcb-force-terms-checkbox .wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkbox,
body.spcb-force-terms-checkbox .wp-block-woocommerce-checkout-additional-information-block [data-spcb-field="terms_accepted"] {
    display: flex !important;
}

/* Container styling */
body.woocommerce-checkout .wc-block-components-checkbox.wc-block-checkout__terms_accepted,
body.woocommerce-checkout [class*="spcb-terms_accepted"],
body.woocommerce-checkout .wc-block-components-checkbox[data-spcb-field="terms_accepted"],
body.spcb-force-terms-checkbox .wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkbox {
    margin: 20px 0;
    padding: 16px;
    background: #fafafa;
    border: 1px solid var(--spcb-border, #e0e0e0);
    border-radius: var(--spcb-radius, 8px);
}

/* Checkbox label with links */
body.woocommerce-checkout [data-spcb-field="terms_accepted"] label,
body.woocommerce-checkout .wc-block-checkout__terms_accepted label {
    font-size: 14px;
    line-height: 1.6;
    color: var(--spcb-text, #333);
}

/* Links styling */
body.woocommerce-checkout [data-spcb-field="terms_accepted"] a,
body.woocommerce-checkout .wc-block-checkout__terms_accepted a {
    color: var(--spcb-accent, #005942);
    text-decoration: underline;
    font-weight: 500;
}

body.woocommerce-checkout [data-spcb-field="terms_accepted"] a:hover,
body.woocommerce-checkout .wc-block-checkout__terms_accepted a:hover {
    color: var(--spcb-accent-hover, #004634);
    text-decoration: none;
}

/* Error state */
body.woocommerce-checkout [data-spcb-field="terms_accepted"].has-error,
body.woocommerce-checkout .wc-block-checkout__terms_accepted.has-error {
    border-color: #cc1818;
    background: #fff5f5;
}

/* Custom checkbox styling to match SPCB design */
body.woocommerce-checkout [data-spcb-field="terms_accepted"] input[type="checkbox"],
body.woocommerce-checkout .wc-block-checkout__terms_accepted input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--spcb-border, #d9d9d9);
    border-radius: 4px;
    margin-right: 12px;
    flex-shrink: 0;
}