/* ============================================================
   OVA CARS — Premium booking form reskin (container-query version)
   Everything here is scoped under .dsr_booking_form so it can
   never affect other parts of the theme. Restyles the EXISTING
   functional markup in dsrent-booking-form.php (radios, selects,
   AJAX-loaded extra services / insurance, the custom date picker
   fields) — no functional elements are renamed or removed.

   IMPORTANT: this form is rendered inside a sidebar column
   (col-lg-4) next to the car gallery/details, not full page width.
   On real desktop screens that column is only ~350–440px wide no
   matter how large the monitor is — the viewport itself is almost
   never a useful signal for how this component should lay out.

   So instead of @media (viewport width), this file uses CSS
   Container Queries (@container), which check the ACTUAL rendered
   width of .dsr_booking_form itself. That means:
     - In the sidebar, it will almost always render using the
       compact/stacked tiers below, regardless of screen size —
       which is correct, since that's genuinely all the horizontal
       room it has.
     - If this component is ever placed somewhere wider (a
       full-width page, a modal, etc.), it will automatically
       expand into the roomier multi-column tiers on its own,
       with no further changes needed.

   Container width tiers (not viewport width):
     <360px   — Small mobile / narrow sidebar (default, unprefixed)
     360px+   — Mobile
     560px+   — Rental Type becomes a swipeable row
     640px+   — Locations/dates go side-by-side
     860px+   — Full desktop layout (4-col rental type, 2-col
                extra services/insurance, 3-col indicators)
   ============================================================ */

.dsr_booking_form{
  --ov-navy:#090518;
  --ov-white:#ffffff;
  --ov-gray-bg:#f7f7fa;
  --ov-magenta:#c50075;
  --ov-magenta-2:#d50087;
  --ov-ink:#171029;
  --ov-ink-soft:#6c6879;
  --ov-ink-faint:#a5a1b0;
  --ov-border:#ececf1;
  --ov-border-strong:#e2dfe9;
  --ov-pink-tint:#fdeef6;
  --ov-pink-tint-strong:#fbdcec;
  --ov-radius-lg:20px;
  --ov-radius-md:14px;
  --ov-shadow-card:0 24px 60px rgba(9,5,24,.10), 0 4px 14px rgba(9,5,24,.05);
  --ov-touch-min:46px;
  font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Establishes the container query context: descendants below
     query THIS element's own rendered width, not the viewport. */
  container-type:inline-size;
  container-name:ovbooking;
}

.dsr_booking_form,
.dsr_booking_form *,
.dsr_booking_form *::before,
.dsr_booking_form *::after{
  box-sizing:border-box;
  min-width:0; /* prevents flex/grid children from forcing overflow */
}

/* ================= Outer card ================= */
.dsr_booking_form{
  background:var(--ov-white);
  border-radius:16px;
  box-shadow:var(--ov-shadow-card);
  padding:18px 14px;
  color:var(--ov-ink);
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
.dsr_booking_form h6{
  font-size:14.5px; font-weight:800; letter-spacing:-0.01em; color:var(--ov-ink);
}
.dsr_booking_form ul{ list-style:none; margin:0; padding:0; }

@container ovbooking (min-width:360px){
  .dsr_booking_form{ padding:22px 20px; border-radius:18px; }
  .dsr_booking_form h6{ font-size:15px; }
}
@container ovbooking (min-width:640px){
  .dsr_booking_form{ padding:28px 30px; border-radius:20px; }
  .dsr_booking_form h6{ font-size:15.5px; }
}
@container ovbooking (min-width:860px){
  .dsr_booking_form{ padding:32px 36px; }
}

/* ================= Rental Type cards ================= */
/* Narrowest tier (<360px container): single column stack */
.dsr_booking_form .rental_type_button{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:0;
}

/* 360–559px container: swipeable horizontal row, all 4 cards reachable */
@container ovbooking (min-width:360px) and (max-width:559px){
  .dsr_booking_form .rental_type_button{
    display:flex;
    grid-template-columns:none;
    gap:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    margin:0 -2px 0;
  }
  .dsr_booking_form .rental_type_button::-webkit-scrollbar{ height:4px; }
  .dsr_booking_form .rental_type_button::-webkit-scrollbar-thumb{ background:var(--ov-border-strong); border-radius:4px; }
  .dsr_booking_form .radio_rental{
    flex:0 0 68%;
    scroll-snap-align:start;
  }
}

/* 560–859px container: 2 + 2 grid */
@container ovbooking (min-width:560px) and (max-width:859px){
  .dsr_booking_form .rental_type_button{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
}

/* 860px+ container: all 4 in one row */
@container ovbooking (min-width:860px){
  .dsr_booking_form .rental_type_button{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
  }
}

.dsr_booking_form .radio_rental{
  position:relative; display:grid;
  grid-template-columns:38px 1fr; grid-template-rows:auto auto;
  column-gap:12px; row-gap:1px; align-items:center;
  border:1.5px solid var(--ov-border-strong); border-radius:var(--ov-radius-md);
  padding:14px 44px 14px 14px; cursor:pointer; background:#fff;
  transition:border-color .15s, background .15s, box-shadow .15s;
  font-weight:400; min-height:var(--ov-touch-min);
}
.dsr_booking_form .radio_rental .rt-icon{ grid-row:1 / 3; grid-column:1; }
.dsr_booking_form .radio_rental .rt-name{ grid-row:1; grid-column:2; }
.dsr_booking_form .radio_rental .rt-desc{ grid-row:2; grid-column:2; }
@container ovbooking (min-width:560px){
  .dsr_booking_form .radio_rental{
    display:flex; flex-direction:column; align-items:flex-start; gap:0;
    padding:18px 16px;
  }
  .dsr_booking_form .radio_rental .rt-icon,
  .dsr_booking_form .radio_rental .rt-name,
  .dsr_booking_form .radio_rental .rt-desc{ grid-row:auto; grid-column:auto; }
}

.dsr_booking_form .radio_rental input[type="radio"]{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; padding:0;
}
.dsr_booking_form .radio_rental:hover{ border-color:#d8b8ce; }
.dsr_booking_form .radio_rental.is-checked,
.dsr_booking_form .radio_rental:has(input:checked){
  border-color:var(--ov-magenta); background:var(--ov-pink-tint);
  box-shadow:0 6px 18px rgba(197,0,117,.12);
}

.dsr_booking_form .rt-check{
  position:absolute; top:50%; right:14px; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--ov-border-strong); background:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
@container ovbooking (min-width:560px){
  .dsr_booking_form .rt-check{ top:14px; right:14px; transform:none; }
}
.dsr_booking_form .rt-check::after{
  content:''; width:9px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg) translateY(-1px); opacity:0;
}
.dsr_booking_form .radio_rental.is-checked .rt-check,
.dsr_booking_form .radio_rental:has(input:checked) .rt-check{
  background:linear-gradient(135deg, var(--ov-magenta), var(--ov-magenta-2)); border-color:transparent;
}
.dsr_booking_form .radio_rental.is-checked .rt-check::after,
.dsr_booking_form .radio_rental:has(input:checked) .rt-check::after{ opacity:1; }

.dsr_booking_form .rt-icon{
  width:38px; height:38px; border-radius:10px; background:var(--ov-gray-bg);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  color:var(--ov-ink-soft); transition:background .15s, color .15s; margin-bottom:0;
}
@container ovbooking (min-width:560px){
  .dsr_booking_form .rt-icon{ margin-bottom:14px; }
}
.dsr_booking_form .rt-icon svg{ width:18px; height:18px; }
.dsr_booking_form .radio_rental.is-checked .rt-icon,
.dsr_booking_form .radio_rental:has(input:checked) .rt-icon{ background:#fff; color:var(--ov-magenta); }

.dsr_booking_form .rt-name{
  display:block; font-size:14.5px; font-weight:800; letter-spacing:-0.01em; color:var(--ov-ink);
  margin-bottom:1px; white-space:normal; word-break:keep-all; overflow-wrap:normal;
}
.dsr_booking_form .rt-desc{
  display:block; font-size:12px; color:var(--ov-ink-soft); font-weight:500;
  white-space:normal; overflow-wrap:break-word;
}
@container ovbooking (min-width:560px){
  .dsr_booking_form .rt-name{ font-size:15px; margin-bottom:3px; }
  .dsr_booking_form .rt-desc{ font-size:12.5px; }
}

.dsr_booking_form .rt-info-note{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--ov-gray-bg); border-radius:var(--ov-radius-md);
  padding:12px 14px; margin:12px 0 22px;
  font-size:12.5px; color:var(--ov-ink-soft); font-weight:500; line-height:1.5;
}
.dsr_booking_form .rt-info-note svg{ width:16px; height:16px; color:var(--ov-magenta); flex-shrink:0; margin-top:1px; }
@container ovbooking (min-width:560px){
  .dsr_booking_form .rt-info-note{ padding:13px 16px; margin:14px 0 30px; font-size:13px; }
  .dsr_booking_form .rt-info-note svg{ width:17px; height:17px; }
}

/* ================= Field list layout ================= */
/* Below 640px container: everything stacked, one field per row */
.dsr_booking_form ul > li.column-group-main{
  display:block; margin-bottom:18px;
}
@container ovbooking (min-width:560px){
  .dsr_booking_form ul > li.column-group-main{ margin-bottom:24px; }
}

/* 640px+ container: locations and dates go side-by-side in pairs */
@container ovbooking (min-width:640px){
  .dsr_booking_form ul{ display:flex; flex-wrap:wrap; gap:0 20px; }
  .dsr_booking_form ul > li.column-group-main{ flex:1 1 calc(50% - 10px); min-width:0; }
  .dsr_booking_form ul > li.column-group-last{ flex:1 1 100%; }
}
@container ovbooking (min-width:860px){
  .dsr_booking_form ul{ gap:0 24px; }
  .dsr_booking_form ul > li.column-group-main{ flex:1 1 calc(50% - 12px); }
}

.dsr_booking_form .input-block > label{
  display:block; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ov-ink-faint); margin-bottom:7px;
}
.dsr_booking_form .input-block > label.ov-section-label{
  text-transform:none; letter-spacing:-0.01em;
  font-size:14.5px; font-weight:800; color:var(--ov-ink); margin-bottom:12px;
}
@container ovbooking (min-width:560px){
  .dsr_booking_form .input-block > label.ov-section-label{ font-size:15px; margin-bottom:14px; }
}
@container ovbooking (min-width:560px){
  .dsr_booking_form .input-block > label{ font-size:12.5px; margin-bottom:9px; }
}

/* ================= Location fields ================= */
.dsr_booking_form .ov-location-field{
  position:relative; display:flex; align-items:center; gap:8px;
  border:1.5px solid var(--ov-border-strong); border-radius:var(--ov-radius-md);
  padding:2px 40px 2px 12px; background:#fff; transition:border-color .15s;
  min-height:var(--ov-touch-min);
}
.dsr_booking_form .ov-location-field:hover{ border-color:#d8b8ce; }
.dsr_booking_form .ov-loc-icon{
  width:34px; height:34px; border-radius:10px; background:var(--ov-pink-tint);
  display:flex; align-items:center; justify-content:center; color:var(--ov-magenta);
  pointer-events:none; flex-shrink:0;
}
.dsr_booking_form .ov-loc-icon svg{ width:16px; height:16px; }
@container ovbooking (min-width:560px){
  .dsr_booking_form .ov-location-field{ padding:2px 44px 2px 14px; }
  .dsr_booking_form .ov-loc-icon{ width:36px; height:36px; }
  .dsr_booking_form .ov-loc-icon svg{ width:17px; height:17px; }
}
.dsr_booking_form .ov-loc-chevron{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:var(--ov-ink-faint); pointer-events:none; flex-shrink:0;
}
.dsr_booking_form .ov-loc-chevron svg{ width:14px; height:14px; }
@container ovbooking (min-width:560px){
  .dsr_booking_form .ov-loc-chevron{ right:16px; }
  .dsr_booking_form .ov-loc-chevron svg{ width:15px; height:15px; }
}
.dsr_booking_form .ov-location-field select{
  appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important;
  border:none !important; box-shadow:none !important; background:none !important; background-image:none !important;
  background-color:transparent !important; flex:1 1 auto; width:auto !important; min-width:0;
  padding:14px 6px !important;
  font-size:14.5px; font-weight:700; letter-spacing:-0.01em; color:var(--ov-ink);
  font-family:inherit; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Some browsers (older Edge/IE-derived engines) render a native arrow
   via this pseudo-element even with appearance:none on the select. */
.dsr_booking_form .ov-location-field select::-ms-expand{ display:none; }
@container ovbooking (min-width:560px){
  .dsr_booking_form .ov-location-field select{ padding:15px 6px !important; font-size:15.5px; }
}
.dsr_booking_form .ov-location-field select:focus{ outline:none; box-shadow:none; }

/* This field is actually powered by Select2, which hides the real
   <select> and injects its own separate widget
   (span.select2-container) right next to it — complete with its own
   built-in arrow. That's the second/duplicate arrow: it isn't the
   native browser select arrow at all, so no amount of styling the
   <select> itself was ever going to remove it. Restyle Select2's
   widget to blend into the same box instead, and hide its arrow
   since we already show our own (.ov-loc-chevron). */
.dsr_booking_form .ov-location-field .select2-container{
  flex:1 1 auto !important; width:auto !important; min-width:0;
}
.dsr_booking_form .ov-location-field .select2-selection--single{
  background:transparent !important; border:none !important; outline:none !important;
  height:auto !important; display:flex; align-items:center;
  padding:14px 6px !important;
}
.dsr_booking_form .ov-location-field .select2-selection__rendered{
  padding:0 !important; margin:0; line-height:normal !important;
  font-size:14.5px; font-weight:700; letter-spacing:-0.01em; color:var(--ov-ink);
  font-family:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dsr_booking_form .ov-location-field .select2-selection__arrow{
  display:none !important;
}
@container ovbooking (min-width:560px){
  .dsr_booking_form .ov-location-field .select2-selection--single{ padding:15px 6px !important; }
  .dsr_booking_form .ov-location-field .select2-selection__rendered{ font-size:15.5px; }
}

/* ---- Select2 dropdown (the popup list of location options) ----
   Select2 appends this dropdown to <body> by default, not inside
   .dsr_booking_form, so it can't use the --ov-* custom properties or
   any .dsr_booking_form-scoped rule above — the brand colors are
   repeated directly here instead. This targets Select2's default
   theme classes globally, which is intentional: matching the
   dropdown to the site's own colors everywhere it appears is exactly
   what was asked for, not just within this one widget. */
.select2-dropdown{
  border-color:#e2dfe9 !important;
  border-radius:14px !important;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(9,5,24,.14);
  font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.select2-container--default .select2-results__option{
  padding:10px 14px;
  font-size:14.5px;
  font-weight:600;
  color:#171029;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:#fdeef6 !important;
  color:#c50075 !important;
}
.select2-container--default .select2-results__option[aria-selected="true"]{
  background:#c50075 !important;
  color:#fff !important;
  font-weight:700;
}
.select2-container--default .select2-search--dropdown .select2-search__field{
  border:1.5px solid #e2dfe9 !important;
  border-radius:10px !important;
  padding:8px 10px !important;
  outline:none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus{
  border-color:#c50075 !important;
}
.select2-results__option:empty,
.select2-results__message{
  color:#a5a1b0;
  font-size:13.5px;
  padding:10px 14px;
}

/* The "please select a location" validation message is markup-wise a
   sibling inside the same flex row as the icon/select/chevron — left
   alone it gets squeezed into a near-zero-width sliver and every
   character wraps onto its own line. Pull it fully out of the flex
   flow and place it as a normal full-width line below the field. */
.dsr_booking_form .ov-location-field .text-danger{
  position:absolute; left:0; right:0; top:100%;
  margin-top:6px; width:100%;
  white-space:normal; word-break:normal; overflow-wrap:normal;
  font-size:12px; line-height:1.4;
}

/* Swap button: horizontal connector between stacked fields below
   640px container width, vertical connector between side-by-side
   fields at 640px+ */
.dsr_booking_form li.column-group-main:nth-of-type(1){ position:relative; }

.dsr_booking_form .ov-swap-btn{
  display:none !important;
}

/* ================= Date / time fields ================= */
.dsr_booking_form .input-block-wrapp.sidebar-form{
  display:flex; flex-wrap:wrap; gap:10px;
}
.dsr_booking_form .input-block-wrapp .input-block{
  flex:1 1 100%; min-width:140px;
  border:1.5px solid var(--ov-border-strong); border-radius:var(--ov-radius-md);
  padding:2px 12px; background:#fff; min-height:var(--ov-touch-min);
  /* The icon and text input are flex row items sharing this box, so
     they always sit on the same vertical center — this also covers
     the time field, where the icon+input are one level deeper inside
     a .group-img wrapper (that wrapper is made a full-width flex item
     below so its own children line up the same way). */
  display:flex; align-items:center; gap:8px;
}
.dsr_booking_form .input-block-wrapp .input-block.me-2{ flex:1 1 60%; }
.dsr_booking_form .input-block-wrapp .input-block:not(.me-2){ flex:1 1 35%; }

.dsr_booking_form .input-block-wrapp .input-block .group-img{
  display:flex; align-items:center; gap:8px; width:100%;
}
/* The empty helper div some date-picker libraries expect to find in
   the DOM (.dsrent_pickup_date / .dsrent_pickoff_date) has no content
   and must not consume space in the flex row. */
.dsr_booking_form .input-block-wrapp .input-block > div:empty{
  flex:0 0 0; width:0; margin:0; padding:0;
}

@container ovbooking (min-width:320px){
  .dsr_booking_form .input-block-wrapp.sidebar-form{ flex-wrap:nowrap; gap:14px; }
}
@container ovbooking (min-width:560px){
  .dsr_booking_form .input-block-wrapp .input-block{ padding:2px 14px; }
  .dsr_booking_form .input-block-wrapp .input-block.me-2{ flex:1.4; }
  .dsr_booking_form .input-block-wrapp .input-block:not(.me-2){ flex:1; }
}

.dsr_booking_form .ov-field-icon{
  width:32px; height:32px; border-radius:9px; background:var(--ov-pink-tint);
  display:inline-flex; align-items:center; justify-content:center; color:var(--ov-magenta);
  flex-shrink:0; pointer-events:none;
}
.dsr_booking_form .ov-field-icon svg{ width:15px; height:15px; }
@container ovbooking (min-width:560px){
  .dsr_booking_form .ov-field-icon{ width:36px; height:36px; border-radius:10px; }
  .dsr_booking_form .ov-field-icon svg{ width:17px; height:17px; }
}
.dsr_booking_form input.ov-has-icon{
  border:none !important; box-shadow:none !important; background:transparent !important;
  width:100%; flex:1; min-width:0; padding:14px 4px !important;
  font-size:14px; font-weight:700; letter-spacing:-0.01em; color:var(--ov-ink);
  font-family:inherit;
}
@container ovbooking (min-width:560px){
  .dsr_booking_form input.ov-has-icon{ padding:15px 4px !important; font-size:15.5px; }
}
.dsr_booking_form input.ov-has-icon:focus{ outline:none; }

/* ================= Total duration bar ================= */
.dsr_booking_form .ov-duration-bar{
  display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:8px;
  background:var(--ov-gray-bg); border-radius:var(--ov-radius-md);
  padding:12px 14px; margin:2px 0 22px;
}
.dsr_booking_form .ov-duration-left{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dsr_booking_form .ov-duration-left svg{ width:17px; height:17px; color:var(--ov-magenta); flex-shrink:0; }
.dsr_booking_form .ov-duration-label{ font-size:13px; font-weight:700; color:var(--ov-ink-soft); }
.dsr_booking_form .ov-duration-value{ font-size:14px; font-weight:800; color:var(--ov-ink); margin-left:2px; }
.dsr_booking_form .ov-duration-note{ font-size:12px; color:var(--ov-ink-faint); font-weight:500; }
@container ovbooking (min-width:560px){
  .dsr_booking_form .ov-duration-bar{ align-items:center; padding:14px 20px; margin:2px 0 30px; }
  .dsr_booking_form .ov-duration-left svg{ width:18px; height:18px; }
  .dsr_booking_form .ov-duration-label{ font-size:13.5px; }
  .dsr_booking_form .ov-duration-value{ font-size:15px; margin-left:4px; }
  .dsr_booking_form .ov-duration-note{ font-size:12.5px; }
}

/* ================= Extra services & insurance ================= */
.dsr_booking_form .dreamsrent_extra_service{ margin-bottom:22px; }
.dsr_booking_form .wrap_item{ display:none !important; }
.dsr_booking_form .dsrent_resource{
  border:1.5px solid var(--ov-border-strong); border-radius:var(--ov-radius-md);
  padding:4px 14px; margin-bottom:10px; transition:border-color .15s, background .15s;
}
.dsr_booking_form .dsrent_resource.is-checked,
.dsr_booking_form .dsrent_resource:has(input:checked){ border-color:var(--ov-magenta); background:var(--ov-pink-tint); }

@container ovbooking (min-width:860px){
  /* Roomier horizontal cards, two per row. h6 and the trailing
     .wrap_item spacer span the full width; each .dsrent_resource
     card takes one grid cell. */
  .dsr_booking_form .dreamsrent_extra_service{
    display:grid; grid-template-columns:repeat(2,1fr); gap:4px 16px; align-items:start;
  }
  .dsr_booking_form .dreamsrent_extra_service > h6,
  .dsr_booking_form .dreamsrent_extra_service > .wrap_item{
    grid-column:1 / -1;
  }
}

.dsr_booking_form .custom_check{
  display:flex; align-items:center; gap:12px; padding:12px 0; cursor:pointer;
  font-size:14px; font-weight:700; letter-spacing:-0.01em; color:var(--ov-ink);
  position:relative; flex-wrap:wrap; min-height:var(--ov-touch-min);
}
.dsr_booking_form .custom_check::before{
  content:''; width:36px; height:36px; border-radius:6px; background:var(--ov-gray-bg);
  flex-shrink:0;
  /* Generic add-on icon (a "+") — fallback for any service name that
     doesn't match a specific keyword below. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C50075' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8V16M8 12H16' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:18px;
}
/* Child Safety Seats — car seat icon */
.dsr_booking_form .dsrent_resource[data-icon="seat"] .custom_check::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C50075' stroke-width='1.8'%3E%3Cpath d='M9 4C7.9 4 7 4.9 7 6V11C7 12.1 6.1 13 5 13V17C5 18.1 5.9 19 7 19H17C18.1 19 19 18.1 19 17V15C19 13.3 17.7 12 16 12H13C11.9 12 11 11.1 11 10V6C11 4.9 10.1 4 9 4Z' stroke-linejoin='round'/%3E%3Cpath d='M8 19V20.5M16 19V20.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Wi-Fi Hotspot — signal icon */
.dsr_booking_form .dsrent_resource[data-icon="wifi"] .custom_check::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C50075' stroke-width='1.8'%3E%3Cpath d='M4 9C8.9 4.5 15.1 4.5 20 9' stroke-linecap='round'/%3E%3Cpath d='M7 12.5C10 9.8 14 9.8 17 12.5' stroke-linecap='round'/%3E%3Cpath d='M10 16C11.4 14.7 12.6 14.7 14 16' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='19' r='1.1' fill='%23C50075' stroke='none'/%3E%3C/svg%3E");
}
/* Navigation — map pin with route */
.dsr_booking_form .dsrent_resource[data-icon="nav"] .custom_check::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C50075' stroke-width='1.8'%3E%3Cpath d='M12 3L20 7.5L12 21L4 7.5L12 3Z' stroke-linejoin='round'/%3E%3Cpath d='M12 3V13' stroke-linecap='round'/%3E%3C/svg%3E");
}
@container ovbooking (min-width:560px){
  .dsr_booking_form .custom_check{ gap:14px; padding:13px 0; font-size:15px; }
  .dsr_booking_form .custom_check::before{ width:40px; height:40px; background-size:19px; }
}
.dsr_booking_form .custom_check input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  order:0; margin:0; width:22px; height:22px; min-width:22px; min-height:22px;
  border:1.8px solid var(--ov-border-strong); border-radius:6px !important;
  background:#fff; cursor:pointer; position:relative; flex-shrink:0;
}
.dsr_booking_form .custom_check input[type="checkbox"]:checked{
  background:var(--ov-magenta); border-color:var(--ov-magenta);
}
.dsr_booking_form .custom_check input[type="checkbox"]:checked::after{
  content:''; position:absolute; left:50%; top:44%;
  transform:translate(-50%,-50%) rotate(45deg);
  width:6px; height:10px;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
}
.dsr_booking_form .custom_check .checkmark{ display:none; }

.dsr_booking_form .insurance-options{ display:flex; flex-direction:column; gap:10px; }
@container ovbooking (min-width:860px){
  .dsr_booking_form .insurance-options{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 16px; }
}
.dsr_booking_form .insurance-option{
  border:1.5px solid var(--ov-border-strong); border-radius:var(--ov-radius-md);
  padding:13px 14px; display:flex; align-items:center; gap:12px;
  transition:border-color .15s, background .15s; min-height:var(--ov-touch-min);
}
.dsr_booking_form .insurance-option.is-checked,
.dsr_booking_form .insurance-option:has(input:checked){ border-color:var(--ov-magenta); background:var(--ov-pink-tint); }
.dsr_booking_form .insurance-option input[type="radio"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:20px; height:20px; min-width:20px; margin:0;
  border:1.8px solid var(--ov-border-strong); border-radius:6px !important;
  background:#fff; cursor:pointer; flex-shrink:0; position:relative;
}
.dsr_booking_form .insurance-option input[type="radio"]:checked{
  background:var(--ov-magenta); border-color:var(--ov-magenta);
}
.dsr_booking_form .insurance-option input[type="radio"]:checked::after{
  content:''; position:absolute; left:50%; top:45%;
  transform:translate(-50%,-50%) rotate(45deg);
  width:5px; height:9px;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
}
.dsr_booking_form .insurance-option span{
  font-size:14px; font-weight:700; letter-spacing:-0.01em; color:var(--ov-ink);
  white-space:normal; overflow-wrap:break-word;
}
@container ovbooking (min-width:560px){
  .dsr_booking_form .insurance-option{ padding:14px 16px; }
  .dsr_booking_form .insurance-option span{ font-size:14.5px; }
}

/* ================= Deposit / booking notes ================= */
.dsr_booking_form .booking-info.pay-amount{
  background:var(--ov-gray-bg); border-radius:var(--ov-radius-md); padding:16px 16px; margin-bottom:22px;
}
@container ovbooking (min-width:560px){
  .dsr_booking_form .booking-info.pay-amount{ padding:18px 20px; margin-bottom:26px; }
}
.dsr_booking_form .dsrent-type-deposit label{ font-weight:700; font-size:13.5px; }
@container ovbooking (min-width:560px){
  .dsr_booking_form .dsrent-type-deposit label{ font-size:14px; }
}
.dsr_booking_form .dsrent-pay-deposit,
.dsr_booking_form .dsrent-pay-depositwithfull{ accent-color:var(--ov-magenta); }
.dsr_booking_form .title-deposite{ display:flex; flex-wrap:wrap; gap:6px; }

/* ================= Trust banner ================= */
.dsr_booking_form .ov-trust-banner{
  position:relative; overflow:hidden;
  background:linear-gradient(115deg, var(--ov-pink-tint) 0%, #fff5fa 60%, var(--ov-pink-tint) 100%);
  border:1px solid var(--ov-pink-tint-strong); border-radius:16px;
  padding:16px 16px; margin:6px 0 6px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.dsr_booking_form .ov-trust-shield{
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(135deg, var(--ov-magenta), var(--ov-magenta-2));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 8px 18px rgba(197,0,117,.28);
}
.dsr_booking_form .ov-trust-shield svg{ width:20px; height:20px; }
.dsr_booking_form .ov-trust-copy{ flex:1; min-width:180px; }
.dsr_booking_form .ov-trust-title{
  font-size:14px; font-weight:800; letter-spacing:-0.01em; margin-bottom:3px; color:var(--ov-ink);
}
.dsr_booking_form .ov-trust-sub{ font-size:12px; color:var(--ov-ink-soft); font-weight:600; }
.dsr_booking_form .ov-trust-car{ display:none; }
@container ovbooking (min-width:560px){
  .dsr_booking_form .ov-trust-banner{ padding:22px 26px; gap:18px; border-radius:16px; }
  .dsr_booking_form .ov-trust-shield{ width:48px; height:48px; border-radius:13px; }
  .dsr_booking_form .ov-trust-shield svg{ width:23px; height:23px; }
  .dsr_booking_form .ov-trust-title{ font-size:15.5px; }
  .dsr_booking_form .ov-trust-sub{ font-size:12.5px; }
}
@container ovbooking (min-width:860px){
  .dsr_booking_form .ov-trust-car{ display:block; width:150px; opacity:.95; flex-shrink:0; }
}

/* ================= CTA button ================= */
.dsr_booking_form .check-available{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(120deg, var(--ov-magenta) 0%, var(--ov-magenta-2) 100%) !important;
  border:none !important; border-radius:12px !important;
  color:#fff !important; font-family:inherit; font-size:14.5px; font-weight:800; letter-spacing:-0.01em;
  padding:0 12px !important; margin-top:16px;
  box-shadow:0 10px 22px rgba(197,0,117,.24);
  height:var(--ov-touch-min); min-height:var(--ov-touch-min); width:100%;
}
@container ovbooking (min-width:560px){
  .dsr_booking_form .check-available{ font-size:15px; margin-top:20px; }
}
.dsr_booking_form .ov-cta-icon{ width:16px; height:16px; flex-shrink:0; }

.dsr_booking_form .btn-theme{
  height:var(--ov-touch-min); min-height:var(--ov-touch-min);
  border-radius:12px !important; font-size:14.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* ================= Trust indicators ================= */
/* Removed per request — kept in the HTML (harmless) but hidden here
   rather than editing the PHP template again for a pure display
   change. */
.dsr_booking_form .ov-indicators{
  display:none !important;
}
@container ovbooking (min-width:400px) and (max-width:859px){
  .dsr_booking_form .ov-indicators{ grid-template-columns:repeat(2,1fr); }
}
@container ovbooking (min-width:860px){
  .dsr_booking_form .ov-indicators{
    grid-template-columns:repeat(3,1fr); gap:24px; margin-top:26px; padding-top:26px;
  }
}
.dsr_booking_form .ov-indicator{ display:flex; align-items:flex-start; gap:12px; }
.dsr_booking_form .ov-indicator-icon{
  width:38px; height:38px; border-radius:11px; background:var(--ov-gray-bg);
  display:flex; align-items:center; justify-content:center; color:var(--ov-magenta); flex-shrink:0;
}
.dsr_booking_form .ov-indicator-icon svg{ width:18px; height:18px; }
.dsr_booking_form .ov-indicator-title{
  font-size:13.5px; font-weight:800; letter-spacing:-0.01em; margin-bottom:2px; color:var(--ov-ink);
  white-space:normal; overflow-wrap:break-word;
}
.dsr_booking_form .ov-indicator-desc{
  font-size:12px; color:var(--ov-ink-soft); font-weight:500; line-height:1.5;
  white-space:normal; overflow-wrap:break-word;
}
@container ovbooking (min-width:560px){
  .dsr_booking_form .ov-indicator-icon{ width:42px; height:42px; }
  .dsr_booking_form .ov-indicator-icon svg{ width:20px; height:20px; }
  .dsr_booking_form .ov-indicator-title{ font-size:14px; }
  .dsr_booking_form .ov-indicator-desc{ font-size:12.5px; }
}

/* ================= Safety net: no runaway content ================= */
.dsr_booking_form img,
.dsr_booking_form svg{ max-width:100%; height:auto; }
.dsr_booking_form input,
.dsr_booking_form select,
.dsr_booking_form button{ max-width:100%; }

/* The main content column (under the car gallery/photos, next to
   this booking form) has its OWN separate, unstyled "Extra Service"
   block — a leftover plain list, distinct from the properly styled
   Extra Service section inside the booking form above. Removed per
   request. This selector is intentionally outside .dsr_booking_form
   since that block lives in the main content column, not inside the
   booking form itself. */
.review-sec.extra-service{
  display:none !important;
}
.review-sec.policy-documents{
  display:none !important;
}
/* Add to Wishlist button in the car title/header area, above the
   gallery — unrelated to the booking form itself, hidden per request. */
.wishlist-button{
  display:none !important;
}

/* Fallback for browsers without container query support (very old
   Safari/Firefox/Chrome): fall back to viewport width so the layout
   at least doesn't visually break, even though it won't be as
   precisely tuned to the sidebar's real width. */
@supports not (container-type: inline-size){
  @media (min-width:992px){
    .dsr_booking_form{ padding:22px 20px; }
    .dsr_booking_form .rental_type_button{ display:grid; grid-template-columns:1fr; }
  }
}