/* Formulario de pasajeros ChokoTrip — estilos aislados bajo .choko-pasajeros-form.
   Todo en px: el tema define 1rem = 10px, así que rem daría tamaños a la mitad.
   El CSS solo carga en esta página, por eso estilar el datepicker y Select2
   (que se montan fuera del wrapper) no afecta a otras páginas del sitio. */
.choko-pasajeros-form {
	--choko-blue: #007aba;
	--choko-blue-dark: #005f96;
	--choko-orange: #ff7f00;
	--choko-orange-btn: #f2951b;
	--choko-orange-dark: #db7d0c;
	--choko-ink: #333333;
	--choko-muted: #6b7683;
	--choko-line: #d9dee5;
	--choko-soft: #f7f9fb;
	--choko-red: #d64545;

	max-width: 820px;
	margin: 0 auto;
	padding: 0;
	color: var(--choko-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
}
.choko-pasajeros-form *,
.choko-pasajeros-form *::before,
.choko-pasajeros-form *::after { box-sizing: border-box; }
.choko-pasajeros-form [hidden] { display: none !important; }

/* Títulos de sección: separadores + texto naranja centrado */
.choko-section {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 38px 0 20px;
}
.choko-section .choko-sep {
	flex: 1;
	height: 1px;
	background: var(--choko-line);
}
.choko-section-title {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--choko-orange);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .3px;
}

/* Bloques con borde (tarjetas planas, sin radio) */
.choko-hotel,
.choko-passenger,
.choko-trip-summary {
	background: #fff;
	border: 1px solid var(--choko-line);
	margin: 0 0 18px;
	padding: 22px;
}
.choko-invitation,
.choko-new-hotel {
	border: 1px solid var(--choko-line);
	background: var(--choko-soft);
	padding: 16px;
}
/* Alimentación y Tours van sin recuadro para no competir con la invitación. */
.choko-food,
.choko-purchase-checks { border: 0; background: transparent; padding: 0; }

/* Título de bloque (reemplaza a los antiguos <legend>) */
.choko-block-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--choko-ink);
	margin-bottom: 12px;
}
.choko-invitation .choko-block-title { color: var(--choko-orange-dark); }
/* Isla enlazada a su página en ChokoHost dentro del título del bloque. */
.choko-block-title .choko-isla-link { color: var(--choko-blue); text-decoration: underline; }
.choko-block-title .choko-isla-link:hover,
.choko-block-title .choko-isla-link:focus { color: var(--choko-blue-dark); }

/* Resumen del viaje */
.choko-trip-summary { background: var(--choko-soft); }
.choko-trip-summary .choko-section { margin-top: 0; }
.choko-trip-summary ul { margin: 14px 0 0; padding-left: 20px; }
.choko-trip-summary li { margin: 5px 0; color: var(--choko-muted); font-size: 15px; }
.choko-progress { margin: 4px 0; font-weight: 600; font-size: 16px; }
.choko-progress-track {
	height: 12px;
	background: #e4e9ef;
	overflow: hidden;
	margin: 12px 0 6px;
}
.choko-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--choko-blue), var(--choko-orange));
	transition: width .4s ease;
}
/* Detalle por tour: cerrado ocupa una línea; abierto, una fila por tour. Cada
   compra trae sus propios cupos, fichas y exigencia de hotel, así que la línea
   de estado cuenta tours pendientes y el desglose vive en cada fila. */
.choko-tour-detail { margin-top: 14px; }
.choko-tour-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 12px;
	background: #fff;
	border: 1px solid var(--choko-line);
	border-left: 3px solid #16794c;
	font-size: 14px;
	font-weight: 600;
	color: var(--choko-ink);
	cursor: pointer;
	list-style: none;
}
.choko-tour-status::-webkit-details-marker { display: none; }
.choko-tour-status.has-pending { border-left-color: var(--choko-red); }
.choko-tour-status:hover { background: var(--choko-soft); }
.choko-tour-status:focus-visible { outline: 2px solid var(--choko-blue); outline-offset: 2px; }
.choko-tour-status-toggle {
	flex: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--choko-blue);
	white-space: nowrap;
}
.choko-tour-status-toggle::after { content: " \25be"; display: inline-block; transition: transform .15s ease; }
.choko-tour-detail[open] .choko-tour-status-toggle::after { transform: rotate(180deg); }
.choko-tour-list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	border: 1px solid var(--choko-line);
	border-top: 0;
}
.choko-tour-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 !important;
	padding: 8px 12px;
	background: #fff;
	font-size: 13px !important;
	color: var(--choko-ink) !important;
	line-height: 1.4;
}
.choko-tour-item + .choko-tour-item { border-top: 1px solid var(--choko-line); }
.choko-tour-item.is-complete { color: var(--choko-muted) !important; }
.choko-tour-when { flex: none; color: var(--choko-muted); font-variant-numeric: tabular-nums; }
.choko-tour-name { flex: 1 1 140px; font-weight: 600; }
.choko-tour-flags { flex: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin-left: auto; }
.choko-tour-ok { font-weight: 600; color: #16794c; white-space: nowrap; }
.choko-tour-missing { color: #a02c2c; white-space: nowrap; }

/* Hoteles por isla: hasta tres bloques lado a lado, todos de la misma altura.
   min-width:0 evita que un Select2 ancho desborde su columna del grid. */
.choko-hotels-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	align-items: stretch;
}
.choko-hotels-grid .choko-hotel {
	margin: 0;
	min-width: 0;
	padding: 16px;
	gap: 10px;
	align-content: start;
}
.choko-hotels-grid .choko-hotel > label { gap: 4px; }
.choko-hotels-grid .choko-block-title { margin-bottom: 4px; }
.choko-hotels-grid .select2-container { max-width: 100% !important; min-width: 0; }
.choko-hotels-grid .choko-new-hotel { gap: 10px; padding: 12px; }

/* Opción global de tours */
.choko-all-tours {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding: 12px 14px;
	background: var(--choko-soft);
	border: 1px solid var(--choko-line);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}
.choko-all-tours input { width: 18px; height: 18px; accent-color: var(--choko-blue); margin: 0; flex: none; }

.choko-summary-missing {
	margin-top: 14px;
	padding: 11px 14px;
	background: #fdeeee;
	border-left: 3px solid var(--choko-red);
	color: #a02c2c;
	font-size: 15px;
}

/* Rejilla de campos: separación amplia entre columnas para que no se monten */
.choko-passenger-fields,
.choko-hotel,
.choko-new-hotel { display: grid; gap: 16px 30px; }
.choko-passenger-fields > label,
.choko-hotel > label,
.choko-new-hotel > label {
	display: grid;
	gap: 6px;
	font-weight: 600;
	font-size: 15px;
	color: var(--choko-ink);
	min-width: 0;
}

/* Inputs: alto fijo, ancho contenido dentro del label (box-sizing forzado) */
.choko-pasajeros-form input[type="text"],
.choko-pasajeros-form input[type="email"],
.choko-pasajeros-form input[type="number"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: 42px;
	min-height: 0;
	padding: 0 12px;
	border: 1px solid var(--choko-line);
	border-radius: 0;
	background: #fff;
	color: var(--choko-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 40px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.choko-pasajeros-form textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 88px;
	padding: 9px 12px;
	border: 1px solid var(--choko-line);
	border-radius: 0;
	background: #fff;
	color: var(--choko-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	resize: vertical;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.choko-pasajeros-form input[type="text"]:focus,
.choko-pasajeros-form input[type="email"]:focus,
.choko-pasajeros-form textarea:focus {
	outline: none;
	border-color: var(--choko-blue);
	box-shadow: inset 0 0 0 1px var(--choko-blue);
}

/* Campos obligatorios vacíos: etiqueta en rojo con un símbolo de advertencia y
   borde rojo en el control, igual que en el formulario de reserva. El JS pone
   .choko-error en el <label> del campo (el texto va envuelto en .choko-lbl para
   que el símbolo quede EN LÍNEA) o en el bloque .choko-food de alimentación. */
.choko-passenger-fields label.choko-error .choko-lbl,
.choko-passenger-fields .choko-food.choko-error .choko-block-title { color: var(--choko-red); }
.choko-passenger-fields label.choko-error .choko-lbl::before,
.choko-passenger-fields .choko-food.choko-error .choko-block-title::before { content: "\26A0 "; }
.choko-passenger-fields label.choko-error input[type="text"],
.choko-passenger-fields label.choko-error textarea,
.choko-passenger-fields label.choko-error select,
.choko-passenger-fields .choko-food.choko-error input.choko-other-food {
	border-color: var(--choko-red);
	box-shadow: inset 0 0 0 1px var(--choko-red);
}
/* Con select2 el <select> queda oculto y el borde hay que pintarlo en la caja
   que sí se ve. */
.choko-passenger-fields label.choko-error .select2-selection {
	border-color: var(--choko-red) !important;
	box-shadow: inset 0 0 0 1px var(--choko-red);
}

/* Radios de alimentación y checkboxes de tours */
.choko-food label,
.choko-purchase-checks label,
.choko-confirm-hotel {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 18px 10px 0;
	font-weight: 500;
	font-size: 15px;
	cursor: pointer;
}
.choko-food input[type="radio"],
.choko-purchase-checks input,
.choko-confirm-hotel input { width: 18px; height: 18px; accent-color: var(--choko-blue); margin: 0; flex: none; }

/* Detalle de "Otro": en línea junto a las opciones, sin label propio. */
.choko-pasajeros-form input.choko-other-food {
	display: inline-block;
	width: auto;
	min-width: 200px;
	max-width: 100%;
	height: 34px;
	line-height: 32px;
	font-size: 14px;
	vertical-align: middle;
	margin-bottom: 10px;
}

/* Acordeón de pasajero */
.choko-passenger { padding: 0; }
/* Fondo alternado entre pasajeros para distinguirlos de un vistazo:
   impares en azul muy tenue, pares en verde muy tenue, con la cabecera
   del acordeón un tono más marcada. */
.choko-passengers .choko-passenger:nth-of-type(odd) { background: rgba(66, 139, 202, .05); }
.choko-passengers .choko-passenger:nth-of-type(odd) > summary { background: rgba(66, 139, 202, .12); }
.choko-passengers .choko-passenger:nth-of-type(even) { background: #fffefb; }
.choko-passengers .choko-passenger:nth-of-type(even) > summary { background: #fff6e2; }
.choko-passenger > summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 22px;
	font-weight: 700;
	font-size: 17px;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--choko-soft);
}
.choko-passenger > summary::-webkit-details-marker { display: none; }
.choko-passenger > summary::after {
	content: "\25be";
	margin-left: auto;
	color: var(--choko-muted);
	transition: transform .2s ease;
}
.choko-passenger[open] > summary::after { transform: rotate(180deg); }
.choko-passenger[open] > summary { border-bottom: 1px solid var(--choko-line); }
.choko-passenger > .choko-passenger-fields { padding: 22px; }

/* Etiquetas de estado */
.choko-passenger-state,
.choko-save-status,
.choko-invitation-status {
	font-size: 13px;
	font-weight: 600;
	color: var(--choko-muted);
}
.choko-passenger-state {
	padding: 3px 11px;
	background: #e7ebf0;
	color: var(--choko-muted);
}
.choko-passenger-state.is-complete {
	background: #e3f7ec;
	color: #16794c;
}

/* Alerta bloqueante: hay más fichas que cupos comprados */
.choko-alert {
	margin: 0 0 18px;
	padding: 14px 16px;
	background: #fdeeee;
	border-left: 4px solid var(--choko-red);
	color: #8f2323;
	font-size: 15px;
	line-height: 1.5;
}
.choko-alert strong { display: block; margin-bottom: 4px; }

/* Aviso de obligatoriedad (Parque Nacional / Armada) */
.choko-required-notice {
	margin: 0 0 20px;
	padding: 14px 16px;
	background: #fff8ee;
	border-left: 4px solid var(--choko-orange);
	color: var(--choko-ink);
	font-size: 15px;
	line-height: 1.5;
}
/* Link a los FAQs: se queda con el color del aviso y solo lo subraya, para no
   romper el bloque naranja con un azul de link. */
.choko-required-notice .choko-faqs-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--choko-orange);
	text-underline-offset: 2px;
}
.choko-required-notice .choko-faqs-link:hover,
.choko-required-notice .choko-faqs-link:focus { color: var(--choko-orange-dark); }

/* Solicitudes de fichas adicionales */
.choko-request {
	border: 1px solid var(--choko-orange-btn);
	background: #fff8ee;
	padding: 16px;
	margin: 0 0 12px;
}
.choko-request p { margin: 0 0 12px; }
.choko-companion-request {
	display: grid;
	gap: 12px;
	border: 1px solid var(--choko-line);
	background: var(--choko-soft);
	padding: 16px;
	margin-top: 18px;
}
.choko-companion-request p { margin: 0; color: var(--choko-muted); font-size: 15px; }
.choko-companion-request > label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; max-width: 260px; }
.choko-invitation > label:has(input[type="number"]) { max-width: 260px; }

/* Hotel nuevo */
.choko-new-hotel {
	background: #fff8ee;
	border: 1px dashed var(--choko-orange-btn);
}
.choko-hotel-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; flex-wrap: wrap; }

/* ---- Botones (único elemento con esquinas redondeadas) ---- */
.choko-pasajeros-form .button,
.choko-pasajeros-form button:not(.ui-datepicker-prev):not(.ui-datepicker-next) {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 11px 22px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease, transform .05s ease;
}
.choko-pasajeros-form .button:active { transform: translateY(1px); }
.choko-pasajeros-form .button:disabled { opacity: .55; cursor: default; }

/* Comprobación opcional: valida el grupo y lista lo que falta. No cierra
   ningún trámite, así que va como acción secundaria y centrada.
   El selector repite `button.button` a propósito: la regla base de botones de
   arriba incluye `button:not(...)`, que tiene más especificidad que una sola
   clase y fija `border: 1px solid transparent` para todos. Sin igualarla, el
   borde de este botón no se llega a pintar. Padding y tamaño de letra se dejan
   en los de la regla base, para que se vea como los demás botones. */
.choko-pasajeros-form button.button.choko-complete-group {
	display: block;
	width: fit-content;
	margin: 40px auto 0;
	background: transparent;
	color: var(--choko-ink);
	border-color: var(--choko-line);
	box-shadow: 3px 5px 7px 0px rgba(0, 0, 0, 0.5);
}
.choko-pasajeros-form button.button.choko-complete-group:hover { background: var(--choko-soft); }

/* Acciones de guardado: azul sólido, ancho automático */
.choko-pasajeros-form .choko-save-passenger,
.choko-pasajeros-form .choko-save-hotel {
	background: var(--choko-blue);
	color: #fff;
	width: auto;
	justify-self: start;
}
.choko-pasajeros-form .choko-save-passenger:hover,
.choko-pasajeros-form .choko-save-hotel:hover { background: var(--choko-blue-dark); }

/* Acciones secundarias: contorno suave */
.choko-pasajeros-form .choko-add-passenger,
.choko-pasajeros-form .choko-send-invitation {
	background: #fff;
	color: var(--choko-blue-dark);
	border-color: var(--choko-blue);
	width: auto;
}
.choko-pasajeros-form .choko-add-passenger:hover,
.choko-pasajeros-form .choko-send-invitation:hover { background: rgba(0, 122, 186, .08); }

/* Eliminar ficha: acción destructiva. Fondo rojo suave desde el estado normal
   (no solo al hover) para que se note que es un botón y no un aviso de texto;
   distinto del blanco/crema de la página y del azul de Guardar. */
.choko-pasajeros-form .choko-delete-passenger {
	background: #fdeeee;
	color: #a02c2c;
	border-color: #e3b3b3;
	width: auto;
}
.choko-pasajeros-form .choko-delete-passenger:hover { background: #f8d7d7; }

/* Estados y errores */
.choko-form-status { color: var(--choko-red); font-weight: 600; margin-bottom: 8px; }

/* Recuadro de "esto falta para poder terminar". Antes eran líneas rojas sueltas
   sobre el fondo de la página, sin título y con las claves internas del
   servidor ("Tour pending: cupo, hotel"). */
.choko-completion {
	background: #fdeeee;
	border: 1px solid #f3c9c9;
	border-left: 4px solid var(--choko-red);
	border-radius: 6px;
	padding: 14px 16px;
	margin: 0 0 12px;
}
.choko-completion-title {
	margin: 0 0 8px !important;
	font-size: 15px;
	font-weight: 700;
	color: #8a1f1f;
}
.choko-completion-missing {
	margin: 0 !important;
	padding-left: 20px !important;
	list-style: disc;
}
.choko-completion-missing li {
	margin: 4px 0 !important;
	color: #7a2020;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
}
.choko-completion-tour { list-style: disc; }
.choko-missing-passenger {
	background: #fdeeee;
	color: #a02c2c;
	padding: 6px 12px;
	border: 0;
	border-radius: 6px;
	font-size: 14px;
}
.choko-pasajeros-error {
	max-width: 620px;
	margin: 40px auto;
	padding: 24px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--choko-line);
	color: var(--choko-muted);
}

/* ---- Select2: legible, cuadrado, con la “x” de borrar visible ---- */
.choko-pasajeros-form .select2-container { width: 100% !important; }
.choko-pasajeros-form .select2-container--default .select2-selection--single {
	height: 42px;
	border: 1px solid var(--choko-line);
	border-radius: 0;
	display: flex;
	align-items: center;
	padding: 0 42px 0 12px;
	position: relative;
}
.choko-pasajeros-form .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--choko-ink);
	line-height: 40px;
	font-size: 15px;
	padding: 0;
}
.choko-pasajeros-form .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--choko-muted); }
.choko-pasajeros-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 8px; }
.choko-pasajeros-form .select2-container--default.select2-container--focus .select2-selection--single,
.choko-pasajeros-form .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--choko-blue);
	box-shadow: inset 0 0 0 1px var(--choko-blue);
}
/* Botón de limpiar selección, ahora claramente visible */
.choko-pasajeros-form .select2-container--default .select2-selection--single .select2-selection__clear {
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	font-size: 0;
	background: #eef2f6;
	border-radius: 50%;
	cursor: pointer;
}
.choko-pasajeros-form .select2-container--default .select2-selection--single .select2-selection__clear::before {
	content: "\00d7";
	display: block;
	font-size: 16px;
	line-height: 22px;
	text-align: center;
	color: var(--choko-muted);
}
.choko-pasajeros-form .select2-container--default .select2-selection--single .select2-selection__clear:hover { background: #fbe0e0; }
.choko-pasajeros-form .select2-container--default .select2-selection--single .select2-selection__clear:hover::before { color: var(--choko-red); }

/* Menú desplegable (se monta en <body>; el CSS solo carga en esta página) */
.select2-dropdown { border-color: var(--choko-line); border-radius: 0; }
.select2-container--default .select2-results__option {
	color: #333333;
	font-size: 15px;
	padding: 8px 12px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
	background-color: #007aba !important;
	color: #ffffff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] { background-color: #eef4f9; color: #333333; }
.select2-search--dropdown .select2-search__field { border-color: #d9dee5; border-radius: 0; font-size: 15px; }

/* ---- Datepicker de jQuery UI (sin tema propio en esta página) ---- */
.ui-datepicker {
	width: 260px;
	padding: 8px;
	background: #fff;
	border: 1px solid #d9dee5;
	box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	z-index: 100000 !important;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 0 8px;
}
.ui-datepicker .ui-datepicker-title { display: flex; gap: 6px; font-weight: 700; color: #333333; }
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	padding: 3px 4px;
	border: 1px solid #d9dee5;
	background: #fff;
	font-size: 14px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 4px;
	width: 26px;
	height: 26px;
	overflow: hidden;
	text-indent: -9999px;
	cursor: pointer;
	border: 1px solid #d9dee5;
	background: #f7f9fb;
}
.ui-datepicker .ui-datepicker-prev { left: 0; }
.ui-datepicker .ui-datepicker-next { right: 0; }
.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-top: 2px solid #007aba;
	border-right: 2px solid #007aba;
	text-indent: 0;
}
.ui-datepicker .ui-datepicker-prev::after { transform: translate(-30%, -50%) rotate(-135deg); }
.ui-datepicker .ui-datepicker-next::after { transform: translate(-70%, -50%) rotate(45deg); }
.ui-datepicker table { width: 100%; border-collapse: collapse; margin: 4px 0 0; }
.ui-datepicker th { padding: 6px 0; font-weight: 600; color: #6b7683; font-size: 12px; }
.ui-datepicker td { padding: 1px; }
.ui-datepicker td a,
.ui-datepicker td span {
	display: block;
	padding: 7px 0;
	text-align: center;
	text-decoration: none;
	color: #333333;
	border: 1px solid transparent;
	font-size: 14px;
}
.ui-datepicker td a:hover { background: rgba(0, 122, 186, .1); }
.ui-datepicker td a.ui-state-active { background: #007aba; color: #fff; }

/* Días no disponibles. jQuery UI pone las clases en el <td>, no en el <span>
   de dentro, así que hay que apuntar al td o la regla nunca aplica (era el bug
   por el que no se distinguían). Se marcan en gris con un rayado tenue. */
.ui-datepicker td.ui-state-disabled,
.ui-datepicker td.ui-datepicker-unselectable { cursor: not-allowed; }
.ui-datepicker td.ui-state-disabled span,
.ui-datepicker td.ui-datepicker-unselectable span {
	color: #c3c9d2;
	background: repeating-linear-gradient(
		-45deg,
		#f6f7f9 0 4px,
		#eef0f3 4px 8px
	);
}

/* Botón de guardar + estado en la misma línea (estado a la derecha) */
.choko-passenger-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.canal-invita label { margin-right: 20px; margin-bottom: 0; }
label.choko-companions { gap: 12px !important; }

/* Casillas de "Además llenará los datos de" */
.choko-companions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.choko-companions .choko-block-title { flex-basis: 100%; margin-bottom: 2px; }
.choko-companion-option { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: 500; font-size: 14px; cursor: pointer; }
.choko-companion-option.is-locked { color: var(--choko-muted); cursor: not-allowed; }
.choko-companion-lock { font-style: italic; font-size: 12px; color: var(--choko-muted); }

/* Bloque de invitación: labels apilados como el resto de campos */
.choko-invitation { display: grid; gap: 12px; }
.choko-invitation > label {
	display: grid;
	gap: 6px;
	font-weight: 600;
	font-size: 15px;
	color: var(--choko-ink);
	margin: 0;
}
.choko-invitation select {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: 42px;
	padding: 0 10px;
	border: 1px solid var(--choko-line);
	border-radius: 0;
	background: #fff;
	color: var(--choko-ink);
	font-family: inherit;
	font-size: 15px;
}
.choko-invitation-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* En desktop: canal + contacto a la izquierda, acompañantes a la derecha. */
@media (min-width: 640px) {
	.choko-invitation { grid-template-columns: 1fr 1fr; column-gap: 24px; }
	.choko-invitation > .choko-block-title { grid-column: 1 / -1; grid-row: 1; }
	.choko-invitation > .canal-invita { grid-column: 1; grid-row: 2; }
	.choko-invitation > .choko-invitation-contact { grid-column: 1; grid-row: 3; }
	.choko-invitation > .choko-companions { grid-column: 2; grid-row: 2 / 4; align-self: start; }
	.choko-invitation > .choko-invitation-actions { grid-column: 1 / -1; grid-row: 4; }
}
label.choko-confirm-hotel { display: block; }
label.choko-confirm-hotel input[type="checkbox"] { vertical-align: sub; }

/* intl-tel-input (la versión del tema usa .intl-tel-input / .flag-container).
   El contenedor ocupa todo el ancho; la visibilidad de la bandera según el
   canal la controla el JS directamente sobre el DOM. */
.choko-invitation .intl-tel-input { width: 100%; display: block; }
/* El sprite local del tema (../img/flags.png) no existe → 404. Se usa el mismo
   CDN que las páginas de reserva (intl-tel-input 10.0.2). El selector más
   específico gana sobre el de intlTelInput.css. */
.choko-invitation .iti-flag { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.2/img/flags.png"); }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.choko-invitation .iti-flag { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.2/img/flags@2x.png"); }
}

/* Dos columnas en pantallas medianas */
@media (min-width: 640px) {
	.choko-passenger-fields { grid-template-columns: 1fr 1fr; }
	.choko-passenger-fields > .choko-food,
	.choko-passenger-fields > .choko-purchase-checks,
	.choko-passenger-fields > .choko-invitation,
	.choko-passenger-fields > .choko-other-food,
	.choko-passenger-fields > .choko-marketing,
	.choko-passenger-fields > .choko-field-wide,
	.choko-passenger-fields > .choko-passenger-actions { grid-column: 1 / -1; }
}