/* Live import search: results header progress, site chips, import cards, end states, the "Keep browsing"
   bar and sheets (live-results.js), and the live card above the bottom navigation (live-search.js).
   Brand: Sora for prices and titles, Manrope for the rest, dark text on orange, 150–250 ms transitions. */

/* ---------------------------------------------------------------- header */
#s-results .rr-sub { margin-top: 1px; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#s-results .rr-sub[hidden] { display: none; }
#s-results .lr-stop {
  grid-column: 3; min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; border-radius: 12px;
  background: transparent; color: var(--muted); font: 700 14px/1 var(--font-sans); cursor: pointer;
  transition: background-color .2s ease-out, color .2s ease-out;
}
#s-results .lr-stop:hover { color: var(--ink); background: var(--surface2); }
#s-results .lr-stop[hidden] { display: none; }
#s-results .lr-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 9px; min-width: 0; padding-top: 2px; }
#s-results .lr-head[hidden] { display: none; }
#s-results .lr-bar { height: 4px; border-radius: 2px; background: var(--surface2); overflow: hidden; }
#s-results .lr-bar[hidden] { display: none; }
#s-results .lr-bar i { display: block; width: 3%; height: 100%; border-radius: 2px; background: var(--cta); transition: width .25s ease-out; }
#s-results .lr-stat { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 10px; row-gap: 1px; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.35; }
#s-results .lr-l { max-width: 100%; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* No room on one line (small phones, long words): the time left wraps under the count instead of cutting it. */
#s-results .lr-r { margin-inline-start: auto; max-width: 100%; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#s-results .lr-r:empty { display: none; }
#s-results .lr-head.lr-conn .lr-r { color: #B26B00; }
#s-results .lr-sites {
  display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  margin-inline: -10px -8px; padding-inline: 10px 8px; padding-bottom: 1px;
}
#s-results .lr-sites::-webkit-scrollbar { display: none; }
#s-results .lr-chip {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 16px;
  background: var(--surface2); color: var(--ink); font-size: 12.5px; font-weight: 700; white-space: nowrap;
  transition: background-color .2s ease-out, color .2s ease-out;
}
#s-results .lr-chip b { font-weight: 700; }
#s-results .lr-chip em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
#s-results .lr-chip em:empty { display: none; }
#s-results .lr-chip .lr-flag { display: inline-flex; }
#s-results .lr-chip .lr-flag:empty { display: none; }
#s-results .lr-chip .tm-flag { width: 18px; height: 13px; border-radius: 2px; }
#s-results .lr-chip .lr-dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }
#s-results .lr-chip.lr-run .lr-dot { display: block; animation: lr-pulse 1s ease-in-out infinite alternate; }
#s-results .lr-chip.lr-wait { color: var(--muted); }
#s-results .lr-chip.lr-ok em { color: var(--ink); font-weight: 800; }
#s-results .lr-chip.lr-no { color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
@keyframes lr-pulse { from { opacity: 1; } to { opacity: .35; } }

/* "N new cars": hangs under the sticky header, never pushes the list. */
#s-results .lr-new {
  position: absolute; top: calc(100% + 4px); left: 50%; z-index: 3; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px;
  background: #0B0F14; color: #FFF; font: 800 14px/1 var(--font-sans); white-space: nowrap; cursor: pointer;
  filter: drop-shadow(0 6px 14px rgba(11, 15, 20, .28)); animation: lr-in .2s ease-out;
}
#s-results .lr-new[hidden] { display: none; }
@keyframes lr-in { from { opacity: 0; } to { opacity: 1; } }

/* Importer tools row: sort on one side, Filtres on the other. */
#s-results .rr-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
#s-results .rr-tools[hidden] { display: none; }
#s-results .rr-tools .rr-sort-trigger { min-height: 44px; margin: 0; color: var(--ink); font-size: 14px; font-weight: 700; flex-wrap: nowrap; }
#s-results .rr-tools .rr-sort-trigger #sortLabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#s-results .rr-tools .rr-filters { flex: none; min-height: 44px; }
body.lr-running #s-results #count, body.lr-queue #s-results #count { display: none; }

/* ---------------------------------------------------------------- rows above the list */
#s-results .lr-rows { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
#s-results .lr-rows[hidden] { display: none; }
#s-results .lr-retry {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px;
  padding-block: 4px; padding-inline: 12px 6px; border-radius: 12px; background: var(--surface2); color: var(--ink);
}
#s-results .lr-retry-tx { min-width: 0; }
#s-results .lr-retry-tx b { display: block; font-size: 13px; font-weight: 700; line-height: 1.35; }
#s-results .lr-retry-tx small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
#s-results .lr-retry-tx small:empty { display: none; }
#s-results .lr-retry-btn {
  flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--surface); color: var(--ink);
  font: 800 13px/1 var(--font-sans); cursor: pointer;
}
#s-results .lr-retry-btn.busy, #s-results .lr-retry-btn:disabled { opacity: .55; cursor: default; }

/* ---------------------------------------------------------------- import cards (photo left, text right) */
#s-results .lc.lc-imp { display: flex; min-height: 112px; border-radius: 16px; }
#s-results .lc.lc-imp.lc-fresh { animation: lr-in .25s ease-out; }
#s-results .lc.lc-imp .tile { flex: none; width: 128px; aspect-ratio: auto; min-height: 112px; background: #E7E3DB; }
:root[data-theme="dark"] #s-results .lc.lc-imp .tile { background: var(--surface2); }
#s-results .lc.lc-imp .tile .photo-state { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; color: var(--muted); font-size: 11.5px; font-weight: 700; text-align: center; }
#s-results .lc.lc-imp .tile.loading .photo-state, #s-results .lc.lc-imp .tile.has .photo-state { opacity: 0; }
#s-results .lc.lc-imp .tile.instant img.photo { transition: none; }
#s-results .lc.lc-imp .body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 10px 12px; }
#s-results .lc.lc-imp .li-price { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
#s-results .lc.lc-imp .li-price .price { display: block; max-width: 100%; font-size: 18px; letter-spacing: -.02em; }
#s-results .lc.lc-imp .li-price small { display: block; margin-top: 1px; color: var(--muted); font-size: 12.5px; font-weight: 700; line-height: 1.3; }
#s-results .lc.lc-imp .li-price small:empty { display: none; }
#s-results .lc.lc-imp .li-meta { color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.35; }
#s-results .lc.lc-imp .li-meta span { white-space: nowrap; }
#s-results .lc.lc-imp .li-meta:empty { display: none; }
#s-results .lc.lc-imp .li-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
#s-results .lc.lc-imp .li-src { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--ink); }
#s-results .lc.lc-imp .li-src > span { min-width: 0; }
#s-results .lc.lc-imp .li-src .tm-flag { width: 18px; height: 13px; border-radius: 2px; flex: none; }
#s-results .lc.lc-imp .li-warn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
#s-results .lc.lc-imp .li-warn-unknown { background: color-mix(in srgb, var(--amber) 22%, var(--surface)); color: #7A4A00; }
#s-results .lc.lc-imp .li-warn-ko { background: color-mix(in srgb, var(--bad, #EF4444) 13%, var(--surface)); color: var(--bad, #C62828); }
:root[data-theme="dark"] #s-results .lc.lc-imp .li-warn-unknown { color: var(--amber); }
/* Skeletons: before the first car, and per photo until it has loaded. */
#s-results .lc.lc-skel { cursor: default; animation: none; }
#s-results .lc.lc-skel .sk { display: block; height: 11px; border-radius: 6px; background: var(--surface2); }
#s-results .lc.lc-skel .sk-a { width: 62%; height: 17px; }
#s-results .lc.lc-skel .sk-b { width: 40%; }
#s-results .lc.lc-skel .sk-c { width: 72%; }
#s-results .lc.lc-skel .sk-d { width: 34%; }
#s-results .lc .lr-shim { position: absolute; inset: 0; display: none; }
#s-results .lc .tile.loading .lr-shim, #s-results .lc.lc-skel .lr-shim { display: block; }
#s-results .lc .lr-shim::after, #s-results .lc.lc-skel .sk {
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  background-size: 200% 100%; background-repeat: no-repeat; animation: lr-shimmer 1.4s linear infinite;
}
#s-results .lc .lr-shim::after { content: ""; position: absolute; inset: 0; }
#s-results .lc.lc-skel .sk { background-color: var(--surface2); }
@keyframes lr-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* ---------------------------------------------------------------- end states */
#s-results .lr-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 18px; border-radius: 20px; background: var(--surface); text-align: center; list-style: none; }
#s-results .lr-empty h2 { margin: 6px 0 0; font: 800 18px/1.25 var(--font-display); color: var(--ink); }
#s-results .lr-empty p { margin: 0; max-width: 34ch; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.45; }
#s-results .lr-empty-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--surface2); }
#s-results .lr-empty-act { display: flex; flex-direction: column; gap: 8px; width: min(100%, 320px); margin-top: 10px; }
.lr-main, .lr-sec {
  min-height: 52px; padding: 0 18px; border-radius: 15px; font: 800 15px/1 var(--font-sans); cursor: pointer;
  transition: opacity .2s ease-out, background-color .2s ease-out;
}
.lr-main { border: 0; background: #0B0F14; color: #FFF; }
.lr-sec { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .lr-main { background: #FFF; color: #0B0F14; }
.lr-main.busy, .lr-sec.busy, .lr-main:disabled, .lr-sec:disabled { opacity: .6; cursor: default; }

/* ---------------------------------------------------------------- bottom bar while the search runs */
.lr-leave {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--surface); box-shadow: 0 -1px 0 var(--line);
  animation: lr-in .2s ease-out;
}
.lr-leave[hidden], body.lock .lr-leave { display: none; }
.lr-leave-tx { flex: 1; min-width: 0; margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.35; }
.lr-leave-btn {
  flex: none; min-height: 48px; padding: 0 18px; border: 0; border-radius: 24px; background: #0B0F14; color: #FFF;
  font: 800 14px/1 var(--font-sans); white-space: nowrap; cursor: pointer;
}
:root[data-theme="dark"] .lr-leave-btn { background: #FFF; color: #0B0F14; }
body.lr-running #s-results .rr-cards-container { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) {
  .lr-leave { left: 50%; right: auto; bottom: 16px; width: min(760px, calc(100% - 32px)); transform: translateX(-50%); padding: 10px 10px 10px 18px; border-radius: 18px; box-shadow: 0 10px 28px rgba(11, 15, 20, .14); }
  [dir="rtl"] .lr-leave { padding: 10px 18px 10px 10px; }
}

/* ---------------------------------------------------------------- sheets (Keep browsing · Stop · already running) */
.lr-sheet { display: flex; flex-direction: column; gap: 12px; padding: 2px 0 calc(6px + env(safe-area-inset-bottom, 0px)); }
.lr-sheet.hidden { display: none; }
.lr-sheet-sub { margin: 0; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.45; }
.lr-sheet-err { margin: 0; color: var(--bad, #C62828); font-size: 13px; font-weight: 700; }
.lr-sheet-err:empty { display: none; }
.lr-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 64px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--ink); text-align: start; cursor: pointer;
}
.lr-opt:disabled { cursor: default; }
.lr-opt-tx { min-width: 0; }
.lr-opt-tx b { display: block; font-size: 15px; font-weight: 800; }
.lr-opt-tx small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.lr-sw { position: relative; flex: none; width: 46px; height: 28px; border-radius: 14px; background: var(--line); transition: background-color .2s ease-out; }
.lr-sw i { position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s ease-out; }
.lr-opt.on .lr-sw { background: var(--cta); }
.lr-opt.on .lr-sw i { transform: translateX(18px); }
[dir="rtl"] .lr-opt.on .lr-sw i { transform: translateX(-18px); }

/* ---------------------------------------------------------------- live card above the navigation */
.tm-live-card {
  position: fixed; left: 0; right: 0; bottom: calc(86px + env(safe-area-inset-bottom, 0px) + var(--tm-nav-lift, 0px)); z-index: 89;
  display: flex; align-items: center; gap: 11px; width: calc(100% - 20px); max-width: 410px; min-height: 60px; margin: 0 auto;
  padding-block: 8px; padding-inline: 10px 12px; border: 0; border-radius: 16px; overflow: hidden; box-sizing: border-box;
  background: #FFF; color: #0B0F14; text-align: start; font-family: var(--font-sans); cursor: pointer;
  box-shadow: 0 8px 24px rgba(11, 15, 20, .2); animation: lr-card-in .22s ease-out;
  transition: background-color .2s ease-out, color .2s ease-out, bottom .2s ease;
}
.tm-live-card[hidden], body.lock .tm-live-card, .imf-open .tm-live-card { display: none; }
/* Swiped sideways: follows the finger (vertical moves still scroll the page), then leaves or springs back. */
.tm-live-card { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tm-live-card.tlc-drag { transition: none; }
.tm-live-card.tlc-settle { transition: translate .22s ease-out, opacity .22s ease-out, background-color .2s ease-out, color .2s ease-out; }
@keyframes lr-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tm-live-card .tlc-media { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: #E7E3DB; color: #0B0F14; }
.tm-live-card .tlc-media img { width: 100%; height: 100%; object-fit: cover; }
.tm-live-card .tlc-tx { flex: 1; min-width: 0; }
.tm-live-card b { display: block; font: 800 14px/1.3 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-live-card .tlc-s { display: block; color: #5E646C; font-size: 13px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-live-card .tlc-go { flex: none; display: grid; place-items: center; width: 24px; color: inherit; }
[dir="rtl"] .tm-live-card .tlc-go svg { transform: scaleX(-1); }
.tm-live-card .tlc-pb { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #EEE9E1; }
.tm-live-card .tlc-pb i { display: block; height: 100%; width: 4%; background: #0B0F14; transition: width .25s ease-out; }
.tm-live-card:not(.tlc-run) .tlc-pb { display: none; }
.tm-live-card.tlc-ok { background: #0B0F14; color: #FFF; }
.tm-live-card.tlc-ok .tlc-s { color: #C8CBD0; }
.tm-live-card.tlc-ok .tlc-media { background: #FF5400; color: #0B0F14; }
@media (max-width: 899px) {
  /* Pages keep their last item and their bottom buttons above the card as well as the navigation. */
  body.has-primary-mobile-nav.tm-live-on { --bottom-nav-height: calc(148px + env(safe-area-inset-bottom, 0px) + var(--tm-nav-lift, 0px)); }
}
@media (min-width: 900px) {
  .tm-live-card { left: auto; right: 24px; bottom: 24px; width: 360px; max-width: calc(100% - 48px); margin: 0; }
  [dir="rtl"] .tm-live-card { right: auto; left: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  #s-results .lr-bar i, .tm-live-card .tlc-pb i, #s-results .lc.lc-imp .tile img.photo, .tm-live-card.tlc-settle { transition: none; }
  #s-results .lr-chip.lr-run .lr-dot, #s-results .lc .lr-shim::after, #s-results .lc.lc-skel .sk,
  #s-results .lc.lc-imp.lc-fresh, #s-results .lr-new, .lr-leave, .tm-live-card { animation: none; }
}
/* A live failure box (no site answered, no connection) replaces the list: no "0 annonces" summary above it. */
#p-results:has(#list .lr-empty) #count { display: none; }