| @@ -804,4 +804,140 @@ | ||
| 804 | 804 | body .yatra-trip-search-shortcode .yatra-duration-menu { |
| 805 | 805 | min-width: 100% !important; |
| 806 | 806 | } |
| 807 | 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; | |
| 943 | +} | |
