/**
 * FleetForm Grid Styles
 * 
 * Styles for the native FleetForm fleet grid display.
 * Mimics the Elementor loop container design with responsive grid layout.
 * 
 * @package FleetForm
 * @since 1.6.4
 */

/* ============================================================================
   Grid Container
   ========================================================================= */

.fleetform-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 20px 0;
    list-style: none;
    margin: 0;
}

/* Tablet - 2 columns */
@media (min-width: 768px) {
    .fleetform-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

/* Desktop - 3 columns */
@media (min-width: 1024px) {
    .fleetform-grid-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* No vehicles message */
.fleetform-no-vehicles {
    text-align: center;
    padding: 40px 20px;
    font-size: 18px;
    color: var(--fleet-accent-color, #666);
}

/* ============================================================================
   Vehicle Card
   ========================================================================= */

.fleetform-vehicle-card {
    display: flex;
    flex-direction: column;
    background: var(--fleet-background-panel, #1e1e1e);
    border: 2px solid var(--fleet-primary-color, #D5A040);
    border-radius: 9px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fleetform-vehicle-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(213, 160, 64, 0.3);
}

.fleetform-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.fleetform-card-content {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 15px;
    flex: 1;
}

/* ============================================================================
   Vehicle Title
   ========================================================================= */

.fleetform-vehicle-title {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--fleet-primary-color, #D5A040) !important;
    text-align: center;
    transition: color 0.3s ease;
}

.fleetform-vehicle-title:hover {
    color: var(--fleet-accent-color, #D5A040);
}

@media (max-width: 1024px) {
    .fleetform-vehicle-title {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    .fleetform-vehicle-title {
        font-size: 22px;
    }
}

/* ============================================================================
   Vehicle Image
   ========================================================================= */

.fleetform-vehicle-image {
    width: 100%;
    aspect-ratio: 3/2;
    overflow: hidden;
    border-radius: 6px;
}

.fleetform-vehicle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.fleetform-vehicle-card:hover .fleetform-vehicle-image img {
    transform: scale(1.05);
}

/* ============================================================================
   Starting Price (Injected by Booking Addons)
   ========================================================================= */

.fleetform-starting-price {
    text-align: right;
    padding: 8px 0;
    margin-top: -5px;
}

.fleetform-starting-price .starting-label {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--fleet-text-light, #e0e0e0);
    display: block;
    margin-bottom: 2px;
}

.fleetform-starting-price .starting-amount {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--fleet-primary-color, #D5A040);
    display: block;
}

/* ============================================================================
   Rental Rates Display (Card)
   ========================================================================= */

.fleetform-vehicle-rates {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
}

.fleetform-rate-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: var(--fleet-text-light, #e0e0e0);
}

.fleetform-rate-label {
    font-weight: 600;
}

.fleetform-rate-value {
    font-weight: 700;
    color: var(--fleet-primary-color, #D5A040);
    font-size: 16px;
}

/* ============================================================================
   Quick Info (Capacity, Transmission)
   ========================================================================= */

.fleetform-vehicle-quick-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px 0;
}

.fleetform-info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--fleet-text-light, #e0e0e0);
}

.fleetform-info-item i {
    color: var(--fleet-primary-color, #D5A040);
    font-size: 16px;
}

/* ============================================================================
   Card Actions (Multiple Buttons)
   ========================================================================= */

.fleetform-card-actions {
    margin-top: auto;
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fleetform-btn-reserve {
    background: linear-gradient(313deg, #46b450 0%, #2d7a35 100%);
    box-shadow: 0px 0px 15px 0px rgba(70, 180, 80, 0.5);
}

.fleetform-btn-reserve:hover,
.fleetform-btn-reserve:focus {
    background: #46b450;
    box-shadow: 0px 4px 20px 0px rgba(70, 180, 80, 0.7);
}

/* ============================================================================
   Modal - Rental Rates Section
   ========================================================================= */

.fleetform-modal-rates {
    padding: 20px 0;
    border-bottom: 1px solid rgba(213, 160, 64, 0.3);
}

.fleetform-modal-rates h2 {
    margin: 0 0 15px;
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: var(--fleet-accent-color, #D5A040);
}

.fleetform-rates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
}

.fleetform-rate-box {
    background: rgba(213, 160, 64, 0.1);
    border: 1px solid rgba(213, 160, 64, 0.3);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
}

.fleetform-rate-period {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--fleet-accent-color, #D5A040);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.fleetform-rate-amount {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--fleet-primary-color, #D5A040);
    margin-bottom: 4px;
}

.fleetform-rate-note {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #999;
}

/* ============================================================================
   Modal - Vehicle Specifications
   ========================================================================= */

.fleetform-modal-specs {
    padding: 20px 0;
    border-bottom: 1px solid rgba(213, 160, 64, 0.3);
}

.fleetform-modal-specs h2 {
    margin: 0 0 15px;
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: var(--fleet-accent-color, #D5A040);
}

.fleetform-specs-grid {
    display: grid;
    gap: 12px;
}

.fleetform-spec-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #ccc;
}

.fleetform-spec-item i {
    color: var(--fleet-accent-color, #D5A040);
    font-size: 18px;
    width: 24px;
}

.fleetform-spec-label {
    font-weight: 600;
}

.fleetform-spec-value {
    margin-left: auto;
    font-weight: 400;
}

/* ============================================================================
   Modal - Primary Reserve Button
   ========================================================================= */

.fleetform-btn-primary {
    background: linear-gradient(313deg, #46b450 0%, #2d7a35 100%);
    box-shadow: 0px 0px 15px 0px rgba(70, 180, 80, 0.5);
    font-size: 20px;
    padding: 18px 30px;
}

.fleetform-btn-primary:hover,
.fleetform-btn-primary:focus {
    background: #46b450;
    box-shadow: 0px 4px 20px 0px rgba(70, 180, 80, 0.7);
}

@media (max-width: 767px) {
    .fleetform-modal-rates h2,
    .fleetform-modal-specs h2 {
        font-size: 22px;
    }
    
    .fleetform-rates-grid {
        grid-template-columns: 1fr;
    }
    
    .fleetform-rate-amount {
        font-size: 20px;
    }
}

/* ============================================================================
   Features List (Condensed on Card)
   ========================================================================= */

.fleetform-vehicle-features {
    max-height: 120px;
    overflow: hidden;
}

.fleetform-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.fleetform-feature-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--fleet-text-light, #e0e0e0);
    padding: 4px 0;
}

.fleetform-feature-list li i {
    color: var(--fleet-primary-color, #D5A040);
    font-size: 16px;
    flex-shrink: 0;
}

/* ============================================================================
   Card Actions
   ========================================================================= */

.fleetform-card-actions {
    margin-top: auto;
    padding-top: 10px;
}

.fleetform-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    color: var(--fleet-secondary-color, #fff);
    background: linear-gradient(313deg, #D5A040 0%, #A25D00 100%);
    border: none;
    border-radius: 50px;
    box-shadow: 0px 0px 15px 0px rgba(224, 162, 65, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.fleetform-btn:hover,
.fleetform-btn:focus {
    background: var(--fleet-primary-color, #D5A040);
    transform: translateY(-2px);
    box-shadow: 0px 4px 20px 0px rgba(224, 162, 65, 0.7);
}

/* ============================================================================
   Modal Styles
   ========================================================================= */

.fleetform-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fleetform-modal.active {
    display: flex;
    opacity: 1;
}

.fleetform-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

.fleetform-modal-content {
    position: relative;
    max-width: 640px;
    width: 90%;
    max-height: 90vh;
    background: var(--fleet-background-panel, #1e1e1e);
    border: 2px solid var(--fleet-accent-color, #D5A040);
    border-radius: 8px;
    box-shadow: 0px 0px 20px 0px rgba(213, 160, 64, 0.3);
    overflow-y: auto;
    z-index: 1;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Lock body scroll when modal is open */
body.fleetform-modal-open {
    overflow: hidden;
}

/* ============================================================================
   Modal Close Button
   ========================================================================= */

.fleetform-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #8E0303;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.fleetform-modal-close:hover {
    opacity: 0.8;
}

/* ============================================================================
   Modal Header
   ========================================================================= */

.fleetform-modal-header {
    padding: 30px 30px 20px;
}

.fleetform-modal-title {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3em;
    color: var(--fleet-accent-color, #D5A040);
}

@media (max-width: 767px) {
    .fleetform-modal-title {
        font-size: 25px;
    }
    
    .fleetform-modal-header {
        padding: 20px 20px 15px;
    }
}

/* ============================================================================
   Modal Body
   ========================================================================= */

.fleetform-modal-body {
    padding: 0 30px 30px;
}

@media (max-width: 767px) {
    .fleetform-modal-body {
        padding: 0 20px 20px;
    }
}

/* Modal Image */
.fleetform-modal-image {
    margin-bottom: 20px;
}

.fleetform-modal-image img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Modal Features Section */
.fleetform-modal-features {
    padding: 20px 0;
    border-bottom: 1px solid rgba(213, 160, 64, 0.3);
}

.fleetform-modal-features h2 {
    margin: 0 0 15px;
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: var(--fleet-accent-color, #D5A040);
}

@media (max-width: 767px) {
    .fleetform-modal-features h2 {
        font-size: 22px;
    }
}

.fleetform-modal-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.fleetform-modal-feature-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #ccc;
}

.fleetform-modal-feature-list li i {
    color: var(--fleet-primary-color, #D5A040);
    font-size: 16px;
}

/* Modal Description */
.fleetform-modal-description {
    padding: 20px 0;
}

.fleetform-modal-description h2 {
    margin: 0 0 15px;
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: var(--fleet-accent-color, #D5A040);
}

@media (max-width: 767px) {
    .fleetform-modal-description h2 {
        font-size: 22px;
    }
}

.fleetform-description-content {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7em;
    color: #ccc;
}

.fleetform-description-content p {
    margin: 0 0 15px;
}

/* Modal Actions */
.fleetform-modal-actions {
    padding: 20px 0 0;
    text-align: center;
}

.fleetform-modal-actions .fleetform-btn {
    display: inline-flex;
    width: auto;
    min-width: 250px;
}

/* ============================================================================
   FleetForm section wrapper — the built-in block you build a page around.

   The fleet display used to be dropped straight into the page content div: full
   viewport bleed, `margin: 0`, `padding: 0`, `max-width: none`, with the page
   title sitting on top of it. Measured on parlayrentals.com before this rule —
   the widget spanned the whole 1500px viewport with no gutter at all.

   Deliberately modest. This is a container an operator wraps their own content
   in from the FleetForm editor, so it owns spacing and width and nothing else —
   no colours, no borders, no type scale. The tenant's theme still decides how
   the page LOOKS; this only stops the content touching the window edges.
   ========================================================================= */
.fleetform-section {
    max-width: var(--fleet-content-width, 1280px);
    margin: 0 auto;
    padding: 32px 20px 48px;
    box-sizing: border-box;
}

.fleetform-section__head {
    margin: 0 0 28px;
}

/* The page's own H1 lives here. Left as inherit so a tenant theme keeps its
   type; only the crowding is fixed. */
.fleetform-section__title {
    margin: 0 0 8px;
    line-height: 1.15;
}

.fleetform-section__lede {
    margin: 0;
    opacity: 0.8;
}

.fleetform-section__body {
    margin: 0;
}

@media (max-width: 600px) {
    .fleetform-section {
        padding: 20px 14px 32px;
    }
    .fleetform-section__head {
        margin-bottom: 20px;
    }
}

/* ============================================================================
   Card action buttons — legible on whatever fill wins (#224)

   `.fleetform-btn-reserve` / `-primary` declare a green gradient, yet these
   render GOLD on parlayrentals.com — a tenant rule is already overriding the
   fill, and the LABEL washes out against it. Which fill wins is the tenant's
   business; the label staying readable is not.

   So this pins only what decides legibility, re-selected through the card so it
   outranks a single theme class, and deliberately does NOT set `background` —
   overriding that would undo the tenant's own branding to fix a text problem.
   ========================================================================= */
.fleetform-vehicle-card .fleetform-btn,
.fleetform-vehicle-card .fleetform-btn:hover,
.fleetform-vehicle-card .fleetform-btn:focus,
.fleetform-vehicle-card .fleetform-btn-reserve,
.fleetform-vehicle-card .fleetform-btn-reserve:hover,
.fleetform-vehicle-card .fleetform-btn-primary,
.fleetform-vehicle-card .fleetform-btn-primary:hover {
    color: var(--fleet-button-text-color, #121212) !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* Long labels wrap instead of clipping, same reason as the multistep cards. */
.fleetform-vehicle-card .fleetform-btn {
    white-space: normal;
    max-width: 100%;
}


/* ============================================================================
   Elementor defence for the modal controls (fleet-booking-addon#224 family)

   Every rule in this file is a BARE single-class selector, so it loses every
   specificity tie to Elementor's own `.elementor-widget-container button` style
   by construction. Two controls were visibly losing:

     .fleetform-modal-close   declared #8E0303 (dark red) -> rendered PINK
     .fleetform-btn-reserve   declared a green gradient   -> rendered gold with a
                              pale gold label, i.e. illegible on its own fill

   Scoping each through `.fleetform-modal` adds the class the theme cannot match
   and wins the tie honestly, rather than reaching for !important on a bare rule.

   The reserve button is deliberately kept GOLD rather than restored to green:
   gold is the tenant primary and what the site already shows. The defect was the
   LABEL, not the fill -- "button label should be black on the gold fill" (#224).
   ========================================================================== */

.fleetform-modal .fleetform-modal-close,
.fleetform-modal button.fleetform-modal-close {
    background: #8E0303;
    color: #fff;
    border: none;
    border-radius: 8px;
    /* Elementor gives buttons their own padding/min-width, which stretches a
       40x40 icon button into a rectangle. */
    padding: 0;
    min-width: 0;
    width: 40px;
    height: 40px;
    box-shadow: none;
}

.fleetform-modal .fleetform-modal-close:hover,
.fleetform-modal button.fleetform-modal-close:hover {
    background: #8E0303;
    opacity: 0.8;
}

/* The TENANT's button tokens, not a hardcoded palette.

   These are the same variables every other FleetForm button resolves through
   (`--button-gradient-start/end`, `--button-text-color`, declared in core's
   fleet-form.css and fed from tenant settings), so a fleet that themes its
   buttons themes this one too. Hardcoding gold here would have looked correct on
   parlayrentals.com and silently wrong on every other tenant — Ethan: "the css
   for the reserve button should be internally the gradient with black text (or
   whatever the users internal colors are for button gradient and button gradient
   text)".

   `--button-text-color` already defaults to #000000, which is precisely the
   "black on the gold fill" contrast fix #224 asked for. */
.fleetform-modal .fleetform-btn-reserve,
.fleetform-modal a.fleetform-btn-reserve,
.fleetform-modal .fleetform-btn-primary,
.fleetform-modal a.fleetform-btn-primary {
    background: linear-gradient(135deg,
        var(--button-gradient-start, #e0a241),
        var(--button-gradient-end, #ffcc73));
    color: var(--button-text-color, #000);
    border-color: var(--button-border-color, #e0a241);
    font-weight: 700;
    text-shadow: none;
}

.fleetform-modal .fleetform-btn-reserve:hover,
.fleetform-modal a.fleetform-btn-reserve:hover,
.fleetform-modal .fleetform-btn-reserve:focus,
.fleetform-modal a.fleetform-btn-reserve:focus {
    background: var(--button-hover-color, #f2c97d);
    color: var(--button-text-color, #000);
}


/* ============================================================================
   Card buttons — the other half of #224, which the modal fix missed

   I scoped the MODAL's controls through `.fleetform-modal` and stopped there.
   The CARD buttons ("View Details" / "Reserve Now") are outside the modal, so
   they kept their bare single-class rules and lost the same specificity ties —
   the fix covered one slice of the report and not the other.

   The washed-out label has a concrete cause: the shared `.fleetform-btn` base
   sets `color: var(--fleet-secondary-color, #fff)`, i.e. WHITE on a gold
   gradient. That is the low contrast Ethan reported, not an Elementor override.

   Scoped through `.fleetform-grid-container` and driven by the SAME tenant button
   tokens the modal now uses, so the two surfaces cannot drift apart and a fleet
   that themes its buttons themes both.
   ========================================================================== */

.fleetform-grid-container .fleetform-btn,
.fleetform-grid-container a.fleetform-btn,
.fleetform-grid-container .fleetform-btn-reserve,
.fleetform-grid-container a.fleetform-btn-reserve,
.fleetform-grid-container .fleetform-btn-primary,
.fleetform-grid-container a.fleetform-btn-primary {
    background: linear-gradient(135deg,
        var(--button-gradient-start, #e0a241),
        var(--button-gradient-end, #ffcc73));
    color: var(--button-text-color, #000);
    border-color: var(--button-border-color, #e0a241);
    text-shadow: none;
}

.fleetform-grid-container .fleetform-btn:hover,
.fleetform-grid-container a.fleetform-btn:hover,
.fleetform-grid-container .fleetform-btn:focus,
.fleetform-grid-container a.fleetform-btn:focus {
    background: var(--button-hover-color, #f2c97d);
    color: var(--button-text-color, #000);
}

/* "View Details" — the SECONDARY action, and it must be READABLE.
   Ethan: "can we clean up the details button, they should look different but this
   button text is illegible."

   My first pass made it outlined but left the label dark on a dark fill. Two
   things caused that:

   1. it inherits `color: var(--fleet-secondary-color, #fff)` from `.fleetform-btn`
      and something outside this file was winning the override, so the token I set
      never took effect;
   2. `.fleetform-btn` also sets `box-shadow: 0 0 15px rgba(224,162,65,.5)` — the
      glow. I removed the fill but not the glow, so it read as a lit button with
      unreadable text: the worst of both.

   The three properties that decide LEGIBILITY are pinned with !important. That is
   the pattern this file already documents for our UI rendering inside a tenant's
   Elementor page — a bare declaration loses ties by construction, and a
   secondary button whose label cannot be read is worse than one that looks plain.
   Specificity is raised via the doubled class so it also outranks any
   `a.`/`button.` element-qualified rule.

   Deliberately NOT tokenised to `--button-text-color`: that token means "text on
   the button GRADIENT" and is black by design. This label sits on the panel, so it
   takes the primary colour instead. Reusing the gradient token here is exactly how
   it became illegible. */
.fleetform-grid-container .fleetform-btn.fleetform-btn-details,
.fleetform-grid-container button.fleetform-btn-details,
.fleetform-grid-container a.fleetform-btn-details {
    background: transparent !important;
    background-image: none !important;
    color: var(--fleet-primary-color, #e0a241) !important;
    border: 1px solid var(--button-border-color, #e0a241) !important;
    /* No glow — that is what marks Reserve as the primary action. */
    box-shadow: none !important;
    text-shadow: none;
}

.fleetform-grid-container .fleetform-btn.fleetform-btn-details:hover,
.fleetform-grid-container button.fleetform-btn-details:hover,
.fleetform-grid-container a.fleetform-btn-details:hover,
.fleetform-grid-container .fleetform-btn.fleetform-btn-details:focus,
.fleetform-grid-container button.fleetform-btn-details:focus,
.fleetform-grid-container a.fleetform-btn-details:focus {
    /* Fills faintly on hover so it still feels interactive without competing. */
    background: rgba(224, 162, 65, 0.14) !important;
    color: var(--fleet-primary-color, #e0a241) !important;
    box-shadow: none !important;
}


/* ============================================================================
   The card title as a details trigger

   Only the browser's default <button> chrome needs resetting — the title
   deliberately does NOT carry the details-button class, so none of that button
   treatment applies and nothing here needs !important.

   Reset explicitly rather than with `all: unset`, which would also drop inherited
   typography and text direction.
   ========================================================================== */

.fleetform-vehicle-title > .fleetform-vehicle-title-btn {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    display: inline;
    font: inherit;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: normal;   /* long titles wrap, like the heading it replaces */
}

/* Discoverable as clickable without shouting — underline on interaction only. */
.fleetform-vehicle-title > .fleetform-vehicle-title-btn:hover,
.fleetform-vehicle-title > .fleetform-vehicle-title-btn:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Keyboard users get a focus ring; pointer users do not (:focus-visible). */
.fleetform-vehicle-title > .fleetform-vehicle-title-btn:focus-visible {
    outline: 2px solid var(--fleet-primary-color, #e0a241);
    outline-offset: 3px;
}