/**
 * Public-facing styles for Offroad Registry.
 * Designed to respect the active WordPress theme (Flatsome) colors and styles.
 */

/* WRAPPER & CARDS */
.orr-wrapper {
    --orr-wrapper-border: var(--global-palette6, var(--global-palette-border, #e0e0e0));
    border: 1px solid var(--orr-wrapper-border);
    border-radius: 0;
    padding: 20px;
    box-sizing: border-box;
    max-width: 100%;
    margin-bottom: 24px;
}

/* On small screens the theme's own gutters are trimmed too (see the child
   theme's MOBILE CONTENT GUTTERS block). Keep the wrapper's inner padding in
   step so the listing/card content, not the padding, uses the screen width. */
@media (max-width: 768px) {
    .orr-wrapper {
        padding: 12px;
    }
}

@media (max-width: 520px) {
    .orr-wrapper {
        padding: 8px;
    }
}

.orr-wrapper h3 {
    margin-top: 0;
}

/* OVERRIDE Flatsome large margins on form elements */
.orr-wrapper .button,
.orr-wrapper button,
.orr-wrapper fieldset,
.orr-wrapper input,
.orr-wrapper select,
.orr-wrapper textarea,
.orr-modal-box .button,
.orr-modal-box button,
.orr-modal-box fieldset,
.orr-modal-box input,
.orr-modal-box select,
.orr-modal-box textarea {
    margin-bottom: .1em;
}

.orr-wrapper .orr-modal-close {
    margin-bottom: 0;
}

/* UTILITY CLASSES */
.orr-placeholder {
    background: var(--global-palette6, #e0e0e0);
    color: var(--global-palette4, #333);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

/* =============================================================================
   VEHICLE SPECS – TWO-ROW LAYOUT
   ============================================================================= */

.orr-vehicle-specs {
    padding: 0;
    /* NOT `overflow: hidden`: the completeness popover opens out of the title
       block and would be clipped. The photo column clips its own slider. */
    overflow: visible;
}

/* Row 1: two-column grid */
.orr-vehicle-row1 {
    display: grid;
    /* The photo keeps its square — a square crops a portrait no worse than a
       landscape, which is why it was chosen — but it stops growing at 420px.
       At 7fr on a wide card the square was ~630px tall, pushing the specs, the
       Like control and every section below it ~250px further down; 45% keeps it
       in proportion on narrower cards, where the info column is the taller one
       anyway. The info column takes the rest of the width. */
    grid-template-columns: 7fr 5fr; /* fallback where min() is unsupported */
    grid-template-columns: minmax(0, min(45%, 420px)) minmax(0, 1fr);
    gap: 24px;
    padding: 20px;
}

/* Left column — the image cell: the square photo with the Like/Share bar under
   it. The cell (not the photo) is the grid item, and it starts at the top so the
   square cannot be stretched into a tall crop when the info column is taller. */
.orr-vehicle-media-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    align-self: start;
}

/* Photo slider (square) */
.orr-vehicle-photo-column {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0;
}

/* Under the photo: the Like control on the left, the share icons on the right —
   the two things a visitor does with the listing itself, as opposed to the
   owner's actions in the action block. */
.orr-vehicle-media-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    flex-wrap: wrap;
}

.orr-vehicle-media-bar .orr-vote-section {
    /* A flex row so the control's height is exactly the button's, and no bottom
       margin: the bar's own gap spaces it from what follows. */
    display: flex;
    margin: 0;
}

/* The plugin's generic `.orr-wrapper button` reset leaves a .1em (1.4px) bottom
   margin on every control. */
.orr-vehicle-media-bar .orr-vote-btn {
    margin-bottom: 0;
}

.orr-vehicle-media-bar .orr-favorite-section {
    /* Same as the Like section: a flex row, so the control's height is exactly the
       button's, and no bottom margin — the bar's own gap spaces it. `auto` on the
       right margin keeps Save beside the Like at the left of the bar instead of
       letting space-between spread the two actions apart, with Share still on the
       right. */
    display: flex;
    margin: 0 auto 0 0;
}

.orr-vehicle-media-bar .orr-fav-btn {
    margin-bottom: 0;
}

/* Share, compact: a muted label with the member's networks beside it. */
.orr-vehicle-media-bar .orr-vehicle-share {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--global-palette5, #6b7280);
    font-size: 0.9em;
}

.orr-vehicle-media-bar .orr-vehicle-share-row {
    margin: 0;
}

.orr-vehicle-banner-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.orr-vehicle-banner-images {
    width: 100%;
    height: 100%;
    position: relative;
}

.orr-vehicle-banner-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.orr-vehicle-banner-slide.active {
    opacity: 1;
    z-index: 1;
}

.orr-vehicle-banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.orr-vehicle-banner-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--global-palette6, #e0e0e0);
    color: var(--global-palette4, #666);
    font-size: 1.1em;
}

/* Slider arrows */
.orr-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    color: #333;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    padding: 0;
    line-height: 1;
    transition: background 0.15s ease;
}

.orr-slider-arrow:hover {
    background: #fff;
}

.orr-slider-prev {
    left: 10px;
}

.orr-slider-next {
    right: 10px;
}

/* Slider dots */
.orr-slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 6px;
}

.orr-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.2s ease;
}

.orr-slider-dot.active {
    background: #fff;
}

/* Right column — Info */
.orr-vehicle-info-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.orr-vehicle-title {
    margin: 0;
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1.25;
}

/* Title block: heading + price/private banners on the left, completeness gauge pinned
   to the top right corner. `nowrap` + a zero flex-basis on the title block keep the
   gauge there at any screen size — the heading shrinks and wraps its own text instead
   of dropping the gauge onto a second line (matches the profile header's gauge). */
.orr-vehicle-titlebar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
}

/* The flex child is the title block (heading + banners), not the heading itself, so
   the zero flex-basis belongs here. */
.orr-vehicle-titlebar .orr-vehicle-titleblock {
    flex: 1 1 0;
    min-width: 0;
}

.orr-vehicle-titlebar .orr-vehicle-title {
    overflow-wrap: break-word;
}

/* Title row — the heading and the public/private switch, with the switch
   sitting right after the heading's text rather than at the row's right edge.
   That needs two things: the row must NOT wrap (a wrapped row would push the
   switch under the title, which is what Flatsome's layout did) and the heading
   must be content-sized (`flex: 0 1 auto`) instead of growing into the free
   space. `min-width: 0` lets a long title shrink and wrap its own text while
   the switch stays beside it.
   The Like control is not a flex item here — it is the row's sibling, on its own
   line under the title (see .orr-vehicle-titleblock > .orr-vote-section).
   `align-items: flex-start` keeps the switch level with the heading's FIRST
   line when the title runs to two or more. */
.orr-vehicle-title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px 12px;
    flex-wrap: nowrap;
}

.orr-vehicle-title-row .orr-vehicle-title {
    flex: 0 1 auto;
    /* Flatsome gives every heading `width: 100%`, and with `flex-basis: auto`
       that percentage becomes the base size — the heading filled the row and the
       switch was pushed to its right edge. `width: auto` makes the heading size
       to its own text, so the switch sits right after it. */
    width: auto;
    max-width: 100%;
    min-width: 0;
}

/* The switch (or the upgrade link that stands in for it) never shrinks: the
   heading gives up width instead. Its vertical offset lives further down, after
   the switch's own `margin: 0`. */
.orr-vehicle-title-row .orr-private-switch,
.orr-vehicle-title-row .orr-private-switch-link {
    flex: 0 0 auto;
}

/* Public ⇄ private switch beside the vehicle's name. The thumb carries the
   state icon (eye = public, lock = private) and slides across a track that
   fills with the theme's button colour only while the vehicle is private. */
.orr-wrapper .orr-private-switch,
.orr-vehicles-wrapper .orr-private-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--orr-ctl-muted, var(--global-palette4, #6b7280));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: var(--orr-ctl-weight, 600);
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
    /* The switch is a control, not prose: no underline on hover/focus, and none
       inherited from a theme that underlines buttons or links. */
    text-decoration: none;
}

.orr-private-switch__track {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: var(--global-palette6, var(--global-palette-border, #e0e0e0));
    transition: background-color 0.18s ease;
}

.orr-private-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    color: #333a40;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-size: 10px;
    line-height: 1;
    transition: transform 0.18s ease, color 0.18s ease;
}

.orr-private-switch[aria-checked="true"] .orr-private-switch__track {
    background: var(--orr-ctl-accent, var(--fs-color-primary, #446084));
}

.orr-private-switch[aria-checked="true"] .orr-private-switch__thumb {
    transform: translateX(20px);
    color: var(--orr-ctl-accent, var(--fs-color-primary, #446084));
}

.orr-private-switch__label {
    white-space: nowrap;
}

.orr-private-switch:hover .orr-private-switch__label,
.orr-private-switch:focus-visible .orr-private-switch__label {
    text-decoration: none;
}

.orr-private-switch:focus-visible {
    outline: 2px solid var(--orr-ctl-accent, var(--fs-color-primary, #446084));
    outline-offset: 3px;
}

/* Vertical alignment with the heading. The switch is 24px tall while the
   heading's line box is ~32px, and the ink of a 25.6px Lato heading sits lower
   than the middle of that box — with no offset the switch reads high. The
   selector carries `.orr-wrapper` on purpose: the base rule above sets
   `margin: 0` at the same specificity, so a plain `.orr-vehicle-title-row …`
   rule would lose on source order (that is why the first attempt at this offset
   never applied). 4px: the geometric centre measured at 7px, but on the page the
   switch read a hair low against the heading's ink, so it sits 3px higher. */
.orr-wrapper .orr-vehicle-title-row .orr-private-switch,
.orr-wrapper .orr-vehicle-title-row .orr-private-switch-link {
    margin-top: 4px;
}

.orr-wrapper .orr-private-switch:disabled,
.orr-vehicles-wrapper .orr-private-switch:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* Shown instead of the switch when the member's plan does not include private
   vehicles: a compact link beside the title, straight to the subscribe page. */
.orr-private-switch-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--orr-ctl-accent, var(--fs-color-primary, #446084));
    font-size: 0.8125rem;
    font-weight: var(--orr-ctl-weight, 600);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.orr-private-switch-link:hover,
.orr-private-switch-link:focus-visible {
    color: var(--orr-ctl-accent, var(--fs-color-primary, #446084));
    text-decoration: none;
}

.orr-vehicle-specs-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
}

/* Description / Custom Modifications — free text under the vehicle's specs.
   Keeps the member's line breaks and reads as prose, not as a spec row. */
.orr-vehicle-description {
    padding-bottom: 12px;
    line-height: 1.55;
}

.orr-vehicle-description p {
    margin: 4px 0 0;
}

/* Vehicle action block — a link-style list that floats to the bottom of the
   info column. Each row is a full-width control with an icon and a label; the
   Like/share bar is the block's final row. The top and bottom lines frame the
   list, and the rows carry their own dividers. */
.orr-vehicle-action-block {
    margin-top: auto;
    border-top: 1px solid var(--global-palette6, var(--global-palette-border, #e0e0e0));
    border-bottom: 1px solid var(--global-palette6, var(--global-palette-border, #e0e0e0));
}

.orr-wrapper .orr-vehicle-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 10px 4px;
    border: 0;
    border-bottom: 1px solid var(--global-palette6, var(--global-palette-border, #e0e0e0));
    border-radius: 0;
    background: transparent;
    color: var(--orr-ctl-accent);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
}

.orr-vehicle-action:last-child {
    border-bottom: 0;
}

.orr-vehicle-action > i:first-child {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
}

.orr-wrapper .orr-vehicle-action:hover,
.orr-wrapper .orr-vehicle-action:focus-visible {
    background: var(--global-palette7, var(--global-palette-background, #f8f9fa));
    color: var(--orr-ctl-accent);
}

/* Underline the label text only — never the leading icon. */
.orr-vehicle-action:hover > span,
.orr-vehicle-action:focus-visible > span {
    text-decoration: underline;
}

.orr-vehicle-action:focus-visible {
    outline: 2px solid var(--orr-ctl-accent);
    outline-offset: -2px;
}

/* The pending-transfer row is a status, not a control. */
.orr-wrapper .orr-vehicle-action--status {
    color: var(--orr-ctl-muted);
    cursor: default;
}

.orr-wrapper .orr-vehicle-action--status:hover {
    background: transparent;
    text-decoration: none;
}

.orr-vehicle-action--status > span {
    min-width: 0;
    word-break: break-word;
}

/* Remove from Marketplace keeps the red of a destructive action. */
.orr-wrapper .orr-vehicle-action--danger {
    color: #d63638;
}

/* The same red inside the modals, where a delete sits beside Save. The extra
   class turns the theme's button into an outline danger — red border and ink,
   red fill on hover/focus — so it cannot read as a second primary action. Both
   modal deletes (trip and vehicle) wear this class. */
.orr-modal-box .button.orr-vehicle-action--danger {
    background: transparent;
    border-color: #d63638;
    color: #d63638;
}

.orr-modal-box .button.orr-vehicle-action--danger:hover,
.orr-modal-box .button.orr-vehicle-action--danger:focus-visible {
    background: #d63638;
    border-color: #d63638;
    color: #fff;
    filter: none;
}

/* "Email Owner" on another member's profile sits in the name row, so it wears
   the same outline treatment as the profile's own Edit button: a surface fill
   with the accent border and ink, and the accent fill on hover/focus. The four
   classes out-rank the theme's primary button fill. */
.orr-wrapper .orr-profile-name-row .button.orr-profile-contact-btn,
.orr-vehicles-wrapper .orr-profile-name-row .button.orr-profile-contact-btn {
    background: var(--orr-ctl-surface);
    border-color: var(--orr-ctl-accent);
    color: var(--orr-ctl-accent);
}

.orr-wrapper .orr-profile-name-row .button.orr-profile-contact-btn:hover,
.orr-wrapper .orr-profile-name-row .button.orr-profile-contact-btn:focus-visible,
.orr-vehicles-wrapper .orr-profile-name-row .button.orr-profile-contact-btn:hover,
.orr-vehicles-wrapper .orr-profile-name-row .button.orr-profile-contact-btn:focus-visible {
    background: var(--orr-ctl-accent);
    border-color: var(--orr-ctl-accent);
    color: var(--orr-ctl-accent-ink);
    filter: none;
}

/* The profile's Edit remains the one outline button — it is not in this block.
   It carries four classes on purpose: it is an <a> with .button and
   .wp-block-button__link, so this outline rule has to out-rank the theme's own
   anchor and block-button styling. */
.orr-wrapper .orr-profile-avatar .button.btn--secondary,
.orr-vehicles-wrapper .orr-profile-avatar .button.btn--secondary {
    background: var(--orr-ctl-surface);
    border-color: var(--orr-ctl-accent);
    color: var(--orr-ctl-accent);
}

.orr-wrapper .orr-profile-avatar .button.btn--secondary:hover,
.orr-wrapper .orr-profile-avatar .button.btn--secondary:focus-visible,
.orr-vehicles-wrapper .orr-profile-avatar .button.btn--secondary:hover,
.orr-vehicles-wrapper .orr-profile-avatar .button.btn--secondary:focus-visible {
    background: var(--orr-ctl-accent);
    border-color: var(--orr-ctl-accent);
    color: var(--orr-ctl-accent-ink);
    filter: none;
}

/* The pending-transfer row is not a control, so its label does not take the
   action hover underline. (Share is no longer an action row — it lives in the
   media bar under the photo, styled with it.) */
.orr-wrapper .orr-vehicle-action--status:hover > span {
    text-decoration: none;
}

/* Row 2 — Service records, Documents and Reminders (shared section wrapper).
   The divider matches the surrounding .orr-wrapper border in both colour
   schemes. */
.orr-vehicle-services,
.orr-vehicle-documents,
.orr-vehicle-reminders {
    border-top: 1px solid var(--orr-wrapper-border, var(--global-palette6, var(--global-palette-border, #e0e0e0)));
    padding: 12px 0 20px;
}

.orr-vehicle-services table,
.orr-vehicle-reminders table {
    /* 20px side margins so the row separators stop where the comment
       separators do instead of running to the card frame. The first and last
       cells drop their side padding (set inline in orr-public.php) so the text
       still starts 20px from the frame, not 40px. */
    width: calc(100% - 40px);
    margin: 0 20px;
    border-collapse: collapse;
}

/* The service records table is a list, not a grid: strip the theme's table and
   cell borders and keep only the horizontal row separators. The header row gets
   one separator too, and the final row needs none. */
.orr-wrapper .orr-vehicle-services .orr-service-records,
.orr-wrapper .orr-vehicle-services .orr-service-records thead,
.orr-wrapper .orr-vehicle-services .orr-service-records tbody,
.orr-wrapper .orr-vehicle-services .orr-service-records tr,
.orr-wrapper .orr-vehicle-services .orr-service-records th,
.orr-wrapper .orr-vehicle-services .orr-service-records td {
    border: 0;
}

.orr-wrapper .orr-vehicle-services .orr-service-records th {
    border-bottom: 1px solid var(--global-palette6, var(--global-palette-border, #e0e0e0));
}

.orr-wrapper .orr-vehicle-services .orr-service-records tbody tr {
    border-bottom: 1px solid var(--global-palette6, var(--global-palette-border, #e0e0e0));
}

.orr-wrapper .orr-vehicle-services .orr-service-records tbody tr:last-child {
    border-bottom: 0;
}

/* The reminders table uses the same list treatment. */
.orr-wrapper .orr-vehicle-reminders .orr-reminder-records,
.orr-wrapper .orr-vehicle-reminders .orr-reminder-records thead,
.orr-wrapper .orr-vehicle-reminders .orr-reminder-records tbody,
.orr-wrapper .orr-vehicle-reminders .orr-reminder-records tr,
.orr-wrapper .orr-vehicle-reminders .orr-reminder-records th,
.orr-wrapper .orr-vehicle-reminders .orr-reminder-records td {
    border: 0;
}

.orr-wrapper .orr-vehicle-reminders .orr-reminder-records th {
    border-bottom: 1px solid var(--global-palette6, var(--global-palette-border, #e0e0e0));
}

.orr-wrapper .orr-vehicle-reminders .orr-reminder-records tbody tr {
    border-bottom: 1px solid var(--global-palette6, var(--global-palette-border, #e0e0e0));
}

.orr-wrapper .orr-vehicle-reminders .orr-reminder-records tbody tr:last-child {
    border-bottom: 0;
}

/* Phones: keep only the Description column. The fixed-width Mileage, Hours and
   Date columns (and their padding) pushed the table past the screen edge. */
@media (max-width: 600px) {
    .orr-service-records .orr-service-col--mileage,
    .orr-service-records .orr-service-col--hours,
    .orr-service-records .orr-service-col--date {
        display: none;
    }

    /* Reminders keep their Due date (the point of the row) and drop the
       fixed-width Status column instead. */
    .orr-reminder-records .orr-reminder-col--status {
        display: none;
    }

    /* Match the comments' 12px mobile inset (see .orr-comments-body). */
    .orr-vehicle-services table,
    .orr-vehicle-reminders table {
        width: calc(100% - 24px);
        margin: 0 12px;
    }
}

/* Preset service-type badge shown beside a record's description */
.orr-service-type-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--global-palette7, #f1f5f9);
    color: var(--global-palette5, #334155);
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

.orr-service-type-badge i {
    font-size: 0.9em;
}

/* Shared section header (Service Records / Documents) */
.orr-section-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 20px;
    margin: 0 0 8px;
}

.orr-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.15em;
    line-height: 1.3;
}

/* Keep the leading icon in lock-step with the heading text (both sections). */
.orr-section-title i {
    flex: 0 0 auto;
    line-height: 1;
    vertical-align: middle;
}

/* Defensive: the card is appended after wpautop (see orr-public.php), so this
   should never fire — but if a formatter does wrap a header's <button>/<span> in
   a <p>, dissolve the wrapper rather than let prose spacing into the row. */
.orr-section-header > p {
    display: contents;
    margin: 0;
}

/* The heading sits inside the theme's content column, where a rule such as
   `.entry-content h3 { margin-top: … }` outranks the bare `.orr-section-title`
   class: the text is pushed down inside the flex row and the Add button is left
   sitting high. Pin the margins with a selector that wins (3 classes beat
   1 class + 1 element) and centre both items against the row. */
.orr-wrapper .orr-section-header {
    align-items: center;
}

.orr-wrapper .orr-section-header .orr-section-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center;
}

.orr-wrapper .orr-section-header .button {
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
}

.orr-section-empty {
    margin: 0;
    padding: 0 20px;
    font-size: 0.9em;
    color: var(--global-palette5, #9ca3af);
}

/* The document grid already carries 20px of horizontal padding, so an empty
   message rendered inside it must not add its own — otherwise "No documents
   uploaded." sits 20px further right than "No services yet." in the Service
   Records section (which has no such wrapper). */
.orr-vehicle-doc-grid > .orr-section-empty {
    flex-basis: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Vehicle documents (Title, Bill of Sale, Registration, Insurance, Other) */
.orr-vehicle-doc-count,
.orr-vehicle-reminder-count {
    font-weight: 400;
    color: var(--global-palette5, #9ca3af);
    font-size: 0.85em;
}

/* ---------------------------------------------------------------------------
   Locked premium features
   One component for every "locked — upgrade to unlock" surface, rendered by
   orr_render_locked_feature_notice() / orr_render_locked_features_panel()
   (includes/orr-premium-features.php). Two variants: --lock (amber padlock) and
   --limit (blue info, for a plan limit the member is bumping into).
   --------------------------------------------------------------------------- */

.orr-locked-feature {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    margin: 10px 0 14px;
    border-radius: 4px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
    font-size: 0.9em;
}

.orr-locked-feature--limit {
    padding: 8px 14px;
    background: #e0f2fe;
    border-color: #38bdf8;
    color: #0369a1;
    font-size: 0.85em;
}

.orr-locked-feature-text {
    flex: 1 1 auto;
    min-width: 0;
}

.orr-locked-feature-cta {
    flex: 0 0 auto;
    color: #b45309;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
}

.orr-locked-feature--limit .orr-locked-feature-cta {
    color: #0369a1;
}

/* Inside the vehicle Documents section, match the section's 20px side inset. */
.orr-vehicle-documents > .orr-locked-feature {
    margin-left: 20px;
    margin-right: 20px;
}

/* Buttons that stand in for a locked action ("Upgrade to Add Vehicle"). */
.orr-locked-button i.fa-lock {
    margin-right: 2px;
}

/* The locked-feature preview panel */
.orr-locked-feature-panel {
    border: 1px solid var(--global-palette6, #e5e7eb);
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 24px;
    background: var(--global-palette7, #f8f9fa);
}

.orr-locked-feature-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 1.15em;
}

.orr-locked-feature-panel-intro {
    margin: 0 0 14px;
    font-size: 0.9em;
    color: var(--global-palette5, #6b7280);
}

.orr-locked-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.orr-locked-feature-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--global-palette6, #e5e7eb);
    border-radius: 6px;
}

.orr-locked-feature-row--unlocked {
    opacity: 0.75;
}

.orr-locked-feature-row-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--global-palette7, #f1f3f5);
    color: #b45309;
}

.orr-locked-feature-row-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.orr-locked-feature-row-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-weight: 600;
}

.orr-locked-feature-row-desc {
    font-size: 0.9em;
    color: var(--global-palette5, #6b7280);
}

.orr-locked-feature-row-cta {
    flex: 0 0 auto;
    align-self: center;
    color: #b45309;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
}

.orr-locked-feature-empty {
    margin: 0 0 24px;
    font-size: 0.9em;
    color: var(--global-palette5, #6b7280);
}

/* Tier pill on a locked row ("PREMIUM" / "ULTIMATE" / "INCLUDED") */
.orr-locked-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.orr-locked-badge--included {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
}

/* Live "N of M photos used" counter in the vehicle modal */
.orr-plan-limit-hint {
    display: block;
    font-size: 0.85em;
    color: var(--global-palette5, #6b7280);
    margin-top: 4px;
}

.orr-plan-limit-hint.is-full {
    color: #b45309;
    font-weight: 600;
}

@media (max-width: 600px) {
    .orr-locked-feature-row {
        flex-wrap: wrap;
    }

    .orr-locked-feature-row-cta {
        align-self: flex-start;
        margin-left: 46px;
    }
}

/* Dark theme (Flatsome `.dark`): keep the amber/blue surfaces readable, and stop
   the notices from looking like light chips on a dark page. */
.dark .orr-locked-feature {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fcd34d;
}

.dark .orr-locked-feature--limit {
    background: rgba(56, 189, 248, 0.14);
    border-color: rgba(56, 189, 248, 0.5);
    color: #7dd3fc;
}

.dark .orr-locked-feature-cta,
.dark .orr-locked-feature-row-cta {
    color: #fcd34d;
}

.dark .orr-locked-feature--limit .orr-locked-feature-cta {
    color: #7dd3fc;
}

.dark .orr-locked-feature-panel {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
}

.dark .orr-locked-feature-row {
    border-color: rgba(255, 255, 255, 0.15);
}

.dark .orr-locked-feature-row-icon {
    color: #fcd34d;
}

.dark .orr-locked-badge {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fcd34d;
}

.dark .orr-locked-badge--included {
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.5);
    color: #6ee7b7;
}

.orr-vehicle-doc-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 20px;
}

.orr-vehicle-doc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100px;
}

.orr-vehicle-doc-preview {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--global-palette6, #e5e7eb);
}

.orr-vehicle-doc-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.orr-vehicle-doc-file-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    text-decoration: none;
}

.orr-vehicle-doc-file-link i {
    font-size: 30px;
    color: #555;
}

.orr-vehicle-doc-delete {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 18px;
    height: 18px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.orr-vehicle-doc-type {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--global-palette4, #555);
    text-align: center;
}

.orr-vehicle-doc-name {
    font-size: 0.72em;
    color: var(--global-palette5, #6b7280);
    max-width: 100px;
    text-align: center;
    word-break: break-all;
    line-height: 1.3;
    text-decoration: none;
}

/* Responsive: stack on small screens */
@media (max-width: 640px) {
    .orr-vehicle-row1 {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }

    /* Stacked, the image takes the card's full width — on a phone that is the
       right hero size, but on a small tablet it is ~570px of photo before the
       title. Cap the cell (photo + its Like/Share bar together, so the bar stays
       the photo's width) where the two-column row does and centre it. */
    .orr-vehicle-media-column {
        width: 100%;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .orr-vehicle-title {
        font-size: 1.3em;
    }
}

/* MODALS */
/* The modal is a phone-first surface: on a small screen the form is what the
   member came for, so the chrome around it — outer margin, box padding,
   heading, per-field rhythm — is kept tight enough that the fields get the
   height instead. Desktop keeps the same rhythm, only roomier. */
body.orr-modal-open {
    overflow: hidden;
}

.orr-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
}

.orr-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.orr-modal-box {
    position: relative;
    background: var(--global-palette8, var(--global-palette-background, #ffffff));
    color: var(--global-palette4, var(--global-palette-foreground, #222));
    border: 1px solid var(--global-palette6, #ddd);
    border-radius: 0;
    padding: 20px 22px 16px;
    width: 100%;
    max-width: 520px;
    /* `dvh` follows the browser's collapsed URL bar on a phone, so the sheet
       uses the screen it actually has instead of the tallest one it ever had.
       On a big screen the 92vh cap keeps it a dialog rather than a full-height
       panel; the plain vh line is the fallback for browsers without dvh. */
    max-height: 92vh;
    max-height: min(92vh, calc(100dvh - 24px));
    overflow-y: auto;
    /* `overflow-y: auto` computes the other axis to `auto` too, so one stray
       wide child would turn the sheet into a sideways scroller. Nothing in a
       modal needs horizontal scrolling — everything is full-width or wraps. */
    overflow-x: hidden;
    overscroll-behavior: contain;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

.orr-modal-box.orr-faded {
    opacity: 0.35;
    pointer-events: none;
}

/* The heading has no theme geometry of its own here: keep it one line deep and
   leave the close button its corner. Long titles wrap instead of running under
   the × — the right-hand space is the button's column, and it is reserved with
   PADDING on an auto-width heading, not a margin.
   Flatsome sizes every heading `width: 100%`, so a `margin-right` could not be
   absorbed: its margin box overflowed the scroll container by exactly that
   amount, and Chromium (Brave/Chrome) turns that into a horizontal scrollbar —
   a 30px one here. `width: auto` + `padding-right` keeps the reservation inside
   the box, whatever the theme does with heading widths. */
.orr-modal-heading {
    width: auto;
    margin: 0 0 10px;
    padding-right: 30px;
    font-size: 1.2rem;
    line-height: 1.3;
}

.orr-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.07);
    border: none;
    font-size: 1.15em;
    cursor: pointer;
    padding: 5px 9px;
    /* Flatsome gives every <button> a 1em end margin, which parked this one
       27px in from the corner instead of the 8px asked for above. */
    margin: 0;
    border-radius: 0;
    color: var(--global-palette4, #333);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    box-shadow: none;
    text-shadow: none;
    transition: background 0.15s ease;
}

.orr-modal-close:hover {
    background: rgba(0, 0, 0, 0.15);
    opacity: 1;
}

/* MODAL LOADING OVERLAY */
.orr-modal-loading {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    font-size: 1.1em;
    color: var(--global-palette4, #333);
}

.orr-modal-loading i.fa-circle-notch {
    font-size: 2.4em;
    color: #8d7344;
}

/* FORM ELEMENTS */
/* Field rhythm: one short step between fields, a single step between a label
   and its control. The theme's paragraph margins are far too generous inside a
   modal — on a phone they were eating a whole field's height over a form. */
.orr-modal-box form p {
    margin: 0 0 9px 0;
}

.orr-modal-box form p:last-child {
    margin-bottom: 0;
}

.orr-modal-box label {
    font-weight: 600;
    font-size: 0.85em;
    display: block;
    margin-bottom: 4px;
    line-height: 1.3;
}

.orr-modal-box input[type="text"],
.orr-modal-box input[type="number"],
.orr-modal-box input[type="date"],
.orr-modal-box input[type="email"],
.orr-modal-box input[type="tel"],
.orr-modal-box input[type="url"],
.orr-modal-box input[type="password"],
.orr-modal-box select,
.orr-modal-box textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 7px 10px;
    font-size: 0.95rem;
    line-height: 1.3;
}

.orr-modal-box textarea {
    min-height: 64px;
    resize: vertical;
}

/* =============================================================================
   FLOATING FIELD LABELS
   The label starts life as the field's placeholder and rises into the field's
   own top padding once the control is focused or carries a value, so a modal
   spends no extra row on a label. The control keeps its compact height: 38px,
   with 14px of top padding reserved for the risen label.

   Markup contract:
   - `<p class="orr-field">` wraps the control and its label;
   - the CONTROL COMES FIRST — the sibling selectors below depend on it;
   - text/number/textarea carry `placeholder=" "` (that is the state
     :placeholder-shown reads — a field with no placeholder never looks empty);
   - a control with no empty state of its own (select, date) puts
     `orr-field--up` on the wrapper, so its label starts risen;
   - hints stay inside the field wrapper, after the label.
   ============================================================================= */

.orr-modal-box .orr-field {
    position: relative;
}

.orr-modal-box .orr-field > input[type="text"],
.orr-modal-box .orr-field > input[type="number"],
.orr-modal-box .orr-field > input[type="email"],
.orr-modal-box .orr-field > input[type="tel"],
.orr-modal-box .orr-field > input[type="url"],
.orr-modal-box .orr-field > input[type="date"],
.orr-modal-box .orr-field > select {
    height: 38px;
    padding: 14px 10px 4px;
}

.orr-modal-box .orr-field > textarea {
    min-height: 60px;
    padding: 18px 10px 8px;
}

/* The resting place: vertically centred in the control, looking like the
   placeholder it stands in for. */
.orr-modal-box .orr-field > label {
    position: absolute;
    top: 19px;
    left: 11px;
    max-width: calc(100% - 22px);
    margin: 0;
    transform: translateY(-50%);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--global-palette5, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    transition: top 0.12s ease, font-size 0.12s ease, color 0.12s ease;
}

/* A textarea's "empty" line sits below its 18px top padding, not at the middle
   of its (much taller) box. */
.orr-modal-box .orr-field > textarea + label {
    top: 27px;
}

/* Risen: focused, filled, or a control that is never empty. */
.orr-modal-box .orr-field > input:focus + label,
.orr-modal-box .orr-field > input:not(:placeholder-shown) + label,
.orr-modal-box .orr-field > textarea:focus + label,
.orr-modal-box .orr-field > textarea:not(:placeholder-shown) + label,
.orr-modal-box .orr-field--up > label {
    top: 8px;
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* The accent marks the field being typed into, exactly where a placeholder
   would have gone quiet. */
.orr-modal-box .orr-field > input:focus + label,
.orr-modal-box .orr-field > textarea:focus + label,
.orr-modal-box .orr-field > select:focus + label {
    color: var(--orr-ctl-accent, var(--fs-color-primary, #446084));
}

/* The required marker keeps its emphasis as the label shrinks. */
.orr-modal-box .orr-field > label > span {
    color: #dc2626;
}

/* =============================================================================
   VEHICLES TAGGED ON A TRIP — the trip form's picker
   A bordered, scrollable checklist so a full garage does not stretch the modal:
   the list caps at about four rows and scrolls instead. Options are rows, not
   inline checkboxes, which keeps the title readable and the tap target wide.
   ============================================================================= */

.orr-modal-box .orr-vehicle-tagger {
    margin: 0 0 9px;
}

.orr-modal-box .orr-vehicle-tagger__label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.3;
}

.orr-modal-box .orr-vehicle-tagger__list {
    max-height: 146px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--orr-ctl-line, var(--global-palette6, #e0e0e0));
    border-radius: var(--orr-ctl-radius, 4px);
    background: var(--global-palette9, var(--global-palette-background, #fff));
}

.orr-modal-box .orr-vehicle-tagger__option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    border-bottom: 1px solid var(--orr-ctl-line, var(--global-palette6, #e0e0e0));
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
}

.orr-modal-box .orr-vehicle-tagger__option:last-child {
    border-bottom: 0;
}

.orr-modal-box .orr-vehicle-tagger__option:hover,
.orr-modal-box .orr-vehicle-tagger__option:focus-within {
    background: var(--global-palette7, var(--global-palette-background, #f3f4f6));
}

.orr-modal-box .orr-vehicle-tagger__option input[type="checkbox"] {
    flex: none;
    margin: 0;
}

.orr-modal-box .orr-vehicle-tagger__empty {
    margin: 0;
    padding: 8px 10px;
    border: 1px dashed var(--orr-ctl-line, var(--global-palette6, #e0e0e0));
    border-radius: var(--orr-ctl-radius, 4px);
    font-size: 0.85em;
    line-height: 1.4;
    color: var(--global-palette5, #6b7280);
}

/* Two short fields share a row (Year + Make, Mileage + Hours…). `auto-fit` with
   a 120px floor keeps them side by side on every phone — a 320px screen still
   fits two 130px fields — and drops back to one column only when a field would
   be narrower than that. */
.orr-modal-box .orr-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0 10px;
}

/* CHARACTER HINT UNDER A MODAL FIELD */
.orr-modal-box .orr-contact-hint,
.orr-modal-box .orr-field-hint {
    display: block;
    margin-top: 3px;
    font-size: 0.8em;
    line-height: 1.35;
    color: var(--global-palette5, #666);
}

/* The Save / Delete row that closes every modal form. */
.orr-modal-box .orr-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

/* A save's success/error notice, printed at the top of the modal. */
.orr-modal-box .orr-modal-notice {
    margin: 0 0 10px 0;
    padding: 8px 12px;
}

/* VEHICLES WRAPPER */
.orr-vehicles-wrapper {
    margin-bottom: 24px;
}

/* VEHICLES GRID */
/* A marketplace-style fluid grid: the browser fits as many 235px-wide cards as
   the listing has room for, and each card grows into the spare space. Cards
   therefore run from 235px up to a little over 290px, and when squeezing the
   window takes them below 235px one column is dropped and the row re-fills with
   wider cards — 4 / 3 / 2 / 1 as the listing narrows, then back up again when it
   widens. There is no per-viewport column count: the count IS what fits, so a
   page with a sidebar and a full-width page step down at their own widths.
   `min(235px, 100%)` keeps the track inside the listing on a screen narrower
   than the minimum, instead of overflowing it. */
.orr-vehicles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(235px, 100%), 1fr));
    gap: 20px;
    padding: 8px 0;
}

.orr-vehicle-card {
    border: 1px solid var(--global-palette6, var(--global-palette-border, #e0e0e0));
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dark .orr-vehicle-card {
    border-color: var(--global-palette3, #333);
}

.dark .orr-vehicle-card-spec {
    color: var(--global-palette5, #bbb);
}

.dark .orr-vehicle-card-spec-label {
    color: var(--global-palette8, #eee);
}

/* The card title's ink lives on the wrapper as a variable (see the title rules
   below): one value per scheme, so the light and dark rules cannot fight over
   specificity or source order. In dark mode the title reads as a heading, so it
   takes the body ink rather than the theme's link colour. */
.dark .orr-vehicles-wrapper {
    --orr-card-title-ink: var(--global-palette4, #dde3ea);
}

.dark .orr-vehicle-card-specs {
    border-top-color: var(--global-palette3, #333);
}

.dark .orr-vehicle-card-photo-placeholder {
    color: var(--global-palette5, #aaa);
}

.dark .orr-wrapper {
    --orr-wrapper-border: var(--global-palette3, #333);
    border-color: var(--orr-wrapper-border);
}

.dark .orr-placeholder {
    background: var(--global-palette3, #333);
    color: var(--global-palette5, #aaa);
}

/* The whole card lifts on hover/focus. The border is deliberately left alone:
   premium marketplace cards keep their blue/amber tint instead of turning gold. */
.orr-vehicle-card:hover,
.orr-vehicle-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

@media (prefers-reduced-motion: reduce) {
    .orr-vehicle-card {
        transition: none;
    }

    .orr-vehicle-card:hover,
    .orr-vehicle-card:focus-within {
        transform: none;
    }
}

.orr-vehicle-card-media {
    position: relative;
}

/* A listing with nothing in it — the favorites list a member has not filled yet —
   explains itself instead of leaving a blank grid. Same dashed placeholder the
   private-profile notice uses, on the listing's own surface. */
.orr-vehicles-empty {
    margin: 18px 0 0;
    padding: 28px;
    border: 1px dashed var(--orr-ctl-line, #ccc);
    border-radius: 8px;
    text-align: center;
    color: var(--orr-ctl-muted, #666);
}

/* A stretched link turns the whole card into one target. The Like pill and any
   list-view controls sit above it. */
.orr-vehicle-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.orr-vehicle-card-link:focus-visible {
    outline: 2px solid var(--orr-ctl-accent, var(--fs-color-primary, var(--primary-color, #446084)));
    outline-offset: -2px;
}

/* Like sits on the photo, bottom right, on its own dark pill so it stays legible
   over any picture. It is above .orr-vehicle-card-link and keeps its click
   behaviour. A hairline light border keeps the pill's edge readable where the
   photo behind it is dark too, instead of the two blacks running together. */
.orr-vehicle-card-media .orr-vehicle-card-vote {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    margin: 0;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.68);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
}

.orr-vehicle-card-media .orr-vehicle-card-vote-btn {
    color: #fff;
}

.orr-vehicle-card-media .orr-vehicle-card-vote-btn:hover,
.orr-vehicle-card-media .orr-vehicle-card-vote-btn:focus-visible {
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
}

.orr-vehicle-card-media .orr-vehicle-card-vote-btn.orr-voted,
.orr-vehicle-card-media .orr-vehicle-card-vote-btn.orr-voted:hover {
    color: var(--orr-ctl-accent, var(--fs-color-primary, var(--primary-color, #446084)));
}

/* Favorite — the heart pill on the photo's bottom-left corner, the mirror of the
   Like pill in the bottom-right. It shares that pill's box so the two read as a
   pair over any picture; the heart is filled and red once the vehicle is saved.
   It also sits in the marketplace card's photo column, which is a different
   element from .orr-vehicle-card-media. */
.orr-vehicle-card-media .orr-vehicle-card-favorite,
.orr-for-sale-photo .orr-vehicle-card-favorite {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 5px 9px;
    /* The theme styles bare `button` elements (min-height, family, caps), so the
       pill resets the ones that would change its box or its icon's baseline. */
    min-height: 0;
    height: auto;
    text-transform: none;
    font-family: inherit;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.68);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.orr-vehicle-card-media .orr-vehicle-card-favorite:hover,
.orr-vehicle-card-media .orr-vehicle-card-favorite:focus-visible,
.orr-for-sale-photo .orr-vehicle-card-favorite:hover,
.orr-for-sale-photo .orr-vehicle-card-favorite:focus-visible {
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
}

.orr-vehicle-card-media .orr-vehicle-card-favorite.orr-favorited,
.orr-vehicle-card-media .orr-vehicle-card-favorite.orr-favorited:hover,
.orr-for-sale-photo .orr-vehicle-card-favorite.orr-favorited,
.orr-for-sale-photo .orr-vehicle-card-favorite.orr-favorited:hover {
    color: #ff5c8a;
}

.orr-vehicle-card-photo-link {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--global-palette6, #e0e0e0);
}

.orr-vehicle-card-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.orr-vehicle-card-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--global-palette4, #666);
    font-size: 0.9em;
}

.orr-vehicle-card-title {
    padding: 12px 14px 6px;
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1.25;
}

/* A little air under the title in the card grid; the list row keeps its compact
   spacing. */
.orr-vehicles-wrapper:not(.orr-vehicles-wrapper--list) .orr-vehicle-card-title {
    margin-bottom: 4px;
}

/* The title is a link, but it must read the same on every card in a row. It used
   to take `color: inherit`, which is not a colour of its own: it resolves against
   whatever the nearest ancestor happens to be painting. That let ONE card differ
   from its neighbours — a theme's :visited colour, or a white-text wrapper (a
   footer or hero band the listing was dropped into) repainted that title while
   the rest stayed gold — which is how a single title comes out white in one
   browser and gold in another.
   The ink is now one variable per scheme (dark mode sets it above) and the link
   rule below is the only thing that paints the title: the visited state is
   pinned to the same colour, so a click history cannot repaint one card, and the
   rule is scoped to the listing so it outranks a theme painting `a`/`a:visited`
   instead of tying with it and losing on source order. The var() fallback chain
   ends at `inherit`, so a theme defining none of these tokens keeps the old look. */
.orr-vehicles-wrapper {
    /* Light: the theme's own link accent — the colour these titles already read. */
    --orr-card-title-ink: var(--global-palette-highlight, var(--fs-color-primary, inherit));
}

.orr-vehicles-wrapper .orr-vehicle-card-title a,
.orr-vehicles-wrapper .orr-vehicle-card-title a:visited,
.orr-vehicles-wrapper .orr-for-sale-title a,
.orr-vehicles-wrapper .orr-for-sale-title a:visited {
    color: var(--orr-card-title-ink, inherit);
    text-decoration: none;
}

.orr-vehicles-wrapper .orr-vehicle-card-title a:hover,
.orr-vehicles-wrapper .orr-vehicle-card-title a:focus,
.orr-vehicles-wrapper .orr-for-sale-title a:hover,
.orr-vehicles-wrapper .orr-for-sale-title a:focus {
    text-decoration: underline;
}

/* Seller line on marketplace cards: small avatar + linked username */
.orr-vehicle-card-seller {
    display: flex;
    align-items: center;
    gap: 6px;
}

.orr-vehicle-card-seller-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    display: block;
}

/* Vote line — the layout used to be inline styles on the element; it lives here
   so the compact list view can restyle the same node as a column. */
.orr-vehicle-card-vote {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px 14px;
    font-size: 13px;
    color: #7a838b;
}

.orr-vehicle-card-vote-btn {
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    border-radius: 0;
    background: transparent;
    border: none;
    color: #7a838b;
    user-select: none;
}

/* The card's vote line wears the same theme button colour as the detail page's
   Like button (.orr-vote-btn), so a voted card is gold like every other control
   on the page rather than red. */
.orr-vehicle-card-vote-btn:hover {
    background: #f0f0f0;
    color: var(--fs-color-primary, var(--primary-color, #446084));
}

.orr-vehicle-card-vote-btn.orr-voted {
    color: var(--fs-color-primary, var(--primary-color, #446084));
}

.orr-vehicle-card-vote-btn.orr-voted:hover {
    background: #fdf5e3;
    color: var(--fs-color-primary, var(--primary-color, #446084));
}

/* Card spec list (Year/Make/Model, Category, Engine, VIN) */
.orr-vehicle-card-specs {
    padding: 6px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-top: 1px solid var(--global-palette6, #eee);
}

.orr-vehicle-card-spec {
    font-size: 0.8em;
    color: #777;
    line-height: 1.5;
    /* Inline flow, not flex: the label and value share the line, and a wrapped
       value returns to the row's left edge instead of staying in a second
       flex column. */
    display: block;
    overflow-wrap: anywhere;
}

.orr-vehicle-card-spec-label {
    font-weight: 600;
    color: #444;
    white-space: nowrap;
}

/* =============================================================================
   FOR-SALE LISTING — CARD GRID
   ============================================================================= */

/* The for-sale listing uses the same fluid card grid as every other vehicle
   listing (the .orr-vehicles-grid base rule above), so there is deliberately no
   column override here any more. The for-sale card is built as
   a horizontal row (photo | info | price) for a full-width list, so inside the
   grid it is stacked into a normal card below. */

/* =============================================================================
   FOR-SALE CARD
   ============================================================================= */

/* Card form inside the grid: photo on top, then the title, asking price and the
   seller's profile location. The compact list view reuses the same nodes as
   table columns. */
.orr-for-sale-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

/* The paid-tier chip (Premium / Ultimate) the marketplace puts on a listing from
   a paying member — the visible half of the paid-first order, in the same corner
   the For Sale / Private badges take on the grid cards. Free listings carry no
   chip, so an unmarked card is a free one. It never catches a click, so it cannot
   swallow one meant for the photo behind it. */
.orr-listing-tier {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #1e40af;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.orr-listing-tier i {
    font-size: 9px;
}

.orr-listing-tier--ultimate {
    background: #92400e;
}

/* Photo — full card width, 4:3 like every other vehicle card */
.orr-for-sale-photo {
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0;
    background: var(--global-palette6, #e0e0e0);
    /* Anchor for the paid-tier chip, so the chip rides the photo's own corner in
       both the card grid and the (much narrower) list-view photo column. */
    position: relative;
}

.orr-for-sale-photo a {
    display: block;
    width: 100%;
    height: 100%;
}

.orr-for-sale-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.orr-for-sale-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--global-palette4, #666);
    font-size: 0.85em;
    text-decoration: none;
}

/* Info — title / price / location, padded like .orr-vehicle-card-title. The
   compact list view takes these same nodes apart into its columns. */
.orr-for-sale-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 14px;
}

.orr-for-sale-title {
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1.25;
}

.orr-for-sale-title a {
    color: inherit;
    text-decoration: none;
}

.orr-for-sale-title a:hover {
    text-decoration: underline;
}

/* The asking price sits directly under the title on a marketplace card. */
.orr-for-sale-price-line {
    display: flex;
    align-items: center;
}

/* Seller's profile location, under the price. */
.orr-for-sale-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8em;
    color: var(--global-palette5, #777);
}

.orr-for-sale-location i {
    font-size: 0.95em;
    opacity: 0.85;
}

.dark .orr-for-sale-location {
    color: var(--global-palette5, #bbb);
}

.orr-for-sale-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 0.8em;
    color: #777;
}

.orr-for-sale-specs span {
    white-space: nowrap;
}

/* Price column — only the compact list view uses this node now; the card grid
   shows the inline price under the title. */
.orr-for-sale-price {
    display: none;
    align-items: center;
    justify-content: flex-start;
    padding: 0 14px 14px;
}

.orr-for-sale-price-value {
    font-size: 1.1em;
    font-weight: 700;
    color: #2e7d32;
}

/* =============================================================================
   SIDEBAR SEARCH FORM
   ============================================================================= */

.orr-sidebar-search {
    margin-bottom: 24px;
}

.orr-sidebar-search-title {
    margin: 0 0 12px;
    font-size: 1.05em;
    font-weight: 700;
}

.orr-sidebar-search-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Keyword + category fields — the plain .orr-sidebar-search-field is a marker class
   only (all three field wrappers carry it, which is what the :not() below keys off).
   The form is a single wrapped row, so fields are sized here and in the variant
   rules that follow; a blanket width on the base class would force each field onto
   its own line. */
.orr-sidebar-search-field:not(.orr-sidebar-search-button-field) {
    flex: 1 1 180px;
    min-width: 140px;
}

.orr-sidebar-search-input,
.orr-sidebar-search-select {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

/* Button to match input/select height and style. The box itself is sized by the
   grouped search bar in the CONTROL SYSTEM section; this only sets the parts the
   bar does not (icon/text alignment, wrapping). */
.orr-sidebar-search-button {
    white-space: nowrap;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* Button field */
.orr-sidebar-search-field.orr-sidebar-search-button-field {
    flex: 0 0 auto;
}

/* On narrow screens, stack vertically */
@media (max-width: 600px) {
    .orr-sidebar-search-form {
        flex-direction: column;
        align-items: stretch;
    }

    .orr-sidebar-search-field:not(.orr-sidebar-search-button-field) {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .orr-sidebar-search-button {
        width: 100%;
    }
}

/* DELETE SERVICE BUTTON */
#orr-service-delete {
    align-items: center;
    gap: 6px;
}

/* LIGHTBOX (attachment preview) */
.orr-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.orr-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}

.orr-lightbox-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.orr-lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.8em;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.orr-lightbox-close:hover {
    opacity: 1;
}

/* =============================================================================
   VOTE BUTTON (UP-VOTE)
   The button wears the theme's button colour — the same --fs-color-primary
   Flatsome paints .button with (see the view toggle further down), so it reads
   as the same gold accent as the buttons beside it instead of the one-off red it
   used to be. Outline when the visitor has not voted, filled once they have, so
   the colour stays a state signal. --primary-color is Flatsome's older alias for
   the same setting; #446084 is its factory default.
   ============================================================================= */

.orr-vote-section {
    margin-bottom: 16px;
}

.orr-vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--fs-color-primary, var(--primary-color, #446084));
    border-radius: 0;
    background: #fff;
    color: var(--fs-color-primary, var(--primary-color, #446084));
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    user-select: none;
}

.orr-vote-btn:hover:not(:disabled) {
    /* Warm tint of the button colour, one of the two gold tints this file
       already uses (see the marketplace cards' paid-listing tints). */
    background: #fdf5e3;
    border-color: var(--fs-color-primary, var(--primary-color, #446084));
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.orr-vote-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

.orr-vote-btn.orr-voted {
    background: var(--fs-color-primary, var(--primary-color, #446084));
    color: #fff;
}

.orr-vote-btn.orr-voted:hover:not(:disabled) {
    /* Darken whatever the theme paints the button, rather than naming a shade, so
       a themed gold stays gold on hover. */
    filter: brightness(0.9);
}

.orr-vote-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #9ca3af;
}

.orr-vote-label {
    font-size: 13px;
}

.orr-vote-count {
    font-weight: 700;
    font-size: 14px;
}

/* =============================================================================
   FAVORITE BUTTON (SAVE)
   The bookmark beside Like, in the vehicle page's media bar. Same box as the Like
   button and the same theme accent, because the two sit side by side as the
   page's two listing actions — but the heart turns red once the vehicle is saved,
   which is what tells it apart from a vote.
   ============================================================================= */

.orr-favorite-section {
    margin-bottom: 16px;
}

.orr-fav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--fs-color-primary, var(--primary-color, #446084));
    border-radius: 0;
    background: #fff;
    color: var(--fs-color-primary, var(--primary-color, #446084));
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    user-select: none;
}

.orr-fav-btn:hover:not(:disabled) {
    background: #fdf5e3;
    border-color: var(--fs-color-primary, var(--primary-color, #446084));
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.orr-fav-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

.orr-fav-btn.orr-favorited {
    background: #e0245e;
    border-color: #e0245e;
    color: #fff;
}

.orr-fav-btn.orr-favorited:hover:not(:disabled) {
    /* Darken the red actually painted, rather than naming a second shade. */
    filter: brightness(0.94);
}

.orr-fav-btn:disabled {
    opacity: 0.6;
    cursor: progress;
}

.orr-fav-label {
    font-size: 13px;
}

/* =============================================================================
   PROFILE COMPLETE GAUGE
   ============================================================================= */

.orr-profile-gauge {
    /* No background, border or padding of its own — the gauge inherits whatever
       surrounds it, so it blends with both light and dark themes (and matches the
       [orr_profile_complete] shortcode embed). The member page and the account page
       both wrap it in .orr-profile-gauge-wrap, and the --profile variant draws the
       faint box it sits in. */
    margin: 0;
    padding: 0;
}

/* Avatar column — the photo with the owner's Edit control beneath it. */
.orr-profile-avatar {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Name row — the member's name and their profile visibility switch (or the
   "Email Owner" button) share one line, with the control right after the name.
   The row does not wrap, and the heading is content-sized (`flex: 0 1 auto`),
   for the same reasons as the vehicle title row: Flatsome gives every heading
   `width: 100%`, which used to claim the whole row and drop the control below
   the name, and growing the heading would push the control out to the row's
   right edge. `min-width: 0` lets a long name wrap its text instead. */
.orr-profile-name-row {
    display: flex;
    align-items: center;
    gap: 8px 12px;
    flex-wrap: nowrap;
    margin: 0 0 8px;
}

.orr-profile-name-row .orr-profile-name {
    flex: 0 1 auto;
    /* Flatsome's `h1 { width: 100% }` would make the name fill the row and push
       the control to its right edge; size to the text instead. */
    width: auto;
    max-width: 100%;
    min-width: 0;
    /* The row does not wrap, so a long unbroken name has to break inside its own
       box rather than run under the control. */
    overflow-wrap: break-word;
    margin: 0;
}

.orr-profile-name-row .orr-private-switch,
.orr-profile-name-row .orr-profile-contact-btn {
    flex: 0 0 auto;
}

/* Profile page: header on the left, gauge on the right. Above the phone
   breakpoint it wraps (the gauge drops under the header) only when the viewport
   cannot fit both; at phone width the grid rule below keeps the gauge in the top
   right corner beside the avatar. */
.orr-profile-top {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.orr-profile-top .orr-profile-header {
    flex: 1 1 320px;
    min-width: 0;
}

.orr-profile-gauge-wrap {
    flex: 0 0 auto;
    max-width: 100%;
}

/* Phone width: keep the gauge in the top right corner, beside the avatar.
   The header is flattened (display: contents) so the avatar, the gauge and the
   member's details become grid items of .orr-profile-top itself: avatar | gauge
   on the first row, the details across both columns below. Without this the
   header's 320px flex basis forces the gauge onto a line of its own under the
   owner actions. */
@media (max-width: 640px) {
    .orr-profile-top {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "avatar gauge"
            "info info";
        align-items: start;
        gap: 12px 16px;
    }

    .orr-profile-top .orr-profile-header {
        /* Overrides the inline display:flex on the header, so its avatar and
           details take part in the grid above. */
        display: contents !important;
    }

    .orr-profile-avatar {
        grid-area: avatar;
    }

    .orr-profile-gauge-wrap {
        grid-area: gauge;
        justify-self: end;
        width: max-content;
        max-width: 100%;
        box-sizing: border-box;
    }

    .orr-profile-info {
        grid-area: info;
        min-width: 0;
    }
}

.orr-profile-gauge--profile {
    /* Faint border only — no background, so it blends with light and dark themes. */
    border: 1px solid rgba(127, 127, 127, 0.35);
    padding: 14px 16px;
    width: 100%;
    box-sizing: border-box;
}

/* Per-vehicle completeness badge — sits at the top right of the title block
   (single vehicle page, owner/admin). Sized to the dial, not to a card. */
.orr-vehicle-gauge-wrap {
    flex: 0 0 auto;
    max-width: 100%;
}

/* The badge is pinned to the bar's top-right corner, NOT laid out in flow. In
   flow the dial (96px) made the bar taller than the title block, so the Like
   button ended up far from the specs list (46px on a wide card) instead of the
   12px the row rhythm gives it. The title block reserves the corner instead, at
   exactly the width the dial had as a flex item: the dial (6rem) plus the bar's
   16px column gap. */
.orr-vehicle-titlebar--gauge {
    position: relative;
    /* The dial is 6rem tall and now hangs above a title block that can be a
       single line, so the bar reserves the dial's height: the specs list then
       always starts below it instead of running under the badge's lower half. */
    min-height: 6rem;
}

.orr-vehicle-titlebar--gauge .orr-vehicle-titleblock {
    padding-right: 112px;
}

.orr-vehicle-titlebar--gauge .orr-vehicle-gauge-wrap {
    position: absolute;
    top: 0;
    right: 0;
}

.orr-profile-gauge--vehicle {
    /* Faint border only — matches the profile-context gauge. */
    border: 1px solid rgba(127, 127, 127, 0.35);
    padding: 14px 16px;
    box-sizing: border-box;
}

/* Heading on the left, 270° dial pinned to the top right of the card. */
.orr-gauge-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.orr-gauge-heading {
    min-width: 0;
}

.orr-gauge-title {
    display: block;
    font-weight: 600;
    font-size: 15px;
}

.orr-gauge-dial {
    flex: 0 0 auto;
    line-height: 0;
}

.orr-gauge-meta {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--global-palette4, #6b7280);
}

.orr-gauge-hint {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--global-palette4, #6b7280);
}

.orr-gauge-hint--done {
    color: #16a34a;
}

/* -----------------------------------------------------------------------------
   270° "speedometer" dial (markup from orr_render_gauge()).
   The masked ring draws the arc; the readout is a SIBLING of the ring so the
   radial mask never hides the number. No SVG, no JS, no external assets.
   -------------------------------------------------------------------------- */

@property --value {
    syntax: '<number>';
    initial-value: 0;
    inherits: true;
}

.orr-gauge {
    --size: 9rem;
    --thick: 0.75rem;
    --track: var(--global-palette6, #e6e6e6);
    --accent: #c2410c;
    --start: 225deg; /* gap at the bottom, like a speedometer; 135deg moves it right */
    --sweep: 270deg;
    --value: 0; /* base value blocks any page-level leak; the inline value wins */
    position: relative;
    inline-size: var(--size);
    block-size: var(--size);
    display: grid;
    place-items: center;
}

.orr-gauge__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* A conic gradient's colour-stop boundary is resolved per pixel by the
       gradient shader, so it is never anti-aliased: the flat cut of the arc
       rasterises as a 1px staircase ("pixelated" arc), worst at DPR 1. Trading
       the hard stops for a hairline wedge on either side of the cut (and at the
       end of the track, where it fades to transparent) gives that boundary a
       ~1px blended ramp at any DPR — the ramp is part of the gradient, so it
       needs no rasteriser support and does not touch the sweep animation. */
    --feather: 0.5deg;
    background: conic-gradient(from var(--start),
            var(--accent) 0 calc(var(--value) * var(--sweep) / 100 - var(--feather)),
            var(--track) calc(var(--value) * var(--sweep) / 100 + var(--feather)) calc(var(--sweep) - var(--feather)),
            transparent calc(var(--sweep) + var(--feather)));
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thick)), #000 0);
    mask: radial-gradient(farthest-side, #0000 calc(100% - var(--thick)), #000 0);
    animation: orr-sweep 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* The implicit `to` uses the element's own --value. */
@keyframes orr-sweep {
    from {
        --value: 0;
    }
}

.orr-gauge__readout {
    position: relative;
    display: grid;
    justify-items: center;
    line-height: 1.05;
    text-align: center;
}

.orr-gauge__num {
    font-weight: 700;
    font-size: calc(var(--size) / 4.8);
    font-variant-numeric: tabular-nums;
}

.orr-gauge__num::after {
    content: "%";
    font-size: 0.5em;
    opacity: 0.6;
    margin-inline-start: 0.04em;
}

.orr-gauge__label {
    font-size: calc(var(--size) / 12);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.6;
}

/* Colour bands (set the band class from PHP). */
.orr-gauge--band-low {
    --accent: #dc2626; /* 0–49 */
}

.orr-gauge--band-mid {
    --accent: #d97706; /* 50–89 */
}

.orr-gauge--band-full {
    --accent: #16a34a; /* 90–100 */
}

@media (prefers-reduced-motion: reduce) {
    .orr-gauge__ring {
        animation: none;
    }
}

@media (forced-colors: active) {
    .orr-gauge__ring {
        background: Canvas;
        border: 2px solid CanvasText;
        -webkit-mask: none;
        mask: none;
    }
}

/* -----------------------------------------------------------------------------
   Completeness popover — the vehicle badge (orr_render_completeness_gauge()
   with layout="popover"). Just the dial; the heading, meta, hint and steps live
   in a panel that opens on hover (pointer devices) or tap/click (touch).
   -------------------------------------------------------------------------- */

.orr-gauge-pop {
    position: relative;
    display: inline-block;
    line-height: 1.4;
}

.orr-gauge-pop__trigger {
    cursor: pointer;
    border-radius: 50%;
    outline-offset: 4px;
}

/* The dial is small here, so give the caption a readable floor. */
.orr-gauge-pop__trigger .orr-gauge__label {
    font-size: max(10px, calc(var(--size) / 12));
    letter-spacing: 0.02em;
}

.orr-gauge-pop__panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 60;
    display: none;
    box-sizing: border-box;
    width: max-content;
    max-width: min(320px, calc(100vw - 32px));
    padding: 14px 16px;
    border: 1px solid var(--global-palette6, var(--global-palette-border, #e0e0e0));
    border-radius: 10px;
    /* Theme-driven surface — the same variables as .orr-vehicle-card, so the
       popover follows the palette instead of forcing a light background. */
    background: var(--global-palette8, var(--global-palette-background, #fff));
    color: var(--global-palette4, var(--global-palette-foreground, #222));
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    text-align: left;
}

/* Dark theme — same convention as .orr-vehicle-card / .orr-wrapper, so the
   popover does not sit on a light surface on a dark site. */
.dark .orr-gauge-pop__panel {
    background: var(--global-palette2, #1e1e1e);
    border-color: var(--global-palette3, #333);
    color: var(--global-palette5, #bbb);
}

/* Small screens: the dial wraps to the start of the line, so a panel anchored to
   the dial itself would hang off the left of the viewport. Anchor it to the whole
   title/header block instead and let it span that width. */
@media (max-width: 640px) {
    .orr-gauge-pop {
        position: static;
    }

    .orr-vehicle-titlebar,
    .orr-profile-top,
    .orr-account-top {
        position: relative;
    }

    .orr-gauge-pop__panel {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
    }

    /* The profile/account gauge holds the top-right corner of its header, so
       anchor the panel to the gauge column rather than the whole header: it
       opens directly under the dial (moved up with the gauge) instead of below
       the member details. It extends left from the dial's right edge and is
       capped to the viewport so it cannot run off-screen. */
    .orr-profile-gauge-wrap {
        position: relative;
    }

    .orr-profile-gauge-wrap .orr-gauge-pop__panel {
        left: auto;
        right: 0;
        width: max-content;
        max-width: min(320px, calc(100vw - 32px));
    }
}

/* Invisible bridge so the pointer can travel from the dial to the panel
   without the gap in between closing the popover. */
.orr-gauge-pop__panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
}

.orr-gauge-pop__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.orr-gauge-pop__title {
    font-weight: 600;
    font-size: 14px;
}

.orr-gauge-pop__meta {
    font-size: 12px;
    color: var(--global-palette4, #6b7280);
    white-space: nowrap;
}

/* Hover opens the panel on pointer devices only — on touch, :hover sticks and
   would fight the tap toggle. Keyboard focus and the tap/click class are
   handled below and in orr-public.js. */
@media (hover: hover) {
    .orr-gauge-pop:hover .orr-gauge-pop__panel {
        display: block;
    }
}

.orr-gauge-pop.is-open .orr-gauge-pop__panel,
.orr-gauge-pop__trigger:focus-visible + .orr-gauge-pop__panel,
.orr-gauge-pop__panel:focus-within {
    display: block;
}

/* Collapsible steps list */
.orr-gauge-steps {
    margin-top: 10px;
}

.orr-gauge-summary {
    padding: 2px 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none; /* hide the default <details> marker */
}

.orr-gauge-summary::-webkit-details-marker {
    display: none;
}

/* Swap the label so the toggle always describes the next action. */
.orr-gauge-steps[open] .orr-gauge-summary-show,
.orr-gauge-steps:not([open]) .orr-gauge-summary-hide {
    display: none;
}

.orr-gauge-summary-icon {
    margin-left: 4px;
    font-size: 11px;
    transition: transform .2s ease;
}

.orr-gauge-steps[open] .orr-gauge-summary-icon {
    transform: rotate(180deg);
}

.orr-gauge-checklist {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.orr-gauge-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.35;
}

.orr-gauge-item-icon {
    margin-top: 2px;
    color: #9ca3af;
    flex: 0 0 auto;
}

.orr-gauge-item--done .orr-gauge-item-icon {
    color: #16a34a;
}

.orr-gauge-item--done .orr-gauge-item-text {
    color: var(--global-palette4, #6b7280);
}

.orr-gauge-item-text a {
    text-decoration: underline;
}

.orr-gauge-item-hint {
    display: block;
    font-size: 12px;
    color: var(--global-palette5, #9ca3af);
}

/* =============================================================================
   USER OFF-ROAD INTEREST CATEGORIES
   ============================================================================= */

.orr-interests-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--global-palette4, #6b7280);
    margin-bottom: 6px;
}

.orr-interests-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.orr-interest-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--global-palette3, #374151);
    background: var(--global-palette7, #f3f4f6);
    border: 1px solid var(--global-palette6, #e5e7eb);
    border-radius: 999px;
    white-space: nowrap;
}

.orr-interests-empty {
    font-size: 13px;
    color: var(--global-palette5, #9ca3af);
}

/* Account form: multi-select checkbox list */
.orr-interests-field legend {
    font-size: 1em;
}

.orr-interest-option {
    font-size: 14px;
    line-height: 1.4;
}

.orr-interest-option input[type="checkbox"] {
    margin: 0;
    flex: 0 0 auto;
}

/* =============================================================================
   USER SOCIAL MEDIA LINKS
   ============================================================================= */

.orr-socials-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--global-palette4, #6b7280);
    margin-bottom: 6px;
}

.orr-socials-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Copy-link chip: a <button> wearing the same round chip as the network links.
   Reset the browser button chrome before .orr-social-link supplies the look. */
.orr-share-copy {
    margin: 0;
    padding: 0;
    font: inherit;
    box-sizing: content-box;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.orr-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 16px;
    line-height: 1;
    color: var(--global-palette3, #374151);
    background: var(--global-palette7, #f3f4f6);
    border: 1px solid var(--global-palette6, #e5e7eb);
    border-radius: 50%;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

/* Hover/focus fills the chip with the site accent — the same gold every other
   plugin control uses. The theme's --global-palette-highlight is a separate
   link token, which made these chips read as a different component from the
   rest of the plugin's buttons. */
.orr-social-link:hover,
.orr-social-link:focus {
    color: #fff;
    background: var(--orr-ctl-accent, var(--fs-color-primary, var(--primary-color, #446084)));
    border-color: var(--orr-ctl-accent, var(--fs-color-primary, var(--primary-color, #446084)));
}

/* Pin the glyph colour on the icon itself.
   Flatsome's `.dark .widget a, .dark a { color: currentColor }` outranks the
   class selector above and repaints the <a> with the page's text colour — light
   on a dark site — which left a light glyph on this light chip. A declaration on
   the <i> beats that inherited value whatever the theme's specificity. */
.orr-social-link i {
    color: var(--global-palette3, #374151);
}

.orr-social-link:hover i,
.orr-social-link:focus i {
    color: #fff;
}

.orr-share-copy:focus-visible {
    outline: 2px solid var(--orr-ctl-accent, var(--fs-color-primary, var(--primary-color, #446084)));
    outline-offset: 2px;
}

/* Brief confirmation after a successful copy. */
.orr-share-copy.is-copied,
.orr-share-copy.is-copied:hover,
.orr-share-copy.is-copied:focus {
    color: #fff;
    background: var(--orr-ctl-accent, var(--fs-color-primary, var(--primary-color, #446084)));
    border-color: var(--orr-ctl-accent, var(--fs-color-primary, var(--primary-color, #446084)));
}

.orr-share-copy.is-copied i {
    color: #fff;
}

.orr-socials-empty {
    font-size: 13px;
    color: var(--global-palette5, #9ca3af);
}

/* Account form: per-network URL inputs */
.orr-socials-field legend {
    font-size: 1em;
}

.orr-social-option {
    font-size: 14px;
    line-height: 1.4;
}

/* Vehicle share row (inside the vehicle page's bottom social bar, and wherever
   [orr_vehicle_share] is placed).
   The icons themselves reuse the profile styles above; this only sets the gap
   between the price/private badges and the row. */
.orr-vehicle-share-row {
    margin-top: 12px;
}

/* RESPONSIVE */
@media (max-width: 560px) {
    /* Phone: the overlay margin drops to a hairline so the sheet can use the
       screen height, the box padding shrinks, and the field rhythm tightens one
       more notch. The fields themselves keep their size — this is chrome, not
       controls, giving way. */
    .orr-modal {
        padding: 8px;
    }

    .orr-modal-box {
        padding: 16px 14px 12px;
        max-height: calc(100dvh - 16px);
    }

    .orr-modal-heading {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }

    .orr-modal-box form p {
        margin-bottom: 8px;
    }
}

/* =============================================================================
   VEHICLE LISTING VIEW — grid ⇄ compact list toggle
   ============================================================================= */

/* The listing's toolbar: its heading on a row of its own, then the listing's
   controls — the search box at the left, the Grid/List switch holding the right
   corner, and the garage's upsell ahead of the switch when a Free member has run
   out of vehicle slots. `flex-basis: 100%` on the title and on the control group is
   what gives each its own row; `margin-left:auto` on the switch is what keeps it in
   the corner, whether it shares the row with the search box or has wrapped onto a
   line of its own. The same properties are written inline on the markup, so the
   controls hold their corners even on a site that strips inline styles. */
.orr-vehicles-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    /* Deliberately tight: the listing (or its compact-list header) sits right under
       the toolbar, so more space here reads as a gap in the list itself. */
    margin-bottom: 6px;
}

.orr-vehicles-toolbar__title {
    flex: 1 1 100%;
    margin: 0;
}

/* The search box and the listing's switches share a row: the search box at the
   left, the switches holding the right corner. The action for the member's own
   vehicles is a sibling of this row, so it takes the line below. */
.orr-vehicles-toolbar__row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    flex: 1 1 100%;
    gap: 12px;
}

/* The quick-filter pills — the toolbar's second row (it carries
   .orr-vehicles-toolbar__row, so it stacks under the search row like any other
   row). The top brand and the top category are drawn as the same round badges a
   profile's interests use (.orr-interest-badge): they are the same kind of short
   label. A pill is a link, so it is a little taller than a badge; it takes the
   accent as its hover/focus ink, and as its fill when its filter is the one in
   play — clicking that pill clears the filter again. */
.orr-vehicles-toolbar__row--pills {
    align-items: center;
}

.orr-listing-pills {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* The row's lead-in — "Trending:" — written like the interests and socials titles
   (small, muted, semibold). It is a flex item, so it opens the first line and the
   pills wrap after it. */
.orr-listing-pills__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--global-palette4, #6b7280);
    white-space: nowrap;
}

.orr-listing-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--global-palette3, #374151);
    background: var(--global-palette7, #f3f4f6);
    border: 1px solid var(--global-palette6, #e5e7eb);
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.orr-listing-pill:hover,
.orr-listing-pill:focus-visible {
    color: var(--orr-ctl-accent);
    background: var(--orr-ctl-surface);
    border-color: var(--orr-ctl-accent);
    text-decoration: none;
}

.orr-listing-pill.is-active {
    color: var(--orr-ctl-accent-ink);
    background: var(--orr-ctl-accent);
    border-color: var(--orr-ctl-accent);
}

.orr-listing-pill.is-active:hover,
.orr-listing-pill.is-active:focus-visible {
    color: var(--orr-ctl-accent-ink);
    filter: brightness(0.92);
}

.orr-listing-pill:focus-visible {
    outline: 2px solid var(--orr-ctl-accent);
    outline-offset: 2px;
}

/* The pair of switches sits in the same 40px band as the search controls — the
   input, the select and the Search button are all 40px — and is pinned to the top
   of the row, so it never floats mid-height beside a taller search box.
   `align-self: stretch` on the segments makes them fill the control rather than
   rattle inside it. The pair holds the right corner, so the search box keeps the
   room at the left and the two controls never split the free space between them. */
.orr-vehicles-toolbar .orr-listing-toggles {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-left: auto;
    min-height: 40px;
    box-sizing: border-box;
}

.orr-vehicles-toolbar .orr-view-toggle,
.orr-vehicles-toolbar .orr-density-toggle {
    min-height: 40px;
    box-sizing: border-box;
}

.orr-vehicles-toolbar .orr-view-toggle__btn,
.orr-vehicles-toolbar .orr-density-toggle__btn {
    align-self: stretch;
}

/* The member's own profile: a little more air between Add Vehicle (the toolbar's
   first row) and the search row under it, so the button does not crowd the form. */
.orr-profile .orr-vehicles-toolbar .orr-vehicles-toolbar__action {
    margin-bottom: 8px;
}

/* The note beside a capped member's upgrade link — the other way to make room
   (Q-009). It shares the action's row, wraps under the button on a phone, and
   carries the action's 8px bottom margin so the search row below keeps its gap. */
.orr-vehicles-toolbar__note {
    flex: 0 1 auto;
    min-width: 0;
    margin-bottom: 8px;
    font-size: 0.8em;
    line-height: 1.4;
    color: var(--global-palette5, #6b7280);
}

/* The toolbar's search box is one of the controls, not a panel of its own: no
   card, no bottom margin of its own, and it takes the room left of the switch so
   its fields stay on one line. */
.orr-vehicles-toolbar .orr-sidebar-search {
    flex: 1 1 auto;
    margin-bottom: 0;
    min-width: 0;
}

/* Zero the controls' bottom margin hard enough to stick. `.orr-wrapper input`
   (0,1,1) outranks the plain `.orr-sidebar-search-input { margin: 0 }` above, so
   every input keeps its `margin-bottom: .1em` — and that stray ~1px is exactly
   what left the box 41px against the switch's 40. */
.orr-vehicles-toolbar .orr-sidebar-search-input,
.orr-vehicles-toolbar .orr-sidebar-search-select {
    margin: 0;
}

/* The row's action — Add Vehicle, or the upgrade link a capped Free member sees —
   closes the toolbar on a row of its own under the search, held to the same 40px
   band as the controls above rather than the theme's default button height, and
   with no stray bottom margin. */
.orr-vehicles-toolbar .orr-vehicles-toolbar__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    margin-bottom: 0;
    box-sizing: border-box;
}

/* Desktop and tablet: the fields share the bar's width instead of keeping a
   fixed one, so the grouped search never overruns its container. Under 600px
   the bar stacks (see the CONTROL SYSTEM section). */
@media (min-width: 601px) {
    .orr-vehicles-toolbar .orr-sidebar-search-field:not(.orr-sidebar-search-button-field) {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* On a phone the search takes a row of its own and the switch drops below it,
   right-aligned, rather than floating beside the tall stacked form. */
@media (max-width: 600px) {
    .orr-vehicles-toolbar .orr-sidebar-search {
        flex: 1 1 100%;
    }
}

/* Segmented controls. They stay hidden until orr-vehicle-views.js marks the
   listing ready (data-orr-view-ready): the list view and the compact layout are
   built by that script, so without JS neither control is shown as a dead button. */
.orr-view-toggle,
.orr-density-toggle {
    display: none;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--global-palette6, var(--global-palette-border, #e0e0e0));
}

.orr-vehicles-wrapper[data-orr-view-ready] .orr-view-toggle,
.orr-vehicles-wrapper[data-orr-view-ready] .orr-density-toggle {
    display: inline-flex;
}

/* Written as `.orr-view-toggle .orr-view-toggle__btn` so it also beats the
   generic `.orr-wrapper button { margin-bottom: .1em }` rule above. */
.orr-view-toggle .orr-view-toggle__btn,
.orr-density-toggle .orr-density-toggle__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.dark .orr-view-toggle,
.dark .orr-density-toggle {
    border-color: var(--global-palette3, #333);
}

/* Phones keep the icons only: the two switch groups and their words would push
   the controls past the screen edge. The buttons' aria-label carries the name
   once the visible label is hidden. Tablets (above this breakpoint) keep the
   words. */
@media (max-width: 640px) {
    .orr-view-toggle__btn > span,
    .orr-density-toggle__btn > span {
        display: none;
    }
}

/* =============================================================================
   COMPACT LIST VIEW
   One row per vehicle: a 120px-tall thumbnail, then the data in fixed columns.
   The column template lives in a custom property because the sortable header row
   is a sibling of the grid and the two have to line up exactly. Rows, cells and
   header cells are all plain grid items, so the breakpoint rules below only have
   to redefine the template and hide the matching pair of cells.
   ============================================================================= */

.orr-vehicles-list-head {
    display: none;
}

/* The list template is built from two parts so every listing layout shares it: the
   core columns (photo → engine) and the tail — votes, plus the one or two columns
   a layout adds (VIN in the garage, the seller in the marketplace, the asking
   price on a for-sale listing). A breakpoint therefore only redefines the core
   and a variant only its own tail.

   The minimums are deliberately modest: the fr tracks grow into whatever room the
   listing has (so a wide page looks the same), while a narrow one — a page with a
   sidebar, say — still fits instead of pushing the last column out of the row.
   7 tracks + 6 gaps × 12px must stay inside ~800px, which is the width a listing
   gets on a typical content column. */
.orr-vehicles-wrapper--list {
    --orr-list-photo-w: 120px;
    --orr-list-photo-h: 120px;
    /* A free marketplace listing's thumbnail (see .orr-listing-free at the foot of
       this file).
       It sizes the picture INSIDE the Vehicle column, which now holds the
       thumbnail instead of the vehicle name. The picture is the tallest thing in
       a row, so shrinking it is also what shortens a free row. */
    --orr-list-photo-free: 84px;
    /* vehicle (thumbnail, exactly the photo width) | year | make | model | category | engine */
    --orr-list-core: var(--orr-list-photo-w) 50px minmax(64px, 1fr) minmax(64px, 1fr) minmax(76px, 1fr) minmax(72px, 1fr);
    --orr-list-tail: 60px; /* votes */
    --orr-list-columns: var(--orr-list-core) var(--orr-list-tail);
}

/* The owner's garage adds a VIN column (never shown on a public profile). */
.orr-vehicles-wrapper--list.orr-vehicles-wrapper--cols-with-vin {
    --orr-list-tail: minmax(104px, 1.15fr) 60px; /* VIN | votes */
}

/* The marketplace names the seller. */
.orr-vehicles-wrapper--list.orr-vehicles-wrapper--cols-with-seller {
    --orr-list-tail: minmax(88px, 1fr) 60px; /* seller | votes */
}

/* A for-sale listing swaps the vote button for the asking price. */
.orr-vehicles-wrapper--list.orr-vehicles-wrapper--cols-with-seller-price {
    --orr-list-tail: minmax(88px, 1fr) minmax(84px, 1fr); /* seller | price */
}

/* If the columns still need more room than the listing has the header and the rows
   scroll sideways together, so a column is never clipped. They must live in this
   one wrapper to stay aligned. */
.orr-vehicles-wrapper--list .orr-vehicles-list-scroll {
    overflow-x: auto;
    /* Keeps a scrollbar from painting over the first row's top border. */
    padding-bottom: 2px;
}

.orr-vehicles-wrapper.orr-vehicles-loading .orr-vehicles-grid {
    opacity: 0.45;
}

.orr-vehicles-wrapper--list .orr-vehicles-grid {
    display: block;
    padding: 0;
}

.orr-vehicles-wrapper--list .orr-vehicle-card {
    display: grid;
    grid-template-columns: var(--orr-list-columns);
    align-items: center;
    gap: 0 12px;
    padding: 8px 12px;
    border-radius: 0;
    box-shadow: none;
    transition: none;
    /* A row can need more width than the listing has; the scroll wrapper around
       the header + rows shows it, so the row must not clip its own columns. */
    overflow: visible;
}

/* Stacked rows share a single border instead of doubling it up. */
.orr-vehicles-wrapper--list .orr-vehicle-card + .orr-vehicle-card {
    margin-top: -1px;
}

.orr-vehicles-wrapper--list .orr-vehicle-card:hover,
.orr-vehicles-wrapper--list .orr-vehicle-card:focus-within {
    transform: none;
    box-shadow: inset 3px 0 0 var(--orr-ctl-accent, var(--fs-color-primary, var(--primary-color, #446084)));
}

/* The whole row is a link too. It sits under the Like control, which keeps its
   own click behaviour, and under the row highlight. */
.orr-vehicles-wrapper--list .orr-vehicle-card-link {
    display: block;
}

/* The media wrapper is only a positioning layer in the grid; in the list view
   its photo and vote become ordinary columns. */
.orr-vehicles-wrapper--list .orr-vehicle-card-media {
    display: contents;
}

.orr-vehicles-wrapper--list .orr-vehicle-card-media .orr-vehicle-card-vote {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 3;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: 13px;
    line-height: inherit;
    box-shadow: none;
    backdrop-filter: none;
    /* Keep the Like last in the auto-placement order instead of pinning it to an
       explicit column. Pinning it made every following cell start a new row. */
    order: 99;
    transition: none;
}

.orr-vehicles-wrapper--list .orr-vehicle-card-media .orr-vehicle-card-vote-btn,
.orr-vehicles-wrapper--list .orr-vehicle-card-media .orr-vehicle-card-vote-btn:hover,
.orr-vehicles-wrapper--list .orr-vehicle-card-media .orr-vehicle-card-vote-btn:focus-visible {
    background: none;
    color: var(--global-palette4, #6b7280);
}

.orr-vehicles-wrapper--list .orr-vehicle-card-media .orr-vehicle-card-vote-btn.orr-voted {
    color: var(--orr-ctl-accent, var(--fs-color-primary, var(--primary-color, #446084)));
}

/* The heart pill is a grid-photo control. The compact list builds its row from an
   exact column template, so an extra item would push the Like onto a second row;
   the vehicle page and the grid card still offer it. */
.orr-vehicles-wrapper--list .orr-vehicle-card-media .orr-vehicle-card-favorite {
    display: none;
}

.orr-vehicles-wrapper--list .orr-vehicle-card-photo-link {
    width: var(--orr-list-photo-w);
    height: var(--orr-list-photo-h);
    aspect-ratio: auto;
    border-radius: 4px;
    overflow: hidden;
}

.orr-vehicles-wrapper--list .orr-vehicle-card-title {
    padding: 0;
    font-size: 1em;
    overflow-wrap: anywhere;
}

/* The stacked spec block is replaced by the per-column cells in list view. */
.orr-vehicles-wrapper--list .orr-vehicle-card-specs {
    display: none;
}

.orr-vehicles-wrapper--list .orr-vehicle-card-vote {
    margin-top: 0;
    padding: 0;
}

/* Per-column cells: hidden in the card grid, one grid item each in list view. */
.orr-vehicle-listcell {
    display: none;
}

.orr-vehicles-wrapper--list .orr-vehicle-listcell {
    display: block;
    font-size: 0.85em;
    color: var(--global-palette4, #6b7280);
    overflow-wrap: anywhere;
}

.dark .orr-vehicles-wrapper--list .orr-vehicle-listcell {
    color: var(--global-palette5, #bbb);
}

/* -----------------------------------------------------------------------------
   COMPACT LIST VIEW — MARKETPLACE & FOR-SALE CARDS
   These two cards carry a seller line and (for-sale) a price instead of the
   profile card's stacked spec block, so their elements get the same column
   treatment here.
   -------------------------------------------------------------------------- */

/* The seller line. Its spacing used to be inline on the element; it lives here so
   the list view can re-lay it as a column. */
.orr-vehicle-card-seller--marketplace {
    padding: 0 14px 6px;
    font-size: 13px;
    color: #7a838b;
}

/* Regular listing grid: no seller name. The compact list view still has its
   Seller column, so the same node is shown again there. */
.orr-vehicles-wrapper:not(.orr-vehicles-wrapper--list) .orr-vehicle-card-seller--marketplace {
    display: none;
}

/* The for-sale card grid shows the location instead of the seller line; the
   compact list view still needs the seller as its own column. */
.orr-vehicle-card-seller--for-sale {
    display: none;
    margin-top: 4px;
    font-size: 13px;
    color: #7a838b;
}

.orr-vehicles-wrapper--list .orr-vehicle-card-seller--marketplace,
.orr-vehicles-wrapper--list .orr-vehicle-card-seller--for-sale {
    display: flex;
    margin: 0;
    padding: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.85em;
    color: var(--global-palette4, #6b7280);
}

/* The price and vote elements are the card's own nodes rather than generated
   cells, so they get the same squeeze-proof treatment. */
.orr-vehicles-wrapper--list .orr-for-sale-price,
.orr-vehicles-wrapper--list .orr-vehicle-card-vote {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dark .orr-vehicles-wrapper--list .orr-vehicle-card-seller--marketplace,
.dark .orr-vehicles-wrapper--list .orr-vehicle-card-seller--for-sale {
    color: var(--global-palette5, #bbb);
}

/* The list view's Vehicle column is the thumbnail. Hide every vehicle name and
   the separate, now-empty Photo header/cell so the thumbnail occupies the
   Vehicle column itself. */
.orr-vehicles-wrapper--list .orr-vehicle-listhead--photo,
.orr-vehicles-wrapper--list .orr-vehicle-listcell--vehicle,
.orr-vehicles-wrapper--list .orr-vehicle-card-title,
.orr-vehicles-wrapper--list .orr-for-sale-title {
    display: none;
}

/* The Vehicle cell is a link on the marketplace layouts. */
.orr-vehicles-wrapper--list .orr-vehicle-listcell--vehicle a {
    color: inherit;
    text-decoration: none;
}

.orr-vehicles-wrapper--list .orr-vehicle-listcell--vehicle a:hover {
    text-decoration: underline;
}

/* A for-sale row: the card's own photo / info / price become the row's columns. */
.orr-vehicles-wrapper--list .orr-for-sale-row {
    display: grid !important; /* overrides the card's stacked flex layout */
}

/* Lets the title, cells, seller and specs block be placed as row columns. */
.orr-vehicles-wrapper--list .orr-for-sale-info {
    display: contents;
}

.orr-vehicles-wrapper--list .orr-for-sale-photo {
    width: var(--orr-list-photo-w);
    height: var(--orr-list-photo-h);
    aspect-ratio: auto;
}

/* The paid-tier chip rides on that (now narrow) photo column, so it shrinks to
   stay inside it. */
.orr-vehicles-wrapper--list .orr-listing-tier {
    padding: 2px 6px;
    font-size: 9px;
}

.orr-vehicles-wrapper--list .orr-for-sale-specs {
    display: none;
}

.orr-vehicles-wrapper--list .orr-for-sale-price {
    display: flex;
    padding: 0;
}

/* The list view has no location column and already has a Price column. */
.orr-vehicles-wrapper--list .orr-for-sale-price-line,
.orr-vehicles-wrapper--list .orr-for-sale-location {
    display: none;
}

/* Same size as the other cells, but the price keeps its emphasis. */
.orr-vehicles-wrapper--list .orr-for-sale-price-value {
    font-size: 1em;
}

/* Sortable header row */
.orr-vehicles-wrapper--list .orr-vehicles-list-head {
    display: grid;
    grid-template-columns: var(--orr-list-columns);
    align-items: center;
    gap: 0 12px;
    padding: 8px 12px;
    border: 1px solid var(--global-palette6, var(--global-palette-border, #e0e0e0));
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--global-palette4, #6b7280);
}

.dark .orr-vehicles-wrapper--list .orr-vehicles-list-head {
    background: var(--global-palette2, #1e1e1e);
    border-color: var(--global-palette3, #333);
    color: var(--global-palette5, #bbb);
}

.orr-vehicles-list-head__cell {
    min-width: 0;
}

/* Two-class selector so the reset also beats `.orr-wrapper button` above. */
.orr-vehicles-list-head .orr-vehicles-list-head__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.orr-vehicles-list-head__btn:hover,
.orr-vehicles-list-head__cell.is-sorted .orr-vehicles-list-head__btn {
    color: var(--orr-ctl-accent, var(--fs-color-primary, var(--primary-color, #446084)));
}

.orr-vehicles-list-head__sort {
    font-size: 10px;
    opacity: 0.5;
}

.orr-vehicles-list-head__cell.is-sorted .orr-vehicles-list-head__sort {
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   Responsive: drop the least important column at each step — from the header and
   the rows together — so the columns stay aligned down to phone widths. Only the
   core is retemplated here; each layout keeps its own tail (and drops its extra
   columns once they no longer fit).
   -------------------------------------------------------------------------- */

/* Engine drops first. */
@media (max-width: 1200px) {
    .orr-vehicles-wrapper--list {
        --orr-list-photo-w: 112px;
        --orr-list-photo-h: 116px;
        --orr-list-core: var(--orr-list-photo-w) 46px minmax(60px, 1fr) minmax(60px, 1fr) minmax(72px, 1fr);
    }

    .orr-vehicles-wrapper--list .orr-vehicle-listcell--engine,
    .orr-vehicles-wrapper--list .orr-vehicle-listhead--engine {
        display: none;
    }
}

/* Category next, then the extra columns (VIN, seller). The tail keeps votes — or
   the asking price on a for-sale listing. */
@media (max-width: 960px) {
    .orr-vehicles-wrapper--list {
        --orr-list-photo-w: 104px;
        --orr-list-photo-h: 112px;
        --orr-list-core: var(--orr-list-photo-w) 44px minmax(58px, 1fr) minmax(58px, 1fr);
    }

    .orr-vehicles-wrapper--list.orr-vehicles-wrapper--cols-with-vin,
    .orr-vehicles-wrapper--list.orr-vehicles-wrapper--cols-with-seller {
        --orr-list-tail: 56px;
    }

    .orr-vehicles-wrapper--list.orr-vehicles-wrapper--cols-with-seller-price {
        --orr-list-tail: minmax(80px, 1fr);
    }

    .orr-vehicles-wrapper--list .orr-vehicle-listcell--category,
    .orr-vehicles-wrapper--list .orr-vehicle-listhead--category,
    .orr-vehicles-wrapper--list .orr-vehicle-listcell--vin,
    .orr-vehicles-wrapper--list .orr-vehicle-listhead--vin,
    .orr-vehicles-wrapper--list .orr-vehicle-listhead--seller,
    .orr-vehicles-wrapper--list .orr-vehicle-card-seller {
        display: none;
    }
}

/* Then Model. */
@media (max-width: 720px) {
    .orr-vehicles-wrapper--list {
        --orr-list-photo-w: 100px;
        --orr-list-photo-h: 108px;
        --orr-list-core: var(--orr-list-photo-w) 42px minmax(56px, 1fr);
    }

    .orr-vehicles-wrapper--list .orr-vehicle-listcell--model,
    .orr-vehicles-wrapper--list .orr-vehicle-listhead--model {
        display: none;
    }
}

/* Phones keep photo, make and votes (or the asking price). Year goes before
   make, and neither the thumbnail, Make nor the Like control is ever dropped. */
@media (max-width: 520px) {
    .orr-vehicles-wrapper--list {
        --orr-list-photo-w: 84px;
        --orr-list-photo-h: 88px;
        --orr-list-core: var(--orr-list-photo-w) minmax(76px, 1fr);
        --orr-list-tail: 46px;
    }

    .orr-vehicles-wrapper--list.orr-vehicles-wrapper--cols-with-vin,
    .orr-vehicles-wrapper--list.orr-vehicles-wrapper--cols-with-seller {
        --orr-list-tail: 46px;
    }

    .orr-vehicles-wrapper--list.orr-vehicles-wrapper--cols-with-seller-price {
        --orr-list-tail: minmax(64px, 1fr);
    }

    .orr-vehicles-wrapper--list .orr-vehicle-listcell--year,
    .orr-vehicles-wrapper--list .orr-vehicle-listhead--year {
        display: none;
    }
}

/* =============================================================================
   CARD DENSITY — RELAXED / COMPACT
   The second switch beside Grid/List. Relaxed is the layout as it has always
   looked; Compact is the same cards tightened up. It is one modifier class on
   the wrapper — .orr-vehicles-wrapper--compact — so it reaches the first
   render's cards and the ones AJAX appends without being repeated on them.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   COMPACT DENSITY — THE LIST VIEW
   A smaller thumbnail and slimmer top/bottom padding: the picture is the tallest
   thing in a row, so shrinking it is what shortens the row. Declared after the
   breakpoint rules above so every screen gets the smaller picture, not just the
   default one.
   -------------------------------------------------------------------------- */
.orr-vehicles-wrapper--compact.orr-vehicles-wrapper--list {
    --orr-list-photo-w: 80px;
    --orr-list-photo-h: 80px;
    /* The free listing's picture keeps its played-down size inside that track. */
    --orr-list-photo-free: calc(var(--orr-list-photo-w) * 0.7);
}

.orr-vehicles-wrapper--compact.orr-vehicles-wrapper--list .orr-vehicle-card {
    padding-top: 2px;
    padding-bottom: 2px;
}

.orr-vehicles-wrapper--compact.orr-vehicles-wrapper--list .orr-vehicles-list-head {
    padding-top: 4px;
    padding-bottom: 4px;
}

@media (max-width: 960px) {
    .orr-vehicles-wrapper--compact.orr-vehicles-wrapper--list {
        --orr-list-photo-w: 72px;
        --orr-list-photo-h: 72px;
    }
}

@media (max-width: 520px) {
    .orr-vehicles-wrapper--compact.orr-vehicles-wrapper--list {
        --orr-list-photo-w: 60px;
        --orr-list-photo-h: 60px;
    }
}

/* -----------------------------------------------------------------------------
   COMPACT DENSITY — THE CARD GRID
   The same fluid grid as Relaxed, with a smaller floor (190px instead of 235px)
   and a tighter gap, so a compact row fits about two more cards at any given
   width — six across where Relaxed shows four — and the card itself is smaller
   all round. The card's font-size carries every em-set piece (title, specs,
   price, list cells) down with it; the px-set paddings are tightened below.
   -------------------------------------------------------------------------- */
.orr-vehicles-wrapper--compact:not(.orr-vehicles-wrapper--list) .orr-vehicles-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
    gap: 12px;
}

/* The card and the px-set pieces of its frame. */
.orr-vehicles-wrapper--compact:not(.orr-vehicles-wrapper--list) .orr-vehicle-card {
    font-size: 0.85em;
}

.orr-vehicles-wrapper--compact:not(.orr-vehicles-wrapper--list) .orr-vehicle-card-title,
.orr-vehicles-wrapper--compact:not(.orr-vehicles-wrapper--list) .orr-for-sale-info {
    padding: 8px 10px 10px;
}

.orr-vehicles-wrapper--compact:not(.orr-vehicles-wrapper--list) .orr-for-sale-info {
    gap: 4px;
}

.orr-vehicles-wrapper--compact:not(.orr-vehicles-wrapper--list) .orr-vehicle-card-seller--marketplace,
.orr-vehicles-wrapper--compact:not(.orr-vehicles-wrapper--list) .orr-vehicle-card-seller--for-sale {
    font-size: 11px;
}

.orr-vehicles-wrapper--compact:not(.orr-vehicles-wrapper--list) .orr-vehicle-card-seller--marketplace {
    padding: 0 10px 4px;
}

.orr-vehicles-wrapper--compact:not(.orr-vehicles-wrapper--list) .orr-vehicle-card-specs {
    padding: 4px 10px 10px;
}

.orr-vehicles-wrapper--compact:not(.orr-vehicles-wrapper--list) .orr-vehicle-card-vote {
    padding: 4px 10px 10px;
    font-size: 11px;
}

.orr-vehicles-wrapper--compact:not(.orr-vehicles-wrapper--list) .orr-vehicle-card-seller-avatar {
    width: 18px;
    height: 18px;
}

.orr-vehicles-wrapper--compact:not(.orr-vehicles-wrapper--list) .orr-for-sale-price {
    padding: 0 10px 10px;
}

.orr-vehicles-wrapper--compact:not(.orr-vehicles-wrapper--list) .orr-for-sale-location {
    font-size: 11px;
}

.orr-vehicles-wrapper--compact:not(.orr-vehicles-wrapper--list) .orr-listing-tier {
    top: 6px;
    right: 6px;
    padding: 2px 6px;
    font-size: 9px;
}

/* =============================================================================
   ACCOUNT & SUBSCRIPTION PAGES
   ============================================================================= */

/* Account page: the heading and the link to the member's public profile on the
   left, the completeness badge holding the top right corner — the arrangement the
   member's own page gives its header (see .orr-profile-top). */
.orr-account-top {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.orr-account-top .orr-account-header {
    flex: 1 1 320px;
    min-width: 0;
}

/* Every card on the account page wears this one frame — the plan, the premium
   features and the profile form — so the columns read as a stack of the same
   kind of card. It lives here rather than in an inline style per box (where it
   used to) so the locked-feature panel can share it: on the vehicle pages that
   panel fills itself with a faint grey of its own, which here made it look like
   a different component sitting next to the plan card. */
.orr-account-section {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    background: transparent;
}

/* Account page: the plan and premium-feature cards in the left column, the profile
   form in the right one, so the page fills its width instead of being one narrow
   centered column. DOM order is visual order. */
.orr-account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 24px;
    align-items: start;
    margin-bottom: 24px;
}

/* Each column stacks its cards; the gap is the spacing between them, which is
   also why the sections no longer carry a bottom margin of their own. */
.orr-account-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* The feature panel becomes one of those cards inside a column: the same frame,
   the same padding, and no grey fill of its own. It keeps its own margin in the
   stylesheet above; inside a column the gap replaces that. */
.orr-account-col > .orr-locked-feature-panel {
    margin-bottom: 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    background: transparent;
}

/* The panel's rows are built for a full-width surface: icon, feature name and
   "upgrade" link abreast. In the account page's narrow column the link (which
   refuses to wrap) leaves the description about 140px and it breaks into a
   letter-per-line column. Stack them here the way the panel already stacks on a
   phone: name and badge first, the description under it at full width, then the
   link, indented to line up under the name. */
.orr-account-col > .orr-locked-feature-panel .orr-locked-feature-row {
    flex-wrap: wrap;
}

.orr-account-col > .orr-locked-feature-panel .orr-locked-feature-row-body {
    /* 46px = the 34px icon column + the row's 12px gap. */
    flex: 1 1 calc(100% - 46px);
}

.orr-account-col > .orr-locked-feature-panel .orr-locked-feature-row-cta {
    /* The row's own rule is `flex: 0 0 auto; white-space: nowrap` — the link is
       allowed to wrap and to shrink here, or a long one ("Upgrade to Ultimate for
       unlimited attachments") runs past the panel instead of breaking. */
    flex: 0 1 auto;
    align-self: flex-start;
    margin-left: 46px;
    white-space: normal;
}

@media (max-width: 900px) {
    .orr-account-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Subscription page: the three plan cards spread across the page, instead of
   three fixed-width cards floating in the middle of a 900px box. Three across,
   then 2 / 1 — a plain step-down, since there are only ever three cards. */
.orr-subscribe-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1024px) {
    .orr-subscribe-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .orr-subscribe-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =============================================================================
   MARKETPLACE LISTINGS — THE SELLER'S TIER ON THE CARD
   The marketplace ranks its listings by the seller's plan, so it is the listing
   that has to show that plan on the card — and it is the only listing that does.
   orr_render_vehicle_card() marks the cards of the for-sale layout alone
   ([orr_marketplace]): a paid listing gets .orr-listing-paid, a
   free one .orr-listing-free. Neither class ever reaches the all-vehicles grid, a
   profile grid or a member's garage, in either view, and no listing's photo is
   resized or recoloured in the card grid.

   A paid listing keeps its card and its picture exactly as they are — the tier is
   read off the card behind the picture. A free listing is played down in the
   compact list view instead: a smaller, greyscale thumbnail and a shorter row.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CARD GRID — A PAID LISTING'S CARD IS TINTED
   The photo is untouched; only the card's own background (and the border that
   frames it) carries the tier. The tint follows the listing's chip, so a Premium
   card and its blue chip agree, and an Ultimate card and its amber one do — the
   chip colours are .orr-listing-tier / .orr-listing-tier--ultimate above.
   -------------------------------------------------------------------------- */

.orr-vehicles-wrapper:not(.orr-vehicles-wrapper--list) .orr-listing-paid {
    background: #eef2ff;
    border-color: #c7d2fe;
}

.orr-vehicles-wrapper:not(.orr-vehicles-wrapper--list) .orr-listing-paid.orr-seller-ultimate {
    background: #fdf5e3;
    border-color: #f0dcae;
}

/* Dark theme: the same two tints, dark enough to sit behind dark-mode text. */
.dark .orr-vehicles-wrapper:not(.orr-vehicles-wrapper--list) .orr-listing-paid {
    background: #232b47;
    border-color: #3b4670;
}

.dark .orr-vehicles-wrapper:not(.orr-vehicles-wrapper--list) .orr-listing-paid.orr-seller-ultimate {
    background: #3a3122;
    border-color: #5c4a2c;
}

/* -----------------------------------------------------------------------------
   COMPACT LIST VIEW — A FREE LISTING'S ROW
   The thumbnail drops to --orr-list-photo-free while the photo's column track
   (--orr-list-photo-w) stays where it was, so a free row's columns still line up
   with the header row and with the paid rows above it. The row is shorter because
   the thumbnail is the tallest thing in it.
   -------------------------------------------------------------------------- */

.orr-vehicles-wrapper--list .orr-listing-free .orr-for-sale-photo {
    width: var(--orr-list-photo-free, 84px);
    height: var(--orr-list-photo-free, 84px);
}

/* The greyscale goes on the picture, never on the card: a filter on the card would
   grey the title, the seller, the price and the vote button with it. */
.orr-vehicles-wrapper--list .orr-listing-free .orr-for-sale-photo-img {
    filter: grayscale(1);
    opacity: 0.9;
}

/* -----------------------------------------------------------------------------
   THE RELAXED CARD GRID — A PAID AD'S TEXT READS A TOUCH LARGER
   The marketplace's paid listings already carry a tinted card and a tier chip;
   in the relaxed card grid their text is also set slightly larger, so a paid
   card carries a little more weight than a free one. It is the card's own
   font-size that moves and everything em-set inside it follows — the grid's
   columns are px, so only the text grows and the layout keeps its shape.

   The list view and the compact grid deliberately leave it out: the list view's
   rows have to stay uniform (a paid row must not sit taller than a free one),
   and the compact grid's whole point is the smaller card, so there the tier is
   read from the tint and the chip alone.

   One number, --orr-ad-lift (+10%). The px-set seller line restates it below,
   because a px font-size does not follow the card. It is deliberately more than
   a hair: at the first, gentler setting the difference was there but read as
   "unchanged" on a large 3-up card, where a ~1px change is invisible next to a
   neighbouring card.

   The tier chip (.orr-listing-tier) is deliberately left as it is: it is a label
   sitting on the photo, sized to the photo's column, and it is the one element
   only a paid listing has — growing it would not sharpen the paid/free contrast.
   -------------------------------------------------------------------------- */

.orr-vehicles-wrapper:not(.orr-vehicles-wrapper--list):not(.orr-vehicles-wrapper--compact) .orr-listing-paid {
    --orr-ad-lift: 1.10;
    font-size: calc(1em * var(--orr-ad-lift));
}

/* Card grid: the seller line is px-set there. */
.orr-vehicles-wrapper:not(.orr-vehicles-wrapper--list):not(.orr-vehicles-wrapper--compact) .orr-listing-paid .orr-vehicle-card-seller--for-sale {
    font-size: calc(13px * var(--orr-ad-lift));
}


/* =============================================================================
   LISTING PRESENTATION — STARTING VIEW, PHOTO-ONLY CARDS
   The [orr_vehicles] shortcode's `view` and `details` attributes. `view` is put
   on the wrapper by PHP (the inline hint only reconciles a saved choice), while
   `details` is a modifier class on the same wrapper. Every card — the first
   render and the ones AJAX appends — lives inside that wrapper, so one set of
   rules styles them all and no attribute has to be repeated on the cards
   themselves. The Relaxed/Compact density is a modifier on the same wrapper and
   is styled with the rest of the card density (see CARD DENSITY above).
   ============================================================================= */

/* details="false" — the card is the picture and its badges. The title, the list
   columns, the seller, the specs and the vote line are not rendered at all; the
   card's own frame goes with them, so what is left is a plain photo. */
.orr-vehicles-wrapper--no-details .orr-vehicle-card,
.dark .orr-vehicles-wrapper--no-details .orr-vehicle-card {
    background: transparent;
    border-color: transparent;
}

.orr-vehicles-wrapper--no-details .orr-vehicle-card:hover,
.orr-vehicles-wrapper--no-details .orr-vehicle-card:focus-within {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}

/* Photo-only rows in the compact list view: the details columns are gone, so the
   row is as wide as its thumbnail. */
.orr-vehicles-wrapper--list.orr-vehicles-wrapper--no-details .orr-vehicle-card,
.orr-vehicles-wrapper--list .orr-for-sale-row--photo-only {
    grid-template-columns: var(--orr-list-photo-w);
}

/* A photo-only marketplace card ([orr_marketplace] details="false"): the
   for-sale row collapses to the same square the other cards use. */
.orr-vehicles-wrapper--no-details .orr-for-sale-row--photo-only,
.dark .orr-vehicles-wrapper--no-details .orr-for-sale-row--photo-only {
    background: transparent;
    border-color: transparent;
}

/* =============================================================================
   CONTROL SYSTEM
   The theme owns the generic controls: plain `.button` elements and form fields
   are left to Flatsome's Theme Options / Customizer. What remains here is the
   geometry for the plugin's own components — the vote button, the segmented
   switches, the grouped search bar and the sorted list headers.
   ============================================================================= */

.orr-wrapper,
.orr-vehicles-wrapper,
.orr-modal-box {
    --orr-ctl-h: 40px;
    --orr-ctl-inner: calc(var(--orr-ctl-h) - 8px); /* minus 1px border + 3px padding on each side */
    --orr-ctl-radius: 4px;
    --orr-ctl-radius-inner: calc(var(--orr-ctl-radius) / 2); /* segments inside a grouped control */
    --orr-ctl-pad: 0 16px;
    --orr-ctl-font: 0.875rem;
    --orr-ctl-weight: 600;
    --orr-ctl-accent: var(--fs-color-primary, var(--primary-color, #446084));
    --orr-ctl-accent-ink: #fff;
    --orr-ctl-surface: var(--global-palette8, var(--global-palette-background, #fff));
    --orr-ctl-ink: var(--global-palette3, #1f2328);
    --orr-ctl-muted: var(--global-palette4, #333a40);
    --orr-ctl-line: var(--global-palette6, var(--global-palette-border, #e0e0e0));
}

/* Secondary controls — the same box, but neutral until they are the active
   choice. The vote button is the outline variant: gold border and label, gold
   fill once voted. */
.orr-wrapper .orr-vote-btn {
    height: var(--orr-ctl-h);
    min-height: var(--orr-ctl-h);
    padding: 0 14px;
    border: 1px solid var(--orr-ctl-accent);
    border-radius: var(--orr-ctl-radius);
    background: var(--orr-ctl-surface);
    color: var(--orr-ctl-accent);
    font-size: var(--orr-ctl-font);
    font-weight: var(--orr-ctl-weight);
    line-height: 1;
    box-sizing: border-box;
}

.orr-wrapper .orr-vote-btn.orr-voted {
    background: var(--orr-ctl-accent);
    color: var(--orr-ctl-accent-ink);
}

/* Save is the neutral variant of the same control: the box matches the Like
   button, but it stays quiet until the vehicle is saved — a bookmark is not a
   vote, and it should not compete with the Like beside it. The saved state is the
   red heart, the one colour that marks a favorite everywhere else on the page. */
.orr-wrapper .orr-fav-btn {
    height: var(--orr-ctl-h);
    min-height: var(--orr-ctl-h);
    padding: 0 14px;
    border: 1px solid var(--orr-ctl-line);
    border-radius: var(--orr-ctl-radius);
    background: var(--orr-ctl-surface);
    color: var(--orr-ctl-muted);
    font-size: var(--orr-ctl-font);
    font-weight: var(--orr-ctl-weight);
    line-height: 1;
    box-sizing: border-box;
}

.orr-wrapper .orr-fav-btn.orr-favorited {
    border-color: #e0245e;
    color: #e0245e;
    background: var(--orr-ctl-surface);
}

/* Segmented switches (Grid/List, Relaxed/Compact) — one 40px box with equally
   sized segments. The selected segment takes the theme accent; everything else
   is left to the theme / Additional CSS. */
.orr-view-toggle,
.orr-density-toggle {
    height: var(--orr-ctl-h);
    min-height: var(--orr-ctl-h);
    padding: 3px;
    border-radius: var(--orr-ctl-radius);
    box-sizing: border-box;
}

.orr-view-toggle .orr-view-toggle__btn,
.orr-density-toggle .orr-density-toggle__btn {
    height: 100%;
    min-height: 0;
    padding: 0 12px;
    border-radius: var(--orr-ctl-radius-inner);
    font-size: 0.8125rem;
    font-weight: var(--orr-ctl-weight);
    line-height: 1;
}

/* Unselected segments stay unfilled, so the accent on the selected one is the
   only fill in the group (a theme that paints bare <button> elements otherwise
   makes every segment look selected). */
.orr-view-toggle__btn:not([aria-pressed="true"]),
.orr-density-toggle__btn:not([aria-pressed="true"]) {
    background: transparent;
    color: inherit;
}

/* The selected segment is the state signal: fill it with the theme accent, the
   same colour Flatsome paints .button with, so the switch matches the buttons
   beside it. */
.orr-view-toggle__btn[aria-pressed="true"],
.orr-density-toggle__btn[aria-pressed="true"] {
    background: var(--orr-ctl-accent);
    color: var(--orr-ctl-accent-ink);
}

.orr-view-toggle__btn[aria-pressed="true"]:hover,
.orr-density-toggle__btn[aria-pressed="true"]:hover {
    color: var(--orr-ctl-accent-ink);
}

/* The search box is one grouped bar — the same object as the segmented
   switches: a bordered 40px container on the control surface, with its fields
   and its Search button sized to the height of an active segment. */
.orr-sidebar-search-form {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2px;
    height: var(--orr-ctl-h);
    padding: 3px;
    margin: 0;
    border: 1px solid var(--orr-ctl-line);
    border-radius: var(--orr-ctl-radius);
    background: var(--orr-ctl-surface);
    box-sizing: border-box;
}

.orr-sidebar-search-form .orr-sidebar-search-field {
    display: flex;
    min-width: 0;
}

.orr-sidebar-search-form .orr-sidebar-search-field:not(.orr-sidebar-search-button-field) {
    flex: 1 1 160px;
}

.orr-sidebar-search-form .orr-sidebar-search-field.orr-sidebar-search-button-field {
    flex: 0 0 auto;
}

/* The `body` prefix here matches the control rules above: both selectors then
   weigh the same and this later block wins, so the bar's fields keep the bar's
   own geometry (32px inside the 40px frame) instead of the standalone control
   height. */
body .orr-sidebar-search-form input.orr-sidebar-search-input,
body .orr-sidebar-search-form select.orr-sidebar-search-select {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: var(--orr-ctl-radius-inner);
    background: transparent;
    color: var(--orr-ctl-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    box-sizing: border-box;
}

.orr-sidebar-search-form select.orr-sidebar-search-select {
    padding-right: 6px;
}

/* The control system's ink is palette3, which this theme maps to its dark
   border. The theme's own `body.dark select` rule is less specific than the
   control rule above, so give the category select the readable palette text
   colour on a dark site. */
.dark .orr-sidebar-search-form select.orr-sidebar-search-select {
    color: var(--global-palette4, var(--global-palette-foreground, #dde3ea));
    /* Native fallback (Firefox and older Chromium): ask the browser for its
       dark control/picker chrome instead of a white OS popup. */
    color-scheme: dark;
}

.orr-sidebar-search-form .orr-sidebar-search-input::placeholder {
    color: var(--orr-ctl-muted);
    opacity: 1;
}

/* The focus ring lives inside the bar, so the bar keeps its shape. */
body .orr-sidebar-search-form input.orr-sidebar-search-input:focus,
body .orr-sidebar-search-form select.orr-sidebar-search-select:focus {
    border: 0;
    outline: none;
    box-shadow: inset 0 0 0 1px var(--orr-ctl-accent);
}

/* The Search button is the bar's active segment: gold, square, same height. */
.orr-sidebar-search-form .orr-sidebar-search-button {
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: var(--orr-ctl-radius-inner);
    background: var(--orr-ctl-accent);
    color: var(--orr-ctl-accent-ink);
    font-size: 0.8125rem;
    font-weight: var(--orr-ctl-weight);
    line-height: 1;
}

.orr-sidebar-search-form .orr-sidebar-search-button:hover {
    filter: brightness(0.92);
}

/* Phones: the bar keeps its frame and stacks its segments, each still the
   active-segment height. */
@media (max-width: 600px) {
    .orr-sidebar-search-form {
        flex-direction: column;
        flex-wrap: nowrap;
        height: auto;
        /* The bar's 2px gap is an *inline* gap on desktop; once the segments
           stack it is the only space between the keyword field, the category
           select and the Search button, and they read as one glued block. A
           little air between the stacked items separates them. */
        row-gap: 6px;
    }

    /* The desktop rule gives the two text fields a 160px flex basis. In this
       stacked column that basis becomes a 160px *height*, so the bar grew to
       372px and pushed the category select (and its dropdown) down the screen.
       The :not() selector matches the desktop rule's specificity so these
       fields size to their controls — 32px — while the button stays 40px. */
    .orr-sidebar-search-form .orr-sidebar-search-field,
    .orr-sidebar-search-form .orr-sidebar-search-field:not(.orr-sidebar-search-button-field),
    .orr-sidebar-search-form .orr-sidebar-search-field.orr-sidebar-search-button-field {
        flex: 0 0 auto;
        width: 100%;
        min-height: var(--orr-ctl-inner);
    }

    .orr-sidebar-search-form input.orr-sidebar-search-input,
    .orr-sidebar-search-form select.orr-sidebar-search-select,
    .orr-sidebar-search-form .orr-sidebar-search-button {
        height: var(--orr-ctl-inner);
        min-height: var(--orr-ctl-inner);
        width: 100%;
    }
}

/* Customizable <select> (Chrome/Edge/Brave 135+, Safari/iOS 27+): render the
   category picker inside the page rather than as an OS popup. This is what lets
   the dropdown follow the dark palette instead of Brave's white native popup.
   The closed control is kept in the native layout — label left, arrow right —
   so it still matches Firefox, which has no base-select and uses its native
   picker. */
@supports (appearance: base-select) {
    .orr-sidebar-search-form select.orr-sidebar-search-select,
    .orr-sidebar-search-form select.orr-sidebar-search-select::picker(select) {
        appearance: base-select;
    }

    .orr-sidebar-search-form select.orr-sidebar-search-select {
        /* Chrome leaves a customizable <select> as `display: block`, and the
           picker icon is a BLOCK box inside it — so the icon dropped onto a line
           of its own and the control showed the label with the arrow underneath.
           The flex row is what puts the label and the arrow back on one line;
           `space-between` then pins the arrow to the right edge. */
        display: flex;
        justify-content: space-between;
        /* base-select stretches the selected content by default, which leaves
           the label sitting high in the 32px control. Centre the label and the
           arrow vertically. */
        align-items: center;
        /* One line only. In a bar too narrow for the label, the text is clipped
           at the control's edge instead of running under the Search button. */
        white-space: nowrap;
        overflow: hidden;
    }

    .orr-sidebar-search-form select.orr-sidebar-search-select::picker-icon {
        margin-left: 0;
        color: var(--orr-ctl-muted, var(--global-palette4, #6b7280));
        font-size: 11px;
    }

    .orr-sidebar-search-form select.orr-sidebar-search-select::picker(select) {
        margin-top: 4px;
        padding: 4px;
        border: 1px solid var(--orr-ctl-line, var(--global-palette6, #e0e0e0));
        border-radius: var(--orr-ctl-radius, 4px);
        background: var(--global-palette8, var(--global-palette-background, #fff));
        color: var(--global-palette4, var(--global-palette-foreground, #222));
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
        max-width: calc(100vw - 24px);
        max-height: 60vh;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .orr-sidebar-search-form select.orr-sidebar-search-select option {
        padding: 8px 10px;
        border-radius: var(--orr-ctl-radius-inner, 2px);
        color: var(--global-palette4, var(--global-palette-foreground, #222));
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .orr-sidebar-search-form select.orr-sidebar-search-select option:hover,
    .orr-sidebar-search-form select.orr-sidebar-search-select option:focus {
        background: var(--global-palette7, var(--global-palette-background, #f8f9fa));
    }

    .orr-sidebar-search-form select.orr-sidebar-search-select option:checked {
        background: var(--orr-ctl-accent);
        color: var(--orr-ctl-accent-ink);
    }
}

/* =============================================================================
   LISTING FILTERS — search="left" / search="right"
   The listing's own filter block — its search box (keyword + category + Search),
   the quick-filter pills under it and the Reset link — as a column beside the
   cards instead of above them. `search` is an attribute of the listing itself
   ([orr_vehicles], [orr_marketplace], [orr_profile], [orr_trips]), so the
   listing owns every layout and nothing here depends on the theme, a widget area
   or a page builder placing the search. Leaving `search` out keeps the toolbar
   rows this block has always been; only the two columns need rules of their own.
   ============================================================================= */

/* The cards take the wide column, the filters the narrow one, on the side the
   listing asked for. The column's width is one custom property, so a site can
   tune the split without editing the plugin: `--orr-search-w: 300px` on the
   listing, its page or `:root`. The floor keeps the controls usable. */
.orr-vehicles-layout--search-left,
.orr-vehicles-layout--search-right {
    display: grid;
    align-items: start;
    gap: 24px;
}

.orr-vehicles-layout--search-left {
    grid-template-columns: minmax(200px, var(--orr-search-w, 260px)) minmax(0, 1fr);
}

.orr-vehicles-layout--search-right {
    grid-template-columns: minmax(0, 1fr) minmax(200px, var(--orr-search-w, 260px));
}

/* The aside is written first in the markup — that is what puts the controls above
   the cards when the two columns stack on a small screen — so on the right the
   two columns are placed explicitly instead of left to auto-placement. On the
   left the markup's own order is already the one that is wanted. */
.orr-vehicles-layout--search-right .orr-vehicles-results {
    grid-column: 1;
    grid-row: 1;
}

.orr-vehicles-layout--search-right .orr-vehicles-filters {
    grid-column: 2;
    grid-row: 1;
}

/* The cards measure themselves against this column, so it must be allowed to be
   narrower than its content — the grid's own auto-fill tracks do the rest. */
.orr-vehicles-results {
    min-width: 0;
}

/* The column: one stack — the search box, then the pills. No card of its own:
   the grouped search bar already draws the frame, exactly as it does in the
   toolbar. */
.orr-vehicles-filters {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.orr-vehicles-filters .orr-sidebar-search {
    flex: none;
    margin: 0;
    min-width: 0;
}

/* The grouped bar becomes a stack: a keyword field, a category select and the
   Search button, each the column's full width. Same geometry the phone layout
   gives the toolbar's bar, so the two read as one control.
   `row-gap` is what keeps the three items apart here: the bar's 2px gap is an
   inline gap on the desktop toolbar, and once the segments stack it turns into
   the only space between them — the three read as one glued block. */
.orr-vehicles-filters .orr-sidebar-search-form {
    flex-direction: column;
    flex-wrap: nowrap;
    height: auto;
    row-gap: 6px;
}

.orr-vehicles-filters .orr-sidebar-search-field,
.orr-vehicles-filters .orr-sidebar-search-field:not(.orr-sidebar-search-button-field),
.orr-vehicles-filters .orr-sidebar-search-field.orr-sidebar-search-button-field {
    flex: 0 0 auto;
    width: 100%;
    min-height: var(--orr-ctl-inner);
}

/* Written through the form so these win over the grouped bar's own field sizing
   (the fields fill the 40px bar there; here each is a control of its own). */
.orr-vehicles-filters .orr-sidebar-search-form input.orr-sidebar-search-input,
.orr-vehicles-filters .orr-sidebar-search-form select.orr-sidebar-search-select,
.orr-vehicles-filters .orr-sidebar-search-form .orr-sidebar-search-button {
    width: 100%;
    height: var(--orr-ctl-inner);
    min-height: var(--orr-ctl-inner);
}

/* The pills stack down the column instead of running along a row: each takes the
   column's width and left-aligns, so the names line up. A long category name
   wraps here (nowrap would push it past the column's edge). */
.orr-vehicles-filters .orr-listing-pills-row,
.orr-vehicles-filters .orr-listing-pills-row--column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    margin: 0;
}

.orr-vehicles-filters .orr-listing-pills {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.orr-vehicles-filters .orr-listing-pills__label {
    flex: none;
}

.orr-vehicles-filters .orr-listing-pill {
    justify-content: flex-start;
    white-space: normal;
}

/* Reset — the secondary action the filter block offers once something is
   filtered: accent outline, surface fill, accent ink, and the accent fill on
   hover/focus. It is a link (see orr_get_vehicle_filters_reset_url()), so it
   never resubmits the form and re-applies the fields. */
.orr-filters__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--orr-ctl-h, 40px);
    min-height: var(--orr-ctl-h, 40px);
    padding: var(--orr-ctl-pad, 0 16px);
    margin: 0;
    border: 1px solid var(--orr-ctl-accent, var(--fs-color-primary, #446084));
    border-radius: var(--orr-ctl-radius, 4px);
    background: var(--orr-ctl-surface, #fff);
    color: var(--orr-ctl-accent, var(--fs-color-primary, #446084));
    font-family: inherit;
    font-size: var(--orr-ctl-font, 0.875rem);
    font-weight: var(--orr-ctl-weight, 600);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.orr-filters__reset:hover,
.orr-filters__reset:focus-visible {
    border-color: var(--orr-ctl-accent, var(--fs-color-primary, #446084));
    background: var(--orr-ctl-accent, var(--fs-color-primary, #446084));
    color: var(--orr-ctl-accent-ink, #fff);
    text-decoration: none;
}

.orr-filters__reset:focus-visible {
    outline: 2px solid var(--orr-ctl-accent, var(--fs-color-primary, #446084));
    outline-offset: 2px;
}

/* In the column it closes the stack, as wide as the controls above it. Above the
   cards it keeps its own width, at the end of the pills row. */
.orr-vehicles-filters .orr-filters__reset {
    width: 100%;
}

/* Under 900px both columns give way, whichever side was asked for: the filters go
   back above the cards — the listing's default layout — on the widths where a
   column would cost the card grid one. Their controls go back to the shapes the
   toolbar gives them there too: the pills run along a wrapping row, and the
   Search bar is the normal horizontal bar (a phone still stacks it, exactly as it
   does in the toolbar). */
@media (max-width: 900px) {
    .orr-vehicles-layout--search-left,
    .orr-vehicles-layout--search-right {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    /* Back to auto-placement, which is the markup's order: filters, then cards. */
    .orr-vehicles-layout--search-right .orr-vehicles-results,
    .orr-vehicles-layout--search-right .orr-vehicles-filters {
        grid-column: auto;
        grid-row: auto;
    }

    .orr-vehicles-filters .orr-listing-pills-row,
    .orr-vehicles-filters .orr-listing-pills-row--column,
    .orr-vehicles-filters .orr-listing-pills {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .orr-vehicles-filters .orr-listing-pill,
    .orr-vehicles-filters .orr-filters__reset {
        width: auto;
    }
}

/* Phones stack the bar under the keyword field on their own (see the CONTROL
   SYSTEM's 600px block), so the bar only goes back to a row here. */
@media (min-width: 601px) and (max-width: 900px) {
    .orr-vehicles-filters .orr-sidebar-search-form {
        flex-direction: row;
        flex-wrap: nowrap;
        height: var(--orr-ctl-h);
    }

    .orr-vehicles-filters .orr-sidebar-search-field,
    .orr-vehicles-filters .orr-sidebar-search-field:not(.orr-sidebar-search-button-field) {
        flex: 1 1 160px;
        width: auto;
    }

    .orr-vehicles-filters .orr-sidebar-search-field.orr-sidebar-search-button-field {
        flex: 0 0 auto;
        width: auto;
    }

    .orr-vehicles-filters .orr-sidebar-search-form input.orr-sidebar-search-input,
    .orr-vehicles-filters .orr-sidebar-search-form select.orr-sidebar-search-select,
    .orr-vehicles-filters .orr-sidebar-search-form .orr-sidebar-search-button {
        width: 100%;
        height: 100%;
    }
}

/* Sortable list headers are controls too: square, and gold when they hold the
   sort rather than the theme's link blue. */
/* Sortable list headers are controls too: square, and gold when they hold the
   sort rather than the theme's link blue. */
.orr-vehicles-list-head,
.orr-vehicles-list-head__cell,
.orr-vehicles-list-head .orr-vehicles-list-head__btn {
    border-radius: var(--orr-ctl-radius);
}

.orr-vehicles-list-head__btn:hover,
.orr-vehicles-list-head__cell.is-sorted .orr-vehicles-list-head__btn {
    color: var(--orr-ctl-accent);
}

/* Icon-only controls keep their size but lose their curves. */
.orr-modal-close,
.orr-lightbox-close,
.orr-slider-arrow {
    border-radius: var(--orr-ctl-radius);
}

/* =============================================================================
   SMALL RADIUS — containers
   Controls read their corner from --orr-ctl-radius (4px); these are the surfaces
   they sit in, so they share it. Pills (badges, tier chips) and circles
   (avatars, dots, icon buttons) keep their own shapes.
   ============================================================================= */

.orr-wrapper,
.orr-placeholder,
.orr-vehicle-photo-column,
.orr-vehicle-card-vote-btn,
.orr-modal-box,
.orr-modal-loading,
.orr-gauge-pop__panel,
.orr-locked-feature,
.orr-locked-feature-panel,
.orr-locked-feature-row,
.orr-vehicle-doc-preview,
.orr-account-section,
.orr-account-col > .orr-locked-feature-panel {
    border-radius: var(--orr-ctl-radius, 4px);
}

/* =============================================================================
   VEHICLE COMMENTS
   ============================================================================= */

/* The theme's comments container, not the card's comment section.
   orr_render_vehicle_comments() prints the list and the form inside the card,
   and comments_template() is pointed at templates/comments-none.php on these
   pages so it cannot print a second copy — which leaves GeneratePress's own
   .comments-area wrapper behind as an empty shell. It is not invisible: GP gives
   .comments-area a background and padding (and the child theme a dark surface),
   so the shell shows as a blank shaded box under the card.
   `:empty` cannot do this job — the wrapper keeps the whitespace around the
   template call as text nodes — so the container is hidden on vehicle pages
   outright. Every other post type keeps its comments area untouched. */
body.single-vehicle .comments-area,
body.single-trip .comments-area {
    display: none;
}

/* Same divider and vertical rhythm as the Service Records and Documents
   sections, so the three read as one stack of rows in the card. */
.orr-vehicle-comments,
.orr-trip-comments {
    border-top: 1px solid var(--orr-wrapper-border, var(--global-palette6, var(--global-palette-border, #e0e0e0)));
    padding: 12px 0 20px;
}

/* The shared .orr-section-header already supplies the 20px side inset, so the
   comments' own content is inset here to line up with it rather than twice. */
.orr-comments-body {
    padding: 0 20px;
}

/* .orr-section-empty carries its own inset for the sections whose body is not
   padded; inside this body it would be indented twice. */
.orr-comments-body .orr-section-empty {
    padding: 0;
}

.orr-comment-count {
    font-weight: 400;
    color: var(--global-palette5, #9ca3af);
    font-size: 0.85em;
}

/* The Cancel reply link that comment-reply.js reveals while a member answers a
   comment. The form has no heading any more, so the link needs its own row. */
.orr-comment-cancel {
    margin-bottom: 8px;
}

.orr-comment-cancel:empty {
    display: none;
}

.orr-comment-cancel a {
    font-size: 0.875rem;
    color: var(--fs-color-primary, var(--primary-color, #446084));
    text-decoration: none;
}

.orr-comment-cancel a:hover {
    text-decoration: underline;
}

.orr-comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Anchored on the section ID and the element so the theme's own comment-list
   rules (often written as .comment-list li.comment or #comments …) cannot zero
   the padding and leave the avatar sitting on the separator drawn under the
   previous entry. Slightly more room on top than below. */
#orr-vehicle-comments .orr-comment-list li.orr-comment,
#orr-trip-comments .orr-comment-list li.orr-comment {
    padding: 20px 0 16px;
    border-bottom: 1px solid var(--global-palette6, #e0e0e0);
}

#orr-vehicle-comments .orr-comment-list li.orr-comment:last-child,
#orr-trip-comments .orr-comment-list li.orr-comment:last-child {
    border-bottom: none;
}

.orr-comment-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.orr-comment-avatar {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* The owner of an anonymous listing is nobody in its thread: no photo, no
   name, no profile link. The placeholder is the same secret mark the listing's
   Owner row uses, so the two read as one decision. The 48px square (36px on a
   phone) comes from .orr-comment-avatar above. */
.orr-comment-avatar--anonymous {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--global-palette7, #f1f5f9);
    color: var(--global-palette5, #6b7280);
}

.dark .orr-comment-avatar--anonymous {
    background: var(--global-palette3, #2b2f36);
    color: var(--global-palette5, #bbb);
}

/* Name/time, text, moderation note and Reply all sit in this column, to the
   right of the avatar. */
.orr-comment-main {
    flex: 1 1 auto;
    min-width: 0;
}

.orr-comment-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.orr-comment-author-name {
    font-style: normal;
    font-weight: 600;
    color: var(--global-palette4, #333);
    font-size: 0.95em;
}

.orr-comment-author-name a {
    color: inherit;
    text-decoration: none;
}

.orr-comment-author-name a:hover {
    color: var(--fs-color-primary, var(--primary-color, #446084));
}

.orr-comment-time {
    font-size: 0.8em;
    color: var(--global-palette5, #6b7280);
}

.orr-comment-content {
    margin-top: 6px;
    line-height: 1.6;
    color: var(--global-palette4, #333);
    word-wrap: break-word;
}

.orr-comment-content p {
    margin: 0 0 8px;
}

.orr-comment-content p:last-child {
    margin-bottom: 0;
}

.orr-comment-awaiting-moderation {
    font-size: 0.85em;
    color: var(--global-palette5, #6b7280);
    font-style: italic;
    margin-top: 8px;
}

.orr-comment-actions {
    margin-top: 8px;
}

.orr-comment-reply a {
    font-size: 0.85em;
    color: var(--fs-color-primary, var(--primary-color, #446084));
    text-decoration: none;
}

.orr-comment-reply a:hover {
    text-decoration: underline;
}

/* Comment form */
.orr-post-comments .comment-respond {
    margin-top: 4px;
}

.orr-comment-form-field {
    margin-bottom: 16px;
}

/* Scoped with the section ID so a theme rule written against #comment (an ID
   beats the class alone) cannot repaint the textarea. */
.orr-post-comments .orr-comment-form-field textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid var(--global-palette6, #e0e0e0);
    border-radius: var(--orr-ctl-radius, 4px);
    background: var(--global-palette8, #fff);
    color: var(--global-palette4, #333);
    font-family: inherit;
    font-size: 0.95em;
    line-height: 1.5;
    box-sizing: border-box;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.orr-post-comments .orr-comment-form-field textarea:focus {
    outline: none;
    border-color: var(--fs-color-primary, var(--primary-color, #446084));
    box-shadow: 0 0 0 3px rgba(68, 96, 132, 0.15);
}

.orr-comment-form-submit {
    margin-top: 8px;
}

.orr-comment-login-prompt {
    padding: 16px 0;
    text-align: center;
    color: var(--global-palette5, #6b7280);
}

.orr-comment-login-prompt p {
    margin: 0;
}

.orr-comment-login-prompt a {
    color: var(--fs-color-primary, var(--primary-color, #446084));
    font-weight: 600;
    text-decoration: none;
}

.orr-comment-login-prompt a:hover {
    text-decoration: underline;
}

/* Nested replies */
.orr-comment-list .children {
    list-style: none;
    margin: 16px 0 0 56px;
    padding: 0;
    border-left: 2px solid var(--global-palette6, #e0e0e0);
    padding-left: 16px;
}

#orr-vehicle-comments .orr-comment-list .children li.orr-comment,
#orr-trip-comments .orr-comment-list .children li.orr-comment {
    padding: 14px 0 12px;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .orr-comments-body {
        padding-left: 12px;
        padding-right: 12px;
    }

    .orr-comment-avatar {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }
    
    .orr-comment-list .children {
        margin-left: 24px;
        padding-left: 12px;
    }
    
    .orr-post-comments .orr-comment-form-field textarea {
        min-height: 80px;
    }
}


/* =============================================================================
   TRIPS
   A member's off-road trip: a cover-image grid on [orr_trips],
   and a photo gallery + description + comment thread on its single page.
   ============================================================================= */

/* Single trip — owner's edit/delete controls */
.orr-trip .orr-trip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

/* Gallery */
.orr-trip-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin: 0 0 16px;
}

.orr-trip-photo {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--orr-ctl-radius, 4px);
    background: var(--global-palette7, var(--global-palette-background, #f8f9fa));
    text-decoration: none;
}

.orr-trip-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.orr-trip-photo:hover img {
    transform: scale(1.03);
}

.orr-trip-gallery > .orr-section-empty {
    grid-column: 1 / -1;
    padding: 0;
}

/* Description */
.orr-trip-description {
    border-top: 1px solid var(--orr-wrapper-border, var(--global-palette6, var(--global-palette-border, #e0e0e0)));
    padding: 16px 0;
    line-height: 1.65;
    color: var(--global-palette4, #333);
    overflow-wrap: anywhere;
}

.orr-trip-description > :first-child {
    margin-top: 0;
}

.orr-trip-description > :last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .orr-trip-gallery {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}

/* =============================================================================
   TABS — one component, used by the member page and the vehicle page
   A tab bar with item counters and one panel per tab. The server renders every
   panel (so each listing/section keeps its own state); the script only shows one
   at a time. The rules are scoped to `.orr-tabs` so they beat a theme's bare
   `button` margins and resets without needing a page-specific wrapper class.
   ============================================================================= */

.orr-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 20px 0 16px;
    border-bottom: 1px solid var(--global-palette6, var(--global-palette-border, #e0e0e0));
}

.orr-tabs .orr-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 -1px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--orr-ctl-radius, 4px) var(--orr-ctl-radius, 4px) 0 0;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.orr-tabs .orr-tab:focus-visible {
    outline: 2px solid var(--orr-ctl-accent, var(--fs-color-primary, #446084));
    outline-offset: -2px;
}

.orr-tabs .orr-tab.is-active {
    border-color: var(--global-palette6, var(--global-palette-border, #e0e0e0));
    box-shadow: inset 0 3px 0 var(--orr-ctl-accent, var(--fs-color-primary, #446084));
}

.orr-tabs .orr-tab__count {
    min-width: 1.6em;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.75em;
    font-weight: 700;
    text-align: center;
}

/* Phones: drop the tab icons and tighten padding and type. At 393px (iPhone 15)
   the bar is 359px wide and the member page's two tabs need 379px with their
   icons — "My Trips" would wrap onto a line of its own — so the glyph is
   the first thing to go (it and its 8px gap free ~48px). The vehicle page has
   four tabs, so the same tightening brings it from three rows to two. The
   tablist's flex-wrap handles anything narrower still. */
@media (max-width: 520px) {
    .orr-tabs .orr-tab {
        gap: 5px;
        padding: 9px 9px;
        font-size: 0.85rem;
    }

    .orr-tabs .orr-tab > i {
        display: none;
    }
}

.orr-tab-panel {
    padding-top: 4px;
}

.orr-tab-panel[hidden] {
    display: none;
}

/* The trip toolbar deliberately has no action-margin override: its Add
   Trip button and the Vehicles tab's Add Vehicle button both take
   `.orr-profile .orr-vehicles-toolbar .orr-vehicles-toolbar__action` above, so
   the gap to the search row is identical on both tabs. */

.dark .orr-tabs {
    border-bottom-color: var(--global-palette3, #333);
}

.dark .orr-tabs .orr-tab.is-active {
    border-color: var(--global-palette3, #333);
}

/* --- The vehicle page's tabbed sections -----------------------------------
   The card's block below the photo/info row. Each panel holds one section, so
   the stacked blocks' own top border and vertical padding move up to this
   wrapper, and the section headers keep their 20px inset (the bar takes it too,
   so labels, buttons, tables and empty states all start on the same line). */

.orr-vehicle-sections {
    border-top: 1px solid var(--orr-wrapper-border, var(--global-palette6, var(--global-palette-border, #e0e0e0)));
    padding: 12px 0 20px;
}

.orr-vehicle-sections .orr-tabs {
    margin: 0 20px 16px;
}

.orr-vehicle-sections .orr-vehicle-services,
.orr-vehicle-sections .orr-vehicle-documents,
.orr-vehicle-sections .orr-vehicle-reminders,
.orr-vehicle-sections .orr-vehicle-comments {
    border-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Reminders — empty state and the delivery explanation beneath it. */
.orr-vehicle-reminders .orr-section-empty i {
    margin-right: 4px;
    color: var(--orr-ctl-accent, var(--fs-color-primary, #446084));
}

.orr-reminder-intro {
    margin: 6px 0 0;
    padding: 0 20px;
    font-size: 0.9em;
    color: var(--global-palette5, #9ca3af);
}

/* Preset badge shown beside a reminder's text (mirrors the service-type badge) */
.orr-reminder-preset-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--global-palette7, #f1f5f9);
    color: var(--global-palette5, #334155);
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

.orr-reminder-preset-badge i {
    font-size: 0.9em;
}

/* Recurrence note beside a repeating reminder ("Every 6 months") */
.orr-reminder-recurrence {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.75em;
    color: var(--global-palette5, #64748b);
    white-space: nowrap;
    vertical-align: middle;
}

.orr-reminder-recurrence i {
    margin-right: 3px;
    font-size: 0.9em;
}

/* Delivery state: sent is muted, due stands out, upcoming is neutral. */
.orr-reminder-status {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.orr-reminder-status--upcoming {
    background: var(--global-palette7, #f1f5f9);
    color: var(--global-palette5, #334155);
}

.orr-reminder-status--due {
    background: #fef3c7;
    color: #92400e;
}

.orr-reminder-status--sent {
    background: #dcfce7;
    color: #166534;
}

/* The modal's delivery note — the reminder itself is channel-agnostic, so this
   line explains today's channel without becoming part of the data model. */
.orr-reminder-delivery-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 4px;
    background: var(--global-palette8, #f8fafc);
    color: var(--global-palette5, #475569);
    font-size: 0.9em;
    line-height: 1.4;
}

.orr-reminder-delivery-note i {
    margin-top: 2px;
    color: var(--orr-ctl-accent, var(--fs-color-primary, #446084));
}

/* =============================================================================
   TRIPS TAB — the shared grid/list layout with trip columns
   The cards are .orr-vehicle-card elements, so the list view's row mechanics
   (media as contents, .orr-vehicle-listcell columns, stretched card link) are
   inherited. Only the column set differs: thumbnail | Trip | Category |
   Description | Photos | Comments.
   ============================================================================= */

.orr-vehicles-wrapper--list.orr-vehicles-wrapper--cols-trips {
    /* Thumbnail/Trip | Category | Description | Photos | Comments */
    --orr-list-columns: var(--orr-list-photo-w) minmax(110px, 1.25fr) minmax(90px, 0.9fr) minmax(150px, 2fr) 64px 76px;
}

/* The all-users page adds the member, so the row ends with a Member track. */
.orr-vehicles-wrapper--list.orr-vehicles-wrapper--cols-trip-members {
    /* Thumbnail/Trip | Category | Description | Photos | Comments | Member */
    --orr-list-columns: var(--orr-list-photo-w) minmax(110px, 1.15fr) minmax(90px, 0.8fr) minmax(140px, 1.8fr) 60px 72px minmax(90px, 0.9fr);
}

/* A vehicle row hides its title (the thumbnail stands in for it); a trip
   keeps its name, so the row reads at a glance. The photo header is shown too,
   so the six header cells line up with the six row tracks. */
.orr-vehicles-wrapper--cols-trips.orr-vehicles-wrapper--list .orr-vehicle-listhead--photo,
.orr-vehicles-wrapper--cols-trips.orr-vehicles-wrapper--list .orr-vehicle-card-title {
    display: block;
    overflow-wrap: anywhere;
}

/* Grid-only card details: description excerpt and counts. */
.orr-trip-card-excerpt {
    margin: 0 0 6px;
    font-size: 0.85em;
    line-height: 1.5;
    color: var(--global-palette4, #555);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The photo / comment counts, shared by trip cards and the all-vehicles
   cards' specs block so the two read identically. */
.orr-trip-card-meta,
.orr-vehicle-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 0.78em;
    color: var(--global-palette5, #9ca3af);
}

.orr-trip-card-meta span,
.orr-vehicle-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Empty state is a grid child on its own row. */
.orr-trips-grid > .orr-section-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
}

/* Responsive: drop the least identifying column first. The thumbnail and the
   trip name are never dropped; the category goes last because it is what
   the filter row is about. */
@media (max-width: 960px) {
    .orr-vehicles-wrapper--list.orr-vehicles-wrapper--cols-trips {
        --orr-list-columns: var(--orr-list-photo-w) minmax(110px, 1.25fr) minmax(90px, 0.9fr) 64px 76px;
    }

    .orr-vehicles-wrapper--cols-trips.orr-vehicles-wrapper--list .orr-vehicle-listcell--description,
    .orr-vehicles-wrapper--cols-trips.orr-vehicles-wrapper--list .orr-vehicle-listhead--description {
        display: none;
    }

    /* Same drop, one extra Member track. */
    .orr-vehicles-wrapper--list.orr-vehicles-wrapper--cols-trip-members {
        --orr-list-columns: var(--orr-list-photo-w) minmax(100px, 1.1fr) minmax(80px, 0.75fr) 58px 70px minmax(84px, 0.85fr);
    }
}

@media (max-width: 720px) {
    .orr-vehicles-wrapper--list.orr-vehicles-wrapper--cols-trips {
        --orr-list-columns: var(--orr-list-photo-w) minmax(100px, 1fr) minmax(80px, 0.8fr) 76px;
    }

    .orr-vehicles-wrapper--cols-trips.orr-vehicles-wrapper--list .orr-vehicle-listcell--photos,
    .orr-vehicles-wrapper--cols-trips.orr-vehicles-wrapper--list .orr-vehicle-listhead--photos {
        display: none;
    }

    .orr-vehicles-wrapper--list.orr-vehicles-wrapper--cols-trip-members {
        --orr-list-columns: var(--orr-list-photo-w) minmax(100px, 1fr) minmax(80px, 0.75fr) 70px minmax(84px, 0.85fr);
    }
}

@media (max-width: 520px) {
    .orr-vehicles-wrapper--list.orr-vehicles-wrapper--cols-trips {
        --orr-list-columns: var(--orr-list-photo-w) minmax(90px, 1fr);
    }

    .orr-vehicles-wrapper--cols-trips.orr-vehicles-wrapper--list .orr-vehicle-listcell--comments,
    .orr-vehicles-wrapper--cols-trips.orr-vehicles-wrapper--list .orr-vehicle-listhead--comments,
    .orr-vehicles-wrapper--cols-trips.orr-vehicles-wrapper--list .orr-vehicle-listcell--category,
    .orr-vehicles-wrapper--cols-trips.orr-vehicles-wrapper--list .orr-vehicle-listhead--category {
        display: none;
    }

    .orr-vehicles-wrapper--list.orr-vehicles-wrapper--cols-trip-members {
        --orr-list-columns: var(--orr-list-photo-w) minmax(80px, 1fr) minmax(70px, 0.7fr);
    }
}

/* =============================================================================
   TRIP CATEGORY
   The single trip page's category pill (it links to the owner's filtered
   Trips tab) and the category on the [orr_trips] card.
   ============================================================================= */

.orr-trip-category-row {
    margin: 0 0 16px;
}

.orr-trip-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--global-palette6, var(--global-palette-border, #e0e0e0));
    border-radius: 999px;
    background: var(--global-palette7, var(--global-palette-background, #f3f4f6));
    color: var(--global-palette4, #4b5563);
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

a.orr-trip-category:hover,
a.orr-trip-category:focus-visible {
    border-color: var(--orr-ctl-accent, var(--fs-color-primary, var(--primary-color, #446084)));
    color: var(--orr-ctl-accent, var(--fs-color-primary, var(--primary-color, #446084)));
}

.dark .orr-trip-category {
    background: var(--global-palette2, #1e1e1e);
    border-color: var(--global-palette3, #333);
    color: var(--global-palette5, #bbb);
}

/* Vehicles tagged on a trip — one chip per vehicle, in the category row's
   shape, each linking to that vehicle's page. */
.orr-trip-vehicles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0 0 16px;
}

.orr-trip-vehicles__label {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--global-palette5, #6b7280);
}

.orr-trip-vehicle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--global-palette6, var(--global-palette-border, #e0e0e0));
    border-radius: 999px;
    background: var(--global-palette7, var(--global-palette-background, #f3f4f6));
    color: var(--global-palette4, #4b5563);
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.orr-trip-vehicle:hover,
.orr-trip-vehicle:focus-visible {
    border-color: var(--orr-ctl-accent, var(--fs-color-primary, var(--primary-color, #446084)));
    color: var(--orr-ctl-accent, var(--fs-color-primary, var(--primary-color, #446084)));
}

.dark .orr-trip-vehicle {
    background: var(--global-palette2, #1e1e1e);
    border-color: var(--global-palette3, #333);
    color: var(--global-palette5, #bbb);
}

/* =============================================================================
   ALL-USERS TRIPS LISTING ([orr_trips])
   ============================================================================= */

/* The result count under the toolbar. */
.orr-trips-registry__count {
    margin: 0 0 12px;
    font-size: 0.85em;
    color: var(--global-palette5, #6b7280);
}

/* The member's name on a card in the grid view: the trip card's author
   line, and the same line in the all-vehicles card's specs block (the Seller
   column carries the name in list view). */
.orr-trip-card-author,
.orr-vehicle-card-seller--registry {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    font-size: 0.8em;
    color: var(--global-palette5, #6b7280);
}

.orr-trip-card-author-avatar,
.orr-vehicle-card-seller--registry .orr-vehicle-card-seller-avatar {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 50%;
}

.dark .orr-trips-registry__count,
.dark .orr-trip-card-author,
.dark .orr-vehicle-card-seller--registry,
.dark .orr-vehicle-card-meta {
    color: var(--global-palette5, #bbb);
}


/* =============================================================================
   ACTIVITY FEED ([orr_feed])
   ============================================================================= */

/* One colour set for the whole feed, per scheme — the same role the other
   sections' variables play. The wrapper's own border/padding come from
   .orr-wrapper. */
.orr-feed {
    --orr-feed-ink: var(--global-palette4, #1f2937);
    --orr-feed-muted: var(--global-palette5, #6b7280);
    --orr-feed-line: var(--global-palette6, var(--global-palette-border, #e5e7eb));
    --orr-feed-surface: var(--global-palette7, var(--global-palette-background, #f8fafc));
    --orr-feed-card: var(--global-palette8, var(--global-palette-background, #fff));
}

/* .orr-section-header carries a 20px side inset for sections that sit outside
   a wrapper. The feed is inside one, so it takes the wrapper's padding alone. */
.orr-feed .orr-section-header {
    padding: 0;
    margin: 0 0 12px;
}

.orr-feed__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The list is an <ol> and each entry an <li>, so the theme's own list styling
   has to be switched off on both levels — a theme that marks its lists would
   otherwise put a number or a bullet in front of every avatar. */
.orr-feed__list,
.orr-feed__item {
    list-style: none;
}

/* The "N new updates" button. New entries are held here instead of being
   prepended out from under a reader who has scrolled into the feed (see the
   `auto` attribute and public/js/orr-feed.js). Sticky, not fixed, so it stays
   with the feed rather than floating over the whole page. The .orr-feed prefix
   is what beats .orr-wrapper button's own margin override. */
.orr-feed .orr-feed__new {
    position: sticky;
    top: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto 12px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--orr-ctl-accent, var(--fs-color-primary, var(--primary-color, #446084)));
    color: #fff;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* `display: flex` would otherwise defeat the button's own hidden attribute. */
.orr-feed__new[hidden] {
    display: none;
}

.orr-feed__new:hover,
.orr-feed__new:focus-visible {
    filter: brightness(1.08);
}

.orr-feed__item {
    display: flex;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--orr-feed-line);
}

.orr-feed__item:first-child {
    border-top: 0;
    padding-top: 2px;
}

.orr-feed__avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}

.orr-feed__avatar-img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* An anonymous listing (or its owner commenting on it) shows the secret icon
   in place of an avatar — no photo, no name, no profile link. */
.orr-feed__avatar--anonymous {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--orr-feed-surface);
    color: var(--orr-feed-muted);
}

.orr-feed__body {
    flex: 1 1 auto;
    min-width: 0;
}

.orr-feed__headline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    margin: 0 0 8px;
    font-size: 0.9em;
    line-height: 1.45;
    color: var(--orr-feed-muted);
}

.orr-feed__actor {
    font-weight: 600;
    color: var(--orr-feed-ink);
    text-decoration: none;
}

a.orr-feed__actor:hover,
a.orr-feed__actor:focus {
    text-decoration: underline;
}

.orr-feed__verb {
    color: var(--orr-feed-muted);
}

/* The time sits at the far right of the byline; on a narrow screen it wraps
   onto its own line instead of squeezing the sentence. */
.orr-feed__time {
    margin-left: auto;
    font-size: 0.86em;
    color: var(--orr-feed-muted);
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Vehicle-added entry
   -------------------------------------------------------------------------- */

.orr-feed__card {
    display: flex;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--orr-feed-line);
    border-radius: 12px;
    background: var(--orr-feed-card);
}

.orr-feed__thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 72px;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: var(--orr-feed-surface);
}

.orr-feed__thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

.orr-feed__thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 24px;
    color: var(--orr-feed-muted);
}

.orr-feed__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.orr-feed__title {
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.orr-feed__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 0.8em;
    color: var(--orr-feed-muted);
}

.orr-feed__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* A marketplace listing says so, priced from the same `_orr_price` meta the
   marketplace cards read, so a for-sale entry cannot disagree with the listing
   it links to. It leads the meta line, ahead of the category. */
.orr-feed__sale {
    padding: 2px 8px;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-weight: 600;
}

.dark .orr-feed__sale {
    border-color: #166534;
    background: #14532d;
    color: #bbf7d0;
}


/* -----------------------------------------------------------------------------
   Trip entry
   -------------------------------------------------------------------------- */

/* The trip's description excerpt, under its category/counts line: two lines at
   most, so a long write-up cannot turn one feed entry into a wall of text. */
.orr-feed__excerpt {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 0.85em;
    line-height: 1.45;
    color: var(--orr-feed-muted);
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* The vehicles tagged on a trip, named in the meta line. A trip can tag several
   of them, so the chip wraps its own text rather than widening the card. */
.orr-feed__vehicles {
    overflow-wrap: anywhere;
}

/* -----------------------------------------------------------------------------
   Comment entry
   -------------------------------------------------------------------------- */

.orr-feed__post-link {
    font-weight: 600;
}

/* The member a reply answers, between "replied to" and "on …". Plain text, not
   a link: the thread is one click away, and the profile page of a private
   member is not always open to the reader. */
.orr-feed__reply-to {
    font-weight: 600;
    color: var(--orr-feed-ink);
}

.orr-feed__text {
    margin: 0 0 6px;
    font-size: 0.92em;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.orr-feed__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8em;
    font-weight: 600;
    text-decoration: none;
}

.orr-feed__more:hover,
.orr-feed__more:focus {
    text-decoration: underline;
}

/* The empty state sits inside .orr-feed (which is a .orr-wrapper), so it must
   not add the 20px inset .orr-section-empty carries for unwrapped sections. */
.orr-feed .orr-feed__empty {
    padding: 0;
}

/* New entries announced by public/js/orr-feed.js. The announcement itself is
   read by assistive tech from the role="status" line, which is visually hidden
   here rather than relying on a theme's own screen-reader class. */
.orr-feed__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@keyframes orr-feed-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.orr-feed__item.is-new {
    animation: orr-feed-in 0.35s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .orr-feed__item.is-new {
        animation: none;
    }
}

/* -----------------------------------------------------------------------------
   Small screens and the dark scheme
   -------------------------------------------------------------------------- */

@media (max-width: 520px) {
    .orr-feed__item {
        gap: 10px;
        padding: 14px 0;
    }

    .orr-feed__avatar,
    .orr-feed__avatar-img,
    .orr-feed__avatar--anonymous {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }

    .orr-feed__card {
        gap: 10px;
        padding: 8px;
    }

    .orr-feed__thumb {
        flex-basis: 76px;
        width: 76px;
        height: 60px;
    }

    /* The byline reads better with the time on its own line than with the
       sentence squeezed beside it. */
    .orr-feed__time {
        flex-basis: 100%;
        margin-left: 0;
    }
}

.dark .orr-feed {
    --orr-feed-ink: var(--global-palette4, #e5e7eb);
    --orr-feed-muted: var(--global-palette5, #bbb);
    --orr-feed-line: var(--global-palette3, #333);
    --orr-feed-surface: var(--global-palette3, #222);
    --orr-feed-card: var(--global-palette2, #1a1a1a);
}