/* Formulario de reserva ChokoTrip. Todo en px: el tema define 1rem = 10px. */
.choko-reserva {
	--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: 880px;
	margin: 0 auto;
	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-reserva *,
.choko-reserva *::before,
.choko-reserva *::after { box-sizing: border-box; }
.choko-reserva [hidden] { display: none !important; }

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

/* Datos personales */
.choko-reserva-grid { display: grid; gap: 16px 24px; }
.choko-reserva-grid > label,
.choko-reserva .choko-comentario,
.choko-reserva .choko-config-campo {
	display: grid;
	gap: 6px;
	font-weight: 600;
	font-size: 15px;
	min-width: 0;
}
.choko-reserva input[type="text"],
.choko-reserva input[type="email"],
.choko-reserva input[type="tel"],
.choko-reserva textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 0;
	padding: 0 12px;
	height: 42px;
	border: 1px solid var(--choko-line);
	border-radius: 0;
	background: #fff;
	color: var(--choko-ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 40px;
}
.choko-reserva textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.choko-reserva input:focus,
.choko-reserva textarea:focus {
	outline: none;
	border-color: var(--choko-blue);
	box-shadow: inset 0 0 0 1px var(--choko-blue);
}
.choko-reserva .iti { width: 100%; display: block; }
.choko-reserva .intl-tel-input { width: 100%; display: block; }
/* El sprite local del tema (../img/flags.png) no existe → 404. Se usa el mismo
   CDN que el resto del sitio (intl-tel-input 10.0.2). */
.choko-reserva .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-reserva .iti-flag { background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/10.0.2/img/flags@2x.png"); }
}

/* Cápsulas de tours */
.choko-capsulas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.choko-capsula {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 9px 16px;
	border: 1px solid #e7e7e7;
	border-radius: 0;
	background: #f9f9f9;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
/* Solo en dispositivos con puntero real: en táctil el :hover obliga a un primer
   toque para "hover" y un segundo para elegir (el doble-tap que se veía). */
@media (hover: hover) {
	.choko-capsula:hover { border-color: var(--choko-blue); }
}
.choko-capsula input { position: absolute; opacity: 0; width: 0; height: 0; }
.choko-capsula.is-selected {
	background: var(--choko-blue);
	border-color: var(--choko-blue);
	color: #fff;
}
.choko-capsula.is-selected .choko-badge-nuevo { background: #fff; color: var(--choko-blue-dark); }
.choko-buceo { vertical-align: middle; }
.choko-badge-nuevo {
	background: #0056d2;
	color: #fff;
	padding: 2px 7px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .3px;
}

/* La tarjeta de cada tour vive dentro de .choko-capsulas, justo después de su
   cápsula. Al ocupar el 100% del ancho del flex, "rompe" la fila y aparece
   debajo de la cápsula elegida (acordeón), tanto en móvil como en escritorio. */
.choko-config {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
	margin: 4px 0 8px;
	padding: 18px;
	border: 1px solid var(--choko-line);
	border-left: 3px solid var(--choko-blue);
	background: var(--choko-soft);
}
.choko-config-titulo {
	margin: 0 24px 12px 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--choko-blue-dark);
	line-height: 1.3;
}
.choko-config-titulo a { text-decoration: none; font-size: 14px; }
.choko-quitar-tour {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--choko-muted);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.choko-quitar-tour:hover { background: #fdeeee; color: var(--choko-red); }
.choko-config-label { display: block; font-size: 13px; font-weight: 700; margin: 14px 0 6px; }

/* Fecha y horarios comparten fila: la fecha no necesita más de 200px y los
   horarios aprovechan el resto. Si el tour no tiene horarios, la fecha se
   queda igual de angosta en vez de estirarse a todo el ancho. */
.choko-config-fila { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 24px; }
.choko-config-fila .choko-config-campo { flex: 0 0 200px; max-width: 100%; font-size: 13px; font-weight: 700; }
.choko-config-fila .choko-horarios { flex: 1 1 200px; min-width: 0; }
/* Ambas etiquetas arrancan a la misma altura. */
.choko-config-fila .choko-config-label { margin-top: 0; }

/* Horarios y embarcaciones: botones en línea, no listas de radios.
   El radio sigue en el DOM (lo necesitan el teclado y el envío del form) pero
   se oculta a la vista; el botón entero hace de control. */
.choko-horario input,
.choko-ruta input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}
.choko-horario,
.choko-ruta {
	position: relative;
	margin: 0;
	border: 1px solid var(--choko-line);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	transition: border-color .12s ease, background-color .12s ease;
}
@media (hover: hover) {
	.choko-horario:hover,
	.choko-ruta:hover { border-color: var(--choko-blue); }
}

/* Horarios: pastillas compactas, una junto a otra. */
.choko-horarios-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.choko-horario {
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

/* Embarcaciones: tarjetas que reparten el ancho y bajan de fila solas. */
.choko-rutas-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.choko-ruta { padding: 12px 14px; font-size: 14px; line-height: 1.35; }
.choko-ruta > span { display: block; }
.choko-precio { display: block; margin-top: 6px; font-size: 15px; color: var(--choko-blue-dark); }

/* Seleccionado. `.is-selected` lo pone el JS; :has() lo mantiene sincronizado
   aunque el radio cambie por teclado sin pasar por ese handler. */
.choko-horario.is-selected,
.choko-horario:has(input:checked) {
	border-color: var(--choko-blue);
	background: var(--choko-blue);
	color: #fff;
}
.choko-ruta.is-selected,
.choko-ruta:has(input:checked) {
	border-color: var(--choko-blue);
	box-shadow: inset 0 0 0 1px var(--choko-blue);
	background: rgba(0, 122, 186, .06);
}
.choko-ruta.is-selected .choko-precio,
.choko-ruta:has(input:checked) .choko-precio { color: var(--choko-blue); }

/* El foco de teclado tiene que verse: el radio real es invisible. */
.choko-horario:has(input:focus-visible),
.choko-ruta:has(input:focus-visible) { outline: 2px solid var(--choko-orange-btn); outline-offset: 2px; }

/* Bloque de ferrys */
.choko-ferry-prompt {
	margin: 0 auto 18px;
	padding: 14px 16px;
	max-width: 560px;
	background: #fff8ee;
	border-left: 4px solid var(--choko-orange-btn);
	text-align: center;
}
.choko-ferry-prompt p { margin: 0 0 8px; }
.choko-ferry-opciones { display: flex; gap: 18px; justify-content: center; }
.choko-ferry-opciones label { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; cursor: pointer; }
.choko-ferry-opciones input { width: 18px; height: 18px; accent-color: var(--choko-blue); margin: 0; }

/* Cantidad de viajeros */
/* Cuatro tramos de edad: una rejilla que cae a dos columnas y luego a una. */
.choko-pax { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.choko-pax-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.choko-pax-label { font-weight: 600; font-size: 15px; }
.choko-pax-label small { display: block; font-weight: 400; color: var(--choko-muted); font-size: 12px; }
.choko-pax-nota { margin: 16px 0 0; font-size: 13px; color: var(--choko-muted); text-align: center; }

@media (max-width: 900px) { .choko-pax { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .choko-pax { grid-template-columns: 1fr; } }
.choko-stepper { display: inline-flex; align-items: center; border: 1px solid var(--choko-line); background: #fff; }
.choko-stepper button {
	width: 38px;
	height: 40px;
	padding: 0;
	border: 0;
	background: var(--choko-soft);
	color: var(--choko-ink);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}
.choko-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.choko-reserva .choko-stepper input {
	width: 52px;
	height: 40px;
	padding: 0;
	border: 0;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	line-height: 40px;
	-moz-appearance: textfield;
	pointer-events: none;
}
.choko-reserva .choko-stepper input::-webkit-outer-spin-button,
.choko-reserva .choko-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Stepper compacto para el reparto por tour. */
.choko-stepper-sm button { width: 30px; height: 32px; font-size: 16px; }
.choko-reserva .choko-stepper-sm input { width: 38px; height: 32px; font-size: 14px; line-height: 32px; }

/* Toggle "todos van a todos los tours" */
.choko-todos-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 18px auto 0;
	max-width: 560px;
	padding: 12px 16px;
	background: var(--choko-soft);
	border: 1px solid var(--choko-line);
	border-left: 4px solid var(--choko-blue);
	font-weight: 600;
	cursor: pointer;
}
.choko-todos-toggle input { width: 18px; height: 18px; accent-color: var(--choko-blue); margin: 0; flex: none; }
.choko-todos-ayuda { margin: 8px auto 0; max-width: 560px; font-size: 13px; color: var(--choko-muted); text-align: center; }

/* Reparto por tour, dentro de la tarjeta de cada tour. */
.choko-tour-pax { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--choko-line); }
.choko-tour-pax-grid { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.choko-tour-pax-item { display: flex; align-items: center; gap: 10px; }
.choko-tour-pax-label { font-size: 13px; font-weight: 600; }

/* Comentario, políticas y envío */
.choko-comentario { margin-top: 26px; }
.choko-politicas { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; font-size: 15px; }
.choko-politicas input { width: 18px; height: 18px; accent-color: var(--choko-blue); margin: 2px 0 0; flex: none; }
.choko-reserva-status {
	margin: 0 0 12px;
	padding: 11px 14px;
	background: #fdeeee;
	border-left: 3px solid var(--choko-red);
	color: #a02c2c;
	font-size: 15px;
	font-weight: 600;
}
.choko-reserva-submit {
	display: block;
	width: 100%;
	padding: 15px;
	border: 0;
	border-radius: 6px;
	background: var(--choko-orange-btn);
	color: #fff;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(242, 149, 27, .35);
}
.choko-reserva-submit:hover { background: var(--choko-orange-dark); }

/* Campos faltantes al enviar: label en rojo con un símbolo, y borde rojo en el
   control. `.choko-error` la pone el JS en el label o contenedor del campo.
   En los labels de rejilla (datos personales, fecha) el símbolo va sobre el
   texto envuelto en .choko-lbl para que quede EN LÍNEA; si fuera un ::before del
   propio label de grid, caería en su propia fila. Los labels de bloque
   (Horario, Embarcación, ¿Quiénes van?) lo llevan directo. */
.choko-reserva .choko-error .choko-lbl,
.choko-reserva .choko-error > .choko-config-label { color: var(--choko-red); }
.choko-reserva .choko-error .choko-lbl::before,
.choko-reserva .choko-error > .choko-config-label::before { content: "\26A0 "; }
.choko-reserva label.choko-error input[type="text"],
.choko-reserva label.choko-error input[type="email"],
.choko-reserva label.choko-error input[type="tel"] {
	border-color: var(--choko-red);
	box-shadow: inset 0 0 0 1px var(--choko-red);
}
.choko-reserva .choko-horarios.choko-error .choko-horario,
.choko-reserva .choko-rutas.choko-error .choko-ruta { border-color: var(--choko-red); }
.choko-reserva .choko-tour-pax.choko-error .choko-stepper { border-color: var(--choko-red); }
.choko-reserva .choko-politicas.choko-error { color: var(--choko-red); }
.choko-reserva .choko-politicas.choko-error input { outline: 2px solid var(--choko-red); outline-offset: 1px; }
.choko-reserva .choko-ferry-prompt.choko-error { border-left-color: var(--choko-red); }
.choko-reserva .choko-ferry-prompt.choko-error p { color: var(--choko-red); }

.choko-reserva-loading { padding: 60px 20px; text-align: center; color: var(--choko-muted); }
.choko-spinner {
	display: inline-block;
	width: 34px;
	height: 34px;
	border: 3px solid var(--choko-line);
	border-top-color: var(--choko-blue);
	border-radius: 50%;
	animation: choko-spin .8s linear infinite;
}
@keyframes choko-spin { to { transform: rotate(360deg); } }

/* Datepicker de jQuery UI: el tema no carga su tema 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 { font-weight: 700; color: #333; }
.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: #333; 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. */
.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
	);
}

@media (min-width: 640px) {
	.choko-reserva-grid { grid-template-columns: 1fr 1fr; }
}

/* Móvil (≤767px): cada tour ocupa todo el ancho y su tarjeta se abre justo
   debajo (acordeón). El DOM ya viene intercalado, así que no hay que hacer nada
   más aquí que ensanchar la cápsula. */
@media (max-width: 767px) {
	.choko-capsula { flex: 0 0 100%; }
}

/* Tablet y escritorio (≥768px): se conserva el diseño anterior. Las cápsulas
   fluyen en fila y TODAS las tarjetas se juntan debajo. Como el DOM está
   intercalado, `order` las manda visualmente al final sin alterar el orden real
   del formulario (lostours[] / fechainicial[] siguen emparejando por índice). */
@media (min-width: 768px) {
	.choko-config { order: 1; margin-top: 8px; }
}

/* El modal de políticas (thickbox del tema) se pasa del ancho de la pantalla en
   móvil. Lo forzamos a caber. Los estilos del thickbox usan inline, de ahí los
   !important. */
@media (max-width: 640px) {
	#TB_window {
		width: 94% !important;
		left: 3% !important;
		margin-left: 0 !important;
		max-width: 94% !important;
	}
	#TB_ajaxContent {
		width: auto !important;
		height: auto !important;
		max-height: 80vh !important;
		padding: 12px !important;
		box-sizing: border-box !important;
	}
	#TB_ajaxContent .choko-politicas-texto,
	#TB_ajaxContent img { max-width: 100% !important; height: auto !important; }
}