/* * ================================================================ * LUXURY LIMO — Dark Gold Booking Form Theme v2 * File: assets/css/luxury-dark.css * Loaded: AFTER override_css — wins all specificity battles * ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); /* ────────────────────────────────────────────── 1. DESIGN TOKENS ────────────────────────────────────────────── */ :root { --lx-bg: #0d0d0d; --lx-card: #141414; --lx-card2: #1c1c1c; --lx-input-bg: #1e1e1e; --lx-input-hover: #272727; --lx-gold: #c9a84c; --lx-gold-light: #e8cc7a; --lx-gold-dark: #9a7828; --lx-gold-grad: linear-gradient(135deg, #b8902e 0%, #e8cc7a 48%, #b8902e 100%); --lx-white: #ffffff; --lx-grey: #888888; --lx-grey-light: #aaaaaa; --lx-border: rgba(255, 255, 255, 0.07); --lx-border-gold: rgba(201, 168, 76, 0.45); --lx-radius: 6px; --lx-font: 'Montserrat', 'Roboto', 'Helvetica Neue', sans-serif; --lx-shadow: 0 8px 40px rgba(0, 0, 0, 0.7); --lx-ease: all 0.25s ease; } /* ────────────────────────────────────────────── 2. FIX ADMIN CUSTOM CSS — grey/white box override The admin panel injects this which causes the white/grey container. We neutralise it here. ────────────────────────────────────────────── */ #etoMinimalContainer .etoMinimalContainer, #etoMinimalContainer #etoStep1Container { background: var(--lx-card) !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; width: 100% !important; max-width: 460px !important; margin: 0 auto !important; } /* Also fix the outer wrapper itself */ #etoMinimalContainer { background: transparent !important; padding: 0 !important; margin: 0 !important; width: 100% !important; } /* ────────────────────────────────────────────── 3. GLOBAL BODY / WRAPPER ────────────────────────────────────────────── */ body { background: transparent !important; } .eto-main-container, #etoMinimalContainer, #etoCompleteContainer { font-family: var(--lx-font) !important; } /* ────────────────────────────────────────────── 4. STEP 1 CARD CONTAINER ────────────────────────────────────────────── */ #etoStep1Container { background: var(--lx-card) !important; border: none !important; border-radius: 0 !important; padding: 0 !important; max-width: 460px !important; box-shadow: none !important; font-family: var(--lx-font) !important; } /* ────────────────────────────────────────────── 5. HEADER "QUOTE & BOOK" + LANGUAGE SWITCHER ────────────────────────────────────────────── */ .etoStep1HeaderMini, .etoStep1Header { color: var(--lx-white) !important; font-family: var(--lx-font) !important; font-weight: 600 !important; letter-spacing: 4px !important; text-transform: uppercase !important; font-size: 16px !important; margin-bottom: 18px !important; position: relative !important; } /* Language switcher inside header — top right */ .etoStep1HeaderMini .language-switcher-style-dropdown, .etoStep1HeaderMini .language-switcher { position: absolute !important; top: 50% !important; right: 0 !important; transform: translateY(-50%) !important; } .etoStep1HeaderMini .language-switcher .btn, .etoStep1HeaderMini .language-switcher .btn-group .btn { background: transparent !important; border: 1px solid var(--lx-border) !important; color: var(--lx-grey-light) !important; border-radius: var(--lx-radius) !important; padding: 3px 8px !important; font-family: var(--lx-font) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.5px !important; transition: var(--lx-ease) !important; } .etoStep1HeaderMini .language-switcher .btn:hover { border-color: var(--lx-gold) !important; color: var(--lx-gold) !important; } /* Language dropdown menu */ .etoStep1HeaderMini .language-switcher .dropdown-menu, .language-switcher-booking-widget .dropdown-menu { background: var(--lx-card2) !important; border: 1px solid var(--lx-border-gold) !important; border-radius: var(--lx-radius) !important; padding: 4px 0 !important; box-shadow: var(--lx-shadow) !important; min-width: 90px !important; } .etoStep1HeaderMini .language-switcher .dropdown-menu>li>a, .language-switcher-booking-widget .dropdown-menu>li>a { color: var(--lx-grey-light) !important; font-family: var(--lx-font) !important; font-size: 12px !important; padding: 7px 14px !important; transition: var(--lx-ease) !important; } .etoStep1HeaderMini .language-switcher .dropdown-menu>li>a:hover, .language-switcher-booking-widget .dropdown-menu>li>a:hover { background: rgba(201, 168, 76, 0.12) !important; color: var(--lx-gold) !important; } /* External language switcher widget (outside form) */ .language-switcher-booking-widget .btn { background: transparent !important; border: 1px solid var(--lx-border) !important; color: var(--lx-grey-light) !important; border-radius: var(--lx-radius) !important; font-family: var(--lx-font) !important; font-size: 11px !important; } .language-switcher-booking-widget .btn:hover { border-color: var(--lx-gold) !important; color: var(--lx-gold) !important; } /* ────────────────────────────────────────────── 6. SERVICE TYPE TABS Override admin's solid fill → border-only gold ────────────────────────────────────────────── */ .eto-v2-services-tabs { display: flex !important; gap: 8px !important; margin-bottom: 14px !important; } .eto-v2-services-tabs .radio { flex: 1 !important; float: none !important; margin: 0 !important; display: block !important; } .eto-v2-services-tabs .radio label { width: 100% !important; display: block !important; } /* Tab pill base */ .eto-v2-services-tabs .radio .cr-val { display: block !important; background: var(--lx-input-bg) !important; border: 1px solid var(--lx-border) !important; border-radius: var(--lx-radius) !important; color: var(--lx-grey) !important; padding: 11px 14px !important; font-family: var(--lx-font) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; text-align: center !important; width: 100% !important; transition: var(--lx-ease) !important; cursor: pointer !important; margin: 0 !important; } /* Active / hover — border-only gold (overrides admin fill) */ .eto-v2-services-tabs .radio:hover .cr-val, .eto-v2-services-tabs .radio input[type="radio"]:checked+.cr+.cr-val { background: var(--lx-card2) !important; border-color: var(--lx-gold) !important; color: var(--lx-gold) !important; box-shadow: 0 0 0 transparent !important; } /* ────────────────────────────────────────────── 7. LOCATION INPUT FIELDS Each field is a dark card with: - Left gold Ionicon (::before on .typeahead-wrap) - "VON" / "NACH" label (::before on .input-group) - White text / grey placeholder below the label ────────────────────────────────────────────── */ /* Shared input-group card style */ #etoStep1Container .input-group { background: var(--lx-input-bg) !important; border: 1px solid var(--lx-border) !important; border-radius: var(--lx-radius) !important; margin-bottom: 8px !important; transition: var(--lx-ease) !important; overflow: visible !important; position: relative !important; } #etoStep1Container .input-group:hover, #etoStep1Container .input-group:focus-within { border-color: var(--lx-border-gold) !important; background: var(--lx-input-hover) !important; } /* -- VON label -- */ #etoRoute1LocationStartLoader .input-group { padding-top: 22px !important; min-height: 68px !important; } #etoRoute1LocationStartLoader .input-group::before { content: "VON"; position: absolute !important; top: 8px !important; left: 40px !important; color: var(--lx-gold) !important; font-family: var(--lx-font) !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 2px !important; z-index: 11 !important; pointer-events: none !important; } /* -- NACH label -- */ #etoRoute1LocationEndLoader .input-group { padding-top: 22px !important; min-height: 68px !important; } #etoRoute1LocationEndLoader .input-group::before { content: "NACH"; position: absolute !important; top: 8px !important; left: 40px !important; color: var(--lx-gold) !important; font-family: var(--lx-font) !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 2px !important; z-index: 11 !important; pointer-events: none !important; } /* Adjust the Ionicon position in labelled fields */ #etoRoute1LocationStartLoader .typeahead-wrap::before, #etoRoute1LocationEndLoader .typeahead-wrap::before { top: 24px !important; left: 10px !important; color: var(--lx-gold) !important; font-size: 20px !important; } /* Input text inside labelled fields */ #etoRoute1LocationStartLoader input.typeahead, #etoRoute1LocationEndLoader input.typeahead { height: 42px !important; padding-top: 0 !important; } /* Geolocation button */ #etoRoute1LocationStartLoader .input-group-addon, #etoRoute1LocationEndLoader .input-group-addon { vertical-align: bottom !important; } /* Fallback for any other location input groups (waypoints, return) */ #etoStep1Container .typeahead-wrap::before { color: var(--lx-gold) !important; font-size: 20px !important; top: 14px !important; left: 10px !important; } /* ────────────────────────────────────────────── 8. TEXT INPUT STYLING (all inputs) ────────────────────────────────────────────── */ #etoStep1Container .form-control, #etoStep1Container input.typeahead { background: transparent !important; color: var(--lx-white) !important; border: 0 !important; height: 52px !important; font-family: var(--lx-font) !important; font-size: 13px !important; font-weight: 400 !important; box-shadow: none !important; } /* Placeholders */ #etoStep1Container .form-control::placeholder, #etoStep1Container input.typeahead::placeholder { color: var(--lx-grey) !important; } #etoStep1Container .form-control::-webkit-input-placeholder { color: var(--lx-grey) !important; } #etoStep1Container .form-control::-moz-placeholder { color: var(--lx-grey) !important; } #etoStep1Container .form-control:-ms-input-placeholder { color: var(--lx-grey) !important; } /* Right addons (geolocation icon) */ #etoStep1Container .input-group-addon, #etoStep1Container .eto-icon-geolocation { background: transparent !important; color: var(--lx-grey) !important; border: 0 !important; transition: var(--lx-ease) !important; } #etoStep1Container .input-group-addon:hover { color: var(--lx-gold) !important; } /* ────────────────────────────────────────────── 9. DATE & TIME — SPLIT INTO SEPARATE ROWS Override the side-by-side 49%/49% layout ────────────────────────────────────────────── */ #etoStep1Container #etoRoute1DateContainer, #etoStep1Container #etoRoute2DateContainer { background: transparent !important; border: 0 !important; padding: 0 !important; display: block !important; /* override any flex */ width: 100% !important; } /* Make BOTH boxes full-width stacked rows */ #etoStep1Container .etoGhostDateBox, #etoStep1Container .etoGhostTimeBox { float: none !important; display: block !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 8px !important; background: var(--lx-input-bg) !important; border: 1px solid var(--lx-border) !important; border-radius: var(--lx-radius) !important; transition: var(--lx-ease) !important; position: relative !important; min-height: 68px !important; padding-top: 22px !important; } #etoStep1Container .etoGhostDateBox:hover, #etoStep1Container .etoGhostTimeBox:hover { border-color: var(--lx-border-gold) !important; background: var(--lx-input-hover) !important; } /* -- DATUM label (::after on date box, ::before is used for icon) -- */ #etoStep1Container .etoGhostDateBox::after { content: "DATUM"; position: absolute !important; top: 8px !important; left: 40px !important; color: var(--lx-gold) !important; font-family: var(--lx-font) !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 2px !important; z-index: 11 !important; pointer-events: none !important; } /* -- ZEIT label -- */ #etoStep1Container .etoGhostTimeBox::after { content: "ZEIT"; position: absolute !important; top: 8px !important; left: 40px !important; color: var(--lx-gold) !important; font-family: var(--lx-font) !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 2px !important; z-index: 11 !important; pointer-events: none !important; } /* Adjust Ionicons for DATUM/ZEIT boxes */ #etoStep1Container .etoGhostDateTime .etoGhostDateBox::before, #etoStep1Container .etoGhostDateTime .etoGhostTimeBox::before { color: var(--lx-gold) !important; font-size: 20px !important; top: 24px !important; left: 10px !important; } /* Ghost date span (shows selected date text) */ #etoStep1Container .etoGhostDateBox>span.form-control { background: transparent !important; color: var(--lx-white) !important; height: 44px !important; line-height: 44px !important; padding-left: 40px !important; padding-top: 0 !important; border: 0 !important; font-family: var(--lx-font) !important; font-size: 13px !important; } /* Combodate (hour & minute selects in time box) */ #etoStep1Container .combodate { display: flex !important; align-items: center !important; padding: 0 8px 0 40px !important; height: 44px !important; } #etoStep1Container .combodate select { background: transparent !important; color: var(--lx-white) !important; border: 0 !important; font-family: var(--lx-font) !important; font-size: 13px !important; height: 36px !important; padding: 0 4px !important; cursor: pointer !important; -webkit-appearance: none !important; appearance: none !important; } #etoStep1Container .combodate select option { background: black !important; color: var(--lx-white) !important; } /* Separator between hours and minutes */ #etoStep1Container .combodate .separator { color: var(--lx-grey) !important; padding: 0 2px !important; } /* ────────────────────────────────────────────── 10. WAYPOINTS & SWAP BUTTONS ────────────────────────────────────────────── */ #etoStep1Container .etoWaypointsAddButton, #etoStep1Container .etoSwapLocationsButton { color: var(--lx-grey) !important; font-family: var(--lx-font) !important; font-size: 12px !important; transition: var(--lx-ease) !important; } #etoStep1Container .etoWaypointsAddButton:hover, #etoStep1Container .etoSwapLocationsButton:hover { color: var(--lx-gold) !important; text-decoration: none !important; } /* Waypoint inputs (same dark card style) */ #etoStep1Container #etoRoute1WaypointsLoader .input-group, #etoStep1Container #etoRoute2WaypointsLoader .input-group { background: var(--lx-input-bg) !important; border: 1px solid var(--lx-border) !important; border-radius: var(--lx-radius) !important; } /* ────────────────────────────────────────────── 11. RETURN TRIP TOGGLE ────────────────────────────────────────────── */ #etoRouteReturnContainer .cr-label, #etoRouteReturnContainer a, #etoRouteReturnContainer span { color: var(--lx-grey) !important; font-family: var(--lx-font) !important; font-size: 12px !important; transition: var(--lx-ease) !important; } #etoRouteReturnContainer:hover .cr-label, #etoRouteReturnContainer a:hover { color: var(--lx-gold) !important; } /* Checkbox base */ #etoStep1Container .checkbox .cr, #etoStep1Container .radio .cr { background: var(--lx-input-bg) !important; border-color: var(--lx-border) !important; } /* Checked checkbox */ #etoStep1Container .checkbox label input[type="checkbox"]:checked+.cr { background: var(--lx-gold) !important; border-color: var(--lx-gold-dark) !important; color: #0d0d0d !important; } /* ────────────────────────────────────────────── 12. CALCULATE PRICE / SUBMIT BUTTON ────────────────────────────────────────────── */ #etoStep1Container #etoQuoteStep1Button, #etoStep1Container #etoSubmitButton, .etoMinimalContainer #etoSubmitButtonContainer #etoSubmitButton { background: var(--lx-gold-grad) !important; border: none !important; color: #0d0d0d !important; font-family: var(--lx-font) !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: 3px !important; text-transform: uppercase !important; height: 52px !important; border-radius: var(--lx-radius) !important; width: 100% !important; transition: var(--lx-ease) !important; box-shadow: 0 4px 24px rgba(201, 168, 76, 0.3) !important; position: relative !important; overflow: hidden !important; } /* Shimmer sweep on hover */ #etoStep1Container #etoQuoteStep1Button::before, #etoStep1Container #etoSubmitButton::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 60% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent) !important; transition: left 0.55s ease !important; pointer-events: none !important; } #etoStep1Container #etoQuoteStep1Button:hover::before, #etoStep1Container #etoSubmitButton:hover::before { left: 160% !important; } #etoStep1Container #etoQuoteStep1Button:hover, #etoStep1Container #etoSubmitButton:hover { background: linear-gradient(135deg, #9a7828 0%, #c9a84c 50%, #9a7828 100%) !important; box-shadow: 0 6px 32px rgba(201, 168, 76, 0.55) !important; transform: translateY(-1px) !important; } /* Arrow after button text */ #etoStep1Container #etoQuoteStep1Button .eto-v2-button-label::after, #etoStep1Container #etoSubmitButton .eto-v2-button-label::after { content: ' \2192' !important; } /* ────────────────────────────────────────────── 13. LANGUAGE SWITCHER — Booking page top bar ────────────────────────────────────────────── */ .language-switcher-booking .btn { background: transparent !important; border: 1px solid var(--lx-border) !important; color: var(--lx-grey-light) !important; border-radius: var(--lx-radius) !important; font-family: var(--lx-font) !important; font-size: 11px !important; transition: var(--lx-ease) !important; } .language-switcher-booking .btn:hover { border-color: var(--lx-gold) !important; color: var(--lx-gold) !important; } .language-switcher-booking, .v2-steps-lang, .language-switcher-booking-widget, .language-switcher { overflow: visible !important; } .language-switcher-booking .dropdown-menu { background: var(--lx-card2) !important; border: 1px solid var(--lx-border-gold) !important; border-radius: var(--lx-radius) !important; z-index: 999999 !important; right: 0 !important; left: auto !important; } .language-switcher-booking .dropdown-menu>li>a { color: var(--lx-grey-light) !important; font-family: var(--lx-font) !important; } .language-switcher-booking .dropdown-menu>li>a:hover { background: rgba(201, 168, 76, 0.12) !important; color: var(--lx-gold) !important; } /* Steps bar language switcher */ .v2-steps-lang .language-switcher .btn { background: transparent !important; color: var(--lx-grey) !important; border-color: transparent !important; font-family: var(--lx-font) !important; } .v2-steps-lang .language-switcher .btn:hover { color: var(--lx-gold) !important; } .v2-steps-lang .language-switcher .dropdown-menu { background: var(--lx-card2) !important; border: 1px solid var(--lx-border-gold) !important; border-radius: var(--lx-radius) !important; z-index: 999999 !important; position: absolute !important; right: 0 !important; left: auto !important; } .v2-steps-lang .language-switcher .dropdown-menu>li>a { color: var(--lx-grey-light) !important; font-family: var(--lx-font) !important; font-size: 12px !important; } .v2-steps-lang .language-switcher .dropdown-menu>li>a:hover { background: rgba(201, 168, 76, 0.12) !important; color: var(--lx-gold) !important; } /* ────────────────────────────────────────────── 14. STEPS BAR (Booking page breadcrumb) ────────────────────────────────────────────── */ .v2-steps-main { margin-bottom: 20px !important; } .v2-steps { background: var(--lx-card) !important; border: 1px solid var(--lx-border) !important; border-radius: var(--lx-radius) !important; overflow: visible !important; } .v2-steps-step { color: var(--lx-grey) !important; font-family: var(--lx-font) !important; } .v2-steps-step::after { border-left-color: var(--lx-card) !important; } .v2-steps-step::before { border-left-color: rgba(255, 255, 255, 0.08) !important; } .v2-steps-step-active { background: var(--lx-card2) !important; } .v2-steps-step-active.v2-steps-step::after { border-left-color: var(--lx-card2) !important; } .v2-steps-title, .v2-steps-name { color: var(--lx-grey) !important; font-family: var(--lx-font) !important; font-weight: 500 !important; } .v2-steps-step-active .v2-steps-title, .v2-steps-step-active .v2-steps-name, .v2-steps-step:hover .v2-steps-title, .v2-steps-step:hover .v2-steps-name { color: var(--lx-gold) !important; } /* ────────────────────────────────────────────── 15. TYPEAHEAD ADDRESS DROPDOWN ────────────────────────────────────────────── */ #etoStep1Container .tt-menu { background: var(--lx-card2) !important; border: 1px solid var(--lx-border-gold) !important; border-top: none !important; border-radius: 0 0 var(--lx-radius) var(--lx-radius) !important; box-shadow: var(--lx-shadow) !important; margin-top: 0 !important; } #etoStep1Container .tt-suggestion { color: var(--lx-white) !important; font-family: var(--lx-font) !important; font-size: 13px !important; padding: 8px 12px !important; transition: var(--lx-ease) !important; } #etoStep1Container .tt-suggestion:hover, #etoStep1Container .tt-suggestion.tt-cursor { background: rgba(201, 168, 76, 0.14) !important; color: var(--lx-gold) !important; } #etoStep1Container .tt-header { color: var(--lx-grey) !important; font-family: var(--lx-font) !important; font-size: 11px !important; padding: 6px 12px 2px !important; } /* Powered by Google */ .powered-by-google-locations img { opacity: 0.5 !important; filter: invert(1) !important; } /* ────────────────────────────────────────────── 16. DATEPICKER CALENDAR ────────────────────────────────────────────── */ .bootstrap-datetimepicker-widget.dropdown-menu { background: var(--lx-card2) !important; border: 1px solid var(--lx-border-gold) !important; border-radius: var(--lx-radius) !important; box-shadow: var(--lx-shadow) !important; } .bootstrap-datetimepicker-widget table td, .bootstrap-datetimepicker-widget table th { color: var(--lx-white) !important; font-family: var(--lx-font) !important; font-weight: 400 !important; } .bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover, .bootstrap-datetimepicker-widget table td span.active { background: var(--lx-gold) !important; color: #0d0d0d !important; text-shadow: none !important; border-radius: 3px !important; } .bootstrap-datetimepicker-widget table td.today::before { border-bottom-color: var(--lx-gold) !important; } .bootstrap-datetimepicker-widget table td.disabled, .bootstrap-datetimepicker-widget table td.disabled:hover { color: #3a3a3a !important; } .bootstrap-datetimepicker-widget table td:not(.disabled):not(.active):hover, .bootstrap-datetimepicker-widget table th:hover { background: rgba(201, 168, 76, 0.12) !important; border-radius: 3px !important; } .bootstrap-datetimepicker-widget .picker-switch td a, .bootstrap-datetimepicker-widget .timepicker a.btn { color: var(--lx-gold) !important; } .bootstrap-datetimepicker-widget .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker-minute, .bootstrap-datetimepicker-widget .timepicker-second { color: var(--lx-white) !important; border-color: var(--lx-border) !important; font-family: var(--lx-font) !important; } /* ────────────────────────────────────────────── 17. GHOST WIDGET (inline date picker wrapper) ────────────────────────────────────────────── */ #etoStep1Container .etoGhostWidget { background: var(--lx-card2) !important; border-color: var(--lx-border-gold) !important; border-radius: var(--lx-radius) !important; box-shadow: var(--lx-shadow) !important; } /* ────────────────────────────────────────────── 18. SERVICE / DURATION SELECTS (non-tab mode) ────────────────────────────────────────────── */ #etoStep1Container #etoServicesContainer:not(.eto-v2-services-tabs) select, #etoStep1Container #etoServicesDurationContainer select { background: transparent !important; color: var(--lx-white) !important; border: 0 !important; font-family: var(--lx-font) !important; } #etoStep1Container #etoServicesContainer:not(.eto-v2-services-tabs) select option, #etoStep1Container #etoServicesDurationContainer select option { background: var(--lx-card2) !important; color: var(--lx-white) !important; } /* Non-tab service container icons */ #etoStep1Container #etoServicesContainer:not(.eto-v2-services-tabs) .input-group::before, #etoStep1Container #etoServicesDurationContainer .input-group::before { color: var(--lx-gold) !important; font-size: 20px !important; } /* ────────────────────────────────────────────── 19. LOADING / ERROR STATES ────────────────────────────────────────────── */ .loadingContainer { color: var(--lx-white) !important; font-family: var(--lx-font) !important; } .loadingText { color: var(--lx-grey) !important; font-family: var(--lx-font) !important; } #etoStep1Container .etoErrorContainer .input-group, #etoStep1Container .etoError { border-left: 3px solid #e05252 !important; } /* ────────────────────────────────────────────── 20. LINKS ────────────────────────────────────────────── */ #etoStep1Container a { color: var(--lx-gold) !important; transition: var(--lx-ease) !important; } #etoStep1Container a:hover { color: var(--lx-gold-light) !important; text-decoration: none !important; } /* ────────────────────────────────────────────── 21. SCROLLBAR (typeahead dropdown) ────────────────────────────────────────────── */ .tt-menu::-webkit-scrollbar { width: 4px; } .tt-menu::-webkit-scrollbar-track { background: var(--lx-card2); } .tt-menu::-webkit-scrollbar-thumb { background: var(--lx-gold-dark); border-radius: 2px; } #etoStep1Container { padding: 24px 16px !important; border-radius: 8px !important; } #etoRoute1Container { padding: 24px 30px !important; border-radius: 8px !important; } /* .etoMinimalContainer { padding: 0px !important; } */ /* #etoMinimalContainer .etoMinimalContainer { padding: 0px !important; } */ /* ────────────────────────────────────────────── 22. RESPONSIVE ────────────────────────────────────────────── */ @media (max-width: 480px) { #etoMinimalContainer .etoMinimalContainer, #etoStep1Container { padding: 16px !important; /* border-left: 0 !important; */ /* border-right: 0 !important; */ border-radius: 12 !important; max-width: 100% !important; } .etoMinimalContainer { padding: 0px !important; } .eto-v2-services-tabs { gap: 6px !important; } .eto-v2-services-tabs .radio .cr-val { font-size: 9px !important; padding: 10px 6px !important; letter-spacing: 0.8px !important; } #etoStep1Container #etoQuoteStep1Button, #etoStep1Container #etoSubmitButton { font-size: 11px !important; letter-spacing: 2px !important; } #etoStep1Container { padding: 24px 16px !important; border-radius: 8px !important; } #etoRoute1Container { padding: 24px 30px !important; border-radius: 8px !important; } } @media (max-width: 320px) { .eto-v2-services-tabs { flex-direction: column !important; } #etoMinimalContainer .etoMinimalContainer { padding: 0px !important; } #etoRoute1Container { padding: 24px 30px !important; border-radius: 8px !important; } #etoStep1Container { padding: 24px 16px !important; border-radius: 8px !important; } } /* ────────────────────────────────────────────── 23. LANGUAGE SWITCHER — Z-INDEX FIX Dropdown was rendering behind form content. ────────────────────────────────────────────── */ .etoStep1HeaderMini .language-switcher-style-dropdown { z-index: 9999 !important; } .etoStep1HeaderMini .language-switcher-style-dropdown .dropdown-menu, .language-switcher .dropdown-menu, .language-switcher-booking-widget .dropdown-menu { z-index: 99999 !important; position: absolute !important; } /* ────────────────────────────────────────────── 24. STEP 2 — LUXURY VEHICLE CARD REDESIGN Transforms the default white 2-col grid into full-width dark premium cards. ────────────────────────────────────────────── */ /* Overall Step 2 bg */ #etoStep2Container { background: var(--lx-bg) !important; padding: 0 !important; } /* Legend (Einweg / Rückkehr tab labels) */ #etoStep2Container fieldset legend { color: var(--lx-gold-light) !important; font-family: var(--lx-font) !important; font-size: 13px !important; letter-spacing: 2px !important; text-transform: uppercase !important; border-bottom: 1px solid var(--lx-border-gold) !important; padding-bottom: 8px !important; margin-bottom: 16px !important; } /* Nav tabs (Einweg / Rückkehr) */ #etoStep2Container .etoVehicleTabs { border-bottom: 1px solid var(--lx-border-gold) !important; margin-bottom: 16px !important; } #etoStep2Container .etoVehicleTabs>li>a { background: transparent !important; border-color: transparent !important; color: var(--lx-grey) !important; font-family: var(--lx-font) !important; font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; } #etoStep2Container .etoVehicleTabs>li.active>a, #etoStep2Container .etoVehicleTabs>li>a:hover { background: transparent !important; border-color: transparent transparent var(--lx-gold) !important; color: var(--lx-gold) !important; } /* ── Card wrapper: 100% wide instead of 50% 2-col ── */ .etoVehicleContainer { width: 100% !important; float: none !important; padding: 0 !important; margin: 0 0 12px 0 !important; } /* ── Inner card: dark with gold border ── */ .etoVehicleInnerContainer { background: linear-gradient(90deg, rgba(201, 168, 76, 0.02) 0%, rgba(201, 168, 76, 0.08) 100%), var(--lx-card) !important; border: 1px solid var(--lx-border-gold) !important; border-radius: 8px !important; padding: 0 !important; overflow: hidden !important; position: relative !important; min-height: 170px !important; box-shadow: none !important; transition: border-color 0.3s ease, box-shadow 0.3s ease !important; cursor: pointer !important; } .etoVehicleInnerContainer:hover { border-color: var(--lx-gold) !important; box-shadow: 0 4px 28px rgba(201, 168, 76, 0.14) !important; } .etoVehicleInnerContainerSelected { border-color: var(--lx-gold) !important; box-shadow: 0 0 32px rgba(201, 168, 76, 0.25) !important; } /* ── Column 1: Image → absolutely on the right ── */ .etoVehicleColumn1 { float: none !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 50% !important; /* display: flex !important; */ /* align-items: center !important; */ /* justify-content: center !important; */ padding: 12px !important; border-left: none !important; background: transparent !important; overflow: hidden !important; } .etoVehicleImage { margin: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } .etoVehicleImage img { width: 100% !important; max-width: none !important; height: auto !important; max-height: 140px !important; object-fit: contain !important; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.6)) !important; } .etoVehicleImageBG { width: 100% !important; height: 140px !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; border-radius: 10px !important; } /* ── Column 2: Name + Details → left content ── */ .etoVehicleColumn2 { float: none !important; width: 40% !important; padding: 20px 16px 64px 22px !important; } .etoVehicleName { font-family: var(--lx-font) !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--lx-white) !important; line-height: 1.3 !important; margin-bottom: 8px !important; } .etoVehicleDetails { margin-top: 10px !important; color: var(--lx-grey) !important; } .etoVehicleDetails>div[class*="etoVehicleDetails"] { float: left !important; margin-right: 10px !important; margin-bottom: 4px !important; } .etoVehicleDetails>div[class*="etoVehicleDetails"]>img { filter: invert(72%) sepia(21%) saturate(1450%) hue-rotate(11deg) brightness(93%) contrast(85%) !important; opacity: 1 !important; height: 15px !important; margin-top: 4px !important; } .etoVehicleDetails>div[class*="etoVehicleDetails"]>span { color: var(--lx-grey) !important; font-size: 11px !important; margin: 4px 0 0 3px !important; display: inline-block !important; font-family: var(--lx-font) !important; } /* ── Column 3: Price + Select Button → bottom bar ── */ .etoVehicleColumn3 { float: none !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 55% !important; padding: 0 22px 16px 22px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; } /* Price */ .etoVehicleTotalPrice { position: static !important; top: auto !important; right: auto !important; color: var(--lx-gold) !important; font-size: 24px !important; font-weight: 700 !important; background: transparent !important; line-height: 1 !important; padding: 0 !important; margin: 0 !important; font-family: var(--lx-font) !important; } .etoVehicleTotalPrice span { font-size: 12px !important; color: var(--lx-grey) !important; font-weight: 400 !important; } /* Select button — styled as a checkbox */ .etoVehicleSelectButton { background: transparent !important; border: 2px solid rgba(201, 168, 76, 0.45) !important; border-radius: 6px !important; width: 26px !important; height: 26px !important; min-width: 26px !important; line-height: 1 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: background 0.2s ease, border-color 0.2s ease !important; position: relative !important; } /* Hide all children of the select button to ignore dynamic HTML injection */ .etoVehicleSelectButton * { display: none !important; } /* Tick appears when vehicle card is selected */ .etoVehicleInnerContainerSelected .etoVehicleSelectButton { background: var(--lx-gold) !important; border-color: var(--lx-gold) !important; } /* Create the checkmark using CSS when selected */ .etoVehicleInnerContainerSelected .etoVehicleSelectButton::after { content: "✓" !important; font-family: Arial, sans-serif !important; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #000000 !important; display: block !important; } .etoVehicleSelectButton:hover { border-color: var(--lx-gold) !important; } /* "Not available" state */ .etoVehicleSelectDisableInfo { position: static !important; color: var(--lx-grey) !important; font-size: 11px !important; letter-spacing: 1px !important; text-transform: uppercase !important; font-family: var(--lx-font) !important; } /* Hidden actual select element */ .etoVehicleInnerContainer>select { display: none !important; } /* Disable "not available" label colour */ .etoVehicleInnerContainer label { color: inherit !important; } /* "Karte ausblenden" map link */ .etoRoute1MapBtnShow, .etoRoute2MapBtnShow, .etoRoute1MapBtnHide, .etoRoute2MapBtnHide { color: var(--lx-gold) !important; font-family: var(--lx-font) !important; font-size: 11px !important; letter-spacing: 1px !important; text-transform: uppercase !important; } .etoRoute1MapBtnShow:hover, .etoRoute2MapBtnShow:hover, .etoRoute1MapBtnHide:hover, .etoRoute2MapBtnHide:hover { color: var(--lx-gold-light) !important; } /* Step 2 "Jetzt buchen" button */ #etoStep2Container #etoQuoteStep2Button, #etoStep2Container #etoQuoteStep2ButtonHelper1, #etoStep2Container #etoQuoteStep2ButtonHelper2 { background: var(--lx-gold-grad) !important; color: #000 !important; font-family: var(--lx-font) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; border: none !important; border-radius: 0 !important; height: 50px !important; padding: 0 32px !important; } /* Step 2 total price display */ #etoVehicleCheckoutTotal { color: var(--lx-grey-light) !important; font-family: var(--lx-font) !important; font-size: 13px !important; letter-spacing: 1px !important; margin-bottom: 12px !important; } #etoVehicleCheckoutTotal span { color: var(--lx-gold) !important; font-size: 22px !important; font-weight: 700 !important; font-family: var(--lx-font) !important; } /* ── Responsive: stack cards on mobile ── */ /* Media query moved lower to solve cascading overrides */ /* ────────────────────────────────────────────── 25. VEHICLE FEATURES LIST (.lxFeaturesList) Rendered from the admin vehicle Description field. Enter one feature per line in the admin panel. ────────────────────────────────────────────── */ .lxFeaturesList { list-style: none !important; margin: 8px 0 6px 0 !important; padding: 0 !important; } .lxFeaturesList li { color: var(--lx-grey-light) !important; font-family: var(--lx-font) !important; font-size: 11px !important; line-height: 1.5 !important; padding: 2px 0 2px 16px !important; position: relative !important; letter-spacing: 0.3px !important; } .lxFeaturesList li::before { content: "\2713" !important; position: absolute !important; left: 0 !important; top: 2px !important; color: var(--lx-gold) !important; font-size: 10px !important; font-weight: 700 !important; opacity: 1 !important; font-family: Arial, sans-serif !important; } /* ────────────────────────────────────────────── 26. VEHICLE COLUMN2 — wider to use full left 64% ────────────────────────────────────────────── */ .etoVehicleColumn2 { width: 50% !important; padding: 18px 16px 70px 22px !important; } /* ── Responsive: stack cards on mobile ── */ @media (max-width: 560px) { .etoVehicleColumn1 { position: relative !important; width: 100% !important; height: 170px !important; border-left: none !important; border-bottom: 1px solid rgba(201, 168, 76, 0.1) !important; } .etoVehicleColumn2 { width: 100% !important; padding-bottom: 70px !important; } .etoVehicleColumn3 { width: 100% !important; } .etoVehicleInnerContainer { min-height: auto !important; } } /* ────────────────────────────────────────────── 27. VEHICLE IMAGE — fill the right column The image is rendered as background-image on .etoVehicleImage.etoVehicleImageBG (same div). Gradient shows as fallback when no image. ────────────────────────────────────────────── */ .etoVehicleColumn1 .etoVehicleImage, .etoVehicleColumn1 .etoVehicleImageBG { width: 100% !important; height: 100% !important; min-height: 400px !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; border-radius: 10px !important; display: block !important; margin: 0 !important; } /* ────────────────────────────────────────────── 28. STEP 2 — Luggage info text (white) ────────────────────────────────────────────── */ .etoStep2Info1, .etoStep2Info2 { color: #ffffff !important; opacity: 0.85; font-size: 13px; line-height: 1.5; } /* ══════════════════════════════════════════════ 29. STEP 3 — Payment Method Cards (v2) Layout: [â—‹ radio] [price + name] [logo] ══════════════════════════════════════════════ */ .eto-v2-payment-method { margin-bottom: 8px !important; } .etoPaymentContainer { position: relative !important; background: var(--lx-card2, #1a1a18) !important; border: 1px solid rgba(201, 168, 76, 0.20) !important; border-radius: 12px !important; padding: 0 !important; overflow: hidden !important; transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important; cursor: pointer !important; } .etoPaymentContainer:hover { border-color: var(--lx-gold) !important; box-shadow: 0 4px 20px rgba(201, 168, 76, 0.14) !important; } /* Native radio — visible, absolutely placed on left */ .etoPaymentContainer>input[type="radio"] { position: absolute !important; left: 20px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 3 !important; opacity: 1 !important; width: 20px !important; height: 20px !important; margin: 0 !important; padding: 0 !important; cursor: pointer !important; -webkit-appearance: none !important; appearance: none !important; border-radius: 50% !important; border: 2px solid rgba(201, 168, 76, 0.45) !important; background-color: transparent !important; outline: none !important; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important; box-sizing: border-box !important; } .etoPaymentContainer>input[type="radio"]:checked { border-color: var(--lx-gold) !important; background-color: var(--lx-gold) !important; box-shadow: inset 0 0 0 4px var(--lx-card2, #1a1a18) !important; } .etoPaymentContainer>label { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important; cursor: pointer !important; font-weight: 400 !important; } /* Defeat Bootstrap .btn.btn-primary with maximum specificity */ div.etoPaymentContainer>label>button.btn.btn-primary.etoPaymentButton, div.etoPaymentContainer>label>button.btn.etoPaymentButton { background-color: transparent !important; background-image: none !important; background: transparent !important; border: none !important; border-color: transparent !important; box-shadow: none !important; -webkit-box-shadow: none !important; outline: none !important; color: inherit !important; display: flex !important; align-items: center !important; width: 100% !important; padding: 16px 20px 16px 56px !important; margin: 0 !important; gap: 16px !important; cursor: pointer !important; text-align: left !important; font-size: inherit !important; font-weight: normal !important; font-family: inherit !important; text-transform: none !important; letter-spacing: normal !important; line-height: normal !important; white-space: normal !important; min-height: 0 !important; height: auto !important; float: none !important; border-radius: 0 !important; } div.etoPaymentContainer>label>button.btn.btn-primary.etoPaymentButton:hover, div.etoPaymentContainer>label>button.btn.btn-primary.etoPaymentButton:focus, div.etoPaymentContainer>label>button.btn.btn-primary.etoPaymentButton:active { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; color: inherit !important; } .etoPaymentButtonText { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; text-align: left !important; min-width: 0 !important; } .etoPaymentTotalPrice { display: block !important; font-family: var(--lx-font) !important; font-size: 20px !important; font-weight: 700 !important; color: var(--lx-gold) !important; line-height: 1.2 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } .eto-v2-payment-method-name { display: block !important; font-family: var(--lx-font) !important; font-size: 13px !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.6) !important; letter-spacing: 0.3px !important; line-height: 1.4 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } .etoPaymentButtonLogoTable { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; min-width: 70px !important; width: auto !important; } .etoPaymentButtonLogo { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; height: auto !important; padding: 0 !important; } .etoPaymentImage { display: inline-block !important; max-height: 34px !important; max-width: 110px !important; width: auto !important; height: auto !important; object-fit: contain !important; vertical-align: middle !important; } /* Selected card highlight */ .etoPaymentContainer:has(> input[type="radio"]:checked) { border-color: var(--lx-gold) !important; background: rgba(201, 168, 76, 0.06) !important; box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.6), 0 6px 28px rgba(201, 168, 76, 0.18) !important; } .etoPaymentContainer:has(> input[type="radio"]:checked) .eto-v2-payment-method-name { color: rgba(255, 255, 255, 0.9) !important; } .etoPaymentDeposit { position: static !important; padding: 0 20px 12px 56px !important; margin: 0 !important; text-align: left !important; top: auto !important; left: auto !important; right: auto !important; z-index: auto !important; } .etoPaymentDeposit select { background: var(--lx-card2, #1a1a18) !important; color: var(--lx-grey) !important; border: 1px solid rgba(201, 168, 76, 0.3) !important; border-radius: 6px !important; font-size: 12px !important; height: 28px !important; padding: 2px 8px !important; } /* The inner container — card row */ .etoPaymentContainer { background: var(--lx-card) !important; border: 1px solid rgba(201, 168, 76, 0.18) !important; border-radius: 10px !important; padding: 0 !important; overflow: visible !important; transition: border-color 0.25s ease, box-shadow 0.25s ease !important; } .etoPaymentContainer:hover { border-color: var(--lx-gold) !important; box-shadow: 0 4px 20px rgba(201, 168, 76, 0.12) !important; } /* Hide the native radio */ .etoPaymentContainer input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; } /* The label wraps the whole row */ .etoPaymentContainer label { display: flex !important; align-items: center !important; width: 100% !important; padding: 16px 20px !important; margin: 0 !important; cursor: pointer !important; gap: 0 !important; } /* Kill the button entirely — use label as the row */ .etoPaymentButton { all: unset !important; display: flex !important; align-items: center !important; width: 100% !important; gap: 16px !important; cursor: pointer !important; background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; min-height: unset !important; white-space: normal !important; } /* Custom radio circle on the left */ .etoPaymentButton::before { content: '' !important; display: block !important; flex-shrink: 0 !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; border: 2px solid rgba(201, 168, 76, 0.45) !important; background: transparent !important; transition: border-color 0.2s ease, background 0.2s ease !important; box-sizing: border-box !important; } /* Text block — name + price */ .etoPaymentButtonText { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; text-align: left !important; } .eto-v2-payment-method-name { display: block !important; font-family: var(--lx-font) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--lx-grey) !important; letter-spacing: 0.5px !important; line-height: 1.4 !important; } .etoPaymentTotalPrice { display: block !important; font-family: var(--lx-font) !important; font-size: 18px !important; font-weight: 700 !important; color: var(--lx-gold) !important; line-height: 1.2 !important; margin-bottom: 2px !important; } /* Logo block — right side */ .etoPaymentButtonLogoTable { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-shrink: 0 !important; margin-top: 0 !important; width: auto !important; min-width: 80px !important; } .etoPaymentButtonLogo { display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; height: auto !important; padding: 0 !important; } .etoPaymentImage { max-height: 36px !important; max-width: 120px !important; width: auto !important; object-fit: contain !important; display: block !important; filter: brightness(1.1) !important; } /* ── Selected state ── */ .etoPaymentContainer:has(input[type="radio"]:checked) { border-color: var(--lx-gold) !important; box-shadow: 0 0 0 1px var(--lx-gold), 0 4px 24px rgba(201, 168, 76, 0.2) !important; background: rgba(201, 168, 76, 0.05) !important; } .etoPaymentContainer:has(input[type="radio"]:checked) .etoPaymentButton::before { border-color: var(--lx-gold) !important; background: var(--lx-gold) !important; box-shadow: inset 0 0 0 4px var(--lx-card) !important; } .etoPaymentContainer:has(input[type="radio"]:checked) .eto-v2-payment-method-name { color: var(--lx-white) !important; } /* Discount/deposit label */ .etoPaymentDeposit { position: static !important; text-align: left !important; padding: 0 20px 10px 56px !important; margin-top: -8px !important; } /* Deposit select */ .etoPaymentDeposit select { background: var(--lx-card) !important; color: var(--lx-grey) !important; border: 1px solid rgba(201, 168, 76, 0.3) !important; border-radius: 6px !important; font-size: 12px !important; } /* ══════════════════════════════════════════════ 30. PAYMENT CARDS — new lx-pay-* structure (Bootstrap-free, generated directly from JS) ══════════════════════════════════════════════ */ .lx-payment-list { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; } /* Each payment card row */ .lx-pay-card { display: flex !important; align-items: center !important; gap: 14px !important; padding: 16px 20px !important; background: var(--lx-card2, #1c1b17) !important; border: 1px solid rgba(201, 168, 76, 0.18) !important; border-radius: 12px !important; cursor: pointer !important; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important; position: relative !important; } .lx-pay-card:hover { border-color: rgba(201, 168, 76, 0.55) !important; box-shadow: 0 4px 18px rgba(201, 168, 76, 0.1) !important; } /* Selected state */ .lx-pay-card.lx-pay-selected { border-color: var(--lx-gold) !important; background: rgba(201, 168, 76, 0.07) !important; box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.5), 0 6px 24px rgba(201, 168, 76, 0.15) !important; } /* Custom radio circle */ .lx-pay-radio { width: 20px !important; height: 20px !important; min-width: 20px !important; border-radius: 50% !important; border: 2px solid rgba(201, 168, 76, 0.4) !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; transition: border-color 0.2s ease !important; flex-shrink: 0 !important; } .lx-pay-card.lx-pay-selected .lx-pay-radio { border-color: var(--lx-gold) !important; background: var(--lx-gold) !important; } /* Inner dot when selected */ .lx-pay-radio-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: transparent !important; transition: background 0.2s ease !important; } .lx-pay-card.lx-pay-selected .lx-pay-radio-dot { background: var(--lx-card2, #1c1b17) !important; } /* Text block: price + name */ .lx-pay-info { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; } .lx-pay-price { font-family: var(--lx-font) !important; font-size: 18px !important; font-weight: 700 !important; color: var(--lx-gold) !important; line-height: 1.2 !important; } .lx-pay-name { font-family: var(--lx-font) !important; font-size: 13px !important; font-weight: 400 !important; color: rgba(255, 255, 255, 0.65) !important; line-height: 1.4 !important; white-space: normal !important; } .lx-pay-card.lx-pay-selected .lx-pay-name { color: rgba(255, 255, 255, 0.9) !important; } /* Logo area */ .lx-pay-logo-wrap { flex-shrink: 0 !important; min-width: 60px !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; } .lx-pay-logo { max-height: 36px !important; max-width: 110px !important; width: auto !important; height: auto !important; object-fit: contain !important; display: block !important; } /* ══════════════════════════════════════════════ 31. VEHICLE SELECT BUTTON — checkbox tick fix ══════════════════════════════════════════════ */ /* The tick span (Unicode ✓) */ .etoVehicleSelectButton .lx-cb-tick { display: none !important; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #000 !important; } /* Show tick when vehicle is selected */ .etoVehicleInnerContainerSelected .etoVehicleSelectButton .lx-cb-tick { display: block !important; } /* Also update dynamic button html set by JS on selection */ .etoVehicleInnerContainerSelected button.etoVehicleSelectButton { background: var(--lx-gold) !important; border-color: var(--lx-gold) !important; } /* Payment section titles separating Cash and Card */ .lx-payment-section-title { font-family: var(--lx-font) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--lx-gold) !important; margin-bottom: 12px !important; margin-top: 10px !important; } /* ══════════════════════════════════════════════ 32. VEHICLE IMAGES — fix blurriness Upload size is small; prevent upscale artifact ══════════════════════════════════════════════ */ /* tag variant: let image keep native dimensions */ .etoVehicleImage img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 130px !important; object-fit: contain !important; image-rendering: -webkit-optimize-contrast !important; image-rendering: crisp-edges !important; display: block !important; margin: 0 auto !important; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55)) !important; } /* Background-image variant: ensure sharp contain */ .etoVehicleImageBG { background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; image-rendering: -webkit-optimize-contrast !important; } /* ══════════════════════════════════════════════ 33. GLOBAL TEXT COLOR — #ccc → #bab9b9 Override Bootstrap's default dark text on dark bg ══════════════════════════════════════════════ */ /* Override grey CSS variables so everything inheriting them updates */ :root { --lx-grey: #bab9b9 !important; --lx-grey-light: #bab9b9 !important; --lx-muted: #bab9b9 !important; } /* Body text inside ETO containers */ #etoCompleteContainer p, #etoCompleteContainer span:not(.btn):not(.badge), #etoCompleteContainer li, #etoCompleteContainer div:not(.btn) { color: #bab9b9; } /* Step 3 specific labels & text */ #etoStep3Container label, #etoStep3Container .etoLabel, #etoStep3Container .control-label, #etoStep3Container legend, #etoStep3Container small, #etoStep3Container p { color: #bab9b9 !important; } /* Inputs, selects, textareas */ #etoStep3Container .form-control, #etoStep3Container input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]), #etoStep3Container select, #etoStep3Container textarea { color: #bab9b9 !important; } /* Placeholder text */ #etoStep3Container .form-control::placeholder, #etoStep3Container input::placeholder, #etoStep3Container textarea::placeholder { color: rgba(178, 175, 173, 0.5) !important; } /* Keep gold for prices and special elements */ #etoStep3Container .etoPaymentTotalPrice, #etoStep3Container .lx-pay-price, #etoStep3Container .etoPaymentInfoPrice2, #etoStep3Container .etoTotalPriceDisplay { color: var(--lx-gold) !important; } /* ══════════════════════════════════════════════ 34. STEP 3 FORM BOXES — dark unified card Merges all white/light boxes into dark theme ══════════════════════════════════════════════ */ /* Remove white backgrounds from all inner containers in step 3 */ #etoStep3Container .etoOuterContainer, #etoStep3Container .etoInnerContainer { background: transparent !important; border: none !important; box-shadow: none !important; } /* Booking user container (Guest/Login/Register tabs) — dark card */ #etoBookingUserContainer { background: var(--lx-card, #181816) !important; border: 1px solid rgba(201, 168, 76, 0.25) !important; border-radius: 10px !important; padding: 20px !important; margin-bottom: 16px !important; } /* Passenger / luggage / suitcase section wrapper */ #etoStep3Container #etoRoute1PassengersContainer, #etoStep3Container #etoRoute2PassengersContainer, #etoStep3Container .eto-v2-step3-passengers { background: var(--lx-card, #181816) !important; border: 1px solid rgba(201, 168, 76, 0.25) !important; border-radius: 10px !important; padding: 16px 20px !important; margin-bottom: 16px !important; } /* Journey summary / details box */ #etoStep3Container #etoRoute1JourneySummaryContainer, #etoStep3Container #etoRoute2JourneySummaryContainer, #etoStep3Container .etoJourneySummaryBox { background: var(--lx-card, #181816) !important; border: 1px solid rgba(201, 168, 76, 0.25) !important; border-radius: 10px !important; padding: 16px 20px !important; margin-bottom: 16px !important; } /* Comments / requirements */ #etoStep3Container #etoRoute1RequirementsContainer, #etoStep3Container #etoRoute2RequirementsContainer { background: var(--lx-card, #181816) !important; border: 1px solid rgba(201, 168, 76, 0.25) !important; border-radius: 10px !important; padding: 16px 20px !important; margin-bottom: 16px !important; } /* Bootstrap panels/wells inside step 3 — remove white */ #etoStep3Container .panel, #etoStep3Container .panel-body, #etoStep3Container .panel-heading, #etoStep3Container .well { background: transparent !important; border-color: rgba(201, 168, 76, 0.15) !important; box-shadow: none !important; color: #bab9b9 !important; } /* Bootstrap Nav tabs inside step 3 (Guest / Login / Register) */ #etoBookingUserContainer .nav-tabs { border-bottom: 1px solid rgba(201, 168, 76, 0.3) !important; background: transparent !important; } #etoBookingUserContainer .nav-tabs>li>a { background: transparent !important; border-color: transparent !important; color: #bab9b9 !important; font-family: var(--lx-font) !important; font-size: 11px !important; letter-spacing: 1px !important; text-transform: uppercase !important; border-radius: 6px 6px 0 0 !important; transition: color 0.2s ease, background 0.2s ease !important; } #etoBookingUserContainer .nav-tabs>li.active>a, #etoBookingUserContainer .nav-tabs>li>a:hover, #etoBookingUserContainer .nav-tabs>li>a:focus { background: rgba(201, 168, 76, 0.08) !important; border-color: rgba(201, 168, 76, 0.3) rgba(201, 168, 76, 0.3) transparent !important; color: var(--lx-gold, #c9a84c) !important; } #etoBookingUserContainer .tab-content { background: transparent !important; padding-top: 16px !important; } /* Inputs inside booking user container */ #etoBookingUserContainer .form-control, #etoBookingUserContainer input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]), #etoBookingUserContainer select, #etoBookingUserContainer textarea { background: rgba(255, 255, 255, 0.04) !important; color: #bab9b9 !important; border: 1px solid rgba(201, 168, 76, 0.2) !important; border-radius: 6px !important; } #etoBookingUserContainer .form-control::placeholder, #etoBookingUserContainer input::placeholder, #etoBookingUserContainer textarea::placeholder { color: rgba(178, 175, 173, 0.45) !important; } /* Journey summary label colours */ #etoStep3Container .etoJourneyLine label, #etoStep3Container #etoRoute1JourneyDetailsLoader label { color: var(--lx-gold, #c9a84c) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; display: block !important; margin-bottom: 2px !important; } /* Terms checkbox */ #etoStep3Container #etoTermsContainer label, #etoStep3Container #etoTermsContainer a { color: #bab9b9 !important; } #etoStep3Container #etoTermsContainer a:hover { color: var(--lx-gold, #c9a84c) !important; } /* Discount code input */ #etoDiscountCode { background: rgba(255, 255, 255, 0.04) !important; color: #bab9b9 !important; border: 1px solid rgba(201, 168, 76, 0.2) !important; border-radius: 6px !important; } /* Amount dropdowns (passengers, suitcases) */ #etoStep3Container .etoAmountContainer select, #etoStep3Container select.form-control { background: rgba(255, 255, 255, 0.04) !important; color: #bab9b9 !important; border: 1px solid rgba(201, 168, 76, 0.2) !important; border-radius: 6px !important; } /* Textarea for comments */ #etoStep3Container textarea { background: rgba(255, 255, 255, 0.04) !important; color: #bab9b9 !important; border: 1px solid rgba(201, 168, 76, 0.2) !important; border-radius: 6px !important; resize: vertical !important; } /* ══════════════════════════════════════════════ 35. BOOK NOW BUTTON Replaces the direct payment auto-submit ══════════════════════════════════════════════ */ /* Hide ETO's native step 3 buttons — our Book Now button replaces them */ #etoStep3Container #etoSubmitButtonContainer, #etoStep3Container #etoButtonsContainer { display: none !important; } /* Book Now wrapper - hidden until a payment is chosen */ #lx-book-now-wrapper { display: none; } /* Book Now button — identical visual style to native step buttons */ #lx-book-now-btn, #etoStep3Container #lx-book-now-btn, .etoMinimalContainer #lx-book-now-btn { background: linear-gradient(135deg, #b8902e 0%, #e8cc7a 48%, #b8902e 100%) !important; border: none !important; color: #0d0d0d !important; font-family: 'Montserrat', 'Roboto', 'Helvetica Neue', sans-serif !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: 3px !important; text-transform: uppercase !important; height: 52px !important; line-height: 52px !important; border-radius: 6px !important; width: 100% !important; transition: all 0.25s ease !important; box-shadow: 0 4px 24px rgba(201, 168, 76, 0.3) !important; position: relative !important; overflow: hidden !important; cursor: pointer !important; display: block !important; padding: 0 20px !important; margin: 0 !important; } #lx-book-now-btn:hover, #etoStep3Container #lx-book-now-btn:hover, .etoMinimalContainer #lx-book-now-btn:hover { background: linear-gradient(135deg, #9a7828 0%, #c9a84c 50%, #9a7828 100%) !important; box-shadow: 0 6px 32px rgba(201, 168, 76, 0.55) !important; transform: translateY(-1px) !important; color: #0d0d0d !important; } /* Shimmer sweep effect */ #lx-book-now-btn::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 60% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent) !important; transition: left 0.55s ease !important; pointer-events: none !important; } #lx-book-now-btn:hover::before { left: 160% !important; } /* ══════════════════════════════════════════════ 36. THANK YOU PAGE (Step 4) — finish dark theme ══════════════════════════════════════════════ */ /* Main finish page body */ body.eto-finish-page, #etoFinishContainer, #booking-finish, #booking-cancel, #booking-error, .eto-finish-container { background: var(--lx-bg, #0d0d0b) !important; color: #bab9b9 !important; font-family: var(--lx-font, 'Cormorant Garamond', serif) !important; } /* Info boxes */ #etoFinishContainer .info-box, #booking-finish .info-box, #booking-cancel .info-box, .eto-finish-container .info-box { background: var(--lx-card, #181816) !important; border: 1px solid rgba(201, 168, 76, 0.25) !important; border-radius: 10px !important; overflow: hidden !important; margin-bottom: 16px !important; } #etoFinishContainer .info-box.bg-green, #etoFinishContainer .info-box.bg-aqua, #etoFinishContainer .info-box.bg-orange, #booking-finish .info-box.bg-green, #booking-finish .info-box.bg-aqua, #booking-finish .info-box.bg-orange, #booking-cancel .info-box.bg-red, .eto-finish-container .info-box.bg-green, .eto-finish-container .info-box.bg-aqua, .eto-finish-container .info-box.bg-orange { background: var(--lx-card, #181816) !important; } #etoFinishContainer .info-box-icon, #booking-finish .info-box-icon, #booking-cancel .info-box-icon, .eto-finish-container .info-box-icon { background: rgba(201, 168, 76, 0.1) !important; border-right: 1px solid rgba(201, 168, 76, 0.2) !important; } #etoFinishContainer .info-box-icon i, #booking-finish .info-box-icon i, #booking-cancel .info-box-icon i, .eto-finish-container .info-box-icon i { color: var(--lx-gold, #c9a84c) !important; } #etoFinishContainer .info-box-text, #booking-finish .info-box-text, #booking-cancel .info-box-text, .eto-finish-container .info-box-text { color: #ffffff !important; font-weight: 600 !important; } #etoFinishContainer .progress-description, #booking-finish .progress-description, #booking-cancel .progress-description, .eto-finish-container .progress-description { color: #bab9b9 !important; } /* Reference number highlight */ #etoFinishContainer .ref-number, #etoFinishContainer strong, #booking-finish .ref-number, #booking-finish strong, #booking-cancel .ref-number, #booking-cancel strong, .eto-finish-container .ref-number, .eto-finish-container strong { color: var(--lx-gold, #c9a84c) !important; } /* Footer text (confirmation email note) and all paragraphs/spans inside redirect pages */ #etoFinishContainer .footer-text, #etoFinishContainer p, #etoFinishContainer span:not(.btn):not(.badge), #etoFinishContainer li, #etoFinishContainer div:not(.btn), #booking-finish .footer-text, #booking-finish p, #booking-finish span:not(.btn):not(.badge), #booking-finish li, #booking-finish div:not(.btn), #booking-cancel p, #booking-cancel span:not(.btn):not(.badge), #booking-cancel li, #booking-cancel div:not(.btn), #booking-error p, #booking-error div:not(.btn), .eto-finish-container .footer-text, .eto-finish-container p { color: #bab9b9 !important; line-height: 1.7 !important; } /* Links inside redirect/confirmation pages */ #etoFinishContainer a, #booking-finish a, #booking-cancel a, #booking-error a { color: var(--lx-gold, #c9a84c) !important; text-decoration: underline !important; transition: color 0.2s ease !important; } #etoFinishContainer a:hover, #booking-finish a:hover, #booking-cancel a:hover, #booking-error a:hover { color: #ffffff !important; } /* Make Another Booking button */ #etoFinishContainer .btn-primary, #booking-finish .btn-primary, #booking-cancel .btn-primary, .eto-finish-container .btn-primary { background: linear-gradient(135deg, #9a7828 0%, #c9a84c 50%, #9a7828 100%) !important; border: none !important; color: #0a0a08 !important; font-family: var(--lx-font, 'Cormorant Garamond', serif) !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; border-radius: 8px !important; padding: 12px 24px !important; display: inline-block !important; transition: opacity 0.2s ease !important; } #etoFinishContainer .btn-primary:hover, #booking-finish .btn-primary:hover, #booking-cancel .btn-primary:hover, .eto-finish-container .btn-primary:hover { opacity: 0.9 !important; color: #0a0a08 !important; } /* ══════════════════════════════════════════════ 37. STEP 3 LEFT SIDE — unified field block All form sections merged into one dark panel, each input row separated by a subtle divider. ══════════════════════════════════════════════ */ /* Remove individual white boxes from all step-3 sections */ #etoStep3Container .eto-v2-section-box, #etoStep3Container .eto-v2-section-contact-details, #etoStep3Container .eto-v2-section-journey-details, #etoStep3Container .eto-v2-section-options-items, #etoStep3Container .eto-v2-section-comments, #etoBookingUserContainer { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 0 !important; border-radius: 0 !important; } /* Wrap each eto-v2-container-1 / container-2 in a unified card */ #etoStep3Container .eto-v2-container-1, #etoStep3Container .eto-v2-container-2 { background: var(--lx-card, #141414) !important; border: 1px solid rgba(201, 168, 76, 0.2) !important; border-radius: 12px !important; padding: 0 !important; overflow: hidden !important; margin-bottom: 20px !important; } /* ── Section label (Contact Details, Journey Details etc.) ── */ #etoStep3Container .eto-v2-section-label { font-family: var(--lx-font) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; color: var(--lx-gold, #c9a84c) !important; padding: 14px 20px 10px 20px !important; border-bottom: 1px solid rgba(201, 168, 76, 0.12) !important; margin: 0 !important; background: rgba(201, 168, 76, 0.03) !important; } /* ── Every etoOuterContainer field row inside step 3 ── */ #etoStep3Container .etoOuterContainer { padding: 10px 20px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; background: transparent !important; margin: 0 !important; } #etoStep3Container .etoOuterContainer:last-child { border-bottom: none !important; } /* ── Labels inside rows ── */ #etoStep3Container .etoOuterContainer>.etoLabel, #etoStep3Container .etoOuterContainer>label.etoLabel, #etoStep3Container .control-label, #etoStep3Container legend { font-family: var(--lx-font) !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: rgba(201, 168, 76, 0.75) !important; margin-bottom: 4px !important; display: block !important; } /* ── Input / select / textarea inside step 3 rows ── */ #etoStep3Container .etoOuterContainer .form-control, #etoStep3Container .etoOuterContainer input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]), #etoStep3Container .etoOuterContainer select, #etoStep3Container .etoOuterContainer textarea { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(201, 168, 76, 0.18) !important; border-radius: 6px !important; color: #d4d2cf !important; font-family: var(--lx-font) !important; font-size: 13px !important; padding: 9px 12px !important; width: 100% !important; transition: border-color 0.2s ease, background 0.2s ease !important; } #etoStep3Container .etoOuterContainer .form-control:focus, #etoStep3Container .etoOuterContainer input:focus, #etoStep3Container .etoOuterContainer select:focus, #etoStep3Container .etoOuterContainer textarea:focus { background: rgba(201, 168, 76, 0.06) !important; border-color: rgba(201, 168, 76, 0.45) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.08) !important; } /* ── Booking user container (Guest/Login/Register) ── */ #etoBookingUserContainer { background: var(--lx-card, #141414) !important; border: 1px solid rgba(201, 168, 76, 0.2) !important; border-radius: 12px !important; overflow: hidden !important; margin-bottom: 20px !important; padding: 0 !important; } #etoBookingUserContainer .nav-tabs { padding: 0 16px !important; background: rgba(201, 168, 76, 0.03) !important; border-bottom: 1px solid rgba(201, 168, 76, 0.15) !important; } #etoBookingUserContainer .tab-content { padding: 16px 20px !important; } #etoBookingUserContainer .etoOuterContainer { padding: 8px 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; } /* ── Options / passengers section header label ── */ #etoStep3Container .eto-v2-header-label { font-family: var(--lx-font) !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--lx-gold, #c9a84c) !important; padding: 14px 20px 10px 20px !important; border-bottom: 1px solid rgba(201, 168, 76, 0.12) !important; margin: 0 !important; background: rgba(201, 168, 76, 0.03) !important; } /* ── More options toggle ── */ #etoStep3Container .etoMoreOptionToggle, #etoStep3Container .etoChildSeatsToggle { padding: 8px 20px !important; margin: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; } /* ── Price / total display ── */ #etoStep3Container .etoPrice, #etoStep3Container .etoPriceContainer, #etoStep3Container .etoTotalPriceDisplay { font-family: var(--lx-font) !important; font-size: 22px !important; font-weight: 700 !important; color: var(--lx-gold, #c9a84c) !important; padding: 12px 20px !important; letter-spacing: 1px !important; } /* ── Terms checkbox row ── */ #etoStep3Container #etoTermsContainer { padding: 12px 20px !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; } /* ── Discount code row ── */ #etoStep3Container .etoDiscountCodeMaster { padding: 0 20px 10px 20px !important; } /* ── Payment section container ── */ #etoStep3Container .eto-v2-section-payment { background: var(--lx-card, #141414) !important; border: 1px solid rgba(201, 168, 76, 0.2) !important; border-radius: 12px !important; overflow: hidden !important; padding: 0 !important; margin-bottom: 16px !important; } #etoStep3Container .eto-v2-section-payment>.eto-v2-section-label { padding: 14px 20px 10px 20px !important; border-bottom: 1px solid rgba(201, 168, 76, 0.12) !important; background: rgba(201, 168, 76, 0.03) !important; } /* Payment cards inner area */ #etoStep3Container .eto-v2-section-payment .etoPaymentContainer, #etoStep3Container .eto-v2-section-payment .etoPaymentContainerSingle { padding: 10 16px !important; } /* ══════════════════════════════════════════════ 38. STEP 4 — CONFIRMATION PAGE (finish.blade.php) Full luxury dark redesign. Replaces the plain Bootstrap info-box layout with a centred hero card. ══════════════════════════════════════════════ */ /* ── Page wrapper ── */ #booking-finish, #booking-cancel, #booking-error { min-height: 100vh !important; background: var(--lx-bg, #0d0d0d) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 40px 16px !important; font-family: var(--lx-font) !important; } /* ── Loader inside finish pages ── */ #booking-finish #loader, #booking-cancel #loader, #booking-error #loader { background: var(--lx-bg, #0d0d0d) !important; } /* ── info-box: transform into a premium centred card ── */ #booking-finish .info-box, #booking-cancel .info-box, #booking-error .info-box { display: flex !important; flex-direction: column !important; align-items: center !important; background: var(--lx-card, #141414) !important; border: 1px solid rgba(201, 168, 76, 0.25) !important; border-radius: 16px !important; padding: 48px 40px 40px 40px !important; max-width: 540px !important; width: 100% !important; margin-bottom: 20px !important; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(201, 168, 76, 0.08) !important; position: relative !important; overflow: visible !important; text-align: center !important; } /* Gold top accent bar */ #booking-finish .info-box::before, #booking-cancel .info-box::before, #booking-error .info-box::before { content: '' !important; position: absolute !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 60px !important; height: 3px !important; background: var(--lx-gold-grad) !important; border-radius: 0 0 3px 3px !important; } /* ── Icon circle ── */ #booking-finish .info-box-icon, #booking-cancel .info-box-icon, #booking-error .info-box-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 80px !important; height: 80px !important; border-radius: 50% !important; background: rgba(201, 168, 76, 0.1) !important; border: 2px solid rgba(201, 168, 76, 0.35) !important; margin-bottom: 28px !important; flex-shrink: 0 !important; animation: lx-pulse 2.5s ease-in-out infinite !important; } @keyframes lx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.25); } 50% { box-shadow: 0 0 0 14px rgba(201, 168, 76, 0); } } #booking-finish .info-box-icon i, #booking-cancel .info-box-icon i, #booking-error .info-box-icon i { font-size: 38px !important; color: var(--lx-gold, #c9a84c) !important; line-height: 1 !important; } /* ── Main title ── */ #booking-finish .info-box-content, #booking-cancel .info-box-content, #booking-error .info-box-content { width: 100% !important; background: transparent !important; padding: 0 !important; } #booking-finish .info-box-text, #booking-cancel .info-box-text, #booking-error .info-box-text { display: block !important; font-family: var(--lx-font) !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; color: #ffffff !important; line-height: 1.5 !important; margin-bottom: 16px !important; text-transform: none !important; } /* Reference number pill */ #booking-finish .ref-number, #booking-cancel .ref-number { display: inline-block !important; background: rgba(201, 168, 76, 0.12) !important; border: 1px solid rgba(201, 168, 76, 0.4) !important; border-radius: 30px !important; padding: 4px 14px !important; font-size: 15px !important; font-weight: 700 !important; color: var(--lx-gold, #c9a84c) !important; letter-spacing: 2px !important; margin: 0 3px !important; } /* ── Subtitle / description ── */ #booking-finish .progress-description, #booking-cancel .progress-description, #booking-error .progress-description { font-family: var(--lx-font) !important; font-size: 13px !important; color: rgba(178, 175, 173, 0.85) !important; line-height: 1.8 !important; margin-top: 12px !important; } /* ── Divider below icon ── */ #booking-finish .info-box-icon+.info-box-content::before, #booking-cancel .info-box-icon+.info-box-content::before { content: '' !important; display: block !important; width: 40px !important; height: 1px !important; background: rgba(201, 168, 76, 0.3) !important; margin: 0 auto 20px auto !important; } /* ── Footer text (email note) ── */ #booking-finish .footer-text, #booking-cancel .footer-text { max-width: 540px !important; width: 100% !important; font-family: var(--lx-font) !important; font-size: 12px !important; color: rgba(178, 175, 173, 0.65) !important; text-align: center !important; line-height: 1.7 !important; margin-top: 6px !important; margin-bottom: 24px !important; } /* ── Create booking button ── */ #booking-finish .create-button, #booking-cancel .create-button { margin-top: 4px !important; } #booking-finish .create-button .btn-primary, #booking-cancel .create-button .btn-primary { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: var(--lx-gold-grad) !important; border: none !important; color: #0a0a08 !important; font-family: var(--lx-font) !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: 3px !important; text-transform: uppercase !important; padding: 14px 36px !important; border-radius: 8px !important; box-shadow: 0 4px 24px rgba(201, 168, 76, 0.3) !important; transition: all 0.25s ease !important; position: relative !important; overflow: hidden !important; } #booking-finish .create-button .btn-primary::after, #booking-cancel .create-button .btn-primary::after { content: ' →' !important; } #booking-finish .create-button .btn-primary:hover, #booking-cancel .create-button .btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 36px rgba(201, 168, 76, 0.5) !important; opacity: 1 !important; color: #0a0a08 !important; } /* Branding at the bottom */ #booking-finish .footer-branding, #booking-cancel .footer-branding { margin-top: 32px !important; opacity: 0.4 !important; } /* ── Cancel page (red accent) ── */ #booking-cancel .info-box { border-color: rgba(220, 80, 80, 0.25) !important; } #booking-cancel .info-box::before { background: linear-gradient(135deg, #8b2020 0%, #dc5050 100%) !important; } #booking-cancel .info-box-icon { background: rgba(220, 80, 80, 0.1) !important; border-color: rgba(220, 80, 80, 0.35) !important; animation: lx-pulse-red 2.5s ease-in-out infinite !important; } @keyframes lx-pulse-red { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 80, 80, 0.25); } 50% { box-shadow: 0 0 0 14px rgba(220, 80, 80, 0); } } #booking-cancel .info-box-icon i { color: #dc5050 !important; } /* ── Error page ── */ #booking-error .info-box { border-color: rgba(220, 80, 80, 0.25) !important; } /* ══════════════════════════════════════════════ 39. STEP 3 — bab9b9 text color global fix Ensures no remaining #CCC from Bootstrap shows ══════════════════════════════════════════════ */ /* Any remaining #CCC / light grey text inside ETO */ #etoCompleteContainer *:not(button):not(.btn):not(input):not(select):not(textarea) { color: inherit; } /* Specifically target any Bootstrap default text that may be grey */ #etoStep3Container .help-block, #etoStep3Container .text-muted, #etoStep3Container small.help-block { color: #bab9b9 !important; } /* phone flag dropdown border */ #etoStep3Container .iti__flag-container, #etoStep3Container .intl-tel-input .flag-container { border-color: rgba(201, 168, 76, 0.18) !important; } .iti__flag-container { display: none !important; } /* Step 3 checkbox custom styling */ #etoStep3Container .checkbox .cr, #etoStep3Container .radio .cr { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(201, 168, 76, 0.25) !important; } #etoStep3Container .checkbox label input[type="checkbox"]:checked+.cr, #etoStep3Container .radio label input[type="radio"]:checked+.cr { background: var(--lx-gold) !important; border-color: var(--lx-gold-dark) !important; } #etoStep3Container .checkbox .cr .cr-icon, #etoStep3Container .radio .cr .cr-icon { color: #0d0d0d !important; } /* ══════════════════════════════════════════════ 40. VEHICLE IMAGES — step 2 v2 layout Force the background-image div to be crisp at the actual display size (no upscale blur) ══════════════════════════════════════════════ */ /* v2 layout: background-image container */ .eto-v2-vehicle-img-bg { background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; width: 100% !important; height: 160px !important; image-rendering: -webkit-optimize-contrast !important; image-rendering: crisp-edges !important; } /* Classic layout: background-image container */ .etoVehicleImageBG { background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; image-rendering: -webkit-optimize-contrast !important; image-rendering: crisp-edges !important; } /* tag variant: strict native-size rendering */ .etoVehicleImage img, .eto-v2-vehicle-img img { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 400px !important; object-fit: contain !important; image-rendering: -webkit-optimize-contrast !important; image-rendering: crisp-edges !important; display: block !important; margin: 0 auto !important; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5)) !important; } /* ================================================================ CUSTOM OVERRIDES FOR LUXURY LIMO V2 ================================================================ */ :root { --lx-grey: #b2afad !important; --lx-grey-light: #b2afad !important; --lx-muted: #b2afad !important; } #etoCompleteContainer, #etoMinimalContainer, body { color: #b2afad !important; } #etoCompleteContainer p, #etoCompleteContainer span:not(.btn):not(.badge), #etoCompleteContainer li, #etoCompleteContainer div:not(.btn), #etoStep3Container label, #etoStep3Container .etoLabel, #etoStep3Container .control-label, #etoStep3Container legend, #etoStep3Container small, #etoStep3Container p, #etoStep3Container .form-control, #etoStep3Container input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]), #etoStep3Container select, #etoStep3Container textarea { color: #b2afad !important; } #etoQuoteStep1Button span.eto-v2-button-label { color: black !important; } /* Make Book Now button wrapper visible by default on step 3 */ #lx-book-now-wrapper { display: block !important; } /* Gold styling for Book Now button to match standard premium buttons */ #lx-book-now-btn, #etoStep3Container #lx-book-now-btn, .etoMinimalContainer #lx-book-now-btn { background: var(--lx-gold-grad) !important; border: none !important; color: #0d0d0d !important; font-family: var(--lx-font) !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: 3px !important; text-transform: uppercase !important; height: 52px !important; line-height: normal !important; border-radius: var(--lx-radius) !important; width: 100% !important; transition: var(--lx-ease) !important; box-shadow: 0 4px 24px rgba(201, 168, 76, 0.3) !important; position: relative !important; overflow: hidden !important; cursor: pointer !important; display: block !important; padding: 0 20px !important; margin: 0 !important; } /* Arrow after Book Now button label */ #lx-book-now-btn .eto-v2-button-label::after, #etoStep3Container #lx-book-now-btn .eto-v2-button-label::after { content: ' \2192' !important; } /* Shimmer sweep effect on Book Now hover */ #lx-book-now-btn:hover, #etoStep3Container #lx-book-now-btn:hover, .etoMinimalContainer #lx-book-now-btn:hover { background: linear-gradient(135deg, #9a7828 0%, #c9a84c 50%, #9a7828 100%) !important; box-shadow: 0 6px 32px rgba(201, 168, 76, 0.55) !important; transform: translateY(-1px) !important; color: #0d0d0d !important; } .eto-v2-button-label { color: #0d0d0d !important; } .txt-dark .cr-val { color: #0a0a08; } /* Ensure button span text is dark/visible on gold action buttons */ #etoStep1Container .eto-v2-button span, #etoStep2Container .eto-v2-button span, #etoStep3Container .eto-v2-button span, #lx-book-now-btn span, #lx-book-now-btn .eto-v2-button-label { color: #0d0d0d !important; } /* ================================================================ 17. STEP 4 - CONFIRMATION PAGE (FINISH) ================================================================ */ /* Hero section wrapper with premium leather seats background */ .lx-finish-hero { background: linear-gradient(180deg, rgba(13, 13, 13, 0.5) 0%, rgba(13, 13, 13, 0.95) 100%), url('https://images.unsplash.com/photo-1549399542-7e3f8b79c341?auto=format&fit=crop&q=80&w=1200') no-repeat center center; background-size: cover; padding: 60px 20px 40px 20px; text-align: center; } /* Success checkmark badge */ .lx-finish-check-circle { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(201, 168, 76, 0.1); border: 2px solid var(--lx-gold); margin-bottom: 24px; animation: lx-pulse 2.5s ease-in-out infinite; } /* Elegant Georgian title */ .lx-finish-title { font-family: Georgia, 'Times New Roman', serif !important; font-size: 28px !important; font-weight: 700 !important; color: var(--lx-white) !important; line-height: 1.35 !important; margin: 0 0 12px 0 !important; letter-spacing: 0.5px !important; } .lx-finish-subtitle { font-size: 14px !important; color: #bab9b9 !important; margin: 0 0 24px 0 !important; font-weight: 500 !important; letter-spacing: 0.3px !important; } /* Booking number highlighted badge */ .lx-finish-ref-badge { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: rgba(13, 13, 13, 0.7); border: 1px solid var(--lx-border-gold); border-radius: 6px; padding: 12px 24px; margin-bottom: 20px; max-width: 100%; } .lx-finish-ref-badge svg { flex-shrink: 0; } .lx-finish-ref-label { font-size: 12px !important; color: var(--lx-white) !important; letter-spacing: 0.5px !important; font-weight: 500 !important; } .lx-finish-ref-num { font-size: 15px !important; color: var(--lx-gold) !important; font-weight: 700 !important; letter-spacing: 1px !important; } .lx-finish-email-note { font-size: 13px !important; color: #bab9b9 !important; margin: 8px 0 0 0 !important; line-height: 1.6 !important; font-weight: 500 !important; } /* 6-Block Details Card in White (mockup style) */ .lx-finish-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; overflow: hidden !important; margin-bottom: 24px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; } .lx-finish-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; } .lx-finish-item { display: flex !important; align-items: flex-start !important; gap: 16px !important; padding: 24px !important; background: #ffffff !important; } /* Separator borders for responsive 2-column grid */ @media (min-width: 768px) { .lx-finish-item:nth-child(odd) { border-right: 1px solid #e2e8f0 !important; } .lx-finish-item:nth-child(1), .lx-finish-item:nth-child(2), .lx-finish-item:nth-child(3), .lx-finish-item:nth-child(4) { border-bottom: 1px solid #e2e8f0 !important; } } @media (max-width: 767px) { .lx-finish-grid { grid-template-columns: 1fr !important; } .lx-finish-item:not(:last-child) { border-bottom: 1px solid #e2e8f0 !important; } .lx-finish-item { padding: 20px 16px !important; } } .lx-finish-item-icon { margin-top: 2px !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .lx-finish-item-content { flex: 1 !important; } .lx-finish-item-label { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: #718096 !important; margin-bottom: 4px !important; } .lx-finish-item-value { font-size: 14px !important; color: #1a202c !important; font-weight: 600 !important; line-height: 1.4 !important; display: block !important; } .lx-finish-total-val { font-size: 18px !important; color: var(--lx-gold) !important; font-weight: 700 !important; } /* ══════════════════════════════════════════════════════ Passengers / Suitcases / Carry-on — Luxury Dark Theme Matches the Step 3 form control glass-dark style ══════════════════════════════════════════════════════ */ /* Outer tile: dark glass card with gold border */ .eto-v2-preferred-passengers, .eto-v2-preferred-luggage, .eto-v2-preferred-hand_luggage { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(201, 168, 76, 0.25) !important; border-radius: var(--lx-radius, 6px) !important; color: #d4d2cf !important; font-family: var(--lx-font) !important; transition: border-color 0.2s ease, background 0.2s ease !important; } .eto-v2-preferred-passengers:hover, .eto-v2-preferred-luggage:hover, .eto-v2-preferred-hand_luggage:hover { background: rgba(201, 168, 76, 0.06) !important; border-color: rgba(201, 168, 76, 0.45) !important; } /* Label text above each tile */ .eto-v2-preferred-passengers>span, .eto-v2-preferred-luggage>span, .eto-v2-preferred-hand_luggage>span, .eto-v2-preferred-passengers>label, .eto-v2-preferred-luggage>label, .eto-v2-preferred-hand_luggage>label { color: var(--lx-grey, #888) !important; font-size: 11px !important; letter-spacing: 1px !important; text-transform: uppercase !important; } /* Select dropdowns inside the tiles */ .eto-v2-preferred-passengers select, .eto-v2-preferred-luggage select, .eto-v2-preferred-hand_luggage select { background: transparent !important; color: #d4d2cf !important; border: none !important; font-family: var(--lx-font) !important; font-size: 14px !important; font-weight: 600 !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; cursor: pointer !important; } .eto-v2-preferred-passengers select:focus, .eto-v2-preferred-luggage select:focus, .eto-v2-preferred-hand_luggage select:focus { background: rgba(201, 168, 76, 0.06) !important; border-color: rgba(201, 168, 76, 0.45) !important; box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.08) !important; outline: none !important; } /* Ion icons — gold accent */ .eto-v2-preferred-passengers i, .eto-v2-preferred-luggage i, .eto-v2-preferred-hand_luggage i { color: var(--lx-gold, #c9a84c) !important; opacity: 0.85; } #etoRoute1LuggageContainer { border: 1px solid rgba(201, 168, 76, 0.18) !important; padding: 16px 20px !important; border-radius: 6px !important; } #etoRoute1HandLuggageContainer { border: 1px solid rgba(201, 168, 76, 0.18) !important; padding: 16px 20px !important; border-radius: 6px !important; } #etoRoute1PassengersContainer { border: none !important; background-color: transparent !important; } /* ══════════════════════════════════════════════════════════════ CUSTOMER PORTAL — Luxury Dark Gold Theme Scoped to: body.customer-panel (/customer page) Overrides: customer.css white/light defaults ══════════════════════════════════════════════════════════════ */ /* ── 1. PAGE BODY ── */ body.customer-panel { background: var(--lx-bg) !important; font-family: var(--lx-font) !important; color: var(--lx-white) !important; } /* ── 2. CONTENT WRAPPER (customer.css L342 has background:#fff) ── */ body.customer-panel .content-wrapper, body.customer-panel .right-side { background-color: var(--lx-bg) !important; } /* ── 3. MAIN CONTAINER ── */ body.customer-panel #etoMainContainer { background: transparent !important; font-family: var(--lx-font) !important; } /* ── 4. HEADINGS ── */ body.customer-panel h3 { color: var(--lx-white) !important; font-family: var(--lx-font) !important; font-size: 20px !important; font-weight: 600 !important; letter-spacing: 3px !important; text-transform: uppercase !important; margin-bottom: 28px !important; position: relative !important; padding-bottom: 14px !important; } body.customer-panel h3::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 48px !important; height: 2px !important; background: var(--lx-gold-grad) !important; border-radius: 2px !important; } /* ── 5. INPUT GROUP (customer.css L57 sets border:#d2d6de white) ── */ body.customer-panel .input-group { background: var(--lx-input-bg) !important; border: 1px solid var(--lx-border) !important; border-radius: var(--lx-radius) !important; transition: var(--lx-ease) !important; overflow: hidden !important; } body.customer-panel .input-group:hover, body.customer-panel .input-group:focus-within, body.customer-panel .input-group.focus { border-color: var(--lx-border-gold) !important; background: var(--lx-input-hover) !important; } /* ── 6. INPUT ADDON ICON ── */ body.customer-panel .input-group-addon { background: transparent !important; border: none !important; color: var(--lx-gold) !important; font-size: 22px !important; height: 50px !important; width: 48px !important; text-align: center !important; line-height: 50px !important; padding: 0 !important; } body.customer-panel .input-group-addon span { display: inline-block !important; width: auto !important; } /* ── 7. FORM CONTROL (inputs) ── */ body.customer-panel .form-control { background: transparent !important; border: none !important; color: var(--lx-white) !important; font-family: var(--lx-font) !important; font-size: 13px !important; height: 50px !important; box-shadow: none !important; } body.customer-panel .form-control:focus { background: transparent !important; box-shadow: none !important; border: none !important; color: var(--lx-white) !important; } body.customer-panel .form-control::placeholder { color: var(--lx-grey) !important; } body.customer-panel .form-control::-webkit-input-placeholder { color: var(--lx-grey) !important; } body.customer-panel .form-control::-moz-placeholder { color: var(--lx-grey) !important; } body.customer-panel .form-control:-ms-input-placeholder { color: var(--lx-grey) !important; } /* ── 8. RADIO/CHECKBOX .cr backgrounds (customer.css L118 = #fff) ── */ body.customer-panel .checkbox .cr, body.customer-panel .radio .cr { background: var(--lx-input-bg) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } body.customer-panel .checkbox .cr:hover, body.customer-panel .radio .cr:hover { border-color: var(--lx-gold) !important; } body.customer-panel .radio label input[type="radio"]:checked+.cr { background: var(--lx-gold) !important; border-color: var(--lx-gold-dark) !important; color: #0d0d0d !important; } body.customer-panel .checkbox label input[type="checkbox"]:checked+.cr { background: var(--lx-gold) !important; border-color: var(--lx-gold-dark) !important; color: #0d0d0d !important; } body.customer-panel .radio label, body.customer-panel .checkbox label { color: var(--lx-grey-light) !important; font-family: var(--lx-font) !important; font-size: 13px !important; font-weight: 500 !important; } /* ── 9. MEMBER BENEFITS BOX (customer.css L183 = #fffbf6 cream) ── */ body.customer-panel .eto-v2-section-benefits { background: var(--lx-card2) !important; border: 1px solid var(--lx-border-gold) !important; color: var(--lx-grey-light) !important; border-radius: var(--lx-radius) !important; } body.customer-panel .eto-v2-benefits-list ul li { color: var(--lx-grey-light) !important; font-family: var(--lx-font) !important; } body.customer-panel .eto-v2-benefits-list ul li::before { color: var(--lx-gold) !important; } body.customer-panel .eto-v2-section-benefits .eto-v2-section-label { color: var(--lx-white) !important; font-family: var(--lx-font) !important; letter-spacing: 1px !important; } /* ── 10. FORM MASTER LABEL (customer.css L477 = background:#fff) ── */ body.customer-panel .form-master .form-group:not(.placeholder-disabled) label { background: var(--lx-input-bg) !important; color: var(--lx-gold) !important; } /* ── 11. PRIMARY BUTTON ── */ body.customer-panel .btn-primary, body.customer-panel input[type="submit"].btn-primary, body.customer-panel #registerButton, body.customer-panel #loginButton.btn-primary, body.customer-panel #resetButton, body.customer-panel #saveButton { background: var(--lx-gold-grad) !important; border: none !important; color: #0d0d0d !important; font-family: var(--lx-font) !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: 2px !important; text-transform: uppercase !important; height: 50px !important; border-radius: var(--lx-radius) !important; transition: var(--lx-ease) !important; box-shadow: 0 4px 20px rgba(201, 168, 76, 0.3) !important; } body.customer-panel .btn-primary:hover, body.customer-panel input[type="submit"].btn-primary:hover, body.customer-panel #registerButton:hover, body.customer-panel #resetButton:hover, body.customer-panel #saveButton:hover { background: linear-gradient(135deg, #9a7828 0%, #c9a84c 50%, #9a7828 100%) !important; box-shadow: 0 6px 28px rgba(201, 168, 76, 0.5) !important; transform: translateY(-1px) !important; color: #0d0d0d !important; } /* ── 12. LINK BUTTONS ── */ body.customer-panel .btn-link, body.customer-panel a.btn-link { color: var(--lx-gold) !important; font-family: var(--lx-font) !important; font-weight: 500 !important; text-decoration: none !important; } body.customer-panel .btn-link:hover, body.customer-panel a.btn-link:hover { color: var(--lx-gold-light) !important; text-decoration: underline !important; } /* ── 13. GENERAL LINKS & TEXT ── */ body.customer-panel a { color: var(--lx-gold) !important; transition: var(--lx-ease) !important; } body.customer-panel a:hover { color: var(--lx-gold-light) !important; } body.customer-panel p, body.customer-panel label { color: var(--lx-grey-light) !important; font-family: var(--lx-font) !important; } /* ── 14. TERMS LINK ── */ body.customer-panel .checkbox a { color: var(--lx-gold) !important; } /* ── 15. SIDEBAR ── */ body.customer-panel .main-sidebar, body.customer-panel .sidebar { background: var(--lx-card) !important; border-right: 1px solid var(--lx-border) !important; } body.customer-panel .sidebar-menu>li>a { color: var(--lx-grey-light) !important; font-family: var(--lx-font) !important; font-size: 13px !important; transition: var(--lx-ease) !important; border-left: 3px solid transparent !important; } body.customer-panel .sidebar-menu>li>a:hover, body.customer-panel .sidebar-menu>li.active>a { color: var(--lx-gold) !important; background: rgba(201, 168, 76, 0.07) !important; border-left-color: var(--lx-gold) !important; } body.customer-panel .sidebar-menu>li>a>.fa, body.customer-panel .sidebar-menu>li>a>[class^="ion-"] { color: var(--lx-grey) !important; } body.customer-panel .sidebar-menu>li.active>a>.fa, body.customer-panel .sidebar-menu>li:hover>a>.fa, body.customer-panel .sidebar-menu>li.active>a>[class^="ion-"], body.customer-panel .sidebar-menu>li:hover>a>[class^="ion-"] { color: var(--lx-gold) !important; } /* ── 16. NAVBAR ── */ body.customer-panel .main-header, body.customer-panel .navbar.navbar-static-top { background: var(--lx-card) !important; border-bottom: 1px solid var(--lx-border) !important; box-shadow: none !important; } body.customer-panel .navbar-brand, body.customer-panel .logo { background: var(--lx-card) !important; border-bottom: 1px solid var(--lx-border) !important; color: var(--lx-gold) !important; font-family: var(--lx-font) !important; font-weight: 700 !important; } body.customer-panel .navbar-custom-menu .nav>li>a { color: var(--lx-grey-light) !important; font-family: var(--lx-font) !important; } body.customer-panel .navbar-custom-menu .nav>li>a:hover { color: var(--lx-gold) !important; background: transparent !important; } /* ── 17. ALERTS/MESSAGES ── */ body.customer-panel .alert { background: var(--lx-card2) !important; border: 1px solid var(--lx-border-gold) !important; border-radius: var(--lx-radius) !important; color: var(--lx-white) !important; font-family: var(--lx-font) !important; } body.customer-panel .alert-danger { border-color: rgba(220, 60, 60, 0.5) !important; background: rgba(180, 30, 30, 0.2) !important; color: #ff8080 !important; } body.customer-panel .alert-success { border-color: rgba(201, 168, 76, 0.4) !important; background: rgba(201, 168, 76, 0.1) !important; color: var(--lx-gold-light) !important; } body.customer-panel .alert-warning { border-color: rgba(201, 168, 76, 0.3) !important; background: rgba(201, 168, 76, 0.08) !important; color: var(--lx-gold) !important; } /* ── 18. LANGUAGE SWITCHER ── */ body.customer-panel .language-switcher-customer .btn, body.customer-panel .language-switcher .btn { background: transparent !important; border: 1px solid var(--lx-border) !important; color: var(--lx-grey-light) !important; border-radius: var(--lx-radius) !important; font-family: var(--lx-font) !important; font-size: 11px !important; transition: var(--lx-ease) !important; } body.customer-panel .language-switcher-customer .btn:hover, body.customer-panel .language-switcher .btn:hover { border-color: var(--lx-gold) !important; color: var(--lx-gold) !important; } body.customer-panel .language-switcher-customer .dropdown-menu, body.customer-panel .language-switcher .dropdown-menu { background: var(--lx-card2) !important; border: 1px solid var(--lx-border-gold) !important; border-radius: var(--lx-radius) !important; z-index: 999999 !important; } body.customer-panel .language-switcher-customer .dropdown-menu>li>a, body.customer-panel .language-switcher .dropdown-menu>li>a { color: var(--lx-grey-light) !important; font-family: var(--lx-font) !important; font-size: 12px !important; } body.customer-panel .language-switcher-customer .dropdown-menu>li>a:hover, body.customer-panel .language-switcher .dropdown-menu>li>a:hover { background: rgba(201, 168, 76, 0.12) !important; color: var(--lx-gold) !important; } /* ── 19. LOADING SPINNER ── */ body.customer-panel .loadingContainer { background: var(--lx-bg) !important; } body.customer-panel .loadingProgress { color: var(--lx-gold) !important; } body.customer-panel .loadingText { color: var(--lx-grey) !important; font-family: var(--lx-font) !important; font-size: 12px !important; letter-spacing: 2px !important; text-transform: uppercase !important; } /* ── 20. FORM VALIDATION FEEDBACK ── */ body.customer-panel .help-block { color: #ff8080 !important; font-family: var(--lx-font) !important; font-size: 11px !important; } body.customer-panel .has-error .input-group { border-color: rgba(220, 60, 60, 0.5) !important; } body.customer-panel .has-success .form-control { border-color: transparent !important; box-shadow: none !important; } body.customer-panel .form-control-feedback.ion-ios-checkmark-empty { color: var(--lx-gold) !important; } body.customer-panel .form-control-feedback.ion-ios-close-empty { color: #ff6060 !important; } /* ── 21. PANEL NAV TABS ── */ body.customer-panel #etoPanelNavigationMaster { background: var(--lx-card) !important; border-bottom: 1px solid var(--lx-border) !important; } body.customer-panel #etoPanelNavigationMaster .nav>li>a { color: var(--lx-grey) !important; font-family: var(--lx-font) !important; font-size: 12px !important; letter-spacing: 1px !important; text-transform: uppercase !important; border-bottom: 2px solid transparent !important; background: transparent !important; } body.customer-panel #etoPanelNavigationMaster .nav>li.active>a, body.customer-panel #etoPanelNavigationMaster .nav>li>a:hover { color: var(--lx-gold) !important; border-bottom-color: var(--lx-gold) !important; background: transparent !important; } /* ── 22. TABLE (booking history) ── */ body.customer-panel table { font-family: var(--lx-font) !important; } body.customer-panel table thead tr th { background: var(--lx-card2) !important; color: var(--lx-gold) !important; border-bottom: 1px solid var(--lx-border-gold) !important; font-weight: 600 !important; letter-spacing: 1px !important; font-size: 11px !important; text-transform: uppercase !important; } body.customer-panel table tbody tr td { background: var(--lx-card) !important; color: var(--lx-grey-light) !important; border-bottom: 1px solid var(--lx-border) !important; } body.customer-panel table tbody tr:hover td { background: var(--lx-card2) !important; color: var(--lx-white) !important; } /* ── 23. SELECT DROPDOWNS ── */ body.customer-panel select.form-control { background: var(--lx-input-bg) !important; color: var(--lx-white) !important; border: 1px solid var(--lx-border) !important; border-radius: var(--lx-radius) !important; font-family: var(--lx-font) !important; } body.customer-panel select.form-control option { background: #1a1a1a !important; color: var(--lx-white) !important; } /* ── 24. USER PANEL (logged-in sidebar header) ── */ body.customer-panel .user-panel { background: var(--lx-card2) !important; border-bottom: 1px solid var(--lx-border) !important; } body.customer-panel .user-panel>.info>p { color: var(--lx-white) !important; font-family: var(--lx-font) !important; } body.customer-panel .user-panel>.info>a { color: var(--lx-grey) !important; } body.customer-panel .user-panel>.info>a:hover { color: var(--lx-gold) !important; } /* ── 25. FOOTER / BRANDING ── */ body.customer-panel .copyright-box, body.customer-panel .main-footer { background: var(--lx-card) !important; border-top: 1px solid var(--lx-border) !important; color: var(--lx-grey) !important; font-family: var(--lx-font) !important; font-size: 11px !important; } /* ── 26. SCROLLBAR ── */ body.customer-panel ::-webkit-scrollbar { width: 5px !important; height: 5px !important; } body.customer-panel ::-webkit-scrollbar-track { background: var(--lx-bg) !important; } body.customer-panel ::-webkit-scrollbar-thumb { background: var(--lx-gold-dark) !important; border-radius: 3px !important; } /* ══════════════════════════════════════════════════════════════ CUSTOMER PORTAL — LAYOUT & RESPONSIVE FIXES ══════════════════════════════════════════════════════════════ */ /* ── OVERRIDE customer.css fixed widths (L38, L74) ── */ body.customer-panel .form-control { width: 100% !important; max-width: 100% !important; } /* ── MAKE INPUT GROUPS FULL WIDTH ── */ body.customer-panel .input-group { width: 100% !important; display: flex !important; align-items: center !important; } body.customer-panel .input-group .form-control { flex: 1 1 auto !important; width: 1% !important; /* flex override — becomes 100% via flex-grow */ } /* ── CENTER THE LOGIN/REGISTER CARD ── */ body.customer-panel #etoMainContainer { display: block !important; width: 100% !important; padding: 0 !important; box-sizing: border-box !important; } body.customer-panel #etoMainContainer:not(:has(.wrapper)) { display: flex !important; justify-content: center !important; align-items: flex-start !important; min-height: 100vh !important; padding: 40px 20px !important; } body.customer-panel #etoMainContainer>.row { width: 100% !important; max-width: 680px !important; margin: 0 auto !important; } /* The column wrapping the form — full width on mobile, centered on larger */ body.customer-panel #etoMainContainer>.row>[class*="col-"] { width: 100% !important; float: none !important; margin-left: 0 !important; padding: 0 !important; } /* ── FORM CARD STYLE ── */ body.customer-panel #etoLoginForm, body.customer-panel #etoRegisterForm, body.customer-panel #etoPasswordForm { background: var(--lx-card) !important; border: 1px solid var(--lx-border) !important; border-radius: 10px !important; padding: 40px !important; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6) !important; width: 100% !important; } /* ── FORM GROUPS spacing ── */ body.customer-panel .form-group { margin-bottom: 16px !important; } /* ── INPUT GROUP full width inside form-group ── */ body.customer-panel .form-group .input-group { width: 100% !important; display: table !important; } body.customer-panel .form-group .input-group .input-group-addon { display: table-cell !important; width: 52px !important; vertical-align: middle !important; } body.customer-panel .form-group .input-group .form-control { display: table-cell !important; width: 100% !important; } /* ── INNER FORM ROWS — preserve Bootstrap gutters ── */ /* Only reset margins on the outermost row inside the main container */ body.customer-panel #etoMainContainer>.row { margin-left: 0 !important; margin-right: 0 !important; } /* Inner Bootstrap grid rows (First/Last name, Password/Confirm) keep normal gutters */ body.customer-panel #etoLoginForm>.row, body.customer-panel #etoRegisterForm>.row, body.customer-panel #etoPasswordForm>.row { margin-left: -15px; margin-right: -15px; } /* Inner Bootstrap columns (First/Last name, Password cols) keep proper Bootstrap widths */ body.customer-panel #etoLoginForm>.row>[class*="col-"], body.customer-panel #etoRegisterForm>.row>[class*="col-"], body.customer-panel #etoPasswordForm>.row>[class*="col-"] { padding-left: 15px !important; padding-right: 15px !important; /* DO NOT force width here — let Bootstrap handle the col-sm-6 etc */ } /* ── BUTTONS WRAPPER — flex row for action buttons only ── */ body.customer-panel .eto-form-actions { display: flex !important; align-items: center !important; gap: 16px !important; flex-wrap: wrap !important; margin-top: 8px !important; } /* Submit buttons */ body.customer-panel #loginButton[type="submit"], body.customer-panel #resetButton, body.customer-panel #registerButton[type="submit"] { min-width: 160px !important; height: 48px !important; padding: 0 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } #registerButton { margin-left: 12px; } /* Link buttons (Register / Login / Lost Password) — sit beside the submit button */ body.customer-panel #registerButton.btn-link, body.customer-panel #passwordButton.btn-link, body.customer-panel #loginButton.btn-link { height: auto !important; padding: 14px 18px !important; line-height: 1.5 !important; font-size: 13px !important; display: inline-block !important; vertical-align: middle !important; } /* ── MEMBER BENEFITS BOX ── */ body.customer-panel .eto-v2-section-benefits { margin-top: 28px !important; padding: 24px !important; border-radius: 8px !important; } body.customer-panel .eto-v2-benefits-list ul { display: flex !important; flex-wrap: wrap !important; gap: 8px 0 !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } body.customer-panel .eto-v2-benefits-list ul li { width: 50% !important; float: none !important; font-size: 13px !important; padding-left: 28px !important; margin: 0 0 6px 0 !important; position: relative !important; } body.customer-panel .eto-v2-benefits-list ul li::before { font-size: 20px !important; line-height: 16px !important; top: 0 !important; left: 0 !important; } /* ── RADIO ROW (Private / Company) ── */ body.customer-panel .eto-v2-section-benefits+*, body.customer-panel .radio { margin-bottom: 12px !important; } body.customer-panel div[style*="margin:10px"] { display: flex !important; gap: 24px !important; align-items: center !important; margin: 12px 0 16px 0 !important; } body.customer-panel div[style*="float:left"] { float: none !important; margin: 0 !important; } /* ── CHECKBOX TERMS ROW ── */ body.customer-panel .form-group-terms { margin: 16px 0 !important; } /* ── BILLING ADDRESS SECTION ── */ body.customer-panel .eto-billing-address-container { margin-top: 28px !important; margin-bottom: 8px !important; border-top: 1px solid var(--lx-border-gold) !important; padding-top: 24px !important; } body.customer-panel .eto-billing-address-title { color: var(--lx-gold) !important; font-family: var(--lx-font) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 3px !important; text-transform: uppercase !important; margin: 0 0 20px 0 !important; padding-bottom: 0 !important; } /* Override h4 ::after gold line from h3 rule */ body.customer-panel .eto-billing-address-title::after { display: none !important; } body.customer-panel .eto-billing-address-container .row { margin-left: -10px !important; margin-right: -10px !important; } body.customer-panel .eto-billing-address-container .row>[class*="col-"] { padding-left: 10px !important; padding-right: 10px !important; } /* ── RESPONSIVE: Mobile (< 576px) ── */ @media (max-width: 575px) { body.customer-panel #etoMainContainer { padding: 20px 12px !important; align-items: flex-start !important; } body.customer-panel #etoLoginForm, body.customer-panel #etoRegisterForm, body.customer-panel #etoPasswordForm { padding: 24px 18px !important; border-radius: 8px !important; } body.customer-panel h3 { font-size: 16px !important; letter-spacing: 2px !important; } /* Stack inner 2-col rows on mobile */ body.customer-panel #etoRegisterForm>.row>.col-xs-12, body.customer-panel .eto-billing-address-container .row>.col-xs-12 { width: 100% !important; float: none !important; } /* Stack action buttons vertically on mobile */ body.customer-panel .eto-form-actions { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } body.customer-panel #loginButton[type="submit"], body.customer-panel #resetButton, body.customer-panel #registerButton[type="submit"] { width: 100% !important; min-width: unset !important; } #registerButton { margin-left: 0; width: 100%; } #passwordButton { width: 100%; } /* Benefits single column on mobile */ body.customer-panel .eto-v2-benefits-list ul li { width: 100% !important; } } /* ── RESPONSIVE: Tablet (576–767px) ── */ @media (min-width: 576px) and (max-width: 767px) { body.customer-panel #etoMainContainer { padding: 30px 24px !important; } body.customer-panel #etoLoginForm, body.customer-panel #etoRegisterForm, body.customer-panel #etoPasswordForm { padding: 32px 28px !important; } } /* ══════════════════════════════════════════════════════════════ CUSTOMER PROFILE & EDIT SETTINGS REDESIGN ══════════════════════════════════════════════════════════════ */ /* ── 1. PREVENT INFINITE HEIGHT LOOP & ELIMINATE BLUE BAR ── */ body.customer-panel, body.customer-panel html, body.customer-panel .wrapper, body.customer-panel .content-wrapper, body.customer-panel .right-side, body.customer-panel #etoMainContainer { height: auto !important; min-height: auto !important; overflow-y: visible !important; background: var(--lx-bg) !important; background-color: var(--lx-bg) !important; box-shadow: none !important; } body.customer-panel .wrapper { display: block !important; width: 100% !important; max-width: 100% !important; float: none !important; } body.customer-panel .content-wrapper { margin-left: 230px !important; width: auto !important; } @media (max-width: 767px) { body.customer-panel .content-wrapper { margin-left: 0 !important; } } /* ── 2. STANDALONE FORM CONTROLS (inputs on edit profile page) ── */ body.customer-panel .form-control { background: var(--lx-input-bg) !important; border: 1px solid var(--lx-border) !important; border-radius: var(--lx-radius) !important; color: var(--lx-white) !important; font-family: var(--lx-font) !important; font-size: 13px !important; height: 50px !important; padding: 0 16px !important; box-shadow: none !important; transition: var(--lx-ease) !important; width: 100% !important; } body.customer-panel .form-control:focus { border-color: var(--lx-border-gold) !important; background: var(--lx-input-bg) !important; box-shadow: none !important; color: var(--lx-white) !important; } /* Nested form controls inside input groups (e.g. login/register icons) */ body.customer-panel .input-group .form-control { background: transparent !important; border: none !important; height: 48px !important; padding: 0 14px !important; border-radius: 0 !important; } body.customer-panel .input-group .form-control:focus { background: transparent !important; border: none !important; } /* File input line-height alignment */ body.customer-panel input[type="file"].form-control { line-height: 48px !important; padding: 0 16px !important; } /* Floating labels alignment over solid borders */ body.customer-panel .form-master .form-group:not(.placeholder-disabled) label { background: var(--lx-bg) !important; color: var(--lx-gold) !important; font-family: var(--lx-font) !important; font-size: 11px !important; padding: 0 6px !important; z-index: 12 !important; top: -6px !important; } /* ── 3. USER PROFILE VIEW (details-list) FLEXBOX REDESIGN ── */ body.customer-panel .details-list { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; margin: 0 0 24px 0 !important; } body.customer-panel .details-list li { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; padding: 14px 18px !important; margin: 0 !important; border: 1px solid var(--lx-border) !important; border-top: none !important; background: var(--lx-card) !important; } body.customer-panel .details-list li:first-child { border-top: 1px solid var(--lx-border) !important; border-top-left-radius: var(--lx-radius) !important; border-top-right-radius: var(--lx-radius) !important; } body.customer-panel .details-list li:last-child { border-bottom-left-radius: var(--lx-radius) !important; border-bottom-right-radius: var(--lx-radius) !important; } body.customer-panel .details-list-title { width: auto !important; max-width: 45% !important; float: none !important; display: inline-block !important; color: var(--lx-gold) !important; font-family: var(--lx-font) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; padding: 0 !important; margin: 0 !important; } body.customer-panel .details-list-value { width: auto !important; max-width: 55% !important; float: none !important; display: inline-block !important; color: var(--lx-white) !important; font-family: var(--lx-font) !important; font-size: 13px !important; text-align: right !important; padding: 0 !important; margin: 0 !important; word-break: break-all !important; } /* User profile header card container */ body.customer-panel .widget-user-2 { background: var(--lx-card2) !important; border: 1px solid var(--lx-border) !important; border-radius: var(--lx-radius) !important; padding: 24px !important; margin-bottom: 24px !important; } body.customer-panel .widget-user-header { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 16px 0 24px 0 !important; margin-bottom: 24px !important; border-bottom: 1px solid var(--lx-border) !important; } body.customer-panel .widget-user-image { float: none !important; display: inline-block !important; margin-bottom: 16px !important; } body.customer-panel .widget-user-image img { width: 80px !important; height: 80px !important; border: 2px solid var(--lx-border-gold) !important; } body.customer-panel .widget-user-username { color: var(--lx-white) !important; font-family: var(--lx-font) !important; font-size: 20px !important; font-weight: 600 !important; margin: 0 0 6px 0 !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; } body.customer-panel .widget-user-desc { color: var(--lx-grey-light) !important; font-family: var(--lx-font) !important; font-size: 13px !important; margin: 0 !important; } /* Tablet & Mobile responsive adjustments */ @media (max-width: 575px) { body.customer-panel .details-list li { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; padding: 12px 14px !important; } body.customer-panel .details-list-title { max-width: 100% !important; } body.customer-panel .details-list-value { max-width: 100% !important; text-align: left !important; } } /* Step 2 Map Info Text Styling */ .etoMapInfoText { color: var(--lx-grey-light) !important; font-family: var(--lx-font) !important; font-size: 13px !important; line-height: 1.5 !important; margin-top: 10px !important; margin-bottom: 10px !important; text-align: left !important; } .etoMapInfoText a { color: var(--lx-gold) !important; font-weight: 500 !important; text-decoration: underline !important; transition: var(--lx-ease) !important; } .etoMapInfoText a:hover { color: var(--lx-gold-light) !important; text-decoration: none !important; } #etoRoute1Passengers option { background: #141414 !important; } #etoRoute1Luggage option { background: #141414 !important; } #etoRoute1HandLuggage option { background: #141414 !important; } #etoRoute1BabySeats option { background: #141414 !important; } #etoRoute1ChildSeats option { background: #141414 !important; } #etoRoute1InfantSeats option { background: #141414 !important; } /* ================================================================ 39. BOOKING STEP 3 LOGIN & REGISTER FORMS REDESIGN ================================================================ */ /* Form card backgrounds inside Booking User Container */ #etoBookingUserContainer .eto-v2-section-box { background: transparent !important; border: none !important; box-shadow: none !important; padding: 20px !important; color: var(--lx-grey-light) !important; } /* Hide label inside forms as they are represented in headers/placeholders if applicable */ #etoBookingUserContainer .eto-v2-section-label { display: none !important; } /* Row wrapper for Guest / Login / Register switch tabs */ #etoBookingUserContainer #etoBookingCheckoutType { background: rgba(201, 168, 76, 0.03) !important; border-bottom: 1px solid rgba(201, 168, 76, 0.15) !important; padding: 10px 16px !important; margin-bottom: 0 !important; } /* Input group container */ #etoBookingUserContainer .input-group { background: var(--lx-input-bg) !important; border: 1px solid var(--lx-border) !important; border-radius: var(--lx-radius) !important; transition: var(--lx-ease) !important; overflow: hidden !important; display: table !important; /* to match Bootstrap's display: table for input groups */ width: 100% !important; margin-bottom: 0 !important; } #etoBookingUserContainer .form-group { margin-bottom: 15px !important; } /* Input group hover & focus states */ #etoBookingUserContainer .input-group:hover, #etoBookingUserContainer .input-group:focus-within { border-color: var(--lx-border-gold) !important; background: var(--lx-input-hover) !important; } /* Input addons (icons on login/register) */ #etoBookingUserContainer .input-group-addon { background: transparent !important; border: none !important; color: var(--lx-gold) !important; font-size: 20px !important; height: 50px !important; width: 48px !important; text-align: center !important; vertical-align: middle !important; padding: 0 !important; display: table-cell !important; } /* Form controls (input fields) inside login/register forms */ #etoBookingUserContainer .form-control { background: transparent !important; border: none !important; color: var(--lx-white) !important; font-family: var(--lx-font) !important; font-size: 13px !important; height: 50px !important; box-shadow: none !important; display: table-cell !important; width: 100% !important; padding: 6px 12px !important; } #etoBookingUserContainer .form-control:focus { background: transparent !important; box-shadow: none !important; border: none !important; color: var(--lx-white) !important; } #etoBookingUserContainer .form-control::placeholder { color: var(--lx-grey) !important; } #etoBookingUserContainer .form-control::-webkit-input-placeholder { color: var(--lx-grey) !important; } #etoBookingUserContainer .form-control::-moz-placeholder { color: var(--lx-grey) !important; } #etoBookingUserContainer .form-control:-ms-input-placeholder { color: var(--lx-grey) !important; } /* Primary buttons (Login & Register submit buttons) */ #etoBookingUserContainer #loginButton, #etoBookingUserContainer #registerButton { background: var(--lx-gold-grad) !important; border: none !important; color: #0d0d0d !important; font-family: var(--lx-font) !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: 2px !important; text-transform: uppercase !important; height: 50px !important; border-radius: var(--lx-radius) !important; transition: var(--lx-ease) !important; box-shadow: 0 4px 20px rgba(201, 168, 76, 0.3) !important; } #etoBookingUserContainer #loginButton:hover, #etoBookingUserContainer #registerButton:hover { background: linear-gradient(135deg, #9a7828 0%, #c9a84c 50%, #9a7828 100%) !important; box-shadow: 0 6px 28px rgba(201, 168, 76, 0.5) !important; transform: translateY(-1px) !important; color: #0d0d0d !important; } /* Link buttons (Lost your password) */ #etoBookingUserContainer #passwordButton { color: var(--lx-gold) !important; font-family: var(--lx-font) !important; font-weight: 500 !important; text-decoration: none !important; line-height: 50px !important; height: 50px !important; padding: 0 !important; background: transparent !important; border: none !important; } #etoBookingUserContainer #passwordButton:hover { color: var(--lx-gold-light) !important; text-decoration: underline !important; } /* Radios and Checkboxes wrapper custom styles */ #etoBookingUserContainer .checkbox .cr, #etoBookingUserContainer .radio .cr { background: var(--lx-input-bg) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } #etoBookingUserContainer .checkbox .cr:hover, #etoBookingUserContainer .radio .cr:hover { border-color: var(--lx-gold) !important; } #etoBookingUserContainer .radio label input[type="radio"]:checked+.cr, #etoBookingUserContainer .checkbox label input[type="checkbox"]:checked+.cr { background: var(--lx-gold) !important; border-color: var(--lx-gold-dark) !important; color: #0d0d0d !important; } #etoBookingUserContainer .radio label, #etoBookingUserContainer .checkbox label { color: var(--lx-grey-light) !important; font-family: var(--lx-font) !important; font-size: 13px !important; font-weight: 500 !important; } #etoBookingUserContainer .radio label input[type="radio"], #etoBookingUserContainer .checkbox label input[type="checkbox"] { margin-right: 6px !important; } /* Agreement checkbox link */ #etoBookingUserContainer .checkbox label a { color: var(--lx-gold) !important; font-weight: 500 !important; text-decoration: underline !important; } #etoBookingUserContainer .checkbox label a:hover { color: var(--lx-gold-light) !important; text-decoration: none !important; } /* Spacing and divider inside company register fields container */ #etoBookingUserContainer .company-container { border-top: 1px solid rgba(255, 255, 255, 0.05) !important; padding-top: 15px !important; margin-top: 15px !important; } /* Adjust row buttons spacing */ .eto-v2-section-login-form-buttons { margin-top: 20px !important; } /* Billing Address section container on Step 3 registration */ #etoBookingUserContainer .eto-billing-address-container { margin-top: 28px !important; margin-bottom: 8px !important; border-top: 1px solid var(--lx-border-gold) !important; padding-top: 24px !important; width: 100% !important; } #etoBookingUserContainer .eto-billing-address-title { color: var(--lx-gold) !important; font-family: var(--lx-font) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 3px !important; text-transform: uppercase !important; margin: 0 0 20px 0 !important; padding-bottom: 0 !important; } /* Override h4 ::after gold line from h3 rule */ #etoBookingUserContainer .eto-billing-address-title::after { display: none !important; } #etoBookingUserContainer .eto-billing-address-container .row { margin-left: -10px !important; margin-right: -10px !important; } #etoBookingUserContainer .eto-billing-address-container .row>[class*="col-"] { padding-left: 10px !important; padding-right: 10px !important; }