/**
 * tf-core — global skin: Color Bar, nav re-skin, footer re-skin, shared layout
 * primitives and CTA/card styles. Loaded on every frontend page via
 * frontend/layout/head.blade.php. Scope: nav + footer only — never touches
 * the booking form.
 */
@import url("tokens.css?v=2");

/* ---------------------------------------------------------------- layout primitives
   Sticky footer. On a short page — a one-card offers listing, an empty state, a
   city with a single branch — the footer ended where the content ended, leaving
   a band of white between it and the bottom of the window.

   The body becomes a flex column; the footer's `margin-top: auto` (see the
   footer rule below) then absorbs the leftover height and pins it to the floor.
   Deliberately NOT position:fixed — the footer must still scroll away normally
   once the content is taller than the screen. Done from the footer rather than
   with flex:1 on a wrapper because the content div in app.blade.php carries no
   class of its own. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Mobile browsers count the collapsing address bar in 100vh, which leaves a
       gap the height of that chrome. dvh measures what is actually visible;
       browsers without it fall back to the vh line above. */
    min-height: 100dvh;
}

.tf-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* The vertical partner to .tf-container. Used by the customer portal, whose markup pairs the two
   the way the rest of the redesign does; without it the portal's sections sit flush against the
   header and each other. */
.tf-section {
    padding: var(--tf-space-6) 0;
}

.tf-section-alt {
    background: var(--tf-surface-alt);
}

.tf-eyebrow {
    font-family: var(--tf-font-subtext);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tf-blue);
    margin: 0 0 var(--tf-space-2);
}

/* ---------------------------------------------------------------- cards (offers + guides)
   Reusable card primitive — used by the homepage's travel-guide grid, not the
   booking form. */
.tf-card-item {
    background: var(--tf-surface);
    border-radius: var(--tf-radius-md);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition:
        transform 150ms var(--tf-ease),
        box-shadow 150ms var(--tf-ease);
}

.tf-card-item:hover,
.tf-card-item:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    text-decoration: none;
    color: inherit;
}

/* ---------------------------------------------------------------- CTA */
.tf-cta {
    display: inline-block;
    border: 0;
    border-radius: var(--tf-radius-pill);
    background: var(--tf-blue);
    color: var(--tf-white);
    font-family: var(--tf-font-subtext);
    font-size: 16px;
    padding: 0 26px;
    height: 48px;
    line-height: 48px;
    text-decoration: none;
    cursor: pointer;
}

.tf-cta:hover,
.tf-cta:focus-visible {
    background: var(--tf-blue-deep);
    color: var(--tf-white);
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Underline removal has to win on SPECIFICITY, not load order: legacy new.css
   has `a:link{color:#06c;text-decoration:underline}`, and because new.css is
   pulled in from each page's @section('css') it loads AFTER core.css. At equal
   specificity (both 0,1,0) the later file wins, which is why .tf-cta buttons
   ("View Vehicles", "All Travel Guides", "Learn More") rendered underlined.
   `a.tf-cta` is 0,1,1 and beats a:link regardless of order — no !important. */
a.tf-cta,
a.tf-cta:link,
a.tf-cta:visited,
a.tf-cta:hover,
a.tf-cta:active,
a.tf-cta:focus {
    color: var(--tf-white);
    text-decoration: none;
}

/* ---------------------------------------------------------------- nav
   Keeps the existing Bootstrap navbar markup (top-menu.blade.php); this only
   re-skins it. Solid Thrifty Blue, matching hrtz's solid-black nav 1:1 — the
   logo is blue artwork on transparency with no white variant in the repo, so
   it's flattened to white the same way footer.tf-footer already does
   (brightness(0) invert(1)), rather than adding a new asset. */
/* Sticky unit: nav + the Color Wave rule beneath it. */
.tf-header-stack {
    position: sticky;
    top: 0;
    z-index: var(--tf-z-nav);
    background: var(--tf-blue-deep);
}

/* The rule is an <img>; inline-level by default, which leaves a baseline gap
   under it that shows as a white seam while scrolling. */
.tf-header-stack .mmBannerImg {
    display: block;
}

nav.tf-nav {
    background: var(--tf-blue-deep) !important;
    border-bottom: 0;
    min-height: var(--tf-nav-h);
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    font-family: var(--tf-font-body);
}

nav.tf-nav .navbar-brand img {
    filter: brightness(0) invert(1);
}

nav.tf-nav .navbar-nav .nav-link {
    color: var(--tf-white) !important;
    font-family: var(--tf-font-subtext);
    font-size: 13px;
    letter-spacing: 0.04em;
    padding-top: 0.3rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid transparent;
}

nav.tf-nav .navbar-nav .nav-link:hover,
nav.tf-nav .navbar-nav .nav-link:focus,
nav.tf-nav .navbar-nav .nav-item.active > .nav-link {
    color: var(--tf-white) !important;
    border-bottom-color: var(--tf-white);
}

nav.tf-nav .navbar-nav .nav-link:focus-visible {
    outline: 2px solid var(--tf-white);
    outline-offset: 2px;
}

nav.tf-nav .top-right span {
    color: var(--tf-white);
    font-family: var(--tf-font-body);
}

nav.tf-nav .top-right.links {
    display: flex;
    gap: var(--tf-space-2);
    align-items: center;
}

/* login / signup CTAs — outline "Sign in", solid yellow "Create account", matching hrtz's
   white-outline + yellow-pill pair on its black bar. */
nav.tf-nav .top-right.links a {
    background-color: var(--tf-white) !important;
    color: var(--tf-blue-deep) !important;
    font-family: var(--tf-font-subtext);
    font-weight: 700;
    border-radius: var(--tf-radius-pill);
    padding: 8px 22px;
    letter-spacing: 0.02em;
}

nav.tf-nav .top-right.links a:hover {
    background-color: var(--tf-white) !important;
    color: var(--tf-blue-deep) !important;
    opacity: 0.88;
}

nav.tf-nav .navbar-toggler-icon {
    /* The one place a hex must be repeated outside tokens.css: a data-URI is an
       opaque string to the CSS parser, so var(--tf-white) cannot resolve inside
       it. White, to read against the blue bar. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Color Wave strip under the nav (existing thrifty-border-line.png asset kept
   as-is per current homepage placement; this just normalizes its box). */
img.mmBannerImg {
    display: block;
    height: 4px;
    width: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------------- footer */
footer.tf-footer {
    background: var(--tf-blue) !important;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--tf-font-body);
    padding: 40px 0 28px;
    /* auto, not 0: as the last flex item in the body column (see the body rule
       above) an auto top margin absorbs the leftover viewport height, which is
       what pins the footer to the bottom of a short page. On a tall page there
       is no leftover space, so it behaves exactly like 0.
       !important is inherited from the original rule — legacy CSS sets a top
       margin on this element that a plain declaration cannot outrank. */
    margin-top: auto !important;
    flex-shrink: 0;
}

footer.tf-footer a,
footer.tf-footer a.text-white {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none;
}

footer.tf-footer a:hover,
footer.tf-footer a.text-white:hover {
    color: var(--tf-yellow) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

footer.tf-footer ul {
    list-style: none;
}

/* --- footer columns -------------------------------------------------------
   Three columns on desktop (brand | Quick Links | Company), stacking on mobile.
   The list reset below is scoped to the columns rather than the whole footer so
   admin-entered rich text in second_column/third_column lands with the same
   spacing as the hardcoded fallback lists -- editors paste <ul><li> and would
   otherwise get browser default padding and bullets. */
footer.tf-footer .tf-footer-main {
    row-gap: 32px;
    text-align: left;
}

/* The brand column runs to roughly twice the height of the two link columns, so
   without this the short ones float against a tall block of empty blue. Aligning
   the row to the top and giving the link columns a little top offset lines their
   headings up with the brand title rather than the logo. */
@media (min-width: 992px) {
    footer.tf-footer .tf-footer-main {
        align-items: flex-start;
    }

    footer.tf-footer #page-footer-second-column,
    footer.tf-footer #page-footer-third-column {
        padding-top: 6px;
    }
}

footer.tf-footer .tf-footer-logo {
    display: block;
    width: 160px;
    max-width: 100%;
    height: auto;
    margin-bottom: 16px;
    /* The Thrifty wordmark ships as blue artwork on transparency, which on this
       blue panel is all but invisible, and the repo has no white variant.
       brightness(0) flattens every opaque pixel to black and invert(1) turns
       those white; transparency is untouched, so the result is the same mark in
       white without adding an asset to keep in sync. */
    filter: brightness(0) invert(1);
}

footer.tf-footer .tf-footer-title {
    margin: 0 0 12px;
    font-family: var(--tf-font-subtext, inherit);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
}

footer.tf-footer .tf-footer-about {
    margin: 0 0 20px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    max-width: 38ch;
}

footer.tf-footer #page-footer-second-column ul,
footer.tf-footer #page-footer-third-column ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

footer.tf-footer #page-footer-second-column li,
footer.tf-footer #page-footer-third-column li {
    /* The old markup laid these out inline with per-item padding. As a column
       they need vertical rhythm and a 44px-ish touch target instead. */
    display: block;
    padding: 0;
    margin-bottom: 10px;
    font-size: 0.9rem;
    line-height: 1.4;
}

footer.tf-footer .tf-footer-contact {
    margin-top: 24px;
    font-size: 0.9rem;
    /* The address is the one string here that cannot wrap at a space, so it gets
       an explicit break opportunity in the markup and this as the backstop. */
    overflow-wrap: anywhere;
}

/* --- compliance badges ---------------------------------------------------- */
footer.tf-footer .tf-footer-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0;
}

/* The sticker is roughly square and the certificate is landscape, so matching on
   height alone left one a stamp and the other a sliver. Fixing the plate size and
   letting object-fit letterbox the artwork inside it makes them read as a pair.
   They are badges, not documents -- the full image is one click away. */
/* The badges became <button> so they can open the seal and certificate in a modal
   instead of a new tab. Buttons carry a UA border, their own font and a grey
   background, so those are reset here -- the plate below is the whole look. The
   `a` selector is kept in case any other markup still links a badge. */
footer.tf-footer .tf-footer-badges a,
footer.tf-footer .tf-footer-badges button {
    display: block;
    width: 88px;
    height: 64px;
    padding: 6px;
    border: 0;
    cursor: pointer;
    /* White plate: both seals are dark artwork on transparency and would
       otherwise disappear into the blue. */
    background: #fff;
    border-radius: 6px;
    transition: box-shadow 0.15s ease;
}

footer.tf-footer .tf-footer-badges img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

footer.tf-footer .tf-footer-badges a:hover,
footer.tf-footer .tf-footer-badges a:focus-visible,
footer.tf-footer .tf-footer-badges button:hover,
footer.tf-footer .tf-footer-badges button:focus-visible {
    box-shadow: 0 0 0 2px var(--tf-yellow);
    outline: none;
}

/* --- social --------------------------------------------------------------- */
footer.tf-footer .tf-footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

footer.tf-footer .tf-footer-social img {
    width: auto;
    height: 28px;
}

/* --- copyright strip ------------------------------------------------------ */
footer.tf-footer .tf-footer-strip {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

footer.tf-footer .tf-footer-strip p {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 991.98px) {
    /* Left aligned, not centred. Centring the brand block gave the paragraph a
       ragged edge on both sides and left the logo floating in the middle with
       nothing to line up against. Against a left edge the logo, heading, body
       copy, badges and social row all share one margin, and the two link columns
       below start from that same line. */
    footer.tf-footer .tf-footer-main {
        text-align: left;
    }

    footer.tf-footer .tf-footer-logo,
    footer.tf-footer .tf-footer-about {
        margin-left: 0;
        margin-right: 0;
    }

    footer.tf-footer .tf-footer-about {
        /* The 38ch cap exists to stop a very long line on desktop; on a phone the
           column is already narrower than that, and the cap only shortens the
           last line. */
        max-width: none;
    }

    footer.tf-footer .tf-footer-badges,
    footer.tf-footer .tf-footer-social {
        justify-content: flex-start;
    }

    /* Bootstrap's .container only clears 15px each side, which on a phone leaves
       the copy almost touching the screen edge. Padding the container rather
       than the columns keeps the copyright strip below in line with everything
       above it. */
    footer.tf-footer .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 575.98px) {
    /* The two link columns stay side by side rather than stacking, so the footer
       ends in one compact 2-up block instead of a single long ladder of links.
       Bootstrap's col-6 already gives them 50% each; these rules buy back the
       space that makes 50% workable at 360px. */
    /* Bootstrap's default 15px column padding is kept rather than trimmed: the
       two columns need a visible channel between them, otherwise "Special
       Offers" and "Terms & Conditions" read as one ragged block. The room for
       50/50 columns is bought from the font size below instead. */
    footer.tf-footer #page-footer-second-column {
        padding-right: 12px;
    }

    footer.tf-footer #page-footer-third-column {
        padding-left: 12px;
    }

    footer.tf-footer #page-footer-second-column li,
    footer.tf-footer #page-footer-third-column li {
        font-size: 0.82rem;
        margin-bottom: 12px;
        /* "Terms & Conditions" cannot fit one line in ~160px, so it wraps. The
           extra leading keeps a wrapped item from reading as two entries. */
        line-height: 1.35;
    }

    footer.tf-footer .tf-footer-title {
        font-size: 0.92rem;
        margin-bottom: 10px;
    }
}

/* ---- signed-in customer, in the top bar -----------------------------------
   Ported from hrtz's nav. Its bar is black with white type, so the greeting there is separated by a
   yellow rule against a dark ground; Thrifty's bar is white with ink type, so the same three parts
   are restated in ink and the brand blue.

   The greeting is a name, not a control: it takes a divider and weight rather than a pill, so it
   cannot be mistaken for the button beside it. */
/* The signed-in identity: an initials avatar and a first name, held in a soft pill.

   The first pass copied hrtz's treatment literally -- a name followed by a hard 3px rule. On a
   black bar that rule is a divider against the dark; on Thrifty's white bar it reads as a stray
   mark, and a bare name beside a solid button looks like unstyled text somebody forgot.

   A chip is the modern form of this and it earns its place: the avatar is a shape the eye finds
   before it reads anything, and it is the SAME object the portal's account bar uses, so the
   signed-in state looks continuous either side of the sign-in. */
/* Tinted white, not the old tinted-blue: on a solid blue bar a blue-tinted chip
   all but disappeared into it. */
nav.tf-nav .top-right .tf-nav-user {
    display: inline-flex;
    align-items: center;
    gap: var(--tf-space-2);
    margin-right: var(--tf-space-2);
    padding: 4px 12px 4px 4px;
    border-radius: var(--tf-radius-pill);
    background: rgba(255, 255, 255, 0.12);
    white-space: nowrap;
}

nav.tf-nav .top-right .tf-nav-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tf-white);
    color: var(--tf-blue-deep);
    font-family: var(--tf-font-subtext);
    font-size: 11px;
    letter-spacing: 0.02em;
}

nav.tf-nav .top-right .tf-nav-greet {
    color: var(--tf-white);
    font-family: var(--tf-font-subtext);
    font-size: 0.875rem;
}

/* "Sign in" beside "Create account": two solid pills side by side give equal weight to two actions
   that are not equal, so this one is an outline. The !important is unavoidable -- the rule it has
   to beat sets background and colour with !important of its own. */
/* White outline, not the old ink-on-subtle-line: the bar is solid blue now, so
   "Sign in" is stated the way hrtz states it on its own solid bar. */
nav.tf-nav .top-right.links a.tf-nav-quiet {
    background-color: transparent !important;
    color: var(--tf-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.6);
    font-weight: 400;
    padding: 8px 21px;
}

nav.tf-nav .top-right.links a.tf-nav-quiet:hover,
nav.tf-nav .top-right.links a.tf-nav-quiet:focus {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--tf-white) !important;
    border-color: var(--tf-white);
}

/* The staff door. Quiet text to the left of the customer controls, and deliberately says only where
   the door is -- never who is signed in to the back office, which a shared or kiosk browser should
   not announce. Sits outside .top-right.links, so no !important is needed. */
nav.tf-nav a.tf-nav-staff {
    margin-right: var(--tf-space-3);
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--tf-font-subtext);
    font-size: 0.875rem;
    white-space: nowrap;
    text-decoration: none;
}

nav.tf-nav a.tf-nav-staff:hover,
nav.tf-nav a.tf-nav-staff:focus {
    color: var(--tf-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 767.98px) {
    /* Quieter and smaller than the customer actions above it. This is a back-office door on a
       customer-facing menu: it has to be findable by the handful of staff who need it and ignorable
       by everyone else, so it stays plain text at a reduced size rather than becoming a third
       control competing with the two pills. */
    nav.tf-nav a.tf-nav-staff {
        display: block;
        margin-right: 0;
        padding-top: 0;
        font-size: 0.8125rem;
        color: rgba(255, 255, 255, 0.66);
    }

    /* The collapsed panel opens directly under the logo, so "RESERVATIONS" sat against the brand
       mark as though it were part of it. The list gets its own inset from the brand row. */
    nav.tf-nav .navbar-collapse {
        padding-top: var(--tf-space-3);
    }

    /* Ordering, not markup: "Staff dashboard" is emitted BEFORE the auth buttons because that is
       where it belongs on the desktop bar -- quiet text to their left. On a phone the same source
       order puts it above them, ahead of the controls most visitors actually want.

       Scoped to .show/.collapsing on purpose. A bare `.navbar-collapse { display: flex }` is
       (0,2,1) and would outrank Bootstrap's `.collapse:not(.show) { display: none }` at (0,2,0) --
       the menu would then be permanently open on every phone. */
    nav.tf-nav .navbar-collapse.show,
    nav.tf-nav .navbar-collapse.collapsing {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    nav.tf-nav .navbar-collapse .navbar-nav {
        order: 1;
    }

    nav.tf-nav .navbar-collapse .top-right.links {
        order: 2;
    }

    /* Last: it is a staff door on a customer-facing menu, so it sits under the customer actions
       rather than above them. Its own breathing room above and below -- the panel ends here, and
       the Color Wave strip starts immediately underneath, so without the lower margin the link
       sits directly on top of it. */
    nav.tf-nav .navbar-collapse a.tf-nav-staff {
        order: 3;
        text-align: center;
        margin: var(--tf-space-3) 0 var(--tf-space-2);
    }

    /* The panel's own floor. The collapse ends flush against the Color Wave rule, so every state --
       links only, links plus buttons, plus the staff link -- needs the same closing space. */
    nav.tf-nav .navbar-collapse.show,
    nav.tf-nav .navbar-collapse.collapsing {
        padding-bottom: var(--tf-space-3);
    }

    /* ONE centred row, in both auth states.

       Signed out that is "Sign in" + "Create account"; signed in it is the identity chip +
       "My bookings". Either way the pair is centred as a unit under the links rather than pushed
       to the right edge the desktop bar uses, and nowrap keeps them on the same line instead of
       letting the longer label drop the second item beneath the first. */
    nav.tf-nav .top-right.links {
        justify-content: center;
        flex-wrap: nowrap;
        gap: var(--tf-space-2);
        width: 100%;
        margin-top: var(--tf-space-3);
        padding-top: var(--tf-space-4);
        padding-bottom: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.28);
    }

    /* Sized to their labels rather than to a shared min-width: on one line at 360px a fixed width
       forces "Create account" to wrap inside its own pill. Padding is symmetric, so the pair still
       reads as a matched set. */
    nav.tf-nav .top-right.links a {
        flex: 0 0 auto;
        padding: 10px var(--tf-space-3);
        text-align: center;
        white-space: nowrap;
    }

    /* The identity chip keeps its pill and sits inline beside the action. min-width: 0 with a
       truncating name is what lets it share the line: a long first name would otherwise push
       "My bookings" off the row rather than shortening itself. */
    nav.tf-nav .top-right .tf-nav-user {
        flex: 0 1 auto;
        min-width: 0;
        margin-right: 0;
    }

    nav.tf-nav .top-right .tf-nav-greet {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------- referral confirmation

   Two presentations of one message, because a referral has to be confirmed on pages built two
   different ways: .hz-referral-chip sits inside the homepage booking widget (Vue, DiscountCode.vue)
   and .hz-referral-notice is the server-rendered block the funnel pages include
   (frontend/layout/referral_notice.blade.php). Here rather than in home.css or funnel.css because
   core.css is the only sheet loaded by both.

   The referral code is stripped from the URL on arrival and its cookie is httpOnly, so this notice
   is the ONLY signal a renter gets that a shared link worked. It is styled to be noticed once and
   then ignored — not a banner competing with the price. */

/* Thrifty blue rather than hrtz's confirmation green. Green reads as "transaction succeeded", which
   this is not -- nothing has been bought yet. It is a standing condition on the booking, so it takes
   the brand accent (PMS 300c) and sits as a quiet tinted panel rather than an alert.

   A hairline border on all four sides instead of a left-only bar: a single heavy rule against a flat
   tint made it read as an error strip pinned to the page edge. */
.hz-referral-chip,
.hz-referral-notice {
    display: flex;
    align-items: center;
    gap: var(--tf-space-2);
    background: #f0f7fc;
    border: 1px solid #cfe6f5;
    border-radius: 8px;
    color: var(--tf-ink);
    font-family: var(--tf-font-body);
    font-size: 0.875rem;
    line-height: 1.4;
    /* Wide content must never push the page sideways; the funnel canvas is already tight on mobile. */
    max-width: 100%;
}

.hz-referral-chip {
    margin: var(--tf-space-2) 0 0;
    padding: var(--tf-space-2);
}

/* Top margin matters: this sits directly beneath the step progress bar, and with no gap it read as
   part of the bar rather than as a message about the booking. */
.hz-referral-notice {
    margin: var(--tf-space-3) 0 var(--tf-space-3);
    padding: 0.625rem var(--tf-space-3);
}

/* The tick as a filled disc rather than a bare glyph: at 0.875rem a loose check floated off the
   text baseline and read as a stray character. A disc gives it a fixed box to sit in. */
.hz-referral-chip-tick,
.hz-referral-notice-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tf-blue);
    color: var(--tf-white);
    font-family: var(--tf-font-subtext);
    font-size: 0.6875rem;
    line-height: 1;
    flex: 0 0 auto;
}

.hz-referral-notice-text {
    min-width: 0;
}

.hz-referral-chip strong,
.hz-referral-notice strong {
    font-family: var(--tf-font-subtext);
    /* A generated code is 8 characters of A-Z2-9 and has no break opportunities, so it can overflow
       a narrow phone unless told it may wrap anywhere. */
    overflow-wrap: anywhere;
}

/* The way out of an attribution. Deliberately quiet — a plain underlined control pushed to the far
   end, not a second button competing with View Vehicles. It has to be FINDABLE by somebody on a
   shared machine who does not recognise the code, and ignorable by the friend it was meant for. */
.hz-referral-chip-clear,
.hz-referral-notice-clear {
    margin: 0 0 0 auto;
    flex: 0 0 auto;
}

.hz-referral-chip-clear button,
.hz-referral-notice-clear button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--tf-ink-soft);
    font-family: var(--tf-font-body);
    font-size: 0.75rem;
    line-height: 1.4;
    /* Offset so the rule clears the descenders instead of striking through them. */
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(0, 122, 195, 0.35);
    cursor: pointer;
    /* Small target, so give it the tap area the rest of the funnel's controls have. */
    min-height: 24px;
    white-space: nowrap;
    transition:
        color 0.15s ease,
        text-decoration-color 0.15s ease;
}

.hz-referral-chip-clear button:hover,
.hz-referral-notice-clear button:hover,
.hz-referral-chip-clear button:focus-visible,
.hz-referral-notice-clear button:focus-visible {
    color: var(--tf-blue);
    text-decoration-color: var(--tf-blue);
}

/* Below the text on a phone rather than squeezed beside it: `margin-left: auto` on a narrow screen
   left the control one word wide and pushed the message into a column. */
@media (max-width: 575.98px) {
    .hz-referral-chip,
    .hz-referral-notice {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .hz-referral-chip-clear,
    .hz-referral-notice-clear {
        margin: var(--tf-space-1) 0 0 26px;
    }
}

/* ---------------------------------------------------------------- rich text (admin HTML)
   Containment for WYSIWYG content pasted into the admin and printed with {!! !!} — terms &
   conditions today. We do not control this markup: the editor emits bare <table> with no
   width, absolute pixel widths on images, and long unbroken strings, any of which push the
   document wider than a phone viewport and start the whole page scrolling sideways.

   Everything below is a clamp, not a skin. The intent is that no element inside the blob can
   ever be the reason <html> gets a horizontal scrollbar. */
.hz-richtext {
    /* min-width:0 lets this shrink inside the Bootstrap flex column instead of being floored at
       the widest child's min-content — without it the clamps below are overruled by the grid. */
    min-width: 0;
}

/* Tables become their own scroll region. `display: block` is what gives the element an
   overflow box at all; max-content keeps a narrow table shrink-wrapped rather than stretched,
   and max-width caps it at the column so only the genuinely-wide ones (the 7-column excess
   table) hand the customer a sideways scroll, and only within the table. */
.hz-richtext table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    /* momentum scrolling on iOS, and a hint that this box is swipeable */
    -webkit-overflow-scrolling: touch;
}

.hz-richtext :is(td, th) {
    /* editor content includes long URLs and hyphen-free branch names with no break opportunity */
    overflow-wrap: break-word;
}

/* Images and embeds are routinely pasted at desktop pixel dimensions. */
.hz-richtext :is(img, iframe, video, embed, object) {
    max-width: 100%;
    height: auto;
}

/* Preformatted blocks never wrap on their own. */
.hz-richtext pre {
    overflow-x: auto;
    max-width: 100%;
}

/* The footer's Reservations block -- address and number.

   Matches hrtz-site's .hz-footer-contact: a heading and two plain links at the
   same size as the column's link list, not a headline. The earlier version made
   the number 1.05rem and bold, which out-sized every link in the footer and read
   as a second heading.

   The anchors are bare siblings (as in hrtz's markup), so they are made block to
   guarantee one per line -- inline they would sit side by side in a wide column
   and wrap raggedly in a narrow one. */
footer.tf-footer .tf-footer-contact {
    margin-top: 26px;
}

footer.tf-footer .tf-footer-contact a {
    display: block;
    margin-bottom: 10px;
    font-size: 0.9rem;
    /* The address is the one string here that cannot wrap at a space. */
    word-break: break-word;
}

footer.tf-footer .tf-footer-contact a:last-child {
    margin-bottom: 0;
    /* Numerals are where a proportional font hurts: tabular figures keep the
       groups evenly spaced. */
    font-variant-numeric: tabular-nums;
}