/* Autofliper — site-wide "dizajnios" layer for the Motors-rendered pages
   (2026-10-10): listing archive, single listing, compare, login/register,
   pagination, generic buttons.

   Not a re-layout: Motors' markup, grid and scripts are left alone. This
   only brings the shapes, type and controls in line with the rest of the
   site (header, footer, credits, home, account pages): 22px rounded
   surface cards on the page background, hairline borders, Sora headings,
   filled / tinted pills with spring press physics. Colours come only from
   --af-* tokens, so light and dark switch together.
   Prefixed `html body` to out-rank body.luxury-skin and Motors' own
   !important rules. */

html body {
    --afs-radius: 22px;
    --afs-radius-sm: 14px;
    --afs-spring: cubic-bezier(.34, 1.56, .64, 1);
    --afs-font: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── buttons ─────────────────────────────────────────── */
html body .button,
html body .stm-login-register-form input[type="submit"],
html body .stm-login-register-form button[type="submit"],
html body .elementor-widget-motors-listings-compare .button {
    border-radius: var(--afs-radius-sm) !important;
    font-family: var(--afs-font);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    transition: transform .14s var(--afs-spring), opacity .14s ease, background-color .15s ease;
}
html body .button:active,
html body .stm-login-register-form input[type="submit"]:active,
html body .stm-login-register-form button[type="submit"]:active {
    transform: scale(.96);
    opacity: .82;
}

/* ── results toolbar ─────────────────────────────────── */
html body .mobile-search-btn,
html body .mobile-filter .mobile-search-btn {
    height: 54px;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--af-accent) 28%, transparent);
    transition: transform .14s var(--afs-spring), opacity .14s ease;
}
html body .mobile-search-btn:active { transform: scale(.98); opacity: .85; }
html body .mobile-search-btn-text {
    font: 700 14px/1 var(--afs-font);
    letter-spacing: .06em;
}
html body .stm-select-sorting .select2-selection,
html body .stm-select-sorting select {
    border-radius: 14px !important;
    border: 1px solid var(--af-line) !important;
    font: 600 14px/1 var(--afs-font);
}
html body .stm-view-by a.view-type {
    width: 40px; height: 40px; line-height: 40px;
    border-radius: 12px !important;
    text-align: center;
    transition: transform .14s var(--afs-spring), background-color .15s ease;
}
html body .stm-view-by a.view-type:active { transform: scale(.92); }

/* ── listing cards (list + grid) ─────────────────────── */
html body .stm-isotope-listing-item,
html body .listing-list-loop {
    margin-bottom: 16px !important;
    border: 1px solid var(--af-line) !important;
    border-radius: var(--afs-radius) !important;
    overflow: hidden;
    background: var(--af-surface) !important;
    box-shadow: none !important;
    transition: transform .22s var(--afs-spring), border-color .15s ease;
}
html body .stm-isotope-listing-item:hover,
html body .listing-list-loop:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--af-ink) 16%, var(--af-line)) !important;
}
html body .stm-isotope-listing-item .image,
html body .stm-isotope-listing-item .image img,
html body .listing-list-loop .image,
html body .listing-list-loop .image img { border-radius: 0; }
html body .listing-list-loop .title a,
html body .listing-list-loop .title .labels,
html body .listing-car-item-meta .car-title {
    font-family: var(--afs-font) !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
    text-transform: none !important;
}
html body .listing-list-loop .price,
html body .listing-car-item-meta .price,
html body .stm-isotope-listing-item .price {
    font-family: var(--afs-font);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
html body .listing-list-loop .price .normal-price,
html body .listing-list-loop .price {
    border-radius: 0 0 0 var(--afs-radius-sm);
}
/* actions row: compare / share as pills */
html body .listing-list-loop .car-action-unit,
html body .listing-list-loop .stm-share,
html body .listing-list-loop .add-to-compare-btn {
    border-radius: 999px !important;
    font-family: var(--afs-font);
    font-weight: 600;
    transition: transform .14s var(--afs-spring), opacity .14s ease;
}
html body .listing-list-loop .car-action-unit:active { transform: scale(.95); opacity: .8; }

/* ── filter ──────────────────────────────────────────── */
html body .filter-sidebar,
html body .stm-accordion-single-unit {
    border-radius: var(--afs-radius) !important;
    border: 1px solid var(--af-line) !important;
}
html body .filter-sidebar .select2-selection,
html body .filter-sidebar input[type="text"],
html body .filter-sidebar select {
    border-radius: var(--afs-radius-sm) !important;
    border: 1px solid var(--af-line) !important;
}
html body .filter-sidebar .sidebar-entry-header .h4 {
    font: 700 17px/1.2 var(--afs-font);
    letter-spacing: -.01em;
    text-transform: none;
}
html body .sticky-filter-actions .show-car-btn {
    height: 50px;
    border-radius: 16px !important;
    font: 700 14px/1 var(--afs-font);
}

/* ── pagination ──────────────────────────────────────── */
html body .page-numbers {
    min-width: 42px; height: 42px; line-height: 40px;
    margin: 0 3px;
    border-radius: 13px !important;
    border: 1px solid var(--af-line) !important;
    font: 600 14px/40px var(--afs-font);
    text-align: center;
    transition: transform .14s var(--afs-spring), background-color .15s ease;
}
html body .page-numbers:active { transform: scale(.93); }
html body .page-numbers.current {
    background: var(--af-accent) !important;
    border-color: var(--af-accent) !important;
    color: var(--af-accent-ink) !important;
}

/* ── single listing ──────────────────────────────────── */
html body.single-listings .stm-single-title-wrap .title,
html body.single-listings .stm-listing-single-price-title h1 {
    font: 800 clamp(26px, 3.2vw, 38px)/1.15 var(--afs-font);
    letter-spacing: -.02em;
    text-transform: none;
}
html body.single-listings .stm-listing-single-price-title .price {
    border-radius: var(--afs-radius-sm);
    font: 800 22px/1 var(--afs-font);
    font-variant-numeric: tabular-nums;
}
html body.single-listings .stm_single_product_gallery,
html body.single-listings .listing-single-photos,
html body.single-listings .stm-single-car-gallery,
html body.single-listings .swiper-container,
html body.single-listings .stm-big-gallery { border-radius: var(--afs-radius); overflow: hidden; }
html body.single-listings .stm-single-car-listing-data {
    padding: 8px 22px;
    background: var(--af-surface);
    border: 1px solid var(--af-line);
    border-radius: var(--afs-radius);
}
html body.single-listings .stm-single-car-listing-data .data-list-item {
    padding: 13px 0;
    border-bottom: 1px solid var(--af-line);
}
html body.single-listings .stm-single-car-listing-data .data-list-item:last-child { border-bottom: 0; }
html body.single-listings .similar-listings-title {
    font: 700 22px/1.2 var(--afs-font);
    letter-spacing: -.012em;
    text-transform: none;
}
html body.single-listings .stm-similar-car {
    border: 1px solid var(--af-line);
    border-radius: var(--afs-radius);
    overflow: hidden;
    background: var(--af-surface);
    transition: transform .22s var(--afs-spring);
}
html body.single-listings .stm-similar-car:hover { transform: translateY(-2px); }
html body.single-listings .stm-dealer-info-unit.phone {
    border-radius: var(--afs-radius-sm);
    font: 700 15px/1.2 var(--afs-font);
}
html body.single-listings .stm-listing-car-dealer-info-simple {
    padding: 18px;
    background: var(--af-surface);
    border: 1px solid var(--af-line);
    border-radius: var(--afs-radius);
}

/* ── compare ─────────────────────────────────────────── */
html body .stm-compare-cars-module .stm-compare-car-img img,
html body .stm-compare-cars-module .compare-col-stm-empty img { border-radius: 16px; }
html body .stm-compare-cars-module table,
html body .stm-compare-cars-module .compare-values table {
    border-collapse: separate;
    border-spacing: 0;
}
html body .stm-compare-cars-module td,
html body .stm-compare-cars-module th {
    border-color: var(--af-line) !important;
}
html body .stm-compare-cars-module .compare-col-stm-empty,
html body .stm-compare-cars-module .stm-compare-car-info,
html body .stm-compare-cars-module .compare-title {
    font-family: var(--afs-font);
}
html body .stm-compare-cars-module h1,
html body .stm-compare-cars-module .compare-title {
    font: 800 clamp(24px, 3vw, 34px)/1.15 var(--afs-font);
    letter-spacing: -.02em;
    text-transform: none;
}

/* ── login / register ────────────────────────────────── */
html body .stm-login-register-form,
html body .stm-login-form,
html body .stm-register-form {
    padding: 28px;
    background: var(--af-surface);
    border: 1px solid var(--af-line);
    border-radius: var(--afs-radius);
}
html body .stm-login-register-form input[type="text"],
html body .stm-login-register-form input[type="email"],
html body .stm-login-register-form input[type="password"],
html body .stm-login-form input[type="text"],
html body .stm-login-form input[type="password"],
html body .stm-register-form input[type="text"],
html body .stm-register-form input[type="email"],
html body .stm-register-form input[type="password"] {
    height: 50px;
    padding: 0 16px;
    border: 1px solid var(--af-line) !important;
    border-radius: var(--afs-radius-sm) !important;
    background: var(--af-surface-2) !important;
    color: var(--af-ink) !important;
    font: 500 15px/1.2 var(--afs-font);
    box-shadow: none !important;
}
html body .stm-login-register-form input:focus,
html body .stm-login-form input:focus,
html body .stm-register-form input:focus {
    border-color: var(--af-accent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--af-accent) 18%, transparent) !important;
    outline: none !important;
}
html body .stm-login-register-form h4,
html body .stm-login-form h4,
html body .stm-register-form h4 {
    font: 700 22px/1.2 var(--afs-font);
    letter-spacing: -.012em;
    text-transform: none;
}
html body .stm-login-register-form input[type="submit"],
html body .stm-login-register-form button[type="submit"] {
    height: 52px;
    width: 100%;
    background: var(--af-accent) !important;
    color: var(--af-accent-ink) !important;
    border: 0 !important;
    font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
    html body .button,
    html body .stm-isotope-listing-item,
    html body .listing-list-loop,
    html body .mobile-search-btn,
    html body .stm-view-by a,
    html body .page-numbers,
    html body .stm-similar-car { transition: none !important; }
    html body .stm-isotope-listing-item:hover,
    html body .listing-list-loop:hover,
    html body .stm-similar-car:hover { transform: none; }
}

/* Label and magnifier on the red "Search Options" bar were near-black in
   both themes (2.7:1). */
html body .mobile-search-btn,
html body .mobile-search-btn i,
html body .mobile-search-btn .mobile-search-btn-text {
    color: #fff !important;
}

/* grid/list switch: keep the two chips side by side on narrow screens */
html body .stm-view-by {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
}
html body .stm-view-by a.view-type { margin: 0 !important; flex: 0 0 40px; }

/* Gallery action chips (print / compare / share…) — Motors paints these with
   --motors-contrast-text-color as a BACKGROUND, which the dark bridge turned
   light under white icons. Pin them as dark glass chips in both themes. */
html body .stm-gallery-action-unit {
    background: rgba(0, 0, 0, .55) !important;
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-radius: 12px !important;
    overflow: hidden;
}
html body .stm-gallery-action-unit a,
html body .stm-gallery-action-unit i { color: #fff !important; }

/* Login/register: ONE card, not three nested ones. */
html body .stm-login-register-form .lOffer-account-dropdown,
html body .stm-login-register-form .stm-login-form,
html body .stm-login-register-form .stm-register-form,
html body .stm-login-register-form .stm-login-form-unregistered {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body .stm-login-register-form input[type="text"],
html body .stm-login-register-form input[type="email"],
html body .stm-login-register-form input[type="password"] { width: 100%; }
html body .stm-login-form .form-checker,
html body .lOffer-account-dropdown .form-checker {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
}
html body .stm-login-form .form-checker label,
html body .lOffer-account-dropdown .form-checker label {
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    font: 500 14px/1.3 var(--afs-font);
}
html body .stm-login-form .stm-forgot-password,
html body .lOffer-account-dropdown .stm-forgot-password { margin: 0; }

/* /authorization/ renders the form as .lOffer-account-dropdown (no
   .stm-login-register-form wrapper there) — same card + fields. */
html body .lOffer-account-dropdown.stm-login-form-unregistered {
    padding: 26px !important;
    background: var(--af-surface) !important;
    border: 1px solid var(--af-line) !important;
    border-radius: var(--afs-radius) !important;
    box-shadow: none !important;
}
html body .lOffer-account-dropdown input[type="text"],
html body .lOffer-account-dropdown input[type="email"],
html body .lOffer-account-dropdown input[type="password"] {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid var(--af-line) !important;
    border-radius: var(--afs-radius-sm) !important;
    background: var(--af-surface-2) !important;
    color: var(--af-ink) !important;
    font: 500 15px/1.2 var(--afs-font);
    box-shadow: none !important;
    outline: none !important;
}
html body .lOffer-account-dropdown input:focus {
    border-color: var(--af-accent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--af-accent) 18%, transparent) !important;
}
html body .lOffer-account-dropdown input[type="submit"] {
    width: 100%; height: 52px;
    border: 0 !important;
    border-radius: var(--afs-radius-sm) !important;
    background: var(--af-accent) !important;
    color: var(--af-accent-ink) !important;
    font: 700 15px/1 var(--afs-font);
}
html body .lOffer-account-dropdown label { font: 600 13px/1.3 var(--afs-font); }

/* Motors also frames each <form> inside the login/register card */
html body .stm-login-register-form form,
html body .lOffer-account-dropdown form {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Sign-up form: Motors adds 30px padding on the <form> plus Bootstrap row
   gutters on top of the card padding, which pushed the fields in. */
html body .stm-login-register-form .stm-register-form form,
html body .stm-login-register-form .stm-register-form form.stm-register-form-inner {
    padding: 0 !important;
}
html body .stm-login-register-form .stm-register-form .row.form-group {
    margin-left: -6px !important;
    margin-right: -6px !important;
}
html body .stm-login-register-form .stm-register-form .row.form-group > [class*="col-"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
}
html body .stm-login-register-form .stm-register-form input.user_validated_field,
html body .stm-login-register-form .stm-register-form input[type="text"],
html body .stm-login-register-form .stm-register-form input[type="email"],
html body .stm-login-register-form .stm-register-form input[type="password"],
html body .stm-login-register-form .stm-register-form input[type="tel"] {
    width: 100% !important;
    padding: 0 16px !important;
}

/* ID-weight (:not(#x)) so Motors' own 30px form padding can't win */
html body .stm-login-register-form .stm-register-form form:not(#afs-x),
html body .stm-login-register-form .stm-login-form form:not(#afs-x) {
    padding: 0 !important;
}

/* ── archive fixes (2026-10-10) ──────────────────────── */
/* The filter panel is painted by a white linear-gradient background-image,
   which sits on top of background-color — kill it so the card colour shows. */
html body .filter-sidebar,
html body .filter-sidebar .sidebar-entry-header,
html body .stm-accordion-single-unit,
html body .ajax-filter {
    background-image: none !important;
}
/* One photo shape for every card. Portrait phone photos used to stretch a
   card to their own height (Golf vs Abarth), so rows came out uneven. */
html body .listing-list-loop .image-inner,
html body .stm-isotope-listing-item .image-inner {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--af-surface-2);
}
html body .listing-list-loop .image-inner img,
html body .stm-isotope-listing-item .image-inner img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
html body .listing-list-loop { align-items: stretch; }

/* filter: every field the same corner (pills and boxes were mixed) */
html body .filter-sidebar .select2-selection,
html body .filter-sidebar .select2-selection--single,
html body .filter-sidebar input[type="text"],
html body .filter-sidebar input[type="number"],
html body .filter-sidebar .filter-select,
html body .filter-sidebar .stm_select_overflowed {
    border-radius: 14px !important;
    height: 46px;
}
html body .filter-sidebar input[type="text"],
html body .filter-sidebar input[type="number"] {
    padding: 0 14px;
    border: 1px solid var(--af-line) !important;
    background: var(--af-surface-2) !important;
    color: var(--af-ink) !important;
}

/* ── filter card, pass 2 ─────────────────────────────── */
/* The <form> inside the card is square and painted, so its corners showed
   over the card's rounded ones. Clip to the card and let the form be clear. */
html body .filter-sidebar {
    overflow: hidden;
    border-radius: var(--afs-radius) !important;
}
html body .filter-sidebar > form,
html body .search-filter-form.v8-inventory-form,
html body .filter-sidebar .row.row-pad-top-24 {
    background: transparent !important;
    border-radius: 0;
}

/* "Condition" / "Looking for" are select2 MULTIPLE boxes: taller, grey
   placeholder, inner search pill. Make them read exactly like the single
   selects above and below them. */
html body .filter-sidebar .select2-selection--multiple {
    min-height: 40px !important;
    height: 40px !important;
    display: flex; align-items: center;
    padding: 0 38px 0 0 !important;
    background-color: var(--af-surface-2) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b8b92' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px !important;
}
html body .filter-sidebar .select2-selection--multiple .select2-selection__rendered {
    display: flex; align-items: center; flex-wrap: nowrap;
    width: 100%; margin: 0 !important; padding: 0 14px !important;
    background: transparent !important; border: 0 !important;
    overflow: hidden;
}
html body .filter-sidebar .select2-selection--multiple .select2-search--inline,
html body .filter-sidebar .select2-selection--multiple .select2-search__field {
    width: 100% !important; margin: 0 !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
    padding: 0 !important; height: 20px;
}
html body .filter-sidebar .select2-selection--multiple .select2-search__field::placeholder {
    color: var(--af-ink) !important; opacity: 1;
}
html body .filter-sidebar .select2-selection--multiple .select2-search__field {
    color: var(--af-ink) !important; font: 500 14px/20px var(--afs-font);
}
html body .filter-sidebar .select2-selection--multiple .select2-selection__choice {
    margin: 0 6px 0 0; border-radius: 8px;
}

/* slider handles were hanging 8px outside the card on both ends */
html body .filter-sidebar .stm-slider-filter-type-unit .stm-price-range-unit,
html body .filter-sidebar .filter-price .stm-price-range-unit {
    margin-left: 12px !important;
    margin-right: 12px !important;
}
html body .filter-sidebar .stm-slider-filter-type-unit {
    padding-bottom: 6px;
}

/* ── results toolbar: SORT BY + select + grid/list, one 44px row ───── */
html body .stm-directory-listing-top__right,
html body .stm-car-listing-sort-units .stm-directory-listing-top__right {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}
html body .stm-sort-by-options {
    display: flex !important;
    align-items: center;
    gap: 12px;
    height: 44px;
    margin: 0 !important;
}
html body .stm-sort-by-options > span {
    font: 600 11px/1 var(--afs-font);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--af-ink-2) !important;
    white-space: nowrap;
}
html body .stm-select-sorting,
html body .stm-select-sorting .select2-container { height: 44px; min-width: 214px; }
html body .stm-select-sorting .select2-selection--single {
    height: 44px !important;
    display: flex !important;
    align-items: center;
    padding: 0 12px 0 16px !important;
    border-radius: 14px !important;
    border: 1px solid var(--af-line) !important;
    background: var(--af-surface-2) !important;
}
html body .stm-select-sorting .select2-selection__rendered {
    flex: 1;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    font: 600 14px/1 var(--afs-font);
    color: var(--af-ink) !important;
}
html body .stm-select-sorting .select2-selection__arrow {
    position: static !important;
    height: 100% !important;
    width: 24px;
    display: flex; align-items: center; justify-content: center;
}
html body .stm-view-by { display: flex !important; gap: 10px; align-items: center; }
html body .stm-view-by a.view-type {
    width: 44px !important; height: 44px !important; line-height: 1 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    font-size: 17px;
    border-radius: 14px !important;
    border: 1px solid var(--af-line);
}
@media (max-width: 575px) {
    html body .stm-sort-by-options > span { display: none; }
    html body .stm-select-sorting,
    html body .stm-select-sorting .select2-container { min-width: 0; width: 100%; }
}

/* sort select: chevron belongs on the right (Motors anchors <b> off a
   left/right pair meant for its old fixed-width box) */
html body .stm-select-sorting .select2-selection__arrow { order: 2; margin-left: auto; }
html body .stm-select-sorting .select2-selection__rendered { order: 1; text-align: left; }
html body .stm-select-sorting .select2-selection__arrow b {
    position: static !important;
    left: auto !important; right: auto !important; top: auto !important;
    margin: 0 !important;
}
/* keep the sort block against the grid/list switch instead of drifting left */
html body .elementor-widget-container:has(> .stm-sort-by-options) {
    display: flex; justify-content: flex-end;
}

@media (max-width: 575px) {
    html body .elementor-widget-container:has(> .stm-sort-by-options) { justify-content: flex-start; }
    html body .stm-sort-by-options { width: 100%; }
}

/* ── price tag on listing cards: one fixed shape, hover or not ──────────
   Motors draws the tag's left edge as a skewed ::before parallelogram that
   showed through only while the card was hovered, so the tag changed shape
   under the cursor. Drop the pseudo and give the tag its own rounded edge. */
html body .listing-list-loop .price::before,
html body .listing-list-loop .price::after,
html body .stm-isotope-listing-item .price::before,
html body .stm-isotope-listing-item .price::after {
    content: none !important;
    display: none !important;
}
html body .listing-list-loop .price,
html body .listing-list-loop:hover .price,
html body .stm-isotope-listing-item .price,
html body .stm-isotope-listing-item:hover .price {
    border-radius: 0 0 0 16px !important;
    transform: none !important;
    transition: none !important;
    background-color: var(--af-accent) !important;
}
/* the card itself must not move/restyle its children on hover either */
html body .stm-user-private .listing-list-loop:hover { transform: none; }

/* ═══════════════════════════════════════════════════════════
   Single listing polish (2026-10-11, from Sergio's screenshots)
   ═══════════════════════════════════════════════════════════ */

/* Price tag: ONE clean pill, identical in light and dark. Motors draws an
   extra slanted block with ::before (the "icon" on the price) and the light
   theme set the digits black on the red. */
html body.single-listings .stm-listing-single-price-title .price {
    background: var(--af-accent) !important;
    color: #fff !important;
    padding: 10px 18px !important;
    border-radius: var(--afs-radius-sm) !important;
    box-shadow: none !important;
}
html body.single-listings .stm-listing-single-price-title .price::before,
html body.single-listings .stm-listing-single-price-title .price::after {
    content: none !important;
    display: none !important;
}

/* Seller action buttons: same colour, same flat look. "Make an offer" got a
   10px black glow from the Elementor widget's own Box Shadow setting and the
   "Propose flip" button (Code Snippets #6) stayed the darker brand red in
   dark mode while the others use the dark-mode accent. */
html body.single-listings .stm-car_dealer-buttons a,
html body.single-listings .stm-car_dealer-buttons .stm-dealer-info-unit {
    box-shadow: none !important;
}
html body.single-listings .af-btn.af-msg-btn {
    background: var(--af-accent) !important;
    color: #fff !important;
    border-radius: var(--afs-radius-sm) !important;
}
html body.single-listings .af-btn.af-msg-btn:hover { opacity: .9; }

/* "Similar listings": real cards — photo with rounded corners and a fixed
   ratio, title that is never clipped, seller muted, price as a pill with the
   condition next to it. (Motors floats a 75x50 image into a 67px-high box
   with a 14px line-height title.) */
html body.single-listings .stm-similar-cars-units {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
}
html body.single-listings .stm-similar-car {
    display: flex !important;
    align-items: center;
    gap: 14px;
    height: auto !important;
    padding: 10px !important;
    margin: 0 !important;
    text-decoration: none !important;
    border: 1px solid var(--af-line);
    border-radius: var(--afs-radius);
    background: var(--af-surface);
    overflow: hidden;
    transition: transform .22s var(--afs-spring), border-color .15s ease;
}
html body.single-listings .stm-similar-car::before,
html body.single-listings .stm-similar-car::after,
html body.single-listings .stm-similar-car .right-unit > .clearfix::before,
html body.single-listings .stm-similar-car .right-unit > .clearfix::after {
    content: none !important;
    display: none !important;   /* clearfix pseudo-elements would become flex items */
}
html body.single-listings .stm-similar-car:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--af-accent) 55%, var(--af-line));
}
html body.single-listings .stm-similar-car .image {
    flex: 0 0 96px;
    width: 96px !important;
    max-width: none !important;   /* Motors: max-width:75px */
    height: 72px !important;
    margin: 0 !important;
    float: none !important;
    border-radius: 14px;
    overflow: hidden;
}
html body.single-listings .stm-similar-car .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block;
}
html body.single-listings .stm-similar-car .right-unit {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    overflow: visible !important;
}
html body.single-listings .stm-similar-car .title {
    font: 700 15px/1.3 var(--afs-font) !important;
    height: auto !important;
    margin: 0 0 2px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html body.single-listings .stm-similar-car .stm-dealer-name {
    font: 500 12.5px/1.3 var(--afs-font) !important;
    margin: 0 0 8px !important;
    color: var(--af-ink-2) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html body.single-listings .stm-similar-car .right-unit > .clearfix {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}
html body.single-listings .stm-similar-car .stm-price {
    float: none !important;
    padding: 4px 11px !important;
    border-radius: 999px !important;
    background: var(--af-accent) !important;
    color: #fff !important;
    font: 800 13px/1.25 var(--afs-font) !important;
    font-variant-numeric: tabular-nums;
}
html body.single-listings .stm-similar-car .stm-price::before,
html body.single-listings .stm-similar-car .stm-price::after {
    content: none !important;
    display: none !important;
}
html body.single-listings .stm-similar-car .stm-car-similar-meta {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    float: none !important;
    margin: 0 !important;
    font: 500 12.5px/1.2 var(--afs-font) !important;
    color: var(--af-ink-2) !important;
}
@media (max-width: 480px) {
    html body.single-listings .stm-similar-car .image { flex-basis: 84px; width: 84px !important; height: 64px !important; }
}

/* "Call us" button: the icon is always white (the button is always the
   accent colour). Motors colours it with --motors-accent-color, which
   is the same red as the button itself = invisible, and a stale cached
   copy of the dark override left it dark grey. */
html body .stm-dealer-info-unit.phone i,
html body .stm-dealer-info-unit.phone .fas,
html body .stm-dealer-info-unit.phone .fa {
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   Tablet (2026-10-11): 3 listing columns at 768px left ~240px cards whose
   spec rows were cut to "Polo…/Auto…/1750…". Two columns from 600 to
   1023px; the grid is Bootstrap flex-wrap (no JS layout), so widths are
   enough. Phones (<600px) stay one column.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 1023px) {
    html body .car-listing-row.car-listing-modern-grid > .stm-isotope-listing-item,
    html body .car-listing-row.car-listing-modern-grid > .stm-directory-grid-loop {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }
}

/* "Contact seller" jump pill (single listing, phone). Hidden unless the JS
   adds .afd-show; sits above the fixed bottom navigation. */
.afd-contact-jump { display: none; }
@media (max-width: 1023px) {
    .afd-contact-jump.afd-show {
        display: inline-flex;
        align-items: center;
        position: fixed;
        right: 14px;
        bottom: calc(92px + env(safe-area-inset-bottom, 0px));
        z-index: 9990;
        padding: 12px 18px;
        border-radius: 999px;
        background: var(--af-accent);
        color: #fff !important;
        font: 700 14px/1 var(--afs-font, inherit);
        text-decoration: none !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
        animation: afdPillIn .35s var(--afs-spring, ease-out) both;
    }
    .afd-contact-jump.afd-show:active { transform: scale(.96); }
    @keyframes afdPillIn { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
    html body.single-listings .stm-listing-car-dealer-info-simple,
    html body.single-listings .stm-listing-car-dealer-info,
    html body.single-listings .stm-car_dealer-buttons { scroll-margin-top: 76px; }
}
@media (prefers-reduced-motion: reduce) { .afd-contact-jump.afd-show { animation: none; } }

/* The Elementor widget colours the phone icon's GLYPH (::before) with the
   global "filter field background" colour — dark grey in dark mode, i.e. a
   dark icon on the red button. The glyph is always white. */
html body .stm-dealer-info-unit.phone i::before,
html body .stm-dealer-info-unit.phone .fas::before,
html body .stm-dealer-info-unit.phone .fa::before {
    color: #fff !important;
}

/* "Call us" button: the small "Pozovite nas / Call us" caption is an h5 that
   Motors colours with a translucent dark ink (readable on the light theme's
   red, almost black on the dark theme's coral). The caption is always a soft
   white; the number and the "Show number" link stay as they are. */
html body .stm-dealer-info-unit.phone h5,
html body .stm-dealer-info-unit.phone .inner h5 {
    color: rgba(255, 255, 255, .88) !important;
}

/* ═══════════════════════════════════════════════════════════
   Touch targets + plain pages on phone/tablet (2026-10-11 review)
   ═══════════════════════════════════════════════════════════ */

/* Home search card: the clickable "button" was only the 24px value line of a
   66px-tall row (label + value). Stretch its hit area over the whole row
   without changing the layout; the open list has z-index 9999 and stays on
   top. */
html body .afd-field.afd-dd { position: relative; }
html body .afd-dd-btn::after { content: ""; position: absolute; inset: 0; }

/* Small text links with a 16-23px high tap area. */
html body a.afd-more { display: inline-block; padding: 11px 0; margin: -11px 0; }
html body .stm-forgot-password a { display: inline-block; padding: 12px 0; margin: -12px 0; }

/* Plain WordPress pages (Contact, Info, policies): the heading sat directly
   on the fixed top bar. Pages built with Elementor sections keep their own
   spacing, so they are excluded. */
@media (max-width: 1240px) {
    html body.page-template-default .page-content:not(:has(> .elementor, .elementor-element, .elementor-section, .e-con)) {
        padding-top: 24px;
        padding-bottom: 16px;
    }
}

/* Info + Contact pages (plain content, 2026-10-18): readable column, real
   spacing between sections. Colors are inherited so both themes work. */
html body.page-id-3928 .page-content,
html body.page-id-3929 .page-content { max-width: 760px; margin-inline: auto; padding: 40px 0 56px; }
html body.page-id-3928 .page-content h2,
html body.page-id-3929 .page-content h2 { margin: 0 0 12px; font-size: clamp(30px, 5vw, 40px); line-height: 1.1; }
html body.page-id-3928 .page-content h3,
html body.page-id-3929 .page-content h3 { margin: 34px 0 8px; font-size: clamp(19px, 3vw, 22px); line-height: 1.25; }
html body.page-id-3928 .page-content p,
html body.page-id-3929 .page-content p { margin: 0 0 10px; font-size: 16px; line-height: 1.65; }
html body.page-id-3928 .page-content ul,
html body.page-id-3929 .page-content ul { margin: 8px 0 0; padding-left: 20px; }
html body.page-id-3928 .page-content li,
html body.page-id-3929 .page-content li { margin: 0 0 8px; font-size: 16px; line-height: 1.6; }
@media (max-width: 1240px) {
    html body.page-id-3928 .page-content,
    html body.page-id-3929 .page-content { padding: 24px 0 40px; }
}

/* Add car / sign-in on phones: iOS Safari zooms the page when a field under
   16px gets focus and often leaves it zoomed. 16px fields = no zoom. */
@media (max-width: 767px) {
    html body.page-id-2359 input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    html body.page-id-2359 select,
    html body.page-id-2359 textarea,
    html body.page-id-2359 .select2-search__field,
    html body.page-id-2359 .select2-selection__rendered,
    html body.page-id-2630 input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    html body.page-id-2630 select,
    html body.page-id-2630 textarea { font-size: 16px; }
}

/* Add car, photo grid on phones: each thumbnail is 50% wide plus a 14px right
   margin, so two never fit (2 x 181 > the 334px column) and every photo got a
   row of its own with half the row empty. A real 2-column grid instead. */
@media (max-width: 767px) {
    html body .stm-media-car-gallery {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    html body .stm-media-car-gallery .stm-placeholder {
        float: none;
        width: auto;
        margin: 0;
        min-width: 0;
    }
}
@media (max-width: 767px) {
    html body .stm-media-car-gallery::before,
    html body .stm-media-car-gallery::after { display: none; }   /* the clearfix pseudo-elements became empty grid cells */
    html body .stm-media-car-gallery .stm-placeholder { width: 100% !important; }   /* theme sets width:50% with higher specificity */
}

/* Add car, photo thumbnails: the remove (x) button only appeared on hover,
   which a phone does not have - a wrong photo could not be removed. */
@media (hover: none), (max-width: 1023px) {
    html body .stm-placeholder-generated .stm-image-preview > i.fa-times {
        opacity: 1;
        background: rgba(0, 0, 0, .62);
        color: #fff;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        z-index: 3;
    }
}
@media (hover: none), (max-width: 1023px) {
    /* the theme's own selector is ten classes deep; opacity must win once */
    html body .stm-placeholder-generated .stm-image-preview > i.fa-times { opacity: 1 !important; }
}
/* the remove icon's font glyph is empty on this site: draw the cross ourselves */
html body .stm-placeholder-generated .stm-image-preview > i.fa-times::before {
    content: "\00D7";
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    color: #fff;
    display: block;
}

/* Add car: the "Registered" date field was a 23px sliver, narrower than every other field. */
html body input.stm-years-datepicker {
    height: 50px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
}
html body .stm_registration_date input.stm-years-datepicker {
    flex: 0 0 auto;      /* flex-basis 0 in a column container squashed it to the label height */
    height: 50px;
    padding: 0 16px;
}

/* Add car: rounded message box like the other cards. */
html body .stm-add-a-car-message { border-radius: 14px; padding: 14px 16px; }

/* ═══════════════════════════════════════════════════════════
   2026-10-19 — Sergio's screenshots
   ═══════════════════════════════════════════════════════════ */

/* /buy-a-car/ filter sidebar: the <form> behind the rounded card had its own
   square dark background, so square corners stuck out around the 22px
   rounded corners of the card. */
@media (min-width: 1024px) {
    html body form.search-filter-form,
    html body form.search-filter-form.v8-inventory-form { background: transparent !important; }
}

/* Single listing, "Similar listing": the FEATURED pill is absolutely placed in
   the top-right corner of the whole card and sat on the title + seller name.
   Here it becomes a small star on the photo's corner. */
html body.single-listings .stm-similar-car .afd-badge-featured-sm {
    top: 20px !important;
    left: 14px !important;
    right: auto !important;
    font-size: 0 !important;
    gap: 0 !important;
    padding: 5px !important;
    line-height: 0 !important;
}
html body.single-listings .stm-similar-car .afd-badge-featured-sm .afd-star { width: 11px !important; height: 11px !important; }

/* Single listing: no "Make an offer" button (Sergio) — one clear way to
   contact the seller instead. */
html body.single-listings .elementor-widget-motors-single-listing-offer-price { display: none !important; }

/* Seller action buttons share one typeface (the call card was Sora, the
   message / offer buttons Montserrat). */
html body.single-listings .af-btn.af-msg-btn,
html body.single-listings .stm-car_dealer-buttons a,
html body.single-listings .stm-dealer-info-unit.phone,
html body.single-listings .stm-dealer-info-unit.phone * {
    font-family: var(--afs-font, "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
}
html body.single-listings .af-btn.af-msg-btn { font-weight: 600; letter-spacing: 0; }
html body.single-listings .stm-dealer-info-unit.phone h5,
html body.single-listings .stm-dealer-info-unit.phone .stm-show-number { font-weight: 500; }