/* ==========================================================================
   Checkout — campos agrupados estilo Apple + Express Checkout (wallets)
   Cerveza TierraBuena · se carga DESPUÉS de custom.css
   Acento único: dorado #c8a24a · monocromo cálido
   ========================================================================== */

/* ---------- grupo de campos (hoja de dirección estilo Apple Wallet) -------- */
.ctb-fieldgroup {
    background: #f7f3ea;                       /* tinte cálido claro sobre la tarjeta blanca */
    border: 1px solid rgba(43, 33, 24, 0.09);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.ctb-fg-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    position: relative;
    transition: background-color .18s ease;
}

/* divisor hairline entre filas (no bordes gruesos por campo) */
.ctb-fg-row + .ctb-fg-row {
    border-top: 1px solid rgba(43, 33, 24, 0.075);
}

.ctb-fg-row > label {
    flex: 0 0 92px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .1px;
    line-height: 1.2;
    color: #8a7e6d;                            /* etiqueta apagada */
    text-transform: none;
    white-space: nowrap;
}

.ctb-fg-row > input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    padding: 3px 0;
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    line-height: 1.3;
    color: var(--ctb-brown);
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    box-shadow: none;
}
.ctb-fg-row > input::placeholder { color: #b8ad9b; opacity: 1; }
.ctb-fg-row > input:focus { outline: none; box-shadow: none; }

/* fila activa: se "eleva" en blanco + fina línea dorada a la izquierda */
.ctb-fg-row:focus-within { background: #ffffff; }
.ctb-fg-row::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ctb-gold);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .2s ease;
}
.ctb-fg-row:focus-within::before { transform: scaleY(1); }

/* separación del bloque de error tras el grupo */
.ctb-fieldgroup + .ctb-co-err { margin-top: 10px; }

/* ---------- Express Checkout — Apple Pay / Google Pay / Link ---------------- */
.ctb-express-wrap { margin: 2px 0 4px; }
#ctb-express-checkout { min-height: 0; }
#ctb-express-checkout:not(:empty) { margin-bottom: 16px; }

/* divisor "o paga con tarjeta" */
.ctb-pay-divider {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin: 2px 0 16px;
    color: #a99c88;
    font-size: 13px;
    letter-spacing: .3px;
}
.ctb-pay-divider::before,
.ctb-pay-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(43, 33, 24, 0.12);
}

/* ---------- caja de pago (Payment Element) — coherente con los grupos ------ */
.ctb-checkout-page .ctb-co-pay {
    border: 1px solid rgba(43, 33, 24, 0.09);
    border-radius: 20px;
    padding: 18px;
    background: #ffffff;
}
.ctb-checkout-page #ctb-stripe-element:not(:empty) { margin-top: 2px; }

/* ---------- responsive (sin overflow horizontal a 390px) ------------------- */
@media (max-width: 480px) {
    .ctb-fg-row { padding: 12px 15px; gap: 10px; }
    .ctb-fg-row > label { flex-basis: 74px; font-size: 12.5px; }
    .ctb-fg-row > input { font-size: 16px; }   /* 16px evita el zoom automático en iOS */
}

/* ===== CTB: fondo blanco + form box cremita con sombra inferior ===== */
.ctb-checkout-page, .ctb-checkout-page.mil-soft-bg { background: #ffffff !important; }

.ctb-co-form {
  background: #f6f3ee !important;
  border-radius: 24px !important;
  padding: 44px !important;
  box-shadow: 0 26px 50px -14px rgba(43, 33, 24, .22) !important;
  border: 1px solid #ece5d8;
}
@media (max-width: 576px) { .ctb-co-form { padding: 22px !important; } }

/* campos en blanco sobre la crema, agrupados como box */
.ctb-fieldgroup {
  background: #ffffff !important;
  border: 1px solid #e7ded0 !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(43,33,24,.05);
}
.ctb-fg-row { background: #ffffff !important; }
.ctb-fg-row:focus-within { background: #fcfaf5 !important; }
.ctb-fg-row + .ctb-fg-row { border-top: 1px solid #efe8db !important; }

/* caja de pago tambien blanca sobre crema */
.ctb-checkout-page .ctb-co-pay { background: #ffffff !important; border: 1px solid #e7ded0 !important; }