/*
 * Trip Ooty — Mobile Search Card + Guests Bottom Sheet + Search Button (OYO-style)
 * Child theme: traveler-childtheme-oyo-mobile-v9
 *
 * SCOPE: presentational CSS only. No markup, PHP, AJAX, booking, filter,
 * sort, or desktop styling is touched. Every rule is scoped inside
 * @media (max-width: 767px). Selectors target only elements that already
 * exist in the parent theme's rendered HTML.
 *
 * The Guests dropdown is Bootstrap 5 (`data-bs-toggle="dropdown"`). Popper
 * positions `.dropdown-menu` with an inline `transform` when it opens; the
 * `!important` rules below override that inline style to pin it to the
 * bottom of the viewport instead, turning it into a bottom sheet purely
 * with CSS.
 *
 * `.tripooty-guest-sheet-backdrop`, `.tripooty-guest-sheet-summary`, and
 * `.tripooty-guest-sheet-done` are new elements injected by
 * js/oyo-mobile-guest-sheet.js (not present in parent markup, and only
 * ever injected on mobile viewports) — styled here, created there.
 *
 * SUPERSEDES css/oyo-mobile-search-button.css for the card + button rules
 * (that file is dequeued in functions.php once this one ships — see the
 * dequeue note there). oyo-mobile-search-button.css is left in the theme
 * folder, unenqueued, so this change stays easy to roll back: re-enabling
 * the old enqueue and removing the new one restores the prior state.
 */

@media (max-width: 767px) {

	/* ============================================================
	   1. SEARCH CARD — container
	   ============================================================ */
	.st-banner-search-form.style_2 .st-search-form-el {
		background: #FFFFFF;
		border: 1px solid #E8E8E8;
		border-radius: 16px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.08);
		padding: 4px 16px;
		overflow: hidden;
	}

	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form {
		background: transparent;
	}

	/* Row divider rhythm — compact spacing between Location / Dates / Guests */
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-group,
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .destination-search {
		border-bottom: 1px solid #ECECEC;
		padding: 12px 4px;
		min-height: 44px; /* touch target */
	}
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-guest {
		border-bottom: none;
	}

	/* ============================================================
	   2. ROW 1 — Location (entire row already clickable via existing
	      .field-detination dropdown-toggle; styling only)
	   ============================================================ */
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .destination-search .st-form-dropdown-icon label {
		color: #6B7280;
		font-size: 12px;
		font-weight: 500;
		text-transform: none;
		margin-bottom: 2px;
	}
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .destination-search .render input {
		color: #1F1F1F;
		font-size: 15px;
		font-weight: 600;
	}
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .destination-search .render input::placeholder {
		color: #9CA3AF;
		font-weight: 400;
	}
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .destination-search .stt-icon-location1 {
		color: #6B7280;
	}

	/* ============================================================
	   3. ROW 2 — Check-in | Check-out (side-by-side, cleaner spacing)
	   ============================================================ */
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-date-search {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-date-search .date-item-wrapper {
		flex: 1 1 0;
		min-width: 0;
	}
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-date-search .item-inner label {
		color: #6B7280;
		font-size: 12px;
		font-weight: 500;
		margin-bottom: 2px;
	}
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-date-search .render {
		color: #1F1F1F;
		font-size: 15px;
		font-weight: 600;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-date-search .stt-icon-in,
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-date-search .stt-icon-out {
		color: #6B7280;
	}
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-date-search .date-item-arrow {
		color: #9CA3AF;
		font-size: 12px;
		margin: 0 8px;
		flex: 0 0 auto;
	}

	/* ============================================================
	   4. ROW 3 — Guests: compact "2 Guests • 1 Room" summary row
	      (label hidden once .render is populated — same swap the
	      parent theme's own initGuestDropdown()/numberButtonFunc()
	      already perform via the .hide class toggle)
	   ============================================================ */
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-guest {
		padding: 12px 4px;
		min-height: 44px;
		display: flex;
		align-items: center;
	}
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-guest .st-form-dropdown-icon label {
		color: #6B7280;
		font-size: 12px;
		font-weight: 500;
	}
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-guest .render span {
		color: #1F1F1F;
		font-size: 15px;
		font-weight: 600;
	}
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-guest .stt-icon-user2 {
		color: #6B7280;
	}
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .field-guest .form-extra-field {
		width: 100%;
	}

	/* ============================================================
	   5. GUESTS BOTTOM SHEET — reskin the existing Bootstrap
	      .dropdown-menu (opened via the parent theme's own
	      data-bs-toggle="dropdown"; no new dropdown is created)
	   ============================================================ */
	.field-guest .dropdown-menu.st-modern-style {
		position: fixed !important;
		inset: auto 0 0 0 !important; /* top: auto; right: 0; bottom: 0; left: 0 */
		transform: translateY(100%); /* closed state — overrides Popper's inline transform once .show is added */
		opacity: 0;
		width: 100%;
		max-width: 100%;
		margin: 0;
		background: #FFFFFF;
		border: none;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
		padding: 8px 20px 20px;
		max-height: 75vh;
		overflow-y: auto;
		z-index: 1056;
		transition: transform 0.25s ease, opacity 0.25s ease;
	}

	.field-guest .dropdown-menu.st-modern-style.show {
		transform: translateY(0) !important;
		opacity: 1;
	}

	/* Small centered grabber to read as a native bottom sheet */
	.field-guest .dropdown-menu.st-modern-style::before {
		content: "";
		display: block;
		width: 40px;
		height: 4px;
		background: #E8E8E8;
		border-radius: 2px;
		margin: 4px auto 16px;
	}

	.field-guest .dropdown-menu.st-modern-style li.item {
		padding: 14px 0;
		border-bottom: 1px solid #ECECEC;
	}
	.field-guest .dropdown-menu.st-modern-style li.item:last-of-type {
		border-bottom: none;
	}
	.field-guest .dropdown-menu.st-modern-style li.item label {
		color: #1F1F1F;
		font-size: 15px;
		font-weight: 600;
		margin: 0;
	}

	/* Existing +/- buttons — untouched logic, styling only */
	.field-guest .dropdown-menu.st-modern-style .st-number-wrapper {
		gap: 16px;
	}
	.field-guest .dropdown-menu.st-modern-style .st-number-wrapper .prev,
	.field-guest .dropdown-menu.st-modern-style .st-number-wrapper .next {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		border: 1px solid #E8E8E8;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	.field-guest .dropdown-menu.st-modern-style .st-number-wrapper .prev svg,
	.field-guest .dropdown-menu.st-modern-style .st-number-wrapper .next svg {
		stroke: #6B7280;
	}
	.field-guest .dropdown-menu.st-modern-style .st-number-wrapper .prev:active,
	.field-guest .dropdown-menu.st-modern-style .st-number-wrapper .next:active {
		border-color: #FF1F3D;
	}
	.field-guest .dropdown-menu.st-modern-style .st-number-wrapper .prev:active svg,
	.field-guest .dropdown-menu.st-modern-style .st-number-wrapper .next:active svg {
		stroke: #FF1F3D;
	}
	.field-guest .dropdown-menu.st-modern-style .st-input-number {
		width: 32px;
		text-align: center;
		color: #1F1F1F;
		font-size: 15px;
		font-weight: 600;
		border: none;
		background: transparent;
	}

	/* Live Summary strip (JS injects the text node this styles) */
	.tripooty-guest-sheet-summary {
		background: #FFF5F6;
		color: #FF1F3D;
		font-size: 14px;
		font-weight: 600;
		border-radius: 10px;
		padding: 10px 14px;
		margin: 12px 0;
		text-align: center;
	}

	/* Done button (JS injects; styled here to spec) */
	.tripooty-guest-sheet-done {
		width: 100%;
		height: 48px;
		border-radius: 10px;
		background: #FF1F3D;
		color: #FFFFFF;
		font-size: 16px;
		font-weight: 600;
		border: none;
		box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	}
	.tripooty-guest-sheet-done:active {
		background: #E91E3A;
	}

	/* Dark overlay (JS injects this element on show.bs.dropdown) */
	.tripooty-guest-sheet-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.45);
		z-index: 1055;
	}

	/* ============================================================
	   6. SEARCH BUTTON — pill below the card, in normal document flow
	      (no position:absolute hack, no magic-number margin needed —
	      the parent theme's own markup already places the button
	      wrapper right after the card's fields)
	   ============================================================ */
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .button-search-wrapper {
		width: 100%;
		margin: 14px 0 0;
	}
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .button-search-wrapper .btn-search {
		width: 100%;
		height: 48px;
		border-radius: 10px;
		background: #FF1F3D;
		color: #FFFFFF;
		font-weight: 600;
		font-size: 16px;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		box-shadow: 0 2px 8px rgba(0,0,0,0.08);
		transition: background 0.15s ease;
	}
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .button-search-wrapper .btn-search:active {
		background: #E91E3A;
	}
	.st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .button-search-wrapper .btn-search .stt-icon {
		display: none; /* text-only button, OYO-style */
	}

}