/**
 * SuperPyme Checkout Blocks - Responsive & Theme Overrides
 * Mobile responsive, dark text mode, mobile strips
 */

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 782px) {
    body.woocommerce-checkout .wp-block-woocommerce-checkout {
        padding: 20px 16px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.woocommerce-checkout .wc-block-components-checkout-step {
        padding: 16px;
    }

    /* Ocultar sidebar de resumen en móvil (se muestra el de actions) */
    body.woocommerce-checkout .wc-block-checkout__sidebar {
        display: none !important;
    }
}

/* ============================================
   COLORES DE TEXTO CONSISTENTES (v1.8.17)
   Forzar texto oscuro - Activable en Settings
   Solo se aplica cuando body tiene clase .spcb-dark-text
   ============================================ */

/* --- CHECKOUT PRINCIPAL --- */

/* Títulos de sección (Opciones de envío, Pago, etc.) */
body.spcb-dark-text .wc-block-components-checkout-step__title {
    color: #000 !important;
}

/* Labels de métodos de envío/pago (Starken, Otro, etc.) */
body.spcb-dark-text .wc-block-components-radio-control__label {
    color: #000 !important;
}

/* Precios/estado de envío (Gratis, Por pagar, $X.XXX) */
body.spcb-dark-text .wc-block-components-radio-control__secondary-label {
    color: #000 !important;
}

/* Labels de inputs (Nombre, Email, etc.) */
body.spcb-dark-text .wc-block-components-text-input label {
    color: #000 !important;
}

/* Valores de inputs */
body.spcb-dark-text .wc-block-components-text-input input {
    color: #1a1a1a !important;
}

/* Toggle "Agregar Depto / Piso / Oficina" - mantener color accent */
body.spcb-dark-text .wc-block-components-address-form__address_2-toggle {
    color: var(--spcb-accent, #008060) !important;
}

/* Labels de selects */
body.spcb-dark-text .wc-blocks-components-select__label {
    color: #000 !important;
}

/* Títulos de método de entrega (Enviar, Retirar en tienda) */
body.spcb-dark-text .wc-block-checkout__shipping-method-option-title {
    color: #000 !important;
}

/* --- SIDEBAR RESUMEN DEL PEDIDO --- */

/* Título "Resumen del pedido" */
body.spcb-dark-text .wc-block-components-checkout-order-summary__title-text {
    color: #000 !important;
}

/* Precio total en título */
body.spcb-dark-text .wc-block-components-checkout-order-summary__title-price {
    color: #000 !important;
}

/* Nombre del producto */
body.spcb-dark-text .wc-block-components-product-name {
    color: var(--spcb-accent, #008060) !important;
}

/* Precio individual del producto */
body.spcb-dark-text .wc-block-components-product-price__value {
    color: #000 !important;
}

/* "Añadir cupones" */
body.spcb-dark-text .wc-block-components-totals-coupon .wc-block-components-panel__button {
    color: #000 !important;
}

/* Labels de totales (Subtotal, Envío, Total) */
body.spcb-dark-text .wc-block-components-totals-item__label {
    color: #000 !important;
}

/* Valores de totales */
body.spcb-dark-text .wc-block-components-totals-item__value {
    color: #000 !important;
}

/* Total final (footer) */
body.spcb-dark-text .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    color: #000 !important;
}

body.spcb-dark-text .wc-block-components-totals-footer-item-tax-value {
    color: #000 !important;
}

/* Descripción de envío (Por Pagar, etc.) */
body.spcb-dark-text .wc-block-components-totals-shipping .wc-block-components-totals-item__value {
    color: #000 !important;
}

/* --- OTROS ELEMENTOS --- */

/* Términos y condiciones */
body.spcb-dark-text .wc-block-components-checkbox__label {
    color: #000 !important;
}

/* "Volver al carrito" */
body.spcb-dark-text .wc-block-components-checkout-return-to-cart-button {
    color: #000 !important;
}

/* Descripción de método de pago */
body.spcb-dark-text .wc-block-components-radio-control-accordion-content {
    color: #000 !important;
}

/* Links de políticas (footer) */
body.spcb-dark-text .spcb-policy-links a {
    color: #000 !important;
}

/* --- TARJETA DE DIRECCIÓN COLAPSADA --- */

/* Nombre en la dirección */
body.spcb-dark-text .wc-block-components-address-card__address-section--primary {
    color: #000 !important;
}

/* Dirección, comuna, país, teléfono */
body.spcb-dark-text .wc-block-components-address-card__address-section--secondary {
    color: #333 !important;
}

/* Botón "Editar" */
body.spcb-dark-text .wc-block-components-address-card__edit {
    color: var(--spcb-accent, #008060) !important;
}

/* Hover en botón "Editar" */
body.spcb-dark-text .wc-block-components-address-card__edit:hover {
    color: var(--spcb-accent-hover, #006e52) !important;
}

/* Textos de información de envío */
body.spcb-dark-text .spcb-info-text {
    color: #333 !important;
}

body.spcb-dark-text .spcb-time-text {
    color: #333 !important;
}

body.spcb-dark-text .spcb-shipping-info-hint {
    color: #444 !important;
}

body.spcb-dark-text .spcb-shipping-time-message {
    color: #444 !important;
}

/* ============================================
   MOBILE STRIPS - BENEFICIOS Y CONTACTO (v1.8.39)
   Estilo app móvil con scroll horizontal
   ============================================ */

/* --- BENEFICIOS: Strip horizontal en móvil --- */
@media (max-width: 767px) {
    .spcb-trust-benefits {
        margin: 16px 0;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: hidden;
    }

    .spcb-trust-benefits .spcb-benefits-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        padding: 8px 0;
    }

    .spcb-trust-benefits .spcb-benefits-grid::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .spcb-trust-benefits .spcb-benefit-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 12px 16px;
        min-width: 100px;
        background: #f8f8f8;
        border-radius: 12px;
        margin-right: 10px;
        gap: 4px;
    }

    .spcb-trust-benefits .spcb-benefit-item:last-child {
        margin-right: 0;
    }

    .spcb-trust-benefits .spcb-benefit-icon {
        font-size: 22px;
        line-height: 1;
    }

    .spcb-trust-benefits .spcb-benefit-text {
        align-items: center;
    }

    .spcb-trust-benefits .spcb-benefit-title {
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }

    .spcb-trust-benefits .spcb-benefit-desc {
        display: none; /* Ocultar descripción en móvil para mantenerlo compacto */
    }
}

/* --- CONTACTO: Strip horizontal en móvil --- */
@media (max-width: 767px) {
    .spcb-footer-contact {
        margin: 12px 0;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: hidden;
    }

    .spcb-footer-contact .spcb-footer-contact-inner {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 8px 0;
    }

    .spcb-footer-contact .spcb-footer-contact-inner::-webkit-scrollbar {
        display: none;
    }

    .spcb-footer-contact .spcb-footer-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 10px 14px;
        min-width: 90px;
        background: #f8f8f8;
        border-radius: 12px;
        margin-right: 10px;
        gap: 4px;
        font-size: 11px;
    }

    .spcb-footer-contact .spcb-footer-item:last-child {
        margin-right: 0;
    }

    .spcb-footer-contact .spcb-footer-icon {
        font-size: 20px;
        line-height: 1;
    }

    .spcb-footer-contact .spcb-footer-item span:not(.spcb-footer-icon),
    .spcb-footer-contact .spcb-footer-item a {
        font-size: 10px;
        line-height: 1.2;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: max-width 0.3s ease, white-space 0.3s ease;
    }

    /* Item expandido al tocar */
    .spcb-footer-contact .spcb-footer-item.spcb-expanded {
        min-width: auto;
        max-width: none;
    }

    .spcb-footer-contact .spcb-footer-item.spcb-expanded span:not(.spcb-footer-icon),
    .spcb-footer-contact .spcb-footer-item.spcb-expanded a {
        max-width: none;
        white-space: normal;
        word-break: break-word;
    }

    /* Links clickeables en contacto */
    .spcb-footer-contact .spcb-footer-item a,
    .spcb-footer-contact .spcb-footer-item a:link,
    .spcb-footer-contact .spcb-footer-item a:visited {
        color: color-mix(in srgb, var(--spcb-accent, #008060) 70%, #000) !important;
        text-decoration: none !important;
    }

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

/* --- Indicadores de scroll bidireccionales (v1.8.50) --- */
@media (max-width: 767px) {
    .spcb-trust-benefits,
    .spcb-footer-contact {
        position: relative;
    }

    /* Indicador derecho (más contenido a la derecha) */
    .spcb-trust-benefits::after,
    .spcb-footer-contact::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to right, transparent, #f5f5f5);
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    /* Indicador izquierdo (más contenido a la izquierda) */
    .spcb-trust-benefits::before,
    .spcb-footer-contact::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to left, transparent, #f5f5f5);
        pointer-events: none;
        opacity: 0;
        z-index: 1;
        transition: opacity 0.3s ease;
    }

    /* Clases para controlar visibilidad via JS */
    .spcb-trust-benefits.spcb-scroll-start::before,
    .spcb-footer-contact.spcb-scroll-start::before {
        opacity: 0 !important;
    }

    .spcb-trust-benefits.spcb-scroll-end::after,
    .spcb-footer-contact.spcb-scroll-end::after {
        opacity: 0 !important;
    }

    .spcb-trust-benefits.spcb-scroll-middle::before,
    .spcb-footer-contact.spcb-scroll-middle::before,
    .spcb-trust-benefits.spcb-scroll-middle::after,
    .spcb-footer-contact.spcb-scroll-middle::after {
        opacity: 1 !important;
    }
}