/* ==========================================================
   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)); }
}