| @@ -48,9 +48,9 @@ | ||
| 48 | 48 | align-items: center; |
| 49 | 49 | gap: 0.5rem; |
| 50 | 50 | background: #eff6ff; |
| 51 | 51 | border: 1px solid #bfdbfe; |
| 52 | - color: #1d4ed8; | |
| 52 | + color: var(--yatra-primary-darker, #1d4ed8); | |
| 53 | 53 | padding: 0.4rem 0.9rem; |
| 54 | 54 | border-radius: 999px; |
| 55 | 55 | font-size: 0.9rem; |
| 56 | 56 | font-weight: 600; |
| @@ -57,14 +57,14 @@ | ||
| 57 | 57 | margin-bottom: 1rem; |
| 58 | 58 | } |
| 59 | 59 | |
| 60 | 60 | .yatra-reference-badge span { |
| 61 | - color: #1d4ed8; | |
| 61 | + color: var(--yatra-primary-darker, #1d4ed8); | |
| 62 | 62 | font-weight: 500; |
| 63 | 63 | } |
| 64 | 64 | |
| 65 | 65 | .yatra-reference-badge strong { |
| 66 | - color: #1e3a8a; | |
| 66 | + color: var(--yatra-primary-darker, #1e3a8a); | |
| 67 | 67 | } |
| 68 | 68 | |
| 69 | 69 | .yatra-remaining-banner { |
| 70 | 70 | display: grid; |
| @@ -136,9 +136,9 @@ | ||
| 136 | 136 | width: 32px; |
| 137 | 137 | height: 32px; |
| 138 | 138 | border-radius: 999px; |
| 139 | 139 | background: #dbeafe; |
| 140 | - color: #1d4ed8; | |
| 140 | + color: var(--yatra-primary-darker, #1d4ed8); | |
| 141 | 141 | font-weight: 700; |
| 142 | 142 | display: inline-flex; |
| 143 | 143 | align-items: center; |
| 144 | 144 | justify-content: center; |
| @@ -218,20 +218,20 @@ | ||
| 218 | 218 | padding: 0; |
| 219 | 219 | background: transparent; |
| 220 | 220 | border: none; |
| 221 | 221 | font-size: 0.8rem; |
| 222 | - color: #3b82f6; | |
| 222 | + color: var(--yatra-primary, #3b82f6); | |
| 223 | 223 | } |
| 224 | 224 | |
| 225 | 225 | .yatra-remaining-reference .yatra-reference-badge svg { |
| 226 | 226 | width: 16px; |
| 227 | 227 | height: 16px; |
| 228 | - stroke: #3b82f6; | |
| 228 | + stroke: var(--yatra-primary, #3b82f6); | |
| 229 | 229 | } |
| 230 | 230 | |
| 231 | 231 | .yatra-remaining-reference .yatra-reference-value { |
| 232 | 232 | font-size: 1.25rem; |
| 233 | - color: #1e40af; | |
| 233 | + color: var(--yatra-primary-darker, #1e40af); | |
| 234 | 234 | letter-spacing: 0.5px; |
| 235 | 235 | } |
| 236 | 236 | |
| 237 | 237 | /* Trip Info Card */ |
| @@ -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 | } |
| @@ -685,9 +720,9 @@ | ||
| 685 | 720 | } |
| 686 | 721 | |
| 687 | 722 | .yatra-attribute-tag { |
| 688 | 723 | background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); |
| 689 | - color: #1e40af; | |
| 724 | + color: var(--yatra-primary-darker, #1e40af); | |
| 690 | 725 | border: 1px solid #bfdbfe; |
| 691 | 726 | } |
| 692 | 727 | |
| 693 | 728 | .yatra-confirmation-grid { |
| @@ -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; |
| @@ -946,9 +998,9 @@ | ||
| 946 | 998 | .yatra-form-group input:focus, |
| 947 | 999 | .yatra-form-group select:focus, |
| 948 | 1000 | .yatra-form-group textarea:focus { |
| 949 | 1001 | outline: none; |
| 950 | - border-color: #3b82f6; | |
| 1002 | + border-color: var(--yatra-primary, #3b82f6); | |
| 951 | 1003 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
| 952 | 1004 | } |
| 953 | 1005 | |
| 954 | 1006 | /* Select field specific styling */ |
| @@ -1049,9 +1101,9 @@ | ||
| 1049 | 1101 | transition: all 0.2s; |
| 1050 | 1102 | } |
| 1051 | 1103 | |
| 1052 | 1104 | .yatra-payment-option:hover { |
| 1053 | - border-color: #3b82f6; | |
| 1105 | + border-color: var(--yatra-primary, #3b82f6); | |
| 1054 | 1106 | background: #f0f9ff; |
| 1055 | 1107 | } |
| 1056 | 1108 | |
| 1057 | 1109 | .yatra-payment-option input[type="radio"] { |
| @@ -1061,9 +1113,9 @@ | ||
| 1061 | 1113 | cursor: pointer; |
| 1062 | 1114 | } |
| 1063 | 1115 | |
| 1064 | 1116 | .yatra-payment-option input[type="radio"]:checked + .yatra-payment-label { |
| 1065 | - color: #3b82f6; | |
| 1117 | + color: var(--yatra-primary, #3b82f6); | |
| 1066 | 1118 | } |
| 1067 | 1119 | |
| 1068 | 1120 | .yatra-payment-label { |
| 1069 | 1121 | display: flex; |
| @@ -1082,9 +1134,9 @@ | ||
| 1082 | 1134 | color: #6b7280; |
| 1083 | 1135 | } |
| 1084 | 1136 | |
| 1085 | 1137 | .yatra-payment-option input[type="radio"]:checked ~ .yatra-payment-label span { |
| 1086 | - color: #3b82f6; | |
| 1138 | + color: var(--yatra-primary, #3b82f6); | |
| 1087 | 1139 | } |
| 1088 | 1140 | |
| 1089 | 1141 | /* Payment Gateways */ |
| 1090 | 1142 | .yatra-payment-gateways { |
| @@ -1118,9 +1170,9 @@ | ||
| 1118 | 1170 | background: #fff; |
| 1119 | 1171 | } |
| 1120 | 1172 | |
| 1121 | 1173 | .yatra-gateway-option:hover { |
| 1122 | - border-color: #3b82f6; | |
| 1174 | + border-color: var(--yatra-primary, #3b82f6); | |
| 1123 | 1175 | background: #f0f9ff; |
| 1124 | 1176 | } |
| 1125 | 1177 | |
| 1126 | 1178 | .yatra-gateway-option input[type="radio"] { |
| @@ -1131,9 +1183,9 @@ | ||
| 1131 | 1183 | margin: 0; |
| 1132 | 1184 | } |
| 1133 | 1185 | |
| 1134 | 1186 | .yatra-gateway-option input[type="radio"]:checked { |
| 1135 | - accent-color: #3b82f6; | |
| 1187 | + accent-color: var(--yatra-primary, #3b82f6); | |
| 1136 | 1188 | } |
| 1137 | 1189 | |
| 1138 | 1190 | .yatra-gateway-icon-wrap { |
| 1139 | 1191 | flex-shrink: 0; |
| @@ -1174,9 +1226,9 @@ | ||
| 1174 | 1226 | opacity: 1; |
| 1175 | 1227 | } |
| 1176 | 1228 | |
| 1177 | 1229 | .yatra-gateway-option input[type="radio"]:checked ~ .yatra-gateway-content .yatra-gateway-title { |
| 1178 | - color: #3b82f6; | |
| 1230 | + color: var(--yatra-primary, #3b82f6); | |
| 1179 | 1231 | } |
| 1180 | 1232 | |
| 1181 | 1233 | .yatra-gateway-extra { |
| 1182 | 1234 | display: none; |
| @@ -1195,9 +1247,9 @@ | ||
| 1195 | 1247 | color: #6b7280; |
| 1196 | 1248 | } |
| 1197 | 1249 | |
| 1198 | 1250 | .yatra-gateway-option input[type="radio"]:checked ~ .yatra-gateway-label strong { |
| 1199 | - color: #3b82f6; | |
| 1251 | + color: var(--yatra-primary, #3b82f6); | |
| 1200 | 1252 | } |
| 1201 | 1253 | |
| 1202 | 1254 | /* Gateway Icon Images */ |
| 1203 | 1255 | .yatra-gateway-icon img { |
| @@ -1230,9 +1282,9 @@ | ||
| 1230 | 1282 | |
| 1231 | 1283 | /* Selected gateway states */ |
| 1232 | 1284 | .yatra-gateway-option input[type="radio"]:checked ~ .yatra-gateway-badge { |
| 1233 | 1285 | background: #dbeafe; |
| 1234 | - color: #2563eb; | |
| 1286 | + color: var(--yatra-primary-dark, #2563eb); | |
| 1235 | 1287 | } |
| 1236 | 1288 | |
| 1237 | 1289 | /* No Gateways Message */ |
| 1238 | 1290 | .yatra-no-gateways-message { |
| @@ -1277,9 +1329,9 @@ | ||
| 1277 | 1329 | margin-top: 8px; |
| 1278 | 1330 | } |
| 1279 | 1331 | |
| 1280 | 1332 | .yatra-price-due span { |
| 1281 | - color: #1d4ed8 !important; | |
| 1333 | + color: var(--yatra-primary-darker, #1d4ed8) !important; | |
| 1282 | 1334 | } |
| 1283 | 1335 | |
| 1284 | 1336 | /* Deposit Row */ |
| 1285 | 1337 | .yatra-price-deposit { |
| @@ -1365,22 +1417,8 @@ | ||
| 1365 | 1417 | flex-direction: column; |
| 1366 | 1418 | gap: 16px; |
| 1367 | 1419 | } |
| 1368 | 1420 | |
| 1369 | -/* Checkbox */ | |
| 1370 | -.yatra-checkbox-label { | |
| 1371 | - display: flex; | |
| 1372 | - align-items: flex-start; | |
| 1373 | - gap: 12px; | |
| 1374 | - font-size: 14px; | |
| 1375 | - color: #374151; | |
| 1376 | - cursor: pointer; | |
| 1377 | - padding: 12px 16px; | |
| 1378 | - background: #f9fafb; | |
| 1379 | - border-radius: 8px; | |
| 1380 | - border: 1px solid #e5e7eb; | |
| 1381 | - transition: all 0.2s; | |
| 1382 | -} | |
| 1383 | 1421 | |
| 1384 | 1422 | .yatra-checkbox-label:hover { |
| 1385 | 1423 | background: #f3f4f6; |
| 1386 | 1424 | border-color: #d1d5db; |
| @@ -1391,9 +1429,9 @@ | ||
| 1391 | 1429 | width: 18px; |
| 1392 | 1430 | height: 18px; |
| 1393 | 1431 | cursor: pointer; |
| 1394 | 1432 | flex-shrink: 0; |
| 1395 | - accent-color: #3b82f6; | |
| 1433 | + accent-color: var(--yatra-primary, #3b82f6); | |
| 1396 | 1434 | } |
| 1397 | 1435 | |
| 1398 | 1436 | .yatra-checkbox-label span { |
| 1399 | 1437 | line-height: 1.5; |
| @@ -1399,9 +1437,9 @@ | ||
| 1399 | 1437 | line-height: 1.5; |
| 1400 | 1438 | } |
| 1401 | 1439 | |
| 1402 | 1440 | .yatra-checkbox-label a { |
| 1403 | - color: #3b82f6; | |
| 1441 | + color: var(--yatra-primary, #3b82f6); | |
| 1404 | 1442 | text-decoration: none; |
| 1405 | 1443 | font-weight: 500; |
| 1406 | 1444 | } |
| 1407 | 1445 | |
| @@ -1412,9 +1450,8 @@ | ||
| 1412 | 1450 | .yatra-checkbox-label .required { |
| 1413 | 1451 | color: #ef4444; |
| 1414 | 1452 | margin-left: 2px; |
| 1415 | 1453 | } |
| 1416 | - | |
| 1417 | 1454 | /* Actions */ |
| 1418 | 1455 | .yatra-booking-actions { |
| 1419 | 1456 | display: flex; |
| 1420 | 1457 | gap: 16px; |
| @@ -1426,9 +1463,9 @@ | ||
| 1426 | 1463 | .yatra-booking-submit-btn, |
| 1427 | 1464 | .yatra-booking-pay-btn { |
| 1428 | 1465 | flex: 1; |
| 1429 | 1466 | padding: 18px 32px; |
| 1430 | - background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); | |
| 1467 | + background: linear-gradient(135deg, var(--yatra-primary, #3b82f6) 0%, var(--yatra-primary-dark, #2563eb) 100%); | |
| 1431 | 1468 | color: #fff; |
| 1432 | 1469 | border: none; |
| 1433 | 1470 | border-radius: 10px; |
| 1434 | 1471 | font-size: 16px; |
| @@ -1443,9 +1480,9 @@ | ||
| 1443 | 1480 | } |
| 1444 | 1481 | |
| 1445 | 1482 | .yatra-booking-submit-btn:hover, |
| 1446 | 1483 | .yatra-booking-pay-btn:hover { |
| 1447 | - background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); | |
| 1484 | + background: linear-gradient(135deg, var(--yatra-primary-dark, #2563eb) 0%, var(--yatra-primary-darker, #1d4ed8) 100%); | |
| 1448 | 1485 | transform: translateY(-2px); |
| 1449 | 1486 | box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4); |
| 1450 | 1487 | } |
| 1451 | 1488 | |
| @@ -1552,9 +1589,9 @@ | ||
| 1552 | 1589 | } |
| 1553 | 1590 | |
| 1554 | 1591 | .yatra-summary-form-group input[type="date"]:focus { |
| 1555 | 1592 | outline: none; |
| 1556 | - border-color: #3b82f6; | |
| 1593 | + border-color: var(--yatra-primary, #3b82f6); | |
| 1557 | 1594 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
| 1558 | 1595 | } |
| 1559 | 1596 | |
| 1560 | 1597 | .yatra-summary-readonly-field { |
| @@ -1747,14 +1784,14 @@ | ||
| 1747 | 1784 | gap: 10px; |
| 1748 | 1785 | } |
| 1749 | 1786 | |
| 1750 | 1787 | .yatra-booking-participants-select:hover { |
| 1751 | - border-color: #3b82f6; | |
| 1788 | + border-color: var(--yatra-primary, #3b82f6); | |
| 1752 | 1789 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08); |
| 1753 | 1790 | } |
| 1754 | 1791 | |
| 1755 | 1792 | .yatra-booking-participants-select.active { |
| 1756 | - border-color: #3b82f6; | |
| 1793 | + border-color: var(--yatra-primary, #3b82f6); | |
| 1757 | 1794 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12); |
| 1758 | 1795 | z-index: 1100; |
| 1759 | 1796 | } |
| 1760 | 1797 | |
| @@ -1772,9 +1809,9 @@ | ||
| 1772 | 1809 | } |
| 1773 | 1810 | |
| 1774 | 1811 | .yatra-booking-participants-select:hover .yatra-booking-field-icon, |
| 1775 | 1812 | .yatra-booking-participants-select.active .yatra-booking-field-icon { |
| 1776 | - color: #3b82f6; | |
| 1813 | + color: var(--yatra-primary, #3b82f6); | |
| 1777 | 1814 | } |
| 1778 | 1815 | |
| 1779 | 1816 | .yatra-booking-participants-display { |
| 1780 | 1817 | flex: 1; |
| @@ -1794,9 +1831,9 @@ | ||
| 1794 | 1831 | } |
| 1795 | 1832 | |
| 1796 | 1833 | .yatra-booking-participants-select:hover .yatra-select-arrow, |
| 1797 | 1834 | .yatra-booking-participants-select.active .yatra-select-arrow { |
| 1798 | - color: #3b82f6; | |
| 1835 | + color: var(--yatra-primary, #3b82f6); | |
| 1799 | 1836 | } |
| 1800 | 1837 | |
| 1801 | 1838 | .yatra-booking-participants-select.active .yatra-select-arrow { |
| 1802 | 1839 | transform: rotate(180deg); |
| @@ -1922,9 +1959,9 @@ | ||
| 1922 | 1959 | pointer-events: none; |
| 1923 | 1960 | } |
| 1924 | 1961 | |
| 1925 | 1962 | .yatra-qty-btn:hover:not(:disabled) { |
| 1926 | - background: #3b82f6; | |
| 1963 | + background: var(--yatra-primary, #3b82f6); | |
| 1927 | 1964 | color: #ffffff; |
| 1928 | 1965 | transform: scale(1.05); |
| 1929 | 1966 | box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3); |
| 1930 | 1967 | } |
| @@ -1930,9 +1967,9 @@ | ||
| 1930 | 1967 | } |
| 1931 | 1968 | |
| 1932 | 1969 | .yatra-qty-btn:active:not(:disabled) { |
| 1933 | 1970 | transform: scale(0.95); |
| 1934 | - background: #2563eb; | |
| 1971 | + background: var(--yatra-primary-dark, #2563eb); | |
| 1935 | 1972 | } |
| 1936 | 1973 | |
| 1937 | 1974 | .yatra-qty-btn:disabled { |
| 1938 | 1975 | opacity: 0.4; |
| @@ -2049,9 +2086,9 @@ | ||
| 2049 | 2086 | } |
| 2050 | 2087 | |
| 2051 | 2088 | .yatra-category-subtotal .category-count { |
| 2052 | 2089 | font-weight: 600; |
| 2053 | - color: #3b82f6; | |
| 2090 | + color: var(--yatra-primary, #3b82f6); | |
| 2054 | 2091 | } |
| 2055 | 2092 | |
| 2056 | 2093 | .yatra-category-subtotal .category-subtotal { |
| 2057 | 2094 | font-weight: 500; |
| @@ -2109,27 +2146,27 @@ | ||
| 2109 | 2146 | } |
| 2110 | 2147 | |
| 2111 | 2148 | |
| 2112 | 2149 | .yatra-group-discount-row .yatra-discount-label { |
| 2113 | - color: #2563eb; | |
| 2150 | + color: var(--yatra-primary-dark, #2563eb); | |
| 2114 | 2151 | } |
| 2115 | 2152 | |
| 2116 | 2153 | .yatra-group-discount-row .yatra-discount-amount { |
| 2117 | - color: #2563eb !important; | |
| 2154 | + color: var(--yatra-primary-dark, #2563eb) !important; | |
| 2118 | 2155 | } |
| 2119 | 2156 | |
| 2120 | 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. */ | |
| 2121 | 2163 | .yatra-price-service { |
| 2122 | - background: linear-gradient(90deg, rgba(139, 92, 246, 0.06) 0%, transparent 100%); | |
| 2123 | - margin: 4px -12px; | |
| 2124 | - padding: 10px 12px; | |
| 2125 | - border-radius: 8px; | |
| 2126 | - border: none !important; | |
| 2164 | + margin: 0; | |
| 2165 | + padding: 10px 0; | |
| 2127 | 2166 | } |
| 2128 | 2167 | |
| 2129 | - | |
| 2130 | 2168 | .yatra-price-service span:first-child { |
| 2131 | - color: #6d28d9; | |
| 2132 | 2169 | font-weight: 500; |
| 2133 | 2170 | display: flex; |
| 2134 | 2171 | align-items: center; |
| 2135 | 2172 | gap: 6px; |
| @@ -2134,34 +2171,19 @@ | ||
| 2134 | 2171 | align-items: center; |
| 2135 | 2172 | gap: 6px; |
| 2136 | 2173 | } |
| 2137 | 2174 | |
| 2138 | -.yatra-price-service span:first-child::before { | |
| 2139 | - content: ""; | |
| 2140 | - width: 6px; | |
| 2141 | - height: 6px; | |
| 2142 | - background: #8b5cf6; | |
| 2143 | - border-radius: 50%; | |
| 2144 | -} | |
| 2145 | - | |
| 2146 | 2175 | .yatra-price-service span:last-child { |
| 2147 | 2176 | font-weight: 600; |
| 2148 | - color: #5b21b6; | |
| 2177 | + color: #1e293b; | |
| 2149 | 2178 | } |
| 2150 | 2179 | |
| 2151 | -/* 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. */ | |
| 2152 | 2182 | .yatra-service-included { |
| 2153 | - background: linear-gradient(90deg, rgba(16, 185, 129, 0.06) 0%, transparent 100%); | |
| 2183 | + /* Intentionally no background override — matches the other rows. */ | |
| 2154 | 2184 | } |
| 2155 | 2185 | |
| 2156 | -.yatra-service-included span:first-child { | |
| 2157 | - color: #047857; | |
| 2158 | -} | |
| 2159 | - | |
| 2160 | -.yatra-service-included span:first-child::before { | |
| 2161 | - background: #10b981; | |
| 2162 | -} | |
| 2163 | - | |
| 2164 | 2186 | .yatra-service-included-badge { |
| 2165 | 2187 | font-size: 11px; |
| 2166 | 2188 | font-weight: 600; |
| 2167 | 2189 | color: #047857 !important; |
| @@ -2252,9 +2274,12 @@ | ||
| 2252 | 2274 | position: relative; |
| 2253 | 2275 | } |
| 2254 | 2276 | |
| 2255 | 2277 | .yatra-summary-info li:before { |
| 2256 | - 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"; | |
| 2257 | 2282 | position: absolute; |
| 2258 | 2283 | left: 0; |
| 2259 | 2284 | color: #10b981; |
| 2260 | 2285 | font-weight: 600; |
| @@ -2291,14 +2316,14 @@ | ||
| 2291 | 2316 | color: #111827; |
| 2292 | 2317 | } |
| 2293 | 2318 | |
| 2294 | 2319 | .yatra-book-btn { |
| 2295 | - background: #3b82f6; | |
| 2320 | + background: var(--yatra-primary, #3b82f6); | |
| 2296 | 2321 | color: #fff; |
| 2297 | 2322 | } |
| 2298 | 2323 | |
| 2299 | 2324 | .yatra-book-btn:hover { |
| 2300 | - background: #2563eb; | |
| 2325 | + background: var(--yatra-primary-dark, #2563eb); | |
| 2301 | 2326 | transform: translateY(-1px); |
| 2302 | 2327 | box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); |
| 2303 | 2328 | } |
| 2304 | 2329 | |
| @@ -2322,12 +2347,85 @@ | ||
| 2322 | 2347 | .yatra-booking-main { |
| 2323 | 2348 | padding: 24px; |
| 2324 | 2349 | } |
| 2325 | 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 | + */ | |
| 2326 | 2424 | .yatra-form-row { |
| 2327 | 2425 | flex-direction: column; |
| 2328 | 2426 | } |
| 2329 | - | |
| 2427 | + | |
| 2330 | 2428 | .yatra-field-half, |
| 2331 | 2429 | .yatra-field-third { |
| 2332 | 2430 | flex: 1 1 100%; |
| 2333 | 2431 | } |
| @@ -2389,10 +2487,10 @@ | ||
| 2389 | 2487 | background: #f3f4f6; |
| 2390 | 2488 | } |
| 2391 | 2489 | |
| 2392 | 2490 | .yatra-auth-tab.active { |
| 2393 | - color: #3b82f6; | |
| 2394 | - border-bottom-color: #3b82f6; | |
| 2491 | + color: var(--yatra-primary, #3b82f6); | |
| 2492 | + border-bottom-color: var(--yatra-primary, #3b82f6); | |
| 2395 | 2493 | background: #fff; |
| 2396 | 2494 | } |
| 2397 | 2495 | |
| 2398 | 2496 | .yatra-auth-tab svg { |
| @@ -2444,8 +2542,9 @@ | ||
| 2444 | 2542 | font-size: 14px; |
| 2445 | 2543 | font-weight: 600; |
| 2446 | 2544 | color: #374151; |
| 2447 | 2545 | margin-bottom: 6px; |
| 2546 | + justify-content: center; | |
| 2448 | 2547 | } |
| 2449 | 2548 | |
| 2450 | 2549 | .yatra-auth-form .yatra-form-group label .required { |
| 2451 | 2550 | color: #ef4444; |
| @@ -2487,9 +2586,9 @@ | ||
| 2487 | 2586 | } |
| 2488 | 2587 | |
| 2489 | 2588 | .yatra-auth-form .yatra-input-wrapper input:focus { |
| 2490 | 2589 | outline: none; |
| 2491 | - border-color: #3b82f6; | |
| 2590 | + border-color: var(--yatra-primary, #3b82f6); | |
| 2492 | 2591 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
| 2493 | 2592 | } |
| 2494 | 2593 | |
| 2495 | 2594 | .yatra-auth-form .yatra-form-group > input { |
| @@ -2504,9 +2603,9 @@ | ||
| 2504 | 2603 | } |
| 2505 | 2604 | |
| 2506 | 2605 | .yatra-auth-form .yatra-form-group > input:focus { |
| 2507 | 2606 | outline: none; |
| 2508 | - border-color: #3b82f6; | |
| 2607 | + border-color: var(--yatra-primary, #3b82f6); | |
| 2509 | 2608 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
| 2510 | 2609 | } |
| 2511 | 2610 | |
| 2512 | 2611 | /* Toggle Password */ |
| @@ -2560,9 +2659,9 @@ | ||
| 2560 | 2659 | align-items: center; |
| 2561 | 2660 | margin-top: -8px; |
| 2562 | 2661 | } |
| 2563 | 2662 | |
| 2564 | -.yatra-auth-form .yatra-checkbox-label { | |
| 2663 | +.yatra-booking-section .yatra-checkbox-label, .yatra-auth-form label.yatra-checkbox-label { | |
| 2565 | 2664 | display: flex; |
| 2566 | 2665 | align-items: center; |
| 2567 | 2666 | gap: 10px; |
| 2568 | 2667 | font-size: 14px; |
| @@ -2582,9 +2681,9 @@ | ||
| 2582 | 2681 | width: 18px; |
| 2583 | 2682 | height: 18px; |
| 2584 | 2683 | min-width: 18px; |
| 2585 | 2684 | margin: 0; |
| 2586 | - accent-color: #3b82f6; | |
| 2685 | + accent-color: var(--yatra-primary, #3b82f6); | |
| 2587 | 2686 | cursor: pointer; |
| 2588 | 2687 | flex-shrink: 0; |
| 2589 | 2688 | } |
| 2590 | 2689 | |
| @@ -2593,9 +2692,9 @@ | ||
| 2593 | 2692 | line-height: 1.4; |
| 2594 | 2693 | } |
| 2595 | 2694 | |
| 2596 | 2695 | .yatra-auth-form .yatra-checkbox-label a { |
| 2597 | - color: #3b82f6; | |
| 2696 | + color: var(--yatra-primary, #3b82f6); | |
| 2598 | 2697 | text-decoration: none; |
| 2599 | 2698 | } |
| 2600 | 2699 | |
| 2601 | 2700 | .yatra-auth-form .yatra-checkbox-label a:hover { |
| @@ -2603,9 +2702,9 @@ | ||
| 2603 | 2702 | } |
| 2604 | 2703 | |
| 2605 | 2704 | .yatra-forgot-link { |
| 2606 | 2705 | font-size: 14px; |
| 2607 | - color: #3b82f6; | |
| 2706 | + color: var(--yatra-primary, #3b82f6); | |
| 2608 | 2707 | text-decoration: none; |
| 2609 | 2708 | } |
| 2610 | 2709 | |
| 2611 | 2710 | .yatra-forgot-link:hover { |
| @@ -2638,9 +2737,9 @@ | ||
| 2638 | 2737 | justify-content: center; |
| 2639 | 2738 | gap: 8px; |
| 2640 | 2739 | width: 100%; |
| 2641 | 2740 | padding: 14px 24px; |
| 2642 | - background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); | |
| 2741 | + background: linear-gradient(135deg, var(--yatra-primary, #3b82f6) 0%, var(--yatra-primary-dark, #2563eb) 100%); | |
| 2643 | 2742 | color: #fff; |
| 2644 | 2743 | border: none; |
| 2645 | 2744 | border-radius: 8px; |
| 2646 | 2745 | font-size: 16px; |
| @@ -2649,9 +2748,9 @@ | ||
| 2649 | 2748 | transition: all 0.2s ease; |
| 2650 | 2749 | } |
| 2651 | 2750 | |
| 2652 | 2751 | .yatra-auth-submit:hover { |
| 2653 | - background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); | |
| 2752 | + background: linear-gradient(135deg, var(--yatra-primary-dark, #2563eb) 0%, var(--yatra-primary-darker, #1d4ed8) 100%); | |
| 2654 | 2753 | transform: translateY(-1px); |
| 2655 | 2754 | box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); |
| 2656 | 2755 | } |
| 2657 | 2756 | |
| @@ -2666,14 +2765,8 @@ | ||
| 2666 | 2765 | align-items: center; |
| 2667 | 2766 | gap: 8px; |
| 2668 | 2767 | } |
| 2669 | 2768 | |
| 2670 | -/* Animate spin */ | |
| 2671 | -@keyframes yatra-spin { | |
| 2672 | - from { transform: rotate(0deg); } | |
| 2673 | - to { transform: rotate(360deg); } | |
| 2674 | -} | |
| 2675 | - | |
| 2676 | 2769 | .yatra-auth-form .animate-spin { |
| 2677 | 2770 | animation: yatra-spin 1s linear infinite; |
| 2678 | 2771 | } |
| 2679 | 2772 | |
| @@ -2693,9 +2786,9 @@ | ||
| 2693 | 2786 | |
| 2694 | 2787 | .yatra-switch-tab { |
| 2695 | 2788 | background: none; |
| 2696 | 2789 | border: none; |
| 2697 | - color: #3b82f6; | |
| 2790 | + color: var(--yatra-primary, #3b82f6); | |
| 2698 | 2791 | font-size: 14px; |
| 2699 | 2792 | font-weight: 600; |
| 2700 | 2793 | cursor: pointer; |
| 2701 | 2794 | padding: 0; |
| @@ -2800,15 +2893,15 @@ | ||
| 2800 | 2893 | } |
| 2801 | 2894 | |
| 2802 | 2895 | .yatra-coupon-input:focus { |
| 2803 | 2896 | outline: none; |
| 2804 | - border-color: #3b82f6; | |
| 2897 | + border-color: var(--yatra-primary, #3b82f6); | |
| 2805 | 2898 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
| 2806 | 2899 | } |
| 2807 | 2900 | |
| 2808 | 2901 | .yatra-apply-coupon-btn { |
| 2809 | 2902 | padding: 10px 20px; |
| 2810 | - background: #3b82f6; | |
| 2903 | + background: var(--yatra-primary, #3b82f6); | |
| 2811 | 2904 | color: #fff; |
| 2812 | 2905 | border: none; |
| 2813 | 2906 | border-radius: 6px; |
| 2814 | 2907 | font-size: 14px; |
| @@ -2818,9 +2911,9 @@ | ||
| 2818 | 2911 | white-space: nowrap; |
| 2819 | 2912 | } |
| 2820 | 2913 | |
| 2821 | 2914 | .yatra-apply-coupon-btn:hover:not(:disabled) { |
| 2822 | - background: #2563eb; | |
| 2915 | + background: var(--yatra-primary-dark, #2563eb); | |
| 2823 | 2916 | } |
| 2824 | 2917 | |
| 2825 | 2918 | .yatra-apply-coupon-btn:disabled { |
| 2826 | 2919 | background: #9ca3af; |
| @@ -2991,8 +3084,10 @@ | ||
| 2991 | 3084 | background: #fff; |
| 2992 | 3085 | border: 1px solid #e2e8f0; |
| 2993 | 3086 | border-radius: 8px; |
| 2994 | 3087 | transition: all 0.2s ease; |
| 3088 | + /* `position: relative` anchors the CSS tooltip below */ | |
| 3089 | + position: relative; | |
| 2995 | 3090 | } |
| 2996 | 3091 | |
| 2997 | 3092 | .yatra-service-item:hover { |
| 2998 | 3093 | border-color: #cbd5e1; |
| @@ -2998,8 +3093,56 @@ | ||
| 2998 | 3093 | border-color: #cbd5e1; |
| 2999 | 3094 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); |
| 3000 | 3095 | } |
| 3001 | 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 | + | |
| 3002 | 3145 | .yatra-service-item.yatra-service-required { |
| 3003 | 3146 | background: #fefce8; |
| 3004 | 3147 | border-color: #fde047; |
| 3005 | 3148 | } |
| @@ -3015,9 +3158,9 @@ | ||
| 3015 | 3158 | |
| 3016 | 3159 | .yatra-service-label input[type="checkbox"] { |
| 3017 | 3160 | width: 18px; |
| 3018 | 3161 | height: 18px; |
| 3019 | - accent-color: #7c3aed; | |
| 3162 | + accent-color: var(--yatra-primary, #3b82f6); | |
| 3020 | 3163 | cursor: pointer; |
| 3021 | 3164 | flex-shrink: 0; |
| 3022 | 3165 | } |
| 3023 | 3166 | |
| @@ -3048,10 +3191,30 @@ | ||
| 3048 | 3191 | |
| 3049 | 3192 | .yatra-service-price { |
| 3050 | 3193 | font-size: 13px; |
| 3051 | 3194 | font-weight: 600; |
| 3052 | - color: #7c3aed; | |
| 3195 | + color: #1e293b; | |
| 3053 | 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; | |
| 3054 | 3217 | } |
| 3055 | 3218 | |
| 3056 | 3219 | /* Services Total Row in Price Summary */ |
| 3057 | 3220 | .yatra-services-total-row { |
