/* ===================================================================
 RESERVATION WIZARD — 5 step booking flow
 Scoped under .resv. Every custom property is declared on the block
 itself, never on :root.

 THREE SURFACE LEVELS carry the hierarchy, which is what the old light
 design got right:
   1. panel      the step card
   2. group      an inset sub panel for a question and its answers
   3. control    the input itself, lighter again, with an icon addon
 Nothing else is boxed. A field that is not inside a group sits flat on
 the panel, so the eye can tell a grouped question from a loose one.

 WHAT WAS KEPT ON PURPOSE, because reservations_scripts.php drives it:
 step ids, .quote-tabs .one-way .hourly .round-trip, .fromFields,
 .whenPickupFromCity/Airport/Cruise, .dropFields, .drop-off-fields,
 .whenDropOffCity/Airport/Cruise, .returnFields,
 .whenReturnPickupFromCity/Airport/Cruise, #stopFields, #addStops,
 #addChildFields, #childSeatFields, #numberofhr, #pax_details,
 #reservationOverviewLeft/Right, .item, #demo, nextBtn-2, prevBtn-2,
 submit_green, and every input id and name.

 Anything the script show()s or hide()s stays a plain block, because
 jQuery .show() writes display:block and that would kill a grid there.
 =================================================================== */
.resv {
  --rv-bg: #0a0908;
  --rv-panel: #121110;
  --rv-bar: #000;
  --rv-group: #1b1916;
  --rv-control: #211f1a;
  --rv-control-2: #2a2721;
  --rv-icon: #171512;
  --rv-text: #f5f3f0;
  --rv-muted: #a49d93;
  --rv-soft: #6f6a62;
  --rv-line: rgba(255, 255, 255, 0.09);
  --rv-line-2: rgba(255, 255, 255, 0.14);
  --rv-grad: linear-gradient(
    330deg,
    var(--brand-color2, #e8c37a) 12%,
    var(--brand-color, #b4903f) 88%
  );
  --rv-gold: var(--brand-color, #b4903f);
  --rv-gold-2: var(--brand-color2, #e8c37a);
  --rv-on-gold: #14100a;
  --rv-error: #c0392b;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  background: var(--rv-bg);
  color: var(--rv-text);
  font-family: var(--primary-font, ui-sans-serif, system-ui, sans-serif);
  padding: clamp(40px, 5vw, 68px) 0 clamp(56px, 7vw, 96px);
  color-scheme: dark;
}

.resv *,
.resv *::before,
.resv *::after {
  box-sizing: border-box;
}

/* -------------------------------------------------------------------
   LEGACY CLASS NEUTRALISER
   These names stay on the markup only because the script targets them,
   and style.css styles several of them. Stripped back here. Every
   component rule below is written as ".resv .thing" so it matches this
   specificity and wins on source order.
   ------------------------------------------------------------------- */
.resv .fromFields,
.resv .dropFields,
.resv .returnFields,
.resv .drop-off-fields,
.resv .setup-content-2,
.resv .quote-tabs,
.resv .move_btn,
.resv .outer_userform,
.resv .item,
.resv .one-way,
.resv .hourly,
.resv .round-trip,
.resv #demo,
.resv .select-inline,
.resv .hide-arrow,
.resv .daySelect,
.resv .yearSelect,
.resv .monthSelect,
.resv .validate,
.resv .nextBtn-2,
.resv .prevBtn-2,
.resv .submit_green {
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
  color: inherit;
  float: none;
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: 0;
  text-align: inherit;
  text-shadow: none;
}

.resv .resv__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 20px;
}

.resv .resv__intro {
  max-width: 720px;
  margin: 0 auto 34px;
  text-align: center;
  color: var(--rv-muted);
  font-size: 15.5px;
  line-height: 1.75;
}

/* ---------------- panel ---------------- */
.resv .resv__panel {
  border: 1px solid var(--rv-line);
  border-radius: 16px;
  background: var(--rv-panel);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* the black title bar, the one element carried over from the old design */
.resv .resv__bar {
  padding: 18px 24px;
  background: var(--rv-bar);
  border-bottom: 1px solid var(--rv-line);
  text-align: center;
}

.resv .resv__bar h2 {
  margin: 0;
  font-family: var(--header-font, ui-serif, Georgia, serif);
  font-weight: 400;
  font-size: clamp(18px, 2.1vw, 23px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rv-gold-2);
}

.resv .resv__body {
  padding: 24px clamp(18px, 2.6vw, 28px) 8px;
}

/* ---------------- segmented trip selector ---------------- */
.resv .resv__tabs {
  display: flex;
  margin-bottom: 22px;
  border: 1px solid var(--rv-line-2);
  border-radius: 10px;
  overflow: hidden;
}

.resv .resv__tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 10px;
  background: var(--rv-group);
  color: var(--rv-muted);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    background-color 0.22s ease,
    color 0.22s ease;
}

.resv .resv__tab + .resv__tab {
  border-left: 1px solid var(--rv-line-2);
}

.resv .resv__tab i {
  font-size: 14px;
  color: var(--rv-gold);
}

.resv .resv__tab:hover {
  color: #fff;
}

/* the script may mark the chosen tab with either class */
.resv .resv__tab.active,
.resv .resv__tab.selected {
  background: var(--rv-grad);
  color: var(--rv-on-gold);
}

.resv .resv__tab.active i,
.resv .resv__tab.selected i {
  color: var(--rv-on-gold);
}

/* ---------------- inset group ---------------- */
.resv .resv__group {
  padding: 20px clamp(16px, 2vw, 22px) 6px;
  margin-bottom: 22px;
  border: 1px solid var(--rv-line);
  border-radius: 12px;
  background: var(--rv-group);
}

.resv .resv__group-title {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

/* an input sitting inside a group needs to stay lighter than the group */
.resv .resv__group .resv__control {
  background: var(--rv-control-2);
}

/* ---------------- layout ---------------- */
.resv .resv__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.resv .resv__row--one {
  grid-template-columns: minmax(0, 1fr);
}

.resv .resv__col--full {
  grid-column: 1 / -1;
}

/* ---------------- fields ---------------- */
.resv .resv__label {
  display: block;
  margin: 0 0 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--rv-muted);
}

.resv .resv__control {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--rv-line);
  border-radius: 9px;
  background: var(--rv-control);
  transition: border-color 0.22s ease;
}

.resv .resv__control:focus-within {
  border-color: color-mix(
    in srgb,
    var(--brand-color, #b4903f) 60%,
    transparent
  );
}

.resv .resv__control.has-error {
  border-color: var(--rv-error);
}

.resv .resv__icon {
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rv-icon);
  border-right: 1px solid var(--rv-line);
  color: var(--rv-gold);
  font-size: 15px;
}

.resv .resv__input,
.resv .resv__select {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-family: inherit;
  font-size: 15.5px;
  line-height: 48px;
}

.resv .resv__select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 30px;
  cursor: pointer;
}

.resv .resv__control--select {
  position: relative;
}

.resv .resv__control--select::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -5px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--rv-muted);
  border-bottom: 2px solid var(--rv-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.resv .resv__select option {
  background: #16140f;
  color: #fff;
}

.resv .resv__input::placeholder,
.resv .resv__textarea::placeholder {
  color: var(--rv-soft);
}

.resv .resv__input:focus,
.resv .resv__select:focus,
.resv .resv__textarea:focus {
  outline: none;
  box-shadow: none;
}

.resv .resv__textarea {
  flex: 1 1 auto;
  width: 100%;
  min-height: 120px;
  padding: 13px 14px;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.6;
  resize: vertical;
}

/* segmented date and time, dividers instead of gaps so they read as one */
.resv .resv__control--split .resv__select {
  flex: 1 1 0;
  width: auto;
  text-align: center;
  padding: 0 8px;
}

.resv .resv__control--split .resv__select + .resv__select {
  border-left: 1px solid var(--rv-line);
}

.resv .resv__control--split .resv__colon {
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
  color: var(--rv-soft);
  background: var(--rv-icon);
}

.resv .resv__hint {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--rv-soft);
}

/* ---------------- question head with segmented answer ----------------
   The question sits left, its answers sit right as one attached control.
   This is the change that stops each group eating a full row. */
.resv .resv__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.resv .resv__group-head .resv__group-title {
  margin: 0;
}

.resv .resv__seg {
  display: inline-flex;
  flex-wrap: nowrap;
  border: 1px solid var(--rv-line-2);
  border-radius: 8px;
  background: var(--rv-control);
  overflow: hidden;
}

.resv .resv__seg-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 0;
  color: var(--rv-muted);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.resv .resv__seg-item + .resv__seg-item {
  border-left: 1px solid var(--rv-line-2);
}

/* the radio still posts, it just is not drawn */
.resv .resv__seg-item input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.resv .resv__seg-item i {
  font-size: 14px;
  color: var(--rv-gold);
}

.resv .resv__seg-item:hover {
  background: var(--rv-control-2);
  color: #fff;
}

/* is-on is set by the small script below, so this works even where :has
   is unsupported and also when the wizard sets a value programmatically */
.resv .resv__seg-item.is-on,
.resv .resv__seg-item:has(input:checked) {
  background: var(--rv-grad);
  color: var(--rv-on-gold);
}

.resv .resv__seg-item.is-on i,
.resv .resv__seg-item:has(input:checked) i {
  color: var(--rv-on-gold);
}

.resv .resv__seg-item:has(input:focus-visible) {
  outline: 2px solid var(--rv-gold-2);
  outline-offset: -2px;
}

/* a segmented control that is not paired with a title */
.resv .resv__seg--block {
  margin-bottom: 16px;
}

/* ---------------- inline checkbox rows ---------------- */
.resv .resv__check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--rv-muted);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

.resv .resv__check:hover {
  color: #fff;
}

.resv .resv__check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--rv-gold);
  cursor: pointer;
}

/* toggled wrappers stay plain blocks so jQuery show() cannot break them */
.resv .resv__reveal {
  display: block;
}

/* ---------------- child seat rows ---------------- */
.resv .resv__seat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

/* ---------------- vehicle cards ---------------- */
.resv .resv__cars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.resv .resv__car {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 18px 22px;
  border: 1px solid var(--rv-line);
  border-radius: 12px;
  background: var(--rv-group);
  transition: border-color 0.28s ease;
}

.resv .resv__car:hover {
  border-color: color-mix(
    in srgb,
    var(--brand-color, #b4903f) 50%,
    transparent
  );
}

.resv .resv__car img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 14px;
  border-radius: 8px;
}

.resv .resv__car h3 {
  margin: 0 0 12px;
  font-family: var(--header-font, ui-serif, Georgia, serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.25;
  color: #fff;
}

.resv .resv__specs {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-bottom: 16px;
}

.resv .resv__spec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 1px solid var(--rv-line);
  border-radius: 999px;
  background: var(--rv-control);
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}

.resv .resv__spec i {
  color: var(--rv-gold);
  font-size: 12.5px;
}

.resv .resv__pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 12px 32px;
  border-radius: 999px;
  background: var(--rv-grad);
  color: var(--rv-on-gold);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

.resv .resv__pick:hover,
.resv .resv__pick:focus {
  color: var(--rv-on-gold);
  text-decoration: none;
}

/* ---------------- overview ----------------
   The markup here is generated by reservations_scripts.php, which prints
   an <i> icon, a bold label and then the value as a text node. So the row
   is a block with the icon absolutely placed, the label stacked small and
   muted above, and the value inheriting the row colour. That way it works
   whether or not a given row has an icon. */
.resv .resv__reviewnote {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--rv-muted);
}

/* ---------------- overview ----------------
   One full width column of group cards. The two <ul> elements are still
   in the markup because the script targets them by id, but everything is
   appended to the left one and the right one is hidden when empty. Two
   columns of stacked groups always left one column tall and the other
   half empty, which is what made it read badly.

   Inside a group the rows are an auto fitting grid, so short values sit
   three or four across and long ones take the room they need. The hairline
   grid is drawn by giving the list a 1px gap over a line coloured
   background, which stays neat whatever the row count. */
.resv .resv__overview {
  display: block;
  margin-bottom: 18px;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}

.resv .resv__overview #reservationOverviewLeft,
.resv .resv__overview #reservationOverviewRight {
  display: block;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  float: none !important;
  width: auto !important;
}

.resv .resv__overview #reservationOverviewLeft:empty,
.resv .resv__overview #reservationOverviewRight:empty {
  display: none !important;
}

/* ---- group card ---- */
.resv .resv__overview .rsv-ov__group {
  display: block;
  list-style: none;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 1px solid var(--rv-line) !important;
  border-radius: 10px !important;
  background: var(--rv-group) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.resv .resv__overview .rsv-ov__group:last-child {
  margin-bottom: 0 !important;
}

.resv .resv__overview .rsv-ov__title {
  display: block;
  margin: 0;
  padding: 11px 16px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--rv-line);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rv-gold-2);
}

/* ---- rows inside a group ---- */
.resv .resv__overview .rsv-ov__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--rv-line);
}

.resv .resv__overview .rsv-ov__row {
  display: block;
  list-style: none;
  float: none;
  margin: 0 !important;
  padding: 11px 16px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--rv-group) !important;
  box-shadow: none !important;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.resv .resv__overview .rsv-ov__label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rv-soft);
}

.resv .resv__overview .rsv-ov__icon {
  flex: 0 0 auto;
  width: 13px;
  text-align: center;
  color: var(--rv-gold);
  font-size: 11px;
}

.resv .resv__overview .rsv-ov__value {
  display: block;
  font-size: 15px;
  color: #fff;
}

/* a long free text value takes the whole row rather than one narrow cell */
.resv .resv__overview .rsv-ov__row--wide {
  grid-column: 1 / -1;
}

.resv .resv__overview .rsv-ov__empty {
  display: block;
  padding: 18px;
  color: var(--rv-soft);
  font-size: 14px;
}

/* ---------------- captcha and nav ---------------- */
.resv .resv__captcha {
  display: none;
  padding: 0 clamp(18px, 2.6vw, 28px) 6px;
}

.resv .resv__captcha.is-shown {
  display: block;
}

.resv .resv__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px clamp(18px, 2.6vw, 28px) 24px;
  border-top: 1px solid var(--rv-line);
  background: #0e0d0c;
}

.resv .resv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 36px;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.resv .resv__btn--next {
  margin-left: auto;
  background: var(--rv-grad);
  color: var(--rv-on-gold);
}

.resv .resv__btn--next:hover,
.resv .resv__btn--next:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px
    color-mix(in srgb, var(--brand-color, #b4903f) 32%, transparent);
  outline: none;
}

.resv .resv__btn--back {
  background: transparent;
  border: 1px solid var(--rv-line-2);
  color: var(--rv-muted);
}

.resv .resv__btn--back:hover {
  color: #fff;
  border-color: color-mix(
    in srgb,
    var(--brand-color, #b4903f) 50%,
    transparent
  );
}

/* honeypot */
.resv .resv__hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  overflow: hidden;
}

/* ---------------- responsive ---------------- */
@media (max-width: 767px) {
  .resv .resv__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }

  .resv .resv__tabs {
    flex-direction: column;
  }

  .resv .resv__tab + .resv__tab {
    border-left: 0;
    border-top: 1px solid var(--rv-line-2);
  }

  .resv .resv__cars,
  .resv .resv__seat {
    grid-template-columns: minmax(0, 1fr);
  }

  .resv .resv__overview .rsv-ov__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .resv .resv__body {
    padding: 20px 16px 6px;
  }

  /* on a phone the control drops under its question and fills the row */
  .resv .resv__group-head {
    align-items: flex-start;
    gap: 12px;
  }

  .resv .resv__seg {
    width: 100%;
  }

  .resv .resv__seg-item {
    flex: 1 1 0;
    justify-content: center;
    padding: 11px 6px;
    font-size: 12.5px;
  }

  .resv .resv__seg-item i {
    font-size: 13px;
  }

  .resv .resv__group {
    padding: 18px 14px 4px;
  }

  .resv .resv__nav {
    padding: 18px 16px 22px;
  }

  .resv .resv__btn {
    width: 100%;
  }

  .resv .resv__btn--next {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resv .resv__tab,
  .resv .resv__seg-item,
  .resv .resv__control,
  .resv .resv__car,
  .resv .resv__btn {
    transition: none;
  }

  .resv .resv__btn--next:hover {
    transform: none;
  }
}