/** * Yatra trip search bar — full reset + layout (shortcode only). * All rules scoped under body .yatra-trip-search-shortcode to beat typical theme CSS. * Use with: [yatra_search] → root .yatra-trip-search-shortcode * * @package Yatra */ /* ------------------------------------------------------------------------- Scope: high specificity (body + block class). box-sizing for predictable layout. ------------------------------------------------------------------------- */ body .yatra-trip-search-shortcode { --yatra-ts-accent: var(--yatra-primary-dark, #2563eb); --yatra-ts-accent-hover: var(--yatra-primary-darker, #1d4ed8); --yatra-ts-surface: #ffffff; --yatra-ts-text: #0f172a; --yatra-ts-muted: #64748b; --yatra-ts-border: #e2e8f0; --yatra-ts-radius: 14px; --yatra-ts-row: 52px; --yatra-ts-z-dropdown: 10050; display: block; width: 100%; max-width: 100%; position: relative; z-index: 1000; isolation: isolate; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.4; color: var(--yatra-ts-text); -webkit-font-smoothing: antialiased; } body .yatra-trip-search-shortcode *, body .yatra-trip-search-shortcode *::before, body .yatra-trip-search-shortcode *::after { box-sizing: border-box !important; } body .yatra-trip-search-shortcode button, body .yatra-trip-search-shortcode input, body .yatra-trip-search-shortcode select { font-family: inherit !important; font-size: inherit; line-height: inherit; } /* ------------------------------------------------------------------------- Horizontal strip (background behind bar) ------------------------------------------------------------------------- */ body .yatra-trip-search-shortcode .yatra-horizontal-search { padding:0; margin: 0 !important; position: relative; z-index: 1; } body .yatra-trip-listing-search-wrap .yatra-trip-search-shortcode .yatra-horizontal-search { padding-top: 0 !important; padding-bottom: 28px !important; background: transparent !important; } body .yatra-trip-search-shortcode .yatra-horizontal-search-container { width: 100% !important; max-width: var(--yatra-container-max-width, 1200px) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--yatra-container-padding, 20px) !important; padding-right: var(--yatra-container-padding, 20px) !important; position: relative; z-index: 2; } /* ------------------------------------------------------------------------- Main bar ------------------------------------------------------------------------- */ body .yatra-trip-search-shortcode .yatra-search-bar { display: flex !important; flex-direction: row; align-items: stretch !important; flex-wrap: nowrap; gap: 0 !important; width: 100% !important; margin: 0 !important; padding: 5px 6px 5px 8px !important; background: var(--yatra-ts-surface) !important; border: 1px solid var(--yatra-ts-border) !important; border-radius: var(--yatra-ts-radius) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06) !important; transition: box-shadow 0.2s ease, border-color 0.2s ease; } body .yatra-trip-search-shortcode .yatra-search-bar:hover { border-color: #cbd5e1 !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 32px rgba(15, 23, 42, 0.08) !important; } body .yatra-trip-search-shortcode .yatra-search-divider { width: 1px !important; flex-shrink: 0 !important; align-self: center !important; height: 28px !important; margin: 0 2px !important; padding: 0 !important; border: none !important; background: rgba(148, 163, 184, 0.45) !important; } /* ------------------------------------------------------------------------- Keyword column ------------------------------------------------------------------------- */ body .yatra-trip-search-shortcode .yatra-search-keyword-segment { display: flex !important; flex: 2.5; align-items: stretch !important; min-width: 260px; max-width: 480px; margin: 0 !important; padding: 0 !important; } body .yatra-trip-search-shortcode .yatra-search-keyword-inner { display: flex !important; flex-direction: row; align-items: center !important; gap: 10px !important; width: 100% !important; min-height: var(--yatra-ts-row) !important; padding: 8px 12px !important; margin: 0 !important; border: 1px solid transparent !important; border-radius: calc(var(--yatra-ts-radius) - 6px) !important; background: transparent !important; box-shadow: none !important; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } body .yatra-trip-search-shortcode .yatra-search-keyword-inner:hover { background: #f8fafc !important; } body .yatra-trip-search-shortcode .yatra-search-keyword-inner:focus-within { background: #fafafa !important; border-color: rgba(37, 99, 235, 0.28) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; outline: none !important; } body .yatra-trip-search-shortcode .yatra-search-keyword-leading { display: flex !important; flex-shrink: 0 !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; color: #64748b !important; } body .yatra-trip-search-shortcode .yatra-search-keyword-leading svg { display: block !important; width: 20px !important; height: 20px !important; max-width: none !important; fill: none !important; stroke: currentColor !important; vertical-align: middle !important; } body .yatra-trip-search-shortcode .yatra-search-keyword-inner:focus-within .yatra-search-keyword-leading { color: var(--yatra-ts-accent) !important; } body .yatra-trip-search-shortcode .yatra-search-keyword-stack { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 4px !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } body .yatra-trip-search-shortcode .yatra-search-keyword-stack .yatra-dropdown-label { margin: 0 !important; padding: 0 !important; } body .yatra-trip-search-shortcode .yatra-search-keyword-input { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--yatra-ts-text) !important; -webkit-appearance: none !important; appearance: none !important; } body .yatra-trip-search-shortcode .yatra-search-keyword-input::placeholder { color: #94a3b8 !important; font-weight: 500 !important; opacity: 1 !important; } body .yatra-trip-search-shortcode .yatra-search-keyword-input:focus { outline: none !important; box-shadow: none !important; } body .yatra-trip-search-shortcode .yatra-search-keyword-input::-webkit-search-decoration, body .yatra-trip-search-shortcode .yatra-search-keyword-input::-webkit-search-cancel-button { -webkit-appearance: none !important; appearance: none !important; } /* ------------------------------------------------------------------------- Dropdown columns ------------------------------------------------------------------------- */ body .yatra-trip-search-shortcode .yatra-search-dropdown { position: relative !important; /* display:flex + align-items:stretch makes the trigger fill the full bar height (same mechanism as the keyword segment), so the trigger's own align-items:center can vertically centre the icon + label/value within the bar. As a plain block the trigger sat at the top, leaving the labels higher than the Search field. The absolutely-positioned menu is out of flow, so it's unaffected. */ display: flex !important; align-items: stretch !important; flex: 1 1 auto !important; min-width: 180px !important; margin: 0 !important; padding: 0 !important; isolation: isolate; } /* When a dropdown is open, lift its whole (isolated) stacking context above the sibling dropdowns that follow it in the DOM. `isolation: isolate` above makes each dropdown its own stacking context, so without this the open dropdown's absolutely-positioned menu is painted UNDER later siblings. Most visible on mobile, where the bar stacks vertically and the open Destination menu overlaps the Activity / Duration / Budget rows below it (their labels bled through). Applies on every viewport, so it also hardens desktop. */ body .yatra-trip-search-shortcode .yatra-search-dropdown.open { z-index: var(--yatra-ts-z-dropdown) !important; } body .yatra-trip-search-shortcode .yatra-dropdown-trigger { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; width: 100% !important; min-height: var(--yatra-ts-row) !important; margin: 0 !important; padding: 8px 12px !important; border: 1px solid transparent !important; border-radius: calc(var(--yatra-ts-radius) - 6px) !important; background: transparent !important; box-shadow: none !important; cursor: pointer !important; text-align: left !important; overflow: visible !important; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } body .yatra-trip-search-shortcode .yatra-dropdown-trigger:hover { background: #f8fafc !important; } body .yatra-trip-search-shortcode .yatra-dropdown-trigger:active { background: #f1f5f9 !important; } body .yatra-trip-search-shortcode .yatra-dropdown-trigger:focus { outline: none !important; border-color: rgba(37, 99, 235, 0.3) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; } body .yatra-trip-search-shortcode .yatra-dropdown-trigger svg:first-of-type { flex-shrink: 0 !important; display: block !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; margin: 0 !important; padding: 0 !important; color: #64748b !important; fill: none !important; stroke: currentColor !important; } body .yatra-trip-search-shortcode .yatra-dropdown-trigger:hover svg:first-of-type { color: #475569 !important; } body .yatra-trip-search-shortcode .yatra-dropdown-content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } body .yatra-trip-search-shortcode .yatra-dropdown-label { display: block !important; margin: 0 !important; padding: 0 !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--yatra-ts-muted) !important; } body .yatra-trip-search-shortcode .yatra-dropdown-value { display: block !important; margin: 0 !important; padding: 0 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #111827 !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body .yatra-trip-search-shortcode .yatra-dropdown-arrow { flex-shrink: 0 !important; display: block !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; margin: 0 0 0 auto !important; padding: 0 !important; color: #9ca3af !important; fill: none !important; stroke: currentColor !important; transition: transform 0.15s ease; } body .yatra-trip-search-shortcode .yatra-search-dropdown.open .yatra-dropdown-arrow { transform: rotate(180deg); } /* ------------------------------------------------------------------------- Dropdown menus & options ------------------------------------------------------------------------- */ body .yatra-trip-search-shortcode .yatra-dropdown-search-wrap { flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; } body .yatra-trip-search-shortcode .yatra-dropdown-filter-input { width: 100% !important; margin: 0 !important; padding: 8px 10px !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.35 !important; color: #111827 !important; border: 1px solid #e2e8f0 !important; border-radius: 6px !important; background: #f8fafc !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; } body .yatra-trip-search-shortcode .yatra-dropdown-filter-input::placeholder { color: #9ca3af !important; opacity: 1 !important; } body .yatra-trip-search-shortcode .yatra-dropdown-filter-input:focus { outline: none !important; border-color: var(--yatra-primary, #3b82f6) !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important; } body .yatra-trip-search-shortcode .yatra-dropdown-options { flex: 1 1 auto !important; min-height: 0 !important; max-height: 280px !important; overflow-y: auto !important; overflow-x: hidden !important; margin: 0 !important; padding: 2px 0 !important; list-style: none !important; } body .yatra-trip-search-shortcode .yatra-dropdown-option--hidden { display: none !important; } body .yatra-trip-search-shortcode .yatra-dropdown-menu { position: absolute !important; top: calc(100% + 4px) !important; left: 0 !important; right: auto !important; min-width: 260px !important; margin: 0 !important; padding: 6px !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; box-shadow: 0 10px 40px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(15, 23, 42, 0.06) !important; z-index: var(--yatra-ts-z-dropdown) !important; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.95); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: none !important; } body .yatra-trip-search-shortcode .yatra-search-dropdown.open .yatra-dropdown-menu, body .yatra-trip-search-shortcode .yatra-dropdown-menu.show { display: block !important; opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; } body .yatra-trip-search-shortcode .yatra-search-dropdown.open .yatra-dropdown-menu.yatra-dropdown-menu--filterable, body .yatra-trip-search-shortcode .yatra-dropdown-menu.yatra-dropdown-menu--filterable.show { display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 8px !important; max-height: min(380px, 70vh) !important; } body .yatra-trip-search-shortcode .yatra-dropdown-option { margin: 0 !important; padding: 8px 10px !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.35 !important; color: #374151 !important; border-radius: 6px !important; cursor: pointer !important; display: flex !important; align-items: center !important; position: relative !important; background: transparent !important; border: none !important; text-align: left !important; width: 100% !important; box-shadow: none !important; } body .yatra-trip-search-shortcode .yatra-dropdown-option:hover { background: #f1f5f9 !important; color: #0f172a !important; } body .yatra-trip-search-shortcode .yatra-dropdown-option.selected { background: #eff6ff !important; color: var(--yatra-primary-darker, #1d4ed8) !important; font-weight: 600 !important; padding-right: 26px !important; } body .yatra-trip-search-shortcode .yatra-dropdown-option.selected::before { content: '' !important; position: absolute !important; right: 8px !important; top: 50% !important; transform: translateY(-50%) !important; width: 16px !important; height: 16px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat !important; background-position: center !important; background-size: 16px 16px !important; } /* ------------------------------------------------------------------------- Duration panel ------------------------------------------------------------------------- */ body .yatra-trip-search-shortcode .yatra-duration-menu { min-width: 260px !important; padding: 8px !important; } body .yatra-trip-search-shortcode .yatra-duration-slider-wrapper { display: flex !important; flex-direction: column !important; gap: 10px !important; } body .yatra-trip-search-shortcode .yatra-duration-header { text-align: center !important; margin: 0 !important; } body .yatra-trip-search-shortcode .yatra-duration-title { font-size: 13px !important; font-weight: 600 !important; color: #1f2937 !important; margin: 0 0 2px !important; } body .yatra-trip-search-shortcode .yatra-duration-subtitle { font-size: 11px !important; font-weight: 500 !important; color: #6b7280 !important; line-height: 1.3 !important; margin: 0 !important; } body .yatra-trip-search-shortcode .yatra-duration-badges { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 8px 10px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 6px !important; } body .yatra-trip-search-shortcode .yatra-duration-badge { font-size: 11px !important; font-weight: 600 !important; color: #1f2937 !important; padding: 4px 8px !important; background: #ffffff !important; border: 1px solid var(--yatra-primary, #3b82f6) !important; border-radius: 4px !important; } /* Same horizontal inset as .yatra-duration-badges (padding 8px 10px) so the track matches the badge row */ body .yatra-trip-search-shortcode .yatra-dual-range-slider { position: relative !important; height: 36px !important; box-sizing: border-box !important; width: calc(100% - 20px) !important; max-width: calc(100% - 20px) !important; margin: 6px auto 10px !important; padding: 0 !important; } body .yatra-trip-search-shortcode .yatra-slider-track { position: absolute !important; width: calc(100% - 16px) !important; height: 6px !important; left: 8px !important; top: 50% !important; transform: translateY(-50%) !important; background: #e5e7eb !important; border-radius: 3px !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important; box-sizing: border-box !important; } body .yatra-trip-search-shortcode .yatra-slider-range { position: absolute !important; height: 6px !important; top: 50% !important; transform: translateY(-50%) !important; background: linear-gradient(90deg, var(--yatra-primary, #3b82f6) 0%, var(--yatra-primary-dark, #2563eb) 100%) !important; border-radius: 3px !important; box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3) !important; } /* Range inputs centred on the track (top:50%), matching the Price Range filter slider. The previous top:37% left the thumbs floating above the track. Inputs are click-through; only their thumbs capture pointer events. */ body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range'] { position: absolute !important; left: 0 !important; width: 100% !important; height: 6px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; -webkit-appearance: none !important; appearance: none !important; pointer-events: none !important; box-sizing: border-box !important; cursor: pointer !important; } /* Max thumb above min so an overlapping max handle stays grabbable (same as the price slider). z-index intentionally NOT !important. */ body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range'].yatra-range-min { z-index: 3; } body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range'].yatra-range-max { z-index: 4; } body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-webkit-slider-runnable-track { height: 6px !important; background: transparent !important; border-radius: 3px !important; } body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-webkit-slider-thumb { -webkit-appearance: none !important; appearance: none !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important; border: 3px solid var(--yatra-primary, #3b82f6) !important; cursor: grab !important; pointer-events: all !important; box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1) !important; margin-top: -7px !important; } body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-webkit-slider-thumb:hover { transform: scale(1.06) !important; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35) !important; } body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-webkit-slider-thumb:active { cursor: grabbing !important; } body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-moz-range-track { height: 6px !important; background: transparent !important; border-radius: 3px !important; } body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-moz-range-thumb { width: 20px !important; height: 20px !important; border-radius: 50% !important; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important; border: 3px solid var(--yatra-primary, #3b82f6) !important; cursor: grab !important; pointer-events: all !important; box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1) !important; } body .yatra-trip-search-shortcode .yatra-dual-range-slider input[type='range']::-moz-range-thumb:hover { transform: scale(1.06) !important; } /* ------------------------------------------------------------------------- Submit button ------------------------------------------------------------------------- */ body .yatra-trip-search-shortcode .yatra-search-button-container { display: flex !important; flex-shrink: 0 !important; align-items: stretch !important; margin: 0 0 0 4px !important; padding: 4px 4px 4px 10px !important; border: none !important; border-left: 1px solid rgba(148, 163, 184, 0.35) !important; background: transparent !important; } body .yatra-trip-search-shortcode .yatra-search-main-btn { -webkit-appearance: none !important; appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 120px !important; min-height: var(--yatra-ts-row) !important; margin: 0 !important; padding: 0 22px !important; border: none !important; border-radius: 10px !important; background: var(--yatra-ts-accent) !important; background-color: var(--yatra-ts-accent) !important; color: #ffffff !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.01em !important; text-transform: none !important; text-decoration: none !important; cursor: pointer !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 14px rgba(37, 99, 235, 0.28) !important; transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease !important; } body .yatra-trip-search-shortcode .yatra-search-main-btn:hover { background: var(--yatra-ts-accent-hover) !important; background-color: var(--yatra-ts-accent-hover) !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 8px 22px rgba(37, 99, 235, 0.35) !important; } body .yatra-trip-search-shortcode .yatra-search-main-btn:active { transform: scale(0.99); } body .yatra-trip-search-shortcode .yatra-search-main-btn:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35) !important; } /* ------------------------------------------------------------------------- Responsive ------------------------------------------------------------------------- */ @media (max-width: 1024px) { body .yatra-trip-search-shortcode .yatra-search-bar { flex-wrap: wrap !important; gap: 8px !important; } body .yatra-trip-search-shortcode .yatra-search-dropdown { min-width: calc(50% - 20px) !important; flex: 1 1 calc(50% - 20px) !important; } body .yatra-trip-search-shortcode .yatra-search-divider { display: none !important; } } @media (max-width: 768px) { body .yatra-trip-search-shortcode .yatra-search-bar { flex-direction: column !important; align-items: stretch !important; gap: 4px !important; padding: 12px !important; } body .yatra-trip-search-shortcode .yatra-search-keyword-segment { max-width: none !important; width: 100% !important; min-width: 0 !important; } body .yatra-trip-search-shortcode .yatra-search-dropdown { width: 100% !important; min-width: 100% !important; flex: 1 1 auto !important; } body .yatra-trip-search-shortcode .yatra-search-divider { display: block !important; width: 100% !important; height: 1px !important; margin: 6px 0 !important; } body .yatra-trip-search-shortcode .yatra-search-button-container { width: 100% !important; margin-left: 0 !important; padding: 10px 0 4px !important; border-left: none !important; border-top: 1px solid rgba(148, 163, 184, 0.35) !important; } body .yatra-trip-search-shortcode .yatra-search-main-btn { width: 100% !important; min-height: 48px !important; margin-top: 0 !important; } body .yatra-trip-search-shortcode .yatra-dropdown-menu { left: 0 !important; right: 0 !important; min-width: 100% !important; } body .yatra-trip-search-shortcode .yatra-duration-menu { min-width: 100% !important; } }