/* ========================================================================== Booking — warstwa premium -------------------------------------------------------------------------- Nadpisuje legacy CSS formularza rezerwacji (chauffeur-booking-system + theme style.css). Legacy celuje selektorami `.booking-page #booking-form .vip-booking--steps ...` (1 ID + 3 klasy), więc samo `.vip-booking X` przegrywa kaskadę. Stąd jednolity prefiks `.booking-page #booking-form` przy regułach nadpisujących — przy równej specyficzności wygrywa ten plik, bo ładowany jest jako ostatni. !important tylko tam, gdzie musi bić stan globalny (klawiatura ekranowa, prefers-reduced-motion). Reguły dla elementów, których legacy nie zna (.booking-segmented, .booking-estimate, .booking-mobile-bar, .booking-vehicle-delta), zostają bez prefiksu — nie mają z czym kolidować. Język wizualny zgodny z redesignem strony głównej (home-premium.css): Playfair Display na nagłówkach, Montserrat w UI, złoto #CDB27B. ========================================================================== */ /* Zmienne na :root, nie na .vip-booking — pasek mobilny jest doklejany do , poza drzewem formularza, i bez tego dostawał niezdefiniowane wartości (przycisk: biały tekst na przezroczystym tle). */ :root { --bk-gold: #CDB27B; --bk-gold-deep: #8F7346; /* akcenty, ikony, ramki */ --bk-gold-text: #7A6238; /* złoto na tekst — 5.7:1 na jasnym tle (AA) */ --bk-on-gold: #101010; /* tekst NA złocie — 9.3:1; ta sama wartość co btn-primary-lux na stronie głównej. Biały dawał tu 2.05:1, poniżej progu AA. */ --bk-ink: #171D17; --bk-ink-soft: #4A4F4A; --bk-muted: #686764; /* 5.6:1 — AA także przy 11 px */ --bk-paper: #FBFAF8; --bk-paper-warm: #F4F1E9; --bk-line: #E4DFD4; --bk-line-soft: #EFEBE2; --bk-radius: 14px; --bk-radius-sm: 10px; --bk-shadow: 0 1px 2px rgba(23, 29, 23, .04), 0 8px 24px rgba(23, 29, 23, .05); --bk-shadow-lift: 0 2px 4px rgba(23, 29, 23, .05), 0 14px 36px rgba(23, 29, 23, .09); } /* -------------------------------------------------------------------------- 1. Nagłówek sekcji Był: Montserrat 300 / 38px / uppercase — przycinał ogonki (ó, ł, ż), bo line-height nie mieścił descenderów. Teraz Playfair z zapasem. -------------------------------------------------------------------------- */ .booking-page #booking-form .vip-booking .vip-booking-separator { font-family: 'Playfair Display', 'Playfair Fallback', serif; font-size: clamp(26px, 2.4vw, 34px); font-weight: 400; line-height: 1.28; letter-spacing: -0.01em; text-transform: none; color: var(--bk-ink); margin: 0 0 22px; padding: 0 0 16px; border-bottom: 1px solid var(--bk-line-soft); overflow: visible; } /* -------------------------------------------------------------------------- 2. Etykiety pól Były: 11px / tracking 1.54px / #7C7B79 — na granicy czytelności. -------------------------------------------------------------------------- */ .booking-page #booking-form .vip-booking .chbs-form-field > label, .booking-page #booking-form .vip-booking .booking-stops-label { font-family: 'Montserrat', 'Montserrat Fallback', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bk-ink-soft); margin-bottom: 7px; display: block; } /* -------------------------------------------------------------------------- 3. Pola formularza — wspólny rytm -------------------------------------------------------------------------- */ .booking-page #booking-form .vip-booking .chbs-form-field input[type="text"], .booking-page #booking-form .vip-booking .chbs-form-field input[type="email"], .booking-page #booking-form .vip-booking .chbs-form-field input[type="tel"], .booking-page #booking-form .vip-booking .chbs-form-field select, .booking-page #booking-form .vip-booking .chbs-form-field textarea { font-family: 'Montserrat', 'Montserrat Fallback', sans-serif; font-size: 16px; color: var(--bk-ink); background: #fff; border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm); padding: 13px 15px; height: auto; min-height: 52px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .booking-page #booking-form .vip-booking .chbs-form-field input:hover:not(:focus), .booking-page #booking-form .vip-booking .chbs-form-field select:hover:not(:focus) { border-color: #D3CBBB; } .booking-page #booking-form .vip-booking .chbs-form-field input:focus, .booking-page #booking-form .vip-booking .chbs-form-field select:focus, .booking-page #booking-form .vip-booking .chbs-form-field textarea:focus { border-color: var(--bk-gold); box-shadow: 0 0 0 3px rgba(205, 178, 123, .16); outline: none; } .booking-page #booking-form .vip-booking .chbs-form-field input::placeholder, .booking-page #booking-form .vip-booking .chbs-form-field textarea::placeholder { color: #A8A5A0; } /* Adresy bywają długie ("Lotnisko Chopina Warszawa (Lotnisko Okęcie) (WAW), Żwirki i Wigury, Warszawa, Polska") — ucinane były bez żadnego sygnału. */ .booking-page #booking-form .vip-booking .chbs-form-field-location-autocomplete input { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* -------------------------------------------------------------------------- 4. Selecty — brakowało strzałki (appearance:none + brak background-image), więc nie było jak poznać, że pole jest rozwijane. -------------------------------------------------------------------------- */ .booking-page #booking-form .vip-booking .chbs-form-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238F7346' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; cursor: pointer; } /* -------------------------------------------------------------------------- 5. Przełącznik segmentowy (typ usługi, kierunek) Sterowany z JS; oryginalny