.omnilife-v2 {
    padding-top: 0px !important;
    margin-top: 5rem !important;
}

.error-msg-box {
    align-items: center;
    background: white;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    padding: 7px 7px;
    text-align: center;
}

.v2-alert-container {
    width: 100%;
    display: block;
}

[x-cloak] {
    display: none !important;
}

/* === ExtraCostsPanel (checkout V2) — Con Costo adicional === */
.extra-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--neutrals600);
    border-radius: 1rem;
    padding: 10px;
}

/* === Fix Mobile Layout Checkout V2 === */
@media (max-width: 767px) {

    .omnilife-v2 {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Neutraliza el margin -15px de .custom-row (gutter Bootstrap, master.css):
       al promoverse #cart-side-right como hijo flex directo por display:contents,
       pierde el padding de columna que compensa ese margen negativo y la fila se
       estira a 370px, desbordando el viewport de 360px. Medido con Playwright:
       con esta regla la fila queda en 340px y body.scrollWidth = 360px (sin scroll
       horizontal, sin recorte). NO usar overflow:hidden (esconde contenido). */
    .tab-content>.custom-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #cart-side-left {
        display: contents;
    }

    /* Hijos promovidos por display:contents necesitan flex-basis explícito:
       con solo width:100% el algoritmo flex recalcula el ancho según su
       contenido (select2, .mdl-card, tablas) y recorta. flex:0 0 100% lo fija. */
    #cart-side-left>div {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
        order: 0;
    }

    /* 1. Dirección arriba */
    #cart-side-left>#wrapper-shipping-address,
    #cart-side-left>#choose-address-desktop,
    #cart-side-left>#wrapper-inscription-address {
        order: -2 !important;
    }

    /* 2. Resumen de compra en medio (ancho completo al promoverse) */
    #cart-side-right {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        order: -1 !important;
        padding-left: 0px;
        padding-right: 0px;
    }

    /* Registro: apilar barra de total sobre la botonera (evita solape de dos sticky) */
    .register-page .register-footer {
        z-index: 100;
        /* botonera por encima del resumen al colapsar */
    }

    .register-page .col-xl-10 {
        padding-bottom: 160px;
        /* altura resumen + botonera; ajustar al real */
    }

    .register-page .ws-error-banner-scope .col-xl-10 {
        padding-bottom: 0;
    }
}

/* ============================================================================
 * Reglas recuperadas de material.css eliminadas por merge de MKT (commit 3257a690
 * y encadenados). Adaptadas al patrón V2: MDL solo CSS pasivo; .active/.is-checked
 * las asigna Alpine/Blade, no MDL-JS (por eso se removió .is-upgraded).
 * Flujos: checkout / registro / cliente.
 * ============================================================================ */

/* --- Promos: layout base de tarjetas --- */
.promo-obl label.mdl-radio.outline {
    display: flex;
    padding: 10px;
    border-radius: 1rem;
    border: 1px solid var(--neutrals600);
    flex-wrap: wrap;
    align-content: space-between;
    height: fit-content;
    margin: 10px 0;
    transition: var(--transition);
    overflow: hidden;
}

.promo-obl label.mdl-radio.outline:hover {
    border: 1px solid var(--primary300);
}

.promo-obl label.mdl-radio.outline.is-checked {
    color: var(--primary700);
    border: 1px solid var(--primary600);
    background-color: var(--primary1);
}

.promo-obl label.mdl-radio.outline.is-checked .mdl-card {
    background-color: transparent;
}

/* --- Promos: contenedor + contador (FIX del encimado del stepper) --- */
.promo-obl .promo-container {
    position: relative;
}

.promo-obl .promo-container.has-counter.active .mdl-radio.outline {
    padding-bottom: 60px !important;
}

.promo-obl .promo-container.has-counter label.mdl-radio.outline.is-checked {
    padding-bottom: 60px !important;
}

.promo-obl .counterProdcut {
    display: flex;
    max-width: 140px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 100px;
    background: #FFF;
    border: 1px solid var(--primary800);
}

.promo-obl .promo-container.has-counter .counterProdcut {
    display: flex;
    opacity: 0;
    transform: scale(0);
    transition: var(--transition);
    position: absolute;
    bottom: 20px;
}

.promo-obl .promo-container.has-counter.active .counterProdcut {
    display: flex;
    opacity: 1;
    transform: scale(1);
    transition: var(--transition);
}

/* --- Promos: tarjeta clear (E3) y precio/palomita (adaptado sin .is-upgraded) --- */
.promo-container>label.mdl-radio.clear {
    width: 100%;
    display: block;
}

.promo-container>label.mdl-radio.clear .mdl-card {
    width: 100%;
}

.promo-obl label.mdl-radio.outline.is-checked .promo-price {
    margin-top: 22px;
}

.promo-obl label.mdl-radio.outline.is-checked:after {
    position: absolute;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    color: var(--primary1);
    z-index: 2;
    content: "\f00c";
    background: var(--primary4);
    border-radius: 100px;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 4px;
    top: 4px;
}

/* --- Promos opcionales + carrusel Alpine --- */
.promo-optional-card {
    background-color: #FEF3E2;
}

.promo-optional-card.is-selected {
    border: 1px solid var(--primary600) !important;
    background: var(--primary100) !important;
}

.promo-img-sm {
    max-height: 60px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.promo-carousel {
    position: relative;
}

.promo-carousel__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px;
}

.promo-carousel__item {
    flex: 0 0 calc(33.333% - 8px) !important;
    max-width: calc(33.333% - 8px) !important;
    min-width: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
}

@media (max-width: 767px) {
    .promo-carousel__item {
        flex: 0 0 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
    }
}

@media (max-width: 479px) {
    .promo-carousel__item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

.promo-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.promo-carousel__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neutrals400, #ccc);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
    outline: none;
}

.promo-carousel__dot.active {
    background: var(--primary800, #6B21A8);
}

/* --- Promos: modal de selección + accordion obligatorias --- */
.mdl-modal.modal.alert .promo-container .mdl-radio.outline.is-checked {
    border-color: var(--primary800, #6B21A8) !important;
}

/* Cada promo obligatoria acota la altura de SU zona de opciones, para que el botón
   "Agregar" quede siempre visible justo debajo, sin importar cuántas opciones tenga.
   El wrapper ya trae .custom-row (flex-wrap), así que aquí solo se limita la altura.
   El scroll externo de 480px del bloque (#all-promo-obl) se mantiene intacto. */
.promo-group .promo-options-scroll {
    max-height: 260px;   /* ~2-3 filas de cards; calibrar en QA */
    overflow-y: auto;
    width: 100%;
}

.mdl-accordion__content-wrapper:has(#all-promo-obl) {
    overflow-y: auto !important;
    max-height: 480px;
}

/* --- Registro: pasos 2/3, saldos --- */
.saldo-favor-texto {
    padding-top: 20px;
    border: 1px;
}

.saldo-card {
    margin: 0 0 1rem 0 !important;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid var(--neutrals600);
}

.register-page #step2 .mdl-message-box .col-12 {
    padding: 0 !important;
}

.register-page #step2 .offset-lg-2.offset-xl-3 .custom-row.flex-center.pb-1 .mdl-message-box .custom-row {
    padding: 0;
}

.register-page .mdl-textfield.outline.full-width.mdl-js-textfield.mdl-textfield--floating-label.is-upgraded.is-dirty.is-invalid {
    margin: 0 !important;
}

.register-page:has(#privacy-terms) :not(.is-invited)>.payment5-content .mdl-textfield.outline .mdl-textfield__label,
.register-page:has(#na-id_num1-field)>.mdl-textfield.outline .mdl-textfield__label {
    top: 34px;
}

.register-page #step3 .custom-row.flex-center.pb-1 .col-12 .mdl-message-box .col-12 {
    padding: 0 !important;
}

.register-page #step3 .mdl-textfield.is-verified:after {
    top: 15px;
}

.register-page #step3 #has-eo-code {
    align-items: flex-start;
}

.form-sex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.register__main #formRegisterCustomer .register__step .form-row .form-group.medium:nth-child(5) {
    margin-top: 1.5rem;
}

#tabs_register {
    margin-top: 2rem;
}

/* --- Layout general V2 / tracking / confirmación --- */
.tracking-container .cart-empty .mdl-button {
    padding: 16px 24px;
    max-width: 340px !important;
}

.confirmation-page #step5 {
    padding: 0;
}

.confirmation-page #step5 .offset-lg-2.offset-xl-2.col-lg-7.col-xl-8 {
    padding: 0;
}

/* --- Select2 (variante primary100) --- */
li.select2-results__option.select2-results__option--selectable.select2-results__option--selected.select2-results__option--highlighted {
    background-color: #EDE1F5 !important;
}

.select2-results__option--selected:has(.spanContainerSelect) {
    background-color: var(--primary100) !important;
}
/* Toggle de idioma de contrato: pintado del activo por clase server-side (Livewire),
   independiente del estado :checked del DOM que el morph de Livewire puede no reflejar. */
.switch-field label.is-lang-active {
    background-color: var(--neutrals200);
    box-shadow: none;
    color: var(--primary600);
    font-weight: 700;
}

/* Feedback visual mientras el toggle de idioma persiste al servidor */
.switch-field.switch-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Feedback visual para cards de kits */
.kit-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Estilos estructurales para keywords chips */
.kit-chips-title {
    display: flex;
    gap: 5px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.kit-chips-image {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    z-index: 2;
}

.kit-chip {
    background-color: var(--chip-bg, #E0E0E0);
    color: var(--chip-fg, #333333);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Slider del modal de detalle de kits: flechas y dots visibles y contenidos en móvil,
   sin position:absolute agresivo que descuadre el modal. */
.info-kits .owl-nav {
    display: flex !important;
    justify-content: space-between;
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 5;
}
.info-kits .owl-nav button.owl-prev,
.info-kits .owl-nav button.owl-next {
    pointer-events: auto;
    background: rgba(255,255,255,0.85) !important;
    border-radius: 50%;
    width: 32px;
    height: 32px;
}
.info-kits .owl-nav.disabled {
    display: none !important;
}
.info-kits .owl-dots {
    display: flex !important;
    justify-content: center;
    margin-top: 8px;
}

/* Toggle de idioma del contrato: SOLO visible en el kit seleccionado para comprar
   (is-selected-kit), no en toda variante visible del grupo. Alta especificidad
   (.register-kits) para ganar a material.css .kit-cont.active .kit-lang. */
.register-kits .kit-cont .kit-lang {
    display: none !important;
}
.register-kits .kit-cont.is-selected-kit .kit-lang {
    display: flex !important;
    order: -1;
    margin: 0 0 8px 0;
    width: 100%;
    box-sizing: border-box;
}
.register-kits .kit-cont.is-selected-kit {
    display: flex;
    flex-direction: column;
}

/* Slider de imágenes del modal de kits (Alpine, reemplaza owl-carousel) */
[x-cloak] { display: none !important; }
.kit-slider { position: relative; width: 100%; }
.kit-slider__track {
    position: relative;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kit-slider__item img {
    max-height: 250px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}
.kit-slider__nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}
.kit-slider__arrow {
    pointer-events: auto;
    background: var(--primary100);
    border: 1px solid var(--primary200);
    border-radius: 50%;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--primary600);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: background .2s ease, box-shadow .2s ease;
}
.kit-slider__arrow:hover {
    background: var(--primary200);
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}
.kit-slider__dots {
    display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px;
}
.kit-slider__dot {
    width: 10px; height: 10px; border-radius: 50%;
    border: none; background: var(--neutral3); cursor: pointer; padding: 0;
    transition: width .2s ease, background .2s ease, border-radius .2s ease;
}
.kit-slider__dot.is-active {
    width: 28px; border-radius: 5px; background: var(--primary600);
}

/* Backdrop del modal de detalle de kits: .modal-container no tenía CSS, se mostraba
   como bloque transparente. Se le da overlay fijo a pantalla completa con fondo opaco. */
.register-kits .modal-container {
    display: none; /* jQuery .show() lo cambia a block al abrir */
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}

/* Modal de detalle: tamaño contenido con scroll interno (evita que crezca sin límite
   y se salga de la pantalla con listas largas de productos). */
.info-kits {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.info-kits .modal__inner {
    max-height: none;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Render del HTML del description dentro del modal de detalle de kits:
   restaurar viñetas y espaciado que el reset global del tema elimina. */
.info-kits .modal__inner ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0.25rem 0 0.75rem;
}
.info-kits .modal__inner ul li {
    list-style: disc;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}
.info-kits .modal__inner p {
    margin: 0.25rem 0;
    line-height: 1.4;
}
.info-kits .modal__inner strong,
.info-kits .modal__inner b {
    font-weight: 700;
}

/* === WsErrorBanner Scope === */
/* Aseguramos que el error-box interno no se desparrame y se vea compacto */
.ws-error-banner-scope .mdl-message-box {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}
/* Forzamos el layout horizontal (icono + texto) y anulamos el flex-wrap indeseado */
.ws-error-banner-scope .mdl-message-box .custom-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
}
/* Ajustamos la columna del icono */
.ws-error-banner-scope .mdl-message-box .col-1 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}
/* Ajustamos la columna del texto */
.ws-error-banner-scope .mdl-message-box .col-10,
.ws-error-banner-scope .mdl-message-box .col-11 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 15px !important;
    text-align: left !important;
}

/* Texto dinamico tras los dos puntos (etiqueta <i>) en el mensaje del error en rojo.
   Scoped a nuestro wrapper para no afectar el ErrorBox compartido (§39). */
.ws-error-banner-scope .mdl-message-box.error .error-type i {
    color: var(--error800);
}


.cart-empty-warning {
    color: #d32f2f;
    font-size: 0.85rem;
    margin-top: 8px;
    text-align: right;
}

.search-loading {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    color: var(--primary600);
}

.suburb-suggestions {
    position: absolute;
    top: calc(100% - 8px);
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #bdbdbd #f5f5f5;
}

.suburb-suggestions::-webkit-scrollbar {
    width: 7px;
}

.suburb-suggestions::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.suburb-suggestions::-webkit-scrollbar-thumb {
    background: #bdbdbd;
    border-radius: 4px;
}

.suburb-suggestions li {
    margin: 0;
    padding: 0;
}

.suburb-suggestions__item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 6px 14px;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    color: #263238;
    text-align: left;
    line-height: 1.2;
    cursor: pointer;
}

.suburb-suggestions__item:last-child {
    border-bottom: 0;
}

.suburb-suggestions__item:hover,
.suburb-suggestions__item:focus {
    background: #f5f7f8;
    outline: 0;
}

/* === Broker disabled card & legend (limit_day cut-off) === */
.broker-card--disabled {
    opacity: .6;
    cursor: not-allowed !important;
    flex-wrap: wrap;
}

.broker-card--disabled * {
    cursor: not-allowed !important;
}

.broker-card--disabled input[type="radio"] {
    pointer-events: none;
}

.broker-disabled-legend {
    display: block;
    width: 100%;
    flex-basis: 100%;
    margin-top: 8px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--secondary, #ff6600);
    background: var(--warning200, #ffe0b2);
    border-radius: 8px;
    font-weight: 500;
}