/*
 * ================================================================
 *  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: var(--lx-card2) !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 .dropdown-menu {
  background: var(--lx-card2) !important;
  border: 1px solid var(--lx-border-gold) !important;
  border-radius: var(--lx-radius) !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;
}

.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: hidden !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: 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: 36% !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(1) !important;
  opacity: 0.4 !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: 64% !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 (max-width: 560px) {
  .etoVehicleColumn1 {
    position: relative !important;
    width: 100% !important;
    height: 120px !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;
  }
}

/* ──────────────────────────────────────────────
   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: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  color: var(--lx-gold) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* ──────────────────────────────────────────────
   26. VEHICLE COLUMN2 — wider to use full left 64%
────────────────────────────────────────────── */
.etoVehicleColumn2 {
  width: 62% !important;
  padding: 18px 16px 70px 22px !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: 150px !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: repeat(2, 1fr) !important;
  gap: 16px !important;
}

@media (max-width: 600px) {
  .lx-payment-list {
    grid-template-columns: 1fr !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;
}