/* ============================================================
   inloff — "Suelen comprarse juntos" v3 (popup premium)
   Tarjetas + modal de personalización, paleta de marca.
   Sin side-stripes, sin gradientes, sin cajas anidadas.
   ============================================================ */

/* ---------- posicionamiento responsivo (JS-driven) ----------
   El PHP renderiza el bloque UNA vez bajo `woocommerce_after_add_to_cart_form`
   (posición correcta en móvil: después de fecha de entrega). El JS de
   `inloff-cross-sells.js` lo "promueve" en desktop (≥850px) a hermano
   del `.woocommerce-product-gallery` (debajo de la galería de imágenes).
   En `resize`, el JS vuelve a evaluar y reposiciona si cambia el breakpoint.
   `visibility:hidden` hasta que JS marca `[data-cs-placed]` evita flicker
   entre la posición inicial y la final. */
.inloff-cs:not([data-cs-placed]) {
    visibility: hidden;
}
.inloff-cs[data-cs-placed] {
    visibility: visible;
}
/* En desktop, ya colocado bajo la galería, ganamos algo de aire arriba */
@media (min-width: 850px) {
    .woocommerce-product-gallery + .inloff-cs[data-cs-placed],
    .product-gallery-default     + .inloff-cs[data-cs-placed] {
        margin-top: 32px;
    }
}

.inloff-cs {
    --cs-navy: #1B2540;
    --cs-navy-deep: #131A2E;
    --cs-heart: #C5A184;
    --cs-heart-deep: #B0875F;
    --cs-cream: #FAF7F2;
    --cs-cream-warm: #F5EFE5;
    --cs-line: #E8E1D4;
    --cs-ink-soft: #5A5650;

    margin: 32px 0;
    color: var(--cs-navy);
    font-family: inherit;
}

.inloff-cs__title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cs-navy);
    margin: 0 0 16px;
}

/* ---------- lista de items ----------
   Border via `box-shadow` OUTER (no `border:1px solid`) — el border
   ocupa 1px alrededor del rectángulo interior y se ve como gris sliver
   entre el cream del item main y la curva del list. Con box-shadow
   externo, el "borde" se pinta fuera del rectángulo y el item main
   llega al 100% de la curva del list. El list NO tiene background
   propio para no crear capas residuales. */
.inloff-cs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 0 0 1px var(--cs-line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.inloff-cs__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cs-line);
    transition: background 0.2s ease;
}
.inloff-cs__item:last-child { border-bottom: 0; }

.inloff-cs__item--main {
    background: var(--cs-cream);
    /* Reset Flatsome `li{margin:0}` defensive (universal selectors
       agresivos en algunas vistas). */
    margin: 0 !important;
}
.inloff-cs__item--cross.is-included {
    background: var(--cs-cream-warm);
}

/* checkbox de selección */
.inloff-cs__select {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    cursor: pointer;
}
.inloff-cs__checkbox {
    position: absolute;
    opacity: 0;
    width: 22px; height: 22px;
    margin: 0; cursor: pointer;
}
.inloff-cs__checkbox-box {
    width: 22px; height: 22px;
    border: 2px solid var(--cs-line);
    border-radius: 6px;
    display: inline-flex;
    align-items: center; justify-content: center;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.inloff-cs__checkbox:hover + .inloff-cs__checkbox-box { border-color: var(--cs-heart); }
.inloff-cs__checkbox:focus-visible + .inloff-cs__checkbox-box {
    outline: 2px solid var(--cs-heart);
    outline-offset: 2px;
}
.inloff-cs__checkbox:checked + .inloff-cs__checkbox-box {
    background: var(--cs-navy);
    border-color: var(--cs-navy);
}
.inloff-cs__checkbox:checked + .inloff-cs__checkbox-box::after {
    content: "";
    width: 6px; height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}

/* thumb */
.inloff-cs__thumb {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--cs-cream);
    border: 1px solid var(--cs-line);
}
.inloff-cs__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* body */
.inloff-cs__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.inloff-cs__name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cs-navy);
}
.inloff-cs__tag--this {
    display: inline-block;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cs-ink-soft);
}

/* estado de personalización (chip clicable) */
.inloff-cs__perso-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--cs-heart);
    background: var(--cs-cream-warm);
    color: var(--cs-navy);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease;
}
.inloff-cs__perso-state:hover { background: #fff; }
.inloff-cs__perso-state[data-state="done"] {
    border-color: #2E7D32;
    color: #2E7D32;
    background: #E8F5EC;
    cursor: pointer;
}
.inloff-cs__perso-icon { display: inline-flex; }
.inloff-cs__perso-icon .inloff-ico { width: 13px; height: 13px; }

/* Estado "ya en el carrito": el cross-sell se añadió al lote y vive en
   el carrito. Checkbox deshabilitado para que el usuario no lo añada
   dos veces; tarjeta atenuada. Click en el chip lleva a editar la
   personalización en la PDP del producto. */
.inloff-cs__item--cross.is-in-cart {
    opacity: 0.72;
}
.inloff-cs__item--cross.is-in-cart .inloff-cs__checkbox-box {
    border-color: var(--cs-heart-deep);
    background: var(--cs-heart);
    color: #fff;
}
.inloff-cs__item--cross.is-in-cart .inloff-cs__checkbox-box::after {
    content: '✓';
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.inloff-cs__item--cross.is-in-cart .inloff-cs__perso-state {
    background: #FAEFE6;
    border-color: var(--cs-heart);
    color: var(--cs-heart-deep);
}

/* ---------- selector qty inline (cs_qty_mode = variable) ----------
   Aparece para productos de evento/volumen (llaveros de boda, marca-páginas,
   etc.) donde la misma personalización aplica a N unidades.

   IMPORTANTE — RESET FLATSOME. Flatsome aplica globalmente:
     button { background:var(--fs-color-primary); color:#fff; margin-right:1em;
              padding:0 1.2em; min-height:2.5em; min-width:24px;
              text-transform:uppercase; letter-spacing:.03em; line-height:2.4em;
              border:1px solid transparent; font-weight:bolder }
     input  { border-radius:99px; margin-bottom:0 }
   Sin reset agresivo nuestro botón sale navy por defecto, con margin-right
   1em (gap visible) y el input se ve como píldora. Usamos `!important` en
   los resets críticos porque Flatsome aplica reglas globales que ganan
   por especificidad equivalente. */
.inloff-cs__qty {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--cs-line);
    border-radius: 8px;
    background: #fff;
    height: 38px;
    margin-right: 6px;
}
.inloff-cs__qty-btn {
    /* reset Flatsome */
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    max-width: none;
    text-transform: none !important;
    letter-spacing: normal !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none;
    /* layout */
    flex: 0 0 36px;
    width: 36px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* typografia */
    color: var(--cs-navy);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
    /* radius coincidente con el contenedor (8 − 1 border = 7) */
    border-radius: 0;
}
.inloff-cs__qty-btn:first-child {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}
.inloff-cs__qty-btn:last-child {
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}
.inloff-cs__qty-btn:hover {
    background-color: var(--cs-navy) !important;
    color: #fff;
}
.inloff-cs__qty-btn:active {
    background-color: var(--cs-navy-deep) !important;
    color: #fff;
}
.inloff-cs__qty-btn:focus-visible {
    outline: 2px solid var(--cs-heart);
    outline-offset: -2px;
    z-index: 1;
}
.inloff-cs__qty-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background-color: transparent !important;
    color: var(--cs-navy);
}
.inloff-cs__qty-input {
    /* reset Flatsome */
    border-radius: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    /* layout */
    flex: 0 0 42px;
    width: 42px;
    height: 100%;
    border: 0;
    border-left: 1px solid var(--cs-line);
    border-right: 1px solid var(--cs-line);
    background: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--cs-navy);
    padding: 0;
    appearance: textfield;
    -moz-appearance: textfield;
}
.inloff-cs__qty-input:focus {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--cs-heart);
}
.inloff-cs__qty-input::-webkit-inner-spin-button,
.inloff-cs__qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* precio */
.inloff-cs__price {
    flex: 0 0 auto;
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    color: var(--cs-navy);
    white-space: nowrap;
}
.inloff-cs__price-base {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--cs-ink-soft);
    text-decoration: line-through;
}
.inloff-cs__price-offer {
    text-decoration: none;
    color: var(--cs-heart-deep);
}
.inloff-cs__price-unit {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--cs-ink-soft);
    text-transform: lowercase;
    letter-spacing: 0.2px;
    margin-top: 2px;
}

/* ---------- footer (total + CTA) ---------- */
.inloff-cs__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.inloff-cs__total { display: flex; flex-direction: column; }
.inloff-cs__total-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cs-ink-soft);
}
.inloff-cs__total-amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--cs-navy);
}
.inloff-cs__add {
    flex: 1 1 auto;
    max-width: 320px;
    min-height: 52px;
    padding: 14px 24px;
    background: var(--cs-navy);
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}
.inloff-cs__add:hover:not(:disabled) { background: var(--cs-navy-deep); }
.inloff-cs__add:active:not(:disabled) { transform: translateY(1px); }
.inloff-cs__add:disabled { opacity: 0.45; cursor: not-allowed; }
.inloff-cs__hint {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--cs-ink-soft);
    min-height: 1em;
}

/* ============================================================
   Modal de personalización
   ----------------------------------------------------------------
   `!important` en display: hay CSS legacy v1/v2 que LiteSpeed
   incrusta como Critical CSS (`.inloff-cs-modal { display:none; }`
   + variante aria-hidden) que el child theme arrastra desde versiones
   anteriores. El v3 usa `[hidden]` para visibilidad, ganamos con
   `!important` para que el critical-css inline no fije el modal a
   `display:none` permanente.
   ============================================================ */
.inloff-cs-modal {
    /* C2.1 — Tokens redefinidos aquí porque el modal se portaliza a <body>
       (fuera de `.inloff-cs`, que es donde se declaran los `--cs-*`).
       Sin esto, al sacarlo del contenedor perdería la paleta de marca. */
    --cs-navy: #1B2540;
    --cs-navy-deep: #131A2E;
    --cs-heart: #C5A184;
    --cs-heart-deep: #B0875F;
    --cs-cream: #FAF7F2;
    --cs-cream-warm: #F5EFE5;
    --cs-line: #E8E1D4;
    --cs-ink-soft: #5A5650;

    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.inloff-cs-modal[hidden] { display: none !important; }

/* Ocultar el qty selector que EPO inyecta automáticamente en el form
   del producto asociado. No lo usamos — la cantidad del cross-sell se
   toma de `data-cs-qty` (configurado en el repeater ACF `inloff_cs_items`),
   y el input visible "0" confunde al usuario. */
.inloff-cs-modal__form .tm-quantity-alt,
.inloff-cs-modal__form input[name^="inloff_cs_"][name$="_quantity"] {
    display: none !important;
}

/* ----------------------------------------------------------------
   FIX 2da+ apertura del modal vacío (BUG REPORTADO POR USUARIO):
   `tm-epo.css` define `.tc-extra-product-options { visibility: hidden }`
   y EPO se encarga de quitarla con su JS de init cuando el form está
   listo (la 1ra vez). En la 2da+ apertura el container queda marcado
   `.tc-init` y aunque pasamos `reactivate: true`, el step interno de
   EPO que toca `visibility` no se re-ejecuta → el form queda invisible
   para el usuario aunque el HTML esté inyectado correctamente.
   Solo afecta dentro del popup, no toca conditional logic (tc-hidden,
   tcdisabled siguen funcionando para mostrar/ocultar campos según
   reglas del producto). ---------------------------------------------- */
.inloff-cs-modal__form .tc-extra-product-options,
.inloff-cs-modal__form .tc-extra-product-options-inline {
    visibility: visible !important;
}

.inloff-cs-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(19, 26, 46, 0.55);
}
.inloff-cs-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--cs-cream, #FAF7F2);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(19, 26, 46, 0.28);
    padding: 28px 26px 22px;
    animation: inloff-cs-modal-in 0.28s cubic-bezier(.22,.61,.36,1);
}
@keyframes inloff-cs-modal-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.inloff-cs-modal__close {
    position: absolute;
    top: 12px; right: 14px;
    width: 34px; height: 34px;
    border: 0; background: transparent;
    font-size: 26px; line-height: 1;
    color: var(--cs-ink-soft);
    cursor: pointer; border-radius: 8px;
    z-index: 4; /* O2.9: por encima del título sticky */
}
.inloff-cs-modal__close:hover { background: rgba(0,0,0,0.05); }
/* O2.9 — El título NO es sticky: al fijarlo, su fondo cream tapaba el primer
   eyebrow de sección del form EPO ("COLOR CINTA") que scrolleaba por debajo
   (regresión 2026-05-31). El título scrollea con el contenido; lo que sí
   mantenemos sticky son las ACCIONES abajo (Guardar/Cancelar siempre visibles). */
.inloff-cs-modal__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--cs-navy);
    margin: 0 0 16px;
    padding-right: 44px;
}
/* Callout con borde completo suave (no side-stripe: un border-left de 3px
   es un anti-pattern). El tinte cream-warm + borde heart al 35% ya señalan
   "nota" sin recurrir a la franja lateral. */
.inloff-cs-modal__qty-helper {
    margin: -8px 0 16px;
    padding: 10px 14px;
    background: var(--cs-cream-warm);
    border: 1px solid rgba(197, 161, 132, 0.38);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cs-navy);
}
.inloff-cs-modal__qty-helper[hidden] { display: none; }
.inloff-cs-modal__loading {
    display: flex; justify-content: center;
    padding: 40px 0;
}
.inloff-cs-modal__spinner {
    width: 28px; height: 28px;
    border: 3px solid var(--cs-line);
    border-top-color: var(--cs-heart);
    border-radius: 50%;
    animation: inloff-cs-spin 0.8s linear infinite;
}
@keyframes inloff-cs-spin { to { transform: rotate(360deg); } }
.inloff-cs-modal__error { color: #C0392B; text-align: center; padding: 24px 0; }

/* O2.9 — Acciones sticky al fondo: Guardar/Cancelar siempre alcanzables sin
   scroll interno. Breakout del padding del panel para ocupar todo el ancho. */
.inloff-cs-modal__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 20px -26px -22px;
    padding: 16px 26px 22px;
    border-top: 1px solid var(--cs-line);
    background: var(--cs-cream, #FAF7F2);
}
.inloff-cs-modal__cancel {
    padding: 11px 18px;
    background: transparent;
    border: 1px solid var(--cs-line);
    border-radius: 9px;
    color: var(--cs-navy);
    font-weight: 600;
    cursor: pointer;
}
.inloff-cs-modal__cancel:hover { border-color: var(--cs-navy); }
.inloff-cs-modal__confirm {
    padding: 11px 20px;
    background: var(--cs-heart);
    border: 0;
    border-radius: 9px;
    color: var(--cs-navy);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease;
}
.inloff-cs-modal__confirm:hover:not(:disabled) { background: var(--cs-heart-deep); color: #fff; }
.inloff-cs-modal__confirm:disabled { opacity: 0.5; cursor: not-allowed; }

body.inloff-cs-modal-open { overflow: hidden; }

/* ---------- aplanar el form EPO dentro del modal ----------
   El render nativo de EPO anida cajas crema; aquí lo dejamos limpio. */
.inloff-cs-modal__form .tc-epo-element-product-container,
.inloff-cs-modal__form .tc-extra-product-options-inline,
.inloff-cs-modal__form .tc-extra-product-options,
.inloff-cs-modal__form .cpf-section,
.inloff-cs-modal__form .tc-section-inner-wrap {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.inloff-cs-modal__form .tm-extra-product-options-fields { margin: 0; padding: 0; list-style: none; }
.inloff-cs-modal__form .tm-extra-product-options-field { margin: 0 0 16px; }
.inloff-cs-modal__form .tc-section-label-text,
.inloff-cs-modal__form .tc-epo-label,
.inloff-cs-modal__form .tm-epo-field-label,
.inloff-cs-modal__form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cs-navy);
}
.inloff-cs-modal__form input[type="text"],
.inloff-cs-modal__form input[type="number"],
.inloff-cs-modal__form textarea,
.inloff-cs-modal__form select {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid var(--cs-line);
    border-radius: 9px;
    background: #fff;
    font-size: 14px;
    color: var(--cs-navy);
}
.inloff-cs-modal__form input:focus,
.inloff-cs-modal__form textarea:focus,
.inloff-cs-modal__form select:focus {
    outline: 0;
    border-color: var(--cs-heart);
    box-shadow: 0 0 0 3px rgba(197, 161, 132, 0.22);
}
/* ocultar duplicados de precio/total del form asociado dentro del modal */
.inloff-cs-modal__form .tc-epo-totals,
.inloff-cs-modal__form .product-price,
.inloff-cs-modal__form .quantity-wrapper { display: none !important; }

.inloff-cs-shake { animation: inloff-cs-shake 0.4s; }
@keyframes inloff-cs-shake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ---------- responsive ---------- */
@media (max-width: 600px) {
    .inloff-cs__item { gap: 10px; padding: 12px; }
    .inloff-cs__thumb { width: 48px; height: 48px; }
    .inloff-cs__footer { flex-direction: column; align-items: stretch; }
    .inloff-cs__add { max-width: none; }
    .inloff-cs-modal { padding: 0; }
    .inloff-cs-modal__panel { max-width: none; max-height: 100vh; border-radius: 0; min-height: 100vh; }
}

@media (prefers-reduced-motion: reduce) {
    .inloff-cs-modal__panel,
    .inloff-cs-shake,
    .inloff-cs-modal__spinner { animation: none; }
    .inloff-cs__add,
    .inloff-cs__item { transition: none; }
}

/* ============================================================
   PDP — banner "Ya lo tienes en oferta"
   ============================================================ */
.inloff-cs-offer-banner {
    margin: 14px 0 0;
    background: #F8F1E5;                /* cream Inloff */
    border: 1px solid rgba(197, 161, 132, .45);
    border-radius: 12px;
    padding: 14px 16px;
    color: #1B2540;                     /* navy Inloff */
}
.inloff-cs-offer-banner[hidden] { display: none !important; }

.inloff-cs-offer-banner__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.inloff-cs-offer-banner__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #C5A184;                /* heart */
    color: #FFFFFF;
    font-size: 18px;
    line-height: 1;
}

.inloff-cs-offer-banner__text {
    flex: 1 1 220px;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #1B2540;
}
.inloff-cs-offer-banner__text strong { font-weight: 700; }

.inloff-cs-offer-banner__cta.button {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 8px 16px !important;
    background: #1B2540 !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transition: background-color .18s ease, transform .12s ease;
}
.inloff-cs-offer-banner__cta.button:hover,
.inloff-cs-offer-banner__cta.button:focus {
    background: #2A3658 !important;
    color: #FFFFFF !important;
}
.inloff-cs-offer-banner__cta.button:active { transform: translateY(1px); }

@media (max-width: 600px) {
    .inloff-cs-offer-banner__inner { gap: 10px; }
    .inloff-cs-offer-banner__text { flex: 1 1 100%; order: 2; }
    .inloff-cs-offer-banner__icon { order: 1; }
    .inloff-cs-offer-banner__cta.button { order: 3; width: 100%; text-align: center; }
}