| @@ -573,8 +573,24 @@ | ||
| 573 | 573 | object-fit: cover; |
| 574 | 574 | display: block; |
| 575 | 575 | } |
| 576 | 576 | |
| 577 | +/* Placeholder variant — used when the trip has no featured image | |
| 578 | + (or the image URL fails to load). The bundled trip-placeholder.svg | |
| 579 | + is an outline illustration, not a photograph, so contain it on a | |
| 580 | + neutral background instead of cover-cropping. Keeps the | |
| 581 | + confirmation card looking intentional rather than broken. */ | |
| 582 | +.yatra-trip-image--placeholder { | |
| 583 | + background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); | |
| 584 | + box-shadow: 0 12px 24px rgba(99, 102, 241, 0.12); | |
| 585 | +} | |
| 586 | + | |
| 587 | +.yatra-trip-image--placeholder img { | |
| 588 | + object-fit: contain; | |
| 589 | + padding: 16px; | |
| 590 | + opacity: 0.7; | |
| 591 | +} | |
| 592 | + | |
| 577 | 593 | .yatra-trip-info { |
| 578 | 594 | flex: 1; |
| 579 | 595 | } |
| 580 | 596 | |
| @@ -611,8 +627,27 @@ | ||
| 611 | 627 | .yatra-star-filled { |
| 612 | 628 | color: #f59e0b; |
| 613 | 629 | } |
| 614 | 630 | |
| 631 | +/* Half star: base star grey, left half overlaid in amber via an SVG mask. */ | |
| 632 | +.yatra-star-half { | |
| 633 | + position: relative; | |
| 634 | + color: #e2e8f0; | |
| 635 | +} | |
| 636 | + | |
| 637 | +.yatra-star-half::after { | |
| 638 | + content: ""; | |
| 639 | + position: absolute; | |
| 640 | + top: 0; | |
| 641 | + left: 0; | |
| 642 | + bottom: 0; | |
| 643 | + width: 50%; | |
| 644 | + overflow: hidden; | |
| 645 | + background: #f59e0b; | |
| 646 | + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26'/%3E%3C/svg%3E") no-repeat left center / 200% 100%; | |
| 647 | + mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26'/%3E%3C/svg%3E") no-repeat left center / 200% 100%; | |
| 648 | +} | |
| 649 | + | |
| 615 | 650 | .yatra-rating-meta strong { |
| 616 | 651 | color: #0f172a; |
| 617 | 652 | margin-right: 6px; |
| 618 | 653 | } |
| @@ -913,8 +948,23 @@ | ||
| 913 | 948 | flex: 1 1 calc(33.333% - 14px); |
| 914 | 949 | min-width: 150px; |
| 915 | 950 | } |
| 916 | 951 | |
| 952 | +/* Display-only text block placed between form fields */ | |
| 953 | +.yatra-form-text-block p { | |
| 954 | + margin: 0 0 8px; | |
| 955 | + font-size: 14px; | |
| 956 | + line-height: 1.6; | |
| 957 | +} | |
| 958 | + | |
| 959 | +.yatra-form-text-block p:last-child { | |
| 960 | + margin-bottom: 0; | |
| 961 | +} | |
| 962 | + | |
| 963 | +.yatra-form-text-block a { | |
| 964 | + text-decoration: underline; | |
| 965 | +} | |
| 966 | + | |
| 917 | 967 | .yatra-form-group label { |
| 918 | 968 | display: block; |
| 919 | 969 | font-size: 14px; |
| 920 | 970 | font-weight: 600; |
| @@ -932,12 +982,14 @@ | ||
| 932 | 982 | .yatra-form-group input[type="date"], |
| 933 | 983 | .yatra-form-group select, |
| 934 | 984 | .yatra-form-group textarea { |
| 935 | 985 | width: 100%; |
| 986 | + min-height: 48px; | |
| 936 | 987 | padding: 12px 16px; |
| 937 | 988 | border: 1px solid #d1d5db; |
| 938 | 989 | border-radius: 8px; |
| 939 | 990 | font-size: 15px; |
| 991 | + line-height: 1.5; | |
| 940 | 992 | color: #111827; |
| 941 | 993 | background: #fff; |
| 942 | 994 | transition: all 0.2s; |
| 943 | 995 | box-sizing:border-box; |
| @@ -2102,19 +2154,19 @@ | ||
| 2102 | 2154 | color: var(--yatra-primary-dark, #2563eb) !important; |
| 2103 | 2155 | } |
| 2104 | 2156 | |
| 2105 | 2157 | /* Additional Services */ |
| 2158 | +/* Selected-service rows in the Pricing Summary — match the neutral | |
| 2159 | + colour scheme of every other price row. The previous purple | |
| 2160 | + gradient/text/dot was visually inconsistent with the traveler row | |
| 2161 | + above. Yatra default row colour is `.yatra-price-row { color: #475569 }` | |
| 2162 | + (inherits below). Right-side price uses #1e293b like category subtotals. */ | |
| 2106 | 2163 | .yatra-price-service { |
| 2107 | - background: linear-gradient(90deg, rgba(139, 92, 246, 0.06) 0%, transparent 100%); | |
| 2108 | - margin: 4px -12px; | |
| 2109 | - padding: 10px 12px; | |
| 2110 | - border-radius: 8px; | |
| 2111 | - border: none !important; | |
| 2164 | + margin: 0; | |
| 2165 | + padding: 10px 0; | |
| 2112 | 2166 | } |
| 2113 | 2167 | |
| 2114 | - | |
| 2115 | 2168 | .yatra-price-service span:first-child { |
| 2116 | - color: #6d28d9; | |
| 2117 | 2169 | font-weight: 500; |
| 2118 | 2170 | display: flex; |
| 2119 | 2171 | align-items: center; |
| 2120 | 2172 | gap: 6px; |
| @@ -2119,34 +2171,19 @@ | ||
| 2119 | 2171 | align-items: center; |
| 2120 | 2172 | gap: 6px; |
| 2121 | 2173 | } |
| 2122 | 2174 | |
| 2123 | -.yatra-price-service span:first-child::before { | |
| 2124 | - content: ""; | |
| 2125 | - width: 6px; | |
| 2126 | - height: 6px; | |
| 2127 | - background: #8b5cf6; | |
| 2128 | - border-radius: 50%; | |
| 2129 | -} | |
| 2130 | - | |
| 2131 | 2175 | .yatra-price-service span:last-child { |
| 2132 | 2176 | font-weight: 600; |
| 2133 | - color: #5b21b6; | |
| 2177 | + color: #1e293b; | |
| 2134 | 2178 | } |
| 2135 | 2179 | |
| 2136 | -/* Included Service */ | |
| 2180 | +/* Included Service — row stays in the default palette; only the | |
| 2181 | + "Included" badge below keeps a green hue as a status signal. */ | |
| 2137 | 2182 | .yatra-service-included { |
| 2138 | - background: linear-gradient(90deg, rgba(16, 185, 129, 0.06) 0%, transparent 100%); | |
| 2183 | + /* Intentionally no background override — matches the other rows. */ | |
| 2139 | 2184 | } |
| 2140 | 2185 | |
| 2141 | -.yatra-service-included span:first-child { | |
| 2142 | - color: #047857; | |
| 2143 | -} | |
| 2144 | - | |
| 2145 | -.yatra-service-included span:first-child::before { | |
| 2146 | - background: #10b981; | |
| 2147 | -} | |
| 2148 | - | |
| 2149 | 2186 | .yatra-service-included-badge { |
| 2150 | 2187 | font-size: 11px; |
| 2151 | 2188 | font-weight: 600; |
| 2152 | 2189 | color: #047857 !important; |
| @@ -2237,9 +2274,12 @@ | ||
| 2237 | 2274 | position: relative; |
| 2238 | 2275 | } |
| 2239 | 2276 | |
| 2240 | 2277 | .yatra-summary-info li:before { |
| 2241 | - content: "✓"; | |
| 2278 | + /* CSS Unicode escape (U+2713 CHECK MARK) — using the literal ✓ glyph | |
| 2279 | + renders as mojibake ("âœ") when the CSS file isn't served with an | |
| 2280 | + explicit UTF-8 charset and the browser falls back to Latin-1. */ | |
| 2281 | + content: "\2713"; | |
| 2242 | 2282 | position: absolute; |
| 2243 | 2283 | left: 0; |
| 2244 | 2284 | color: #10b981; |
| 2245 | 2285 | font-weight: 600; |
| @@ -2307,12 +2347,85 @@ | ||
| 2307 | 2347 | .yatra-booking-main { |
| 2308 | 2348 | padding: 24px; |
| 2309 | 2349 | } |
| 2310 | 2350 | |
| 2351 | + /* | |
| 2352 | + * Mobile-input hygiene. Two reasons every booking-form input | |
| 2353 | + * gets re-styled here at <=768px: | |
| 2354 | + * | |
| 2355 | + * 1. font-size: 16px (mandatory). iOS Safari auto-zooms the | |
| 2356 | + * viewport when a user focuses an <input>/<select>/<textarea> | |
| 2357 | + * whose computed font-size is below 16px. Our desktop styles | |
| 2358 | + * use 15px, which triggers a 1.25x zoom + scroll-position | |
| 2359 | + * jump on focus — disorienting on a long booking form. 16px | |
| 2360 | + * silences the zoom. | |
| 2361 | + * | |
| 2362 | + * 2. Vertical padding bumped to 14px. With 16px text that gives | |
| 2363 | + * ~48px total tap height (Material Design minimum is 48dp, | |
| 2364 | + * Apple HIG is 44pt). 44px works for thumbs in landscape; | |
| 2365 | + * 48px works in portrait too, where most mobile bookings | |
| 2366 | + * actually happen. | |
| 2367 | + */ | |
| 2368 | + .yatra-form-group input[type="text"], | |
| 2369 | + .yatra-form-group input[type="email"], | |
| 2370 | + .yatra-form-group input[type="tel"], | |
| 2371 | + .yatra-form-group input[type="date"], | |
| 2372 | + .yatra-form-group input[type="number"], | |
| 2373 | + .yatra-form-group input[type="password"], | |
| 2374 | + .yatra-form-group select, | |
| 2375 | + .yatra-form-group textarea, | |
| 2376 | + .yatra-booking-form input, | |
| 2377 | + .yatra-booking-form select, | |
| 2378 | + .yatra-booking-form textarea { | |
| 2379 | + font-size: 16px; | |
| 2380 | + padding-top: 14px; | |
| 2381 | + padding-bottom: 14px; | |
| 2382 | + min-height: 48px; | |
| 2383 | + } | |
| 2384 | + | |
| 2385 | + .yatra-booking-form textarea { | |
| 2386 | + min-height: 96px; | |
| 2387 | + } | |
| 2388 | + | |
| 2389 | + /* | |
| 2390 | + * Inline login + register tabs on the booking page (rendered by | |
| 2391 | + * booking-auth.php). Same hygiene as the booking form so the | |
| 2392 | + * "log in to continue" path doesn't suddenly feel cramped / | |
| 2393 | + * trigger iOS zoom mid-checkout. | |
| 2394 | + */ | |
| 2395 | + .yatra-booking-auth input[type="text"], | |
| 2396 | + .yatra-booking-auth input[type="email"], | |
| 2397 | + .yatra-booking-auth input[type="tel"], | |
| 2398 | + .yatra-booking-auth input[type="password"], | |
| 2399 | + .yatra-auth-form input[type="text"], | |
| 2400 | + .yatra-auth-form input[type="email"], | |
| 2401 | + .yatra-auth-form input[type="tel"], | |
| 2402 | + .yatra-auth-form input[type="password"] { | |
| 2403 | + font-size: 16px; | |
| 2404 | + min-height: 48px; | |
| 2405 | + padding-top: 14px; | |
| 2406 | + padding-bottom: 14px; | |
| 2407 | + } | |
| 2408 | + | |
| 2409 | + .yatra-booking-auth .yatra-auth-submit, | |
| 2410 | + .yatra-auth-form .yatra-auth-submit { | |
| 2411 | + min-height: 48px; | |
| 2412 | + font-size: 16px; | |
| 2413 | + } | |
| 2414 | + | |
| 2415 | + /* | |
| 2416 | + * Stacking rules — keep these INSIDE the @media (max-width: 768px) | |
| 2417 | + * block. On phones we want the form row to flow vertically and | |
| 2418 | + * half/third fields to span full width; on desktop they should | |
| 2419 | + * stay side-by-side as defined at line ~890. (A prior edit | |
| 2420 | + * accidentally closed this media block too early, leaking these | |
| 2421 | + * column-direction rules to every viewport — which is why all | |
| 2422 | + * fields appeared full-width on desktop.) | |
| 2423 | + */ | |
| 2311 | 2424 | .yatra-form-row { |
| 2312 | 2425 | flex-direction: column; |
| 2313 | 2426 | } |
| 2314 | - | |
| 2427 | + | |
| 2315 | 2428 | .yatra-field-half, |
| 2316 | 2429 | .yatra-field-third { |
| 2317 | 2430 | flex: 1 1 100%; |
| 2318 | 2431 | } |
| @@ -2971,8 +3084,10 @@ | ||
| 2971 | 3084 | background: #fff; |
| 2972 | 3085 | border: 1px solid #e2e8f0; |
| 2973 | 3086 | border-radius: 8px; |
| 2974 | 3087 | transition: all 0.2s ease; |
| 3088 | + /* `position: relative` anchors the CSS tooltip below */ | |
| 3089 | + position: relative; | |
| 2975 | 3090 | } |
| 2976 | 3091 | |
| 2977 | 3092 | .yatra-service-item:hover { |
| 2978 | 3093 | border-color: #cbd5e1; |
| @@ -2978,8 +3093,56 @@ | ||
| 2978 | 3093 | border-color: #cbd5e1; |
| 2979 | 3094 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); |
| 2980 | 3095 | } |
| 2981 | 3096 | |
| 3097 | +/* CSS tooltip for the service description — uses `data-tooltip` (not the | |
| 3098 | + native `title` attribute) so we don't trigger the browser's built-in | |
| 3099 | + tooltip on top of this one. Native tooltips also have a ~1s delay and | |
| 3100 | + can be suppressed when hovering over a disabled control inside a | |
| 3101 | + <label>; this version shows instantly and is consistent across | |
| 3102 | + browsers. `aria-label` on the same element still serves screen-readers. */ | |
| 3103 | +.yatra-service-item[data-tooltip]:hover::after, | |
| 3104 | +.yatra-service-item[data-tooltip]:focus-within::after { | |
| 3105 | + content: attr(data-tooltip); | |
| 3106 | + position: absolute; | |
| 3107 | + bottom: calc(100% + 8px); | |
| 3108 | + left: 50%; | |
| 3109 | + transform: translateX(-50%); | |
| 3110 | + background: #1f2937; | |
| 3111 | + color: #fff; | |
| 3112 | + padding: 8px 12px; | |
| 3113 | + border-radius: 6px; | |
| 3114 | + font-size: 12px; | |
| 3115 | + font-weight: 400; | |
| 3116 | + line-height: 1.4; | |
| 3117 | + max-width: 260px; | |
| 3118 | + white-space: pre-wrap; | |
| 3119 | + z-index: 100; | |
| 3120 | + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| 3121 | + pointer-events: none; | |
| 3122 | + opacity: 0; | |
| 3123 | + animation: yatra-tooltip-fade 0.15s ease-out 0.05s forwards; | |
| 3124 | +} | |
| 3125 | + | |
| 3126 | +.yatra-service-item[data-tooltip]:hover::before, | |
| 3127 | +.yatra-service-item[data-tooltip]:focus-within::before { | |
| 3128 | + content: ''; | |
| 3129 | + position: absolute; | |
| 3130 | + bottom: calc(100% + 2px); | |
| 3131 | + left: 50%; | |
| 3132 | + transform: translateX(-50%); | |
| 3133 | + border: 6px solid transparent; | |
| 3134 | + border-top-color: #1f2937; | |
| 3135 | + z-index: 100; | |
| 3136 | + pointer-events: none; | |
| 3137 | + opacity: 0; | |
| 3138 | + animation: yatra-tooltip-fade 0.15s ease-out 0.05s forwards; | |
| 3139 | +} | |
| 3140 | + | |
| 3141 | +@keyframes yatra-tooltip-fade { | |
| 3142 | + to { opacity: 1; } | |
| 3143 | +} | |
| 3144 | + | |
| 2982 | 3145 | .yatra-service-item.yatra-service-required { |
| 2983 | 3146 | background: #fefce8; |
| 2984 | 3147 | border-color: #fde047; |
| 2985 | 3148 | } |
| @@ -2995,9 +3158,9 @@ | ||
| 2995 | 3158 | |
| 2996 | 3159 | .yatra-service-label input[type="checkbox"] { |
| 2997 | 3160 | width: 18px; |
| 2998 | 3161 | height: 18px; |
| 2999 | - accent-color: #7c3aed; | |
| 3162 | + accent-color: var(--yatra-primary, #3b82f6); | |
| 3000 | 3163 | cursor: pointer; |
| 3001 | 3164 | flex-shrink: 0; |
| 3002 | 3165 | } |
| 3003 | 3166 | |
| @@ -3028,10 +3191,30 @@ | ||
| 3028 | 3191 | |
| 3029 | 3192 | .yatra-service-price { |
| 3030 | 3193 | font-size: 13px; |
| 3031 | 3194 | font-weight: 600; |
| 3032 | - color: #7c3aed; | |
| 3195 | + color: #1e293b; | |
| 3033 | 3196 | white-space: nowrap; |
| 3197 | +} | |
| 3198 | + | |
| 3199 | +/* Description tooltip (the ⓘ icon next to a service name). | |
| 3200 | + `currentColor` lets the SVG inherit the surrounding text colour rather | |
| 3201 | + than overriding it inline — keeps the icon visually consistent with | |
| 3202 | + the rest of the yatra-service-info block regardless of theme. */ | |
| 3203 | +.yatra-service-tooltip { | |
| 3204 | + display: inline-flex; | |
| 3205 | + vertical-align: middle; | |
| 3206 | + margin-left: 4px; | |
| 3207 | + cursor: help; | |
| 3208 | + opacity: 0.55; | |
| 3209 | + color: currentColor; | |
| 3210 | +} | |
| 3211 | +.yatra-service-tooltip:hover { | |
| 3212 | + opacity: 1; | |
| 3213 | +} | |
| 3214 | +.yatra-service-tooltip svg { | |
| 3215 | + width: 14px; | |
| 3216 | + height: 14px; | |
| 3034 | 3217 | } |
| 3035 | 3218 | |
| 3036 | 3219 | /* Services Total Row in Price Summary */ |
| 3037 | 3220 | .yatra-services-total-row { |
