/* ==========================================================================
   Cerveza TierraBuena — sistema unificado de campos "pill + icono minimalista"
   Se carga DESPUÉS de custom.css / checkout-apple.css / club-join.css
   (debe ser la última hoja para ganar la cascada, incl. !important de mobile-fixes)

   Patrón:
     <div class="ctb-pill-field">
       <i class="fas fa-user ctb-pill-ico" aria-hidden="true"></i>
       <label class="ctb-vh" for="id">Nombre</label>
       <input class="ctb-pill-input" id="id" ...>
     </div>

   Filas multi-campo: envolver varios .ctb-pill-field en .ctb-pill-row
   Columna de campos:  envolver todo en .ctb-pill-fields
   Marca: relleno crema, texto café, icono taupe -> dorado en focus.
   ========================================================================== */

:root {
    --ctb-pill-fill: #fbfaf6;
    --ctb-pill-text: #2b2118;
    --ctb-pill-icon: #9a8b73;
    --ctb-pill-gold: #c8a24a;
    --ctb-pill-ph:   #b0a48f;
    --ctb-pill-shadow: 0 7px 5px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .05);
}

/* etiqueta accesible pero oculta (el icono + placeholder comunican el campo) */
.ctb-vh {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- contenedor de la columna de campos ---------- */
.ctb-pill-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---------- fila multi-campo (stack en móvil, sin overflow a 390) ---------- */
.ctb-pill-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.ctb-pill-row > .ctb-pill-field {
    flex: 1 1 140px;
    min-width: 0;
}

/* ---------- campo individual ---------- */
.ctb-pill-field {
    position: relative;
    display: block;
}

/* icono minimalista (line/feather) a la izquierda, dentro del campo */
.ctb-pill-ico {
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 19px;
    height: 19px;
    color: var(--ctb-pill-icon);
    stroke: currentColor;
    fill: none;
    pointer-events: none;
    transition: color .2s ease;
    z-index: 2;
    display: block;
}

/* input tipo píldora, sin borde visible, sombra suave, relleno crema */
.ctb-pill-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    margin: 0;
    padding: 0.95rem 1.2rem 0.95rem 3.2rem !important;
    font-family: 'Outfit', sans-serif;
    font-size: 16px !important;            /* 16px evita el zoom automático en iOS */
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none !important;
    color: var(--ctb-pill-text) !important;
    background: var(--ctb-pill-fill) !important;
    border: none !important;
    border-radius: 1.9rem !important;
    box-shadow: var(--ctb-pill-shadow) !important;
    -webkit-appearance: none;
    appearance: none;
    transition: box-shadow .2s ease, background-color .2s ease;
}
.ctb-pill-input::placeholder { color: var(--ctb-pill-ph); opacity: 1; text-transform: none; letter-spacing: 0; }

.ctb-pill-input:hover { background: #ffffff !important; }

.ctb-pill-input:focus {
    outline: none;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(200, 162, 74, .18), var(--ctb-pill-shadow) !important;
}
.ctb-pill-field:focus-within .ctb-pill-ico { color: var(--ctb-pill-gold); }

/* ---------- textarea (icono arriba) ---------- */
textarea.ctb-pill-input {
    min-height: 120px;
    border-radius: 1.3rem !important;
    resize: vertical;
    line-height: 1.5;
}
.ctb-pill-field--area .ctb-pill-ico {
    top: 1.15rem;
    transform: none;
}

/* ---------- footer newsletter: mismo lenguaje sobre fondo oscuro ---------- */
.mil-subscribe-form { position: relative; }
.mil-subscribe-form .ctb-pill-ico {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 19px;
    height: 19px;
    color: var(--ctb-pill-icon);
    stroke: currentColor;
    fill: none;
    pointer-events: none;
    transition: color .2s ease;
    z-index: 2;
    display: block;
}
.mil-subscribe-form input {
    background-color: var(--ctb-pill-fill) !important;
    color: var(--ctb-pill-text) !important;
    text-transform: none !important;
    letter-spacing: .2px !important;
    font-size: 14px !important;
    padding-left: 50px !important;
    box-shadow: var(--ctb-pill-shadow) !important;
}
.mil-subscribe-form input::placeholder { color: var(--ctb-pill-ph) !important; text-transform: none !important; letter-spacing: .2px !important; }
.mil-subscribe-form input:hover,
.mil-subscribe-form input:focus { background-color: #ffffff !important; }
.mil-subscribe-form input:focus { box-shadow: 0 0 0 3px rgba(200, 162, 74, .22), var(--ctb-pill-shadow) !important; }
.mil-subscribe-form:focus-within .ctb-pill-ico { color: var(--ctb-pill-gold); }

/* separación del bloque de error tras la columna de campos */
.ctb-pill-fields + .ctb-cj-err,
.ctb-pill-fields + .ctb-co-err { margin-top: 10px; }

/* los formularios de club (estado / cancelar) llevan un pequeño margen inferior */
.ctb-club-form .ctb-pill-fields { margin-bottom: 16px; }

/* ---------- responsive ---------- */
@media (max-width: 480px) {
    .ctb-pill-input { padding: 0.9rem 1rem 0.9rem 3rem !important; }
    .ctb-pill-ico { left: 1.05rem; }
    .ctb-pill-row { gap: 12px; }
}