| @@ -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; |
| @@ -2295,12 +2347,85 @@ | ||
| 2295 | 2347 | .yatra-booking-main { |
| 2296 | 2348 | padding: 24px; |
| 2297 | 2349 | } |
| 2298 | 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 | + */ | |
| 2299 | 2424 | .yatra-form-row { |
| 2300 | 2425 | flex-direction: column; |
| 2301 | 2426 | } |
| 2302 | - | |
| 2427 | + | |
| 2303 | 2428 | .yatra-field-half, |
| 2304 | 2429 | .yatra-field-third { |
| 2305 | 2430 | flex: 1 1 100%; |
| 2306 | 2431 | } |
