/* Saved searches on the live listings (templates/new-design/partials/saved-searches.html, the Save search
   block in templates/listing-sidebar.html, static/js/saved-searches.js). Values come from the SS1 boards
   on the Vehicle Card Redesign canvas (Krish, 2026-10-10). Scoped to .ss-*; loaded after
   listing-filters.css, whose tokens it repeats. */

.ss-row, .ss-save, .ss-manage, .ss-toast, .ss-empty, .ss-btn, .ss-foot-note, .ss-results-btn {
    --ss-ink: #19284A;
    --ss-soft: #4A5468;
    --ss-muted: #5B6478;
    --ss-line: #E3E6EC;
    --ss-rule: #EEF0F4;
    --ss-brand: #5B2FC9;
    --ss-tint: #F4F1FC;
    font-family: var(--ff-primary, 'Poppins', sans-serif);
}
.ss-icon { flex-shrink: 0; display: block; }

/* ---------------------------------------------------------------- buttons */
.ss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border: 1.5px solid var(--ss-brand);
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
}
.ss-btn--tint { background: var(--ss-tint); color: var(--ss-brand); }
.ss-btn--primary { background: var(--ss-brand); color: #FFFFFF; }
.ss-btn:disabled { opacity: 0.6; cursor: progress; }
.ss-btn:focus-visible, .ss-link:focus-visible, .ss-chip:focus-visible { outline: 2px solid var(--ss-brand); outline-offset: 2px; }
.ss-link {
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-weight: 600;
    color: var(--ss-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.ss-link--quiet { color: var(--ss-muted); }

/* One Save search button per place, worded by state (static/js/saved-searches.js). Saved: the bell fills.
   Edited: the main action becomes Save changes, filled purple, with a check. */
.ss-save__check { display: none; }
[data-ss-action="main"][data-state="saved"] .ss-icon { fill: currentColor; }
[data-ss-action="main"][data-state="edited"] { background: var(--ss-brand); color: #FFFFFF; }
[data-ss-action="main"][data-state="edited"] .ss-save__bell { display: none; }
[data-ss-action="main"][data-state="edited"] .ss-save__check { display: block; }

/* ---------------------------------------------------------------- Save search at the top of the filters */
/* At the end of the filters, stuck to the bottom of the screen while they are in view: buyers scroll down
   through the filters, and it stays in reach the whole way. */
.ss-save {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px -18px -18px;
    padding: 14px 18px 16px;
    border-top: 1px solid var(--ss-line);
    border-radius: 0 0 16px 16px;
    background: #FFFFFF;
    box-shadow: 0 -8px 16px rgba(16, 24, 40, 0.06);
}
.ss-save__main { width: 100%; }
.ss-save__main [data-ss-label] { overflow: hidden; text-overflow: ellipsis; }
.ss-save__note { margin: 0; font-size: 13px; line-height: 18px; color: var(--ss-muted); }
.ss-save__note[hidden], .ss-foot-note[hidden] { display: none; }

/* The phone sheet's footer: Save search beside Show N cars, its line above. */
.lf-sheet-foot__row { display: flex; gap: 10px; }
.lf-sheet-foot__row .lf-btn--primary { flex: 1; width: auto; min-width: 0; }
.ss-foot-btn { flex-shrink: 0; height: 52px; border-radius: 12px; font-size: 16px; }
.ss-foot-note { margin: 0 0 10px; font-size: 13px; line-height: 18px; color: var(--ss-muted); text-align: center; }
.ss-foot-note b { color: var(--ss-ink); }

/* Phones only: Save search by the car count. */
.ss-results-btn { display: none; height: 36px; padding: 0 12px; }
/* Hidden until a filter is on (static/js/saved-searches.js); beats the display each one sets. */
.ss-save[hidden], [data-ss-action="main"][hidden], .ss-manage-btn[hidden] { display: none !important; }

/* Computers: Saved searches beside Filter opens Manage, so the row's own Manage link would repeat it. A phone has
   no room beside Filter (the car count and Save search share that line) and keeps the row's link. */
#default_hide_div .ss-manage-btn { margin-left: 10px; vertical-align: middle; }
@media (min-width: 768px) {
    .ss-row > .ss-link, .ss-row__rule { display: none; }
}

/* ---------------------------------------------------------------- the saved-search row */
.ss-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--ss-rule);
    border-radius: 14px;
    background: #F7F8FA;
}
.ss-row[hidden] { display: none; }
.ss-row__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ss-muted);
}
.ss-row > .ss-link { font-size: 14px; white-space: nowrap; }
.ss-row__rule { flex-shrink: 0; width: 1px; height: 24px; margin: 0 4px; background: var(--ss-line); }
.ss-row__chips { display: flex; gap: 10px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ss-row__chips::-webkit-scrollbar { display: none; }
.ss-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    height: 40px;
    padding: 0 14px;
    border: 1.5px solid var(--ss-line);
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ss-ink);
    text-decoration: none;
    box-sizing: border-box;
}
.ss-chip:hover { border-color: var(--ss-ink); color: var(--ss-ink); text-decoration: none; }
.ss-chip__count { font-weight: 500; color: var(--ss-muted); }
/* The saved search being looked at: filled purple, its bell filled. */
.ss-chip.is-active, .ss-chip.is-active:hover { border-color: var(--ss-brand); background: var(--ss-brand); color: #FFFFFF; }
.ss-chip.is-active .ss-icon { fill: currentColor; }
.ss-chip.is-active .ss-chip__count { color: #FFFFFF; opacity: 0.85; }
.ss-chip__close { margin-left: 2px; font-size: 18px; line-height: 1; font-weight: 500; opacity: 0.9; }
.ss-chip__edited {
    padding: 1px 8px;
    border-radius: 999px;
    background: #FFF1D1;
    color: #7A4D00;
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
}

/* ---------------------------------------------------------------- Manage */
/* A computer: in the filters' place in their column (static/js/saved-searches.js moves it there). Scrolled
   to (Edit filters, Manage) clear of the site's top banner. */
#col-lg-3 .lf-wrap { scroll-margin-top: 110px; }
.lf-wrap.ss-managing > .lf { display: none; }
.ss-manage.is-inline { position: static; inset: auto; z-index: auto; }
.ss-manage.is-inline .ss-manage__scrim, .ss-manage.is-inline .ss-manage__grip { display: none; }
.ss-manage.is-inline .ss-manage__panel {
    position: static;
    width: auto;
    max-width: none;
    padding: 18px;
    overflow: visible;
    border: 1px solid var(--ss-line);
    border-radius: 16px;
    box-shadow: none;
    gap: 14px;
    scroll-margin-top: 110px;
}
.ss-manage.is-inline .ss-manage__title { font-size: 18px; line-height: 26px; }
/* A phone, or a page without the filters' column: a sheet over the page. */
/* Above everything, HubSpot's top pop-up banner included (seen on dev, 2026-10-10). The script moves it
   to the end of <body>, out of the listing's stacking context. */
.ss-manage { position: fixed; inset: 0; z-index: 2147483000; }
.ss-manage[hidden] { display: none; }
.ss-manage__scrim { position: absolute; inset: 0; background: rgba(12, 16, 28, 0.45); }
.ss-manage__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 460px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: #FFFFFF;
    box-shadow: 12px 0 40px rgba(12, 16, 28, 0.25);
    color: var(--ss-ink);
}
.ss-manage__grip { display: none; }
.ss-manage__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ss-manage__title { margin: 0; font-size: 22px; line-height: 30px; font-weight: 700; color: var(--ss-ink); }
.ss-manage__sub { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--ss-soft); }
.ss-manage__close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: #F3F3F3;
    color: var(--ss-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ss-manage__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ss-manage__empty, .ss-manage__foot { margin: 0; font-size: 13px; line-height: 19px; color: var(--ss-muted); }
.ss-manage__empty[hidden] { display: none; }
body.ss-manage-open { overflow: hidden; }

.ss-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 8px 12px 16px;
    border: 1px solid var(--ss-line);
    border-radius: 14px;
    background: #FFFFFF;
}
.ss-item.is-active { border: 1.5px solid var(--ss-brand); }
.ss-item__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ss-tint);
    color: var(--ss-brand);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ss-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ss-item__name { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ss-ink); text-decoration: none; overflow-wrap: anywhere; }
.ss-item__name:hover { color: var(--ss-ink); text-decoration: underline; }
.ss-item__meta { font-size: 13px; line-height: 19px; color: var(--ss-muted); }
.ss-item__see { align-self: flex-start; padding-top: 4px; font-size: 14px; font-weight: 600; color: var(--ss-brand); text-decoration: none; }
.ss-item__see:hover { color: var(--ss-brand); text-decoration: underline; }
.ss-item__more { position: relative; flex-shrink: 0; }
.ss-item__dots {
    width: 44px;
    height: 44px;
    margin-top: -6px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--ss-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ss-item__dots[aria-expanded="true"] { background: #F4F5F8; }
.ss-item__menu {
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 2;
    width: 200px;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid var(--ss-line);
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 12px 28px rgba(12, 16, 28, 0.18);
}
.ss-item__menu[hidden] { display: none; }
.ss-item__menu > button, .ss-item__menu > a {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
    border: none;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ss-ink);
    text-decoration: none;
    cursor: pointer;
}
.ss-item__menu > button:hover, .ss-item__menu > a:hover { background: #F4F5F8; color: var(--ss-ink); }
.ss-item__menu .is-danger { color: #A3122A; }
.ss-rename { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ss-rename__input {
    flex: 1 1 100%;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1.5px solid var(--ss-line);
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    color: var(--ss-ink);
}
.ss-rename__input:focus { border-color: var(--ss-brand); outline: none; }
.ss-rename__save { height: 40px; }

/* ---------------------------------------------------------------- the confirmation */
.ss-toast {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 10001;
    width: min(470px, calc(100vw - 32px));
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 8px 14px 16px;
    border-radius: 14px;
    background: var(--ss-ink);
    color: #FFFFFF;
    box-shadow: 0 12px 32px rgba(12, 16, 28, 0.28);
}
.ss-toast[hidden] { display: none; }
.ss-toast__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1F9D61;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ss-toast.is-error .ss-toast__icon { background: #A3122A; }
.ss-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ss-toast__title { font-size: 15px; line-height: 22px; font-weight: 700; }
.ss-toast__text { font-size: 14px; line-height: 20px; color: #D5DAE4; overflow-wrap: anywhere; }
.ss-toast__undo {
    margin-top: 6px;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    text-decoration: underline;
    cursor: pointer;
}
.ss-toast__undo[hidden] { display: none; }
.ss-toast__close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-top: -10px;
    border: none;
    background: transparent;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ---------------------------------------------------------------- nothing matches yet */
.ss-empty {
    max-width: 640px;
    margin: 12px auto 8px;
    padding: 32px 28px;
    box-sizing: border-box;
    border: 1px solid var(--ss-line);
    border-radius: 20px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.ss-empty__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ss-tint);
    color: var(--ss-brand);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ss-empty__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ss-ink); }
.ss-empty__text { max-width: 480px; margin: 0; font-size: 14px; line-height: 21px; color: var(--ss-soft); }
.ss-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 4px; }
.ss-empty__actions .lf-btn--primary { width: auto; height: 48px; padding: 0 20px; font-size: 15px; }
.ss-empty__actions .lf-btn--ghost { height: 48px; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 767px) {
    /* The sheet's footer has Save search; the block at the top of the filters would repeat it. */
    .ss-save { display: none; }
    .ss-manage-btn { display: none !important; }
    /* Beside the car count, which keeps its place at the right: the Filter button covers the left. */
    .ss-results-btn { display: inline-flex; margin-left: -4px; }

    .ss-row { flex-wrap: wrap; padding: 10px 0 10px 12px; }
    .ss-row__rule { display: none; }
    .ss-row > .ss-link { margin-left: auto; padding-right: 12px; }
    .ss-row__chips { flex-basis: 100%; padding-right: 12px; }

    /* Manage rises from the bottom, within thumb reach. */
    .ss-manage__panel {
        top: 64px;
        right: 0;
        width: auto;
        padding: 8px 16px 20px;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 30px rgba(12, 16, 28, 0.25);
        gap: 14px;
    }
    .ss-manage__grip { display: block; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: #C9CED8; }

    .ss-toast { left: 16px; right: 16px; bottom: 16px; width: auto; }
    .ss-empty { padding: 24px 20px; }
    .ss-empty__actions { flex-direction: column; align-self: stretch; }
    .ss-empty__actions .lf-btn { width: 100%; }
}