/* Consultas: formulario único, panel de consulta múltiple y diálogo. */

.mdpd-consulta {
	--mdpd-consulta-radio: 0.5rem;
	/* Mismos valores que `.form-flat` de Flatsome, para que el control de
	   cantidad no se distinga de los inputs de al lado. */
	--mdpd-consulta-flat-fondo: rgba(0, 0, 0, 0.03);
	--mdpd-consulta-flat-borde: rgba(0, 0, 0, 0.09);
	/* Flatsome usa 99px: cualquier valor grande da la misma píldora. */
	--mdpd-consulta-flat-radio: 99em;
	/* El alto que Flatsome les da a inputs y selects. */
	--mdpd-consulta-flat-alto: 2.507em;
	--mdpd-consulta-icono: var(--fs-color-primary, #446084);
	display: contents;
	font-size: 0.9375rem;
}

/* Flatsome le pone margen y alto mínimo a todo lo que sea button. */
.mdpd-consulta button,
.mdpd-consulta-panel button {
	margin: 0 !important;
}

.mdpd-consulta__title {
	font-size: 1.15em;
	margin-bottom: 0.75em;
}

.mdpd-consulta__field {
	margin-bottom: 0.75em;
}

.mdpd-consulta__field label {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	margin-bottom: 0.25em;
}

/* Obligatorio: el mismo rojo que Flatsome usa en los `abbr[title=required]`. */
.mdpd-consulta__req {
	border: 0;
	color: var(--fs-color-alert, #b20000);
	cursor: help;
	text-decoration: none;
}

.mdpd-consulta__field input,
.mdpd-consulta__field textarea {
	font-size: 1em;
	margin-bottom: 0;
	width: 100%;
}

/* Dos campos que comparten línea: fechas, y pasajeros con teléfono. */
.mdpd-consulta__par {
	display: grid;
	gap: 0 0.75em;
	grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

.mdpd-consulta__acciones {
	margin: 0;
	text-align: right;
}

/* «Quiero que me llamen»: el checkbox del portal es un toggle (style.css), así
   que la etiqueta va al lado y no arriba como en el resto de los campos. Va con
   `.mdpd-consulta__field` adelante para ganarle al `display: block` de esas. */
.mdpd-consulta__field .mdpd-consulta__check {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	font-size: 0.9em;
	font-weight: 600;
	gap: 0.5em;
	margin: 0;
}

/* `form-flat` le pisa el fondo a todo input que no sea submit: el toggle
   necesita el suyo o el riel apagado queda invisible. */
.mdpd-consulta .mdpd-consulta__check input[type="checkbox"] {
	background-color: var(--mdpd-toggle-fondo, #d5dce0);
	border-color: var(--mdpd-toggle-borde, #c2ccd2);
}

.mdpd-consulta .mdpd-consulta__check input[type="checkbox"]:checked {
	background-color: var(--primary-color, #465f70);
	border-color: var(--primary-color, #465f70);
}

.mdpd-consulta__submit {
	font-size: 1em;
}

/* `expand` de Flatsome estira el botón, pero el contenido es un flex nuestro. */
.mdpd-consulta__submit.expand {
	justify-content: center;
}

/* Ícono dentro del campo, a la izquierda. */
.mdpd-consulta__control {
	display: block;
	position: relative;
}

.mdpd-consulta__icono {
	color: var(--mdpd-consulta-icono);
	font-size: 1.1em;
	pointer-events: none;
	position: absolute;
	right: 0.9em;
	top: 50%;
	transform: translateY(-50%);
}

/* Con `.mdpd-consulta` adelante para ganarle a `input[type=text]` de Flatsome,
   que setea el padding en shorthand. */
.mdpd-consulta .mdpd-consulta__control > input,
.mdpd-consulta .mdpd-consulta__control > textarea {
	padding-right: 2.6em;
}

/* En el textarea el ícono va arriba, a la altura de la primera línea (Flatsome
   le da 0.7em de padding arriba), no al medio de la caja. */
.mdpd-consulta__control--area .mdpd-consulta__icono {
	top: 0.8em;
	transform: none;
}

/* ---------------------------------------------------------------
   Fechas: combo desde/hasta (assets/mdpd-date-range-picker.*)

   El componente viene del plugin de reservas con su propia paleta y su
   propia idea de cómo se ve un campo. Acá se lo trae al portal sin tocarlo:
   todo sale de las mismas variables que ya usan los demás campos del
   formulario, así que sigue al tema en vez de tener colores propios.
   --------------------------------------------------------------- */

.mdpd-consulta__fechas {
	--mdpd-drp-h: var(--mdpd-consulta-flat-alto);
	/* Píldora, como todos los campos del portal (el componente traía 0.5rem). */
	--mdpd-drp-radius: var(--mdpd-consulta-flat-radio);
	--mdpd-drp-bg: var(--mdpd-consulta-flat-fondo);
	--mdpd-drp-border: var(--mdpd-consulta-flat-borde);
	--mdpd-drp-border-focus: var(--mdpd-consulta-icono);
	/* `inherit` y no un color fijo: la fecha elegida se lee con el mismo color
	   que el resto del formulario, sin adivinarle el tono al tema. */
	--mdpd-drp-text: inherit;
	--mdpd-drp-muted: rgba(0, 0, 0, 0.55);
	--mdpd-drp-accent: var(--mdpd-consulta-icono);
	--mdpd-drp-accent-hover: color-mix(in srgb, var(--mdpd-consulta-icono) 80%, black);
	--mdpd-drp-nav-bg: var(--mdpd-consulta-icono);
	--mdpd-drp-nav-bg-hover: color-mix(in srgb, var(--mdpd-consulta-icono) 80%, black);
	--mdpd-drp-nav-text: #fff;
	--mdpd-drp-nav-text-hover: #fff;
	/* El tramo entre las dos fechas es el color del portal aclarado contra
	   blanco. Tono y opacidad van separados a propósito: el componente los
	   recombina con color-mix() para que el resultado sea opaco — con un color
	   con transparencia real se ve la costura donde se empalman los días. */
	--mdpd-drp-range-hue: var(--mdpd-consulta-icono);
	--mdpd-drp-range-alpha: 13%;
	--mdpd-drp-range-text: var(--mdpd-consulta-icono);
}

/* Adentro del campo entran dos líneas (etiqueta + valor) en el alto de un
   input normal, así que llevan tamaño e interlínea propios: sin fijar el
   line-height heredarían el del formulario —1.5 o más— y no entrarían. En em
   para que acompañen si cambia el tamaño de letra del formulario. */
.mdpd-consulta__fechas .mdpd-drp-seg-label {
	font-size: 0.6em !important;
	line-height: 1.15 !important;
}

.mdpd-consulta__fechas .mdpd-drp-seg-value {
	font-size: 0.9em !important;
	line-height: 1.2 !important;
}

/* El ícono va a la derecha, como en todos los campos de este formulario. El
   componente lo trae a la izquierda (su propia convención), así que se apaga
   el suyo y se dibuja de este lado; es el mismo calendario de Lucide que
   usaban los dos campos de antes. */
.mdpd-consulta__fechas .mdpd-drp-seg:first-child {
	padding-left: 1.1rem !important;
}

.mdpd-consulta__fechas .mdpd-drp-seg:first-child::before {
	content: none !important;
}

.mdpd-consulta__fechas .mdpd-drp-seg[data-drp-seg="checkout"] {
	padding-right: 2.6em !important;
}

/* El alto por `em` (--mdpd-drp-h: 2.507em) queda un pelo distinto al de los
   demás inputs de .form-flat por el redondeo del navegador; fijo en rem para
   que la caja del combo mida exactamente lo mismo que sus vecinos. Ajuste de
   mobile: en desktop el `em` ya daba bien. */
@media (max-width: 767px) {
	.mdpd-consulta__fechas .mdpd-drp-trigger {
		height: 2.507rem;
	}
}

/* Con `.mdpd-drp` —la clase que pone el componente al arrancar— para que el
   ícono aparezca recién cuando el combo existe: hasta entonces el contenedor
   tiene adentro los dos campos de respaldo, que traen el suyo propio. */
.mdpd-consulta__fechas.mdpd-drp::after {
	background-color: var(--mdpd-consulta-icono);
	content: "";
	height: 1.1em;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
	position: absolute;
	right: 0.9em;
	top: 50%;
	transform: translateY(-50%);
	width: 1.1em;
}

/* ---- Dos correcciones para que Flatpickr conviva con Flatsome ----
   Van sobre `.mdpd-drp-calendar` (la clase del componente, no la nuestra):
   no son cuestión de estética de este formulario sino de que el calendario
   se dibuje bien dentro de este tema, así que valen para cualquier picker
   que el portal monte más adelante. */

/* 1. La grilla estaba corrida y la última fila se repartía el ancho.
   En modo multi-mes Flatpickr rellena las puntas de cada mes con celdas
   marcadas `hidden`: no se ven, pero TIENEN que ocupar su lugar para que
   cada semana mida siete y los días caigan bajo su día de la semana. Solo
   les pone `visibility:hidden`, y Flatsome trae una utilidad global
   `.hidden{display:none!important}` que se las lleva puestas. Sin esas
   celdas el mes arranca pegado al lunes y la última fila queda con menos
   de siete, que es lo que `space-around` (de Flatpickr) desparrama.
   De paso vuelven a funcionar los `nth-child(7n+1/7n+7)` con que Flatpickr
   empalma el tramo del rango, que también cuentan de a siete. */
.flatpickr-calendar.mdpd-drp-calendar .flatpickr-day.hidden {
	display: block !important;
	visibility: hidden !important;
}

/* 2. Al segundo mes le faltaba la última columna.
   Flatpickr mide un mes y escribe el ancho del calendario INLINE
   (`(ancho + 1) × cantidad de meses`), contando solo las grillas. Como
   Flatsome pone `box-sizing:border-box` en todo, ese ancho pasa a incluir
   el padding lateral del componente, que en la cuenta de Flatpickr no
   existía: quedan ~29px de menos y `.flatpickr-days`, que es
   `overflow:hidden`, recorta lo que sobra. El componente ya pide
   `width:auto`, pero sin `!important` no le gana a un estilo inline. */
.flatpickr-calendar.mdpd-drp-calendar {
	width: auto !important;
	max-width: none !important;
}

/* El calendario vive fuera del formulario (mdpd-date-range-picker.js lo
   cuelga de su propio popup de pantalla completa, no del form): se lo marca
   con una clase propia para que estos ajustes no alcancen a otro picker que
   el portal pueda tener mañana con otra paleta. Sin z-index acá a propósito:
   con el calendario en `position:static` (mdpd-date-range-picker.css, para
   que el popup lo centre en la pantalla) el z-index no tiene efecto —
   el popup entero ya tiene el suyo, bien por encima de todo. */
.flatpickr-calendar.mdpd-consulta-cal {
	border-radius: 0.5rem;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Ancho fijo en desktop para los dos meses lado a lado (mobile ya trae el
   suyo propio, apilado, en mdpd-date-range-picker.css — no tocar acá). */
@media (min-width: 640px) {
	.flatpickr-calendar.mdpd-consulta-cal {
		width: 640px !important;
	}
}

/* El componente usa una sola variable de texto para el día elegido y para el
   tramo del medio. Le sirve con su dorado claro, pero el color del portal es
   oscuro: sobre él el texto tiene que ser claro, y eso solo vale para los dos
   extremos del rango. */
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.selected,
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.selected:hover,
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.startRange,
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.endRange,
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.startRange:hover,
.flatpickr-calendar.mdpd-consulta-cal .flatpickr-day.endRange:hover {
	color: #fff !important;
}

/* Cantidad: [-] valor [+] en una sola caja, con el mismo fondo, borde, radio y
   alto que los inputs de `.form-flat`. El alto va acá y no lo pone el input de
   adentro: si no, la caja termina 2px más alta por su propio borde. */
.mdpd-consulta__qty {
	align-items: stretch;
	background-color: var(--mdpd-consulta-flat-fondo);
	border: 1px solid var(--mdpd-consulta-flat-borde);
	border-radius: var(--mdpd-consulta-flat-radio);
	display: flex;
	height: var(--mdpd-consulta-flat-alto);
	overflow: hidden;
}

.mdpd-consulta__qty-btn {
	align-items: center;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--mdpd-consulta-icono) !important;
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	font-size: 1.15em;
	font-weight: 700;
	justify-content: center;
	line-height: 1 !important;
	min-height: 0 !important;
	padding: 0 !important;
	width: 2.4em;
}

.mdpd-consulta__qty-btn:disabled {
	cursor: not-allowed;
	opacity: 0.35;
}

.mdpd-consulta__qty input[type="number"] {
	appearance: textfield;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	flex: 1 1 auto;
	font-weight: 700;
	height: 100%;
	-moz-appearance: textfield;
	margin: 0 !important;
	min-width: 0;
	padding: 0 !important;
	text-align: center;
	width: auto;
}

.mdpd-consulta__qty input[type="number"]::-webkit-inner-spin-button,
.mdpd-consulta__qty input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* El honeypot tiene que existir para el bot y no para la persona: fuera de
   pantalla en vez de display:none, que algunos bots detectan. */
.mdpd-consulta__hp {
	height: 1px;
	left: -9999em;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.mdpd-consulta__flash {
	border-radius: var(--mdpd-consulta-radio);
	font-size: 0.9em;
	line-height: 1.35;
}

.mdpd-consulta__flash.is-ok,
.mdpd-consulta__flash.is-error {
	margin-bottom: 0.75em;
	padding: 0.6em 0.8em;
}

.mdpd-consulta__flash.is-ok {
	background: #e7f5ec;
	color: #17663a;
}

.mdpd-consulta__flash.is-error {
	background: #fdecec;
	color: #a02222;
}

/* Lista de seleccionados: filas cortas, que ya tiene su propio scroll. */
.mdpd-consulta__items {
	list-style: none;
	margin: 0 0 1em;
	max-height: 9em;
	overflow-y: auto;
	padding: 0;
}

.mdpd-consulta__items li {
	align-items: center;
	border-bottom: 1px solid #0000001a;
	display: flex;
	font-size: 0.85em;
	gap: 0.5em;
	justify-content: space-between;
	line-height: 1.3;
	padding: 0.25em 0;
}

.mdpd-consulta__item-remove {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	cursor: pointer;
	flex: 0 0 auto;
	font-size: 1.2em;
	height: 1.4em;
	line-height: 1 !important;
	min-height: 0 !important;
	opacity: 0.6;
	padding: 0 0.25em !important;
	width: 1.6em;
}

.mdpd-consulta__item-remove:hover {
	opacity: 1;
}

/* Casillero de selección en las filas de listado */

.mdpd-consulta-check-col .col-inner {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	height: 100%;
	justify-content: center;
}

/* Botón «Consultar» de un clic: la misma píldora que ya usan mapa/cartera. */
/* button.mdpd-pill-btn... y no .mdpd-consulta-check__boton a secas: hace
   falta la especificidad extra para ganarle al border/padding de
   .mdpd-pill-btn (style.css), que también son !important. */
button.mdpd-pill-btn.mdpd-consulta-check__boton {
	border-color: #6b8592 !important;
	font-size: 0.7rem;
	padding: 0.3em 0.5em !important;
}

.mdpd-consulta-check label {
	align-items: center;
	cursor: pointer;
	display: flex;
	margin: 0;
}

.mdpd-consulta-check label > span {
	align-items: center;
	display: inline-flex;
	gap: 0.4em;
}

.mdpd-consulta-check__icon {
	color: #6b8592;
	font-size: 1.6em;
}

.mdpd-consulta-check input[type="checkbox"] {
	margin: 0;
}

/* En mobile «Consultar» y la casilla de multiconsulta comparten línea (el
   salto que los separa en desktop no hace falta acá) pero siguen siendo el
   pie de la tarjeta, no un dato más: van a la derecha, igual que en desktop. */
@media (max-width: 549px) {
	.mdpd-consulta-check-col .col-inner {
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		padding-top: 0.3em;
	}

	.mdpd-consulta-check-col {
		margin-top: 0.5em !important;
	}
}

/* Panel de consulta múltiple, arriba del listado */

/* Mismo marco que `.mdpd-caja` (style.css), que lo reusan la ficha y los datos
   del anunciante. */
.mdpd-consulta-panel {
	background: #fff;
	border: 2px solid var(--mdpd-caja-borde, #f2f2f2);
	border-radius: var(--mdpd-caja-radio, 0.75rem);
	margin-bottom: 1.25rem;
	padding: var(--mdpd-caja-padding, 1em 1.25em);
}

.mdpd-consulta-panel__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	justify-content: space-between;
}

.mdpd-consulta-panel__title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
}

.mdpd-consulta-panel__toggle,
.mdpd-consulta__submit {
	align-items: center;
	display: inline-flex;
	gap: 0.5em;
}

/* El toggle vive afuera del form, así que no le llega el radio redondeado que
   `.form-flat` le da al botón de enviar: las dos CTA tienen que verse iguales. */
.mdpd-consulta-panel__toggle {
	border-radius: 99em;
}

/* La regla de arriba le gana al display:none del atributo hidden. */
.mdpd-consulta-panel__toggle[hidden] {
	display: none;
}

/* Despliegue animado sin alto fijo: la fila del grid pasa de 0fr a 1fr. */
.mdpd-consulta-panel__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s ease, visibility 0s linear 0.28s;
	visibility: hidden;
}

.mdpd-consulta-panel.is-open .mdpd-consulta-panel__body {
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.28s ease, visibility 0s;
	visibility: visible;
}

.mdpd-consulta-panel__body-inner {
	min-height: 0;
	overflow: hidden;
}

/* La separación con el encabezado va como margen adentro del contenedor que
   recorta, y no como padding: el padding se ve igual con la fila en 0fr y deja
   la barra con aire de más cuando el formulario está plegado. */
.mdpd-consulta--panel .mdpd-consulta__flash {
	margin-top: 1em;
}

.mdpd-consulta__seleccion {
	margin-bottom: 1em;
}

.mdpd-consulta__seleccion-head {
	align-items: baseline;
	display: flex;
	gap: 0.75em;
	justify-content: space-between;
	margin: 0 0 0.35em;
}

.mdpd-consulta__count {
	font-size: 0.85em;
	font-weight: 600;
}

.mdpd-consulta__select-all {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	cursor: pointer;
	font-size: 0.85em;
	line-height: 1 !important;
	min-height: 0 !important;
	padding: 0 !important;
	text-decoration: underline;
}

.mdpd-consulta__select-all[hidden] {
	display: none;
}

/* Diálogo */

/* Backdrop de punta a punta de la pantalla — el propio [data-mdpd-modal].
   Nivel 1 de la escala de z-index del portal (style.css, :root): plano, sin
   "top layer", así Flatpickr (nivel 2) y Tooltipster (nivel 3) se dibujan
   arriba con un z-index de toda la vida. Ver assets/mdpd-modal.js. */
.mdpd-consulta-dialog {
	display: none;
	align-items: center;
	background: #00000073;
	inset: 0;
	justify-content: center;
	overflow: auto;
	overscroll-behavior: contain;
	padding: 1rem;
	position: fixed;
	z-index: var(--mdpd-z-dialog);
}

.mdpd-consulta-dialog.mdpd-modal--open {
	display: flex;
}

.mdpd-consulta-dialog__panel {
	background: #fff;
	border-radius: 0.75rem;
	box-shadow: 0 1rem 3rem #00000040;
	max-width: 28rem;
	padding: 1.5em;
	position: relative;
	width: 100%;
}

.mdpd-consulta-dialog__close {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1 !important;
	min-height: 0 !important;
	padding: 0.2em !important;
	position: absolute;
	right: 0.5em;
	top: 0.4em;
}

/* Pie: a quién le llega la consulta. Lo clona consulta.js de la tarjeta que
   abrió el diálogo, así que arranca vacío y oculto. */
.mdpd-consulta-dialog__pie {
	border-top: 1px solid var(--mdpd-caja-borde, #f2f2f2);
	font-size: 0.95rem;
	margin-top: 1em;
	padding-top: 1em;
}

.mdpd-consulta-dialog__pie[hidden] {
	display: none;
}

.mdpd-consulta-dialog__pie .mdpd-inmo-firma {
	margin-bottom: 0;
}

/* Formulario en la barra lateral de la ficha */

.mdpd-consulta--ficha .mdpd-consulta__title {
	margin-top: 0;
}

/* En el panel hay ancho de sobra: datos a la izquierda, mensaje a la derecha. */
@media (min-width: 850px) {
	.mdpd-consulta--panel .mdpd-consulta__grid {
		display: grid;
		gap: 0 1.5em;
		grid-template-columns: 1fr 1fr;
	}

	.mdpd-consulta--panel .mdpd-consulta__col--mensaje {
		display: flex;
		flex-direction: column;
	}

	.mdpd-consulta--panel .mdpd-consulta__field--mensaje,
	.mdpd-consulta--panel .mdpd-consulta__field--mensaje .mdpd-consulta__control {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
	}

	.mdpd-consulta--panel .mdpd-consulta__field--mensaje textarea {
		flex: 1 1 auto;
		min-height: 6em;
		resize: vertical;
	}
}