← All changes | assets/css/shortcodes/trip-search-shortcode.css +203 -6 3.0.5 → 3.0.16 View file →

		@@ -237,8 +237,16 @@
237	237	Dropdown columns
238	238	------------------------------------------------------------------------- */
239	239	body .yatra-trip-search-shortcode .yatra-search-dropdown {
240	240	position: relative !important;
	241	+ /* display:flex + align-items:stretch makes the trigger fill the full bar
	242	+ height (same mechanism as the keyword segment), so the trigger's own
	243	+ align-items:center can vertically centre the icon + label/value within
	244	+ the bar. As a plain block the trigger sat at the top, leaving the labels
	245	+ higher than the Search field. The absolutely-positioned menu is out of
	246	+ flow, so it's unaffected. */
	247	+ display: flex !important;
	248	+ align-items: stretch !important;
241	249	flex: 1 1 auto !important;
242	250	min-width: 180px !important;
243	251	margin: 0 !important;
244	252	padding: 0 !important;
		@@ -244,8 +252,19 @@
244	252	padding: 0 !important;
245	253	isolation: isolate;
246	254	}
247	255
	256	+/* When a dropdown is open, lift its whole (isolated) stacking context above the
	257	+ sibling dropdowns that follow it in the DOM. `isolation: isolate` above makes
	258	+ each dropdown its own stacking context, so without this the open dropdown's
	259	+ absolutely-positioned menu is painted UNDER later siblings. Most visible on
	260	+ mobile, where the bar stacks vertically and the open Destination menu
	261	+ overlaps the Activity / Duration / Budget rows below it (their labels bled
	262	+ through). Applies on every viewport, so it also hardens desktop. */
	263	+body .yatra-trip-search-shortcode .yatra-search-dropdown.open {
	264	+ z-index: var(--yatra-ts-z-dropdown) !important;
	265	+}
	266	+
248	267	body .yatra-trip-search-shortcode .yatra-dropdown-trigger {
249	268	display: flex !important;
250	269	flex-direction: row !important;
251	270	align-items: center !important;
		@@ -575,21 +594,45 @@
575	594	border-radius: 3px !important;
576	595	box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3) !important;
577	596	}
578	597
	598	+/* Range inputs centred on the track (top:50%), matching the Price Range
	599	+ filter slider. The previous top:37% left the thumbs floating above the
	600	+ track. Inputs are click-through; only their thumbs capture pointer events. */
579	601	body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range'] {
580	602	position: absolute !important;
	603	+ left: 0 !important;
581	604	width: 100% !important;
582	605	height: 6px !important;
583		- top: 37% !important;
	606	+ top: 50% !important;
	607	+ transform: translateY(-50%) !important;
584	608	margin: 0 !important;
585	609	padding: 0 !important;
	610	+ border: 0 !important;
586	611	background: transparent !important;
587	612	-webkit-appearance: none !important;
588	613	appearance: none !important;
589		- pointer-events: none;
	614	+ pointer-events: none !important;
	615	+ box-sizing: border-box !important;
	616	+ cursor: pointer !important;
590	617	}
591	618
	619	+/* Max thumb above min so an overlapping max handle stays grabbable (same as
	620	+ the price slider). z-index intentionally NOT !important. */
	621	+body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range'].yatra-range-min {
	622	+ z-index: 3;
	623	+}
	624	+
	625	+body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range'].yatra-range-max {
	626	+ z-index: 4;
	627	+}
	628	+
	629	+body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-webkit-slider-runnable-track {
	630	+ height: 6px !important;
	631	+ background: transparent !important;
	632	+ border-radius: 3px !important;
	633	+}
	634	+
592	635	body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-webkit-slider-thumb {
593	636	-webkit-appearance: none !important;
594	637	appearance: none !important;
595	638	width: 20px !important;
		@@ -596,14 +639,29 @@
596	639	height: 20px !important;
597	640	border-radius: 50% !important;
598	641	background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
599	642	border: 3px solid var(--yatra-primary, #3b82f6) !important;
600		- cursor: pointer !important;
	643	+ cursor: grab !important;
601	644	pointer-events: all !important;
602		- z-index: 3 !important;
603	645	box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
	646	+ margin-top: -7px !important;
604	647	}
605	648
	649	+body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-webkit-slider-thumb:hover {
	650	+ transform: scale(1.06) !important;
	651	+ box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35) !important;
	652	+}
	653	+
	654	+body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-webkit-slider-thumb:active {
	655	+ cursor: grabbing !important;
	656	+}
	657	+
	658	+body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-moz-range-track {
	659	+ height: 6px !important;
	660	+ background: transparent !important;
	661	+ border-radius: 3px !important;
	662	+}
	663	+
606	664	body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-moz-range-thumb {
607	665	width: 20px !important;
608	666	height: 20px !important;
609	667	border-radius: 50% !important;
		@@ -608,14 +666,17 @@
608	666	height: 20px !important;
609	667	border-radius: 50% !important;
610	668	background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
611	669	border: 3px solid var(--yatra-primary, #3b82f6) !important;
612		- cursor: pointer !important;
	670	+ cursor: grab !important;
613	671	pointer-events: all !important;
614		- z-index: 3 !important;
615	672	box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
616	673	}
617	674
	675	+body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-moz-range-thumb:hover {
	676	+ transform: scale(1.06) !important;
	677	+}
	678	+
618	679	/* -------------------------------------------------------------------------
619	680	Submit button
620	681	------------------------------------------------------------------------- */
621	682	body .yatra-trip-search-shortcode .yatra-search-button-container {
		@@ -742,5 +803,141 @@
742	803
743	804	body .yatra-trip-search-shortcode .yatra-duration-menu {
744	805	min-width: 100% !important;
745	806	}
	807	+}
	808	+
	809	+/* ---------------------------------------------------------------------------
	810	+ Date field (optional, opt-in via Settings → Search & Listing → Date).
	811	+ Mirrors the keyword segment so it sits inline with the other search fields.
	812	+ Uses a native <input type="date"> for zero-dependency, mobile-friendly UX.
	813	+--------------------------------------------------------------------------- */
	814	+body .yatra-trip-search-shortcode .yatra-search-date-segment {
	815	+ display: flex !important;
	816	+ flex: 1;
	817	+ align-items: stretch !important;
	818	+ min-width: 150px;
	819	+ max-width: 240px;
	820	+ margin: 0 !important;
	821	+ padding: 0 !important;
	822	+}
	823	+
	824	+body .yatra-trip-search-shortcode .yatra-search-date-inner {
	825	+ display: flex !important;
	826	+ flex-direction: row;
	827	+ align-items: center !important;
	828	+ gap: 10px !important;
	829	+ width: 100% !important;
	830	+ min-height: var(--yatra-ts-row) !important;
	831	+ padding: 8px 12px !important;
	832	+ margin: 0 !important;
	833	+ border: 1px solid transparent !important;
	834	+ border-radius: calc(var(--yatra-ts-radius) - 6px) !important;
	835	+ background: transparent !important;
	836	+ box-shadow: none !important;
	837	+ transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	838	+}
	839	+
	840	+body .yatra-trip-search-shortcode .yatra-search-date-inner:hover {
	841	+ background: #f8fafc !important;
	842	+}
	843	+
	844	+body .yatra-trip-search-shortcode .yatra-search-date-inner:focus-within {
	845	+ background: #fafafa !important;
	846	+ border-color: rgba(37, 99, 235, 0.28) !important;
	847	+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
	848	+ outline: none !important;
	849	+}
	850	+
	851	+body .yatra-trip-search-shortcode .yatra-search-date-leading {
	852	+ display: flex !important;
	853	+ flex-shrink: 0 !important;
	854	+ align-items: center !important;
	855	+ justify-content: center !important;
	856	+ width: 20px !important;
	857	+ height: 20px !important;
	858	+ margin: 0 !important;
	859	+ padding: 0 !important;
	860	+ border: none !important;
	861	+ background: transparent !important;
	862	+ color: #64748b !important;
	863	+}
	864	+
	865	+body .yatra-trip-search-shortcode .yatra-search-date-leading svg {
	866	+ display: block !important;
	867	+ width: 20px !important;
	868	+ height: 20px !important;
	869	+ max-width: none !important;
	870	+ fill: none !important;
	871	+ stroke: currentColor !important;
	872	+ vertical-align: middle !important;
	873	+}
	874	+
	875	+body .yatra-trip-search-shortcode .yatra-search-date-inner:focus-within .yatra-search-date-leading {
	876	+ color: #2563eb !important;
	877	+}
	878	+
	879	+body .yatra-trip-search-shortcode .yatra-search-date-stack {
	880	+ display: flex !important;
	881	+ flex-direction: column !important;
	882	+ align-items: flex-start !important;
	883	+ justify-content: center !important;
	884	+ gap: 4px !important;
	885	+ flex: 1 1 auto !important;
	886	+ min-width: 0 !important;
	887	+ margin: 0 !important;
	888	+ padding: 0 !important;
	889	+}
	890	+
	891	+body .yatra-trip-search-shortcode .yatra-search-date-stack .yatra-dropdown-label {
	892	+ margin: 0 !important;
	893	+ padding: 0 !important;
	894	+}
	895	+
	896	+body .yatra-trip-search-shortcode .yatra-search-date-input {
	897	+ display: block !important;
	898	+ width: 100% !important;
	899	+ min-width: 0 !important;
	900	+ margin: 0 !important;
	901	+ padding: 0 !important;
	902	+ border: none !important;
	903	+ border-radius: 0 !important;
	904	+ background: transparent !important;
	905	+ background-color: transparent !important;
	906	+ box-shadow: none !important;
	907	+ font-size: 15px !important;
	908	+ font-weight: 600 !important;
	909	+ line-height: 1.3 !important;
	910	+ color: var(--yatra-ts-text) !important;
	911	+ font-family: inherit !important;
	912	+}
	913	+
	914	+body .yatra-trip-search-shortcode .yatra-search-date-input:focus {
	915	+ outline: none !important;
	916	+ box-shadow: none !important;
	917	+}
	918	+
	919	+body .yatra-trip-search-shortcode .yatra-search-date-input::-webkit-calendar-picker-indicator {
	920	+ cursor: pointer;
	921	+ opacity: 0.55;
	922	+ margin: 0;
	923	+}
	924	+
	925	+body .yatra-trip-search-shortcode .yatra-search-date-input::-webkit-calendar-picker-indicator:hover {
	926	+ opacity: 0.9;
	927	+}
	928	+
	929	+/* When flatpickr upgrades the native date input it becomes a read-only text
	930	+ field opened by click; show a pointer cursor and keep the caret hidden. */
	931	+body .yatra-trip-search-shortcode .yatra-search-date-input.flatpickr-input {
	932	+ cursor: pointer !important;
	933	+ caret-color: transparent !important;
	934	+}
	935	+
	936	+/* Placeholder ("Any date") shown when no date is selected. Native type="date"
	937	+ ignores placeholder, but flatpickr converts the field to a text input where
	938	+ it renders — matching the muted placeholder styling of the keyword field. */
	939	+body .yatra-trip-search-shortcode .yatra-search-date-input::placeholder {
	940	+ color: #94a3b8 !important;
	941	+ font-weight: 500 !important;
	942	+ opacity: 1 !important;
746	943	}