/* uxfix.css — overnight critique fixes 2026-10-19 (M= mobile list, D= desktop list).
   Loaded after styles.css. Uses the site's own theme variables only. */

/* ---------- shared ---------- */
/* D13: the gallery's harsh black box read as a broken ad slot — use a theme surface */
.gal { background: var(--chrome2); }
/* base display guards for JS-injected blocks (per-mode rules below switch them on) */
.nm-thread-rail { display: none; }
.nm-footer { display: none; }
/* M13/D16: Call button inside the item CTA row */
.ux-call-btn { flex: 0 0 auto !important; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 0 18px; border-radius: 999px; min-height: 48px; }
/* M15: chat safety strip — high-contrast amber in both themes, bigger dismiss target */
.chat-safety { background: #fef3c7 !important; color: #7c2d12 !important; border-bottom: 1px solid #f59e0b; }
.chat-safety svg { color: #b45309; }
#chat-safety-x { color: #7c2d12 !important; font-size: 19px; padding: 4px 10px; line-height: 1; }
/* D4: seller feedback stars no longer crush into the words */
.nm-rev-stars { margin-right: 8px; }
/* D5: item-page action row — one consistent bordered style, no black slab */
.action-row .action-btn { border: 1.5px solid var(--line); background: var(--chrome); color: var(--ink); }
.action-row .action-btn.wa svg { color: #00a884; }
/* M29/D10: card favourite — bigger, clearly separate, obvious saved state */
.card-fav { width: 40px; height: 40px; box-shadow: 0 2px 9px rgba(0, 0, 0, .28); cursor: pointer; }
.card-fav svg { width: 19px; height: 19px; }
.card-fav.on { color: #e8380d; background: #fff; }
/* M24/D7: subcategory count placeholder while the real count loads */
.subcat-count:empty { display: inline-block; width: 26px; height: 10px; border-radius: 5px; background: var(--line-soft); vertical-align: middle; }
/* M28: dynamic viewport units so phone browser chrome can't push UI off-screen */
.screen { min-height: 100dvh; }
.sheet { max-height: 86dvh; }

/* ---------- mobile & tablet (<=1023px) ---------- */
@media (max-width: 1023.98px) {
  /* M1: category rail labels readable */
  .sz-cat-name { font-size: 12px; max-width: 78px; }
  .sz-cat { min-width: 66px; }
  /* M2: sort pills reach thumb-target height */
  .sort-pill { min-height: 40px; padding: 10px 16px; display: inline-flex; align-items: center; }
  /* M3: top-bar / sheet icon buttons get true 44px targets */
  .icon-btn { width: 44px; height: 44px; }
  .wa-back { width: 44px; height: 44px; }
  /* M5: chat quick replies taller */
  .quick-replies button { min-height: 38px; }
  /* M11: item gallery 4:3 — price and Chat arrive a full square sooner */
  .gal-slide { aspect-ratio: 4 / 3; }
  /* M18: compress the home stack — slimmer hero, tighter rails */
  .hero-slide { min-height: 152px; padding: 20px 18px 22px; }
  .hero-title { font-size: 29px; }
  .hero { margin-top: 6px; }
  .sz-catrow { padding-top: 8px; padding-bottom: 2px; }
  /* M19: the duplicate trust ticker goes (hero + safety box already say it);
     the house ad gets calmer type on phones */
  .ticker { display: none; }
  .ad-title { font-size: 20px; }
}
/* M4: no iOS focus-zoom — text fields at 16px on touch devices */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select, textarea { font-size: 16px !important; }
}

/* ---------- desktop (>=1024px) ---------- */
@media (min-width: 1024px) {
  /* D8: no hamburger beside the permanent sidebar */
  #sz-menu-btn { display: none !important; }
  /* D23: denser results — 4:3 card photos everywhere on desktop */
  .card-photo { aspect-ratio: 4 / 3; }
  #cat-grid, #home-grid { gap: 16px; }
  /* D18 hero: shorter on desktop so listings start above the fold */
  .hero-slide { min-height: 168px; padding-top: 22px; padding-bottom: 24px; }
  /* D24: Sell form uses the width — two grouped columns (beats the 780px cap) */
  .sell-form { max-width: 1080px !important; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: start; }
  .sell-form > #sell-error, .sell-form > .photo-picker, .sell-form > .complete-meter,
  .sell-form > button[type="submit"] { grid-column: 1 / -1; }
  /* D25: Me page wider */
  #screen-me { max-width: 1180px !important; }
  /* D11: install prompt docks top-right as a slim card, never over the grid */
  #nm-inst { top: 18px !important; bottom: auto !important; right: 22px !important; left: auto !important; max-width: 360px !important; }
  /* D12 (revised Oct 20): the sidebar-bottom dock rendered the pill covered;
     dock bottom-right of the content area instead, pill shape kept */
  #nm-refer-fab { right: 22px !important; left: auto !important; bottom: 22px !important; width: auto; justify-content: center; border-radius: 999px !important; }
  /* D28: two-pane chat (rail element injected by uxfix.js) */
  #screen-thread.nm-twopane { left: 546px !important; right: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; }
  .nm-thread-rail { position: fixed; top: 0; bottom: 0; left: 238px; width: 308px; background: var(--chrome);
    border-right: 1px solid var(--line-soft); z-index: 39; display: flex; flex-direction: column; }
  .nm-thread-rail .nm-tr-head { padding: 16px 16px 10px; font-size: 16px; font-weight: 800; color: var(--ink); }
  .nm-thread-rail .nm-tr-list { flex: 1; overflow-y: auto; }
  /* D30: footer (element injected by uxfix.js) */
  .nm-footer { max-width: 1240px; margin: 34px auto 0; padding: 20px 22px 8px; border-top: 1px solid var(--line-soft);
    color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; }
  .nm-footer b { color: var(--ink); }
  .nm-footer button { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 4px 0; }
  .nm-footer button:hover { color: var(--acc); }
  .nm-footer a { color: var(--muted); text-decoration: none; }
  .nm-footer a:hover { color: var(--acc); }
}
/* D9: real hover feedback where a mouse exists */
@media (hover: hover) and (min-width: 1024px) {
  .card { transition: transform .18s ease, box-shadow .18s ease; }
  .card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .20); cursor: pointer; }
  .card .card-photo img { transition: transform .35s ease; }
  .card:hover .card-photo img { transform: scale(1.045); }
  .convo:hover { background: var(--chrome2); }
  .cat-row:hover, .subcat-row:hover { border-color: var(--acc2); }
  #bottomnav .nav-btn:hover { background: var(--chrome2); }
}

/* ---------- uxfix sheets (filters M6/M25, shared) ---------- */
.ux-scrim { position: fixed; inset: 0; background: rgba(5, 8, 12, .55); z-index: 99990; display: flex; align-items: flex-end; justify-content: center; }
.ux-sheet { background: var(--chrome); color: var(--ink); width: 100%; max-width: 560px; max-height: 86dvh; overflow-y: auto;
  border-radius: 20px 20px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); animation: sheetUp .45s cubic-bezier(.32,.72,0,1); }
@media (min-width: 1024px) { .ux-scrim { align-items: center; padding: 24px; } .ux-sheet { border-radius: 20px; } }
.ux-sheet h3 { margin: 6px 0 2px; font-size: 17px; font-weight: 800; }
.ux-sheet .ux-sub { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.ux-sec { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--faint); margin: 16px 0 8px; }
.ux-row2 { display: flex; gap: 10px; }
.ux-row2 label { flex: 1; font-size: 13px; font-weight: 600; color: var(--muted); }
.ux-row2 input, .ux-row2 select, .ux-sheet > label select { display: block; width: 100%; margin-top: 6px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--input); color: var(--input-ink); padding: 12px; font-size: 15px; box-sizing: border-box; }
.ux-sheet > label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.ux-toggles { display: flex; gap: 10px; flex-wrap: wrap; }
.ux-actions { display: flex; gap: 10px; margin-top: 20px; }
.ux-actions .btn-primary { flex: 2; }
.ux-actions .btn-secondary { flex: 1; }
.ux-count { font-size: 13px; color: var(--muted); margin-top: 10px; text-align: center; }
/* filter bars injected above results grids (M25/D19) */
.ux-filterbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px 2px; flex-wrap: wrap; }
.ux-filterbar .ux-fbtn { border: 1.5px solid var(--line); background: var(--chrome); color: var(--ink); border-radius: 999px;
  padding: 10px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; min-height: 40px; }
.ux-filterbar .ux-fbtn.on { border-color: var(--acc); color: var(--acc); }
.ux-filterbar .ux-fcount { font-size: 13px; color: var(--muted); }
/* detail-page additions (M13/M17/D16/D17/D18/D19) */
.ux-cond-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--chrome2);
  color: var(--ink); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 700; margin: 8px 0 2px; }
.ux-cond-chip i { font-style: normal; color: var(--faint); font-weight: 600; }
.ux-adid { font-size: 12px; color: var(--faint); margin-top: 8px; }
.ux-ownerbox { border: 1.5px dashed var(--acc2); border-radius: 14px; padding: 12px 14px; margin: 16px 0 4px; background: var(--acc-soft); }
.ux-ownerbox b { display: block; margin-bottom: 8px; font-size: 13.5px; }
.ux-ownerbox .ux-ob-row { display: flex; gap: 10px; }
.ux-ownerbox button { flex: 1; border-radius: 10px; padding: 11px; font-weight: 700; cursor: pointer; font-size: 14px; }
.ux-ob-del { border: 1.5px solid #b3261e; background: transparent; color: #b3261e; }
.ux-ob-manage { border: 1.5px solid var(--line); background: var(--chrome); color: var(--ink); }
/* updates suggestions (M26/D27) */
.ux-suggest { padding: 4px 14px 10px; }
.ux-suggest h3 { font-size: 15px; font-weight: 800; margin: 10px 0 4px; }
.ux-suggest p { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.ux-sug-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line-soft); }
.ux-sug-row img, .ux-sug-row .ux-sug-fb { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; }
.ux-sug-row .ux-sug-fb { display: flex; align-items: center; justify-content: center; background: var(--chrome2); font-weight: 800; }
.ux-sug-row .ux-sug-tx { flex: 1; min-width: 0; }
.ux-sug-row .ux-sug-tx b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-sug-row .ux-sug-tx span { font-size: 12.5px; color: var(--muted); }
.ux-sug-row button { flex: none; }
.ux-sug-row button.ux-on { background: var(--acc-soft); color: var(--ink); border: 1.5px solid var(--acc2); }
/* recently-viewed clear (M27) */
.rv-title-row { display: flex; align-items: center; justify-content: space-between; }
.rv-clear { background: none; border: 0; color: var(--acc); font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px 2px; }
/* notifications grouping (D26) */
.nt-group-h { padding: 16px 16px 4px; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--faint); }

/* Me button label (Ibrahim 2026-10-19): top bar Me button is a pill with
   the avatar plus the word "Me" so people know it opens their profile. */
.me-mini{width:auto!important;min-width:44px;height:44px!important;border-radius:999px!important;padding:0 13px 0 5px!important;gap:6px}
.me-mini img{width:34px!important;height:34px!important;border-radius:50%!important;flex:none}
.me-mini-txt{font-size:14px;font-weight:800;color:#fff;letter-spacing:.2px;line-height:1}

/* Declutter (2026-10-19): the trust ticker duplicates the hero + safety copy — off on desktop too */
@media (min-width: 1024px) { .ticker { display: none; } }
.ux-sug-tx{flex:1;min-width:0}
.ux-sug-tx b,.ux-sug-tx span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ux-sug-row .btn-secondary{flex:none;width:auto;padding:8px 16px}