/*
 * wheego CD theme for the Wheelsys booking engine.
 *
 * Extracted 2026-09-17 from the <style> block the vendor injects inside #wheelsbook,
 * so the brand styling lives in this repository and can be changed without a vendor
 * ticket.
 *
 * THIS FILE IS THE DELIBERATE EXCEPTION to the rule in wheelsys-shell.css that no
 * selector may target anything inside #wheelsbook. That rule protects our own chrome
 * from the vendor's markup changing under it. This file is the opposite thing: it IS
 * the vendor's theme, taken into our keeping on purpose. Keep the two files separate
 * so the distinction stays obvious - shell styling in wheelsys-shell.css, engine
 * theming here.
 *
 * Because it styles the vendor's subtree, it is coupled to their markup by design.
 * When the engine updates, expect to re-check the selectors here; that is the price
 * of owning the theme, and it is why nothing else in this plugin does the same.
 *
 * ORDERING: the vendor used to inject its own copy of this theme as a <style> element
 * inside #wheelsbook at runtime, which landed AFTER this stylesheet in document order
 * and silently won every identical selector. That copy was removed from the Wheelsys
 * account on or before 2026-09-24 and this file now takes effect. If an edit here ever
 * appears to do nothing again, check for that <style> before anything else.
 *
 * SPECIFICITY: what still beats us is the engine's own stylesheet, which is served
 * cross-origin - the browser will not let you read it, so `curl` it with a Referer
 * header instead of guessing. Several of its selectors carry two ids AND two classes
 * (`div.bookEngRoot.bookingengine2024 #WheelsBookingEngineWrapper #...`), which outranks
 * a two-id rule here. Measure the computed value after every change; a rule that lost
 * looks exactly like a rule that was never written. See CLAUDE.md.
 */

/* ===== wheego CD theme ===== */
/*
 * The --wg-* palette is not declared here: it is on .wheelsys-shell in
 * wheelsys-shell.css, which wraps #wheelsbook, so the engine inherits it and the shell's
 * toggle - outside #wheelsbook - can use the same tokens. Moved there 2026-10-20.
 */
#wheelsbook {
  --button-background-color: var(--wg-yellow);
  --button-color: var(--wg-purple);

  /*
   * The engine gives its root a 10px top margin. The root has no background, so that
   * margin was a strip of the hero image showing between the site header and the
   * widget. Removed 2026-09-30; the margin-bottom is left alone, because
   * seatToggleAgainstEngine measures it.
   */
  margin-top: 0;
}

/* ===== Header row: nudged clear of the site header ===== */
/*
 * "Already Booked? / Manage your booking" sat 10px under the site header, close
 * enough to read as attached to it.
 *
 * Offset with position/top rather than margin or padding, deliberately: those two
 * would add to the engine's height, and this must not make the widget taller. A
 * relative offset moves only what is painted, so every measurement below the row is
 * untouched - verified at 1200px and 390px, shell height identical either way.
 *
 * 12px is chosen against the space that is already empty: the row's band is 58px tall
 * and holds a 42px button, and the card beneath opens with 20px of padding, so the
 * shifted button still clears the first form field by 24px on a phone.
 *
 * The engine puts the button flush against the viewport's right edge. The padding
 * lines it up with the search card's right edge instead - 20px on desktop, and 12px
 * below 1024px, where the card sits 12px in (measured at 390px).
 */
#wheelsbook .navigation-bar {
  position: relative;
  top: 12px;
  padding-right: 20px;
}
@media (max-width: 1023px) {
  #wheelsbook .navigation-bar {
    padding-right: 12px;
  }
}

/* ===== Header buttons: "Manage your booking" / "New booking" ===== */
/*
 * The text colour is set through --button-color, not `color`, because bengine.css
 * declares `color: var(--button-color) !important` on these links. Our plain `color:
 * #fff` always lost to that and only looked right while the variable happened to be
 * white; once the "No red" block below made it purple, the label vanished into the
 * purple fill (2026-10-20). Setting the variable on the element itself turns the
 * vendor's own important declaration white, with no !important of ours.
 */
#wheelsbook #ManageBooking.wbeButton,
#wheelsbook #wbeManageBack.wbeButton {
  --button-color: #fff;
  background: var(--wg-purple);
  border-radius: 10px;
  transition: background-color .15s;
}
#wheelsbook #ManageBooking.wbeButton:hover,
#wheelsbook #wbeManageBack.wbeButton:hover {
  background: var(--wg-purple-dark);
}

/* ===== Search form ===== */
#wheelsbook #wheelsbookingEnginesearch {
  background: #fff;
  border: 1px solid var(--wg-purple-line);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(70, 57, 124, 0.08);
}
/*
 * The label names the field; the answer inside it is the content. So the label is
 * muted and the answer carries the text colour - see "Values vs prompts" below.
 *
 * They were both #2A2540 at 600 until 2026-09-24, and once the answers went up to
 * 600 to read as answers, the two became the same style: 14.4px and 15px, same
 * weight, same colour, so "Pick-up Date:" and "24/09/2026" sat there as a pair of
 * equals. Separating them by weight instead was tried and rejected - this font has
 * no step between 400 and 600 (see below), so the label dropped straight to regular
 * and the form lost its structure. Colour is the axis with room in it.
 *
 * The weight stays 600: a quiet label still has to look like a label.
 */
#wheelsbook #WheelsBookingEngineWrapper #wheelsbookingEnginesearch label,
#wheelsbook #WheelsBookingEngineWrapper #wheelsbookingEnginesearch .WebString_Text_DriverAge,
#wheelsbook #WheelsBookingEngineWrapper #wheelsbookingEnginesearch .WebString_Text_Coupon {
  color: var(--wg-muted) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
#wheelsbook #wheelsbookingEnginesearch .wbeInputContainer {
  border: 1px solid var(--wg-purple-line);
  border-radius: 6px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
#wheelsbook #wheelsbookingEnginesearch .wbeInputContainer:hover {
  border-color: var(--wg-purple-line-hover);
}
#wheelsbook #wheelsbookingEnginesearch .wbeInputContainer:focus-within {
  border-color: var(--wg-purple);
  box-shadow: 0 0 0 3px rgba(70, 57, 124, 0.15);
}
#wheelsbook #wheelsbookingEnginesearch .wbeInputIcon,
#wheelsbook #wheelsbookingEnginesearch .wbeInputElement {
  background-color: transparent;
  outline: none;
}
#wheelsbook #wheelsbookingEnginesearch .wbeInputIcon {
  color: var(--wg-text);
}
/* the text inside the fields is set further down - see "Values vs prompts" */
/*
 * The selects run to the field's right edge, so the browser's native arrow sat against the
 * border. Shrinking the select moves the arrow in, which does not depend on how each browser
 * places its arrow relative to padding. 10px puts it about as far in as the icon on the left. Not in
 * the open state - there the select is the dropdown list, and this would narrow it.
 */
#wheelsbook #wheelsbookingEnginesearch .wbeInputContainer:not(.selectActiveContainer) select.wbeInputElement {
  margin-right: 10px;
}
#wheelsbook #wheelsbookingEnginesearch .searchClick {
  background: var(--wg-yellow);
  color: var(--wg-purple);
  border-radius: 10px;
  transition: background-color .15s;
}
#wheelsbook #wheelsbookingEnginesearch .searchClick:hover,
#wheelsbook #wheelsbookingEnginesearch .searchClick:focus-visible {
  background: var(--wg-yellow-dark);
}

/* ===== Values vs prompts ===== */
/*
 * An answered field must not look like an unanswered one.
 *
 * The engine paints every field in the search form the same grey whether it
 * holds a value or not - `color: #808285; font-weight: 300` - and it styles no
 * ::placeholder anywhere, so the browser's own placeholder grey (#757575 in
 * Chrome) lands within three points of it. Live that means the dates, the
 * times, the driver's age and a station the visitor has just picked all read as
 * prompts nobody has answered yet. Reported 2026-09-24.
 *
 * So a value now carries the body text colour and a little more weight, and the
 * prompt is stated rather than left to the browser, one clear step lighter.
 *
 * THE WEIGHT IS 600 BECAUSE 500 IS NOT A WEIGHT HERE. The engine asks for Roboto,
 * which is not installed on a stock Mac or Windows, so the stack falls through to
 * Helvetica/Arial - three faces, not nine. Measured by rendering the same string at
 * each weight: 300 is 221.67px, 400 and 500 are both 225.05, 600 and 700 are both
 * 228.07. A 500 here is a 400 with extra steps; 600 is the first step that shows.
 * Measure again before nudging this, rather than assuming the number means anything.
 *
 * THE SELECTORS CARRY A THIRD ID ON PURPOSE. The vendor declares that grey at
 * `div.bookEngRoot.bookingengine2024 #WheelsBookingEngineWrapper
 * #wheelsbookingEnginesearch input` - two ids and two classes - which outranks
 * the two-id rules above and made them lose in silence: the same rule's colour
 * landed on .wbeInputIcon and not on .wbeInputElement, which is what the split
 * up there records. `#wheelsbook` is the engine root, so naming it is free and
 * beats their rule on id count without spending !important, which would also
 * beat our own later rules (the sidebar and phone blocks at the end of this
 * file both restyle these fields).
 *
 * Checkout (#clientInformation) is themed nowhere else in this file; it is here
 * because it is the same defect from the same declaration, and it is the view
 * where someone types their own name and email.
 */
#wheelsbook #WheelsBookingEngineWrapper #wheelsbookingEnginesearch .wbeInputElement,
#wheelsbook #WheelsBookingEngineWrapper #BookingSearch .wbeInputElement,
#wheelsbook #WheelsBookingEngineWrapper #clientInformation .wbeInputElement {
  color: var(--wg-text);
  font-weight: 600;
}
#wheelsbook #WheelsBookingEngineWrapper #wheelsbookingEnginesearch .wbeInputElement::placeholder,
#wheelsbook #WheelsBookingEngineWrapper #BookingSearch .wbeInputElement::placeholder,
#wheelsbook #WheelsBookingEngineWrapper #clientInformation .wbeInputElement::placeholder {
  color: var(--wg-muted);
  font-weight: 400;
  opacity: 1;                     /* Firefox fades placeholders on top of the colour */
}
/*
 * A dropdown with nothing chosen is showing a prompt too, and it has no
 * ::placeholder to say so - checkout opens with three of them ("Country",
 * "Issue Country" twice), all sitting on an empty option. Without this they
 * would read as answers, which is the same confusion the other way round.
 * The search form's dropdowns always carry a real value, so nothing there
 * matches.
 */
#wheelsbook #WheelsBookingEngineWrapper #wheelsbookingEnginesearch select.wbeInputElement:has(option[value=""]:checked),
#wheelsbook #WheelsBookingEngineWrapper #BookingSearch select.wbeInputElement:has(option[value=""]:checked),
#wheelsbook #WheelsBookingEngineWrapper #clientInformation select.wbeInputElement:has(option[value=""]:checked) {
  color: var(--wg-muted);
  font-weight: 400;
}

/* ===== Results belong to a booking view, and only to a booking view ===== */
/*
 * Navigating back from #CarResults sometimes left the results panel on screen -
 * usually the "no cars found" message - sitting under a restored search form.
 *
 * The engine does try to hide it (GotoNavStep hides #responseResults when the new
 * hash is empty), and in four controlled runs it succeeded. It is a race in its own
 * asynchronous rendering, which is why the leftover appears only sometimes and why
 * chasing the exact interleaving was not worth it.
 *
 * So state it as a rule instead of relying on the race: results are visible only
 * while the shell is in a booking view. `.is-enhanced` gates it so that with
 * JavaScript off - when nothing ever sets `is-booking` - the engine keeps its native
 * behaviour rather than losing its results permanently.
 *
 * The list is not the whole results view. The "SHOWING 28/28 VEHICLES / FILTERS" bar
 * is #wbeFiltersMenu, a SIBLING of #responseResults rather than a child, so covering
 * only the list left that bar stranded under the restored search form after back -
 * reported 2026-09-22 with a screenshot. The original rule read as though it covered
 * "the results" when it covered one div.
 *
 * `!important` is load-bearing for the bar: the engine leaves `style="display: block"`
 * on #wbeFiltersMenu, and an inline declaration outranks a stylesheet one. Traced by
 * walking up from #wbeNumVehs - a first attempt without it changed nothing, and the
 * element stayed visible while reporting exactly the computed style it had before.
 *
 * Named individually rather than hiding every sibling: the engine keeps its other step
 * panels and #HelpSection in the same parent, and some are legitimately visible in the
 * search view. #responseResultsFilterContainer looks like it belongs here by its name
 * and does not - it is display:none even inside a booking view. If another step's
 * chrome turns up stranded after back, verify it is actually visible first, then add
 * its id here; do not widen this to the parent.
 */
.wheelsys-shell.is-enhanced:not(.is-booking) #responseResults,
.wheelsys-shell.is-enhanced:not(.is-booking) #wbeFiltersMenu {
  display: none !important;
}

/* ===== No-results message ===== */
#wheelsbook #responseResults .warningIndicator {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 16px 0 0;
  padding: 14px 20px 14px 56px;
  border: 1px solid var(--wg-purple-line);
  border-radius: 10px;
  background: var(--wg-purple-tint);
  color: var(--wg-text);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}
#wheelsbook #responseResults .warningIndicator br:nth-last-of-type(-n+2) {
  display: none;
}
#wheelsbook #responseResults .warningIndicator i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  color: var(--wg-purple);
  font-weight: 400;
  font-size: 20px !important;
  line-height: 1;
}
#wheelsbook #responseResults .warningIndicator i::before {
  content: "\f05a";
}
@media (min-width: 1024px) {
  #wheelsbook #responseResults .warningIndicator {
    margin-top: 0;
  }
}

/* ===== Manage booking (#managebook) ===== */
#wheelsbook #BookingSearch {
  box-sizing: border-box;
  padding: 32px 24px;
  background: #fff;
  border: 1px solid var(--wg-purple-line);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(70, 57, 124, 0.08);
}
#wheelsbook #BookingSearchForm {
  max-width: 520px;
  margin: 0 auto;
}
#wheelsbook #BookingSearch h4 {
  padding: 0 0 20px;
  color: var(--wg-purple);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}
#wheelsbook #BookingSearch .wbeInputContainer {
  margin-bottom: 12px;
  border: 1px solid var(--wg-purple-line);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
#wheelsbook #BookingSearch .wbeInputContainer:hover {
  border-color: var(--wg-purple-line-hover);
}
#wheelsbook #BookingSearch .wbeInputContainer:focus-within {
  border-color: var(--wg-purple);
  box-shadow: 0 0 0 3px rgba(70, 57, 124, 0.15);
}
#wheelsbook #BookingSearch .wbeInputContainer.is-invalid {
  border-color: var(--wg-error);
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.12);
}
#wheelsbook #BookingSearch .wbeInputIcon {
  flex: 0 0 44px;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: transparent;
}
#wheelsbook #BookingSearch .wbeInputIcon i {
  color: var(--wg-text);
  font-weight: 400;               /* outlined icons, like the search form */
  font-size: 17px;
}
#wheelsbook #BookingSearch .wbeInputElement {
  height: 46px;
  padding: 0 12px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  outline: none;
}
/* its colour is set with the other field text - see "Values vs prompts" */

/* "Booking not found" status: same calm info panel */
#wheelsbook #wbefindresStatus {
  /*
   * The engine fixes this at 50px with !important, which holds one line. Two lines of German
   * ran out of the box onto the buttons below (measured 2026-10-07: 69px of content in 50).
   */
  height: auto !important;
  min-height: 12px;
  padding: 0;
}
#wheelsbook #wbefindresStatus:not(:empty) {
  position: relative;
  margin: 4px 0 16px;
  padding: 12px 16px 12px 44px;
  border: 1px solid var(--wg-purple-line);
  border-radius: 10px;
  background: var(--wg-purple-tint);
  color: var(--wg-text);
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}
#wheelsbook #wbefindresStatus i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--wg-purple);
  font-weight: 400;
}
#wheelsbook #wbefindresStatus i::before {
  content: "\f05a";               /* warning triangle → info circle */
}

/* Back (secondary) + Search (primary) */
#wheelsbook #BookingSearch .wbeBookedButtonContainer {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
#wheelsbook #BookingSearch .wbeBookedButton {
  min-width: 140px;
  height: 46px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
#wheelsbook #BookingSearch #wbeFindyourBooking {
  background: var(--wg-yellow);
  color: var(--wg-purple);
}
#wheelsbook #BookingSearch #wbeFindyourBooking:hover {
  background: var(--wg-yellow-dark);
}
#wheelsbook #BookingSearch #wbebookedBackBtn {
  background: #fff;
  border-color: var(--wg-purple-line);
  color: var(--wg-purple);
}
#wheelsbook #BookingSearch #wbebookedBackBtn:hover {
  border-color: var(--wg-purple);
  background: var(--wg-purple-tint);
}

/* ===== Time dropdowns (open state) ===== */
#wheelsbook #wheelsbookingEnginesearch .wbeInputContainer.selectActiveContainer,
#wheelsbook #wheelsbookingEnginesearch .wbeInputContainer.selectActiveContainer:focus-within {
  min-height: 46px;                 /* keeps the layout from jumping */
  border-color: transparent;
  box-shadow: none;
  transition: none;
}
#wheelsbook #wheelsbookingEnginesearch .selectActiveContainer select {
  box-sizing: border-box;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--wg-purple-line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(70, 57, 124, 0.15);
  color: var(--wg-text);
  scrollbar-width: thin;
  scrollbar-color: var(--wg-purple-line) transparent;
}
#wheelsbook #wheelsbookingEnginesearch .selectActiveContainer select option {
  height: auto !important;          /* vendor forces 44px */
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  color: var(--wg-text);
  line-height: 20px !important;     /* vendor forces 54px */
  cursor: pointer;
}
/* the vendor sets background-color with !important, so these use background-image */
#wheelsbook #wheelsbookingEnginesearch .selectActiveContainer select option:hover {
  background-image: linear-gradient(var(--wg-purple-tint), var(--wg-purple-tint));
}
#wheelsbook #wheelsbookingEnginesearch .selectActiveContainer select option:checked {
  background-image: linear-gradient(var(--wg-yellow), var(--wg-yellow));
  color: var(--wg-purple) !important;
  font-weight: 600;
}

/* White canvas behind the whole widget */
#wheelsbook #bookingEngine.search-bar {
  display: flow-root;               /* contains the floated form + results */
  box-sizing: border-box;
  padding: 20px;
  background: #fff;
  border-radius: 14px;
}

@media (min-width: 1024px) {
  #wheelsbook #responseResults {
    max-height: calc(100vh - 120px);   /* 120px ≈ your fixed header */
    overflow-y: auto;
    overscroll-behavior: contain;      /* stops scroll from passing to the page */
    scrollbar-width: thin;
    scrollbar-color: var(--wg-purple-line) transparent;
  }

  #wheelsbook #wheelsbookingEnginesearch.wheelsbookingEnginesearchCompact {
    position: sticky;
    top: 120px;
  }
}

/*
 * ...except in a booking view, where the widget IS the page.
 *
 * The rule above gives the results their own scroller, which is right while the
 * widget sits inside a normal page. Once the page around it is hidden, that scroller
 * becomes a trap: measured with a 2475px list, the box still rendered at 780px and
 * the page had 52px of travel, with `overscroll-behavior: contain` refusing to pass
 * the scroll on when the inner list ran out. The page reads as frozen.
 *
 * Letting the results run full height puts the scrolling back on the page - the same
 * 2475px list then gives 1747px of page travel - and the search form stays sticky, so
 * the sidebar still pins while the results move past it.
 *
 * Two IDs in the selector, deliberately: the rule above is `#wheelsbook
 * #responseResults`, and a class-based override loses to it on specificity. Verified -
 * `.wheelsys-shell.is-booking #responseResults` alone changed nothing.
 */
.wheelsys-shell.is-booking #wheelsbook #responseResults {
  max-height: none;
  overflow-y: visible;
  overscroll-behavior: auto;
}

/* ===== Phone and tablet: the open form has to fit the screen ===== */
/*
 * Divi pins this widget's module on scroll, and a fixed panel does not move when the
 * page does. At the engine's own spacing the open form made that module 859px on a
 * 390x844 phone, so SEARCH sat at y=851 and no scroll reached it - measured at scroll
 * 100, 200, 300, 400 and 600, and at the page's full 13,694px. The widget could not be
 * used at all.
 *
 * The sibling Karve widget on the production site does not have this problem because
 * its open form fits: 594px in the same 844px viewport. It buys that mostly with one
 * layout decision - date and time share a row - and that is the decision copied here.
 * Two rows saved take the module from 859 to 691, which clears the same screen by 74px.
 *
 * Nothing is removed to get there, and no touch target shrinks: the input boxes stay at
 * the engine's 46px, against the 44px minimum a finger needs, and only the space between
 * them is tightened (5/15 -> 4/8 per row, 10 -> 6 per group, 20 -> 12 of card padding).
 * The desktop block below does shrink the boxes, because a mouse is not a finger.
 *
 * The date row needs `!important` on all three properties. The engine lays those two
 * boxes out as block elements with an explicit width, and both declarations are
 * important in its own stylesheet, so without it the row silently stays stacked while
 * reporting `display: flex` on the parent - which is exactly how it failed twice here.
 *
 * Measured after: 390x844 -> 691 (fits, 74px spare), 360x640 -> 681 (does not fit; the
 * shell collapses itself rather than trapping the visitor - see wheelsys-shell.js),
 * 768x1024 -> the engine's own two-column layout, which already pairs date with time and
 * is unchanged by this. No clipped values and no horizontal overflow at any of the three.
 */
@media (max-width: 1023px) {
  #wheelsbook #wheelsbookingEnginesearch .wbeInputContainer {
    margin-top: 4px !important;
    margin-bottom: 8px !important;
  }
  #wheelsbook #wheelsbookingEnginesearch .wbeAddressSection,
  #wheelsbook #wheelsbookingEnginesearch .calendarWrapper {
    margin-bottom: 6px;
  }
  #wheelsbook #wheelsbookingEnginesearch #wbeDriverAgeContainer,
  #wheelsbook #wheelsbookingEnginesearch #wbeCouponContainer {
    padding-top: 14px;
  }
  #wheelsbook #wheelsbookingEnginesearch #wbeDriverAgeContainer {
    margin-bottom: 6px;
  }
  #wheelsbook #wheelsbookingEnginesearch .WebString_Text_DriverAge,
  #wheelsbook #wheelsbookingEnginesearch .WebString_Text_Coupon {
    font-size: 14.4px;                 /* the size every real label in the form uses */
  }

  /* Date and time on one row, as the sibling widget does. */
  #wheelsbook #wheelsbookingEnginesearch .wbeDatepickerContainer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  #wheelsbook #wheelsbookingEnginesearch .wbeDatepickerContainer > .wbeInputContainer {
    flex: 1 1 50% !important;
    width: auto !important;            /* the engine pins these to a pixel width */
    min-width: 0 !important;
  }
  #wheelsbook #wheelsbookingEnginesearch .wbeDatepickerContainer > .calendarContainer {
    margin-right: 8px !important;
  }

  #wheelsbook #bookingEngine.search-bar {
    padding: 12px;
  }
}

/* ===== Sidebar density ===== */
/*
 * The sidebar form is a companion to the results, not the page's main event, and at the
 * engine's default spacing it was taller than most laptop viewports: 740px, measured
 * steady at every width from 1024 to 1680. That cost it its pinning (see the threshold
 * below) and made a narrow column of eight controls read as the heavier half of the
 * screen next to the cars.
 *
 * Tightened to 600px by taking 8px off each control and 8px off each gap - nothing is
 * removed, no font shrinks, and the 47px SEARCH AGAIN button is left at full size as the
 * one thing that should stay easy to hit. Per row: 46 -> 38 for the box, 5/15 -> 4/8 for
 * the margins around it; per group: 10 -> 6 of gap below it.
 *
 * The last two rows need their own treatment, because "Driver's age:" and "Coupon:" are
 * not labels at all - they are spans inside the icon box, floated up over the row by a
 * margin-top of -70px. That offset is measured against the box's centre, so shrinking the
 * box dragged both captions up with it: 5px of air above "Driver's age:" against the 14px
 * every real label gets, and "Coupon:" overlapping the age field by a pixel. The fix
 * restores the rhythm on the same two numbers everything else uses - 14px above a caption,
 * 3px below it - by re-floating them (-61px) over a row that now opens 14px lower, and
 * gives the age group the 6px of gap below it that the engine never gave it at all. They
 * land at 13.3 and 4.3, not 14 and 3: the last fraction is the caption's own line box and
 * is not worth chasing. Their 13.5px is matched to the 14.4px of the real labels at the
 * same time, since nothing distinguishes these two fields from the others.
 *
 * `!important` on the margins only, deliberately: the engine's own stylesheet declares
 * them important, and this rule's two ids do not outrank that on their own - the heights
 * land without it, the margins silently did not. It is the vendor's own CSS being beaten
 * here, not ours, so the narrowest possible use of it.
 *
 * Compact only, and desktop only. The full-width landing form is the page's main event
 * and keeps the engine's spacing; below 1024 the form is the whole width of a phone and
 * has no results beside it to compete with.
 */
@media (min-width: 1024px) {
  #wheelsbook #wheelsbookingEnginesearch.wheelsbookingEnginesearchCompact .wbeInputContainer {
    height: 38px;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
  }
  #wheelsbook #wheelsbookingEnginesearch.wheelsbookingEnginesearchCompact .wbeInputContainer .wbeInputIcon {
    height: auto;                      /* stretch to the box instead of the engine's 44px */
  }
  #wheelsbook #wheelsbookingEnginesearch.wheelsbookingEnginesearchCompact .wbeInputContainer .wbeInputElement {
    height: 36px;
    line-height: 36px;                 /* the engine centres the value with line-height */
  }
  #wheelsbook #wheelsbookingEnginesearch.wheelsbookingEnginesearchCompact .wbeAddressSection,
  #wheelsbook #wheelsbookingEnginesearch.wheelsbookingEnginesearchCompact .calendarWrapper {
    margin-bottom: 6px;
  }
  #wheelsbook #wheelsbookingEnginesearch.wheelsbookingEnginesearchCompact #wbeDriverAgeContainer,
  #wheelsbook #wheelsbookingEnginesearch.wheelsbookingEnginesearchCompact #wbeCouponContainer {
    padding-top: 14px;
  }
  #wheelsbook #wheelsbookingEnginesearch.wheelsbookingEnginesearchCompact #wbeDriverAgeContainer {
    margin-bottom: 6px;                /* the engine gives this group no gap at all */
  }
  #wheelsbook #wheelsbookingEnginesearch.wheelsbookingEnginesearchCompact .WebString_Text_DriverAge,
  #wheelsbook #wheelsbookingEnginesearch.wheelsbookingEnginesearchCompact .WebString_Text_Coupon {
    margin-top: -61px;
    font-size: 14.4px;
  }
}

/*
 * Pin the sidebar form only where the whole of it fits. Never give it a scroller.
 *
 * `position: sticky` above assumes the thing it pins fits on screen, and this one did
 * not: at the engine's own spacing the compact form measured a steady 740px at every
 * width from 1024 to 1680, so pinned at top:120 it needed an 880px viewport. On anything
 * shorter it ran past the bottom edge and SEARCH AGAIN - the sidebar's primary action -
 * was unreachable at every scroll position, because scrolling moves the results past a
 * form that does not move.
 *
 * 1.13.0 fixed that by capping the form to the viewport and letting it scroll itself.
 * That worked, and introduced a worse problem: it made the sidebar a nested scroll
 * container a third of the screen wide and the full height of it. Browsers latch a
 * scroll gesture to the scroller it starts in rather than chaining to the page, so a
 * visitor whose pointer is anywhere over the sidebar cannot scroll the results at all.
 * Reported 2026-09-21 as "I can't scroll through the results"; observed here as the form
 * absorbing to its 80px limit while the page stayed at 0 for six consecutive wheel ticks.
 *
 * So: no cap, and no pinning where a cap would be needed. Above the threshold the form
 * fits under the offset and sticks with nothing to overflow; below it the form simply
 * scrolls away with the page, which reaches every part of it including the footer.
 * Either way there is no second scroller for a gesture to get caught in.
 *
 * 740px = 600 (form, after the density rules above) + 120 (the sticky offset) + 20
 * (bottom gutter), down from 880px while the form was 740 at the engine's own spacing.
 * This number is derived from the form's height and nothing else, so re-measure BOTH
 * together: too low a threshold brings the unreachable button back. Verified at exactly
 * the threshold - the form pins at top 120, ends 20px clear of the bottom edge.
 *
 * Compact only. The non-compact form is the full-width one on the landing view, which is
 * not sticky and must keep growing with the page.
 */
@media (min-width: 1024px) and (max-height: 739px) {
  #wheelsbook #wheelsbookingEnginesearch.wheelsbookingEnginesearchCompact {
    position: static;
  }
}

/* ===== Booking view: a centred card, striped rows, a raised rate ===== */
/*
 * Ticket #454, after the reference at selectarentacar.com/de#selectPrice. That site runs
 * the same engine (3.24) and adds no CSS of its own for this: its stripes, its 55px rows
 * and its raised column are the engine's stock bengine.css. Its narrow column is just
 * its page. Ours loads the vendor's newLook.css on top (`bookingengine2024`), which is
 * why none of that showed here and why it is stated in full below rather than trusted.
 *
 * The card. Every booking step ran edge to edge - at 1512px wide, #dealoptions put the
 * extras list and the summary 20px from either side of the screen, with a product name
 * a full screen-width away from its price. Capped at 1200 and centred, the margins grow
 * past that instead of the content; under 1248 it keeps 24px either side. It is the
 * engine's own wrapper, so the same card holds results, extras, checkout and
 * confirmation - one container for the whole flow, which is what was asked.
 *
 * The page behind a booking view is white (it is hidden - see hidePageAround), so the
 * card is set apart by the same lifted purple shadow as the search form, a touch
 * stronger because it is a much larger surface.
 *
 * Desktop and booking view only. Below 1024 the card would just eat the phone's width,
 * and outside a booking view the engine is a form inside someone else's page layout.
 */
@media (min-width: 1024px) {
  .wheelsys-shell.is-booking #wheelsbook #WheelsBookingEngineWrapper {
    box-sizing: border-box;
    width: calc(100% - 48px);
    max-width: 1200px;
    margin: 24px auto 40px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 32px rgba(70, 57, 124, 0.12);
  }
}

/*
 * Extras and insurance rows, striped, at every width. The ticket scoped the stripes to
 * desktop; they were extended to phones on 2026-10-20 at Osman's request, because a
 * phone is where a name and its price sit furthest apart relative to the screen.
 *
 * Each row is a flex box of the description and its +/- buttons, so the stripe runs from
 * one to the other and ties a name to its quantity across the gap - the same job the
 * stripes do in the rate table.
 *
 * The engine separates them with a 1px rule and 10px of margin instead; a stripe and a
 * rule together read as a table drawn twice, so the rule goes. :nth-of-type counts the
 * row divs and skips the category heading, which is a span. Each group (insurance,
 * extras) counts afresh, so both open on a tinted row.
 *
 * `!important` on the margin and padding only: bengine.css declares exactly those two
 * important on `.WheelsContainer .NonInclusive`. Without it the border went and the box
 * model stayed - the text sat flush against the stripe's edge.
 */
#wheelsbook #WheelsBookingEngineWrapper .ChargeType > .NonInclusive {
  box-sizing: border-box;
  align-items: center;
  margin: 0 !important;
  padding: 12px 16px !important;
  border-bottom: 0;
  border-radius: 6px;
}
#wheelsbook #WheelsBookingEngineWrapper .ChargeType > .NonInclusive:nth-of-type(odd) {
  background: var(--wg-purple-tint);
}
#wheelsbook #WheelsBookingEngineWrapper .ChargeType > .NonInclusive:nth-of-type(even) {
  background: #fff;
}

/*
 * The rate comparison on a phone is different markup: one rate at a time, picked by tabs
 * (.dealPackageMobileTitle), each row a single <li> holding the description and its value.
 * newLook.css blanks its stock stripes the same way it does the desktop table's, and
 * rules a line under each row, so both are restated here. It is display:none on desktop,
 * which is why this needs no media query. Like the desktop table, not yet seen on our
 * account; verified on Selecta's page with our newLook.css loaded.
 */
#wheelsbook #WheelsBookingEngineWrapper .dealPackagesMobileContainer ul li {
  border-bottom: 0;
}
#wheelsbook #WheelsBookingEngineWrapper .dealPackagesMobileContainer ul li:nth-child(odd) {
  background: var(--wg-purple-tint);
}
#wheelsbook #WheelsBookingEngineWrapper .dealPackagesMobileContainer ul li:nth-child(even) {
  background: #fff;
}

@media (min-width: 1024px) {
  /*
   * The rate comparison (#priceOption_<group>): only drawn when a car has more than one
   * rate plan. NOT YET SEEN ON OUR ACCOUNT - on 2026-10-19 every car tried at Marrakesch
   * and Zakynthos went straight to #dealoptions without it. These rules were verified by
   * loading our newLook.css and this file into Selecta's live #selectPrice page, so check
   * them again on our own page the first time a car offers two rates.
   *
   * The table is columns, not rows: one <ul> of descriptions, then one <ul> per rate,
   * each <li> a cell. Rows line up only because every cell has the same height, which
   * is also what lets each column's stripes continue the next one's into a single band.
   * The engine breaks that itself: bengine.css gives description cells `height: auto`,
   * so a description that wraps grows while its checkmarks stay at 55px, and every row
   * below it slips. So the height is fixed for all cells, and the cell is a flex box
   * that centres its content - a description wrapping to two lines (38px of text in 55)
   * stays level with its checkmarks. Three lines would not fit; no label we have comes
   * near that at this width. The rate cells carry `line-height: 55px` inline; centring
   * does not care.
   *
   * newLook.css (the vendor's 2024 look, which our account loads and Selecta's does not)
   * turns the stock stripes off with `background: transparent`, draws a 1px rule under
   * each cell, and makes every rate column its own bordered card 2% from the next. Each
   * of those cuts a row's band into pieces, so each is undone here.
   */
  #wheelsbook #WheelsBookingEngineWrapper .dealPackagesContainer li {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 55px;
    min-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
    line-height: 1.25;
  }
  #wheelsbook #WheelsBookingEngineWrapper .dealPackagesContainer .dealPackagesDescription,
  #wheelsbook #WheelsBookingEngineWrapper .dealPackagesContainer .dealPackagesItem {
    margin-left: 0;
    border: 0;
  }
  #wheelsbook #WheelsBookingEngineWrapper .dealPackagesItem li {
    justify-content: center;
  }
  #wheelsbook #WheelsBookingEngineWrapper .dealPackagesContainer li:nth-child(odd) {
    background: var(--wg-purple-tint);
  }
  #wheelsbook #WheelsBookingEngineWrapper .dealPackagesContainer li:nth-child(even) {
    background: #fff;
  }

  /*
   * The chosen rate stands up off the table. The engine moves `dealPackagesItemActive`
   * to whichever column was picked, so the highlight follows the choice with no script
   * of ours, and it is a class rather than :hover so it stays when the pointer leaves.
   * It is the whole column, title to button.
   *
   * z-index lifts it over its neighbours' stripes so the shadow lies on them rather
   * than under them; the shadow is soft enough at 24px that it tints their edge without
   * hiding a value.
   */
  #wheelsbook #WheelsBookingEngineWrapper .dealPackagesItem {
    position: relative;
    border-radius: 6px;
    transition: box-shadow .15s;
  }
  #wheelsbook #WheelsBookingEngineWrapper .dealPackagesItem.dealPackagesItemActive {
    z-index: 2;
    background: #fff;
    box-shadow: 0 6px 24px 4px rgba(70, 57, 124, 0.18);
  }
}

/* ===== Booking summary: the car's "Ändern" on a line of its own ===== */
/*
 * bengine.css lifts the car block's change link 35px (`#OptionsMenu
 * #wbeDealOptionsSummaryButtonContainerCar { margin-top: -35px }`) so it sits beside the
 * car's title. In our sidebar the block is narrower than the engine assumes, and the lift
 * lands it on the spec row instead - "Schaltgetriebe" and "ÄNDERN" printed over each
 * other (reported 2026-10-20). Dropping the lift leaves it right-aligned under the specs,
 * which is how the rental-information block's own "Ändern" sits a few lines above.
 * Three ids to beat the vendor's two.
 */
#wheelsbook #OptionsMenu #wbeDealOptionsSummaryButtonContainerCar {
  margin-top: 0;
}

/* ===== No red: the vendor's palette, restated in ours ===== */
/*
 * The booking steps were red (#ED1C24) although the top of this file sets the button
 * colours on #wheelsbook. newLook.css declares its own palette one level deeper, on
 * #WheelsBookingEngineWrapper and .WheelsContainer, and the nearer declaration wins, so
 * ours only ever reached the search form. Restated here, two ids deep, it reaches every
 * step at once: results, extras, driver details, start-over. Decided with Osman
 * 2026-10-20 - main actions yellow on purple like SEARCH, small controls purple, prices
 * purple, and red kept for one thing only: errors.
 */
#wheelsbook #WheelsBookingEngineWrapper,
#wheelsbook .WheelsContainer {
  --button-background-color: var(--wg-yellow);
  --button-background-color-hover: var(--wg-yellow-dark);
  --button-color: var(--wg-purple);
  --button-color-hover: var(--wg-purple);
  --featured-background-color: var(--wg-yellow);
  --oldRate-color: var(--wg-muted);
  --invalid-input-color: var(--wg-error);
}

/*
 * The vendor also uses the button colour as TEXT colour - on the summary's "Ändern"
 * links, the final price, the rate-picker labels - which as yellow on white would be
 * unreadable. Those take the purple; the links keep the vendor's underline.
 */
#wheelsbook #WheelsBookingEngineWrapper #dealOptions .wbeDealOptionsSummaryButtonContainer button,
#wheelsbook #WheelsBookingEngineWrapper #dealOptions .wbeDealOptionsSummaryButtonContainer button span,
#wheelsbook .WheelsContainer .dealPackagesItemButton label span {
  color: var(--wg-purple);
}
#wheelsbook .featureTitle {
  color: var(--wg-purple) !important;  /* the vendor's #fff is important too */
}

/*
 * The rate table's choose buttons. bengine.css draws an unchosen one as an outline whose
 * FILL is --button-color - it assumes that is the light colour (#fff in its palette) -
 * and whose line is the button colour. With --button-color purple above, every unchosen
 * button became a purple block, its purple label invisible on it, inside a yellow line
 * (seen 2026-10-20, Fiat 500 at Frankfurt T3, the table's first appearance on our
 * account). Unchosen is now outlined purple; hover and the chosen column are the yellow
 * main button. The hover and chosen rules are restated because the first one outranks
 * the vendor's versions of them.
 */
#wheelsbook .WheelsContainer .dealPackagesItemButton label {
  border-color: var(--wg-purple);
  background-color: #fff;
  color: var(--wg-purple);
}
#wheelsbook .WheelsContainer .dealPackagesItemButton label:hover,
#wheelsbook .WheelsContainer .dealPackagesContainer .dealPackagesItemActive label {
  border-color: var(--wg-yellow);
  background-color: var(--wg-yellow);
}

/*
 * Checkboxes (driver details: company data, AGB, privacy; the results filters). The
 * engine draws the tick as a ::before glyph in --button-color on a --text-color (#333)
 * fill - white on near-black in its palette, a purple tick lost on near-black in ours
 * (2026-10-20). They take the brand instead: purple line, a tint on hover, purple fill
 * with a white tick when checked. The vendor's hover also filled the box black, which
 * read as checked.
 */
#wheelsbook .WheelsContainer .wbeInputElementCheck {
  border-color: var(--wg-purple);
}
#wheelsbook .WheelsContainer .wbeInputElementCheck:hover {
  background: var(--wg-purple-tint);
}
#wheelsbook .WheelsContainer .wbeInputElementCheck:checked,
#wheelsbook .WheelsContainer .wbeInputElementCheck:checked:hover {
  border-color: var(--wg-purple);
  background: var(--wg-purple);
  color: #fff;
}
#wheelsbook .WheelsContainer .wbeInputElementCheck:checked::after {
  background: var(--wg-purple);
}

/* Five ids: the vendor's price rule has four, plus two classes. */
#wheelsbook #WheelsBookingEngineWrapper #OptionsMenu #DealPriceDiv #DealPrice {
  color: var(--wg-purple);
}
#wheelsbook #OptionsMenu #DealPriceDiv {
  border-color: var(--wg-purple-line);
  background: var(--wg-purple-tint);
}

/*
 * The +/- on every extras row: purple, not yellow. There are thirty-odd of them on one
 * page, and in the main-button yellow they would outshout WEITER, the one that matters.
 */
#wheelsbook #WheelsBookingEngineWrapper #dealOptions .wbeOptionBtns,
#wheelsbook #WheelsBookingEngineWrapper #dealOptions .wbeOptionBtnsDisabled {
  background-color: var(--wg-purple);
  color: #fff;
}
#wheelsbook #WheelsBookingEngineWrapper #dealOptions .wbeOptionBtns:hover {
  background-color: var(--wg-purple-dark);
}

/*
 * The driver-details date fields (birth date, ID and licence dates) are <input
 * type="button">s that open a calendar, and the vendor paints them as full-width
 * buttons in the button colour. They are fields, so they take the look of the fields
 * beside them - white, the same --menu-background-color line, 15px Roboto, left-aligned
 * - and BUCHEN stays the only yellow on the step. The text is --wg-text at 400 rather
 * than the prompt grey because the same value holds the prompt AND, once picked, the
 * date; CSS cannot tell them apart, and a chosen date in grey would read as unfilled.
 * :hover is repeated because the vendor's hover inverts the colours.
 *
 * `.wbeInputContainer` is in the selector for one more class of specificity, and it is
 * load-bearing: bengine.css zeroes the birth-date field's padding at 768px and up with
 * a selector that otherwise ties this one exactly (three ids, two classes, one element),
 * and bengine.css loads after this file, so a tie is theirs - "Geburtsdatum" sat flush
 * against its border (reported 2026-10-20).
 *
 * Height by min-height: newLook.css sets `height: auto !important`, so with the padding
 * gone the ID and licence fields fell to 16px. A min-height is not something that
 * declaration touches, and 44px is what the fields beside them measure.
 */
#wheelsbook #WheelsBookingEngineWrapper #dealOptions .wbeClientInformationInputContainer .wbeInputContainer input[type="button"],
#wheelsbook #WheelsBookingEngineWrapper #dealOptions .wbeClientInformationInputContainer .wbeInputContainer input[type="button"]:hover {
  min-height: 44px;
  padding: 0 44px 0 13px;
  border: 1px solid var(--menu-background-color);
  background: #fff var(--wg-calendar-icon) no-repeat right 14px center / 18px 18px;
  color: var(--wg-text);
  font-family: var(--main-font-family);
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  text-transform: none;
}
#wheelsbook #WheelsBookingEngineWrapper #dealOptions .wbeClientInformationInputContainer .wbeInputContainer input[type="button"]:hover {
  border-color: var(--wg-purple-line-hover);
}

/*
 * Looking like a field cost them the one thing a button shape says - "press me" - so
 * the field carries a calendar at its trailing edge, the way a date input does
 * (Osman, 2026-10-20). An <input> has no ::after, so the icon is a background image,
 * and the 44px right padding keeps a picked date clear of it.
 *
 * The purple is written into the SVG as #46397C because a data: URI cannot see custom
 * properties; it is --wg-purple. Kept as a variable itself so the literal lives in one
 * place. The glyph is a plain stroked calendar, drawn for this.
 */
#wheelsbook #WheelsBookingEngineWrapper {
  --wg-calendar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346397C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

/* ===== Manage booking: the found booking ===== */
/*
 * Decided with Osman 2026-10-20. The two actions sat in a full-width row below BOTH
 * columns, plus the 100px newLook.css puts under the sticky vehicle column - 300px of
 * empty card between the driver details and the buttons that act on them. On desktop the
 * result is now a two-column grid: details top left, the actions directly under them,
 * the vehicle column spanning both rows on the right (still sticky).
 */
@media (min-width: 1024px) {
  #wheelsbook #BookingSearchRes .wbeBookingSearchResContainer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;   /* the vendor's own 400px column */
    column-gap: 52px;                             /* and its own gap, measured */
    /* The vehicle column spans both rows and is usually the taller; 1fr hands all of its
       excess to the second row, so the first stays as tall as the details. */
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  #wheelsbook #BookingSearchRes .wbeManageBookInfo {
    grid-column: 1;
    grid-row: 1;
  }
  #wheelsbook #BookingSearchRes .wbeManageBookVehicle {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }
  #wheelsbook #BookingSearchRes .wbeManageBookPriceButtonContainer {
    grid-column: 1;
    grid-row: 2;
    align-self: start;          /* bengine.css: flex-end, which in a grid is the row's foot */
    justify-content: flex-start;
    gap: 16px;
    padding: 0 30px 30px;
    background: none;
  }
  /* The vendor sizes the three containers as thirds (max-width 33.33%) and the buttons
     min 300px; in the narrower column that wrapped both labels, then - once unwrapped -
     let "E-Mail erneut senden" run 30px past its own border. */
  #wheelsbook #BookingSearchRes .wbeManageBookButtonContainer {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  #wheelsbook #BookingSearchRes .wbeManageBookButtonContainer:empty {
    display: none;
  }
  #wheelsbook #BookingSearchRes #wbemanageCancel,
  #wheelsbook #BookingSearchRes #wbemanageResendEmail {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
  }
}

/*
 * Both actions are outlines, so nothing here wears the main-button yellow: resending the
 * confirmation is a convenience (purple), cancelling is destructive (--wg-error - the one
 * use of red outside error messages, kept because it IS a warning). Hover fills them.
 *
 * The colours go through the vendor's own variables, set on the buttons themselves,
 * because its rules read them with !important in places; bengine.css's literal
 * `background: red` on the cancel button is the one value overridden directly.
 */
#wheelsbook #BookingSearchRes #wbemanageCancel,
#wheelsbook #BookingSearchRes #wbemanageResendEmail {
  --manage-tone: var(--wg-purple);
  --button-background-color: #fff;
  --button-background-color-hover: var(--manage-tone);
  --button-color: var(--manage-tone);
  --button-color-hover: #fff;
  border: 2px solid var(--manage-tone);
  background: #fff;
  color: var(--manage-tone);
  transition: background-color .15s, color .15s;
}
#wheelsbook #BookingSearchRes #wbemanageCancel {
  --manage-tone: var(--wg-error);
}
#wheelsbook #BookingSearchRes #wbemanageCancel:hover,
#wheelsbook #BookingSearchRes #wbemanageResendEmail:hover {
  background: var(--manage-tone);
  color: #fff;
}
#wheelsbook #BookingSearchRes #wbemanageCancel span,
#wheelsbook #BookingSearchRes #wbemanageResendEmail span {
  color: inherit;
}

/*
 * The vendor's icons are white-stroked SVGs on wheelsys.com, drawn for a coloured
 * button: on these white outlines they vanish. That host sends no CORS headers, so they
 * cannot be recoloured with mask-image either. Ours are drawn as masks and filled with
 * currentColor, so each follows its button's tone, hover included.
 */
#wheelsbook #BookingSearchRes {
  --wg-icon-ban: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 18.4 18.4 5.6'/%3E%3C/svg%3E");
  --wg-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
#wheelsbook #wbemanageCancel .fa-ban,
#wheelsbook #wbemanageResendEmail .fa-envelope {
  background: currentColor;
  -webkit-mask: var(--wg-icon-ban) center / contain no-repeat;
  mask: var(--wg-icon-ban) center / contain no-repeat;
}
#wheelsbook #wbemanageResendEmail .fa-envelope {
  -webkit-mask-image: var(--wg-icon-mail);
  mask-image: var(--wg-icon-mail);
}

/*
 * The price breakdown, given air (Osman, 2026-10-20: "too dense"). The vendor sets the
 * rows at line-height 1 with 6px of padding, splits them 75/25 and pads every cell 24px
 * either side, inside a bordered table inside the bordered box - so the names had ~180px
 * and even "1x Group MBMN Mietpreis" wrapped onto touching lines. Now: no inner border,
 * a hairline between rows, 1.4 line height and 10px a row, the amount column only as
 * wide as its amounts (they never wrap - "101,45 €" used to break before the euro sign),
 * amounts on their row's first line, and the total set off by a darker line above it.
 */
/*
 * The box's two subheadings, FAHRZEUGINFORMATIONEN and PREISAUFSCHLÜSSELUNG, at 700
 * (Osman, 2026-10-20): at newLook.css's normal weight they read as one more row of the
 * list beneath them. 700 rather than 600 because newLook.css loads Roboto at 300, 400
 * and 700 only - a 600 would be drawn as the 700 anyway.
 */
#wheelsbook #BookingSearchRes .wbeManageBookVehicle h3,
#wheelsbook #BookingSearchRes .priceAnalysisTitle {
  font-weight: 700;
}
#wheelsbook #BookingSearchRes .wbeManageBookVehicleContent table {
  border: 0;
}
#wheelsbook #wbemanagePriceDetails tr.manageBookPriceItem > td {
  padding: 10px 0;
  border-bottom: 1px solid var(--menu-background-color);
  font-size: 15px;
  line-height: 1.4;
  vertical-align: top;
}
#wheelsbook #wbemanagePriceDetails tr.manageBookPriceItem > td:first-of-type {
  width: auto;
  padding-right: 16px;
}
#wheelsbook #wbemanagePriceDetails tr.manageBookPriceItem > td:last-of-type {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
#wheelsbook #wbemanagePriceDetails #wbemanageTotal > td {
  padding-top: 14px;
  border-top: 1px solid var(--wg-purple-line);
  border-bottom: 0;
  font-size: 18px;
  line-height: 1.3;
}

/* ===== Manage booking: the cancel dialog and the notices after it ===== */
/*
 * bengine.js builds the cancel confirmation (PrepareCancelBooking) on the engine's
 * progress-indicator layer: .wheelsprogressIndicator.wbecancelNotif, fixed over the page
 * with an 80% white wash, holding .cncBookInnerCont > h2 + .cncButtonsCont > two
 * identical .manageBookBtn - Ja first, Nein second, nothing else tells them apart. The
 * same layer later carries a bare <p> for "cancelled", "cancel failed" and the
 * resend-email result, dismissed by a click anywhere. With no card the question floated
 * over a faded page beside two yellow 300px buttons (2026-10-20).
 *
 * Now a dark scrim, the widget's white card, and the two answers told apart: Ja is the
 * irreversible one, so solid --wg-error; Nein is the way out, a purple outline.
 */
/*
 * Centring is restated because only the cancel dialog carries .cncBookOuterCont (which
 * centres it); the resend-email notice (#wbebookemailnotif) does not, and its card was a
 * full-height strip against the left edge. The z-index: newLook.css gives the button row
 * (.wbeManageBookPriceButtonContainer) z-index 8000 in the same stacking context, far
 * above the overlay's 150, so STORNIEREN showed undimmed and clickable through the scrim.
 * The row keeps its 8000 (it is what lifts it on phones); the overlay goes over it.
 */
#wheelsbook #BookingSearchRes .wbecancelNotif {
  z-index: 8001;
  justify-content: center;
  align-items: center;
  padding: 16px;
  box-sizing: border-box;
  background-color: rgba(42, 37, 64, 0.55);   /* --wg-text */
}
#wheelsbook #BookingSearchRes .wbecancelNotif > .cncBookInnerCont,
#wheelsbook #BookingSearchRes .wbecancelNotif > p {
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  margin: 0;
  padding: 28px 32px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(42, 37, 64, 0.25);
  color: var(--wg-text);
  text-align: center;
}
#wheelsbook #BookingSearchRes .wbecancelNotif > p {
  font-size: 16px;
  line-height: 1.5;
  cursor: pointer;   /* the engine closes it on any click */
}
#wheelsbook #BookingSearchRes .cncBookInnerCont h2 {
  margin: 0 0 24px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
  color: var(--wg-text);
}
#wheelsbook #BookingSearchRes .cncButtonsCont {
  justify-content: center;
  gap: 12px;
}
#wheelsbook #BookingSearchRes .cncButtonsCont .manageBookBtn {
  --cnc-tone: var(--wg-purple);
  --button-background-color: #fff;
  --button-background-color-hover: var(--cnc-tone);
  --button-color: var(--cnc-tone);
  --button-color-hover: #fff;
  flex: 1 1 0;
  min-width: 0;
  max-width: 180px;
  margin: 0;
  padding: 0 16px;
  height: 46px;
  border: 2px solid var(--cnc-tone);
  border-radius: 5px;
  background: #fff;
  color: var(--cnc-tone);
  font-weight: 700;
  transition: background-color .15s, color .15s;
}
#wheelsbook #BookingSearchRes .cncButtonsCont .manageBookBtn:hover {
  background: var(--cnc-tone);
  color: #fff;
}
#wheelsbook #BookingSearchRes .cncButtonsCont .manageBookBtn:first-child {
  --cnc-tone: var(--wg-error);
  background: var(--cnc-tone);
  color: #fff;
}
#wheelsbook #BookingSearchRes .cncButtonsCont .manageBookBtn:first-child:hover {
  filter: brightness(0.92);
}