/**
 * GO1 TRANSFER SUITE — Frontend Fixes / contact-form.css v1.4.3
 * ─────────────────────────────────────────────────────────────
 * v1.4.3:
 *  - FIX teléfono gap izquierdo: .iti__flag-container con
 *    top/bottom/left: 0 + padding: 0 — el padding:1px que
 *    iTI aplica por defecto creaba el pequeño hueco visible
 *  - FIX centrado vertical: .iti__selected-flag con display:flex +
 *    align-items:center + height:100% — Chauffeur sobrescribía
 *    el flex de iTI y el contenido quedaba pegado arriba
 *  - Fix comentario CSS roto en bloque .chbs-panel
 *
 * v1.4.2:
 *  - FIX teléfono: QUITADO padding-left: 70px !important del input .iti
 *    iTI inyecta padding-left dinámicamente como style="" según el ancho real
 *    del flag + dial code. Overridearlo con !important lo corta antes del "+34"
 *    y el texto aparece "corrido". Ahora solo se controlan los otros 3 paddings.
 *  - FIX mobile: Reforzado reset de .chbs-form-field-width-50 con
 *    margin-right: 0 para evitar desbordamiento si Chauffeur tiene selector
 *    más específico en ese clase
 *
 * v1.3.7:
 *  - FIX teléfono móvil/desktop: selector universal sobre input[type="text"]
 *    (Chauffeur usa type="text" para el placeholder, no type="tel")
 *  - QUITADO el width: 64px forzado en .iti__selected-flag — dejar que
 *    iTI calcule el ancho natural del flag area según contenido
 *  - Padding-left fijo a 70px en TODOS los viewports (consistencia)
 *
 * v1.2.8 (anterior):
 *  - Padding con > selector directo (no rompe columnas)
 *  - Margin entre campos para más aire alrededor de los inputs
 *
 * REGLA DE ORO: .chbs-clear-fix no tiene padding horizontal propio.
 * Solo se le añade padding vertical con selector > (hijo directo).
 */

/* ══ CONTENEDOR .chbs-box-shadow ═════════════════════════════
   Tarjeta que envuelve el formulario de contacto.
   ══════════════════════════════════════════════════════════ */
.chbs-client-form .chbs-box-shadow {
	background: linear-gradient(160deg, #071e3a 0%, var(--go1-bg-2) 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.07) !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	margin-bottom: 16px !important;
}

/* ══ SECCIONES (.chbs-clear-fix) — solo hijos directos ══════
   Padding vertical por sección + separador sutil.
   SIN padding horizontal para no romper el float 50/50.
   ══════════════════════════════════════════════════════════ */
.chbs-client-form .chbs-box-shadow > .chbs-clear-fix {
	padding-top: 16px !important;
	padding-bottom: 8px !important;
	padding-left: 22px !important;
	padding-right: 22px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
	box-sizing: border-box !important;
	background: transparent !important;
}

.chbs-client-form .chbs-box-shadow > .chbs-clear-fix:last-of-type {
	border-bottom: none !important;
}

/* ══ PANEL (vuelo, aerolínea, cartel, facturación) ══════════ */
.chbs-client-form .chbs-box-shadow > .chbs-panel,
.chbs-client-form .chbs-client-form-billing-address {
	padding: 16px 22px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
	box-sizing: border-box !important;
	background: transparent !important;
}

/* ══ LABEL GRUPO ("Detalles de contacto") ══════════════════ */
.chbs-client-form .chbs-form-label-group {
	display: block !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--go1-teal) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	font-family: var(--go1-font) !important;
	margin-bottom: 14px !important;
}

/* ══ CAMPOS — margen entre ellos ════════════════════════════ */
.chbs-client-form .chbs-form-field {
	margin-bottom: 14px !important;
	box-sizing: border-box !important;
}

/* ══ LABELS ════════════════════════════════════════════════ */
.chbs-client-form label,
.chbs-passenger-form label {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: rgba(255, 255, 255, 0.5) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	margin-bottom: 6px !important;
	display: block !important;
	font-family: var(--go1-font) !important;
}

/* ══ INPUTS: fondo oscuro ══════════════════════════════════
   min-height: 50px para que todos los campos (contact, vuelo,
   aerolínea, cartel) tengan la misma altura visual sin importar
   el contexto padre (.chbs-clear-fix o .chbs-panel).
   ══════════════════════════════════════════════════════════ */
.chbs-client-form .chbs-form-field input[type="text"],
.chbs-client-form .chbs-form-field input[type="email"],
.chbs-client-form .chbs-form-field input[type="tel"],
.chbs-client-form .chbs-form-field input[type="number"],
.chbs-client-form .chbs-form-field select,
.chbs-client-form .chbs-box-shadow input[type="text"],
.chbs-client-form .chbs-box-shadow input[type="email"],
.chbs-client-form .chbs-box-shadow input[type="tel"],
.chbs-passenger-form .chbs-form-field input[type="text"],
.chbs-passenger-form .chbs-form-field input[type="email"],
.chbs-passenger-form .chbs-form-field input[type="tel"] {
	background-color: rgba(5, 15, 35, 0.90) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 14px !important;
	color: #ffffff !important;
	padding: 13px 16px !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	font-family: var(--go1-font) !important;
	width: 100% !important;
	min-height: 50px !important;
	box-sizing: border-box !important;
	transition: border-color 0.15s !important;
	-webkit-appearance: none !important;
}

/* ── SELECT — altura explícita ─────────────────────────────
   Los select no responden a min-height igual que inputs.
   Se necesita height explícito + appearance:none para
   que tengan el mismo tamaño visual que los inputs.
   La flecha nativa se oculta con appearance:none y añadimos
   una flecha CSS custom via background-image. */
.chbs-client-form select,
.chbs-client-form .chbs-client-form-billing-address select {
	height: 50px !important;
	min-height: 50px !important;
	border-radius: 14px !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	/* Flecha custom — appearance:none elimina la nativa */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%2300C4BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 16px 16px !important;
	padding-right: 36px !important; /* espacio para la flecha */
}

.chbs-client-form select:focus,
.chbs-client-form .chbs-client-form-billing-address select:focus {
	border-color: var(--go1-teal) !important;
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(0, 196, 190, 0.15) !important;
}
/* ══ BILLING ADDRESS — anchos de campo ═════════════════════
   Chauffeur usa chbs-form-field-width-33 (3 col) en la sección
   de facturación. Lo igualamos al layout 50/50 (2 col) del
   resto del formulario para que todos los campos tengan la
   misma anchura visual. */
/* ══ BILLING ADDRESS — layout grid con separadores verticales ═
   Basado en el código funcional verificado en producción.
   - column-gap: 0 → los campos se tocan, separador es border-left
   - row-gap: 14px → espacio entre filas
   - Grupos 2-col: width-50. Grupos 3-col: width-33
*/

/* Grid base: sin gap horizontal, 14px entre filas */
.chbs-client-form .chbs-client-form-billing-address .chbs-clear-fix {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	column-gap: 0 !important;
	row-gap: 14px !important;
	width: 100% !important;
}

/* Grupo 3 columnas (Calle/Número/Ciudad y Estado/CP/País) */
.chbs-client-form .chbs-client-form-billing-address .chbs-clear-fix:has(.chbs-form-field-width-33) {
	grid-template-columns: 2fr 1fr 1fr !important;
}

/* Quitar float y width nativo de Chauffeur */
.chbs-client-form .chbs-client-form-billing-address .chbs-form-field,
.chbs-client-form .chbs-client-form-billing-address .chbs-form-field[class*="width-33"],
.chbs-client-form .chbs-client-form-billing-address .chbs-form-field[class*="width-50"] {
	width: auto !important;
	float: none !important;
	box-sizing: border-box !important;
	margin-bottom: 0 !important;
}

/* Padding-right: 0 en campos con vecino a la derecha — grupo 2 col */
.chbs-client-form .chbs-client-form-billing-address .chbs-clear-fix:not(:has(.chbs-form-field-width-33)) .chbs-form-field:nth-child(1) {
	padding-right: 0px !important;
}

/* Padding-right: 0 en campos con vecino — grupo 3 col */
.chbs-client-form .chbs-client-form-billing-address .chbs-clear-fix:has(.chbs-form-field-width-33) .chbs-form-field:nth-child(1),
.chbs-client-form .chbs-client-form-billing-address .chbs-clear-fix:has(.chbs-form-field-width-33) .chbs-form-field:nth-child(2) {
	padding-right: 0px !important;
}

/* Separador vertical — grupo 2 columnas */
.chbs-client-form .chbs-client-form-billing-address .chbs-clear-fix:not(:has(.chbs-form-field-width-33)) .chbs-form-field:nth-child(2) {
	border-left: 1px solid rgba(255, 255, 255, 0.07) !important;
	padding-left: 0px !important;
}

/* Separador vertical — grupo 3 columnas */
.chbs-client-form .chbs-client-form-billing-address .chbs-clear-fix:has(.chbs-form-field-width-33) .chbs-form-field:nth-child(2),
.chbs-client-form .chbs-client-form-billing-address .chbs-clear-fix:has(.chbs-form-field-width-33) .chbs-form-field:nth-child(3) {
	border-left: 1px solid rgba(255, 255, 255, 0.07) !important;
	padding-left: 0px !important;
}

/* Inputs y selectmenu dentro de billing: ancho completo sin desborde */
.chbs-client-form .chbs-client-form-billing-address .chbs-form-field input[type="text"],
.chbs-client-form .chbs-client-form-billing-address .chbs-form-field .ui-selectmenu-button {
	width: 100% !important;
	box-sizing: border-box !important;
}



/* Opciones del select (solo se pueden estilizar parcialmente) */
.chbs-client-form select option {
	background-color: #071428 !important;
	color: #ffffff !important;
}
/* ══ SELECTMENU jQuery UI (País billing) ═══════════════════
   Chauffeur reemplaza <select> por un widget jQuery UI —
   el <select> queda hidden y la interfaz visible es un <span>.
   Nuestro CSS de <select> no llega a ese <span>.
   Aquí lo estilizamos directamente. */
.chbs-client-form .ui-selectmenu-button,
.chbs-client-form .chbs-client-form-billing-address .ui-selectmenu-button {
	display: flex !important;
	align-items: center !important;
	height: 50px !important;
	min-height: 50px !important;
	width: 100% !important;
	background-color: rgba(5, 15, 35, 0.90) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 14px !important;
	padding: 0 36px 0 16px !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	transition: border-color 0.15s !important;
	position: relative !important;
}
.chbs-client-form .ui-selectmenu-button:hover,
.chbs-client-form .ui-selectmenu-button.ui-state-active {
	border-color: var(--go1-teal) !important;
	box-shadow: 0 0 0 2px rgba(0, 196, 190, 0.15) !important;
}
.chbs-client-form .ui-selectmenu-button .ui-selectmenu-text {
	color: #ffffff !important;
	font-family: var(--go1-font) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}
.chbs-client-form .ui-selectmenu-button .chbs-meta-icon-arrow-vertical-large {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) rotate(180deg) !important;
	color: var(--go1-teal) !important;
	font-size: 14px !important;
	transition: transform 0.2s ease !important;
}
/* Abierto: flecha apunta arriba (sin rotación) */
.chbs-client-form .ui-selectmenu-button.ui-selectmenu-button-open .chbs-meta-icon-arrow-vertical-large {
	transform: translateY(-50%) rotate(0deg) !important;
}
/* Dropdown del selectmenu */
.chbs-client-form .ui-selectmenu-menu .ui-menu,
.ui-selectmenu-menu .ui-menu {
	background: var(--go1-bg-2) !important;
	border: 1px solid rgba(0, 196, 190, 0.2) !important;
	border-radius: 12px !important;
	max-height: none !important;
	overflow: visible !important;
	z-index: 9999 !important;
	box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
.ui-selectmenu-menu .ui-menu-item-wrapper {
	color: rgba(255,255,255,0.8) !important;
	font-family: var(--go1-font) !important;
	font-size: 14px !important;
	padding: 8px 16px !important;
}
.ui-selectmenu-menu .ui-menu-item-wrapper.ui-state-active,
.ui-selectmenu-menu .ui-menu-item-wrapper:hover {
	background: rgba(0, 196, 190, 0.12) !important;
	color: #ffffff !important;
	border-radius: 0 !important;
}


/* ── Inputs dentro de .chbs-panel (vuelo, aerolínea, cartel) —
   Chauffeur puede tener reglas específicas para los custom form
   fields (chbs_form_element_field_*) que los hacen más pequeños.
   Reforzar con selector que incluye el contexto panel. */
.chbs-client-form .chbs-panel .chbs-form-field input[type="text"],
.chbs-client-form .chbs-panel .chbs-form-field input[type="email"],
.chbs-client-form .chbs-panel .chbs-form-field input[type="tel"],
.chbs-client-form .chbs-panel .chbs-form-field input[type="number"] {
	background-color: rgba(5, 15, 35, 0.90) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 14px !important;
	color: #ffffff !important;
	padding: 13px 16px !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	font-family: var(--go1-font) !important;
	width: 100% !important;
	min-height: 50px !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
}

.chbs-client-form input:focus,
.chbs-passenger-form input:focus {
	background-color: rgba(7, 30, 58, 0.98) !important;
	border-color: var(--go1-teal) !important;
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(0, 196, 190, 0.15) !important;
}

.chbs-client-form input::placeholder,
.chbs-passenger-form input::placeholder {
	color: rgba(255, 255, 255, 0.25) !important;
}

.chbs-client-form input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px rgba(5, 15, 35, 0.9) inset !important;
	-webkit-text-fill-color: #ffffff !important;
}

/* ══ TEXTAREA ══════════════════════════════════════════════ */
.chbs-client-form textarea,
.chbs-passenger-form textarea {
	background-color: rgba(5, 15, 35, 0.90) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 14px !important;
	color: #ffffff !important;
	padding: 13px 16px !important;
	font-size: 14px !important;
	font-family: var(--go1-font) !important;
	width: 100% !important;
	box-sizing: border-box !important;
	resize: vertical !important;
	min-height: 100px !important;
	font-size: 16px !important;
	font-weight: 400 !important;
}

.chbs-client-form textarea:focus { border-color: var(--go1-teal) !important; outline: none !important; }
.chbs-client-form textarea::placeholder { color: rgba(255, 255, 255, 0.25) !important; }

/* ══ CHECKBOX ══════════════════════════════════════════════ */
.chbs-client-form input[type="checkbox"] {
	accent-color: var(--go1-teal) !important;
	width: auto !important;
}

/* ══ TELÉFONO intl-tel-input v1.3.7 ════════════════════════
   PROBLEMA HISTÓRICO:
   - Chauffeur usa <input type="text"> para el campo de teléfono
   - Las reglas mobile que apuntaban a input[type="tel"] no aplicaban
   - El forzado .iti__selected-flag { width: 64px } rompía el cálculo
     dinámico de iTI, creando un gap visible entre el +34 y el número
   
   FIX:
   - Selector universal sobre input[type="text"] dentro de .iti
   - Padding-left fijo 70px (suficiente para flag + +34 + chevron)
   - Quitar el width hardcoded del .iti__selected-flag para que
     iTI calcule el ancho natural según el dial code
   ══════════════════════════════════════════════════════════ */
.chbs-client-form .iti,
.chbs-passenger-form .iti {
	width: 100% !important;
	display: block !important;
	position: relative !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

/* TELÉFONO — padding-left override (v1.4.0)
   ─────────────────────────────────────────────────────────────
   PROBLEMA RAÍZ: la regla general de inputs usa:
     padding: 13px 16px !important  →  padding-left: 16px !important
   !important en CSS gana sobre style="" inline — por eso el
   style="padding-left: 85px" de iTI quedaba ignorado.
   
   Si v1.3.9 no aplicó es porque Chauffeur tiene una regla
   con igual !important y mayor especificidad que la nuestra.
   
   FIX v1.4.0: prefijo body para máxima especificidad (0,4,1).
   Cubre el flag area de +34/+49/+39/+44 (~85px) con 90px. */
body .chbs-client-form .iti input[type="text"],
body .chbs-client-form .iti input[type="tel"],
body .chbs-client-form .iti--allow-dropdown input[type="text"],
body .chbs-client-form .iti--allow-dropdown input[type="tel"],
body .chbs-client-form .iti--separate-dial-code input[type="text"],
body .chbs-client-form .iti--separate-dial-code input[type="tel"],
body .chbs-passenger-form .iti input[type="text"],
body .chbs-passenger-form .iti input[type="tel"] {
	padding-left: 90px !important;
	padding-right: 16px !important;
	padding-top: 13px !important;
	padding-bottom: 13px !important;
}

/* Flag container: flush al borde izquierdo, altura 100% del input.
   v1.4.4: añadidos position:absolute + height:100% explícitos.
   Sin ellos, Chauffeur puede resetear `position` a static/relative,
   haciendo que top:0/bottom:0 no tengan efecto → el container colapsa
   a su altura de contenido, queda pegado arriba, y height:100% en
   .iti__selected-flag no funciona (sin padre con altura definida). */
.chbs-client-form .iti__flag-container,
.chbs-passenger-form .iti__flag-container {
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	height: 100% !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* Flag area: flexbox para centrado vertical PERFECTO — Chauffeur puede
   sobreescribir el display:flex que iTI aplica por defecto, dejando
   el contenido "pegado arriba". Lo forzamos explícitamente.
   overflow:visible evita que el sprite de la bandera quede clippeado. */
.chbs-client-form .iti__selected-flag,
.chbs-passenger-form .iti__selected-flag {
	display: flex !important;
	align-items: center !important;
	height: 100% !important;
	background: rgba(255, 255, 255, 0.05) !important;
	border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px 0 0 12px !important;
	overflow: visible !important;
	padding: 0 5px 0 8px !important;
	gap: 3px !important;
	cursor: pointer !important;
}

/* Bandera sprite: asegurar que no quede clippeada ni desplazada */
.chbs-client-form .iti__flag,
.chbs-passenger-form .iti__flag {
	display: inline-block !important;
	vertical-align: middle !important;
	overflow: visible !important;
}

.chbs-client-form .iti__selected-dial-code,
.chbs-passenger-form .iti__selected-dial-code {
	color: #ffffff !important;
	font-family: var(--go1-font) !important;
	font-size: 13px !important;
	margin-left: 6px !important;
}

/* Dropdown países */
.iti__dropdown-content,
.iti__country-list {
	background: var(--go1-bg-2, #071428) !important;
	border: 1px solid rgba(0, 196, 190, 0.2) !important;
	border-radius: 12px !important;
	margin-top: 4px !important;
	max-height: none !important;
	z-index: 9999 !important;
}

.iti__country {
	color: rgba(255, 255, 255, 0.8) !important;
	padding: 8px 12px !important;
	font-family: var(--go1-font) !important;
	font-size: 13px !important;
}

.iti__country:hover,
.iti__country.iti__highlight { background: rgba(0, 196, 190, 0.1) !important; }
.iti__dial-code { color: rgba(255, 255, 255, 0.45) !important; }


/* ══ CHECKBOX DIRECCIÓN DE FACTURACIÓN ══════════════════════
   .chbs-form-checkbox necesita border-radius para verse
   consistente con el resto de inputs del formulario.
   ══════════════════════════════════════════════════════════ */
.chbs-client-form .chbs-form-checkbox,
.chbs-form-checkbox {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	border-radius: 8px !important;
	border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
	background: rgba(5, 15, 35, 0.9) !important;
	cursor: pointer !important;
	vertical-align: middle !important;
	margin-right: 8px !important;
	transition: all 0.15s !important;
	box-sizing: border-box !important;
}

.chbs-client-form .chbs-form-checkbox.chbs-state-selected,
.chbs-form-checkbox.chbs-state-selected {
	background: var(--go1-teal) !important;
	border-color: var(--go1-teal) !important;
}

.chbs-client-form .chbs-form-checkbox .chbs-meta-icon-tick,
.chbs-form-checkbox .chbs-meta-icon-tick {
	color: #010B28 !important;
	font-size: 11px !important;
	font-weight: 700 !important;
}

/* Label "Dirección de facturación" — diseño mejorado:
   más grande, prominente, con separador visual sutil y fondo tenue
   que jerarquiza visualmente el checkbox como CTA secundario. */
.chbs-client-form label.chbs-form-label-group:has(.chbs-form-checkbox) {
	display: flex !important;
	align-items: center !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: rgba(255, 255, 255, 0.92) !important;
	text-transform: none !important;
	letter-spacing: 0.01em !important;
	cursor: pointer !important;
	padding: 12px 0 !important;
	margin: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	transition: color 0.15s !important;
	gap: 2px !important;
}
.chbs-client-form label.chbs-form-label-group:has(.chbs-form-checkbox):hover {
	color: #ffffff !important;
}

/* ══ RESPONSIVE ════════════════════════════════════════════
   En móvil: campos al 100% de ancho. NO tocar el padding-left
   del teléfono (la regla universal de arriba ya lo cubre).
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

	/* ─── Layout: todos los campos al 100% ─────────────────── */
	.chbs-client-form .chbs-form-field,
	.chbs-passenger-form .chbs-form-field {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
	}

	/* Refuerzo: width-50, width-33 → 100% en móvil */
	.chbs-client-form .chbs-form-field.chbs-form-field-width-50,
	.chbs-client-form .chbs-form-field.chbs-form-field-width-33,
	.chbs-passenger-form .chbs-form-field.chbs-form-field-width-50 {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		float: none !important;
	}
	/* Billing grid: 1 columna en mobile, sin separadores */
	.chbs-client-form .chbs-client-form-billing-address .chbs-clear-fix,
	.chbs-client-form .chbs-client-form-billing-address .chbs-clear-fix:has(.chbs-form-field-width-33) {
		grid-template-columns: 1fr !important;
	}
	.chbs-client-form .chbs-client-form-billing-address .chbs-form-field {
		width: auto !important;
		border-left: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* ─── Padding: igualar clear-fix Y panel a 16px ────────────
	   Sin esto, .chbs-panel (vuelo/aerolinea/cartel) tiene 22px de
	   padding H vs 16px del clear-fix → campos visualmente más estrechos. */
	.chbs-client-form .chbs-box-shadow > .chbs-clear-fix,
	.chbs-client-form .chbs-box-shadow > .chbs-panel,
	.chbs-client-form .chbs-client-form-billing-address {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* ─── Tipografía mobile ──────────────────────────────────── */
	/* Inputs, selects, textareas: 16px desktop → 12px mobile */
	.chbs-client-form .chbs-form-field input[type="text"],
	.chbs-client-form .chbs-form-field input[type="email"],
	.chbs-client-form .chbs-form-field input[type="tel"],
	.chbs-client-form .chbs-form-field input[type="number"],
	.chbs-client-form .chbs-form-field select,
	.chbs-client-form .chbs-panel .chbs-form-field input[type="text"],
	.chbs-client-form .chbs-panel .chbs-form-field input[type="email"],
	.chbs-client-form .chbs-panel .chbs-form-field input[type="tel"],
	.chbs-client-form .chbs-panel .chbs-form-field input[type="number"],
	.chbs-passenger-form .chbs-form-field input[type="text"],
	.chbs-passenger-form .chbs-form-field input[type="email"],
	.chbs-passenger-form .chbs-form-field input[type="tel"] {
		font-size: 12px !important;
	}
	.chbs-client-form textarea,
	.chbs-passenger-form textarea {
		font-size: 12px !important;
	}
	/* selectmenu texto en mobile */
	.chbs-client-form .ui-selectmenu-button .ui-selectmenu-text {
		font-size: 12px !important;
	}

	/* Labels de campo: 12px desktop → 14px mobile (más legibles en pantalla pequeña) */
	.chbs-client-form label,
	.chbs-passenger-form label {
		font-size: 14px !important;
	}
	/* Cabeceras de sección ("DETALLES DE CONTACTO"): 14px en mobile — más legible */
	.chbs-client-form .chbs-form-label-group {
		font-size: 14px !important;
	}
}