/* Final public All Cars catalogue layout: full fare-section width and contained photo thumbnails. */
.car-rental-page .independent-cars{
  max-width:none;
  padding-left:0;
  padding-right:0;
}

/* Car-rental booking sequence: shared route → prebooking → All Cars. */
.car-rental-page main{display:flex;flex-direction:column}
.car-rental-page .shared-route-section{order:-3;background:var(--paper);padding-top:.75rem;padding-bottom:.85rem}
.car-rental-page .shared-route-section>.service-heading{max-width:1360px;margin:0 auto .55rem}
.car-rental-page .shared-route-section>.shared-route-fields,
.car-rental-page .shared-route-section>[data-shared-route-status]{max-width:1360px;margin-left:auto;margin-right:auto}
.car-rental-page .shared-route-section .field-row{gap:.65rem}
.car-rental-page .fare-section{order:-2}
.car-rental-page .independent-cars{order:-1}
.car-rental-page .rental-intro{order:0}
.car-rental-page .shared-route-section .fare-location-field{position:relative;z-index:2}
.car-rental-page .shared-route-fields .shared-location-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin:0}
.car-rental-page .shared-route-fields .fare-location-field{min-width:0}
.car-rental-page .shared-route-fields .fare-location-field input{min-height:44px;height:44px;box-sizing:border-box;border-radius:10px}
.car-rental-page .shared-route-fields .fare-location-tools{margin-top:.35rem}
@media (max-width:700px){
  .car-rental-page .shared-route-section{padding:.55rem 8px .65rem}
  .car-rental-page .shared-route-section>.service-heading{margin-bottom:.35rem}
  .car-rental-page .shared-route-section .service-heading h2{font-size:2rem!important;line-height:.95!important}
  .car-rental-page .shared-route-section .service-heading>p{display:none}
  .car-rental-page .shared-route-section .field-row{grid-template-columns:1fr 1fr!important;gap:.45rem!important}
  .car-rental-page .shared-route-fields .shared-location-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.45rem!important}
  .car-rental-page .shared-route-fields .fare-location-field input{min-height:38px;height:38px;font-size:.72rem}
  .car-rental-page .shared-route-fields .fare-location-field> .fare-input-wrap>label{font-size:.58rem;gap:.2rem;letter-spacing:.045em}
  .car-rental-page .shared-route-fields .fare-location-tools{display:grid;grid-template-columns:minmax(0,2fr) minmax(44px,1fr);gap:2px;margin-top:.18rem}
  .car-rental-page .shared-route-fields .fare-location-tools small{display:none}
  .car-rental-page .shared-route-fields .fare-location-action{min-width:0;padding:0;border:0;background:transparent;color:var(--coral);font:700 .48rem/1 var(--sans);text-align:left;white-space:nowrap;overflow:hidden}
  .car-rental-page .shared-route-section .fare-location-tools{gap:.25rem!important}
  .car-rental-page .shared-route-section .fare-location-tools small{display:none}
  .car-rental-page .shared-route-section .fare-location-action{font-size:.5rem!important;white-space:nowrap}
}

/* The route end time is generated from the measured distance. Keep the
   read-only value visible and compact without competing with the date field. */
.fare-auto-completion-note {
  display: block;
  margin-top: .25rem;
  color: var(--ink-soft);
  font-size: .62rem;
  line-height: 1.2;
}
.fare-schedule-fields > label:has(.fare-auto-completion-note) > input:read-only {
  background: rgba(24, 54, 46, .045);
  cursor: default;
}
@media (max-width: 600px) {
  .car-rental-page .fare-schedule-fields > label:has(.fare-auto-completion-note) {
    min-height: 62px !important;
  }
  .car-rental-page .fare-auto-completion-note {
    display: block !important;
    margin-top: .2rem !important;
    font-size: .5rem !important;
    line-height: 1.15 !important;
    white-space: nowrap;
  }
}

/* Final compact route/prebooking presentation. Keep the two booking panels
   close together while preserving readable labels, inputs and actions. */
.car-rental-page .shared-route-section,
.car-rental-page .fare-section {
  box-sizing: border-box;
  padding-top: .85rem !important;
  padding-bottom: .8rem !important;
}
.car-rental-page .shared-route-section > .service-heading,
.car-rental-page .fare-section > .service-heading {
  gap: 1rem !important;
  margin-bottom: .55rem !important;
}
.car-rental-page .shared-route-section .service-heading h2,
.car-rental-page .fare-section .service-heading h2 {
  line-height: .94 !important;
}
.car-rental-page .shared-route-section .service-heading > p,
.car-rental-page .fare-section .service-heading > p {
  line-height: 1.35 !important;
}
.car-rental-page .shared-route-fields .shared-location-row {
  gap: .55rem !important;
}
.car-rental-page .shared-route-fields .fare-location-tools {
  gap: .35rem !important;
  margin-top: .2rem !important;
  line-height: 1.1;
}
.car-rental-page .shared-route-section > .form-status:empty {
  display: none !important;
  min-height: 0 !important;
}
.car-rental-page .fare-section > .fare-mode-selection {
  margin: 0 auto .5rem !important;
  padding: .5rem .7rem !important;
}
.car-rental-page .fare-form {
  gap: .5rem !important;
  padding: .6rem !important;
  margin-bottom: 0 !important;
}
.car-rental-page .fare-form .field-row {
  gap: .5rem !important;
}
.car-rental-page .fare-form .fare-accommodation-note {
  margin: .25rem 0 .35rem !important;
  line-height: 1.35 !important;
}
.car-rental-page .fare-form .fare-form-actions {
  gap: .45rem !important;
  margin-top: .15rem !important;
}

@media (max-width: 700px) {
  .car-rental-page .shared-route-section,
  .car-rental-page .fare-section {
    padding-top: .45rem !important;
    padding-bottom: .45rem !important;
  }
  .car-rental-page .shared-route-section > .service-heading,
  .car-rental-page .fare-section > .service-heading {
    margin-bottom: .35rem !important;
  }
  .car-rental-page .fare-form {
    padding: .45rem !important;
    gap: .35rem !important;
  }
  .car-rental-page .fare-form .fare-accommodation-note {
    margin: .15rem 0 .2rem !important;
    line-height: 1.22 !important;
  }
}

/* Mobile booking form: give the four primary controls two spacious rows. */
@media(max-width:600px){
  .car-rental-page .fare-form{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:6px!important;
    row-gap:.35rem!important;
    padding:.48rem!important;
  }
  .car-rental-page .fare-form .fare-location-field,
  .car-rental-page .fare-form .fare-schedule-fields>label{grid-column:auto!important}
  .car-rental-page .fare-form .fare-accommodation-note{
    grid-column:1!important;
    align-self:center!important;
    min-width:0!important;
  }
  .car-rental-page .fare-form .fare-form-actions{
    grid-column:2!important;
    align-self:center!important;
    justify-content:flex-end!important;
    min-width:0!important;
  }
  .car-rental-page .fare-form-actions .button{min-height:32px!important;padding:.38rem .52rem!important}

  /* Keep the native selected date/time readable on mobile. The compact layout
     hides the native field label, but must never hide the value after selection. */
  .car-rental-page .fare-schedule-fields>label>input[type="datetime-local"]{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    color:var(--ink)!important;
    -webkit-text-fill-color:var(--ink)!important;
    -webkit-appearance:auto!important;
    font-size:.68rem!important;
    text-align:left!important;
    padding:.18rem .34rem!important;
  }
  .car-rental-page .fare-schedule-fields>label>input[type="datetime-local"]::-webkit-datetime-edit{
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
    color:var(--ink)!important;
    -webkit-text-fill-color:var(--ink)!important;
  }
  .car-rental-page .fare-schedule-fields>label>input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper{
    display:inline-flex!important;
    color:var(--ink)!important;
    -webkit-text-fill-color:var(--ink)!important;
  }
}

/* Mobile car thumbnails: keep the image on top and its readable label below.
   This final override wins over the compact catalogue rules in styles.css. */
@media(max-width:600px){
  .car-rental-page .catalog-photo-selector{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:4px!important;
    align-items:start!important;
  }
  .car-rental-page .catalog-photo-thumb{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:38px auto!important;
    align-items:center!important;
    justify-items:stretch!important;
    min-height:53px!important;
    padding:2px!important;
    gap:2px!important;
    text-align:center!important;
  }
  .car-rental-page .catalog-photo-thumb img{
    display:block!important;
    width:100%!important;
    height:38px!important;
    min-height:0!important;
    object-fit:cover!important;
  }
  .car-rental-page .catalog-photo-thumb span{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    overflow:visible!important;
    font-size:.5rem!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    text-overflow:clip!important;
    text-align:center!important;
  }
}

.car-rental-page .independent-cars .service-heading,
.car-rental-page .independent-cars .catalog-layout{
  width:100%;
  max-width:1360px;
  margin-left:auto;
  margin-right:auto;
}

.car-rental-page .catalog-layout{
  display:block;
}

.car-rental-page .catalog-results{min-width:0}

/* Keep the booking flow and catalogue dense without removing useful information. */
.car-rental-page .fare-section,
.car-rental-page .independent-cars{padding-top:.65rem;padding-bottom:.7rem}

.car-rental-page .fare-section>.service-heading,
.car-rental-page .independent-cars>.service-heading{margin-bottom:.45rem}

.car-rental-page .fare-section .service-heading h2,
.car-rental-page .independent-cars .service-heading h2{font-size:clamp(2.6rem,4vw,4.1rem)}

.car-rental-page .fare-form{gap:.6rem;padding:.7rem;margin-bottom:.4rem}
.car-rental-page .fare-form .field-row{gap:.55rem}
.car-rental-page .fare-accommodation-note{margin:0;font-size:.88rem;line-height:1.45}
.car-rental-page .fare-form-actions{margin-top:0}
.car-rental-page .fare-form .form-status:empty{display:none}

/* A consistent rounded treatment for every customer-facing booking and catalogue panel. */
.car-rental-page .fare-form,
.car-rental-page .car-model-panel,
.car-rental-page .catalog-toolbar{border-radius:16px}
.car-rental-page .fare-form input,
.car-rental-page .fare-form select,
.car-rental-page .catalog-toolbar input,
.car-rental-page .catalog-toolbar select{border-radius:10px}
.car-rental-page .catalog-photo-selector{border-radius:0 0 14px 14px}

.car-rental-page .catalog-results .independent-car-grid{
  /* Five wider desktop cards keep the car photos and details comfortably readable. */
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

/* One unified catalogue filter row: model, search, category and sort. */
.car-rental-page .catalog-toolbar{
  grid-template-columns:minmax(130px,.85fr) minmax(260px,1.65fr) minmax(130px,.85fr) minmax(130px,.85fr);
  gap:.45rem;
}
.car-rental-page .catalog-toolbar label:first-child{grid-column:auto}

.car-rental-page .independent-car-card{
  min-width:0;
  overflow:hidden;
  border-radius:18px;
  perspective:900px;
}

.car-rental-page .catalog-photo-stage{
  position:relative;
  flex:none;
  width:100%;
  height:138px;
  overflow:hidden;
  background:#e9e1d1;
  perspective:1000px;
}

.car-rental-page .catalog-main-photo{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  /* Opacity-only compositing prevents a visual "jump" while a photo changes. */
  transform:translateZ(0);
  backface-visibility:hidden;
  transition:opacity 1.7s cubic-bezier(.45,0,.55,1);
  will-change:opacity;
  pointer-events:none;
}

.car-rental-page .catalog-main-photo.is-active{opacity:1;pointer-events:auto}
.car-rental-page .catalog-main-photo{cursor:zoom-in}
.car-rental-page .catalog-main-photo:focus-visible{outline:3px solid var(--coral);outline-offset:-3px}

@media (prefers-reduced-motion:reduce){
  .car-rental-page .catalog-main-photo{transition:none;transform:none}
}

/* Click a car's main picture to view the active gallery photo at full size. */
.catalog-photo-lightbox{
  width:min(1040px,calc(100vw - 24px));
  max-width:1040px;
  max-height:calc(100vh - 24px);
  margin:auto;
  padding:0;
  overflow:visible;
  border:0;
  background:transparent;
  opacity:0;
  transform:translateY(16px) scale(.975);
  transition:opacity .22s ease,transform .3s cubic-bezier(.2,.82,.2,1);
}
.catalog-photo-lightbox::backdrop{background:rgba(8,27,20,.7);backdrop-filter:blur(3px);opacity:0;transition:opacity .24s ease}
.catalog-photo-lightbox.is-visible{opacity:1;transform:none}
.catalog-photo-lightbox.is-visible::backdrop{opacity:1}
.catalog-photo-lightbox figure{display:grid;place-items:center;gap:.35rem;max-height:calc(100vh - 24px);margin:0;padding:.55rem;background:#fffdf8;border:1px solid rgba(255,255,255,.45);border-radius:18px;box-shadow:0 28px 76px rgba(0,0,0,.42)}
.catalog-photo-lightbox figure img{display:block;max-width:100%;max-height:calc(100vh - 92px);width:auto;height:auto;object-fit:contain;border-radius:12px}
.catalog-photo-lightbox figcaption{max-width:calc(100% - 4rem);color:var(--ink);font:700 .7rem var(--sans);text-align:center}
.catalog-lightbox-close{position:absolute;z-index:2;top:.85rem;right:.85rem;display:inline-flex;align-items:center;gap:.2rem;border:0;border-radius:999px;background:var(--ink);color:#fff;padding:.42rem .55rem;font:700 .6rem var(--sans);box-shadow:0 7px 20px rgba(0,0,0,.2)}
.catalog-lightbox-close span:first-child{font-size:1rem;line-height:.7}

/* Compact route prices appear in a smooth, focused popup instead of taking page height. */
.fare-results-dialog{
  width:min(760px,calc(100vw - 24px));
  max-width:760px;
  max-height:calc(100vh - 28px);
  margin:auto;
  padding:0;
  overflow:visible;
  border:0;
  background:transparent;
  color:var(--ink);
  opacity:0;
  transform:translateY(18px) scale(.975);
  transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1);
}
.fare-results-dialog::backdrop{background:rgba(11,31,25,.58);backdrop-filter:blur(3px);opacity:0;transition:opacity .24s ease}
.fare-results-dialog.is-visible{opacity:1;transform:none}
.fare-results-dialog.is-visible::backdrop{opacity:1}
.fare-results-dialog .fare-results{
  display:block;
  max-height:calc(100vh - 62px);
  overflow:auto;
  padding:.8rem .9rem .85rem;
  border:1px solid rgba(24,54,46,.16);
  border-radius:16px;
  background:#fffdf8;
  box-shadow:0 24px 70px rgba(9,31,23,.34);
}
.fare-results-dialog .fare-results-head{align-items:start;gap:.65rem;margin:0 2.8rem .4rem 0}
.fare-results-dialog .fare-results-head .eyebrow{margin-bottom:.18rem;font-size:.56rem}
.fare-results-dialog .fare-results-head strong{font-size:clamp(1.15rem,3.8vw,1.5rem);line-height:1.05}
.fare-results-dialog .fare-results-head small{margin-top:.2rem;font-size:.63rem;line-height:1.35}
.fare-results-dialog .fare-trip-toggle{gap:.25rem}
.fare-results-dialog .fare-trip-toggle button{padding:.45rem .58rem;font-size:.6rem}
.fare-results-dialog .fare-rule{margin:0 0 .45rem;font-size:.64rem;line-height:1.38}
.fare-results-dialog .fare-vehicle-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.fare-results-dialog .fare-vehicle{grid-template-columns:1fr auto;gap:.25rem .45rem;padding:.48rem .55rem;border:1px solid rgba(24,54,46,.12);border-radius:10px;background:#fff}
.fare-results-dialog .fare-vehicle-empty{grid-template-columns:minmax(0,1fr)}
.fare-results-dialog .fare-vehicle-empty>h3,.fare-results-dialog .fare-vehicle-empty>p{grid-column:1/-1;min-width:0;margin:.1rem 0;overflow-wrap:anywhere}
.fare-results-dialog .fare-vehicle h3{font-size:1rem;line-height:1.05}
.fare-results-dialog .fare-total{gap:.04rem}
.fare-results-dialog .fare-total span{font-size:.5rem}
.fare-results-dialog .fare-total strong{font-size:1.15rem}
.fare-results-dialog .fare-vehicle .button{grid-column:1/-1;width:100%;padding:.42rem .52rem;font-size:.58rem}
.fare-results-dialog .fare-support{margin:.45rem 0 0;padding:.5rem .6rem;font-size:.64rem}
.fare-results-close{position:absolute;z-index:2;top:.5rem;right:.5rem;display:inline-flex;align-items:center;gap:.2rem;border:0;border-radius:999px;background:var(--ink);color:#fff;padding:.38rem .5rem;font:700 .56rem var(--sans);letter-spacing:.03em}
.fare-results-close span:first-child{font-size:1rem;line-height:.7}
@media(max-width:600px){
  .fare-results-dialog{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}
  .fare-results-dialog .fare-results{max-height:calc(100vh - 36px);padding:.72rem}
  .fare-results-dialog .fare-results-head{display:block;margin-right:2.7rem}
  .fare-results-dialog .fare-trip-toggle{margin-top:.4rem}
  .fare-results-dialog .fare-vehicle-list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.fare-results-dialog,.fare-results-dialog::backdrop{transition:none}}
@media (prefers-reduced-motion:reduce){.catalog-photo-lightbox,.catalog-photo-lightbox::backdrop{transition:none}}

/* A future-date customer can state the exact eligible car/model they prefer,
   while the quoted price remains the published category fare. */
.fare-preferred-model{display:grid;gap:.28rem;max-width:42rem;margin:0 0 .8rem;padding:.7rem .8rem;border:1px solid rgba(24,54,46,.16);border-radius:12px;background:#fffdf8;color:var(--ink);font:700 .67rem var(--sans);letter-spacing:.055em;text-transform:uppercase}
.fare-preferred-model select{width:100%;min-width:0;border:1px solid rgba(24,54,46,.22);border-radius:8px;background:#fff;color:var(--ink);padding:.62rem .7rem;font:600 .86rem var(--sans);letter-spacing:0;text-transform:none}
.fare-preferred-model small{font:400 .68rem/1.35 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.fare-results-dialog .fare-preferred-model{max-width:none;margin:0 0 .45rem;padding:.48rem .55rem;font-size:.58rem}
.fare-results-dialog .fare-preferred-model select{padding:.45rem .52rem;font-size:.72rem}
.fare-results-dialog .fare-preferred-model small{font-size:.6rem}

/* Gallery thumbnails always stay inside their card; they never show at full image size. */
.car-rental-page .catalog-photo-selector{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  min-width:0;
  padding:5px 5px 0;
  background:#fffdf8;
}

.car-rental-page .catalog-photo-thumb{
  display:grid;
  grid-template-rows:38px auto;
  gap:3px;
  min-width:0;
  margin:0;
  padding:2px;
  overflow:hidden;
  border:1px solid rgba(24,54,46,.16);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}

.car-rental-page .catalog-photo-thumb img{
  display:block;
  width:100%;
  max-width:100%;
  height:38px;
  object-fit:cover;
  border-radius:5px;
}

.car-rental-page .catalog-photo-thumb span{
  display:block;
  overflow:hidden;
  color:var(--ink);
  font:800 .48rem/1.1 var(--sans);
  letter-spacing:.02em;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.car-rental-page .catalog-photo-thumb[aria-pressed="true"]{border-color:var(--coral);box-shadow:0 0 0 1px rgba(230,109,77,.22)}

/* The model filter no longer consumes the left side of the catalogue: every desktop card is wider. */
@media(min-width:901px){
  /* Match the complete Book Any Car band to the All Cars band. */
  .car-rental-page .fare-section{
    width:90%!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:0 max(4vw,28px) .25rem!important;
    box-sizing:border-box!important;
  }
  .car-rental-page .fare-section>.service-heading{
    max-width:1360px;
    margin:.1rem auto .25rem!important;
  }
  .car-rental-page .fare-form{
    grid-template-columns:minmax(0,1.33fr) minmax(0,1.33fr) minmax(165px,.79fr) minmax(165px,.79fr);
    column-gap:.5rem;
    row-gap:.4rem;
    max-width:1360px;
    padding:.55rem!important;
  }
  .car-rental-page .fare-form .field-row{display:contents}
  .car-rental-page .fare-form .fare-location-field,
  .car-rental-page .fare-form .fare-schedule-fields>label{min-width:0}
  .car-rental-page .fare-form .fare-location-tools>*{white-space:nowrap}
  .car-rental-page .fare-form .fare-location-tools{gap:.3rem}
  .car-rental-page .fare-form .fare-location-tools small{font-size:.6rem}
  .car-rental-page .fare-form .fare-accommodation-note,
  .car-rental-page .fare-form .fare-form-actions,
  .car-rental-page .fare-form .form-status{grid-column:1/-1}
  /* The route helpers sit below the first two inputs.  Lift the compact date
     controls by the label height so all four actual input boxes share one line. */
  /* Keep the date labels level with Pickup/Destination; lift only their boxes. */
  .car-rental-page .fare-form .fare-schedule-fields>label{transform:none}
  .car-rental-page .fare-form .fare-location-field input,
  .car-rental-page .fare-form .fare-schedule-fields input{
    min-height:44px!important;
    height:44px!important;
    padding:.34rem .6rem;
    font-size:.8rem;
    box-sizing:border-box;
    border-radius:10px;
  }
  .car-rental-page .fare-form .fare-schedule-fields input{transform:translateY(-19px)}
  .car-rental-page .fare-form-actions{margin-top:0!important}

  .car-rental-page .independent-cars{
    /* Match the desktop Book Any Car band exactly.  The inner controls keep
       their 1360px readable track, while both section backgrounds share the
       same outer width. */
    width:90%!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
    padding-left:max(4vw,28px);
    padding-right:max(4vw,28px);
    padding-top:.2rem!important;
    padding-bottom:.35rem!important;
  }
  .car-rental-page .independent-cars>.service-heading{margin-bottom:.25rem!important}
  .car-rental-page .catalog-layout{display:block}
  .car-rental-page .car-model-panel{
    position:static;
    display:flex;
    align-items:center;
    gap:.45rem;
    margin:0 0 .45rem;
    padding:.42rem .6rem;
  }
  .car-rental-page .car-model-panel .eyebrow{display:none}
  .car-rental-page .car-model-panel h3{margin:0 .15rem 0 0;font-size:1rem;white-space:nowrap}
  .car-rental-page .car-model-panel>button,
  .car-rental-page .car-model-options button{
    flex:0 0 auto;
    width:auto;
    min-height:30px;
    padding:.3rem .55rem;
    border:1px solid rgba(24,54,46,.14);
    border-radius:999px;
  }
  .car-rental-page .car-model-options{display:flex;flex-wrap:wrap;gap:.45rem}
  .car-rental-page .catalog-facts{
    overflow:visible;
    min-height:0;
    line-height:1.35;
    text-overflow:clip;
    white-space:normal;
  }
  .car-rental-page .catalog-card-footer{align-items:stretch;flex-direction:column;gap:.45rem}
  .car-rental-page .catalog-card-footer .button{width:100%;justify-content:center;white-space:normal}
  .car-rental-page .catalog-toolbar{gap:.45rem;padding:.45rem;margin-bottom:.45rem}
  .car-rental-page .catalog-toolbar input,.car-rental-page .catalog-toolbar select{min-height:36px;padding:.42rem .55rem}
}

@media(max-width:900px){
  .car-rental-page .catalog-layout{grid-template-columns:1fr}
  .car-rental-page .catalog-results .independent-car-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:600px){
  /* Keep the complete mobile booking flow in one compact control line. */
  .car-rental-page .fare-section{padding-top:.24rem!important;padding-bottom:.22rem!important}
  .car-rental-page .fare-section>.service-heading{margin-bottom:.2rem!important}
  .car-rental-page .fare-section .service-heading h2{font-size:1.82rem!important}
  .car-rental-page .fare-form{
    display:grid!important;
    grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,.85fr) minmax(0,.85fr)!important;
    column-gap:3px!important;
    row-gap:.3rem!important;
    padding:.36rem!important;
    margin-bottom:.25rem!important;
  }
  .car-rental-page .fare-form .field-row{display:contents!important}
  .car-rental-page .fare-form .fare-location-field,
  .car-rental-page .fare-form .fare-schedule-fields>label{min-width:0}
  .car-rental-page .fare-form .fare-accommodation-note,
  .car-rental-page .fare-form .fare-form-actions,
  .car-rental-page .fare-form .form-status{grid-column:1/-1}
  .car-rental-page .fare-form label{min-width:0;gap:.12rem;font-size:.38rem;letter-spacing:.045em}
  .car-rental-page .fare-location-field .fare-input-wrap>label,
  .car-rental-page .fare-schedule-fields>label{font-size:0}
  .car-rental-page .fare-location-field .fare-input-wrap>label::before,
  .car-rental-page .fare-schedule-fields>label::before{display:block;color:var(--ink);font-size:.36rem;font-weight:800;letter-spacing:.045em;line-height:1;text-transform:uppercase}
  .car-rental-page .field-row:first-child .fare-location-field:first-child .fare-input-wrap>label::before{content:"Pickup"}
  .car-rental-page .field-row:first-child .fare-location-field:nth-child(2) .fare-input-wrap>label::before{content:"Destination"}
  .car-rental-page .fare-schedule-fields>label:first-child::before{content:"Start ▾"}
  .car-rental-page .fare-schedule-fields>label:last-child::before{content:"End ▾"}
  .car-rental-page .fare-form input{min-width:0;min-height:30px!important;height:30px!important;padding:.16rem .24rem!important;font-size:.46rem!important;border-radius:8px!important}
  .car-rental-page .fare-location-tools{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;width:100%;margin-top:.1rem}
  .car-rental-page .fare-location-tools small{display:none}
  .car-rental-page .fare-location-action{display:block;min-width:0!important;min-height:12px;padding:0!important;overflow:hidden;color:transparent!important;font-size:0!important;line-height:1;text-align:left;white-space:nowrap}
  .car-rental-page .fare-location-action::before{color:var(--coral);font-size:.32rem;font-weight:800;line-height:1;letter-spacing:.025em;text-transform:uppercase}
  .car-rental-page .fare-location-action[data-fare-current]::before{content:"◎ CURRENT LOCATION"}
  .car-rental-page .fare-location-action[data-fare-google-map]::before{content:"⌖ MAP"}
  .car-rental-page .fare-schedule-fields input[type="datetime-local"]{font-size:0!important;padding:0!important;text-align:center}
  .car-rental-page .fare-schedule-fields input[type="datetime-local"]::-webkit-datetime-edit{display:none}
  .car-rental-page .fare-schedule-fields input[type="datetime-local"]::-webkit-calendar-picker-indicator{margin:0;opacity:.9}
  /* Every booking control uses the same fixed label and input track. This prevents
     the hidden native date-label text from pushing Start and End lower than the
     Pickup and Destination boxes. */
  .car-rental-page .fare-location-field .fare-input-wrap>label,
  .car-rental-page .fare-schedule-fields>label{position:relative!important;display:block!important;min-height:48px!important;height:48px!important;margin:0!important;padding:0!important;font-size:0!important}
  .car-rental-page .fare-location-field .fare-input-wrap>label::before,
  .car-rental-page .fare-schedule-fields>label::before{position:absolute!important;top:0!important;left:0!important;display:block!important;height:12px!important;color:var(--ink)!important;font-size:.62rem!important;font-weight:800!important;letter-spacing:.045em!important;line-height:12px!important;white-space:nowrap}
  .car-rental-page .fare-location-field .fare-input-wrap>label>input,
  .car-rental-page .fare-schedule-fields>label>input{position:absolute!important;top:14px!important;left:0!important;width:100%!important;min-width:0!important;min-height:34px!important;height:34px!important;margin:0!important;padding:.18rem .34rem!important;font-size:.7rem!important;line-height:1.15!important;border-radius:9px!important;box-sizing:border-box!important}
  .car-rental-page .fare-schedule-fields>label>input[type="datetime-local"]{padding:0!important;font-size:0!important;text-align:center}
  .car-rental-page .fare-location-tools{margin-top:.18rem!important;gap:2px!important}
  .car-rental-page .fare-location-action{min-height:14px!important}
  .car-rental-page .fare-location-action::before{font-size:.48rem!important;letter-spacing:.02em!important}
  .car-rental-page .fare-location-tools{grid-template-columns:minmax(0,2fr) minmax(44px,1fr)!important}
  .car-rental-page .fare-location-action[data-fare-current]::before{font-size:.4rem!important;letter-spacing:0!important}
  /* Keep the date rule on the left and actions on the right in one compact row. */
  .car-rental-page .fare-accommodation-note{grid-column:1/3!important;align-self:center;margin:0!important;font-size:0;line-height:1.18}
  .car-rental-page .fare-accommodation-note::after{content:"First driver day included. Extra calendar days add driver fee; stay is extra.";font-size:.57rem;line-height:1.18}
  .car-rental-page .fare-form-actions{grid-column:3/-1!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:3px!important;margin:0!important;white-space:nowrap}
  .car-rental-page .fare-form-actions .button{min-height:30px!important;padding:.34rem .45rem!important;font-size:.6rem!important;line-height:1!important}
  .car-rental-page .fare-form-actions .button[type="submit"]{font-size:0!important}
  .car-rental-page .fare-form-actions .button[type="submit"]::before{content:"Show total";font-size:.6rem}
  .car-rental-page .fare-form-actions .button[type="submit"] span{font-size:.6rem;margin-left:.15rem}
  .car-rental-page .fare-form-actions .muted{padding-left:.5rem!important;padding-right:.5rem!important}
  /* All catalogue controls stay in one compact mobile line. */
  .car-rental-page .independent-cars{padding: .28rem 8px .38rem!important}
  .car-rental-page .independent-cars>.service-heading{margin-bottom:.18rem!important}
  .car-rental-page .independent-cars .service-heading h2{font-size:2rem!important;line-height:.9!important}
  .car-rental-page .catalog-toolbar{grid-template-columns:minmax(65px,.82fr) minmax(88px,1.45fr) minmax(65px,.82fr) minmax(65px,.82fr)!important;gap:3px;padding:.3rem .34rem;margin-bottom:.28rem}
  .car-rental-page .catalog-toolbar label{min-width:0;gap:.12rem;font-size:.58rem;letter-spacing:.045em}
  .car-rental-page .catalog-toolbar label:first-child{grid-column:auto!important}
  .car-rental-page .catalog-toolbar input,
  .car-rental-page .catalog-toolbar select{min-width:0;min-height:34px!important;height:34px;padding:0 .34rem!important;font-size:.66rem!important;line-height:1.15!important}
  .car-rental-page .catalog-results .independent-car-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .car-rental-page .independent-car-card{border-radius:12px}
  .car-rental-page .catalog-photo-stage{height:clamp(84px,28vw,120px)}
  .car-rental-page .catalog-photo-selector{gap:3px;padding:3px 3px 0}
  .car-rental-page .catalog-photo-thumb{grid-template-rows:20px auto;gap:1px;padding:1px}
  .car-rental-page .catalog-photo-thumb img{height:20px}
  .car-rental-page .catalog-photo-thumb span{font-size:.38rem;line-height:1}
  .car-rental-page .independent-car-card>div{padding:.36rem .44rem}
  .car-rental-page .catalog-meta{margin:0;font-size:.54rem;line-height:1.2}
  .car-rental-page .independent-car-card h3{margin:.16rem 0 .1rem;font-size:1.05rem;line-height:1}
  .car-rental-page .catalog-facts{font-size:.62rem;line-height:1.22}
  .car-rental-page .catalog-card-footer{gap:.2rem;padding-top:.3rem}
  .car-rental-page .catalog-card-footer p{gap:0;line-height:1.08}
  .car-rental-page .catalog-card-footer p span{font-size:.52rem;line-height:1.1}
  .car-rental-page .catalog-card-footer p strong{font-size:.92rem;line-height:1.05}
  .car-rental-page .catalog-card-footer .button{min-height:30px;padding:.38rem .34rem;font-size:.6rem}
}

/* Final mobile override: the four booking controls use two roomy rows. */
@media(max-width:600px){
  .car-rental-page .fare-form{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:6px!important;
    row-gap:.35rem!important;
    padding:.48rem!important;
  }
  .car-rental-page .fare-form .fare-location-field,
  .car-rental-page .fare-form .fare-schedule-fields>label{grid-column:auto!important}
  .car-rental-page .fare-form .fare-accommodation-note{grid-column:1!important;align-self:center!important;min-width:0!important}
  .car-rental-page .fare-form .fare-form-actions{grid-column:2!important;align-self:center!important;justify-content:flex-end!important;min-width:0!important}
  .car-rental-page .fare-form-actions .button{min-height:32px!important;padding:.38rem .52rem!important}
}

/* Always show the value selected in the native mobile date/time controls. */
@media(max-width:600px){
  .car-rental-page .fare-schedule-fields>label>input[type="datetime-local"]{
    display:block!important;
    color:var(--ink)!important;
    -webkit-text-fill-color:var(--ink)!important;
    font-size:.68rem!important;
    text-align:left!important;
    padding:.18rem .34rem!important;
  }
  .car-rental-page .fare-schedule-fields>label>input[type="datetime-local"]::-webkit-datetime-edit,
  .car-rental-page .fare-schedule-fields>label>input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper{
    display:inline-flex!important;
    color:var(--ink)!important;
    -webkit-text-fill-color:var(--ink)!important;
    font-size:.68rem!important;
  }
}

/* The card action opens a focused route selector instead of sending the user
   back to the top of the page. */
.route-picker-dialog{
  width:min(680px,calc(100vw - 28px));
  max-width:none;
  border:0;
  padding:0;
  overflow:hidden;
  border-radius:18px;
  background:var(--cream);
  color:var(--ink);
  box-shadow:0 24px 80px rgba(11,31,25,.42);
  opacity:0;
  transform:translateY(10px) scale(.98);
  transition:opacity .18s ease,transform .18s ease;
}
.route-picker-dialog::backdrop{background:rgba(8,30,23,.62);backdrop-filter:blur(4px);opacity:0;transition:opacity .18s ease}
.route-picker-dialog.is-visible{opacity:1;transform:none}
.route-picker-dialog.is-visible::backdrop{opacity:1}
.route-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.2rem 1.3rem .7rem;border-bottom:1px solid rgba(24,54,46,.12)}
.route-picker-head .eyebrow{margin:0 0 .25rem;font-size:.58rem}
.route-picker-head h2{margin:0;font:600 clamp(1.8rem,5vw,2.7rem)/1 var(--serif);letter-spacing:-.05em}
.route-picker-head h2 em{font-style:italic}
.route-picker-head p:last-child{max-width:480px;margin:.35rem 0 0;color:var(--ink-soft);font-size:.72rem;line-height:1.4}
.route-picker-close{flex:0 0 auto;border:0;background:transparent;color:var(--ink);font-size:1.8rem;line-height:1;padding:.05rem .2rem;cursor:pointer}
.route-picker-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;padding:1rem 1.3rem 1.2rem}
.route-picker-form label{display:grid;gap:.28rem;min-width:0;color:var(--ink-soft);font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.route-picker-form input{width:100%;min-width:0;min-height:42px;padding:.55rem .65rem;border:1px solid rgba(24,54,46,.18);border-radius:10px;background:#fffdf8;color:var(--ink);font:500 .82rem/1.2 var(--sans);box-sizing:border-box}
.route-picker-form input:focus{outline:2px solid rgba(230,109,77,.35);outline-offset:1px;border-color:var(--coral)}
.route-picker-note{grid-column:1/-1;margin:0;color:var(--ink-soft);font-size:.64rem;line-height:1.35}
.route-picker-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:.5rem;padding-top:.15rem}
.route-picker-actions .button{min-height:36px;padding:.5rem .75rem;font-size:.68rem}
@media(max-width:600px){
  .route-picker-dialog{width:calc(100vw - 16px);border-radius:14px}
  .route-picker-head{padding:.85rem .9rem .55rem;gap:.5rem}
  .route-picker-head h2{font-size:1.65rem}
  .route-picker-head p:last-child{font-size:.62rem}
  .route-picker-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:.48rem;padding:.75rem .9rem .9rem}
  .route-picker-form label{font-size:.5rem;letter-spacing:.055em}
  .route-picker-form input{min-height:38px;padding:.42rem .45rem;font-size:.68rem;border-radius:8px}
  .route-picker-note{font-size:.57rem}
  .route-picker-actions .button{min-height:32px;padding:.42rem .58rem;font-size:.6rem}
}
@media(prefers-reduced-motion:reduce){.route-picker-dialog,.route-picker-dialog::backdrop{transition:none}}

/* System booking request: card actions create a pending order in the admin
   workflow instead of redirecting customers to an external chat app. */
.booking-request-dialog{
  width:min(560px,calc(100vw - 28px));
  max-width:none;
  max-height:calc(100vh - 28px);
  border:0;
  padding:0;
  overflow:auto;
  border-radius:18px;
  background:var(--cream);
  color:var(--ink);
  box-shadow:0 24px 80px rgba(11,31,25,.42);
  opacity:0;
  transform:translateY(10px) scale(.98);
  transition:opacity .18s ease,transform .18s ease;
}
.booking-request-dialog::backdrop{background:rgba(8,30,23,.62);backdrop-filter:blur(4px);opacity:0;transition:opacity .18s ease}
.booking-request-dialog.is-visible{opacity:1;transform:none}
.booking-request-dialog.is-visible::backdrop{opacity:1}
.booking-request-panel{position:relative}
.booking-request-close{position:absolute;z-index:2;top:.7rem;right:.8rem;border:0;background:transparent;color:var(--ink);font-size:1.7rem;line-height:1;padding:.05rem .2rem;cursor:pointer}
.booking-request-head{padding:1.15rem 1.25rem .75rem;border-bottom:1px solid rgba(24,54,46,.12)}
.booking-request-head .eyebrow{margin:0 0 .25rem;font-size:.58rem}
.booking-request-head h2{margin:0;font:600 clamp(1.8rem,5vw,2.6rem)/1 var(--serif);letter-spacing:-.05em}
.booking-request-head h2 em{font-style:italic}
.booking-request-head p:last-child{max-width:430px;margin:.35rem 0 0;color:var(--ink-soft);font-size:.72rem;line-height:1.4}
.booking-request-summary{display:grid;gap:.18rem;margin:.75rem 1.25rem 0;padding:.7rem .8rem;border:1px solid rgba(24,54,46,.14);border-radius:11px;background:#fffdf8;color:var(--ink-soft);font-size:.68rem;line-height:1.35}
.booking-request-summary strong{color:var(--ink);font-size:.86rem}
.booking-request-summary strong:last-child{color:var(--coral);font-size:.82rem}
.booking-request-form{display:grid;gap:.7rem;padding:.85rem 1.25rem 1.15rem}
.booking-request-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.booking-request-form label{display:grid;gap:.28rem;min-width:0;color:var(--ink-soft);font-size:.58rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.booking-request-form input:not([type="checkbox"]){width:100%;min-width:0;min-height:42px;padding:.55rem .65rem;border:1px solid rgba(24,54,46,.18);border-radius:10px;background:#fffdf8;color:var(--ink);font:500 .82rem/1.2 var(--sans);box-sizing:border-box}
.booking-request-form input:focus{outline:2px solid rgba(230,109,77,.35);outline-offset:1px;border-color:var(--coral)}
.booking-request-consent{display:flex!important;flex-direction:row;align-items:flex-start;gap:.45rem;text-transform:none!important;letter-spacing:normal!important;font-size:.68rem!important;line-height:1.35}
.booking-request-consent input{appearance:auto;width:1rem;height:1rem;flex:0 0 auto;margin:.05rem 0 0;accent-color:var(--ink)}
.booking-request-note{margin:0;color:var(--ink-soft);font-size:.64rem;line-height:1.4}
.booking-request-form .button{justify-self:start;min-height:38px;padding:.52rem .75rem;font-size:.68rem}
.booking-request-form .form-status{min-height:0!important;margin:0!important;font-size:.68rem!important;line-height:1.4}
.booking-request-form .form-status.is-error{color:#a7372a!important}
.booking-request-form.is-complete> :not(.form-status){display:none!important}
@media(max-width:600px){
  .booking-request-dialog{width:calc(100vw - 16px);max-height:calc(100vh - 16px);border-radius:14px}
  .booking-request-head{padding:.85rem .9rem .6rem}
  .booking-request-head h2{font-size:1.65rem}
  .booking-request-head p:last-child{font-size:.62rem}
  .booking-request-summary{margin:.6rem .9rem 0;padding:.6rem .65rem;font-size:.6rem}
  .booking-request-form{gap:.5rem;padding:.7rem .9rem .9rem}
  .booking-request-fields{gap:.45rem}
  .booking-request-form label{font-size:.5rem;letter-spacing:.055em}
  .booking-request-form input:not([type="checkbox"]){min-height:38px;padding:.42rem .45rem;font-size:.68rem;border-radius:8px}
  .booking-request-consent{font-size:.59rem!important}
  .booking-request-note{font-size:.57rem}
  .booking-request-form .button{min-height:32px;padding:.42rem .58rem;font-size:.6rem}
}
@media(prefers-reduced-motion:reduce){.booking-request-dialog,.booking-request-dialog::backdrop{transition:none}}

/* Desktop: keep Pickup, Destination, Start and End input tracks level.  The
   mobile two-row layout remains governed by the rules above. */
@media(min-width:901px){
  .car-rental-page .fare-form .fare-location-field .fare-input-wrap>label,
  .car-rental-page .fare-form .fare-schedule-fields>label{
    display:grid!important;
    grid-template-rows:1.2em 44px!important;
    align-content:start!important;
    align-self:start!important;
    gap:.35rem!important;
    margin:0!important;
    line-height:1.2!important;
    transform:none!important;
  }
  .car-rental-page .fare-form .fare-location-field .fare-input-wrap>label>input,
  .car-rental-page .fare-form .fare-schedule-fields>label>input{
    transform:none!important;
    margin:0!important;
  }
}

/* Mobile fare results: use a real viewport-sized scroll surface so the route
   header, all four vehicle options, close control and booking buttons remain
   reachable on short phones.  The panel itself stays inside the safe screen
   bounds; only its result list scrolls. */
@media(max-width:600px){
  .fare-results-dialog{
    position:fixed!important;
    top:8px!important;
    right:8px!important;
    bottom:8px!important;
    left:8px!important;
    width:auto!important;
    height:calc(100vh - 16px)!important;
    height:calc(100dvh - 16px)!important;
    max-width:none!important;
    max-height:none!important;
    margin:auto!important;
    padding:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    z-index:1000!important;
  }
  .fare-results-dialog .fare-results{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    min-height:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain;
    padding:3.55rem .78rem 1rem!important;
  }
  .fare-results-dialog .fare-results-head{
    display:block!important;
    margin:0 0 .55rem!important;
  }
  .fare-results-dialog .fare-results-head strong{
    display:block!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    font-size:clamp(1.15rem,5.7vw,1.55rem)!important;
    line-height:1.08!important;
  }
  .fare-results-dialog .fare-results-head small{
    display:block!important;
    max-width:100%!important;
    font-size:.66rem!important;
    line-height:1.38!important;
    overflow-wrap:anywhere!important;
  }
  .fare-results-dialog .fare-trip-toggle{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:.35rem!important;
    margin-top:.55rem!important;
  }
  .fare-results-dialog .fare-trip-toggle button{
    min-height:40px!important;
    padding:.55rem .7rem!important;
    border-radius:9px!important;
    font-size:.66rem!important;
    touch-action:manipulation;
  }
  .fare-results-dialog .fare-rule{
    margin:0 0 .65rem!important;
    font-size:.69rem!important;
    line-height:1.42!important;
    overflow-wrap:anywhere!important;
  }
  .fare-results-dialog .fare-vehicle-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:.62rem!important;
  }
  .fare-results-dialog .fare-vehicle{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:.35rem .55rem!important;
    min-width:0!important;
    padding:.72rem .68rem!important;
    border-radius:12px!important;
  }
  .fare-results-dialog .fare-vehicle-empty{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .fare-results-dialog .fare-vehicle-empty>h3,
  .fare-results-dialog .fare-vehicle-empty>p{
    grid-column:1/-1!important;
    width:auto!important;
    min-width:0!important;
  }
  .fare-results-dialog .fare-vehicle h3{
    min-width:0!important;
    margin:0!important;
    overflow-wrap:anywhere!important;
    font-size:clamp(1.02rem,5.2vw,1.3rem)!important;
    line-height:1.08!important;
  }
  .fare-results-dialog .fare-total{
    min-width:86px!important;
    gap:.12rem!important;
  }
  .fare-results-dialog .fare-total span{
    font-size:.52rem!important;
    line-height:1.1!important;
  }
  .fare-results-dialog .fare-total strong{
    font-size:clamp(1.32rem,6.5vw,1.72rem)!important;
    line-height:1!important;
  }
  .fare-results-dialog .fare-total .fare-discount-note{
    max-width:9.4rem!important;
    white-space:normal!important;
    font-size:.68rem!important;
    line-height:1.18!important;
    text-align:right!important;
  }
  .fare-results-dialog .fare-approach-note{
    grid-column:1/-1!important;
    min-width:0!important;
    font-size:.64rem!important;
    line-height:1.35!important;
    overflow-wrap:anywhere!important;
  }
  .fare-results-dialog .fare-vehicle .button{
    grid-column:1/-1!important;
    justify-self:stretch!important;
    width:100%!important;
    min-height:46px!important;
    padding:.68rem .7rem!important;
    border-radius:999px!important;
    font-size:.7rem!important;
    line-height:1.15!important;
    white-space:normal!important;
    touch-action:manipulation;
  }
  .fare-results-dialog .fare-support{
    margin:.62rem 0 0!important;
    padding:.62rem .68rem!important;
    font-size:.65rem!important;
    line-height:1.38!important;
    overflow-wrap:anywhere!important;
  }
  .fare-results-close{
    top:.55rem!important;
    right:.55rem!important;
    min-width:74px!important;
    min-height:40px!important;
    justify-content:center!important;
    padding:.5rem .65rem!important;
    font-size:.62rem!important;
    touch-action:manipulation;
  }
}

@media (max-width: 600px) {
  /* Reserve room for the generated completion note below the native date
     control; this prevents it from colliding with the fare text. */
  .car-rental-page .fare-schedule-fields > label:has(.fare-auto-completion-note) {
    height: 62px !important;
    min-height: 62px !important;
  }
  .car-rental-page .fare-schedule-fields > label:has(.fare-auto-completion-note) .fare-auto-completion-note {
    position: absolute !important;
    top: 50px !important;
    left: 0 !important;
    margin: 0 !important;
  }
}

/* Final compact route/prebooking presentation. Keep the two booking panels
   close together while preserving readable labels, inputs and actions. */
.car-rental-page .shared-route-section,
.car-rental-page .fare-section {
  box-sizing: border-box;
  padding-top: .85rem !important;
  padding-bottom: .8rem !important;
}
.car-rental-page .shared-route-section > .service-heading,
.car-rental-page .fare-section > .service-heading {
  gap: 1rem !important;
  margin-bottom: .55rem !important;
}
.car-rental-page .shared-route-section .service-heading h2,
.car-rental-page .fare-section .service-heading h2 {
  line-height: .94 !important;
}
.car-rental-page .shared-route-section .service-heading > p,
.car-rental-page .fare-section .service-heading > p {
  line-height: 1.35 !important;
}
.car-rental-page .shared-route-fields .shared-location-row {
  gap: .55rem !important;
}
.car-rental-page .shared-route-fields .fare-location-tools {
  gap: .35rem !important;
  margin-top: .2rem !important;
  line-height: 1.1;
}
.car-rental-page .shared-route-section > .form-status:empty {
  display: none !important;
  min-height: 0 !important;
}
.car-rental-page .fare-section > .fare-mode-selection {
  margin: 0 auto .5rem !important;
  padding: .5rem .7rem !important;
}
.car-rental-page .fare-form {
  gap: .5rem !important;
  padding: .6rem !important;
  margin-bottom: 0 !important;
}
.car-rental-page .fare-form .field-row {
  gap: .5rem !important;
}
.car-rental-page .fare-form .fare-accommodation-note {
  margin: .25rem 0 .35rem !important;
  line-height: 1.35 !important;
}
.car-rental-page .fare-form .fare-form-actions {
  gap: .45rem !important;
  margin-top: .15rem !important;
}

@media (max-width: 700px) {
  .car-rental-page .shared-route-section,
  .car-rental-page .fare-section {
    padding-top: .45rem !important;
    padding-bottom: .45rem !important;
  }
  .car-rental-page .shared-route-section > .service-heading,
  .car-rental-page .fare-section > .service-heading {
    margin-bottom: .35rem !important;
  }
  .car-rental-page .fare-form {
    padding: .45rem !important;
    gap: .35rem !important;
  }
  .car-rental-page .fare-form .fare-accommodation-note {
    margin: .15rem 0 .2rem !important;
    line-height: 1.22 !important;
  }
}