/*
 * Jonaki Homestay – mobile-only tweaks for the homepage search form.
 *
 * Scope: only inside .jonaki-homestay-scope (the bundle's own scope
 * wrapper), only on screens <= 767px. Desktop layout and the rest of
 * the site are 100% untouched.
 *
 * IMPORTANT: selectors are scoped to "form.glass" (the search widget's
 * own class — see the "glass" utility on its <form> tag in the bundle)
 * rather than a bare "form". The page has more than one <form> (this
 * search widget AND the Contact section's message form both render a
 * ".grid" as a direct child), so a bare "form > .grid" selector was
 * incorrectly re-laying-out the Contact form on mobile too. Scoping to
 * "form.glass" makes sure only this search widget is ever affected.
 *
 * Layout goal (mobile):
 *   Row 1:  [ Check-in ] [ Check-out ]
 *   Row 2:  [ Adults ] [ Children ] [ Rooms ]
 *   Row 3:  [        Search button        ]
 */

@media (max-width: 767px) {
	/* The form's inner grid is the direct child ".grid" of the <form>. */
	.jonaki-homestay-scope form.glass > .grid {
		display: grid !important;
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
		gap: 0.65rem !important;
		align-items: end !important;
	}

	/* Check-in + Check-out share row 1 (3 cols each = 6). */
	.jonaki-homestay-scope form.glass > .grid > label:nth-child(1),
	.jonaki-homestay-scope form.glass > .grid > label:nth-child(2) {
		grid-column: span 3 !important;
	}

	/* Adults + Children + Rooms share row 2 (2 cols each = 6). */
	.jonaki-homestay-scope form.glass > .grid > label:nth-child(3),
	.jonaki-homestay-scope form.glass > .grid > label:nth-child(4),
	.jonaki-homestay-scope form.glass > .grid > label:nth-child(5) {
		grid-column: span 2 !important;
	}

	/* Search button spans full width on row 3. */
	.jonaki-homestay-scope form.glass > .grid > button {
		grid-column: 1 / -1 !important;
	}

	/* Tighter internal padding so labels/values fit inside the
	   narrower mobile cells without truncation or overflow, while
	   keeping the existing rounded/coloured design intact. */
	.jonaki-homestay-scope form.glass > .grid > label {
		min-width: 0 !important;
	}
	.jonaki-homestay-scope form.glass > .grid input[type="date"],
	.jonaki-homestay-scope form.glass > .grid select {
		padding-left: 0.55rem !important;
		padding-right: 0.35rem !important;
		font-size: 0.9rem !important;
		min-height: 44px !important;
	}
	.jonaki-homestay-scope form.glass > .grid > label {
		font-size: 0.78rem !important;
	}

	/* ---------------------------------------------------------------
	   DD/MM/YYYY overlay for the two homepage date inputs.
	   The label gets position:relative so we can pin the display span
	   over the input. The native input stays interactive (transparent
	   text) — taps still open the native mobile date picker.
	   --------------------------------------------------------------- */
	.jonaki-homestay-scope form.glass > .grid > label:nth-child(1),
	.jonaki-homestay-scope form.glass > .grid > label:nth-child(2) {
		position: relative;
	}

	.jonaki-homestay-scope .jh-hp-date-input {
		color: transparent !important;
		caret-color: transparent;
	}
	.jonaki-homestay-scope .jh-hp-date-input::-webkit-datetime-edit,
	.jonaki-homestay-scope .jh-hp-date-input::-webkit-datetime-edit-fields-wrapper,
	.jonaki-homestay-scope .jh-hp-date-input::-webkit-datetime-edit-text,
	.jonaki-homestay-scope .jh-hp-date-input::-webkit-datetime-edit-month-field,
	.jonaki-homestay-scope .jh-hp-date-input::-webkit-datetime-edit-day-field,
	.jonaki-homestay-scope .jh-hp-date-input::-webkit-datetime-edit-year-field {
		color: transparent !important;
		opacity: 0;
	}

	.jonaki-homestay-scope .jh-hp-date-display {
		position: absolute;
		left: 0.85rem;
		right: 2.1rem;
		bottom: 0;
		height: 44px;
		display: flex;
		align-items: center;
		pointer-events: none;
		font-size: 0.9rem;
		color: inherit;
		background: transparent;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.jonaki-homestay-scope .jh-hp-date-display.jh-hp-date-empty {
		color: #8a8a8a;
	}
}