/* ==========================================================
   CHECKOUT BONGON — Floating labels + validación inline
   ========================================================== */

.checkout-form {
    /* --header-h se hereda de <html> (JS mide el header real).
       El fallback 88px en calc() cubre el caso en que JS aún no se haya ejecutado. */
    padding-top: calc(var(--header-h, 88px) + 1.25rem);
    padding-bottom: clamp(24px, 3vw, 40px);
}

/* ---------- Floating label ---------- */
.fl-field {
    position: relative;
    margin-bottom: 1.05rem;
}

.fl-input {
    width: 100%;
    padding: 0.62rem 0.8rem 0.5rem;
    font-size: 0.92rem;
    line-height: 1.4;
    color: #3e2723;
    background: #ffffff;
    border: 1px solid #cbd2d9;
    border-radius: 0.55rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
    -webkit-appearance: textfield;
}

.fl-input:focus {
    border-color: #1e3a8a;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.14);
}

.fl-label {
    position: absolute;
    left: 0.8rem;
    top: 0.62rem;
    font-size: 0.92rem;
    color: #6b7280;
    pointer-events: none;
    transition: 0.2s ease all;
    /* Fondo opaco igual al del input para tapar el borde que pasa por detrás */
    background-color: #ffffff;
    z-index: 1;
    padding: 0 0.4rem;
    line-height: 1;
    white-space: nowrap;
}

/* Label sube cuando el campo está enfocado o tiene contenido */
.fl-field.filled .fl-label,
.fl-field:focus-within .fl-label {
    top: -0.42rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #1e3a8a;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ---------- Estados de error ---------- */
.fl-field.error .fl-input {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.fl-error {
    display: none;
    color: #dc2626;
    font-size: 0.78rem;
    margin-top: 0.32rem;
    min-height: 0.95rem;
    line-height: 1.3;
}

.fl-field.error .fl-error {
    display: block;
}

/* ---------- Banner de error global (backend / red) ---------- */
.checkout-error-banner {
    display: none;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 0.55rem;
    padding: 0.7rem 1rem;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

.checkout-error-banner.show {
    display: block;
}

/* ---------- Scroll suave al primer error (respeta header fijo) ---------- */
html {
    scroll-padding-top: calc(var(--header-h, 88px) + 1rem);
}
/* V10.1 Fase 2: direcciones guardadas */
.saved-addresses{display:grid;gap:9px;margin-bottom:20px}
.saved-addresses__heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:3px;font-size:14px}
.saved-addresses__heading a{font-size:12px;color:#1f3d94;text-decoration:underline}
.saved-addresses__option{display:flex;gap:11px;padding:11px 13px;border:1px solid #dfded9;border-radius:11px;background:#fff;cursor:pointer;align-items:flex-start}
.saved-addresses__option:has(input:checked){border-color:#28449b;background:#f3f6ff;box-shadow:0 0 0 1px #28449b inset}
.saved-addresses__option input{accent-color:#243e96;margin-top:4px}
.saved-addresses__option span{font-size:13px;line-height:1.4;min-width:0}
.saved-addresses__option small{display:block;font-size:12px;color:#667085;margin-top:2px}
@media(max-width:500px){.saved-addresses__heading{align-items:flex-start;flex-direction:column}}

/* BonGon V10.1 - identificadores de pago, sin depender de recursos externos */
.checkout-payment-logos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 14px;
}
.checkout-payment-logos__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 43px;
    padding: 5px 3px;
    background: #fff;
    border: 1px solid #dce3ed;
    border-radius: 8px;
}
.checkout-payment-logos__item img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 29px;
    object-fit: contain;
}
.checkout-payment-logos__note {
    margin-top: 7px;
    font-size: 11px;
    color: #6b7280;
    line-height: 1.35;
}
@media (max-width: 330px) {
    .checkout-payment-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* BonGon V10.3 REV6 — compra editorial, responsive sin tablas horizontales. */
.checkout-rev6 { --checkout-ink:#45352e; --checkout-copper:#9b613e; --checkout-line:#e9ddd0; color:var(--checkout-ink); background:linear-gradient(165deg,#f4e7d5 0%,#f8f4ed 54%,#eee4d8 100%); }
.checkout-rev6__container { padding-bottom:38px; }
.checkout-rev6__intro { padding:16px 0 25px; }
.checkout-rev6__intro > span { display:block; letter-spacing:.23em; font:600 11px Montserrat,Arial,sans-serif; color:#966e56; }
.checkout-rev6__intro h1 { margin:5px 0 4px; font:600 clamp(31px,3.6vw,50px) 'Playfair Display',Georgia,serif; letter-spacing:-.035em; color:#442d25; }
.checkout-rev6__intro p { font-size:14px; color:#796b61; }
.checkout-rev6__grid { align-items:start; gap:22px; }
.checkout-rev6__grid > div { min-width:0; }
.checkout-rev6 .checkout-rev6__selected,
.checkout-rev6 .checkout-ticket,
.checkout-rev6__grid > div > .bg-\[\#f5f1e8\],
.checkout-rev6__grid > div > .bg-white { border:1px solid var(--checkout-line); border-radius:18px; box-shadow:0 9px 24px rgba(73,46,31,.055); }
.checkout-rev6 .checkout-rev6__selected { padding:24px 24px 14px; }
.checkout-rev6 .checkout-rev6__selected > h2 { font-family:'Playfair Display',Georgia,serif; font-size:24px; text-transform:none; letter-spacing:-.025em; font-weight:600; color:#453128; border-bottom:1px solid var(--checkout-line); padding-bottom:15px; }
.checkout-cart-list { display:grid; gap:0; }
.checkout-cart-item { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(118px,.75fr); column-gap:15px; row-gap:17px; align-items:center; padding:20px 0; border-bottom:1px solid #eee5dc; min-width:0; transition:opacity .2s; }
.checkout-cart-item:last-child { border-bottom:0; }
.checkout-cart-item.is-updating { opacity:.55; pointer-events:none; }
.checkout-cart-item__product { grid-column:1 / span 2; display:flex; gap:16px; align-items:center; min-width:0; }
.checkout-cart-item__image { display:flex; align-items:center; justify-content:center; flex:0 0 104px; width:104px; height:110px; background:#fbf9f6; border:1px solid #eee9e3; border-radius:13px; overflow:hidden; }
.checkout-cart-item__image img { width:100%; height:100%; object-fit:contain; }
.checkout-cart-item__details { min-width:0; }
.checkout-cart-item__details h3 { font:600 19px/1.3 'Playfair Display',Georgia,serif; color:#402e28; margin-bottom:9px; overflow-wrap:anywhere; }
.checkout-cart-item__variants { display:flex; flex-wrap:wrap; gap:7px; font-size:11px; color:#75665d; }
.checkout-cart-item__variants span { display:inline-flex; gap:4px; background:#f6efe6; border:1px solid #eddfd1; border-radius:50px; padding:5px 9px; }
.checkout-cart-item__variants strong { color:#634739; font-weight:650; }
.checkout-cart-item__details small { display:block; color:#9c8c81; margin-top:7px; font-size:10px; overflow-wrap:anywhere; }
.checkout-cart-item__pricing, .checkout-cart-item__quantity, .checkout-cart-item__subtotal { display:flex; flex-direction:column; gap:6px; min-width:0; }
.checkout-cart-item__pricing > span, .checkout-cart-item__quantity > span, .checkout-cart-item__subtotal > span { font-size:10px; color:#8b7e73; text-transform:uppercase; letter-spacing:.07em; }
.checkout-cart-item__pricing strong { font-weight:500; font-size:14px; color:#64544a; }
.checkout-cart-item__subtotal strong { font-size:18px; color:#57372c; font-weight:750; white-space:nowrap; }
.checkout-cart-item__quantity { grid-column:3; grid-row:1; }
.checkout-cart-item__stepper { display:inline-flex; align-items:center; justify-content:space-between; border:1px solid #ddcfc2; border-radius:11px; width:max-content; overflow:hidden; }
.checkout-cart-item__stepper button { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:0; background:#faf6f0; color:#523c31; font-size:20px; font-weight:500; cursor:pointer; }
.checkout-cart-item__stepper button:disabled { opacity:.4; cursor:not-allowed; }
.checkout-cart-item__stepper button:not(:disabled):hover { background:#eee2d6; }
.checkout-cart-item__stepper output { min-width:32px; text-align:center; font-size:14px; font-weight:700; }
.checkout-cart-item__remove { justify-self:end; color:#8c4e41; background:transparent; border-bottom:1px solid currentColor; padding:4px 0; font-size:12px; font-weight:600; cursor:pointer; }
.checkout-cart-item__remove:hover { color:#a02d25; }
.checkout-cart-empty { display:grid; justify-items:center; gap:8px; padding:38px 8px; text-align:center; }
.checkout-cart-empty__icon { font-size:45px; color:#b99d8b; }
.checkout-cart-empty p { font:600 22px 'Playfair Display',Georgia,serif; color:#493229; }
.checkout-cart-empty span { color:#85756a; font-size:13px; }
.checkout-cart-empty a { display:inline-block; background:#684b3e; color:#fff; border-radius:50px; padding:12px 24px; font-size:13px; font-weight:700; margin-top:12px; }
.checkout-rev6 .checkout-ticket { padding:24px; }
.checkout-rev6 .checkout-ticket #ticket-title { font:600 20px 'Playfair Display',Georgia,serif; letter-spacing:-.02em; text-transform:none; color:#463127; }
.checkout-rev6 #ticket-items > div { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:13px; font-size:13px; }
.checkout-rev6 #ticket-items > div span { overflow-wrap:anywhere; }
.checkout-rev6 #ticket-items > div span:last-child { white-space:nowrap; font-weight:650; }
.checkout-rev6 #ticket-total { color:#583a2f; }
.checkout-rev6 #payment-button { background:#6c4a3b; border-radius:100px; min-height:48px; box-shadow:0 5px 15px rgba(70,45,31,.14); }
.checkout-rev6 #payment-button:hover { background:#50362e; }
.checkout-rev6 .fl-input:focus { border-color:#91664f; box-shadow:0 0 0 3px rgba(145,102,79,.14); }
.checkout-rev6 .fl-field:focus-within .fl-label { color:#745039; }
.checkout-rev6 .postal-search-btn { background:#6c4a3b; border-color:#6c4a3b; }
.checkout-rev6 .postal-search-btn:hover { background:#4b3228; }
@media(min-width:1024px) { .checkout-rev6__grid > div:last-child { position:sticky; top:calc(var(--header-h,88px) + 16px); } }
@media(max-width:900px) {
  .checkout-rev6__container { padding-left:16px; padding-right:16px; }
  .checkout-rev6__grid { gap:20px; }
  .checkout-rev6__intro { padding:10px 0 20px; }
}
@media(max-width:600px) {
  .checkout-rev6__container { padding-left:12px; padding-right:12px; }
  .checkout-rev6__intro h1 { font-size:33px; }
  .checkout-rev6__intro p { font-size:13px; }
  .checkout-rev6__grid > div > .p-6, .checkout-rev6 .checkout-rev6__selected, .checkout-rev6 .checkout-ticket { padding:18px 15px; }
  .checkout-rev6 .checkout-rev6__selected > h2 { font-size:22px; }
  .checkout-cart-item { grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px 12px; padding:21px 0; }
  .checkout-cart-item__product { grid-column:1/-1; }
  .checkout-cart-item__image { flex-basis:90px; width:90px; height:98px; }
  .checkout-cart-item__details h3 { font-size:19px; }
  .checkout-cart-item__quantity { grid-column:1; grid-row:2; }
  .checkout-cart-item__pricing { grid-column:2; grid-row:2; align-items:flex-end; text-align:right; }
  .checkout-cart-item__subtotal { grid-column:1; grid-row:3; }
  .checkout-cart-item__remove { grid-column:2; grid-row:3; align-self:end; }
  .checkout-rev6 .fl-input { font-size:16px; min-width:0; }
  .checkout-rev6 .fl-label { font-size:13px; }
  .checkout-rev6 #envio-cp { font-size:16px; }
  .checkout-rev6 .fl-field:has(#envio-cp), .checkout-rev6 .fl-field:has(#envio-colonia) { grid-column:1/-1; }
  .checkout-rev6 .postal-control { flex-wrap:nowrap; }
  .checkout-rev6 .postal-search-btn { width:auto; min-width:80px; }
  .checkout-rev6 #ticket-total { font-size:23px; }
  .checkout-rev6 .checkout-ticket > div:first-child { flex-wrap:wrap; gap:9px; }
}
@media(max-width:350px) {
  .checkout-cart-item__image { flex-basis:74px; width:74px; height:84px; }
  .checkout-cart-item__stepper button { width:34px; height:36px; }
  .checkout-rev6 .postal-search-btn { min-width:70px; }
}

/* REV7 — checkout: datos primero, productos después y resumen/pago al final. */
.checkout-rev7__products { overflow:visible; }
.checkout-rev6 .checkout-rev7__products { padding:0; }
.checkout-rev7__products-toggle {
    display:flex; align-items:center; gap:12px; min-height:72px; padding:18px 23px;
    cursor:pointer; list-style:none; border-radius:18px; user-select:none;
}
.checkout-rev7__products-toggle::-webkit-details-marker { display:none; }
.checkout-rev7__products-toggle::marker { content:''; }
.checkout-rev7__products-toggle:focus-visible { outline:3px solid #86624d; outline-offset:-4px; }
.checkout-rev7__products-heading { display:flex; flex-direction:column; flex:1; gap:3px; min-width:0; }
.checkout-rev7__products-title { font:600 23px/1.2 'Playfair Display', Georgia, serif; color:#453128; }
.checkout-rev7__products-meta { font:400 12px/1.4 'Montserrat', Arial, sans-serif; color:#78675b; }
.checkout-rev7__products-price { color:#654537; font:700 17px/1.2 'Montserrat', Arial, sans-serif; white-space:nowrap; }
.checkout-rev7__products-chevron { width:11px; height:11px; border-right:2px solid #76564a; border-bottom:2px solid #76564a; transform:translateY(-2px) rotate(45deg); transition:transform .2s; margin:0 5px; flex-shrink:0; }
.checkout-rev7__products[open] .checkout-rev7__products-chevron { transform:translateY(2px) rotate(225deg); }
.checkout-rev7__products-body { padding:0 23px 10px; border-top:1px solid #eee5dc; }
@media (max-width: 1023px) {
    .checkout-rev7__products-toggle { min-height:74px; }
    .checkout-rev7__products-body { padding:4px 17px 9px; }
    .checkout-rev7__products-title { font-size:21px; }
}
@media (max-width: 440px) {
    .checkout-rev7__products-toggle { padding:16px; gap:8px; }
    .checkout-rev7__products-price { font-size:15px; }
    .checkout-rev7__products-title { font-size:20px; }
}