/**
 * Homepage booking widget — location combobox with the branch details flyout.
 *
 * Ported from hrtz-site's LocationSelect (resources/redesign/css/home.css) onto
 * Thrifty tokens. Structure is deliberately identical: one card holding the options
 * list and the details pane, split by a seam and stretched to a shared height, so
 * the details read as part of the dropdown rather than a second floating tooltip.
 *
 * Scoped under .tf-bk so none of it reaches the legacy .res-form-* chrome the rest
 * of the homepage form still uses.
 */

/* ---- holding the dropdown above the page below it ----
   .content-container-home is position:relative with no z-index and sits AFTER the hero in
   source order, so it painted straight over the open menu ("Why book with Thrifty car hire?"
   showed through the branch list). Giving the form's own container a z-index puts it back on
   top; both levels are set because the row is what the section is actually a sibling of. */
/* ---- hero ----
   A port of hrtz's `.hz-hero`. The photograph is set in welcome.blade.php's own <style>
   (it uses !important, so it has to stay there); everything structural is here.

   height:auto and overflow:visible are corrections, not preferences: new.css:348 pins this
   to 278px and clips it, which is exactly what erased the headline the first time the card
   was nested inside. min-height replaces the fixed height so the hero sizes to its contents
   and can never clip them. */
.lp-section-hero {
    position: relative;
    /* !important on display/align-items/height/min-height: legacy new.css:364 sets a plain,
       non-important `.lp-section-hero{height:278px}` that this class also targets. Equal
       specificity + later load order SHOULD already win here, but a fixed `height` (not
       min-height) fighting the flex box was leaving the card sitting high/short instead of
       centred in the frame -- forcing every property involved is the same fix already used
       on #lpFormRow.tf-bk-hero below for the identical legacy-vs-redesign conflict. */
    display: flex !important;
    /* Top-anchored, matching hrtz 1:1 — content sits at the top of the frame instead of
       splitting the hero's spare height evenly. */
    align-items: flex-start !important;
    height: auto !important;
    /* hrtz's own hero runs min(700px, 78vh) — matching that height instead of
       shrinking for herobg.jpg's wider 2.169:1 ratio (hrtz's photo is narrower).
       The photo itself still uses background-size:cover, so at this height it
       crops top/bottom rather than being letterboxed; that trade reads better
       than a visibly shorter hero next to hrtz's reference proportions. */
    min-height: min(700px, 78vh) !important;
    overflow: visible;
    padding: var(--tf-space-5) 0;
    background-color: var(--tf-ink); /* holds the frame while the photo loads */
    /* hrtz terminates its hero on --hz-yellow; Thrifty's equivalent is the brand blue. */
    border-bottom: 4px solid var(--tf-blue);
}

/* Brand guide 7.2: hero imagery carries a 20-30% black overlay. The diagonal adds weight at
   the top-left specifically, where the white headline sits — over bright sky the text-shadow
   alone does not carry it. */
.lp-section-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(0, 0, 0, 0.55) 0%, transparent 55%),
        rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

/* Decoration from the old flat band: two empty <img> placeholders and an empty row that
   carries a 257px min-height. As flex children of the hero they would take real space. */
.lp-section-hero > .heroOverlay,
.lp-section-hero > .heroOverlayMobile,
.lp-section-hero > .lp-row {
    display: none;
}

/* ---- hero container ----
   hrtz's `.hz-hero .hz-container`: near-full-width like hertz.com's own reservation form,
   but capped so five controls are not stretched across a 2560px monitor. */
.tf-bk-hero {
    position: relative; /* above the scrim */
    z-index: 30;
    width: 100%;
    max-width: min(94vw, 1560px);
    margin: 0 auto;
    padding: 0;
}

/* The float is gone. new.css lifts #lpFormRow with `top:-190px` (and -135px/-100px at its
   own breakpoints) because the card used to be a sibling that had to be dragged up over the
   band; home.css re-states it as a negative margin at 900px. Inside the hero there is
   nothing to drag it over, and any residual offset just pulls it off the photograph. */
#lpFormRow.tf-bk-hero {
    top: 0 !important;
    margin-top: 0 !important;
}

/* new.css:539 sets `#resFormMain { display: none }` — the card used to be revealed by the
   "Pick-up Location" trigger, and an inline style on the element was what countered it. The
   card is open from the start now, so the override belongs here instead. */
#resFormMain {
    display: block;
}

/* hrtz keeps the same structure on a phone — photo, headline, card — and only trims the
   hero's vertical padding. No separate mobile hero layout, and nothing to retune. */
@media (max-width: 768px) {
    .lp-section-hero {
        min-height: min(620px, 76vh);
        padding: var(--tf-space-5) 0;
    }
}

/* ---- trust bar ----
   Port of hrtz's .hz-trustbar. hrtz uses solid black; Thrifty's dark reference band
   elsewhere in the redesign (emails, footer) is --tf-ink, so that's used here instead
   of a literal black — same structure, Thrifty's own dark tone. */
/* Thrifty blue, not the neutral dark this was ported onto. hrtz runs this band in its own black
   because black is its brand ground; ours is PMS 300c, which the nav and footer already use -- so
   the bar now reads as part of the same system instead of a grey strip between two blue ones. */
.tf-trust-bar {
    background: var(--tf-blue);
    color: var(--tf-white);
    padding: var(--tf-space-3) 0;
}

/* White, not the old #cfcfcf. That grey measured 2.95:1 against the blue -- it was only legible
   because the ground used to be dark. */
.tf-trust-item {
    gap: var(--tf-space-2);
    font-size: 0.875rem;
    color: var(--tf-white);
}

.tf-trust-item strong {
    font-family: var(--tf-font-subtext);
    font-weight: normal;
    color: var(--tf-white);
}

/* The icons keep --tf-yellow: it is Thrifty's own PMS 100c, the Color Wave accent, and it is the
   one thing distinguishing the icon from the text now that both are on blue. At 3.39:1 it is under
   the 4.5:1 text floor but above the 3:1 WCAG 1.4.11 threshold for non-text graphics, which is what
   applies to an icon carrying no information the words do not already state. */
.tf-trust-item svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    stroke: var(--tf-yellow);
}
/* Left, as on hrtz — the headline starts on the same edge the card does, so the two share a
   left margin instead of a centre line. Stated explicitly because new.css:355 sets
   `text-align: center` on the hero, which this element would otherwise inherit (the same
   value that was centring the card's field labels — see .tf-bk-card below). */
.tf-bk-hero-title {
    text-align: left;
    font-family: var(--tf-font-headline);
    font-weight: 900;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    /* 1.2, not the 1.08 hrtz uses: this face sits lower in its em box, and at 1.08 the
       descender on "Money" was being trimmed by the line below it. */
    line-height: 1.2;
    color: var(--tf-white);
    padding-bottom: 2px;
    margin: 0 0 var(--tf-space-3);
    text-wrap: balance;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

/* White, like the line above it — see the note in welcome.blade.php on why the CMS colour
   is not used in this position. */
.tf-bk-hero-sub {
    display: block;
    color: var(--tf-white);
}

/* ---- the card ---- */

/* The blue foot is the legacy form's own detail — new.css:477 gave #lpForm a
   `border-bottom: 5px solid #005eb8`, and it is the one piece of that chrome worth keeping:
   it anchors the card and puts brand colour on it without competing with the CTA.
   4px rather than 5, and --tf-blue rather than the hardcoded old hex, so it tracks the brand
   token instead of drifting from it the way that literal did. */
.tf-bk-card {
    /* text-align inherits, and new.css:355 sets `text-align: center` on .lp-section-hero —
       which the card now sits inside. That was centring every field label over its own field
       ("PICK-UP LOCATION" floating mid-column instead of marking its left edge). Reset here,
       once, rather than on each label. */
    text-align: left;
    /* The Color Wave foot is a BACKGROUND LAYER, not a pseudo-element or a border-image.
       All three can paint the band; only this one follows the card's corners.

       - border-image: var(--tf-wave-gradient) 1 makes the browser drop border-radius
         altogether, squaring off all four corners.
       - An absolutely-positioned ::after cannot hold the radius either: CSS scales corner
         radii down when they exceed the box, so a 4px-tall strip asking for 16px corners
         gets 4px, and its ends jutted past the card's own 16px curve.

       A background layer is clipped to the border box, so it inherits the card's radius
       exactly and curves away with it. `bottom / 100% 4px no-repeat` pins the gradient as a
       4px band on the bottom edge; --tf-surface is the layer beneath it. */
    background:
        var(--tf-wave-gradient) bottom / 100% 4px no-repeat,
        var(--tf-surface);
    color: var(--tf-ink);
    border-radius: var(--tf-radius-lg);
    box-shadow: var(--tf-shadow-card);
    padding: 32px;
    font-family: var(--tf-font-body);
}

.tf-bk-top {
    display: flex;
    align-items: center;
    gap: var(--tf-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--tf-space-3);
}

.tf-bk-pills {
    display: inline-flex;
    background: var(--tf-surface-alt);
    border-radius: var(--tf-radius-pill);
    padding: 3px;
}

/* The idle pill is the softer of the two greys, so the pair reads as one selected and one
   not — at full --tf-ink both looked chosen, only in different shapes. */
.tf-bk-pills button {
    border: 0;
    background: transparent;
    padding: 8px 18px;
    border-radius: var(--tf-radius-pill);
    font-family: var(--tf-font-body);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--tf-ink-soft);
    cursor: pointer;
    transition:
        background var(--tf-dur) var(--tf-ease),
        color var(--tf-dur) var(--tf-ease);
}

.tf-bk-pills button:hover {
    color: var(--tf-ink);
}

/* Ink, not the brand blue.
   Blue was competing with the View Vehicles button: two blue-filled controls in one card
   read as two calls to action, when only one of them submits anything. Ink is neutral, so
   the blue in the card means "this is the button that does something" and nothing else.
   It also fixes contrast — white on --tf-blue is 4.6:1, scraping the AA floor, against
   9.7:1 here. Thrifty's own ink rather than raw black: the brand palette has no #000 for
   surfaces, and pure black beside the card's greys reads as a hole. */
.tf-bk-pills button[aria-pressed="true"] {
    background: var(--tf-ink);
    color: var(--tf-white);
}

@media (prefers-reduced-motion: reduce) {
    .tf-bk-pills button {
        transition: none;
    }
}

.tf-bk-pills button:focus-visible {
    outline: 2px solid var(--tf-blue);
    outline-offset: 2px;
}

.tf-bk-duration {
    margin-left: auto;
    background: var(--tf-surface-alt);
    border-radius: var(--tf-radius-pill);
    padding: 7px 14px;
    font-family: var(--tf-font-subtext);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--tf-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tf-bk-duration[hidden] {
    display: none;
}

/* discount code */
.tf-bk-discount {
    position: relative;
}

.tf-bk-discount-toggle {
    /* 32px min-height, not the 21px the text alone gives: this is a control a renter
       has to hit, and the bare text sits under the 24x24 WCAG 2.5.8 AA floor. */
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border: 0;
    background: none;
    padding: 0;
    font-family: var(--tf-font-body);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--tf-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.tf-bk-discount-toggle:focus-visible {
    outline: 2px solid var(--tf-blue);
    outline-offset: 2px;
}

.tf-bk-discount-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 31;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--tf-surface);
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius-md);
    box-shadow: var(--tf-shadow-card);
    padding: var(--tf-space-3);
}

/* the field and its Apply button are one control, side by side */
.tf-bk-discount-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Secondary, not the brand blue: the primary blue in this card belongs to View Vehicles,
   and a second blue button would read as a second way to submit the search. */
.tf-bk-btn-secondary {
    flex: none;
    height: 48px;
    padding: 0 18px;
    border: 1.5px solid var(--tf-ink);
    border-radius: var(--tf-radius-sm);
    background: var(--tf-surface);
    color: var(--tf-ink);
    font-family: var(--tf-font-subtext);
    font-weight: 700;
    font-size: 0.875rem;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--tf-dur) var(--tf-ease),
        color var(--tf-dur) var(--tf-ease);
}

.tf-bk-btn-secondary:hover {
    background: var(--tf-ink);
    color: var(--tf-white);
}

.tf-bk-btn-secondary:focus-visible {
    outline: 2px solid var(--tf-blue);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .tf-bk-btn-secondary {
        transition: none;
    }
}

.tf-bk-discount-pop[hidden] {
    display: none;
}

/* Padding reset to a plain field's. The base rule reserves 36px left and 34px right for the
   location field's pin and clear button, and this input has neither — that reservation was
   eating 70px of the box and clipping the placeholder to "Disco".

   Three classes deep, not two: `.tf-bk-card .tf-bk-input` further down this file carries the
   same (0,2,0) weight, and being LATER it won on source order and put the icon padding back.
   The extra class settles it by specificity so the order stops mattering. */
.tf-bk-card .tf-bk-discount-pop .tf-bk-input {
    width: 260px;
    padding: 0 12px;
}

/* alerts — one block above the grid, the way hrtz stacks them.
   Rounded on all four corners and tinted in the error hue rather than the grey surface: a
   neutral panel with red text on it read as a disabled row. The 3px rule stays on the left
   edge as the thing the eye catches, but it now terminates into a rounded box instead of
   running off a square one. */
.tf-bk-alerts {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--tf-error-surface);
    border: 1px solid var(--tf-error-line);
    border-left: 3px solid var(--tf-error);
    border-radius: var(--tf-radius-md);
    /* right padding clears the dismiss button so a long message does not run under it */
    padding: 11px 44px 11px 14px;
    margin: 0 0 var(--tf-space-3);
}

/* 28px, above the 24x24 WCAG 2.5.8 AA target floor — the glyph alone would be about half
   that. Muted until hovered: it is a way out of the message, not a second thing to read. */
.tf-bk-alert-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--tf-radius-sm);
    background: none;
    color: var(--tf-error);
    opacity: 0.65;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition:
        opacity var(--tf-dur) var(--tf-ease),
        background var(--tf-dur) var(--tf-ease);
}

.tf-bk-alert-close:hover {
    opacity: 1;
    background: var(--tf-error-line);
}

.tf-bk-alert-close:focus-visible {
    outline: 2px solid var(--tf-error);
    outline-offset: 1px;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .tf-bk-alert-close {
        transition: none;
    }
}

.tf-bk-alerts[hidden] {
    display: none;
}

.tf-bk-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--tf-error) !important;
    font-family: var(--tf-font-body) !important;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.45;
    margin: 0;
}

/* Drawn in CSS rather than injected by the widget, so a server-rendered error carries the
   same mark as a live one — the blade prints plain <p>s before any script runs.
   mask + currentColor, not background-image: the glyph then inherits --tf-error instead of
   hardcoding it a second time. */
.tf-bk-alert::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    background-color: currentColor;
    -webkit-mask: var(--tf-alert-glyph) center / contain no-repeat;
    mask: var(--tf-alert-glyph) center / contain no-repeat;
}

.tf-bk-alerts {
    --tf-alert-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 4.75a1.1 1.1 0 0 1 1.1 1.1v5.4a1.1 1.1 0 0 1-2.2 0v-5.4a1.1 1.1 0 0 1 1.1-1.1zm0 10.9a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6z'/%3E%3C/svg%3E");
}

/* ---- the grid ---- */

.tf-bk-grid {
    display: grid;
    gap: 12px;
    align-items: end;
    grid-template-areas: "pickup pickup-dt dropoff-dt submit";
    /* The submit column is sized to its own label rather than a share of the row: at 1fr it
       kept shrinking as the date columns grew, until "View Vehicles" no longer fit. */
    grid-template-columns: 2.2fr 1.7fr 1.7fr minmax(150px, 0.9fr);
}

.tf-bk-grid.has-dropoff {
    grid-template-areas: "pickup dropoff pickup-dt dropoff-dt submit";
    grid-template-columns: 1.3fr 1.3fr 1.75fr 1.75fr minmax(150px, 0.9fr);
}

.tf-bk-cell-pickup {
    grid-area: pickup;
}
.tf-bk-cell-dropoff {
    grid-area: dropoff;
}
.tf-bk-cell-pickup-dt {
    grid-area: pickup-dt;
}
.tf-bk-cell-dropoff-dt {
    grid-area: dropoff-dt;
}
.tf-bk-cell-submit {
    grid-area: submit;
}

.tf-bk-cell-dropoff[hidden] {
    display: none;
}





/* ---- fields ---- */

.tf-bk-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tf-bk-label {
    font-family: var(--tf-font-subtext) !important;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tf-ink);
    margin: 0;
    /* the legacy .grid-label paints a white block and pads it — this label is bare */
    background: none;
    padding: 0;
    line-height: 1.4;
}

/* merged date + time: one control with a seam, not two boxes */
.tf-bk-datetime-controls {
    display: flex;
    gap: 0;
    min-width: 0;
}

.tf-bk-datetime-date {
    flex: 1.15;
    min-width: 0;
}

/* min-width, not just a flex ratio: at 1fr of a shrinking column the select fell to ~90px
   and clipped its own value to "5:00 P" — the meridiem is the half that matters. 108px is
   the widest option ("11:30 AM") plus the native arrow. */
.tf-bk-datetime-time {
    flex: 1;
    min-width: 108px;
}

.tf-bk-datetime-date .tf-bk-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0; /* the seam is the time field's left border */
}

.tf-bk-datetime-time .tf-bk-input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* hovering either half highlights the whole control — it is one control now */
.tf-bk-datetime-controls:hover .tf-bk-input {
    border-color: var(--tf-ink-soft);
}

.tf-bk-date-control {
    position: relative;
}

.tf-bk-date-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tf-ink-soft);
    pointer-events: none;
    z-index: 1;
}

.tf-bk-card .tf-bk-date-input {
    padding-left: 36px;
    cursor: pointer;
}

/* the time half is a native select, so it keeps its own affordance — new.css paints an
   arrow image onto .res-form-grid select, which would sit on top of the native one */
.tf-bk-card .tf-bk-select {
    appearance: auto;
    -webkit-appearance: menulist;
    background-image: none;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 2px;
}

/* Native <option> styling is limited (only color/background-color reliably apply).
   Available times read as normal ink; only a genuinely disabled option (there are
   none today, but the rule holds if branch-hours restrictions land later) goes light. */
.tf-bk-card .tf-bk-select option {
    color: var(--tf-ink);
}

.tf-bk-card .tf-bk-select option:disabled {
    color: #b3b3b3;
}

/* ---- submit ---- */

/* The submit has no label above it, so the grid's `align-items: end` is what lines its
   bottom edge up with the inputs beside it. */
.tf-bk-cell-submit {
    display: flex;
}

/* The id is in every selector below on purpose.
   new.css declares #continueProxy twice (lines 602 and 1066) — background #005EB8,
   float:right, padding 12px 55px, font-size 18px, border-radius 2px. An ID beats a class
   whatever the load order, so a plain `.tf-bk-cta` never applied to this button: it kept the
   old blue through the brand-token change and floated out of its grid cell. Pairing the id
   with the class takes the specificity to (1,1,0) and hands the button back to this file. */
.tf-bk-cta,
#continueProxy.tf-bk-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: var(--tf-radius-sm);
    /* Flat --tf-blue. A gradient here previously ran from --tf-blue down to --tf-blue-deep,
       which is #005EB8 — the blue the brand token just moved AWAY from. Mixing it back in
       meant the button still read as the old colour, so the depth comes from the shadow
       alone and the fill stays the one value the guide specifies. */
    background: var(--tf-blue);
    color: var(--tf-white);
    font-family: var(--tf-font-subtext);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    /* "View Vehicles" wrapped inside the 48px box and had its second line clipped */
    white-space: nowrap;
    padding: 0 18px;
    box-shadow: var(--tf-shadow-cta);
    transition:
        box-shadow var(--tf-dur) var(--tf-ease),
        transform var(--tf-dur) var(--tf-ease),
        filter var(--tf-dur) var(--tf-ease);
}

/* Brightened rather than recoloured. Swapping to the darker blue on hover made the button
   recede exactly when it should respond. */
.tf-bk-cta:hover,
#continueProxy.tf-bk-cta:hover {
    filter: brightness(1.08);
    box-shadow: var(--tf-shadow-cta-hover);
    transform: translateY(-1px);
}

.tf-bk-cta:active,
#continueProxy.tf-bk-cta:active {
    transform: translateY(0);
    box-shadow: var(--tf-shadow-cta);
    filter: brightness(0.96);
}

.tf-bk-cta:focus-visible {
    outline: 2px solid var(--tf-blue);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .tf-bk-cta {
        transition: none;
    }

    .tf-bk-cta:hover,
    .tf-bk-cta:active {
        transform: none;
    }
}

/* Not disabled — a dead button explains nothing. It stays pressable so the alert
   above keeps the reason on screen. */
.tf-bk-cta.is-blocked {
    opacity: 0.55;
}

/* ---- the combobox field ---- */

.tf-bk-location {
    position: relative;
}

.tf-bk-control {
    position: relative;
}

.tf-bk-pin {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tf-ink-soft);
    pointer-events: none;
    z-index: 1;
}

/* Scoped to the card, not to .tf-bk-control: the location field is the only one wrapped in
   a control, so anchoring the base style there left the date input and the time select with
   no height, border or radius at all. .tf-bk-card reaches every field and still carries the
   two-class weight needed to beat new.css's `.res-form-grid input[type=text]`
   (border:none; font-size:14px) wherever that wrapper survives. */
.tf-bk-card .tf-bk-input {
    /* never below 16px — smaller triggers iOS Safari's zoom-on-focus */
    font-size: 16px;
    font-family: var(--tf-font-body);
    color: var(--tf-ink);
    background: var(--tf-surface);
    border: 1.5px solid var(--tf-line);
    border-radius: var(--tf-radius-sm);
    padding: 0 34px 0 36px;
    height: 48px;
    width: 100%;
    /* Stated, not inherited: a line-height carried down from an ancestor taller than the
       48px box clips the glyphs inside it rather than growing the field. */
    line-height: normal;
    box-sizing: border-box;
}

.tf-bk-card .tf-bk-input:hover {
    border-color: var(--tf-ink-soft);
}

.tf-bk-card .tf-bk-input:focus,
.tf-bk-card .tf-bk-input:focus-visible {
    outline: 2px solid var(--tf-blue);
    outline-offset: 1px;
    border-color: var(--tf-blue);
}

.tf-bk-input::placeholder {
    color: var(--tf-ink-soft);
    font-family: var(--tf-font-light);
}

.tf-bk-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: var(--tf-radius-pill);
    background: var(--tf-surface-alt);
    color: var(--tf-ink);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.tf-bk-clear:hover {
    background: var(--tf-line);
}

/* ---- the pop: options list + details pane on one surface ---- */

.tf-bk-pop {
    --tf-pop-max: min(420px, 55vh);
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    display: flex;
    align-items: stretch;
    background: var(--tf-surface);
    border-radius: var(--tf-radius-md);
    box-shadow: var(--tf-shadow-card);
    overflow: hidden; /* clips both columns to the card radius */
    z-index: 1040;
}

.tf-bk-pop[hidden] {
    display: none;
}

/* anchored to the field's right edge, details extending leftward */
.tf-bk-pop.is-flipped {
    left: auto;
    right: 0;
    flex-direction: row-reverse;
}

.tf-bk-menu {
    /* the height cap sits on each column, not the flex container — a row-flex
       max-height doesn't shrink children, it would just clip them unscrollable */
    max-height: var(--tf-pop-max);
    width: min(340px, 90vw); /* mirrored by POP_WIDTH in booking-widget.js */
    overflow-y: auto;
    padding: 0 var(--tf-space-2) var(--tf-space-2);
}

/* city headers pin to the top while their branches scroll past */
.tf-bk-city {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--tf-surface);
    font-family: var(--tf-font-subtext);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tf-ink-soft);
    margin: 0;
    padding: 10px 10px 4px;
    z-index: 1;
}

/* 30px = the header's 10px padding + its 14px glyph + the 6px gap, so a branch
   label starts exactly under the city label naming it. */
.tf-bk-option {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: 7px 10px 7px 30px;
    border-radius: var(--tf-radius-sm);
    font-family: var(--tf-font-body);
    font-size: 15px;
    color: var(--tf-ink);
    cursor: pointer;
}

/* .is-active is unconditional — it is the keyboard/arrow-key selection and has to
   show on every device. :hover is gated behind an actual hovering device: on a
   touchscreen there is no pointer to leave, so the tapped row keeps the highlight
   until something else is tapped, which reads as a selection that did not take. */
.tf-bk-option.is-active {
    background: var(--tf-surface-alt);
}

@media (hover: hover) {
    .tf-bk-option:hover {
        background: var(--tf-surface-alt);
    }
}

.tf-bk-option[aria-selected="true"] {
    background: var(--tf-blue);
    color: var(--tf-white);
}

/* Inherits the header's muted colour — the glyph labels the group, it does not
   compete with it. Only ever rendered inside .tf-bk-city. */
.tf-bk-icon {
    flex: 0 0 auto;
}

.tf-bk-empty {
    color: var(--tf-error);
    font-size: 0.875rem;
    margin: var(--tf-space-2);
}

/* ---- details pane ---- */

.tf-bk-detail {
    max-height: var(--tf-pop-max);
    width: 300px;
    flex: none;
    overflow-y: auto;
    border-left: 1px solid var(--tf-line);
    padding: var(--tf-space-3);
    /* clicking the pane picks the branch it describes */
    cursor: pointer;
    /* a column so the CTA can be pinned to the foot: the pane is stretched to the
       list's height, and a branch with few facts would otherwise leave the void
       BELOW its own CTA */
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.tf-bk-detail:hover {
    background: var(--tf-surface-alt);
}

/* The pane is mounted only while a row is hovered or arrowed to, so the menu opens as a
   plain list rather than a list plus 300px of blank white. */
.tf-bk-detail[hidden] {
    display: none;
}

/* flipped: the pane sits left of the list, so the seam swaps sides */
.tf-bk-pop.is-flipped .tf-bk-detail {
    border-left: 0;
    border-right: 1px solid var(--tf-line);
}

.tf-bk-detail-name {
    font-family: var(--tf-font-subtext);
    font-size: 15px;
    color: var(--tf-ink);
    margin: 0 0 var(--tf-space-1);
}

.tf-bk-detail-address {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--tf-ink);
    margin: 0 0 var(--tf-space-2);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.tf-bk-detail-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--tf-font-body);
    font-size: 0.875rem;
    color: var(--tf-ink);
    margin: 0 0 4px;
}

.tf-bk-detail-phone svg {
    flex: none;
    color: var(--tf-ink-soft);
}

/* one rule for every section head in the pane */
.tf-bk-detail-label {
    /* matches .tf-bk-city */
    font-family: var(--tf-font-subtext);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tf-ink-soft);
    border-top: 1px solid var(--tf-line);
    margin: var(--tf-space-2) 0 var(--tf-space-1);
    padding: var(--tf-space-2) 0 0;
}

.tf-bk-detail-hours {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 12px;
    font-size: 0.875rem;
    color: var(--tf-ink);
}

.tf-bk-detail-window {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* the pane's affordance: without it the panel is clickable but does not look it.
   margin-top:auto parks it at the foot, so the slack on a sparse branch falls
   between the facts and the CTA instead of dangling under it. */
.tf-bk-detail-pick {
    margin: auto 0 0;
    padding-top: var(--tf-space-3);
    border-top: 1px solid var(--tf-line);
    font-family: var(--tf-font-subtext);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tf-ink);
}

.tf-bk-detail-pick::after {
    content: " \2192";
    color: var(--tf-ink-soft);
}

.tf-bk-detail:hover .tf-bk-detail-pick::after {
    color: var(--tf-ink);
}

/* ---- inline scheduling warnings ---- */

/* Mirrors a rule chooseAVehicle() already enforces, shown against the field that
   caused it instead of as a red banner after a reload. */
.tf-bk-issue {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 6px 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--tf-error);
}

.tf-bk-issue[hidden] {
    display: none;
}

.tf-bk-issue svg {
    flex: none;
    margin-top: 2px;
}

/* ---- holding the pane's typography against the legacy sheet ----
   new.css:43 sets `p { font-family: Avenir Next Regular !important }`, which every <p> in
   this widget is subject to — the branch name, the address, the section labels and the CTA
   all lost their intended face. An !important is the only thing that answers an !important;
   these selectors are single-class, which outranks the bare `p` they are overriding.

   Weights are stated rather than inherited for the same reason: what a <p> or <button> picks
   up inside .res-form-grid is not something this file should be guessing at. */
.tf-bk-city,
.tf-bk-detail-label,
.tf-bk-detail-pick {
    font-family: var(--tf-font-subtext) !important;
    font-weight: 700;
}

.tf-bk-detail-name {
    font-family: var(--tf-font-subtext) !important;
    font-weight: 700;
    color: var(--tf-ink);
}

.tf-bk-detail-address,
.tf-bk-detail-phone,
.tf-bk-detail-closure {
    font-family: var(--tf-font-body) !important;
    font-weight: 400;
    color: var(--tf-ink);
}

.tf-bk-detail-hours,
.tf-bk-detail-hours span {
    font-family: var(--tf-font-body) !important;
    font-weight: 400;
    color: var(--tf-ink);
}

.tf-bk-issue,
.tf-bk-empty {
    font-family: var(--tf-font-body) !important;
    font-weight: 400;
}

.tf-bk-menu .tf-bk-option {
    font-family: var(--tf-font-body);
    font-weight: 500;
}

/* ---- sticky summary bar ----
   Sits under the site header, like hrtz's does. The offset is measured at runtime rather
   than hardcoded: the sticky element is .tf-header-stack (core.css) — the nav AND the Color
   Wave rule together — so its height is the nav plus an image, and it differs between
   breakpoints. booking-widget.js writes the measured value into --tf-sticky-top.
   The 0px fallback only applies if that measurement never runs. */
.tf-bk-sticky-sentinel {
    height: 1px;
}

.tf-bk-sticky {
    position: fixed;
    top: var(--tf-sticky-top, 0px);
    left: 0;
    right: 0;
    /* Below the header, not above it. The bar hides by sliding up behind .tf-header-stack,
       which only works while the header paints on top — at --tf-z-bar (above the nav) it
       slid across the logo on its way out. The header is opaque white, so it hides it. */
    z-index: calc(var(--tf-z-nav) - 1);
    background: var(--tf-surface);
    box-shadow: var(--tf-shadow-bar);
    /* Parked off-screen rather than display:none so it slides in; the hidden attribute is
       added a beat later (booking-widget.js) to take it out of the tab order once gone. */
    transform: translateY(-110%);
    transition: transform var(--tf-dur) var(--tf-ease);
}

.tf-bk-sticky.is-stuck {
    transform: translateY(0);
}

.tf-bk-sticky[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .tf-bk-sticky {
        transition: none;
    }
}

/* 1140px, not the card's min(94vw, 1560px). The card goes wide because it holds five
   controls; this holds one line of text and a button, and stretched to 1560px the summary
   and the CTA end up marooned at opposite ends of the screen with a void between them. */
.tf-bk-sticky-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: var(--tf-space-3);
}

.tf-bk-sticky-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    border: 0;
    background: none;
    padding: 0;
    font-family: var(--tf-font-body);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--tf-ink);
    cursor: pointer;
}

.tf-bk-sticky-summary svg {
    flex: none;
    color: var(--tf-ink-soft);
}

.tf-bk-sticky-summary:focus-visible {
    outline: 2px solid var(--tf-blue);
    outline-offset: 2px;
}

/* The branch name is the one variable-length part, so it is the part that truncates —
   the dates beside it must stay whole to be worth reading. */
.tf-bk-sticky-loc {
    font-family: var(--tf-font-subtext);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 32ch;
}

.tf-bk-sticky-sep {
    color: var(--tf-line);
}

.tf-bk-sticky-edit {
    color: var(--tf-ink-soft);
    font-size: 0.75rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* width:auto overrides the base .tf-bk-cta's width:100%, which would otherwise stretch the
   button across the bar. */
.tf-bk-sticky .tf-bk-sticky-cta {
    margin-left: auto;
    width: auto;
    height: 38px;
    font-size: 0.875rem;
    flex: none;
}

/* Not shown on a phone.
   The bar exists so a long desktop page keeps the itinerary and the submit within reach. On
   a phone it costs more than it returns: it takes a 48px band off an already short viewport,
   it sits under a header that is itself sticky, and the summary it carries has to be cut back
   to a branch name and two dates before it fits — at which point it is a label, not a
   shortcut. Scrolling back to the card is a flick away here in a way it is not on desktop.

   display:none on the container, so the button inside is out of the tab order too rather
   than merely invisible. The rules that shrank it for this width are kept below, commented,
   because they are what a phone variant would start from if one is ever wanted. */
@media (max-width: 700px) {
    .tf-bk-sticky {
        display: none;
    }

    /*
    .tf-bk-sticky-inner {
        height: 48px;
        padding: 0 14px;
        gap: var(--tf-space-2);
    }

    .tf-bk-sticky-desktop {
        display: none;
    }

    .tf-bk-sticky-loc {
        max-width: 14ch;
    }
    */
}

/* ---- calendar ----
   jQuery UI ships a 2010-era theme (gradient header, bevelled day buttons, blue chrome).
   This restyles it to the same flat card the rest of the widget uses. Everything is scoped
   under .tf-bk-datepicker, which beforeShow() adds in booking-widget.js — jQuery UI reuses
   a single #ui-datepicker-div for the whole page, so an unscoped rule would repaint every
   other datepicker on the site. */
.tf-bk-datepicker.ui-datepicker {
    width: 292px;
    padding: var(--tf-space-2);
    border: 0;
    border-radius: var(--tf-radius-md);
    background: var(--tf-surface);
    box-shadow: var(--tf-shadow-card);
    font-family: var(--tf-font-body);
    font-size: 14px;
    z-index: 1050 !important; /* jQuery UI writes an inline z-index of 1 */
}

.tf-bk-datepicker .ui-datepicker-header {
    position: relative;
    border: 0;
    background: none;
    padding: var(--tf-space-1) 0 var(--tf-space-2);
    font-weight: 400;
}

.tf-bk-datepicker .ui-datepicker-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px; /* month left of centre, year right — the chevrons own the edges */
    margin: 0 28px;
    line-height: 28px;
    font-family: var(--tf-font-subtext);
    font-weight: 700;
    font-size: 15px;
    color: var(--tf-ink);
}

/* The default theme hangs an icon sprite off these. Replaced with a drawn chevron so the
   control does not depend on jquery-ui's image assets resolving. */
.tf-bk-datepicker .ui-datepicker-prev,
.tf-bk-datepicker .ui-datepicker-next {
    top: var(--tf-space-1);
    width: 28px;
    height: 28px;
    border: 0;
    background: none;
    cursor: pointer;
}

.tf-bk-datepicker .ui-datepicker-prev {
    left: 2px;
}
.tf-bk-datepicker .ui-datepicker-next {
    right: 2px;
}

.tf-bk-datepicker .ui-datepicker-prev:hover,
.tf-bk-datepicker .ui-datepicker-next:hover {
    background: var(--tf-surface-alt);
    border: 0;
    border-radius: var(--tf-radius-sm);
    top: var(--tf-space-1);
}

.tf-bk-datepicker .ui-datepicker-prev.ui-state-disabled,
.tf-bk-datepicker .ui-datepicker-next.ui-state-disabled {
    opacity: 0.35;
    cursor: default;
}

/* the sprite itself — replaced by a CSS chevron on the ::after below */
.tf-bk-datepicker .ui-datepicker-prev .ui-icon,
.tf-bk-datepicker .ui-datepicker-next .ui-icon {
    display: none;
}

.tf-bk-datepicker .ui-datepicker-prev::after,
.tf-bk-datepicker .ui-datepicker-next::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 10px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--tf-ink);
    border-right: 2px solid var(--tf-ink);
}

.tf-bk-datepicker .ui-datepicker-prev::after {
    transform: rotate(-135deg);
    left: 11px;
}

.tf-bk-datepicker .ui-datepicker-next::after {
    transform: rotate(45deg);
    left: 8px;
}

.tf-bk-datepicker .ui-datepicker-calendar {
    margin: 0;
    border-collapse: separate;
    border-spacing: 1px;
}

.tf-bk-datepicker .ui-datepicker-calendar th {
    padding: 4px 0;
    font-family: var(--tf-font-body);
    font-weight: 600;
    font-size: 12px;
    color: var(--tf-ink-soft);
    text-align: center;
}

.tf-bk-datepicker .ui-datepicker-calendar td {
    padding: 0;
    border: 0;
}

.tf-bk-datepicker .ui-datepicker-calendar td a,
.tf-bk-datepicker .ui-datepicker-calendar td span {
    display: block;
    padding: 0;
    width: 38px;
    line-height: 36px;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--tf-radius-sm);
    background: none;
    font-weight: 500;
    color: var(--tf-ink);
    font-variant-numeric: tabular-nums;
}

.tf-bk-datepicker .ui-datepicker-calendar td a:hover {
    background: var(--tf-surface-alt);
}

/* Today: outlined, not filled — the fill means "this is your pick-up date", and two filled
   cells in one grid would leave the customer guessing which one they chose. */
.tf-bk-datepicker .ui-datepicker-calendar td .ui-state-highlight {
    border-color: var(--tf-blue);
    background: var(--tf-surface);
    color: var(--tf-ink);
}

.tf-bk-datepicker .ui-datepicker-calendar td .ui-state-active {
    background: var(--tf-blue);
    border-color: var(--tf-blue);
    color: var(--tf-white);
    font-weight: 700;
}

/* Days before the lead time, and the spill from the neighbouring months, read the same way:
   present for orientation, not selectable. */
.tf-bk-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable span,
.tf-bk-datepicker .ui-datepicker-calendar td.ui-state-disabled span {
    color: var(--tf-line);
}

.tf-bk-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month a,
.tf-bk-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month span {
    color: var(--tf-line);
}

/* ---- no flyout without a fine pointer or the room for it ---- */

@media (max-width: 1100px), (hover: none), (pointer: coarse) {
    .tf-bk-detail {
        display: none;
    }

    /* With the pane gone the pop is a single column, so it matches its field and
       the flip stops meaning anything. Both halves matter: the flip check sizes
       for a pane it cannot see, so every phone would otherwise anchor the menu
       right and hang a 340px menu past the field's left edge. */
    .tf-bk-pop,
    .tf-bk-pop.is-flipped {
        left: 0;
        right: 0;
    }

    .tf-bk-menu {
        width: 100%;
    }
}

/* ---- responsive ----
   Deliberately last in the file. These override base rules declared above them, and a
   media query adds NO specificity — so an equal-weight selector further down the file
   wins on source order alone. Sitting up beside the grid rules, every override here that
   shared a selector with a later base rule was silently dead: the time select kept the
   desktop 108px floor and clipped its own meridiem to "2:00 P", and the CTA kept 48px.
   Anything added below this point must be checked against these blocks. */

@media (max-width: 1100px) {
    .tf-bk-grid,
    .tf-bk-grid.has-dropoff {
        grid-template-areas:
            "pickup pickup"
            "pickup-dt dropoff-dt"
            "submit submit";
        grid-template-columns: 1fr 1fr;
    }

    .tf-bk-grid.has-dropoff {
        grid-template-areas:
            "pickup dropoff"
            "pickup-dt dropoff-dt"
            "submit submit";
    }
}

@media (max-width: 640px) {
    .tf-bk-grid,
    .tf-bk-grid.has-dropoff {
        grid-template-areas: "pickup" "dropoff" "pickup-dt" "dropoff-dt" "submit";
        grid-template-columns: 1fr;
        gap: var(--tf-space-3);
    }

    /* #lpFormRow floats the card up over the banner by 190px on desktop. On a phone the
       banner is only 140px tall (new.css:1082), so the same pull drags the headline under
       the nav — new.css already answers that with `top:-135px; margin-top:55px`, and the
       card just needs room to breathe under it. */
    /* Paired with the id so it outranks new.css:456's `#lpFormRow { padding-left: 14px;
       padding-right: 14px }` — a class rule here lost to it, which is why the card sat
       almost flush against both edges of the phone. Space on all four sides so the card
       reads as a card rather than a full-bleed panel. */
    #lpFormRow.tf-bk-hero {
        max-width: 100%;
        /* 24px at the sides, up from 16. At 16 the card read as a full-bleed panel that
           happened to be white, rather than a card sitting on the page — there was not
           enough ground showing beside it for the edge to register. */
        padding: var(--tf-space-3) var(--tf-space-4) var(--tf-space-4);
    }

    .tf-bk-hero-title {
        font-size: 1.5rem;
        /* Was --tf-space-2. The headline was landing almost on the card's top edge. */
        margin-bottom: var(--tf-space-3);
    }

    /* 24px, not 16. The desktop card sits at 32px, and dropping straight to 16 on a phone
       put the pills against the top edge and the CTA against the bottom one — the content
       filled the card instead of sitting in it. 24px is the step down that still reads as
       a margin at this width. */
    /* radius-lg, matching desktop. The 8px step made the card's corners nearly square at
       the exact width where a soft corner is what tells you it is a card at all. */
    .tf-bk-card {
        padding: var(--tf-space-4);
        border-radius: var(--tf-radius-lg);
    }

    /* Two lines, not three: the pills take a full row of their own, then the discount link
       and the rental chip share the next one — link left, chip right. Stacking all three in
       a column (an earlier attempt) spent a third line on a chip that is four words long and
       pushed the fields further down the fold. */
    .tf-bk-top {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--tf-space-2);
        margin-bottom: var(--tf-space-3);
    }

    /* flex-basis 100%, not just width: in a wrapping row the basis is what forces the pills
       onto a line by themselves and pushes the link and chip down to share the next. */
    .tf-bk-pills {
        flex: 0 0 100%;
        width: 100%;
    }

    /* "Different drop-off" was breaking across two lines, which made one pill taller than
       the other and the whole control lopsided. The label is short enough to fit on one
       line at this width once the padding stops taking 36px of it. */
    .tf-bk-pills button {
        flex: 1;
        white-space: nowrap;
        padding: 8px 10px;
        font-size: 0.8125rem;
    }

    /* Keeps the chip against the right edge of the line it shares with the discount link. */
    .tf-bk-duration {
        margin-left: auto;
    }

    /* The popover is positioned against .tf-bk-discount, which is only as wide as the
       "Add a discount code" link it wraps — so `left:0; right:0` (the previous rule) pinned it
       to roughly 200px and left the input a ~60px slot barely wide enough to see what you were
       typing. A code is the one field here a renter types blind from a voucher, so it needs the
       room.

       min-width breaks it out of the parent's width; max-width keeps it inside the viewport on
       the narrowest phones, measured against the card's own 2 x space-4 padding. */
    .tf-bk-discount-pop {
        left: 0;
        right: auto;
        min-width: 288px;
        max-width: calc(100vw - 56px);
    }

    /* Same specificity note as the desktop rule above — a media query adds no weight of its
       own, so this needs the card class to outrank `.tf-bk-card .tf-bk-input` further down.
       flex rather than a fixed width so the field takes whatever the Apply button leaves;
       min-width:0 because a flex item will not shrink past its content without it. */
    .tf-bk-card .tf-bk-discount-pop .tf-bk-input {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* The date half gives way; the time half gets a hard floor.
       At 104px the select still clipped its own value to "2:00 PN" — 16px text (it cannot
       go lower without triggering iOS zoom-on-focus) plus the native arrow needs more room
       than a phone-width column concedes on its own. 122px fits the longest option,
       "11:30 AM", with the arrow and padding. */
    .tf-bk-datetime-date {
        flex: 1;
        min-width: 0;
    }

    .tf-bk-datetime-time {
        flex: none;
        min-width: 122px;
    }

    /* Every pixel of the time box goes to the value at this width. */
    .tf-bk-card .tf-bk-select {
        padding-left: 8px;
        padding-right: 0;
    }

    /* A full-width tap target once it is the last thing in a single column. */
    .tf-bk-cta {
        height: 52px;
    }

    /* The flyout is hidden at this width, so the options list IS the control — it should
       use the field's full width rather than a 340px column inside it. */
    .tf-bk-pop {
        left: 0;
        right: 0;
    }

    .tf-bk-menu {
        width: 100%;
    }
}