/* La Fortuna Rent A Car -- hero search bar.
 *
 * Self-contained. No framework, no build step, no external fonts: this file is
 * loaded by a Webflow embed on a page whose CSS we do not control, so every
 * rule is namespaced under .lfrac and inherits the page font stack.
 *
 * Theming goes through the custom properties on .lfrac -- override them in
 * Webflow site-wide custom CSS rather than editing this file, so updating the
 * widget never overwrites the brand.
 *
 * ---------------------------------------------------------------------------
 * Layout model
 * ---------------------------------------------------------------------------
 * Three explicit layouts rather than free-flowing wrap, because a wrapped flex
 * row leaves stray dividers on whichever field happens to start a new line:
 *
 *   >= 1100px   one row      place | dates | pick up | drop off | promo | [Go]
 *   700-1099px  two rows     place | dates
 *                            pick up | drop off | promo | [Go]
 *   < 700px     stacked      place / dates / (pick up | drop off) / promo / [Go]
 *
 * Vertical dividers are used only between fields that share a row; a field that
 * starts a row gets a horizontal rule above it instead. Each breakpoint states
 * which is which, so no divider is ever left hanging.
 *
 * Every control is sized with `min-width: 0` and flexible basis so text
 * ellipsizes instead of overflowing its neighbour.
 */

.lfrac {
  /* Montserrat, which the Webflow site already loads through its WebFont
   * loader (weights 100-900 plus italics), so this costs no extra request
   * there. Embedding anywhere that does NOT already load it needs a font link
   * -- see README -- otherwise the first fallback is used and nothing breaks.
   *
   * Override --lfrac-font rather than editing this, so an update to the widget
   * cannot overwrite the brand. */
  --lfrac-font: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* Brand color is the one configured in Booqable (store.brand_color). */
  --lfrac-brand: #0e4b7f;
  --lfrac-brand-hover: #0b3a63;
  --lfrac-accent: #c8912a;
  --lfrac-bg: #ffffff;
  --lfrac-text: #101828;
  --lfrac-muted: #667085;
  --lfrac-border: #e4e7ec;
  --lfrac-focus: #b9d5ef;
  /* Three tints of the brand, for surfaces rather than text. --tint is a
   * section background, --line its border, --wash the inside of a selected
   * range. Named so the calendar reads as one blue family instead of five
   * hand-mixed hex values. */
  --lfrac-tint: #f2f7fc;
  --lfrac-line: #d4e3f2;
  --lfrac-wash: #eaf2fa;
  --lfrac-radius: 14px;
  --lfrac-pad-x: 16px;
  --lfrac-pad-y: 8px;

  box-sizing: border-box;

  /* Fill the parent, and say so twice.
   *
   * A bare <div> is block-level and fills its parent already -- until the host
   * makes it a flex or grid item, which a Webflow hero usually does. Under
   * `align-items: center` or `flex-start` the item is sized to its CONTENT, and
   * that is invisible while the panel is open because the bar full of fields is
   * wide anyway. Fold the widget and the only content left is the summary
   * button, so the root collapses to that button's intrinsic width and the
   * `width: 100%` on the summary then resolves against the shrunken root. The
   * result is a small pill floating in a wide hero.
   *
   * `width` alone does not fix it: on a flex item the cross-axis size still
   * comes from align-items. `align-self: stretch` overrides that from the
   * child, which is the only side we control inside someone else's page. */
  width: 100%;
  align-self: stretch;

  color: var(--lfrac-text);
  /* Set here rather than left to inherit: the widget must look the same
   * wherever it is embedded. Controls below use `font: inherit`, so they pick
   * this up instead of the browser's default form font. */
  font-family: var(--lfrac-font);
  font-size: 15px;
  line-height: 1.35;
  text-align: left;
}

.lfrac *,
.lfrac *::before,
.lfrac *::after {
  box-sizing: inherit;
}

/* --- Host-page defence ---------------------------------------------------
 *
 * This widget is dropped onto pages whose CSS we do not control, and an
 * ordinary host rule like `.hero p { color:#fff; max-width:44ch }` has
 * specificity (0,1,1) -- higher than a single class. That exact rule once
 * rendered the airport note as invisible white text on the white card and
 * reserved three empty lines for it.
 *
 * Two defences:
 *   1. Every `.lfrac-*` rule below is written `.lfrac .lfrac-*` (0,2,0) so it
 *      outranks host tag rules. The prefixing is UNIFORM on purpose -- raising
 *      only some would let a modifier such as .lfrac-status-error lose to its
 *      own base rule.
 *   2. This block, at (0,2,1), reclaims the few properties no component rule
 *      sets and a host page commonly does. Deliberately narrow: adding
 *      `margin`, `text-transform` or `letter-spacing` here would override the
 *      widget's own (0,2,0) rules that legitimately set them.
 */
.lfrac.lfrac p,
.lfrac.lfrac span,
.lfrac.lfrac button,
.lfrac.lfrac label,
.lfrac.lfrac input,
.lfrac.lfrac select {
  max-width: none;
  min-width: 0;
  float: none;
  text-indent: 0;
  word-spacing: normal;
  text-shadow: none;
}

/* --- The bar ------------------------------------------------------------- */

.lfrac .lfrac-bar {
  /* The calendar hangs off the date FIELD by default, which is as wide as that
   * one field. On a wide screen it is pinned to the bar instead -- see the
   * desktop block at the end of this file -- and that needs the bar to be the
   * containing block it resolves left/right against. */
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--lfrac-bg);
  border: 1px solid var(--lfrac-border);
  border-radius: var(--lfrac-radius);
  box-shadow: 0 12px 32px -12px rgb(16 24 40 / 18%), 0 2px 4px -2px rgb(16 24 40 / 8%);
  padding: 8px;
}

.lfrac .lfrac-field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0; /* lets long values ellipsize instead of stretching the bar */
  padding: var(--lfrac-pad-y) var(--lfrac-pad-x);
  border-left: 1px solid var(--lfrac-border);
}

/* `display: flex` above beats the UA stylesheet's `[hidden] { display: none }`,
 * so hiding a field needs saying explicitly or it stays on screen. */
.lfrac .lfrac-field[hidden] {
  display: none;
}

/* The label is quiet, the value is what the customer scans for. */
.lfrac .lfrac-label {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--lfrac-text);
}

.lfrac .lfrac-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 26px;
}

.lfrac .lfrac-icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: var(--lfrac-accent);
}

/* --- Controls ------------------------------------------------------------ */

.lfrac .lfrac-trigger,
.lfrac .lfrac-input,
.lfrac .lfrac-select {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.lfrac .lfrac-input {
  cursor: text;
}

.lfrac .lfrac-input::placeholder {
  color: var(--lfrac-muted);
}

/* The dropdown arrow is painted INTO the select rather than sitting beside it
 * as a sibling element. A sibling competes with a flexible select for width and
 * ends up overlapping the value -- which is what clipped "08:00" to "08:0".
 * As a background image it can never overlap: the padding reserves its space. */
.lfrac .lfrac-select {
  padding-right: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 13px 13px;
  text-overflow: ellipsis;
}

/* Times are a fixed 5 characters, so the select is sized to its content and
 * never squeezed by a long neighbour. */
.lfrac .lfrac-field-time .lfrac-select {
  flex: 0 1 auto;
  width: auto;
  min-width: 4.6em;
}

/* =========================================================================
 * Place picker — the one field that is not a native select
 * =========================================================================
 *
 * A browser will not style the inside of an <option>: no colour, no badge, and
 * on a phone the OS draws the list itself from the raw strings. A price pill
 * next to each location is therefore only possible with our own listbox.
 *
 * The real <select> is still there, underneath, carrying the value.
 */

/* Visually gone, still a form control. Not `display: none`, which would take
 * the value out of form submission and out of `.value` in some engines; not
 * `visibility: hidden` either, which still occupies a flex track. Absolute
 * removes it from the flex row without removing it from the DOM. */
.lfrac .lfrac-select-shadow {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

/* Same geometry as .lfrac-select, including the painted-in chevron, so the two
 * place fields line up with the two time fields beside them. */
.lfrac .lfrac-place-button {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0 20px 0 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 13px 13px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.lfrac .lfrac-place-button:focus-visible {
  outline: 2px solid var(--lfrac-brand);
  outline-offset: 3px;
}

/* The name yields; the pill never does. A long location truncates rather than
 * squeezing "Extra fee" down to "Extra f…", because the price is the part the
 * customer is scanning for. */
.lfrac .lfrac-place-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lfrac .lfrac-pill {
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.lfrac .lfrac-pill-free {
  background: #e7f6ec;
  border-color: #bfe6cd;
  color: #1a7f3c;
}

/* Deliberately the same amber as the fee callout below the bar, so the pill and
 * the "$120. Added to your booking." line read as one thing. */
.lfrac .lfrac-pill-fee {
  background: #fff7e8;
  border-color: #f0dcb4;
  color: #7a5310;
}

/* Same z-index and shadow as the calendar popover: both hang off a field in the
 * same row and either can be open over the other one's neighbour. */
.lfrac .lfrac-listbox {
  position: absolute;
  z-index: 60;
  top: calc(100% + 10px);
  left: 0;
  min-width: 100%;
  max-width: calc(100vw - 24px);
  max-height: 264px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: var(--lfrac-bg);
  border: 1px solid var(--lfrac-border);
  border-radius: 12px;
  box-shadow: 0 18px 44px -12px rgb(16 24 40 / 26%);
}

.lfrac .lfrac-listbox[hidden] {
  display: none;
}

.lfrac .lfrac-listbox:focus-visible {
  outline: 2px solid var(--lfrac-brand);
  outline-offset: 2px;
}

.lfrac .lfrac-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--lfrac-text);
  cursor: pointer;
}

/* Hover and keyboard share one highlight. Two different ones is how a customer
 * arrowing down ends up looking at a row the mouse happens to be resting on. */
.lfrac .lfrac-option.is-active {
  background: #f2f6fa;
}

.lfrac .lfrac-option[aria-selected='true'] {
  font-weight: 700;
  color: var(--lfrac-brand);
}

/* Left static ON PURPOSE, and stated rather than left to the default.
 *
 * The listbox is absolutely positioned and must resolve against `.lfrac-field`,
 * which is `position: relative` and is what the calendar popover already hangs
 * from. Give this row a position and the list anchors to the row instead --
 * `top: calc(100% + 10px)` then measures from the bottom of the text, not the
 * bottom of the field, and the list rides up over the value. */
.lfrac .lfrac-control-place {
  position: static;
}

.lfrac .lfrac-trigger:focus-visible,
.lfrac .lfrac-input:focus-visible,
.lfrac .lfrac-select:focus-visible,
.lfrac .lfrac-day:focus-visible,
.lfrac .lfrac-search:focus-visible,
.lfrac .lfrac-clear:focus-visible,
.lfrac .lfrac-toggle:focus-visible,
.lfrac .lfrac-nav:focus-visible {
  outline: 2px solid var(--lfrac-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The date trigger holds three children: from, arrow, till. It needs to be a
 * flex row with a real gap, otherwise they collapse together as inline content
 * and the arrow ends up wedged against both dates. */
.lfrac .lfrac-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lfrac .lfrac-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lfrac .lfrac-value-empty {
  color: var(--lfrac-muted);
}

.lfrac .lfrac-arrow {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--lfrac-muted);
}

.lfrac .lfrac-clear {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--lfrac-muted);
  cursor: pointer;
}

.lfrac .lfrac-clear:hover {
  background: #f2f4f7;
  color: var(--lfrac-text);
}

.lfrac .lfrac-clear[hidden] {
  display: none;
}

.lfrac .lfrac-search {
  position: relative; /* the dots are centred over the hidden label */
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 118px;
  margin-left: 8px;
  padding: 14px 26px;
  border: 0;
  border-radius: 10px;
  background: var(--lfrac-brand);
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.lfrac .lfrac-search:hover {
  background: var(--lfrac-brand-hover);
}

.lfrac .lfrac-search[disabled] {
  opacity: 0.55;
  cursor: progress;
}

/* --- Working state -------------------------------------------------------
 *
 * Creating the Booqable cart is a network round trip before the page moves.
 * On a slow connection that is long enough for a customer to decide the button
 * is broken and press it again -- so the button has to say "working", not just
 * refuse to be pressed.
 *
 * A busy button keeps full opacity. `[disabled]` dims to 55% to mean "you
 * cannot", and fading the control the customer just successfully pressed says
 * the opposite of what is happening. Written after the rule above so it wins
 * at equal specificity.
 */
.lfrac .lfrac-search.lfrac-busy {
  opacity: 1;
}

/* `visibility`, not `display`. The hidden label still reserves its width, so
 * the button keeps the exact size it had a moment ago and the bar does not
 * shift under the pointer that just clicked it. */
.lfrac .lfrac-search.lfrac-busy .lfrac-search-label {
  visibility: hidden;
}

.lfrac .lfrac-search-dots {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.lfrac .lfrac-search.lfrac-busy .lfrac-search-dots {
  display: flex;
}

.lfrac .lfrac-search-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  /* currentColor, so a rebrand through --lfrac-brand carries the dots with it
   * instead of leaving three white circles on a repainted button. */
  background: currentColor;
  animation: lfrac-dot 1.2s ease-in-out infinite;
}

.lfrac .lfrac-search-dots i:nth-child(2) {
  animation-delay: 0.16s;
}

.lfrac .lfrac-search-dots i:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes lfrac-dot {
  0%,
  80%,
  100% {
    opacity: 0.4;
    transform: translateY(0);
  }

  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* Still legible as "working", with nothing moving. A customer who asked the OS
 * for less motion has usually asked for a reason. */
@media (prefers-reduced-motion: reduce) {
  .lfrac .lfrac-search-dots i {
    animation: none;
    opacity: 0.7;
  }
}

/* --- Outside the bar: drop-off disclosure ---------------------------------
 *
 * Sits below and outside the white card. The airport explanation only matters
 * to the minority of customers who need a transfer, so it is folded behind a
 * link rather than taking a permanent line.
 */

.lfrac .lfrac-outside {
  margin-top: 10px;
  padding-left: 2px;
}

.lfrac .lfrac-toggle {
  display: inline-block;
  padding: 2px 0;
  border: 0;
  background: transparent;
  /* Gold reads on both a photographic hero and a white section -- this text is
   * outside the card, so it cannot rely on a known background. */
  color: var(--lfrac-accent);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lfrac .lfrac-toggle[hidden] {
  display: none;
}
/* The trigger's own row. It sits ABOVE the fee callout, and the gap belongs to
 * the link rather than to the callout so that a hidden callout leaves no
 * orphaned space behind it. */
.lfrac .lfrac-note-wrap {
  display: block;
  margin-bottom: 10px;
}

/* =========================================================================
 * Airport delivery modal
 * =========================================================================
 *
 * This was a bubble anchored to the link. A bubble is sized by its own content
 * and knows nothing about what the page put beside it, so on the hero it
 * covered the headline and in the fleet sidebar it covered the vehicle card.
 * A modal owns the screen while it is open and has nothing left to overlap.
 *
 * It is mounted on <body> inside `.lfrac.lfrac-note-host`, for the same reason
 * the calendar sheet is: `position: fixed` stays trapped inside any ancestor
 * with a transform, and Webflow hero sections animate.
 */

.lfrac.lfrac-note-host {
  position: fixed;
  inset: 0;
  /* Above the calendar sheet's own host, which is 2147483000. The two are never
   * open together today, but "never" here rests on nothing enforcing it. */
  z-index: 2147483001;
}

.lfrac .lfrac-note {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 460px);
  max-height: 86vh;
  overflow-y: auto;
  margin: 0;
  padding: 22px 24px 24px;
  background: var(--lfrac-bg);
  border-radius: 16px;
  box-shadow: 0 28px 64px -16px rgb(16 24 40 / 55%);
  color: var(--lfrac-text);
  text-align: left;
}

.lfrac .lfrac-note-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.lfrac .lfrac-note-title {
  margin: 0;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--lfrac-brand);
}

/* 32px square: the close button is the only control in here, so it has to be a
 * comfortable tap target even though the glyph inside it is small. */
.lfrac .lfrac-note-close {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -4px -6px 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--lfrac-muted);
  cursor: pointer;
}

.lfrac .lfrac-note-close svg {
  width: 18px;
  height: 18px;
}

.lfrac .lfrac-note-close:hover {
  background: #f2f4f7;
  color: var(--lfrac-text);
}

.lfrac .lfrac-note-close:focus-visible {
  outline: 2px solid var(--lfrac-brand);
  outline-offset: 2px;
}

/* 15px, not the 13px the bubble used. The bubble was small because it had to
 * fit beside the page; nothing is beside this. */
.lfrac .lfrac-note-lead {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--lfrac-text);
}

.lfrac .lfrac-note-rows {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lfrac-border);
}

.lfrac .lfrac-note-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--lfrac-border);
}

.lfrac .lfrac-note-what {
  font-size: 14.5px;
  line-height: 1.4;
}

/* The pills are the dropdown's, one size up. Same badge for the same fee in
 * both places, so the customer does not have to check they mean the same. */
.lfrac .lfrac-note-row .lfrac-pill {
  padding: 3px 10px;
  font-size: 12.5px;
}

.lfrac .lfrac-note-foot {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lfrac-muted);
}

/* The notice an airport pick-up needs. Set apart with a rule and full-strength
 * text because it is the only line in this dialog that can stop a booking: at
 * the muted size of the line above it, it reads as another footnote about
 * money and gets skimmed past by exactly the customer it is aimed at -- the
 * one booking a car for this afternoon. */
.lfrac .lfrac-note-lead-time {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--lfrac-border);
  font-size: 14px;
  line-height: 1.5;
  color: var(--lfrac-text);
}

/* Kept as a floor even though the modal is mounted and unmounted rather than
 * hidden: an empty dialog with a shadow is a bug the customer can see. */
.lfrac .lfrac-note[hidden],
.lfrac .lfrac-note:empty {
  display: none;
}

/* On a narrow phone the gutters cost more than they are worth: at 320px the
 * dialog is 294px wide and 48px of that is padding, which drops
 * "One leg at Liberia (LIR) or San José (SJO)" onto three lines beside its
 * pill. Buying back 16px puts it on two. */
@media (max-width: 359px) {
  .lfrac .lfrac-note {
    padding: 18px 16px 20px;
  }

  .lfrac .lfrac-note-title {
    font-size: 18px;
  }
}

.lfrac .lfrac-status {
  order: 99;
  flex: 1 1 100%;
  margin: 4px 0 0;
  padding: 0 var(--lfrac-pad-x);
  font-size: 13.5px;
  color: var(--lfrac-muted);
}

/* An empty status must not reserve a line. */
.lfrac .lfrac-status:empty {
  display: none;
}

.lfrac .lfrac-status-error {
  color: #b42318;
}

.lfrac .lfrac-status-ok {
  color: #067647;
}

/* Screen-reader-only: the live region and the real <label> elements. */
.lfrac .lfrac-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Calendar ------------------------------------------------------------ */

.lfrac .lfrac-popover {
  position: absolute;
  z-index: 60;
  top: calc(100% + 12px);
  left: 0;
  /* Never wider than the viewport, whatever the field it hangs from. JS
   * additionally nudges it left when it would run off the right edge. */
  max-width: calc(100vw - 24px);
  /* With fluid columns the grid no longer sets the width, so the popover has
   * to. One month wants about 320px before the cells start to crowd; two
   * months get there on their own through the flex basis on .lfrac-grid. */
  min-width: min(332px, calc(100vw - 24px));
  padding: 18px;
  background: var(--lfrac-bg);
  border: 1px solid var(--lfrac-border);
  border-radius: 12px;
  box-shadow: 0 18px 44px -12px rgb(16 24 40 / 26%);
}

/* !important, and it has to be.
 *
 * This shipped broken: the desktop layout below sets `display: flex` on the
 * popover through a selector carrying three :not() classes, which is (0,5,0)
 * and beat the (0,3,0) here. The UA stylesheet's [hidden] { display: none } is
 * weaker still, so every visitor on a screen 960px or wider arrived to a
 * calendar hanging open under the bar with an empty month area -- empty
 * because renderCalendar() only runs when the calendar is opened.
 *
 * The file already warned about exactly this trap for .lfrac-field. A closed
 * dialog staying closed is not a cascade negotiation, so it stops being one:
 * no future rule, however specific, can reopen it by accident. */
.lfrac .lfrac-popover[hidden] {
  display: none !important;
}

.lfrac .lfrac-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.lfrac .lfrac-cal-title {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--lfrac-brand);
}

.lfrac .lfrac-nav {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--lfrac-line);
  border-radius: 9px;
  background: var(--lfrac-tint);
  color: var(--lfrac-brand);
  cursor: pointer;
}

/* Darker than --lfrac-tint, not lighter. The button's resting background is
 * now that tint, so the old near-white hover made it fade out on approach. */
.lfrac .lfrac-nav:hover:not([disabled]) {
  background: var(--lfrac-wash);
}

.lfrac .lfrac-nav[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* Months sit side by side while there is room and wrap when there is not, each
 * one free to grow. The basis on the grids is what makes two months open a wide
 * popover and one month a narrow one, without either being told a width.
 *
 * Declared HERE, above the phone media query, so that query still overrides the
 * direction and gap. An earlier copy of this sat below it and quietly won. */
.lfrac .lfrac-months {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.lfrac .lfrac-months > .lfrac-grid {
  flex: 1 1 262px;
  min-width: 0;
}

/* Fluid columns, not seven fixed 36px ones. Fixed columns made the calendar a
 * 252px block whatever it was given -- cramped in a wide hero and, in a narrow
 * sidebar, unable to use the width it did have. minmax(0, 1fr) lets a day cell
 * take whatever the popover can spare, which is the whole of responsiveness
 * here: one rule, every layout and every screen. */
.lfrac .lfrac-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  /* No COLUMN gap. .lfrac-day-in-range squares its corners so a multi-week
   * selection reads as one continuous band, and 2px of daylight between the
   * cells cuts that band into separate tiles. Row gap is free to exist. */
  gap: 3px 0;
}

.lfrac .lfrac-dow {
  display: grid;
  place-items: center;
  height: 30px;
  font-size: 11px;
  font-weight: 700;
  /* Full strength, no opacity. At 0.72 this came out around 4.36:1 on white --
   * under AA for 11px text, and these are the labels that say which column is
   * Saturday. The brand blue at full strength clears it comfortably. */
  color: var(--lfrac-brand);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Taller than it was. A 36px cell with no horizontal room to grow was under
 * the 44px touch target on a phone and read as a wall of digits; the extra
 * four pixels plus the fluid width above give every day its own space. */
.lfrac .lfrac-day {
  display: grid;
  place-items: center;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  color: var(--lfrac-text);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.lfrac .lfrac-day:hover:not([disabled]) {
  background: var(--lfrac-focus);
}

.lfrac .lfrac-day[disabled] {
  color: #c8ccd4;
  cursor: default;
}

.lfrac .lfrac-day-blank {
  visibility: hidden;
}

/* The middle of a range is square and only the ends are rounded, so a
 * multi-week selection reads as one continuous band. */
.lfrac .lfrac-day-in-range {
  background: var(--lfrac-wash);
  border-radius: 0;
}

.lfrac .lfrac-day-start,
.lfrac .lfrac-day-end {
  background: var(--lfrac-brand);
  color: #fff;
  font-weight: 700;
}

.lfrac .lfrac-day-start { border-radius: 9px 0 0 9px; }
.lfrac .lfrac-day-end   { border-radius: 0 9px 9px 0; }
.lfrac .lfrac-day-start.lfrac-day-end { border-radius: 9px; }

.lfrac .lfrac-day-today:not(.lfrac-day-start):not(.lfrac-day-end) {
  box-shadow: inset 0 0 0 1px var(--lfrac-brand);
}

.lfrac .lfrac-cal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--lfrac-border);
  font-size: 13px;
  color: var(--lfrac-muted);
}

/* =========================================================================
 * Layout 1 -- one row (>= 1100px)
 * ========================================================================= */

.lfrac .lfrac-field-place    { flex: 22 1 190px; }
.lfrac .lfrac-field-dropoff  { flex: 22 1 170px; }
.lfrac .lfrac-field-dates    { flex: 30 1 268px; }
.lfrac .lfrac-field-time     { flex: 12 1 116px; }
.lfrac .lfrac-field-promo    { flex: 20 1 168px; }

.lfrac .lfrac-field:first-child {
  border-left: 0;
}

/* With no locations to choose from, both place fields are hidden and the date
 * field becomes the visually first one -- it must not keep a leading divider.
 * CSS cannot express "first visible child", so this names the exact case. */
.lfrac .lfrac-field-place[hidden] + .lfrac-field-dropoff[hidden] + .lfrac-field-dates {
  border-left: 0;
}

/* =========================================================================
 * Layout 2 -- two rows (700px - 1099px)
 *
 * Row 1: place (+ drop-off when shown) and dates.
 * Row 2: the two times, promo, and the button.
 * ========================================================================= */

@media (max-width: 1099px) {
  /* Both place fields are always visible now, so three fields will not fit on
   * one row. Three deterministic rows instead:
   *
   *   row 1  pick-up place | drop-off place
   *   row 2  dates
   *   row 3  pick-up time | drop-off time | [Search]
   *
   * A previous version kept a `:has(.lfrac-field-dropoff:not([hidden]))` rule
   * from when the drop-off was hidden by default. With it always visible that
   * selector always matched, painting a border-top on the date field at every
   * width below 1099px -- including phones, where the fields are separate
   * outlined blocks and there is no shared card for a divider to belong to.
   * Hence explicit rows rather than a conditional. */
  .lfrac .lfrac-field-place   { flex: 1 1 46%; }
  .lfrac .lfrac-field-dropoff { flex: 1 1 46%; }
  .lfrac .lfrac-field-dates   { flex: 1 1 100%; }
  .lfrac .lfrac-field-time    { flex: 1 1 130px; }
  .lfrac .lfrac-field-promo   { flex: 2 1 180px; }

  /* Each field that STARTS a row takes a rule above and drops its divider.
   * The time fields are NOT in this list any more: they live inside the
   * calendar popover now, where a row divider has nothing to divide and simply
   * draws a stray line above each time chip. */
  .lfrac .lfrac-field-dates,
  .lfrac .lfrac-field-promo {
    border-top: 1px solid var(--lfrac-border);
  }

  .lfrac .lfrac-field-dates {
    border-left: 0;
  }

  .lfrac .lfrac-search {
    align-self: center;
    margin: 8px 0 0 auto;
  }
}

/* =========================================================================
 * Layout 3 -- stacked (< 700px)
 *
 * One field per row, except the two times which stay paired: a customer thinks
 * of pick-up and drop-off time together, and they fit side by side even at
 * 320px.
 * ========================================================================= */

@media (max-width: 699px) {
  .lfrac {
    --lfrac-pad-x: 0px;
    --lfrac-pad-y: 0px;
  }

  /* Not one card with dividers any more: each field carries its own outlined
   * block with the label above and outside it.
   *
   * The white panel stays. The labels are dark text, and this widget sits on a
   * photographic hero -- without a light surface behind them they are close to
   * unreadable. It is also what the design being matched does. */
  .lfrac .lfrac-bar {
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px 16px;
    border: 0;
  }

  .lfrac .lfrac-field,
  .lfrac .lfrac-field-place,
  .lfrac .lfrac-field-dropoff,
  .lfrac .lfrac-field-dates,
  .lfrac .lfrac-field-time,
  .lfrac .lfrac-field-promo {
    gap: 8px;
    padding: 0;
    border: 0;
  }

  .lfrac .lfrac-label {
    font-size: 13.5px;
  }

  /* The outlined block itself. */
  .lfrac .lfrac-control {
    min-height: 52px;
    padding: 13px 14px;
    background: var(--lfrac-bg);
    border: 1px solid var(--lfrac-border);
    border-radius: 10px;
  }

  .lfrac .lfrac-field-place,
  .lfrac .lfrac-field-dropoff,
  .lfrac .lfrac-field-dates,
  .lfrac .lfrac-field-promo {
    flex: 1 1 100%;
  }

  /* The two times stay paired, splitting the row across the 16px gap. */
  .lfrac .lfrac-field-time {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  .lfrac .lfrac-status {
    padding: 0;
  }

  /* The disclosure is already outside the card at every width; it only needs
   * a slightly roomier tap target on touch. */
  .lfrac .lfrac-toggle {
    padding: 6px 0;
  }

  .lfrac .lfrac-search {
    flex: 1 1 100%;
    align-self: auto;
    margin: 4px 0 0;
    padding: 17px 26px;
    border-radius: 10px;
    font-size: 16px;
  }

  /* One month, full width of the bar. */
  .lfrac .lfrac-popover {
    left: 0;
    right: 0;
    max-width: none;
    padding: 14px;
  }

  .lfrac .lfrac-months {
    flex-direction: column;
    gap: 18px;
  }

  /* Fluid columns so the grid fills whatever width is available rather than
   * overflowing at 320px. */
  .lfrac .lfrac-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .lfrac .lfrac-day,
  .lfrac .lfrac-dow {
    height: 40px; /* comfortable touch target */
  }
}

/* The airport fee callout that used to live here is gone. It repeated the
 * modal's price table, and an amber block under a dark hero pulled more
 * attention than the Search button beside it. The fee is still calculated and
 * still booked -- only the readout was removed. */

/* =========================================================================
 * Collapsed summary (phone) and the panel it opens
 *
 * The summary is always in the DOM so the open/closed state survives a
 * resize; these rules decide when it is visible. On desktop it never is.
 * ========================================================================= */

.lfrac .lfrac-summary {
  display: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 15px 16px;
  background: var(--lfrac-bg);
  border: 1px solid var(--lfrac-border);
  border-radius: var(--lfrac-radius);
  box-shadow: 0 12px 32px -12px rgb(16 24 40 / 18%);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--lfrac-text);
  text-align: left;
  cursor: pointer;
}

.lfrac .lfrac-summary-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lfrac .lfrac-summary-chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--lfrac-muted);
  transition: transform 140ms ease;
}

.lfrac.lfrac-open .lfrac-summary-chevron {
  transform: rotate(180deg);
}

@media (max-width: 699px) {
  /* Collapsed by default: on the fleet page a full form would push the cars
   * themselves below the fold. */
  .lfrac.lfrac-collapsible .lfrac-summary {
    display: flex;
  }

  .lfrac.lfrac-collapsible .lfrac-panel {
    display: none;
  }

  .lfrac.lfrac-collapsible.lfrac-open .lfrac-panel {
    display: block;
    margin-top: 10px;
  }
}

/* =========================================================================
 * Sidebar layout — vertical at ANY width, for the column beside the fleet list
 * ========================================================================= */

.lfrac.lfrac-as-sidebar .lfrac-bar {
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px;
}

.lfrac.lfrac-as-sidebar .lfrac-field {
  flex: 1 1 100% !important;
  gap: 8px;
  padding: 0;
  border: 0;
}

.lfrac.lfrac-as-sidebar .lfrac-label {
  font-size: 13px;
}

/* Each field becomes its own outlined block, as on phones. */
.lfrac.lfrac-as-sidebar .lfrac-control {
  min-height: 48px;
  padding: 11px 13px;
  background: var(--lfrac-bg);
  border: 1px solid var(--lfrac-border);
  border-radius: 10px;
}

/* The two times still pair up — a rental day is read as a pair. */
.lfrac.lfrac-as-sidebar .lfrac-field-time {
  flex: 1 1 calc(50% - 7px) !important;
  min-width: 0;
}

.lfrac.lfrac-as-sidebar .lfrac-search {
  flex: 1 1 100%;
  align-self: auto;
  margin: 2px 0 0;
  padding: 15px 20px;
  font-size: 15px;
}

/* Two months will not fit a sidebar; one month, full width of the column. */
/* Pinned to the column, so it is exactly as wide as the column is. That makes
 * the 332px floor the hanging popover wants an overflow here -- or, worse, a
 * false positive in popoverIsClipped() that lifts it into the centred dialog. */
.lfrac.lfrac-as-sidebar .lfrac-popover {
  left: 0;
  right: 0;
  min-width: 0;
  max-width: none;
  padding: 14px;
}

.lfrac.lfrac-as-sidebar .lfrac-months {
  flex-direction: column;
  gap: 16px;
}

.lfrac.lfrac-as-sidebar .lfrac-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}


/* --- Calendar lifted out of the page -------------------------------------
 *
 * Hanging the calendar off the date field is right on a laptop and wrong
 * everywhere the page will not let it hang. Two ways that happens, both found
 * in a real browser rather than reasoned about:
 *
 *  1. PHONES. The popover is ~370px tall and opens BELOW the field, so on a
 *     664px phone its lower rows land past the fold -- and a Webflow hero is
 *     almost always `overflow: hidden`, which clips them away rather than
 *     letting the page scroll to them. Measured in a stock hero at 390px:
 *     nought of the sixteen selectable days could be tapped.
 *
 *     That is what made the drop-off date impossible to pick while the pick-up
 *     date still worked. Opening the calendar focuses a day, and focusing
 *     scrolls it into view, so the first pick got a free ride; the re-render
 *     after it adds the "Clear dates" row and focuses nothing, so the rest of
 *     the month drifted back out of reach.
 *
 *  2. ANY CLIPPING COLUMN. The sidebar calendar overhangs the bottom of its
 *     own column by ~150px. Give that column `overflow: hidden` and the last
 *     ten days are clipped on a 1440px desktop -- same bug, no phone involved.
 *
 * So JS reparents the calendar to <body> whenever it would be trapped: always
 * on a small viewport, and otherwise only when it measures as actually clipped,
 * which leaves the ordinary desktop popover exactly as it was.
 *
 * Reparenting rather than just `position: fixed` is deliberate. A fixed element
 * is still confined by any ancestor carrying a `transform`, `filter`,
 * `perspective` or `contain`, and hero sections animate -- so fixed alone would
 * still be trapped in the very layouts this exists to survive.
 */
.lfrac.lfrac-sheet-host {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
}

.lfrac .lfrac-scrim {
  position: fixed;
  inset: 0;
  background: rgb(16 24 40 / 45%);
}

/* Lifted out on a roomy screen: a centred dialog. This is the rare fallback
 * for a clipping column, so it only has to be unmistakably usable.
 *
 * (0,3,0), which beats both the base `position: absolute` rule and the
 * sidebar's own popover rule at (0,2,0) and (0,3,0) -- the latter on order,
 * this file being read after it. */
.lfrac.lfrac-sheet-host .lfrac-popover {
  position: fixed;
  top: 50%;
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: min(92vw, 620px);
  max-height: 88vh;
  overflow-y: auto;
}

/* The page behind must not scroll under it. */
body.lfrac-sheet-lock {
  overflow: hidden;
}

/* Small viewports get it as a bottom sheet instead, within thumb reach. The
 * height test catches a phone held sideways, which is wide enough to look
 * roomy and only ~390px tall. */
@media (max-width: 699px), (max-height: 620px) {
  .lfrac.lfrac-sheet-host .lfrac-popover {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    transform: none;
    max-width: none;
    /* Capped so a long month cannot push its own last row off the screen
     * again; past the cap the sheet scrolls itself. */
    max-height: min(88vh, 640px);
    padding: 14px;
    border-radius: 16px;
  }
}

/* --- Confirming the range ------------------------------------------------
 *
 * The calendar no longer closes itself the moment the second date is clicked.
 * That behaviour read as the calendar refusing the drop-off date on a phone:
 * when the click did not take, every further tap started a new range and the
 * only button on screen was "Clear dates", so the way forward was invisible.
 */
.lfrac .lfrac-confirm {
  flex: 0 0 auto;
  padding: 11px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--lfrac-brand);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.lfrac .lfrac-confirm:hover {
  filter: brightness(1.08);
}

.lfrac .lfrac-confirm:focus-visible {
  outline: 2px solid var(--lfrac-brand);
  outline-offset: 3px;
}

/* The hint takes the slack so "Clear dates" and "Confirm dates" sit together
 * at the end of the row rather than being pushed to opposite edges. */
.lfrac .lfrac-cal-hint {
  flex: 1 1 auto;
}

/* Lifted out, the calendar scrolls itself once it is taller than the screen.
 * A footer that scrolls with it would put the only way forward below the fold,
 * which is the whole problem over again -- so it stays pinned to the bottom. */
.lfrac.lfrac-sheet-host .lfrac-cal-foot {
  position: sticky;
  bottom: -14px;
  margin-top: 10px;
  padding-bottom: 14px;
  background: var(--lfrac-bg);
}

@media (max-width: 699px), (max-height: 620px) {
  /* Full width and thumb-sized, because on a phone this is the primary action
   * of the whole sheet. */
  .lfrac.lfrac-sheet-host .lfrac-confirm {
    flex: 1 0 100%;
    order: 3;
    padding: 15px 20px;
    font-size: 16px;
  }
}

/* --- The airport disclosure link -----------------------------------------
 *
 * This one sits outside the card, so its colour belongs to whatever the page
 * puts behind it rather than to the widget. The hero is a dark photograph, the
 * fleet sidebar is a light page -- so the two layouts get opposite treatments.
 *
 * Scoped to `.lfrac-note-toggle` and not `.lfrac-toggle`, which "Clear dates"
 * also wears; that one is always on the calendar's white and must stay gold.
 */
/* Quieter than it was: 12px, lighter, and a dotted rather than solid underline.
 * It is a footnote to a decision already made in the bar above, and at 14px
 * solid-gold it competed with the Search button for the eye.
 *
 * Dotted underline rather than none, because it still has to read as something
 * you can act on -- that is the conventional mark for a term that explains
 * itself when you hover it. */
.lfrac .lfrac-note-toggle {
  font-size: 12px;
  font-weight: 500;
  color: rgb(255 255 255 / 62%);
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.lfrac .lfrac-note-toggle:hover,
.lfrac .lfrac-note-toggle[aria-expanded='true'] {
  color: rgb(255 255 255 / 92%);
}

/* On the fleet page the widget is a card on a light background, where white
 * would be invisible. */
.lfrac.lfrac-as-sidebar .lfrac-note-toggle {
  color: #98a2b3;
}

.lfrac.lfrac-as-sidebar .lfrac-note-toggle:hover,
.lfrac.lfrac-as-sidebar .lfrac-note-toggle[aria-expanded='true'] {
  color: var(--lfrac-muted);
}

/* =========================================================================
 * Compact layout — the vehicle-page block
 * =========================================================================
 *
 * Replaces Booqable's own date picker on a product page, so a reservation can
 * only start here. Same five fields as everywhere else, tightened: the two
 * locations pair up, the two times pair up, the dates take the full width, and
 * the button closes the block. It is a block on a page that already has a
 * headline, a gallery and a price, so it stays quiet and does not try to be a
 * hero.
 */

.lfrac.lfrac-as-compact .lfrac-bar {
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
}

/* One field per row. Side by side, the two location selects truncate to
 * "La Fortuna offi..." in a 380px product column, and the airport options are
 * half as long again -- a block that will not say where the car is coming from
 * is not worth the two rows it saves. */
.lfrac.lfrac-as-compact .lfrac-field {
  flex: 1 1 100% !important;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
}

/* The times are the exception: they hold "08:00", so they have room to pair,
 * and a rental day is read as a pair. */
.lfrac.lfrac-as-compact .lfrac-field-time {
  flex: 1 1 calc(50% - 5px) !important;
}

.lfrac.lfrac-as-compact .lfrac-label {
  font-size: 12px;
}

/* Outlined blocks, as on phones and in the sidebar, but shallower. */
.lfrac.lfrac-as-compact .lfrac-control {
  min-height: 42px;
  padding: 9px 11px;
  background: var(--lfrac-bg);
  border: 1px solid var(--lfrac-border);
  border-radius: 9px;
  font-size: 14px;
}

.lfrac.lfrac-as-compact .lfrac-search {
  flex: 1 1 100%;
  align-self: auto;
  margin: 2px 0 0;
  padding: 13px 18px;
  border-radius: 9px;
  font-size: 15px;
}

/* No disclosure-link override here on purpose: the vehicle pages put the block
 * on a dark background, so the compact layout keeps the default white. Only the
 * fleet sidebar, which sits on a light page, overrides it. The note the link
 * reveals is its own white card with dark text, so it reads either way. */

/* =========================================================================
 * The period block -- times and the 24-hour breakdown, inside the calendar
 *
 * The two time selects used to sit in the bar. On a phone the calendar is a
 * sheet over a scrim, which put them BEHIND that scrim while the calendar was
 * open: a footer saying "return by 11:00 to keep it at 1 day" next to a
 * control the customer cannot reach is a taunt, not a help. So they moved in
 * here, between the month grids and the footer.
 *
 * Deliberately NOT sticky. The footer below it is pinned and keeps exactly the
 * height it had before, so "Confirm dates" is reachable in every viewport it
 * was reachable in before. This block scrolls with the grid instead. Making it
 * sticky would put ~250px of pinned furniture on a 558px sheet and re-create
 * the bug where the drop-off date was unreachable on a phone.
 *
 * Scoped through .lfrac-popover so it outranks the bar-layout rules for
 * .lfrac-field-time, and appended last so equal-specificity ties go this way
 * too. The flex bases those rules carry are NOT left to win -- the sidebar and
 * compact ones are !important and pin the field at calc(50% - Npx), which is
 * the arithmetic that used to wrap the pair onto two lines. They are overridden
 * with !important of their own below.
 * ========================================================================= */

/* One row, always, at every width this widget is ever given.
 *
 * The previous version inherited the bar's flex bases -- calc(50% - 5px) in the
 * compact layout, 50% - 7px in the sidebar, 50% - 8px on phones -- and tried to
 * pick a gap that satisfied all three. That is arithmetic that only holds until
 * someone changes one of them, and it wrapped the pair onto two lines whenever
 * it did not. A zero basis with nowrap has no arithmetic to get wrong: two
 * items split whatever row they are in, down to any width. */
.lfrac .lfrac-cal-times {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
}

/* Each time is one pill: the label on top, the clock and the value under it.
 *
 * This is the shape the field already had in the bar, and the base rules give
 * most of it -- .lfrac-field is a column, .lfrac-control is an icon-and-value
 * row, .lfrac-icon is the gold clock. All the popover adds is the outline and
 * the padding that make it a pill, because in the bar that job was done by the
 * card dividers it sat between and the popover has none.
 *
 * An earlier version laid the label beside the value and hid the clock to save
 * width. It saved about 25px a chip and cost the thing being read: the icon is
 * what makes a time look like a time at a glance. */
/* `flex: 1 1 0` with !important because the sidebar and compact layouts pin
 * this field at calc(50% - Npx) with !important of their own, and !important
 * cannot be out-specified. A zero basis is what keeps the pair on one row at
 * every width; see .lfrac-cal-times above. */
.lfrac .lfrac-popover .lfrac-field-time {
  flex: 1 1 0 !important;
  min-width: 0;
  gap: 1px;
  padding: 6px 10px;
  /* No border. White on solid blue is already a hard edge, and a second one
   * drawn around it is a layer too many. (A hairline WAS needed on the pale
   * version, where there was barely an edge to draw.) */
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: var(--lfrac-text);
}

/* Undoes the outline the control carries in the stacked, sidebar and compact
 * layouts. Inside a pill it would be a second box around the first. */
.lfrac .lfrac-popover .lfrac-field-time .lfrac-control {
  min-width: 0;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* The label is the darker of the two. It names the field, and a customer
 * scanning the block is looking for "Drop off" before they look at what time
 * it currently says. */
.lfrac .lfrac-popover .lfrac-field-time .lfrac-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--lfrac-text);
}

/* The value sits back in grey. It is a default far more often than it is a
 * choice -- both times start at 08:00 -- so it should read as something
 * waiting to be set rather than something already decided. */
.lfrac .lfrac-popover .lfrac-field-time .lfrac-select {
  min-width: 4.2em;
  padding-right: 18px;
  color: var(--lfrac-muted);
}

/* The OPTIONS are drawn by the operating system, not by us, and several
 * browsers give them the select's own colour. Inheriting white here would be a
 * white list on a white sheet, so the dropdown is told to stay dark on light --
 * the one place in this block that must not go blue. */
.lfrac .lfrac-popover .lfrac-field-time option {
  color: var(--lfrac-text);
  background: #fff;
}

/* The time on the closed trigger. Quieter than the date, because the date is
 * what the customer scans for and the time is the confirmation. */
.lfrac .lfrac-value-time {
  color: var(--lfrac-muted);
}

/* A narrow column cannot fit "21/09/2026 08:00" on one line beside an arrow
 * and a second date, so the time drops under its date. The outlined control
 * in these layouts already has the min-height to absorb a second line. */
@media (max-width: 699px) {
  .lfrac .lfrac-value-time {
    display: block;
    font-size: 12px;
  }
}

.lfrac.lfrac-as-sidebar .lfrac-value-time,
.lfrac.lfrac-as-compact .lfrac-value-time {
  display: block;
  font-size: 12px;
}

/* =========================================================================
 * Calendar structure, contrast and branding
 * ========================================================================= */

/* ---- The times are their own section, and look like it ---------------- */

/* A solid brand band above the calendar.
 *
 * Tried pale, went back to solid. Pale reads as a panel the eye can skip, and
 * this is the section that sets the times every day count below it is measured
 * from -- it should be the first thing seen and hold its own against a grid of
 * sixty numbers. Margin below rather than above, because it is the block on
 * top. */
.lfrac .lfrac-cal-period {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--lfrac-brand);
  color: #fff;
}

/* Held just off pure white: the explanation beside the controls, not a heading
 * over them. Not so far off that it stops being legible on a phone in
 * daylight, because it is the only place the pricing rule is ever explained. */
.lfrac .lfrac-cal-breakdown {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgb(255 255 255 / 18%);
  font-size: 12px;
  line-height: 1.45;
  color: rgb(255 255 255 / 82%);
}

/* ---- The summary: one number, and the reason for it ------------------- */

/* Two parts on one baseline. Keeps the flex given to it above, which is what
 * lets Clear and Confirm sit together at the end of the footer row. */
.lfrac .lfrac-cal-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
}

/* The count is what the customer came to the footer for. It gets the size
 * and the colour; the hours stay quiet beside it and do the explaining. */
.lfrac .lfrac-cal-days {
  font-size: 15px;
  font-weight: 700;
  color: var(--lfrac-brand);
}

.lfrac .lfrac-cal-hours {
  font-size: 13px;
  font-weight: 500;
  color: var(--lfrac-muted);
}

/* ---- Phones ----------------------------------------------------------- */

@media (max-width: 699px), (max-height: 620px) {
  /* The sheet is the full width of the screen, so the cells have room the
   * hanging popover never had. Spend it: a 44px row is the touch target a
   * thumb actually wants, and this is the one place there is space for it. */
  .lfrac .lfrac-day {
    height: 44px;
    font-size: 15px;
  }

  .lfrac .lfrac-cal-period {
    margin-bottom: 12px;
    padding: 10px 12px;
  }
}

/* Very short screens -- a landscape phone -- cannot afford the taller rows.
 * Height, not width: a wide landscape phone is still only ~390px tall. */
@media (max-height: 560px) {
  .lfrac .lfrac-day {
    height: 34px;
  }

  .lfrac .lfrac-dow {
    height: 24px;
  }
}

/* =========================================================================
 * Desktop: the times are a band across the top
 *
 * The popover itself is left in normal block flow -- period, then months, then
 * footer, stacked, exactly as on a phone. The width goes into the BAND: the two
 * pills sit inline on one row at the left, and the sentence explaining the
 * 24-hour rule sits beside them instead of under them, so the whole section is
 * one line tall above a calendar that gets the rest.
 *
 * An earlier version made the popover a flex row and put the times in a 278px
 * side column. Two things were wrong with it. The side column mirrored the
 * reading order the stacked layout had just been given, and -- worse -- the
 * `display: flex` it needed outranked .lfrac-popover[hidden] and left the
 * calendar hanging open on every desktop visitor. The popover is a block again
 * and stays one; only its children are laid out.
 *
 * Three exclusions, none of them optional. A sheet keeps the stack at any
 * width, because a landscape phone can be 960px across. The sidebar and compact
 * layouts keep it too: their popovers are pinned to a ~300px column and have no
 * width to spend on a band. Viewport width alone says nothing about how much
 * room this widget actually has -- only the layout does.
 * ========================================================================= */

@media (min-width: 960px) {
  .lfrac:not(.lfrac-sheet-host):not(.lfrac-as-sidebar):not(.lfrac-as-compact) .lfrac-cal-period {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
  }

  /* Held to its content rather than stretched: two pills across 1200px would
   * be 580px each, which is a lot of chrome around "08:00". */
  .lfrac:not(.lfrac-sheet-host):not(.lfrac-as-sidebar):not(.lfrac-as-compact) .lfrac-cal-times {
    flex: 0 0 auto;
  }

  .lfrac:not(.lfrac-sheet-host):not(.lfrac-as-sidebar):not(.lfrac-as-compact) .lfrac-cal-times .lfrac-field-time {
    flex: 0 0 170px !important;
  }

  /* Beside the pills, not beneath them, so the band stays one row tall. The
   * rule that separated it becomes vertical with it. */
  .lfrac:not(.lfrac-sheet-host):not(.lfrac-as-sidebar):not(.lfrac-as-compact) .lfrac-cal-breakdown {
    flex: 1 1 260px;
    margin: 0;
    padding: 2px 0 2px 16px;
    border-top: 0;
    border-left: 1px solid rgb(255 255 255 / 18%);
  }
}

/* =========================================================================
 * Desktop: the calendar spans the bar, not the one field it hangs from
 *
 * Anchored to the date field, the popover was as wide as that field and the
 * months had to be crammed into it. Anchored to the bar it gets the whole
 * width the widget already occupies -- 100%, capped at 1200px so it does not
 * sprawl on an ultrawide -- and the months, the times and the summary each
 * get room without anything being told a pixel size.
 *
 * The field goes `position: static` so the popover resolves its offsets
 * against the bar. That is the whole mechanism; nothing moves in the DOM, so
 * the outside-click test, the sheet transition and the focus order are all
 * exactly as they were.
 * ========================================================================= */

@media (min-width: 960px) {
  .lfrac:not(.lfrac-sheet-host):not(.lfrac-as-sidebar):not(.lfrac-as-compact) .lfrac-field-dates {
    position: static;
  }

  .lfrac:not(.lfrac-sheet-host):not(.lfrac-as-sidebar):not(.lfrac-as-compact) .lfrac-popover {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: 1200px;
  }
}

/* Below the desktop breakpoint and above the phone sheet, the popover still
 * hangs off its field -- but it should never be narrower than the bar it
 * drops out of, which is what the 332px floor was reaching for. */
@media (max-width: 959px) {
  .lfrac:not(.lfrac-sheet-host):not(.lfrac-as-sidebar):not(.lfrac-as-compact) .lfrac-popover {
    max-width: min(1200px, calc(100vw - 24px));
  }
}