/* Autofliper — account pages redesign ("dizajnios"), 2026-10-10.
   Covers the Add-a-car form (/add-car/) and the member profile
   (/author/…, My Listings / Favorites / Settings).

   Motors renders these as hard white blocks with uppercase headings and a
   4px top bar. This file keeps Motors' markup and behaviour untouched and
   re-skins it as iOS "inset grouped" cards: page background → rounded
   surface cards → inset fields, Sora headings, tinted/filled buttons with
   spring press physics. Everything reads --af-* tokens (autofliper-dark's
   tokens.css), so it follows the light/dark switch with no extra rules.
   Selectors are prefixed with `html body` to out-rank Motors' own
   body.luxury-skin / !important rules. */

/* ── shared bits ───────────────────────────────────────── */
html body .stm_add_car_form,
html body .stm-user-private {
    --afa-radius: 22px;
    --afa-radius-sm: 14px;
    --afa-spring: cubic-bezier(.34, 1.56, .64, 1);
    --afa-font: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--af-ink);
}

/* form controls — one look for both pages */
html body .stm_add_car_form input[type="text"],
html body .stm_add_car_form input[type="number"],
html body .stm_add_car_form input[type="tel"],
html body .stm_add_car_form input[type="email"],
html body .stm_add_car_form input[type="password"],
html body .stm_add_car_form textarea,
html body .stm_add_car_form select,
html body .stm_add_car_form .select2-container--default .select2-selection--single,
html body .stm-user-private-main input[type="text"],
html body .stm-user-private-main input[type="number"],
html body .stm-user-private-main input[type="tel"],
html body .stm-user-private-main input[type="email"],
html body .stm-user-private-main input[type="password"],
html body .stm-user-private-main textarea,
html body .stm-user-private-main select {
    height: 50px;
    padding: 0 16px;
    border: 1px solid var(--af-line) !important;
    border-radius: var(--afa-radius-sm) !important;
    background-color: var(--af-surface-2) !important;
    color: var(--af-ink) !important;
    font: 500 15px/1.2 var(--afa-font);
    box-shadow: none !important;
    outline: none !important;
    transition: border-color .15s ease, box-shadow .2s ease;
}
html body .stm_add_car_form textarea,
html body .stm-user-private-main textarea {
    height: auto;
    min-height: 120px;
    padding: 14px 16px;
    line-height: 1.5;
}
html body .stm_add_car_form input:focus,
html body .stm_add_car_form select:focus,
html body .stm_add_car_form textarea:focus,
html body .stm_add_car_form .select2-container--open .select2-selection--single,
html body .stm-user-private-main input:focus,
html body .stm-user-private-main select:focus,
html body .stm-user-private-main textarea: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 .stm_add_car_form .select2-selection__rendered {
    color: var(--af-ink) !important;
    line-height: 48px !important;
    padding-left: 0 !important;
    font: 500 15px/48px var(--afa-font);
}
html body .stm_add_car_form .select2-selection__arrow { height: 48px !important; }
html body .stm_add_car_form ::placeholder,
html body .stm-user-private-main ::placeholder {
    color: var(--af-ink-2) !important;
    opacity: 1;
}

/* ═══════════════ ADD-A-CAR ═══════════════ */
html body .stm_add_car_form {
    max-width: 980px;
    margin: 0 auto;
    padding: 12px 16px 56px;
    font-family: var(--afa-font);
}

/* section heading (was: heavy uppercase bar) */
html body .stm_add_car_form .stm-car-listing-data-single {
    margin: 34px 0 12px !important;
    padding: 0 4px !important;
    background: transparent !important;
    border: 0 !important;
    min-height: 0 !important;
}
html body .stm_add_car_form .stm-car-listing-data-single .title {
    margin: 0 !important;
    padding: 0 !important;
    font: 700 21px/1.25 var(--afa-font) !important;
    letter-spacing: -.012em;
    text-transform: none !important;
    color: var(--af-ink) !important;
}
html body .stm_add_car_form .stm-car-listing-data-single .step_number {
    float: none;
    display: inline-block;
    margin: 0 0 0 10px;
    padding: 5px 9px;
    border-radius: 999px;
    font: 600 11px/1 var(--afa-font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--af-accent) !important;
    background: color-mix(in srgb, var(--af-accent) 12%, transparent);
    vertical-align: 3px;
}

/* the cards */
html body .stm_add_car_form .stm-form1-intro-unit,
html body .stm_add_car_form .stm-form-1-end-unit,
html body .stm_add_car_form .stn-add-car-location-wrap,
html body .stm_add_car_form .stm-add-videos-unit,
html body .stm_add_car_form .stm-add-media-car,
html body .stm_add_car_form .stm-form-5-notes > .row,
html body .stm_add_car_form .stm-form-price-edit > .row,
html body .stm_add_car_form .stm-car-listing-data-single + .stm_add_car_title_form,
html body .stm_add_car_form .stm_add_car_title_form {
    margin: 0 0 4px !important;
    padding: 20px !important;
    background: var(--af-surface) !important;
    border: 1px solid var(--af-line) !important;
    border-radius: var(--afa-radius) !important;
    box-shadow: none;
}
html body .stm_add_car_form .row { margin-left: 0; margin-right: 0; }

/* labels */
html body .stm_add_car_form .stm-label,
html body .stm_add_car_form .stm_label,
html body .stm_add_car_form .video-label {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font: 600 12px/1.3 var(--afa-font) !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--af-ink-2) !important;
    background: transparent !important;
}
html body .stm_add_car_form .stm-label i {
    margin-right: 8px;
    color: var(--af-accent) !important;
    font-size: 14px;
}

/* main selects: 4-up grid */
html body .stm_add_car_form .stm-form1-intro-unit .row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 16px;
}
html body .stm_add_car_form .stm-form1-intro-unit .row::before,
html body .stm_add_car_form .stm-form1-intro-unit .row::after { display: none; }
html body .stm_add_car_form .stm-form-1-selects {
    float: none; width: auto; max-width: none; padding: 0; margin: 0;
}

/* secondary fields: label above field (DOM order is field, then label) */
html body .stm_add_car_form .stm-form-1-end-unit {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
html body .stm_add_car_form .stm-form-1-quarter {
    display: flex;
    flex-direction: column-reverse;
    float: none; width: auto; margin: 0; padding: 0;
    background: transparent !important;
    border: 0 !important;
}
html body .stm_add_car_form .stm-form-1-end-unit > .stm-car-listing-data-single,
html body .stm_add_car_form .stm-form-1-end-unit > .clearfix { grid-column: 1 / -1; }
html body .stm_add_car_form .stm-location-input-wrap {
    display: flex; flex-direction: column-reverse; float: none; width: auto; padding: 0; margin: 0;
}
html body .stm_add_car_form .stm-form-1-quarter.stm-location-search-unit {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* features: one rounded card per group */
html body .stm_add_car_form .stm-form-2-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
    align-items: start;
}
html body .stm_add_car_form .stm-form-2-features > .stm-car-listing-data-single { grid-column: 1 / -1; }
html body .stm_add_car_form .stm-single-feature {
    float: none; width: auto; margin: 0 !important;
    padding: 18px !important;
    background: var(--af-surface) !important;
    border: 1px solid var(--af-line) !important;
    border-radius: var(--afa-radius) !important;
}
html body .stm_add_car_form .stm-single-feature > .heading-font {
    margin: 0 0 10px !important;
    font: 700 14px/1.3 var(--afa-font) !important;
    letter-spacing: -.005em;
    text-transform: none !important;
    color: var(--af-ink) !important;
}
html body .stm_add_car_form .feature-single label,
html body .stm_add_car_form .feature-single span {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0; margin: 0;
    font: 500 14px/1.35 var(--afa-font);
    color: var(--af-ink-2) !important;
    cursor: pointer;
}
html body .stm_add_car_form .feature-single label:hover { color: var(--af-ink) !important; }

/* photos */
html body .stm_add_car_form .stm-media-car-add-nitofication,
html body .stm_add_car_form .stm-simple-notice {
    margin: 0 0 12px !important;
    padding: 12px 14px !important;
    background: color-mix(in srgb, var(--af-accent) 8%, transparent) !important;
    border: 0 !important;
    border-radius: var(--afa-radius-sm) !important;
    color: var(--af-ink-2) !important;
    font: 500 13px/1.45 var(--afa-font);
}
html body .stm_add_car_form .stm-simple-notice i { color: var(--af-accent) !important; }
html body .stm_add_car_form .stm-media-car-gallery .stm-placeholder,
html body .stm_add_car_form .stm-media-car-gallery .stm-image-unit,
html body .stm_add_car_form .stm-media-car-gallery .stm-placeholder.stm-placeholder-main {
    background: var(--af-surface-2) !important;
    border: 1.5px dashed var(--af-line) !important;
    border-radius: var(--afa-radius-sm) !important;
    color: var(--af-ink-2) !important;
}

/* video link row */
html body .stm_add_car_form .stm-video-link-unit { display: flex; gap: 10px; align-items: center; }
html body .stm_add_car_form .stm-video-link-unit input { flex: 1; }
html body .stm_add_car_form .stm-after-video {
    flex: 0 0 auto;
    width: 44px; height: 44px; line-height: 44px; text-align: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--af-accent) 12%, transparent) !important;
    color: var(--af-accent) !important;
}

/* price */
html body .stm_add_car_form .stm_price_input input {
    font: 700 22px/1 var(--afa-font) !important;
    font-variant-numeric: tabular-nums;
    height: 58px;
}

/* rich-text editor (TinyMCE) */
html body .stm_add_car_form .wp-editor-wrap,
html body .stm_add_car_form .wp-editor-container {
    border: 1px solid var(--af-line) !important;
    border-radius: var(--afa-radius-sm) !important;
    overflow: hidden;
    background: var(--af-surface-2) !important;
}

/* submit bar — floats at the bottom like an iOS toolbar */
html body .stm_add_car_form .stm-form-checking-user,
html body .stm_add_car_form .stm-add-a-car-user {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 28px 0 0 !important;
}
html body .stm_add_car_form .stm-add-a-car-user-wrapper {
    position: sticky;
    bottom: 14px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    padding: 12px 14px !important;
    background: color-mix(in srgb, var(--af-surface) 82%, transparent) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--af-line) !important;
    border-radius: 26px !important;
    box-shadow: var(--af-shadow);
}
html body .stm_add_car_form .stm-add-a-car-user-wrapper .left-info {
    display: flex; align-items: center; gap: 12px; margin: 0 auto 0 0 !important; float: none;
}
html body .stm_add_car_form .stm-add-a-car-user-wrapper .avatar img,
html body .stm_add_car_form .stm-dealer-image-custom-view img {
    width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
}
html body .stm_add_car_form .stm-add-a-car-user-wrapper .user-info h4,
html body .stm_add_car_form .stm-add-a-car-user-wrapper .user-info .name {
    margin: 0; font: 700 15px/1.2 var(--afa-font); color: var(--af-ink) !important;
}
html body .stm_add_car_form .stm-add-a-car-user-wrapper .stm-label {
    margin: 2px 0 0 !important; text-transform: none; letter-spacing: 0; font-weight: 500 !important;
}
html body .stm_add_car_form .add-car-btns-wrap { margin: 0; padding: 0; list-style: none; display: flex; gap: 10px; }
html body .stm_add_car_form .add-car-btns-wrap button {
    display: inline-flex; align-items: center; gap: 9px;
    height: 50px; padding: 0 22px;
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--af-accent) !important;
    color: var(--af-accent-ink) !important;
    font: 700 14px/1 var(--afa-font) !important;
    letter-spacing: .01em;
    text-transform: none !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--af-accent) 32%, transparent);
    cursor: pointer;
    transition: transform .14s var(--afa-spring), opacity .14s ease;
}
html body .stm_add_car_form .add-car-btns-wrap button:active { transform: scale(.96); opacity: .8; }
html body .stm_add_car_form .add-car-btns-wrap button i { color: inherit !important; }
html body .stm_add_car_form .btn-ppl button {
    background: color-mix(in srgb, var(--af-accent) 12%, transparent) !important;
    color: var(--af-accent) !important;
    box-shadow: none;
}
html body .stm_add_car_form .right-info { margin: 0; display: flex; align-items: center; gap: 14px; }
html body .stm_add_car_form .right-info a,
html body .stm_add_car_form .stm_logout a {
    font: 600 13px/1 var(--afa-font);
    color: var(--af-ink-2) !important;
    text-decoration: none;
}
html body .stm_add_car_form .right-info a:hover { color: var(--af-accent) !important; }

/* ═══════════════ MEMBER PROFILE ═══════════════ */
html body .stm-user-private {
    padding: 28px 0 56px;
    background: transparent !important;
    font-family: var(--afa-font);
}
html body .stm-user-private .container { max-width: 1120px; }
/* the full-bleed colour strips Motors paints to the left of the columns */
html body .stm-user-private .stm-user-private-sidebar:before,
html body .stm-user-private .stm-user-private-main:before { display: none !important; content: none !important; }

html body .stm-user-private .stm-user-private-sidebar {
    position: sticky; top: 100px;
    min-height: 0 !important;
    padding: 22px !important;
    background: var(--af-surface) !important;
    border: 1px solid var(--af-line);
    border-radius: 26px;
}
html body .stm-user-private .stm-user-top { margin: 0 0 18px !important; display: flex; align-items: center; gap: 14px; }
html body .stm-user-private .stm-user-avatar { float: none !important; margin: 0 !important; flex: 0 0 auto; }
html body .stm-user-private .stm-user-avatar .img-avatar {
    width: 68px !important; height: 68px !important; border-radius: 50%; object-fit: cover;
}
html body .stm-user-private .stm-user-profile-information .title {
    display: block; margin: 0;
    font: 700 19px/1.2 var(--afa-font) !important;
    letter-spacing: -.01em;
    text-transform: none !important;
    color: var(--af-ink) !important;
}
html body .stm-user-private .stm-user-profile-information .title-sub {
    margin-top: 4px; font: 500 13px/1.2 var(--afa-font); color: var(--af-ink-2) !important;
}

/* nav: inset-grouped list rows */
html body .stm-user-private .stm-actions-list {
    display: flex; flex-direction: column; gap: 4px;
    margin: 0 0 14px; padding: 0;
    border: 0 !important;
}
html body .stm-user-private .stm-actions-list a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    font: 600 15px/1.2 var(--afa-font) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--af-ink) !important;
    text-decoration: none;
    transition: background-color .15s ease, transform .14s var(--afa-spring);
}
html body .stm-user-private .stm-actions-list a i {
    width: 34px; height: 34px; line-height: 34px; margin: 0 !important;
    flex: 0 0 34px; text-align: center; font-size: 15px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--af-accent) 13%, transparent);
    color: var(--af-accent) !important;
}
html body .stm-user-private .stm-actions-list a:hover { background: var(--af-surface-2); }
html body .stm-user-private .stm-actions-list a:active { transform: scale(.97); }
html body .stm-user-private .stm-actions-list a.active { background: var(--af-surface-2); }

/* contact block */
html body .stm-user-private .stm-dealer-phone,
html body .stm-user-private .stm-dealer-mail {
    position: relative;
    margin: 0; padding: 14px 4px 14px 48px !important;
    border-top: 1px solid var(--af-line) !important;
    background: transparent !important;
}
html body .stm-user-private .stm-dealer-phone > i,
html body .stm-user-private .stm-dealer-mail > i {
    position: absolute; left: 4px; top: 15px;
    width: 34px; height: 34px; line-height: 34px; text-align: center;
    border-radius: 11px; font-size: 14px;
    background: var(--af-surface-2);
    color: var(--af-ink-2) !important;
}
html body .stm-user-private .phone-label,
html body .stm-user-private .mail-label {
    font: 600 11px/1.3 var(--afa-font) !important;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--af-ink-2) !important;
}
html body .stm-user-private .stm-dealer-phone .phone,
html body .stm-user-private .stm-dealer-mail .mail,
html body .stm-user-private .stm-dealer-mail .mail a {
    margin-top: 3px;
    font: 600 15px/1.3 var(--afa-font) !important;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
    color: var(--af-ink) !important;
}
html body .stm-user-private .show-my-profile {
    margin: 12px 0 0; padding: 0; border: 0 !important; background: transparent !important;
}
html body .stm-user-private .show-my-profile a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; border-radius: 14px;
    font: 600 14px/1 var(--afa-font);
    background: color-mix(in srgb, var(--af-accent) 12%, transparent);
    color: var(--af-accent) !important;
    text-decoration: none;
    transition: transform .14s var(--afa-spring), opacity .14s ease;
}
html body .stm-user-private .show-my-profile a:active { transform: scale(.97); opacity: .8; }
html body .stm-user-private .stm-became-dealer .button {
    display: block; text-align: center; margin: 0 0 14px;
    height: 46px; line-height: 46px; border-radius: 14px;
    background: var(--af-accent) !important; color: var(--af-accent-ink) !important;
    font: 700 14px/46px var(--afa-font);
}

/* main column */
html body .stm-user-private .stm-user-private-main {
    padding: 4px 0 0 8px;
    background: transparent !important;
}
html body .stm-user-private .stm-user-private-main .stm-seller-title,
html body .stm-user-private .stm-user-private-main h1,
html body .stm-user-private .stm-user-private-main h2 {
    margin: 0 0 6px;
    font: 700 28px/1.2 var(--afa-font) !important;
    letter-spacing: -.015em;
    text-transform: none !important;
    color: var(--af-ink) !important;
}
html body .stm-user-private .stm-car-listing-sort-units {
    padding: 0 0 18px !important; margin: 0 !important; border: 0 !important;
}

/* each listing = a card */
html body .stm-user-private .listing-list-loop {
    display: flex; gap: 18px; align-items: flex-start;
    margin: 0 0 14px !important;
    padding: 14px !important;
    background: var(--af-surface) !important;
    border: 1px solid var(--af-line) !important;
    border-radius: var(--afa-radius) !important;
    box-shadow: none !important;
    transition: transform .2s var(--afa-spring), border-color .15s ease;
}
html body .stm-user-private .listing-list-loop:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--af-ink) 16%, var(--af-line)) !important;
}
html body .stm-user-private .listing-list-loop .image {
    flex: 0 0 240px; width: 240px; float: none; margin: 0 !important;
    border-radius: 16px; overflow: hidden;
}
html body .stm-user-private .listing-list-loop .image img { width: 100%; height: auto; display: block; }
html body .stm-user-private .listing-list-loop .content { flex: 1; min-width: 0; float: none; width: auto; padding: 0 !important; }
html body .stm-user-private .listing-list-loop .title,
html body .stm-user-private .listing-list-loop .title a {
    font: 700 19px/1.25 var(--afa-font) !important;
    letter-spacing: -.01em;
    color: var(--af-ink) !important;
    text-transform: none !important;
}
html body .stm-user-private .listing-list-loop .price,
html body .stm-user-private .listing-list-loop .normal-price .heading-font {
    font-variant-numeric: tabular-nums;
}

/* owner action buttons: tinted pills */
html body .stm-user-private .listing-owner-actions {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; border: 0;
}
html body .stm-user-private .listing-owner-actions .action-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 14px;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--af-surface-2) !important;
    color: var(--af-ink) !important;
    font: 600 13px/1 var(--afa-font) !important;
    text-decoration: none;
    transition: transform .14s var(--afa-spring), opacity .14s ease;
}
html body .stm-user-private .listing-owner-actions .action-btn i { color: var(--af-ink-2) !important; }
html body .stm-user-private .listing-owner-actions .action-btn:active { transform: scale(.95); opacity: .8; }
html body .stm-user-private .listing-owner-actions .make_featured,
html body .stm-user-private .listing-owner-actions .make_featured i {
    color: var(--af-accent) !important;
    background: color-mix(in srgb, var(--af-accent) 12%, transparent) !important;
}
html body .stm-user-private .listing-owner-actions .action-btn-danger,
html body .stm-user-private .listing-owner-actions .action-btn-danger i { color: var(--af-accent) !important; }

/* profile settings page: grouped cards */
html body .stm-user-private .stm-my-profile-settings .stm-change-block {
    margin: 0 0 14px !important; padding: 20px !important;
    background: var(--af-surface) !important;
    border: 1px solid var(--af-line) !important;
    border-radius: var(--afa-radius) !important;
}
html body .stm-user-private .stm-my-profile-settings .stm-change-block .title {
    font: 700 17px/1.3 var(--afa-font) !important;
    text-transform: none !important;
    color: var(--af-ink) !important;
}
html body .stm-user-private .stm-label,
html body .stm-user-private label {
    font: 600 12px/1.3 var(--afa-font);
    letter-spacing: .04em;
    color: var(--af-ink-2) !important;
}

/* ── responsive ── */
@media (max-width: 991px) {
    html body .stm_add_car_form .stm-form1-intro-unit .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body .stm_add_car_form .stm-form-1-end-unit,
    html body .stm_add_car_form .stm-form-1-quarter.stm-location-search-unit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body .stm-user-private .stm-user-private-sidebar { position: relative; top: 0; margin-bottom: 18px; }
    html body .stm-user-private .stm-user-private-main { padding-left: 0; }
}
@media (max-width: 575px) {
    html body .stm_add_car_form { padding: 6px 12px 40px; }
    html body .stm_add_car_form .stm-form1-intro-unit .row,
    html body .stm_add_car_form .stm-form-1-end-unit,
    html body .stm_add_car_form .stm-form-1-quarter.stm-location-search-unit { grid-template-columns: 1fr; }
    html body .stm_add_car_form .stm-car-listing-data-single .title { font-size: 19px !important; }
    html body .stm_add_car_form .stm-add-a-car-user-wrapper { border-radius: 22px !important; }
    html body .stm_add_car_form .add-car-btns-wrap { width: 100%; }
    html body .stm_add_car_form .add-car-btns-wrap button { width: 100%; justify-content: center; }
    html body .stm-user-private .listing-list-loop { flex-direction: column; }
    html body .stm-user-private .listing-list-loop .image { flex-basis: auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    html body .stm_add_car_form *,
    html body .stm-user-private * { transition: none !important; }
}

/* ── pass 2 (from a server-rendered copy of the real logged-in page) ── */
/* Motors puts its own border on the select2 inner span and select2 keeps a
   hidden native <select> next to it — both showed up as extra lines. */
html body .stm_add_car_form select.select2-hidden-accessible {
    height: 1px !important; width: 1px !important;
    padding: 0 !important; border: 0 !important;
    background: transparent !important;
}
html body .stm_add_car_form .select2-container { width: 100% !important; display: block; }
html body .stm_add_car_form .select2-selection--single { display: flex !important; align-items: center; }
html body .stm_add_car_form .select2-selection--single .select2-selection__rendered,
html body .stm_add_car_form .select2-selection__rendered[title] {
    flex: 1;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--af-ink) !important;
}
html body .stm_add_car_form .select2-selection--single .select2-selection__arrow {
    position: static !important; height: auto !important; width: 28px; flex: 0 0 28px;
    display: flex; align-items: center; justify-content: center;
}
html body .stm_add_car_form .select2-selection--single .select2-selection__arrow b {
    border-color: var(--af-ink-2) transparent transparent !important;
}
/* label always on top, whatever the DOM order of that particular field */
html body .stm_add_car_form .stm-form-1-quarter,
html body .stm_add_car_form .stm-location-input-wrap {
    flex-direction: column !important;
}
html body .stm_add_car_form .stm-form-1-quarter > .stm-label,
html body .stm_add_car_form .stm-location-input-wrap > .stm-label { order: -1; }

/* select2: full-width field, arrow on the right */
html body .stm_add_car_form .select2-container .selection { display: block; width: 100%; }
html body .stm_add_car_form .select2-container .select2-selection--single { width: 100% !important; height: 50px !important; }
html body .stm_add_car_form .select2-selection--single .select2-selection__arrow { order: 2; margin-left: auto; }
html body .stm_add_car_form .select2-selection--single .select2-selection__rendered { order: 1; text-align: left; }

/* Motors positions the chevron <b> absolutely off a left/right pair meant for
   its old fixed-width select — put it back in the flex flow, at the right. */
html body .stm_add_car_form .select2-selection--single .select2-selection__arrow b {
    position: static !important;
    left: auto !important; right: auto !important; top: auto !important;
    margin: 0 !important;
}
/* step wrappers carry Bootstrap's negative row margins */
html body .stm_add_car_form .stm-form-2-features,
html body .stm_add_car_form .stm-form-3-photos,
html body .stm_add_car_form .stm-form-4-videos,
html body .stm_add_car_form .stm-form-5-notes,
html body .stm_add_car_form .stm-form-price-edit,
html body .stm_add_car_form .stm_add_car_form_1 {
    margin-left: 0 !important; margin-right: 0 !important; width: 100% !important;
    max-width: 100%;
}

/* step wrappers must not paint a band behind their heading + cards */
html body .stm_add_car_form .stm-form-2-features,
html body .stm_add_car_form .stm-form-3-photos,
html body .stm_add_car_form .stm-form-4-videos,
html body .stm_add_car_form .stm-form-5-notes,
html body .stm_add_car_form .stm-form-price-edit {
    background: transparent !important;
    border: 0 !important;
}
/* hint/notice strips: readable text (it inherited the near-black ink) */
html body .stm_add_car_form .stm-media-car-add-nitofication,
html body .stm_add_car_form .stm-media-car-add-nitofication *,
html body .stm_add_car_form .stm-simple-notice,
html body .stm_add_car_form .stm-simple-notice *:not(i),
html body .stm_add_car_form .stm-validation-message {
    color: var(--af-ink-2) !important;
}
/* price: one clean field, no stray rule above it */
html body .stm_add_car_form .stm-form-price-edit .stm_price_input { border: 0 !important; padding: 0 !important; margin: 0; }
html body .stm_add_car_form .stm-form-price-edit .row > [class*="col-"] { border: 0 !important; }
html body .stm_add_car_form .stm-form-price-edit .stm_price_input input { width: 100%; max-width: 280px; }

/* ── profile, pass 2 ─────────────────────────────────── */
/* page colour (same black as the footer), not a grey band */
html body .stm-user-private,
html body #main:has(.stm-user-private),
html body .site-content:has(.stm-user-private) { background: var(--af-bg) !important; }

html body .stm-user-private .stm-user-private-sidebar { padding: 18px !important; }
html body .stm-user-private .stm-user-top { gap: 12px; margin-bottom: 14px !important; }
html body .stm-user-private .stm-user-avatar .img-avatar,
html body .stm-user-private .stm-user-avatar .stm-empty-avatar-icon {
    width: 56px !important; height: 56px !important;
}
html body .stm-user-private .stm-user-avatar .stm-empty-avatar-icon {
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    font-size: 20px; line-height: 1;
}
html body .stm-user-private .stm-user-profile-information { min-width: 0; }
html body .stm-user-private .stm-user-profile-information .title {
    font-size: 16px !important; line-height: 1.25 !important; overflow-wrap: anywhere;
}
html body .stm-user-private .stm-user-profile-information .title-sub { font-size: 12px; margin-top: 2px; }

/* nav rows: compact, smaller icons, smaller type — Motors adds margins that
   spread the three links far apart */
html body .stm-user-private .stm-actions-list { gap: 2px; margin: 0 0 10px !important; }
html body .stm-user-private .stm-actions-list a {
    gap: 10px; margin: 0 !important; padding: 8px 10px !important;
    font-size: 14px !important; line-height: 1.2 !important;
    border-radius: 12px;
}
html body .stm-user-private .stm-actions-list a i {
    width: 28px; height: 28px; line-height: 28px; flex: 0 0 28px;
    font-size: 13px; border-radius: 9px; margin: 0 !important;
}

/* contact rows */
html body .stm-user-private .stm-dealer-phone,
html body .stm-user-private .stm-dealer-mail { padding: 12px 2px 12px 42px !important; }
html body .stm-user-private .stm-dealer-phone > i,
html body .stm-user-private .stm-dealer-mail > i {
    left: 2px; top: 13px; width: 28px; height: 28px; line-height: 28px; font-size: 12px; border-radius: 9px;
}
html body .stm-user-private .phone-label,
html body .stm-user-private .mail-label { font-size: 10.5px !important; }
html body .stm-user-private .stm-dealer-phone .phone,
html body .stm-user-private .stm-dealer-mail .mail,
html body .stm-user-private .stm-dealer-mail .mail a {
    font-size: 13px !important; overflow-wrap: anywhere; word-break: normal;
}
html body .stm-user-private .show-my-profile a {
    height: auto; min-height: 42px; padding: 10px 12px; font-size: 13px; line-height: 1.25; text-align: center;
}

/* "View more" under the listings (was text in near-black on the red pill) */
html body .stm-user-private .stm-load-more-dealer-cars { margin: 8px 0 0; text-align: center; }
html body .stm-user-private .stm-load-more-dealer-cars a,
html body .stm-load-more-dealer-cars a.button,
html body .stm-load-more-dealer-cars .button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; max-width: 360px; height: 50px;
    border: 0 !important; border-radius: 16px !important;
    background: var(--af-accent) !important;
    color: var(--af-accent-ink) !important;
    font: 700 14px/1 var(--afa-font) !important;
    text-transform: none !important; letter-spacing: 0;
    text-decoration: none;
    transition: transform .14s var(--afa-spring), opacity .14s ease;
}
html body .stm-load-more-dealer-cars a *,
html body .stm-load-more-dealer-cars .button * { color: inherit !important; }
html body .stm-load-more-dealer-cars a:active { transform: scale(.97); opacity: .8; }

/* theme positions these icons absolutely against a 35px left padding that
   the compact rows no longer have — keep them in the flex flow */
html body .stm-user-private .stm-actions-list a i,
html body .stm-user-private .stm-dealer-phone > i,
html body .stm-user-private .stm-dealer-mail > i { float: none; }
html body .stm-user-private .stm-actions-list a i {
    position: static !important; left: auto !important; top: auto !important; transform: none !important;
}
html body.luxury-skin .stm-user-private .stm-user-private-sidebar .stm-actions-list a i.fas { margin: 0 !important; }

/* wider sidebar so e-mail and name sit on one line */
@media (min-width: 992px) {
    html body .stm-user-private .stm-sticky-user-sidebar { width: 300px !important; flex: 0 0 300px; max-width: 300px; }
    html body .stm-user-private .stm-sticky-user-sidebar + .col-md-9 { width: calc(100% - 300px) !important; flex: 1 1 auto; max-width: none; }
}

/* vertical centring of the text against the chevron */
html body .stm_add_car_form .select2-selection--single .select2-selection__rendered {
    line-height: 1.2 !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
    display: flex; align-items: center;
}
html body .stm_add_car_form .select2-selection--single .select2-selection__arrow { align-self: center; height: 100% !important; }
html body .stm_add_car_form .select2-selection--single .select2-selection__arrow b { display: inline-block; position: relative !important; top: 7px !important; transform: none; }

/* ═══ add-a-car, pass 3 (from the owner's logged-in screenshots) ═══ */

/* more air between fields and cards */
html body .stm_add_car_form .stm-form1-intro-unit,
html body .stm_add_car_form .stm-form-1-end-unit,
html body .stm_add_car_form .stn-add-car-location-wrap,
html body .stm_add_car_form .stm-add-videos-unit,
html body .stm_add_car_form .stm-add-media-car,
html body .stm_add_car_form .stm-form-5-notes > .row,
html body .stm_add_car_form .stm-form-price-edit > .row { padding: 26px 28px !important; }
html body .stm_add_car_form .stm-form1-intro-unit .row { gap: 26px 22px; }
html body .stm_add_car_form .stm-form-1-end-unit { gap: 26px 22px; }
html body .stm_add_car_form .stm-form-1-quarter.stm-location-search-unit { gap: 22px; }
html body .stm_add_car_form .stm-car-listing-data-single { margin: 44px 0 16px !important; }
html body .stm_add_car_form .stm-label,
html body .stm_add_car_form .stm_label { margin-bottom: 10px !important; }

/* Listing item location: no leftover map height, real full-width fields */
html body .stm_add_car_form .stn-add-car-location-wrap {
    height: auto !important; min-height: 0 !important;
    display: block !important;
}
html body .stm_add_car_form .stm-form-1-quarter.stm_location,
html body .stm_add_car_form .stm-location-search-unit {
    min-height: 0 !important; height: auto !important; margin-bottom: 0 !important;
}
html body .stm_add_car_form .stm-location-input-wrap input,
html body .stm_add_car_form #stm-add-car-location,
html body .stm_add_car_form input.text_stm_lat,
html body .stm_add_car_form input.text_stm_lng {
    width: 100% !important; height: 50px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    line-height: 1.2 !important;
}
html body .stm_add_car_form .stm-link-lat-lng-wrap {
    grid-column: 1 / -1; margin: 0; padding: 0;
}
html body .stm_add_car_form .stm-link-lat-lng-wrap a {
    color: var(--af-accent) !important; font: 600 13px/1.3 var(--afa-font); text-decoration: none;
}

/* features: one row of four on desktop, 2 + 2 on tablet and phone */
html body .stm_add_car_form .stm-form-2-features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}
html body .stm_add_car_form .stm-single-feature { padding: 20px !important; }
html body .stm_add_car_form .feature-single label,
html body .stm_add_car_form .feature-single span { padding: 8px 0; font-size: 13.5px; }

/* upload tile: clearly visible on dark, same as on light */
html body .stm_add_car_form .stm-media-car-gallery {
    min-height: 0 !important; height: auto !important; padding: 0 !important;
}
html body .stm_add_car_form .stm-placeholder,
html body .stm_add_car_form .stm-placeholder .inner {
    min-width: 0;
}
html body .stm_add_car_form .stm-placeholder {
    width: 180px; height: 130px;
    background: var(--af-surface-2) !important;
    border: 1.5px dashed color-mix(in srgb, var(--af-ink) 30%, transparent) !important;
    border-radius: var(--afa-radius-sm) !important;
    transition: border-color .15s ease, transform .14s var(--afa-spring);
}
html body .stm_add_car_form .stm-placeholder:hover { border-color: var(--af-accent) !important; }
html body .stm_add_car_form .stm-placeholder .inner {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 100%; margin: 0; cursor: pointer;
}
html body .stm_add_car_form .stm-placeholder i {
    font-size: 30px; color: var(--af-ink-2) !important; background: transparent !important;
}
html body .stm_add_car_form .stm-placeholder__text {
    font: 600 12px/1 var(--afa-font); letter-spacing: .06em; text-transform: uppercase;
    color: var(--af-ink-2) !important;
}

/* seller avatar must stay inside its circle */
html body .stm_add_car_form .stm-add-a-car-user-wrapper .avatar,
html body .stm_add_car_form .stm-dealer-image-custom-view {
    width: 54px !important; height: 54px !important;
    flex: 0 0 54px;
    border-radius: 50% !important;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--af-surface-2) !important;
}
html body .stm_add_car_form .stm-add-a-car-user-wrapper .avatar a,
html body .stm_add_car_form .stm-dealer-image-custom-view a { display: block; width: 100%; height: 100%; }
html body .stm_add_car_form .stm-add-a-car-user-wrapper .avatar img,
html body .stm_add_car_form .stm-dealer-image-custom-view img {
    width: 100% !important; height: 100% !important;
    max-width: none; object-fit: cover; border-radius: 0 !important; margin: 0 !important;
}

/* breathing room above the footer */
html body .stm_add_car_form { margin-bottom: 50px; }
html body .stm_add_car_form .stm-form-checking-user { margin-bottom: 0 !important; }

@media (max-width: 991px) {
    html body .stm_add_car_form .stm-form-2-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    html body .stm_add_car_form .stm-form-2-features { gap: 12px; }
    html body .stm_add_car_form .stm-single-feature { padding: 14px !important; }
    html body .stm_add_car_form .feature-single label,
    html body .stm_add_car_form .feature-single span { font-size: 12.5px; gap: 8px; }
    html body .stm_add_car_form .stm-form1-intro-unit,
    html body .stm_add_car_form .stm-form-1-end-unit,
    html body .stm_add_car_form .stn-add-car-location-wrap,
    html body .stm_add_car_form .stm-add-videos-unit,
    html body .stm_add_car_form .stm-add-media-car,
    html body .stm_add_car_form .stm-form-5-notes > .row,
    html body .stm_add_car_form .stm-form-price-edit > .row { padding: 18px !important; }
}

/* location row: Motors makes each wrapper a fixed-height flex column, which
   squeezed the inputs to 21px and stacked the three wrappers */
html body .stm_add_car_form .stm-form-1-quarter.stm-location-search-unit {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
    align-items: start;
}
html body .stm_add_car_form .stm-location-input-wrap {
    display: flex !important; flex-direction: column !important;
    height: auto !important; min-height: 0 !important;
    float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;
}
html body .stm_add_car_form .stm-location-input-wrap > input,
html body .stm_add_car_form #stm-add-car-location {
    flex: 0 0 50px !important; height: 50px !important; min-height: 50px !important;
}
@media (max-width: 767px) {
    html body .stm_add_car_form .stm-form-1-quarter.stm-location-search-unit {
        grid-template-columns: 1fr !important;
    }
}

/* Motors forces display:flex on the features wrapper with a heavier selector */
html body .stm_add_car_form .stm-form-2-features {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
html body .stm_add_car_form .stm-form-2-features > .stm-car-listing-data-single { grid-column: 1 / -1 !important; }
html body .stm_add_car_form .stm-form-2-features > .stm-single-feature { width: auto !important; max-width: none !important; }
@media (max-width: 991px) {
    html body .stm_add_car_form .stm-form-2-features { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* the location block sits inside the secondary-fields card — no second card */
html body .stm_add_car_form .stm-form-1-end-unit .stn-add-car-location-wrap {
    grid-column: 1 / -1;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--af-line) !important;
    border-radius: 0 !important;
    padding: 22px 0 0 !important;
    margin: 4px 0 0 !important;
}
html body .stm_add_car_form .stm-location-input-wrap .stm-label {
    justify-content: flex-start; text-align: left; padding-left: 2px !important;
}

/* tighter checkbox rows so four tall columns don't run on forever */
html body .stm_add_car_form .feature-single label,
html body .stm_add_car_form .feature-single span { padding: 5px 0 !important; }

/* Motors leaves 46px under the gallery and 15px under each tile — that was
   the empty strip below "Add image" */
html body .stm_add_car_form .stm-media-car-gallery { margin-bottom: 0 !important; }
html body .stm_add_car_form .stm-media-car-gallery .stm-placeholder,
html body .stm_add_car_form .stm-media-car-gallery .stm-image-unit { margin: 0 14px 0 0 !important; }
html body .stm_add_car_form .stm-media-car-gallery .inner,
html body .stm_add_car_form .stm-media-car-gallery .stm-placeholder > label { box-shadow: none !important; }

/* "Add image" tile: ONE box. Motors draws a second filled rectangle (the
   <label class="inner">) inside the dashed placeholder, offset and taller,
   which read as a doubled frame. */
html body .stm_add_car_form .stm-media-car-gallery .stm-placeholder {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
}
html body .stm_add_car_form .stm-media-car-gallery .stm-placeholder .inner,
html body .stm_add_car_form .stm-media-car-gallery .stm-placeholder > label {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important; height: 100% !important;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body .stm_add_car_form .stm-media-car-gallery .stm-placeholder::before,
html body .stm_add_car_form .stm-media-car-gallery .stm-placeholder::after,
html body .stm_add_car_form .stm-media-car-gallery .stm-placeholder .inner::before,
html body .stm_add_car_form .stm-media-car-gallery .stm-placeholder .inner::after { display: none !important; content: none !important; }

/* ── profile sidebar, pass 3 ─────────────────────────── */
/* avatar: image in a 56px circle; the camera glyph becomes a small badge on
   its corner instead of a second big icon stacked underneath */
html body .stm-user-private .stm-user-avatar {
    position: relative;
    width: 56px; height: 56px; flex: 0 0 56px;
}
html body .stm-user-private .stm-image-avatar {
    display: block;
    position: relative;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--af-surface-2);
    overflow: visible;
}
html body .stm-user-private .stm-image-avatar .img-avatar {
    width: 56px !important; height: 56px !important;
    border-radius: 50%; object-fit: cover; display: block;
}
html body .stm-user-private .stm-image-avatar .stm-empty-avatar-icon {
    position: absolute !important;
    right: -3px !important; bottom: -3px !important; top: auto !important; left: auto !important;
    width: 22px !important; height: 22px !important; min-width: 0;
    margin: 0 !important; padding: 0 !important;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--af-surface-2) !important;
    border: 2px solid var(--af-surface);
    color: var(--af-ink-2) !important;
    font-size: 10px; line-height: 1;
}
html body .stm-user-private .stm-image-avatar .stm-empty-avatar-icon i { margin: 0 !important; font-size: 10px; }

/* "Show my Public Profile": icon inside the pill, text on one line */
html body .stm-user-private .show-my-profile a {
    display: flex !important;
    align-items: center; justify-content: center;
    gap: 8px; white-space: nowrap;
    height: 44px; min-height: 44px; padding: 0 14px;
}
html body .stm-user-private .show-my-profile a i {
    position: static !important; float: none !important;
    margin: 0 !important; left: auto !important; top: auto !important;
    font-size: 13px;
}
html body .stm-user-private .show-my-profile a { gap: 0 !important; }
html body .stm-user-private .show-my-profile a i {
    margin: 0 9px 0 0 !important; width: auto !important; flex: 0 0 auto;
}

/* "View more" under a listing card (phones): label was near-black on the red
   button in both themes, and invisible on the dark one */
html body a.stm-car-view-more,
html body .stm-user-private a.stm-car-view-more.button {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 100%; height: 50px;
    margin: 14px 0 0;
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--af-accent) !important;
    color: var(--af-accent-ink) !important;
    font: 700 14px/1 var(--afa-font) !important;
    text-transform: none !important;
    letter-spacing: 0;
    text-decoration: none;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--af-accent) 28%, transparent);
    transition: transform .14s var(--afa-spring), opacity .14s ease;
}
html body a.stm-car-view-more:active { transform: scale(.97); opacity: .85; }
html body a.stm-car-view-more * { color: inherit !important; }

/* "Show my Public Profile": full width of the card (phones left it as a short
   pill hanging off the left edge) */
html body .stm-user-private .show-my-profile {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    text-align: center;
}
html body .stm-user-private .show-my-profile a {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    justify-content: center;
}

/* Motors pads this link 33px left / 15px right (room for its own icon), which
   pushed the icon + label 9px off-centre inside the pill on every width. */
html body .stm-user-private .show-my-profile a {
    padding-left: 16px !important;
    padding-right: 16px !important;
    text-indent: 0 !important;
    text-align: center !important;
    background-image: none !important;
}

/* Motors shows this link on phones only (Bootstrap .visible-xs). My display
   rule above must not turn it on for tablets and desktops. */
@media (min-width: 768px) {
    html body a.stm-car-view-more.visible-xs,
    html body .stm-user-private a.stm-car-view-more.button.visible-xs { display: none !important; }
}

/* profile listing card: same fixed price tag, no hover jump */
html body .stm-user-private .listing-list-loop:hover { transform: none !important; }
html body .stm-user-private .listing-list-loop .price::before,
html body .stm-user-private .listing-list-loop .price::after { content: none !important; display: none !important; }