/* Phone search screen of the « En Algérie » landing and of the results screen's field (local-search-assist.js):
   the field lifts to the top, the list fills the screen under it. Phones only (< 900px). From 900px the same
   list is a dropdown under the field (.lm-dd: the landing's search card and the results screen's search). */
.lm-sx{display:none}
@media (max-width:899px){
  /* The page stops scrolling behind the screen. Only the root: an overflow on body as well would make body
     the scroller and un-stick the locked top bar, search and chips behind it (seen while the screen fades). */
  html.lm-sx-on{overflow:hidden}
  .lm-sx{
    position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;
    background:var(--hm-s,#F5F3EE);color:var(--hm-a,#0B0F14);
    font-family:"Manrope","IBM Plex Sans Arabic",system-ui,-apple-system,sans-serif;
    opacity:0;transition:opacity .22s ease;
  }
  .lm-sx[hidden]{display:none}
  .lm-sx.in{opacity:1}
  /* Room for the lifted field (it stays the page's own form, fixed above this sheet) + « Annuler ». */
  .lm-sx-top{
    position:relative;flex:none;box-sizing:border-box;
    height:calc(env(safe-area-inset-top, 0px) + 8px + var(--lm-sx-field-h, 52px) + 10px);
    box-shadow:0 1px 0 var(--hm-l,#E6E2DA);
  }
  .lm-sx-done{
    position:absolute;inset-inline-end:6px;bottom:10px;height:var(--lm-sx-field-h, 52px);padding:0 10px;
    border:0;background:none;color:var(--hm-o,#FF5400);font:800 16px/1 "Manrope","IBM Plex Sans Arabic",system-ui,sans-serif;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    opacity:0;transform:translateX(12px);transition:opacity .2s ease .08s,transform .26s ease .04s;
  }
  [dir="rtl"] .lm-sx-done{transform:translateX(-12px)}
  .lm-sx.in .lm-sx-done{opacity:1;transform:none}
  .lm-sx-done:active{opacity:.6}
  .lm-sx-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 0 calc(28px + env(safe-area-inset-bottom, 0px))}
  .lm-sx-list{transform:translateY(8px);transition:transform .26s ease}
  .lm-sx.in .lm-sx-list{transform:none}

  /* The page's own form (landing or results top bar), lifted to the top while the sheet is open. */
  .lm-sx-spacer{flex:none}
  :is(#local-market .lm-search, #lmrSearch).lm-sx-form{
    position:fixed;z-index:96;top:calc(env(safe-area-inset-top, 0px) + 8px);inset-inline:14px;margin:0;
    transition:transform .34s cubic-bezier(.2,.85,.25,1),inset-inline-end .26s ease;
  }
  :is(#local-market .lm-search, #lmrSearch).lm-sx-form.lm-sx-in{inset-inline-end:calc(14px + var(--lm-sx-done-w, 84px))}
  :is(#local-market .lm-search, #lmrSearch).lm-sx-out{transition:transform .28s cubic-bezier(.4,0,.2,1),inset-inline-end .2s ease}
  /* Results screen: the field lives in the sticky top bar, its own layer (z-index 10, under the sheet). While the
     sheet is open the bar goes above it but shows only the lifted field: the rest is hidden and lets taps through
     (« Annuler » sits inside the bar's box). The spacer keeps the field's row in the wrapping bar. */
  .lmr-top.lm-sx-host{z-index:96;background:transparent;border-bottom-color:transparent;pointer-events:none}
  .lmr-top.lm-sx-host > :not(.lmr-nav),.lmr-top.lm-sx-host .lmr-nav > :not(#lmrSearch, .lm-sx-spacer){visibility:hidden}
  .lmr-top.lm-sx-host #lmrSearch{pointer-events:auto}
  .lmr-nav > .lm-sx-spacer{flex:1 1 100%;order:3}

  .lm-sx-sec{margin:10px 14px 0}
  .lm-sx-h{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;padding:0 4px}
  .lm-sx-h h2{margin:0;font:800 15px/1.2 "Manrope","IBM Plex Sans Arabic",system-ui,sans-serif;color:var(--hm-a,#0B0F14)}
  .lm-sx-clear{min-height:36px;padding:0 4px;border:0;background:none;color:var(--hm-m,#5B5F66);font:700 14px/1 "Manrope","IBM Plex Sans Arabic",system-ui,sans-serif;cursor:pointer}
  .lm-sx-card{overflow:hidden;border-radius:16px;background:#FFF;box-shadow:inset 0 0 0 1px var(--hm-l,#E6E2DA)}
  .lm-sx-row{
    display:flex;align-items:center;gap:12px;width:100%;min-height:54px;margin:0;padding:10px 16px;box-sizing:border-box;
    border:0;border-top:1px solid var(--hm-l,#E6E2DA);background:none;color:var(--hm-a,#0B0F14);text-align:start;
    font:600 16px/1.3 "Manrope","IBM Plex Sans Arabic",system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .lm-sx-row:first-child{border-top:0}
  .lm-sx-row:active{background:var(--hm-s,#F5F3EE)}
  .lm-sx-row ph-icon{flex:none;color:var(--hm-m,#5B5F66)}
  .lm-sx-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lm-sx-name i{font-style:normal;color:var(--hm-m,#5B5F66);padding:0 2px}
  .lm-sx-name u{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;font-weight:800}
  .lm-sx-name em{margin-inline-start:8px;padding:3px 8px;border-radius:999px;background:var(--hm-s,#F5F3EE);font:800 13px/1 "Manrope",system-ui,sans-serif;font-style:normal;color:var(--hm-a,#0B0F14);vertical-align:1px}
  .lm-sx-row small{flex:none;font:600 14px/1 "Manrope","IBM Plex Sans Arabic",system-ui,sans-serif;color:var(--hm-m,#5B5F66);font-variant-numeric:tabular-nums}
  .lm-sx-free{color:var(--hm-a,#0B0F14);font-weight:700}
  .lm-sx-free ph-icon{color:var(--hm-o,#FF5400)}
  .lm-sx-wait{display:grid;gap:10px;margin:16px 14px 0}
  .lm-sx-wait i{display:block;height:48px;border-radius:14px;background:linear-gradient(90deg,#ECE8E0,#F7F5F0,#ECE8E0);background-size:200% 100%;animation:lm-sx-shine 1.2s linear infinite}
  @keyframes lm-sx-shine{to{background-position:-200% 0}}
  @media (prefers-reduced-motion:reduce){
    .lm-sx,.lm-sx-done,.lm-sx-list,:is(#local-market .lm-search, #lmrSearch).lm-sx-form{transition:none}
    .lm-sx-wait i{animation:none}
  }
}

/* ---- Desktop dropdown (≥ 900px) ----------------------------------------------------------------
   White card under the field: hairline-separated rows, the make/model in bold (typed beginnings in
   regular weight), « Voitures à vendre › Make » under it, the count on the right. */
.lm-dd[hidden]{display:none}
@media (min-width:900px){
  #local-market .lm-search{position:relative}
  #local-market .lm-search > .lm-dd{position:absolute;top:calc(100% + 8px);inset-inline:0;z-index:60}
  .lm-dd{
    box-sizing:border-box;max-height:min(520px,calc(100vh - 200px));overflow-y:auto;overscroll-behavior:contain;
    padding:6px 0;border:1px solid var(--tm-border,#E6E2DA);border-radius:16px;background:#FFF;
    box-shadow:0 24px 60px -24px rgba(11,15,20,.32),0 2px 6px rgba(11,15,20,.05);
    color:var(--tm-ink,#0B0F14);text-align:start;
    font-family:"Manrope","IBM Plex Sans Arabic",system-ui,-apple-system,sans-serif;
  }
  .lm-dd-sec + .lm-dd-sec{margin-top:6px;padding-top:6px;border-top:1px solid #EEEBE4}
  .lm-dd-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 20px 6px}
  .lm-dd-h > span{font:800 12px/1.2 "Manrope","IBM Plex Sans Arabic",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--tm-muted,#5B5F66)}
  .lm-dd-clear{padding:2px 0;border:0;background:none;color:var(--tm-muted,#5B5F66);font:700 13px/1 "Manrope","IBM Plex Sans Arabic",system-ui,sans-serif;cursor:pointer}
  .lm-dd-clear:hover{color:var(--tm-ink,#0B0F14);text-decoration:underline}
  .lm-dd-row{
    position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:58px;margin:0;padding:10px 20px;box-sizing:border-box;
    border:0;background:none;color:inherit;text-align:start;font:inherit;cursor:pointer;
  }
  /* hairlines between rows, inset like the text; none next to the highlighted row */
  .lm-dd-row + .lm-dd-row::before{content:"";position:absolute;top:0;inset-inline:20px;border-top:1px solid #EEEBE4}
  .lm-dd-row:hover,.lm-dd-row[aria-selected="true"]{background:#F6F4EF}
  .lm-dd-row:is(:hover,[aria-selected="true"])::before,.lm-dd-row:is(:hover,[aria-selected="true"]) + .lm-dd-row::before{border-top-color:transparent}
  .lm-dd-row ph-icon{flex:none;color:var(--tm-muted,#5B5F66)}
  .lm-dd-free ph-icon{color:var(--tm-orange,#FF5400)}
  .lm-dd-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .lm-dd-name,.lm-dd-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lm-dd-name{font:800 15.5px/1.3 "Manrope","IBM Plex Sans Arabic",system-ui,sans-serif;color:var(--tm-ink,#0B0F14)}
  .lm-dd-name u{text-decoration:none;font-weight:500}
  .lm-dd-free .lm-dd-name,.lm-dd-recent .lm-dd-name{font-weight:700}
  .lm-dd-name em{margin-inline-start:8px;padding:3px 8px;border-radius:999px;background:#F2EFE9;font:800 12.5px/1 "Manrope",system-ui,sans-serif;font-style:normal;vertical-align:1px}
  .lm-dd-sub{font:500 13px/1.3 "Manrope","IBM Plex Sans Arabic",system-ui,sans-serif;color:var(--tm-muted,#5B5F66)}
  .lm-dd-sub i{font-style:normal;padding:0 2px}
  .lm-dd-n{flex:none;font:700 14px/1 "Manrope","IBM Plex Sans Arabic",system-ui,sans-serif;color:#C94300;font-variant-numeric:tabular-nums;white-space:nowrap}
  .lm-dd-wait{display:grid;gap:8px;padding:10px 20px}
  .lm-dd-wait i{display:block;height:44px;border-radius:12px;background:linear-gradient(90deg,#ECE8E0,#F7F5F0,#ECE8E0);background-size:200% 100%;animation:lm-dd-shine 1.2s linear infinite}
  @keyframes lm-dd-shine{to{background-position:-200% 0}}
  @media (prefers-reduced-motion:reduce){.lm-dd-wait i{animation:none}}

  /* results screen: the search segment's panel is this dropdown */
  .lmr-pop.lmr-pop-search.lm-dd{display:block;gap:0;width:max(100%,460px);min-width:0;max-width:calc(100vw - 48px);padding:6px 0;border-radius:16px}
  .lmr-pop.lmr-pop-search.lm-dd[hidden]{display:none}
}