/* WMX Booking (Thrifty-inspired) — scoped so it won't affect other pages */
:root{
  --wmx-blue:#0b78c9;
  --wmx-blue-2:#0a6bb3;
  --wmx-card:#ffffff;
  --wmx-text:#0b1220;
  --wmx-muted:#6b7280;
  --wmx-border:rgba(15,23,42,.10);
  --wmx-shadow:0 18px 55px rgba(2,8,23,.14);
  --wmx-radius:22px;
  --wmx-pill:999px;
}

/* Modal (Date & time) */
.wmx-modal{
  position:fixed;
  inset:0;
  background:rgba(2, 8, 23, .55);
  display:none;
  padding:18px;
  z-index:99999;
  overflow:auto;
}
.wmx-modal.is-open{ display:block; }
html.wmx-modal-open{ overflow:hidden; }

/* --- NEW: Thrifty-style Date/Time modal (calendar + time dropdowns) --- */
.wmx-modal .wmx-modal-card{
  width:min(980px, 100%);
  margin:6vh auto;
  background:#fff;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(2,8,23,.35);
  border:1px solid rgba(255,255,255,.12);
}
.wmx-modal .wmx-modal-head{
  background:linear-gradient(180deg,var(--wmx-blue) 0%, var(--wmx-blue-2) 100%);
  color:#fff;
  padding:18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.wmx-modal .wmx-modal-title{
  font-weight:900;
  letter-spacing:.2px;
  font-size:18px;
}
.wmx-modal .wmx-modal-close{
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font-size:20px;
  width:40px;height:40px;
  border-radius:999px;
  display:grid;place-items:center;
  opacity:.9;
}
.wmx-modal .wmx-modal-close:hover{ background:rgba(255,255,255,.12); }

.wmx-modal .wmx-modal-body{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap:0;
  min-height:420px;
}
.wmx-modal .wmx-cal-panel{
  background:linear-gradient(180deg,#eaf5ff 0%, #f6fbff 100%);
  padding:18px;
}
.wmx-modal .wmx-time-panel{
  padding:20px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.wmx-modal .wmx-time-block{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:14px;
}
.wmx-modal .wmx-time-title{
  font-weight:900;
  margin-bottom:6px;
  color:#0b1220;
}
.wmx-modal .wmx-time-meta{
  color:#6b7280;
  font-weight:800;
  font-size:12px;
  margin-bottom:10px;
}
.wmx-modal .wmx-select-wrap{
  position:relative;
}
.wmx-modal .wmx-select{
  width:100%;
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  padding:14px 42px 14px 14px;
  font-weight:900;
  background:#f8fbff;
  outline:0;
  appearance:none;
}
html[dir="rtl"] .wmx-modal .wmx-select{
  padding:14px 14px 14px 42px;
}
.wmx-modal .wmx-select-caret{
  position:absolute;
  inset-inline-end:14px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  opacity:.7;
  font-size:14px;
}
.wmx-modal .wmx-time-note{
  color:#6b7280;
  font-weight:800;
  font-size:12px;
  margin-top:2px;
}
.wmx-modal .wmx-confirm{
  margin-top:auto;
  border:0;
  border-radius:18px;
  padding:14px 18px;
  font-weight:900;
  cursor:pointer;
  background:#b01263;
  color:#fff;
  opacity:.55;
  transition:.15s ease;
}
.wmx-modal .wmx-confirm.is-enabled{ opacity:1; }
.wmx-modal .wmx-confirm:disabled{ cursor:not-allowed; }
.wmx-modal .wmx-confirm:not(:disabled):hover{ transform:translateY(-1px); }

/* Calendar */
.wmx-cal{
  background:rgba(255,255,255,.80);
  border:1px solid rgba(15,23,42,.08);
  border-radius:20px;
  padding:16px;
  max-height:520px;
  overflow:auto;
}
.wmx-month + .wmx-month{ margin-top:16px; }
.wmx-month-head{
  text-align:center;
  font-weight:900;
  color:#0b1220;
  margin-bottom:10px;
}
.wmx-weekdays{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  font-weight:900;
  color:rgba(11,18,32,.62);
  font-size:12px;
  margin-bottom:8px;
}
.wmx-weekdays span{ text-align:center; }
.wmx-days{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
}
.wmx-day{
  height:40px;
  border-radius:14px;
  border:0;
  background:#fff;
  cursor:pointer;
  font-weight:900;
  color:#0b1220;
  display:grid;
  place-items:center;
  transition:.12s ease;
  box-shadow:0 1px 0 rgba(2,8,23,.05);
}
.wmx-day:hover{ transform:translateY(-1px); }
.wmx-day--blank{
  height:40px;
  background:transparent;
  box-shadow:none;
}
.wmx-day.is-disabled{
  opacity:.38;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none;
}
.wmx-day.is-disabled:hover{ transform:none; }

.wmx-day.is-inrange{
  background:rgba(176,18,99,.14);
}
.wmx-day.is-start,
.wmx-day.is-end{
  background:#b01263;
  color:#fff;
}
.wmx-day.is-start{ border-top-left-radius:999px; border-bottom-left-radius:999px; }
.wmx-day.is-end{ border-top-right-radius:999px; border-bottom-right-radius:999px; }

@media (max-width: 860px){
  .wmx-modal .wmx-modal-body{ grid-template-columns:1fr; }
  .wmx-modal .wmx-time-panel{ padding:18px; }
  .wmx-cal{ max-height:380px; }
}


.wmx-booking{
  background:linear-gradient(180deg,var(--wmx-blue) 0%, var(--wmx-blue) 72%, #f3f7fb 72%, #f3f7fb 100%);
  padding:32px 0 90px;
}
.wmx-booking *{ box-sizing:border-box; }

.wmx-booking .wmx-wrap{
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
}

/* Stepper */
.wmx-booking .wmx-stepper{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:#eaf5ff;
  margin:6px 0 18px;
}
.wmx-booking .wmx-stepper .wmx-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.wmx-booking .wmx-stepper .wmx-title{
  font-weight:800;
  letter-spacing:.2px;
}
.wmx-booking .wmx-steps{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.wmx-booking .wmx-step{
  display:flex;
  align-items:center;
  gap:10px;
  opacity:.75;
}
.wmx-booking .wmx-step.is-active{ opacity:1; }
.wmx-booking .wmx-dot{
  width:12px;height:12px;border-radius:50%;
  background:rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.34);
}
.wmx-booking .wmx-step.is-active .wmx-dot{
  background:#ffd54a;
  border-color:#ffd54a;
  box-shadow:0 0 0 6px rgba(255,213,74,.18);
}
.wmx-booking .wmx-step label{ font-size:13px; font-weight:700; }

/* Card */
.wmx-booking .wmx-card{
  background:var(--wmx-card);
  border:1px solid var(--wmx-border);
  border-radius:var(--wmx-radius);
  box-shadow:var(--wmx-shadow);
  padding:22px;
}

.wmx-booking .wmx-h1{
  color:#eaf5ff;
  font-size:34px;
  line-height:1.15;
  font-weight:900;
  margin:0 0 12px;
  text-align:center;
}
.wmx-booking .wmx-sub{
  color:rgba(234,245,255,.85);
  text-align:center;
  margin:0 0 18px;
  font-weight:600;
}

/* Form grid */
.wmx-booking .wmx-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
}

/* Inputs */
.wmx-booking .wmx-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.wmx-booking .wmx-field label{
  font-weight:800;
  font-size:13px;
  color:#0b1220;
}
.wmx-booking .wmx-input{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:18px;
  padding:14px 16px;
  background:#fff;
  transition:.15s ease;
}

/* Floating label (Option B) inside booking input */
.wmx-booking .wmx-input.wmx-input--float{
  position:relative;
  padding:18px 16px 12px;
}
.wmx-booking .wmx-input.wmx-input--float .wmx-floatlabel{
  position:absolute;
  inset-inline-start:16px;
  top:50%;
  transform:translateY(-50%);
  font-weight:900;
  font-size:16px;
  color:rgba(11,18,32,.72);
  pointer-events:none;
  transition:all .18s ease;
  max-width:calc(100% - 56px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wmx-booking .wmx-input.wmx-input--float:focus-within .wmx-floatlabel,
.wmx-booking .wmx-input.wmx-input--float.is-filled .wmx-floatlabel{
  top:9px;
  transform:none;
  font-size:12px;
  color:rgba(11,120,201,.95);
}
.wmx-booking .wmx-input.wmx-input--float input{
  padding-top:10px;
  font-weight:900;
}
.wmx-booking .wmx-input:focus-within{
  border-color:rgba(11,120,201,.45);
  box-shadow:0 0 0 5px rgba(11,120,201,.10);
}
.wmx-booking .wmx-input input,
.wmx-booking .wmx-input select{
  border:0; outline:0; width:100%;
  font:inherit;
  color:#0b1220;
  background:transparent;
}
.wmx-booking .wmx-icon{
  width:18px;height:18px; flex:0 0 18px;
  opacity:.7;
}

.wmx-booking .wmx-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.wmx-booking .wmx-inline{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0 0;
}
.wmx-booking .wmx-inline input{ width:auto; }
.wmx-booking .wmx-inline span{ color:var(--wmx-muted); font-weight:700; font-size:13px; }

/* Driver age buttons */
.wmx-booking .wmx-age{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin:10px 0 0;
}
.wmx-booking .wmx-age button{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  border-radius:16px;
  padding:14px 18px;
  font-weight:900;
  min-width:92px;
  cursor:pointer;
  transition:.15s ease;
}
.wmx-booking .wmx-age button.is-active{
  border-color:rgba(11,120,201,.65);
  box-shadow:0 0 0 6px rgba(11,120,201,.12);
}

/* Actions */
.wmx-booking .wmx-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  margin:18px 0 0;
  flex-wrap:wrap;
}
.wmx-booking .wmx-btn{
  border:0;
  border-radius:18px;
  padding:14px 18px;
  cursor:pointer;
  font-weight:900;
  transition:.15s ease;
}
.wmx-booking .wmx-btn-primary{
  background:#b01263;
  color:#fff;
}
.wmx-booking .wmx-btn-primary:hover{ transform:translateY(-1px); }
.wmx-booking .wmx-btn-ghost{
  background:rgba(11,120,201,.08);
  color:#0b1220;
}

/* Right preview */
.wmx-booking .wmx-preview{
  background:linear-gradient(180deg,#fff 0%, #f8fbff 100%);
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--wmx-radius);
  padding:18px;
}
.wmx-booking .wmx-preview h3{ margin:0 0 12px; font-weight:900; }
.wmx-booking .wmx-kv{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px dashed rgba(15,23,42,.12); }
.wmx-booking .wmx-kv:last-child{ border-bottom:0; }
.wmx-booking .wmx-kv b{ color:#0b1220; }
.wmx-booking .wmx-kv span{ color:var(--wmx-muted); font-weight:700; }

/* Results (vehicles list) */
.wmx-results{
  background:var(--wmx-blue);
  padding:34px 0 80px;
}
.wmx-results .wmx-wrap{ width:min(1180px, calc(100% - 32px)); margin:0 auto; }
.wmx-results .wmx-results-grid{ display:grid; grid-template-columns: 320px 1fr; gap:18px; }
.wmx-results .wmx-filter{
  background:#fff;
  border-radius:var(--wmx-radius);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:var(--wmx-shadow);
  padding:16px;
  position:sticky; top:18px;
  height:fit-content;
}
.wmx-results .wmx-filter h3{ margin:0 0 10px; font-weight:900; }
.wmx-results .wmx-filter a{ color:#b01263; text-decoration:none; font-weight:800; }

.wmx-results .wmx-sort{
  display:flex; align-items:center; justify-content:flex-start; gap:10px;
  margin:0 0 12px;
}
.wmx-results .wmx-sort select{
  border-radius:14px;
  padding:10px 12px;
  border:1px solid rgba(15,23,42,.12);
  outline:0;
}

.wmx-results .wmx-vehicle-card{
  background:#fff;
  border-radius:var(--wmx-radius);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:var(--wmx-shadow);
  padding:18px;
  display:grid;
  grid-template-columns: 220px 1fr 220px;
  gap:16px;
  align-items:center;
  margin:0 0 14px;
}
.wmx-results .wmx-vehicle-card img{
  width:100%; height:140px; object-fit:cover;
  border-radius:18px;
  background:#f3f7fb;
}
.wmx-results .wmx-vehicle-title{ font-weight:900; font-size:20px; margin:0 0 6px; }
.wmx-results .wmx-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.wmx-results .wmx-tag{ font-size:12px; font-weight:800; padding:6px 10px; border-radius:999px; background:rgba(11,120,201,.10); }
.wmx-results .wmx-price{
  background:#f5f7fb;
  border-radius:18px;
  padding:12px;
  text-align:center;
}
.wmx-results .wmx-price .wmx-total{ font-weight:900; font-size:34px; }
.wmx-results .wmx-book{
  margin-top:10px;
  width:100%;
  background:#b01263;
  color:#fff;
  border:0;
  border-radius:16px;
  padding:14px 12px;
  font-weight:900;
  cursor:pointer;
}

/* Mobile */
@media (max-width: 980px){
  .wmx-booking .wmx-grid{ grid-template-columns:1fr; }
  .wmx-results .wmx-results-grid{ grid-template-columns:1fr; }
  .wmx-results .wmx-filter{ position:relative; top:0; }
  .wmx-results .wmx-vehicle-card{ grid-template-columns:1fr; }
  .wmx-results .wmx-vehicle-card img{ height:180px; }
}



/* =========================
   WMX Modern UI Overhaul v1.3
   ========================= */

/* Typography & smoother rendering inside booking */
.wmx-booking{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Full section background: richer gradient + subtle noise */
.wmx-booking{
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, var(--wmx-blue) 0%, #0a69ad 62%, #f3f7fb 62%, #f3f7fb 100%);
}

/* Wrap spacing */
.wmx-wrap{ padding: 0 14px; }

/* Stepper: glass pill */
.wmx-stepper{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  padding: 14px 16px;
  box-shadow: 0 18px 55px rgba(2,8,23,.18);
}

/* Steps: cleaner + hover */
.wmx-steps{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 8px 12px;
}
.wmx-step{
  opacity: .88;
  transition: opacity .18s ease, transform .18s ease;
}
.wmx-step:hover{ opacity: 1; transform: translateY(-1px); }

/* Headline */
.wmx-h1{
  letter-spacing: .2px;
  text-shadow: 0 10px 25px rgba(2,8,23,.25);
}

/* Cards: modern with motion */
.wmx-card{
  position: relative;
  overflow: hidden;
}
.wmx-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(600px 200px at 10% 0%, rgba(11,120,201,.10), rgba(255,255,255,0) 60%);
  pointer-events:none;
}
.wmx-card.is-active{
  box-shadow: 0 24px 70px rgba(2,8,23,.16);
}
.wmx-card.is-enter{
  animation: wmxFadeUp .32s ease both;
}
@keyframes wmxFadeUp{
  from{ opacity:0; transform: translateY(10px) scale(.99); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* Inputs: higher contrast, better padding, focus ring */
.wmx-input{
  border: 1px solid rgba(15,23,42,.12) !important;
  background: #fff !important;
  color: var(--wmx-text) !important;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.wmx-input:focus{
  outline: none;
  border-color: rgba(11,120,201,.45) !important;
  box-shadow: 0 0 0 6px rgba(11,120,201,.14) !important;
}

/* Floating label spacing */
.wmx-floatlabel label{
  font-weight: 900;
  color: rgba(15,23,42,.72);
}


/* Dates block: collapse helper (hide prompt + button after selection) */
.wmx-booking .wmx-dates-top{
  overflow:hidden;
  max-height:120px;
  transition: max-height .28s ease, opacity .18s ease, transform .28s ease;
}
.wmx-booking .wmx-date-summary{
  transition: transform .28s ease, margin-top .28s ease, opacity .18s ease;
}
.wmx-booking.wmx-has-dates .wmx-dates-top{
  max-height:0;
  opacity:0;
  transform: translateY(-6px);
  pointer-events:none;
}
.wmx-booking.wmx-has-dates .wmx-date-summary{
  margin-top:0 !important;
  transform: translateY(-6px);
  opacity:1;
}

/* Date summary badge: fix low contrast (time looked "white") */
#wmxDateSummary{
  background: #f1f5f9;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--wmx-text);
  font-weight: 900;
}

/* Primary buttons: motion */
.wmx-btn, .wmx-confirm{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.wmx-btn-primary, .wmx-confirm.is-enabled{
  box-shadow: 0 14px 28px rgba(176,18,99,.18);
}
.wmx-btn-primary:hover, .wmx-confirm.is-enabled:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 18px 38px rgba(176,18,99,.22);
}

/* Modal: refine */
.wmx-modal .wmx-modal-card{
  color: var(--wmx-text);
  box-shadow: 0 28px 90px rgba(2,8,23,.26);
}
.wmx-modal-body{
  gap: 16px;
}
.wmx-cal-panel{
  background: #f7fbff;
  border-right: 1px solid rgba(15,23,42,.10);
}
.wmx-time-panel{
  background: #fff;
}

/* Calendar day buttons: smoother */
.wmx-day{
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.wmx-day:not(.wmx-day--blank):hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(2,8,23,.12);
}

/* Select dropdown: fix white text issue */
.wmx-select{
  color: var(--wmx-text) !important;
  background: #fff !important;
}
.wmx-select option{ color: var(--wmx-text) !important; }

/* Mobile polish */
@media (max-width: 860px){
  .wmx-stepper{ border-radius: 18px; }
  .wmx-h1{ font-size: 28px; }
}


/* Summary pulse after save */
#wmxDateSummary.wmx-pulse{
  animation: wmxPulse .35s ease;
}
@keyframes wmxPulse{
  from{ transform: scale(.985); box-shadow: 0 0 0 0 rgba(11,120,201,.18); }
  to{ transform: scale(1); box-shadow: 0 0 0 10px rgba(11,120,201,0); }
}


/* --- Summary bar (shown on steps 2+) --- */
.wmx-booking .wmx-summary{
  margin: 14px auto 18px;
}
.wmx-booking .wmx-summary-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.wmx-booking .wmx-field--summary{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  box-shadow:0 12px 34px rgba(2,8,23,.10);
}
.wmx-booking .wmx-field--summary > div:first-child{ display:flex; flex-direction:column; gap:3px; }
.wmx-booking .wmx-slabel{
  font-size:12px;
  font-weight:900;
  color:var(--wmx-blue);
}
.wmx-booking .wmx-svalue{
  font-size:18px;
  font-weight:900;
  color:#0b1220;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.wmx-booking .wmx-sicon{
  width:44px;height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(11,120,201,.10);
  border:1px solid rgba(11,120,201,.16);
  cursor:pointer;
  flex:0 0 auto;
  user-select:none;
}
.wmx-booking .wmx-sicon:hover{ background:rgba(11,120,201,.14); }

.wmx-booking .wmx-inline--summary{ margin:0; }
.wmx-booking .wmx-check{
  display:flex;align-items:center;gap:10px;
  font-weight:800;
  color:#eaf5ff;
}
.wmx-booking .wmx-check input{ width:18px;height:18px; accent-color: var(--wmx-blue); }

.wmx-booking .wmx-field--dates{
  cursor:pointer;
}
.wmx-booking .wmx-field--dates:focus{ outline:3px solid rgba(255,213,74,.35); outline-offset:2px; }

/* Stepper hint small lines */
.wmx-booking .wmx-hint-title{
  font-size:13px;
  font-weight:900;
  color:rgba(234,245,255,.98);
  margin-top:2px;
}
.wmx-booking .wmx-hint-small{
  font-size:12px;
  font-weight:800;
  color:rgba(234,245,255,.95);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:420px;
}

/* Improve value contrast inside selects / time summary */
.wmx-booking select,
.wmx-modal select,
.wmx-modal option{
  color:#0b1220 !important;
}
.wmx-booking .wmx-sub,
.wmx-booking #wmxDateSummary{
  color:#334155;
}


/* --- v1.6.0 adjustments --- */
.wmx-booking .wmx-summary .wmx-sicon{ display:none !important; }
.wmx-booking .wmx-summary .wmx-field--summary{ padding-right:16px !important; padding-left:16px !important; }

.wmx-booking .wmx-stepper{ position:relative; }
.wmx-booking .wmx-stepper .wmx-right{ display:flex; align-items:center; gap:10px; }
.wmx-booking .wmx-brand{ display:flex; align-items:center; justify-content:center; padding:8px 10px; border-radius:14px;
  background: rgba(255,255,255,.85); border:1px solid rgba(15,23,42,.10); box-shadow: 0 18px 40px rgba(2,6,23,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.wmx-booking .wmx-brand-logo{ max-height:34px; height:auto; width:auto; max-width:140px; display:block; object-fit:contain; }
.wmx-booking .wmx-brand-text{ font-weight:900; letter-spacing:.5px; color:#eaf5ff; }

.wmx-booking .wmx-close{ margin-inline-start:10px; }

.wmx-booking .wmx-vehicle-card{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  border-radius:16px;
  padding:0;
  overflow:hidden;
  text-align:inherit;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  min-height:180px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wmx-booking .wmx-vehicle-card:hover{ transform: translateY(-2px); box-shadow:0 18px 40px rgba(15,23,42,.14); }
.wmx-booking .wmx-vehicle-card.is-selected{
  border-color: rgba(245,158,11,.85);
  box-shadow:0 22px 55px rgba(245,158,11,.22);
}
.wmx-booking .wmx-vehicle-thumb{
  width:100%;
  height:120px;
  background:#eef2f7;
  background-size:cover;
  background-position:center;
}
.wmx-booking .wmx-vehicle-meta{ padding:12px 14px; }
.wmx-booking .wmx-vehicle-title{ font-weight:900; color:#0b1220; font-size:14px; }

/* Ensure date/time summary is readable */
.wmx-booking #wmxDateSummary, .wmx-booking #wmxSumDates, .wmx-booking .wmx-date-badge{
  color:#0b1220 !important;
}
.wmx-booking select, .wmx-booking option{ color:#0b1220 !important; background:#fff; }


/* -------- Final form (custom) -------- */
.wmx-booking .wmx-final-shell{ padding: 6px 2px; }
.wmx-booking .wmx-final-form{ width:100%; }
.wmx-booking .wmx-final-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
@media (max-width: 720px){ .wmx-booking .wmx-final-grid{ grid-template-columns: 1fr; } }
.wmx-booking .wmx-field label{ display:block; font-weight:800; font-size:13px; margin:0 0 8px; color:#0f172a; }
.wmx-booking .wmx-req{ color:#be123c; font-weight:900; }
.wmx-booking .wmx-input{ width:100%; border:1px solid rgba(15,23,42,.14); border-radius:14px; padding:12px 14px; background:#fff;
  outline:none; transition: box-shadow .2s, border-color .2s, transform .2s;
}
.wmx-booking .wmx-input:focus{ border-color: rgba(2,132,199,.45); box-shadow: 0 0 0 4px rgba(2,132,199,.16); transform: translateY(-1px); }
.wmx-booking .wmx-file{ width:100%; border:1px dashed rgba(15,23,42,.18); border-radius:14px; padding:12px 14px; background: rgba(255,255,255,.9); }

/* -----------------------------
   Modern file picker (global)
------------------------------ */
.wmx-booking .wmx-file-wrap{position:relative; display:block; width:100%;}
.wmx-booking .wmx-file-title{display:block; font-weight:800; margin-bottom:10px;}
.wmx-booking .wmx-file-input{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.wmx-booking .wmx-file-ui{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px dashed rgba(15,23,42,.20);
  border-radius:16px;
  padding:14px 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 30px rgba(2,8,23,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wmx-booking .wmx-file-wrap:hover .wmx-file-ui{
  transform: translateY(-1px);
  box-shadow: 0 16px 50px rgba(2,8,23,.10);
  border-color: rgba(15,23,42,.28);
}
.wmx-booking .wmx-file-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
  height:44px;
  padding:0 14px;
  border-radius:14px;
  background: rgba(135, 80, 170, .95);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  user-select:none;
  transition: transform .15s ease, filter .15s ease;
}
.wmx-booking .wmx-file-wrap:active .wmx-file-btn{ transform: scale(.98); }
.wmx-booking .wmx-file-name{
  flex:1;
  min-width:0;
  color: rgba(15,23,42,.78);
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wmx-booking .wmx-file-name.is-empty{ color: rgba(15,23,42,.45); font-weight:650; }
.wmx-booking .wmx-file-wrap:focus-within .wmx-file-ui{
  border-color: rgba(135, 80, 170, .55);
  box-shadow: 0 0 0 4px rgba(135, 80, 170, .18), 0 16px 50px rgba(2,8,23,.10);
}
.wmx-booking .wmx-span-2{ grid-column: 1 / -1; }
.wmx-booking .wmx-final-actions{ display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
.wmx-booking .wmx-final-status{ font-weight:800; font-size:13px; padding:10px 12px; border-radius:12px; background: rgba(15,23,42,.06); color:#0f172a; }
.wmx-booking .wmx-final-status.is-ok{ background: rgba(34,197,94,.14); color:#14532d; }
.wmx-booking .wmx-final-status.is-err{ background: rgba(244,63,94,.14); color:#881337; }
.wmx-booking #wmxSubmitFinal.is-loading{ opacity:.8; }
.wmx-booking .wmx-final-foot{ margin-top:12px; font-size:12px; opacity:.8; }

/* ===== Mobile-first SaaS hardening (v3) ===== */
@media (max-width: 640px){
  /* keep everything inside viewport */
  .wmx-wrap{padding:14px !important; gap:14px !important;}
  .wmx-card{border-radius:22px !important;}

  /* Stepper: turn into horizontal app-like tabs */
  .wmx-stepper{position:sticky !important; top:10px !important; z-index:50 !important; padding:10px 10px !important; border-radius:22px !important;}
  .wmx-stepper .wmx-left{display:none !important;}
  .wmx-stepper .wmx-right{display:none !important;}
  .wmx-steps{display:flex !important; gap:10px !important; overflow-x:auto !important; overflow-y:hidden !important; padding:6px !important; scrollbar-width:none;}
  .wmx-steps::-webkit-scrollbar{display:none;}
  .wmx-step{flex:0 0 auto !important; padding:10px 12px !important; border-radius:999px !important; font-size:13px !important; line-height:1 !important;}
  .wmx-step::before{width:8px !important; height:8px !important;}

  /* Headings & spacing */
  .wmx-h1{font-size:28px !important; letter-spacing:0 !important; margin:10px 0 14px !important;}
  .wmx-h2{font-size:18px !important;}

  /* Forms: single column + comfortable controls */
  .wmx-row{grid-template-columns:1fr !important; gap:12px !important;}
  .wmx-field{padding:14px 14px !important; border-radius:18px !important;}
  .wmx-field label{font-size:13px !important;}
  .wmx-input, .wmx-select{height:50px !important; border-radius:16px !important; font-size:16px !important;}
  .wmx-note{font-size:13px !important;}

  /* Make the date/time CTA always tappable */
  .wmx-date-cta{position:relative !important; z-index:2 !important;}

  /* Summary bar: become bottom sheet on mobile */
  .wmx-summary{position:fixed !important; left:14px !important; right:14px !important; bottom:14px !important; border-radius:22px !important; padding:12px !important; z-index:60 !important;}
  .wmx-summary .wmx-summary__items{gap:10px !important;}

  /* Modal inside viewport */
  .wmx-modal__panel{width:min(560px, calc(100vw - 24px)) !important; border-radius:26px !important;}
}