/*
 * Trip Ooty — sticky mobile bottom nav (Filter / Sort / Map).
 * Replaces the old floating blue "Map" button. Desktop/tablet never see
 * this — it's only enqueued when wp_is_mobile() is true (functions.php),
 * and hidden again above the tablet breakpoint as a second safety net.
 *
 * Purely presentational + delegates to Traveler's own existing click
 * handlers via real, unmodified classes (.button-filter, .map-view) —
 * see the comment block above the markup in page-rooms-with-cards.php.
 */

.tripooty-oyo-m-bottomnav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	display: flex;
	align-items: stretch;
	background: #fff;
	border-top: 1px solid #E8E8E8;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

.tripooty-oyo-m-bottomnav-btn {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 8px 4px 10px;
	background: none;
	border: none;
	border-right: 1px solid #F0F0F0;
	font-size: 11px;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1;
}
.tripooty-oyo-m-bottomnav-btn:last-child {
	border-right: none;
}
.tripooty-oyo-m-bottomnav-btn .stt-icon {
	font-size: 16px;
	line-height: 1;
}

/* Filter button: icon+label now live inside an inner .button-filter span
   (needed so Traveler's own `.show-filter-mobile .button-filter` click
   binding in v3/js/filter/hotel.js actually matches this button — see
   the comment above the markup in page-rooms-with-cards.php). This just
   re-applies the same column layout to that inner span so it still
   looks identical to the Sort/Map buttons; no behavioural change. */
.tripooty-oyo-m-bottomnav-btn.show-filter-mobile .button-filter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

@media (min-width: 768px) {
	.tripooty-oyo-m-bottomnav {
		display: none;
	}
}

/* The real sort dropdown (components/toolbar.php, #dropdownMenuSort)
   is desktop-only by default (`d-none d-md-flex`). When opened from the
   mobile bottom nav (see js/oyo-mobile-bottomnav.js), show it as a
   simple bottom-anchored panel instead of leaving it display:none. Only
   visibility/position changes here — the sort options and their click
   behaviour are 100% Traveler's own, untouched. */
@media (max-width: 767px) {
	.toolbar-action.tripooty-oyo-m-sort-open {
		display: flex !important;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 58px;
		z-index: 1000;
		background: #fff;
		border-top: 1px solid #E8E8E8;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
		padding: 8px 10px;
	}
}