/* Arzaq / أرزاق — the feed (index.html + listings.html). Loaded after styles.css.
   Phone (≤ 859px): the app's Home. Tablet (860–1023px): icon category bar + chips. Desktop (≥ 1024px): Haraj-style with a side column. */

#feedRoot { display: block; }

/* ---------- header search (≥ 860px; phones use the Search tab) ---------- */
.hdr-search { display: none; }
.fd-search {
  flex: 1; min-width: 0; display: flex; align-items: center; height: 46px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 14px; overflow: hidden;
}
.fd-search:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.fd-search input { flex: 1; min-width: 0; height: 100%; padding-inline: 18px; border: 0; background: transparent; font-size: 1rem; outline: 0; }
.fd-search input::placeholder { color: var(--muted); opacity: 1; }
.fd-search-go { display: grid; place-items: center; width: 58px; height: 100%; background: var(--bg-alt); border: 0; border-inline-start: 1px solid var(--line); color: var(--accent); cursor: pointer; }
.fd-search-go:hover { background: var(--gold-soft); }
.fd-search-go .i { width: 22px; height: 22px; }

/* ---------- phone circle shortcuts ---------- */
.fd-quick { background: var(--bg); }
.fd-quick ul { display: flex; gap: 14px; padding: 12px 14px 6px; overflow-x: auto; scrollbar-width: none; justify-content: center; }
.fd-quick ul::-webkit-scrollbar { display: none; }
.fd-q { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; padding: 0; background: none; border: 0; color: var(--muted); }
.fd-q-ring { display: block; width: 68px; height: 68px; padding: 3px; border-radius: 50%; border: 2px solid var(--gold); overflow: hidden; background-clip: content-box; transition: border-color .2s; }
.fd-q-ring img, .fd-q-emo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.fd-q-emo { display: grid; place-items: center; background: var(--panel); font-size: 1.65rem; }
.fd-q-label { font-size: .8rem; line-height: 1.2; font-weight: 500; }
.fd-q.is-on .fd-q-ring { border: 3px solid var(--accent); }
.fd-q.is-on .fd-q-label { color: var(--accent); font-weight: 800; }

/* ---------- sticky block: category tabs + chips + filter row ---------- */
.fd-sticky { position: sticky; inset-block-start: calc(var(--header-h, 76px) - 1px); z-index: 40; background: var(--surface); border-block-end: 1px solid var(--line); }
.fd-cats-wrap.container { width: 100%; }
.fd-cats-in { position: relative; display: flex; overflow-x: auto; scrollbar-width: none; padding-inline: 6px; height: 50px; }
.fd-cats-in::-webkit-scrollbar { display: none; }
.fd-cat {
  position: relative; flex: none; display: flex; align-items: center; padding: 0 14px; background: none; border: 0; color: var(--line-strong);
  font-size: 1.06rem; font-weight: 800; white-space: nowrap;
}
.fd-cat.is-on { color: var(--accent); }
.fd-cat.is-on::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 50%; margin-inline-start: -18px; width: 36px; height: 3px;
  background: var(--accent-2); border-radius: 3px 3px 0 0;
}
.fd-cat-ico { display: none; }
.fd-cat:focus-visible { outline-offset: -4px; }

.fd-chiprows { display: grid; }
.fd-chiprow { display: flex; gap: 8px; height: 48px; padding: 6px 12px; overflow-x: auto; scrollbar-width: none; align-items: center; }
.fd-chiprow::-webkit-scrollbar { display: none; }
.fd-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: 0; border-radius: 9px; background: var(--bg-alt);
  color: var(--text-2); font-weight: 700; font-size: .9rem; white-space: nowrap; transition: background-color .15s, color .15s;
}
.fd-chip:hover { background: var(--gold-soft); }
.fd-chip.is-on { background: var(--accent); color: var(--bg); }
.fd-chip:focus-visible { outline-offset: 2px; }
.fd-save { margin: 6px 0 2px; }
.fd-savebtn { gap: 6px; }
.fd-savebtn .i { width: 16px; height: 16px; }
.fd-x { height: 34px; padding-inline: 12px 8px; background: var(--green-tint); color: var(--accent); }
.fd-x .i { width: 15px; height: 15px; opacity: .75; }
.fd-x:hover .i { opacity: 1; color: var(--danger); }

/* filter row (city / filters / sort); the desktop bar adds the quick toggles + the count */
.fd-bar-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; overflow-x: auto; scrollbar-width: none; }
.fd-bar-row::-webkit-scrollbar { display: none; }
.fd-pill {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: 9px;
  background: var(--bg-alt); color: var(--text-2); font-weight: 700; font-size: .9rem; white-space: nowrap; cursor: pointer; transition: background-color .15s;
}
.fd-pill:hover { background: var(--gold-soft); }
.fd-pill .i { width: 20px; height: 20px; color: var(--line-strong); }
.fd-pill.is-outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
.fd-pill.is-outline .i, .fd-pill.is-filled .i { color: inherit; }
.fd-pill.is-filled, .fd-tog.is-on { background: var(--accent); color: var(--bg); }
.fd-pill:focus-within, .fd-pill:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fd-select select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.fd-select .fd-chev { width: 18px; height: 18px; transform: rotate(90deg); }
.fd-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--accent-2); color: #fff; font-size: .72rem; }
:root[data-theme="dark"] .fd-badge { color: #06332E; }
.fd-tog .emo { font-size: 1rem; }
.fd-bar-sep { flex: none; width: 1px; height: 24px; background: var(--line); }
.fd-quick-pills { display: contents; }
.fd-bar-count { margin-inline-start: auto; padding-inline-start: 12px; color: var(--muted); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.fd-bar-gap { display: none; }
.fd-bar-row.has-car .fd-bar-gap { display: block; flex: 1 1 8px; min-width: 8px; }
.fd-bar-row.has-car .fd-bar-count { margin-inline-start: 0; }
.fd-bar-phone .fd-bar-sep, .fd-bar-phone .fd-quick-pills, .fd-bar-phone .fd-bar-count { display: none; }
.fd-bar-desk { display: none; }

/* ---------- body ---------- */
.fd-ablaq { display: none; }
.fd-layout.container { width: 100%; padding-inline: 12px; padding-block: 10px 28px; display: grid; gap: 18px; align-items: start; }
.fd-main { min-width: 0; }
.fd-side { display: none; }
.fd-active { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 2px 10px; }
.fd-feed { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.fd-feed > li { display: flex; min-width: 0; }
.fd-more { display: flex; justify-content: center; margin-block: 18px 6px; }
.fd-empty { margin-block-start: 10px; }
.fd-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-block-start: 8px; }

/* loading skeleton */
.fd-sk { position: relative; display: grid; gap: 10px; align-content: start; min-height: 148px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fd-sk span { display: block; height: 14px; border-radius: 6px; background: var(--bg-alt); }
.fd-sk .fd-sk-t { width: 70%; height: 18px; }
.fd-sk .fd-sk-l { width: 45%; }
.fd-sk .fd-sk-l.s { width: 30%; }
.fd-sk .fd-sk-p { width: 25%; height: 22px; }
.fd-sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--surface) 70%, transparent) 50%, transparent 80%); transform: translateX(-100%); animation: fdShimmer 1.3s infinite; }
[dir="rtl"] .fd-sk::after { animation-name: fdShimmerRtl; transform: translateX(100%); }
@keyframes fdShimmer { to { transform: translateX(100%); } }
@keyframes fdShimmerRtl { to { transform: translateX(-100%); } }

/* ---------- filter sheet ---------- */
.fd-sheet-tools { display: inline-flex; align-items: center; gap: 6px; }
.fd-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px 10px; overscroll-behavior: contain; }
.fd-fs { display: grid; gap: 10px; padding-block: 14px; border-block-end: 1px dashed var(--line); }
.fd-fs:last-child { border-block-end: 0; }
.fd-fs h3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 1rem; font-weight: 700; color: var(--text); }
.fd-fs h3::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--gold); }
.fd-fs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fd-fs-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fd-fs-switches { gap: 8px; }
.fd-field {
  width: 100%; min-height: 46px; padding: 0 14px; background: var(--bg); color: var(--text); border: 1px solid var(--line-strong); border-radius: 12px; font-variant-numeric: tabular-nums;
}
select.fd-field { padding-inline-end: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%237A5F22' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px; background-position: right 14px center; }
[dir="rtl"] select.fd-field { background-position: left 14px center; }
:root[data-theme="dark"] select.fd-field { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23D7C190' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fd-field:disabled { opacity: .55; cursor: not-allowed; }
.fd-sheet-foot { padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid var(--line); background: var(--surface); }
.fd-sheet-foot .btn { width: 100%; }

/* ---------- tablet + desktop (≥ 860px) ---------- */
@media (min-width: 860px) {
  .hdr-search { display: flex; flex: 1; min-width: 0; max-width: 760px; margin-inline: 8px 4px; }
  .fd-quick { display: none; }
  .fd-sticky { position: static; background: transparent; border: 0; }
  .fd-cats { background: var(--bg-alt); border-block: 1px solid var(--line); }
  .fd-cats-wrap.container { width: min(1200px, 100% - 64px); }
  .fd-cats-in { height: auto; padding: 10px 0; justify-content: space-between; gap: 4px; overflow-x: auto; }
  .fd-cat {
    flex-direction: column; justify-content: center; gap: 6px; min-width: 86px; padding: 10px 10px 9px; border-radius: 12px; border: 1px solid transparent;
    color: var(--text-2); font-size: .9rem; font-weight: 600; transition: background-color .15s, border-color .15s;
  }
  .fd-cat:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
  .fd-cat-ico { display: grid; place-items: center; width: 34px; height: 34px; color: var(--accent-2); }
  .fd-cat-ico .i { width: 30px; height: 30px; stroke-width: 1.5; }
  .fd-cat.is-on { background: var(--surface); border-color: var(--gold); color: var(--accent); font-weight: 800; box-shadow: var(--shadow); }
  .fd-cat.is-on .fd-cat-ico { color: var(--accent); }
  .fd-cat.is-on::after { display: none; }
  .fd-ablaq { display: block; }
  .fd-chiprows { width: min(1200px, 100% - 64px); margin-inline: auto; padding-block: 12px 12px; }
  .fd-chiprow { padding-inline: 0; }
  .fd-bar-phone { display: none; }
  .fd-bar-desk { display: block; }
  .fd-bar-desk .fd-bar-row { padding: 0 0 12px; overflow: visible; flex-wrap: wrap; }
  .fd-layout.container { width: min(1200px, 100% - 64px); padding-inline: 0; padding-block: 18px 64px; gap: 28px; }
  .fd-active { padding-block-start: 0; }
  .fd-feed { gap: 10px; }
  .fd-feed .card { min-height: 120px; }
  .fd-feed .card-photo-wrap { width: 120px; }
  .fd-feed .card-body { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "title title title title" "where ago seller price"; align-content: space-between; align-items: end; gap: 8px 18px; padding: 14px 18px 12px; }
  .fd-feed .card-title { grid-area: title; font-size: 1.05rem; }
  .fd-feed .card-meta:nth-of-type(1) { grid-area: ago; }
  .fd-feed .card-meta:nth-of-type(2) { grid-area: where; }
  .fd-feed .card-seller { grid-area: seller; margin: 0; padding: 0; }
  .fd-feed .card-price { grid-area: price; justify-self: end; flex-direction: row-reverse; padding: 3px 14px; border-radius: 8px; background: var(--green-tint); }
  .fd-feed .price { color: var(--accent); }
  .fd-feed .card:not(.has-photo):not(.is-preview) .card-title { padding-inline-end: 44px; }
}
@media (min-width: 860px) and (max-width: 1023px) {
  .fd-cat { min-width: 70px; padding-inline: 6px; font-size: .84rem; }
  .fd-feed .card-body { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "title title title" "where seller price" "ago ago ago"; }
}

/* ---------- desktop (≥ 1024px): side column with brand + sub-category tiles ---------- */
@media (min-width: 1024px) {
  .fd-chiprows { display: none; }
  .fd-layout.container { grid-template-columns: minmax(0, 1fr) 300px; }
  .fd-side { display: block; position: sticky; inset-block-start: calc(var(--header-h, 76px) + 14px); max-height: calc(100vh - var(--header-h, 76px) - 28px); overflow-y: auto; scrollbar-width: thin; padding-inline: 2px; }
  .fd-sec { padding-block-end: 18px; margin-block-end: 18px; border-block-end: 1px dashed var(--line-strong); }
  .fd-sec:last-child { border-block-end: 0; margin-block-end: 0; }
  .fd-sec-h { display: flex; align-items: center; gap: 8px; margin-block-end: 10px; font-family: var(--font-ui); font-size: .95rem; font-weight: 700; color: var(--accent-2); }
  .fd-sec-h::before { content: ""; width: 12px; height: 12px; background: var(--gold); -webkit-mask: var(--m-star) center / contain no-repeat; mask: var(--m-star) center / contain no-repeat; }
  .fd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fd-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 78px; padding: 8px 4px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 10px; color: var(--text-2); transition: border-color .15s, background-color .15s;
  }
  .fd-tile:hover { border-color: var(--gold); background: var(--gold-soft); }
  .fd-tile.is-on { border-color: var(--accent-2); background: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold); color: var(--accent); }
  .fd-tile-label { max-width: 100%; font-size: .74rem; font-weight: 600; line-height: 1.25; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .fd-tile-emo { font-size: 1.6rem; }
  .fd-mono { position: relative; display: grid; place-items: center; width: 40px; height: 40px; color: var(--star-ink); }
  .fd-mono::before { content: ""; position: absolute; inset: 0; background: var(--star-fill); -webkit-mask: var(--m-star) center / contain no-repeat; mask: var(--m-star) center / contain no-repeat; }
  .fd-logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
  .fd-logo img { width: 30px; height: 30px; object-fit: contain; }
  .fd-mono b { position: relative; font-family: var(--font-ui); font-size: .78rem; font-weight: 800; letter-spacing: .02em; line-height: 1; }
  .fd-expand { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 40px; margin-block-start: 10px; background: transparent; border: 1px solid var(--accent); border-radius: 10px; color: var(--accent); font-weight: 600; }
  .fd-expand:hover { background: var(--gold-soft); }
  .fd-expand .fd-chev { width: 18px; height: 18px; transform: rotate(90deg); transition: transform .2s; }
  .fd-expand[aria-expanded="true"] .fd-chev { transform: rotate(-90deg); }
  .fd-pop { display: flex; flex-wrap: wrap; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .fd-sk::after { animation: none; } }

.fd-pill.is-busy { opacity: .65; pointer-events: none; }

/* ---------- city + area picker ---------- */
.fd-city { height: min(86dvh, 680px); }
.fd-city-search { padding: 4px 18px 10px; }
.fd-city .fd-sheet-body { padding: 0; }
.fd-cr-list { list-style: none; margin: 0; padding: 0; }
.fd-cr { border-block-end: 1px solid var(--line); }
.fd-cr-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 0 18px;
  background: none; border: 0; color: var(--text); font-size: 1rem; font-weight: 700; text-align: start; cursor: pointer;
}
.fd-cr-row:hover { background: var(--gold-soft); }
.fd-cr.is-on .fd-cr-row { background: color-mix(in srgb, var(--accent-2) 14%, transparent); color: var(--accent); }
.fd-cr-box { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--line-strong); border-radius: 6px; }
.fd-cr.is-on .fd-cr-box { background: var(--accent-2); border-color: var(--accent-2); }
.fd-cr.is-on .fd-cr-box::after { content: ""; width: 11px; height: 6px; margin-block-start: -2px; border: solid var(--bg); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.fd-cr-areas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px 14px; background: var(--bg-alt); }
.fd-cr-n { min-width: 28px; padding: 4px 8px; border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: .8rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.fd-cr-empty { padding: 36px 18px; text-align: center; color: var(--text-2); }
.fd-city-foot { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.fd-city-foot .btn { width: 100%; }

/* ---------- cars: quick-filter popovers ---------- */
.fd-pill.is-outline-soft { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.fd-qpop {
  position: fixed; z-index: 70; display: grid; gap: 10px; width: min(300px, calc(100vw - 16px)); padding: 14px;
  background: var(--surface); color: var(--text); border: 1px solid var(--gold); border-radius: 14px; box-shadow: var(--shadow-lg);
}
.fd-qpop-h { font-family: var(--font-ui); font-size: .95rem; font-weight: 700; }
.fd-qpop-foot { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.fd-qpop-foot .btn { min-height: 42px; }

/* ---------- section badges: green tile, gold line icon ---------- */
.fd-tile-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--star-fill); color: var(--star-ink); }
.fd-tile-ico .i { width: 24px; height: 24px; stroke-width: 1.7; }