/* Brido web — layout, colours and type matched to the OLX Pakistan
   desktop site (Roboto, dark teal #002f34, light header), with Brido's
   own logo, categories and content. */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

:root {
  --ink: #002f34;
  --body: #002f34;
  --muted: #5c7a7e;
  --faint: #7d9497;
  --rose: #e11d48;
  --rose-dark: #be123c;
  --blue: #3a77ff;
  --header-bg: #eef1f6;
  --line: #d8dfe0;
  --card-line: #ccd5d6;
  --yellow: #ffce32;
  --footer-bg: #ebeeef;
  --darkbar: #002f34;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Roboto, "Segoe UI", Arial, sans-serif;
  color: var(--body);
  background: #fff;
  font-size: 15px;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Top bar ---------- */
.topbar { background: var(--header-bg); }
.hwrap {
  max-width: 1240px; margin: 0 auto; padding: 10px 16px 2px;
  display: flex; align-items: center; gap: 26px;
}
.logo {
  background: #fff; border-radius: 12px; padding: 6px 16px;
  display: flex; align-items: center; flex: none;
}
.logo img { height: 42px; width: auto; }
.quick {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 500; color: var(--ink);
  padding: 8px 14px; border-radius: 8px;
}
.quick img { height: 38px; width: auto; max-width: 96px; object-fit: contain; border-radius: 4px; flex: none; }
.quick:hover, .quick.on { background: #fff; color: var(--ink); }
.hspacer { flex: 1; }
.loginlink { font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.loginlink:hover { color: var(--blue); text-decoration: none; }
.sellbtn {
  display: inline-block; border-radius: 24px; padding: 5px;
  background: linear-gradient(120deg, #ffce32 0%, #23e5db 45%, #3a77ff 80%, #7c3aed 100%);
  box-shadow: 0 2px 6px rgba(0, 47, 52, .18);
}
.sellbtn span {
  display: block; background: #fff; border-radius: 19px;
  padding: 7px 24px; font-size: 16px; font-weight: 700; color: var(--ink);
}
.searchrow { padding-top: 8px; padding-bottom: 14px; gap: 0; }
.locbox {
  display: flex; align-items: center; gap: 8px; height: 48px;
  background: #fff; border: 1px solid var(--ink); border-radius: 6px;
  padding: 0 12px; min-width: 272px; font-size: 16px; margin-right: 14px;
}
.locbox .chev { margin-left: auto; color: var(--ink); }
.locbox .pin { display: flex; align-items: center; }
.searchbar {
  flex: 1; display: flex; height: 48px; background: #fff;
  border: 1px solid var(--ink); border-radius: 6px; overflow: hidden;
}
.searchbar input {
  flex: 1; border: 0; outline: 0; padding: 0 14px; font-size: 16px; min-width: 0;
  font-family: inherit;
}
.searchbar button {
  border: 0; background: var(--ink); color: #fff;
  font-size: 16px; font-weight: 700; padding: 0 26px;
  display: flex; align-items: center; gap: 8px;
}

/* ---------- Category strip ---------- */
.catnav { background: #fff; box-shadow: 0 1px 4px rgba(0, 47, 52, .12); position: relative; z-index: 5; }
.cwrap {
  max-width: 1240px; margin: 0 auto; padding: 0 16px;
  display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none;
}
.cwrap::-webkit-scrollbar { display: none; }
.cwrap a { padding: 10px 0; font-size: 14.5px; white-space: nowrap; color: var(--ink); }
.cwrap a:hover { color: var(--blue); }
.cwrap a.all { font-weight: 700; text-transform: uppercase; font-size: 13.5px; letter-spacing: .2px; }

/* ---------- Page ---------- */
.page { max-width: 1240px; margin: 0 auto; padding: 10px 16px 42px; }
.status { text-align: center; color: var(--muted); padding: 36px 0; font-size: 15px; }
.empty {
  text-align: center; color: var(--muted); padding: 46px 20px; font-size: 15px;
  border: 1px dashed var(--card-line); border-radius: 6px; line-height: 1.6;
}

/* ---------- Category tiles ---------- */
.catgrid {
  display: flex; flex-wrap: wrap; gap: 30px 28px;
  justify-content: space-between;
  padding: 24px 0 8px;
}
.tile { text-align: center; width: 92px; flex: none; }
.tile .timg {
  width: 84px; height: 84px; margin: 0 auto;
  border-radius: 6px; overflow: hidden; background: #f7f8f8;
  display: flex; align-items: center; justify-content: center;
}
.tile .timg img { width: 100%; height: 100%; object-fit: cover; }
.tile .timg svg { width: 50px; height: 50px; }
.tile .timg .tletter {
  font-size: 32px; font-weight: 700; color: var(--ink);
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 5px rgba(0, 47, 52, .14);
}
.tile .tname {
  margin-top: 8px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile:hover .tname { color: var(--blue); }

/* ---------- Listing sections & cards ---------- */
.section { margin-top: 34px; }
.shead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.shead h2 { font-size: 24px; margin: 0; font-weight: 700; color: var(--ink); }
.shead .more { color: var(--blue); font-size: 14.5px; font-weight: 500; }
.shead .more:hover { text-decoration: underline; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lcard {
  border: 1px solid var(--card-line); border-radius: 4px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column; position: relative;
}
.lcard:hover { box-shadow: 0 2px 10px rgba(0, 47, 52, .12); }
.lcard .ph { aspect-ratio: 4 / 3; background: #f7f8f8; overflow: hidden; position: relative; }
.lcard .ph img { width: 100%; height: 100%; object-fit: cover; }
.fbadge {
  position: absolute; top: 10px; left: 0; background: var(--yellow); color: var(--ink);
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 0 3px 3px 0;
}
.nophoto {
  height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--faint); font-size: 13px;
}
.cbody { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.prow { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.price { font-size: 17px; font-weight: 700; color: var(--ink); }
.heart { font-size: 21px; color: var(--ink); line-height: 1; cursor: pointer; }
.heart.fav-on { color: var(--rose); }
[data-fav].fav-on { color: var(--rose); border-color: var(--rose); }
.ltitle {
  font-size: 14.5px; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lspec { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-top: 3px; }
.lby { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.save {
  align-self: flex-start; background: #fff1f2; color: var(--rose-dark);
  font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-top: 3px;
}
.lloc {
  font-size: 12.5px; color: var(--muted); margin-top: auto; padding-top: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ltime { font-size: 11.5px; color: var(--muted); }

/* ---------- Category hero (Motors-style landing) ---------- */
.crumbs { max-width: 1240px; margin: 0 auto; padding: 14px 16px 0; font-size: 13px; color: var(--muted); }
.crumbs a:hover { color: var(--blue); }
.hero {
  max-width: 1240px; margin: 12px auto 0; padding: 0 16px;
}
.hero .band {
  position: relative; border-radius: 10px; overflow: hidden;
  background: linear-gradient(95deg, #062a44 30%, #0b4f5c 70%, #0e6b6e);
  min-height: 300px; display: flex; align-items: center; justify-content: center;
}
.hero .band img.bgimg {
  position: absolute; right: 0; top: 0; height: 100%; width: 46%;
  object-fit: cover; opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}
.hero .inner { position: relative; z-index: 2; width: 100%; max-width: 880px; padding: 34px 22px; }
.hero h1 {
  color: #fff; text-align: center; font-size: 34px; margin: 0 0 20px; font-weight: 700;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.fpanel {
  background: #fff; border-radius: 8px; padding: 14px;
  display: grid; grid-template-columns: 2fr 1fr; gap: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}
.fpanel .frow2 { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; grid-column: 1 / -1; }
.fpanel input, .fpanel select {
  height: 46px; border: 1px solid var(--card-line); border-radius: 5px;
  padding: 0 12px; font-size: 15px; font-family: inherit; background: #fff; width: 100%; min-width: 0;
}
.fpanel .go {
  background: var(--ink); color: #fff; border: 0; border-radius: 5px;
  font-size: 16px; font-weight: 700; padding: 0 34px; height: 46px;
}
.browsetabs {
  display: flex; gap: 30px; border-bottom: 1px solid var(--line);
  margin-top: 26px; overflow-x: auto; scrollbar-width: none;
}
.browsetabs::-webkit-scrollbar { display: none; }
.browsetabs button {
  background: none; border: 0; font-size: 15.5px; padding: 10px 2px; color: var(--ink);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.browsetabs button.on { color: var(--blue); border-bottom-color: var(--blue); font-weight: 500; }
.browselinks { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 14px 0 2px; }
.browselinks a { font-size: 14px; color: #33475b; }
.browselinks a:hover { color: var(--blue); text-decoration: underline; }
.seotext { margin-top: 38px; max-width: 980px; }
.seotext h3 { font-size: 19px; margin: 22px 0 8px; }
.seotext p { font-size: 14.5px; line-height: 1.65; color: #33475b; margin: 0 0 12px; }

/* ---------- App band ---------- */
.appband { border-top: 1px solid var(--line); background: #f7f8f8; margin-top: 46px; overflow: hidden; }
.appband .inner {
  max-width: 1240px; margin: 0 auto; padding: 24px 16px 0;
  display: flex; align-items: center; gap: 30px;
}
.apptext { padding-bottom: 26px; }
.apptext h3 { font-size: 28px; margin: 0 0 6px; font-weight: 700; color: var(--ink); }
.applink { color: var(--blue); font-size: 22px; font-weight: 700; }
.applink:hover { text-decoration: underline; }
.phones {
  position: relative; width: 262px; height: 172px; flex: none;
  margin-left: auto; align-self: flex-end;
}
.phone {
  position: absolute; bottom: -64px; width: 122px; aspect-ratio: 941 / 1672;
  border: 4px solid #14181a; border-radius: 24px; overflow: hidden;
  background: #fff; box-shadow: 0 12px 28px rgba(0, 47, 52, .22);
}
.phone::before {
  content: ""; position: absolute; top: 5px; left: 50%; z-index: 3;
  transform: translateX(-50%); width: 44px; height: 12px;
  background: #14181a; border-radius: 8px;
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.phone.p1 { left: 4px; z-index: 2; transform: rotate(-2deg); }
.phone.p2 { left: 128px; bottom: -76px; z-index: 1; transform: rotate(1.6deg); }
.storebtns { display: flex; gap: 8px; padding-bottom: 26px; flex-wrap: nowrap; }
.storebtn {
  background: #000; color: #fff; border-radius: 5px; height: 40px;
  display: flex; align-items: center; gap: 8px; padding: 0 12px 0 9px;
  white-space: nowrap;
}
.storebtn .st { font-size: 8.5px; line-height: 1.25; text-align: left; display: block; }
.storebtn .st b { display: block; font-size: 14.5px; font-weight: 500; }
.storebtn .sg {
  width: 21px; height: 21px; border-radius: 5px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.storebtn .sg-and { background: #3ddc84; color: #07331a; }
.storebtn .sg-play { background: #fff; color: #00a0ff; font-size: 12px; }
.storebtn .sg-gal { background: #d50f2e; }
.storebtn.off { opacity: .5; }

/* ---------- Footer ---------- */
footer.site { background: var(--footer-bg); border-top: 1px solid var(--line); }
.fwrap {
  max-width: 1240px; margin: 0 auto; padding: 32px 16px 38px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px;
}
.fwrap h4 { font-size: 15.5px; margin: 0 0 14px; font-weight: 700; color: var(--ink); }
.fwrap a { display: block; font-size: 14px; color: var(--ink); padding: 5px 0; }
.fwrap a:hover { color: var(--blue); }
.socials { display: flex; gap: 11px; align-items: center; }
.socials a {
  width: 44px; height: 44px; border: 1.5px solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; padding: 0; color: var(--ink); line-height: 1;
}
.socials a:hover { color: var(--blue); border-color: var(--blue); }
.socials .yt {
  border: 1.6px solid currentColor; border-radius: 6px;
  padding: 2px 5px; font-size: 10px; line-height: 1;
}
.fapps { display: flex; gap: 8px; margin-top: 16px; }
.fapp {
  background: #000; color: #fff; border-radius: 5px; padding: 5px 10px;
  font-size: 9px; line-height: 1.3; display: block;
}
.fapp b { display: block; font-size: 12.5px; font-weight: 500; }
.fapp.off { opacity: .45; }
footer.site .fapp { color: #fff; }
.fwrap a.fapp, .fwrap span.fapp {
  font-size: 9px; padding: 5px 10px; display: block; color: #fff;
}
.fwrap a.fapp b, .fwrap span.fapp b { color: #fff; }
.fbot { background: var(--darkbar); color: #fff; }
.fbot .bwrap {
  max-width: 1240px; margin: 0 auto; padding: 17px 16px;
  display: flex; justify-content: flex-end; align-items: center;
  gap: 14px; font-size: 13.5px;
}
.fbot .bright b { font-weight: 700; }

/* ---------- Back to top ---------- */
#toTop {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  background: #fff; border: 1px solid var(--card-line); border-radius: 999px;
  padding: 9px 18px; font-size: 14px; font-weight: 500; color: var(--ink);
  box-shadow: 0 3px 12px rgba(0, 47, 52, .18); display: none;
}
#toTop.show { display: block; }

/* ---------- Listing detail ---------- */
.detail {
  max-width: 1240px; margin: 0 auto; padding: 12px 16px 44px;
  display: grid; grid-template-columns: 2fr 1fr; gap: 22px; align-items: start;
}
.gallery .main { position: relative; border: 1px solid var(--card-line); border-radius: 4px; overflow: hidden; background: #111; }
.gallery .main img { width: 100%; height: 520px; object-fit: contain; background: #111; }
.gfeat {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  background: var(--yellow); color: var(--ink); font-size: 11px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; padding: 4px 9px; border-radius: 3px;
}
.garrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 24px; line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  display: flex; align-items: center; justify-content: center;
}
.gprev { left: 12px; }
.gnext { right: 12px; }
.gcount {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  background: rgba(0, 0, 0, .65); color: #fff; font-size: 12.5px;
  padding: 4px 10px; border-radius: 4px;
}
.gdots {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 15px;
  display: flex; gap: 6px; z-index: 2;
}
.gdot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .55); cursor: pointer; }
.gdot.on { background: #fff; }
.pricecard { border: 1px solid var(--card-line); border-radius: 4px; padding: 18px; margin-top: 16px; }
.pricecard h1 { font-size: 20px; font-weight: 400; margin: 8px 0 0; line-height: 1.4; }
.prow2 { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.picons { display: flex; gap: 16px; align-items: center; padding-top: 5px; }
.pheart { font-size: 25px; cursor: pointer; line-height: 1; color: var(--ink); }
.sharebtn { background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--ink); padding: 0; line-height: 1; }
.highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.hl { background: #f7f8f8; border-radius: 6px; padding: 10px 12px; }
.hl span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.hl b { font-size: 15px; }
.safetylist { margin: 0; padding-left: 19px; font-size: 14.5px; line-height: 1.65; color: #33475b; }
.postedby { display: block; font-size: 12.5px; color: var(--muted); }
.adid { font-size: 13px; color: var(--muted); text-align: center; margin-top: 2px; }
.adid a { text-decoration: underline; }
#stickyBar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: #fff;
  box-shadow: 0 2px 12px rgba(0, 47, 52, .18);
  transform: translateY(-110%); transition: transform .25s ease;
}
#stickyBar.show { transform: none; }
#stickyBar .sbwrap {
  max-width: 1240px; margin: 0 auto; padding: 8px 16px;
  display: flex; align-items: center; gap: 14px;
}
#stickyBar img { width: 46px; height: 46px; object-fit: cover; border-radius: 4px; }
#stickyBar .sbinfo { flex: 1; min-width: 0; }
#stickyBar .sbinfo b { font-size: 17px; display: block; }
#stickyBar .sbinfo span {
  display: block; font-size: 13px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#stickyBar .trustbtn, #stickyBar .chatbtn { width: auto; margin: 0; padding: 10px 20px; }
.thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 4px; cursor: pointer; border: 2px solid transparent; }
.thumbs img.on { border-color: var(--ink); }
.infocard { border: 1px solid var(--card-line); border-radius: 4px; padding: 18px; margin-top: 16px; }
.infocard h3 { margin: 0 0 13px; font-size: 19px; }
.specgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 22px; font-size: 14.5px; }
.specgrid span { color: var(--muted); margin-right: 8px; }
.desc { font-size: 15px; line-height: 1.65; white-space: pre-wrap; margin: 0; }
.sidecard { border: 1px solid var(--card-line); border-radius: 4px; padding: 18px; margin-bottom: 16px; }
.sidecard h1 { font-size: 19px; font-weight: 400; margin: 8px 0 0; line-height: 1.4; }
.bigprice { font-size: 29px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bigprice .save { font-size: 12.5px; }
.lmeta { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }
.sellerrow { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.avatar {
  width: 50px; height: 50px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #fb7185, #be123c); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 700;
}
.trustbtn {
  display: block; text-align: center; background: var(--ink); color: #fff;
  padding: 13px; border-radius: 4px; font-weight: 700; font-size: 15.5px; border: 0; width: 100%;
}
.trustbtn:hover { background: #0a3d43; }
.chatbtn {
  display: block; text-align: center; border: 1.6px solid var(--ink); color: var(--ink);
  padding: 12px; border-radius: 4px; font-weight: 700; font-size: 15.5px; margin-top: 10px; background: #fff; width: 100%;
}
.safetynote {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 4px;
  padding: 14px; font-size: 13.5px; line-height: 1.55; color: #57534e;
}

/* ---------- Forms (login, sell, checkout) ---------- */
.formwrap { max-width: 480px; margin: 0 auto; padding: 30px 16px 54px; }
.formwrap.wide { max-width: 780px; }
.formcard { border: 1px solid var(--card-line); border-radius: 8px; padding: 26px; }
.formcard h1 { font-size: 24px; margin: 0 0 6px; }
.formcard .sub { color: var(--muted); font-size: 14.5px; margin: 0 0 20px; line-height: 1.55; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--card-line); border-radius: 5px;
  padding: 11px 12px; font-size: 15px; font-family: inherit; background: #fff;
}
.field textarea { min-height: 110px; resize: vertical; }
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.btnprimary {
  width: 100%; background: var(--ink); color: #fff; border: 0; border-radius: 4px;
  padding: 13px; font-size: 16px; font-weight: 700;
}
.btnprimary:hover { background: #0a3d43; }
.btnprimary:disabled { opacity: .55; cursor: default; }
.btnrose { background: var(--rose); }
.btnrose:hover { background: var(--rose-dark); }
.formmsg { font-size: 14px; margin-top: 13px; line-height: 1.5; display: none; }
.formmsg.err { color: #b91c1c; display: block; }
.formmsg.ok { color: #15803d; display: block; }
.formalt { text-align: center; font-size: 14.5px; color: var(--muted); margin-top: 18px; }
.formalt a { color: var(--blue); font-weight: 500; }

/* ---------- Mobile bottom nav ---------- */
.mnav {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: #fff; height: 76px; padding: 10px 0 12px;
  box-shadow: 0 -3px 14px rgba(15, 46, 43, .10);
  align-items: flex-start; justify-content: space-around;
}
.mnav a { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; font-size: 11px; color: #8a8a8a; flex: 1; text-decoration: none; }
.mnav a.on { color: #002f34; font-weight: 700; }
.mnav .nic { font-size: 23px; line-height: 1; }
.mnav .sellc { color: #0f2e2b; font-weight: 700; overflow: visible; }
.mnav .fab {
  width: 56px; height: 56px; border-radius: 50%; margin-top: -36px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #b3122f, #d4a017, #8b0e24) border-box;
  border: 4px solid transparent; color: #b3122f; font-size: 31px; font-weight: 400;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 12px rgba(15, 46, 43, .18);
}

/* ---------- Status chips + account lists ---------- */
.stchip {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .4px;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.chip-green { background: #dcfce7; color: #166534; }
.chip-amber { background: #fef3c7; color: #92400e; }
.chip-blue { background: #dbeafe; color: #1e40af; }
.chip-red { background: #fee2e2; color: #991b1b; }
.chip-grey { background: #f3f4f6; color: #4b5563; }
.urow {
  display: flex; gap: 14px; border: 1px solid var(--card-line); border-radius: 8px;
  padding: 12px; margin-bottom: 12px; background: #fff; align-items: flex-start;
}
.urow img.thumb { width: 92px; height: 92px; object-fit: cover; border-radius: 6px; flex: none; }
.urow .um { flex: 1; min-width: 0; }
.urow .um b { font-size: 15.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.urow .um .up { font-weight: 700; margin-top: 2px; }
.urow .um .us { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.urow .ua { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.urow .ua a, .urow .ua button {
  font-size: 13px; font-weight: 600; border: 1px solid var(--card-line);
  background: #fff; border-radius: 6px; padding: 7px 13px; color: var(--ink);
}
.urow .ua a.primary, .urow .ua button.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.urow .ua button.danger { color: var(--rose-dark); border-color: #fda4af; }
.utabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.utabs button {
  border: 1px solid var(--card-line); background: #fff; border-radius: 999px;
  padding: 8px 16px; font-size: 14px; font-weight: 500;
}
.utabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.timeline { margin: 6px 0 0; }
.tstep { display: flex; gap: 13px; }
.tstep .dot {
  width: 26px; height: 26px; border-radius: 50%; flex: none; z-index: 1;
  border: 2px solid var(--card-line); background: #fff; color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.tstep.done .dot { background: var(--ink); border-color: var(--ink); color: #fff; }
.tstep.now .dot { border-color: var(--rose); color: var(--rose); }
.tstep .tline { width: 2px; background: var(--line); margin: 3px auto; flex: 1; min-height: 22px; }
.tstep .tcol { display: flex; flex-direction: column; align-items: center; }
.tstep .tbody { padding-bottom: 20px; }
.tstep .tbody b { font-size: 15px; }
.tstep .tbody span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.stars { font-size: 27px; color: #d1d5db; cursor: pointer; letter-spacing: 3px; }
.stars .on { color: #f59e0b; }
.prose { max-width: 780px; }
.prose h2 { font-size: 19px; margin: 22px 0 8px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 15px; line-height: 1.65; color: #1f2937; }
.prose p { margin: 0 0 10px; }
.prose ul { margin: 0 0 12px; padding-left: 20px; }
.prose .lede { font-size: 16.5px; color: #374151; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .catgrid { gap: 24px 16px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .quick { display: none; }
  .fpanel { grid-template-columns: 1fr; }
  .fpanel .frow2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  body { padding-bottom: 76px; }
  .mnav { display: flex; }
  #toTop { bottom: 92px; }
  .logo img { height: 36px; }
  .loginlink { font-size: 15px; }
  .sellbtn span { padding: 6px 18px; font-size: 14px; }
  .searchrow { flex-wrap: wrap; gap: 10px; }
  .locbox { min-width: 0; flex: 1; height: 44px; }
  .searchbar { flex-basis: 100%; height: 44px; order: 3; }
  .catgrid { gap: 20px 12px; }
  .tile { width: 76px; }
  .tile .timg { width: 68px; height: 68px; }
  .tile .timg svg { width: 42px; height: 42px; }
  .tile .tname { font-size: 12.5px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .shead h2 { font-size: 20px; }
  .hero h1 { font-size: 25px; }
  .phones { width: 214px; height: 140px; margin: 8px auto 0; }
  .phone { width: 99px; bottom: -52px; border-radius: 20px; border-width: 3px; }
  .phone::before { width: 36px; height: 10px; top: 4px; }
  .phone.p2 { left: 104px; bottom: -62px; }
  .apptext { padding-bottom: 4px; }
  .storebtns { padding-bottom: 24px; }
  .storebtn { padding: 0 9px 0 7px; }
  .storebtn .st b { font-size: 13px; }
  .highlights { grid-template-columns: 1fr 1fr; }
  #stickyBar .trustbtn, #stickyBar .chatbtn { padding: 8px 12px; font-size: 13.5px; }
  .fbot .bwrap { flex-wrap: wrap; justify-content: center; text-align: center; }
  .hero .band { min-height: 0; }
  .detail { grid-template-columns: 1fr; }
  .gallery .main img { height: 340px; }
  .appband .inner { flex-wrap: wrap; }
  .appimg { display: none; }
  .fwrap { grid-template-columns: 1fr 1fr; }
  .frow { grid-template-columns: 1fr; }
}

/* ---------- Wallet / notifications / support / hub (app parity) ---------- */
.wbal { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.wbal span { color: var(--muted); font-size: 14.5px; }
.wbal b { font-size: 19px; }
.wrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #eef1f2; }
.wrow:last-child { border-bottom: 0; }
.wrowmain { flex: 1; min-width: 0; }
.wrowmain b { display: block; font-size: 15px; }
.wrowmain span { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; }
.wrowamt { font-weight: 700; font-size: 15.5px; white-space: nowrap; }
.wchip { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; padding: 3.5px 8px; border-radius: 20px; background: #eef1f2; color: var(--ink); white-space: nowrap; }
.wchip.ok { background: #dcfce7; color: #166534; }
.wchip.warn { background: #fef3c7; color: #92400e; }
.wchip.bad { background: #ffe4e6; color: #9f1239; }
.wchip.info { background: #e0f2fe; color: #0369a1; }
.txpills { display: flex; gap: 8px; flex-wrap: wrap; }
.txpill { border: 1.5px solid var(--line); background: #fff; border-radius: 20px; padding: 6.5px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--ink); }
.txpill.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.track3 { display: flex; gap: 0; width: 100%; margin-top: 10px; }
.tstep { flex: 1; text-align: center; position: relative; }
.tstep i { display: block; width: 13px; height: 13px; border-radius: 50%; background: #d7dee0; margin: 0 auto 4px; position: relative; z-index: 1; }
.tstep::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2.5px; background: #d7dee0; }
.tstep:first-child::before { display: none; }
.tstep.done i, .tstep.done::before { background: #16a34a; }
.tstep.cur i { box-shadow: 0 0 0 4px rgba(22, 163, 74, .22); }
.tstep span { font-size: 11.5px; color: var(--muted); }
.nitem { display: flex; gap: 12px; align-items: flex-start; padding: 14px 8px; border-bottom: 1px solid #eef1f2; cursor: pointer; position: relative; }
.nitem:hover { background: #fafbfb; }
.nitem .nico { width: 42px; height: 42px; flex: none; border-radius: 50%; background: #f7f8f8; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.nmain { flex: 1; min-width: 0; }
.nmain b { display: block; font-size: 15px; }
.nitem.unread .nmain b { font-weight: 800; }
.nmain span { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.ntime { color: var(--muted); font-size: 12px; white-space: nowrap; padding-top: 3px; }
.ndot { width: 9px; height: 9px; border-radius: 50%; background: var(--rose); flex: none; margin-top: 6px; }
.mrowlist { background: #fff; border: 1px solid var(--card-line); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.mrow { display: flex; align-items: center; gap: 13px; padding: 14.5px 16px; border-bottom: 1px solid #eef1f2; color: var(--ink); text-decoration: none; font-size: 15.5px; font-weight: 500; }
.mrow:last-child { border-bottom: 0; }
.mrow:hover { background: #fafbfb; }
.mrow .mic { width: 26px; text-align: center; font-size: 19px; flex: none; }
.mrow .mhint { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 400; display: flex; align-items: center; gap: 8px; }
.mrow .rchev { color: #b6c2c5; font-size: 19px; }
.mbadge { background: var(--rose); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1.5px 7px; }
.scase { display: block; padding: 12px 0; border-bottom: 1px solid #eef1f2; color: var(--ink); text-decoration: none; }
.scase:last-child { border-bottom: 0; }
.srows { display: flex; align-items: center; gap: 9px; }
.srows .wchip { margin-left: auto; }
.stopic { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.slast { display: block; font-size: 14px; color: #43565c; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shead { display: flex; align-items: center; gap: 12px; }
.shead b { font-size: 16.5px; display: block; }
.shead span { color: var(--muted); font-size: 13px; }
.sbox { border: 1px solid var(--card-line); border-top: 0; border-bottom: 0; background: #fbfcfc; padding: 14px; height: 430px; overflow-y: auto; }
.srow { display: flex; flex-direction: column; margin-bottom: 10px; }
.srow.u { align-items: flex-end; }
.srow.a { align-items: flex-start; }
.slab { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; color: var(--muted); margin: 0 0 3px 4px; }
.sbub { max-width: 78%; padding: 9px 12px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.sbub.u { background: var(--rose); color: #fff; border-bottom-right-radius: 4px; }
.sbub.a { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.sbub .stime { display: block; font-size: 10.5px; opacity: .75; margin-top: 4px; text-align: right; }
.ssys { display: flex; justify-content: center; margin: 12px 0; }
.ssys span { background: #eef1f2; color: #43565c; font-size: 12.5px; font-weight: 600; padding: 5px 14px; border-radius: 20px; text-align: center; }
.simg { max-width: 230px; border-radius: 10px; display: block; }
.sorder { display: block; background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 13px; color: var(--ink); text-decoration: none; max-width: 78%; }
.sorder b { display: block; font-size: 14.5px; }
.sorder span { color: var(--muted); font-size: 12.5px; }
.scomposer { display: flex; gap: 8px; align-items: center; border: 1px solid var(--card-line); border-radius: 0 0 12px 12px; padding: 10px; background: #fff; }
.scomposer input { flex: 1; border: 1px solid var(--line); border-radius: 20px; padding: 10px 15px; font-size: 14.5px; min-width: 0; }
.scomposer .btnprimary { width: auto; padding: 10px 18px; }
.sicon { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 18px; cursor: pointer; }
.stars .star { background: none; border: 0; cursor: pointer; font-size: 27px; line-height: 1; color: #d1d5db; padding: 0 1px; letter-spacing: 0; }
.stars .star.lit { color: #f59e0b; }
.stars .star:disabled { cursor: default; }
.opick { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; margin-top: 8px; cursor: pointer; font-size: 14.5px; }
.idphotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.idphoto { border: 1.5px dashed #c3ced1; border-radius: 10px; padding: 10px 6px; text-align: center; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); }
.idphoto .idprev { display: flex; align-items: center; justify-content: center; height: 74px; font-size: 26px; color: var(--muted); overflow: hidden; border-radius: 6px; margin-bottom: 6px; background: #f7f8f8; }
.idphoto .idprev img { width: 100%; height: 100%; object-fit: cover; }
.belllink { position: relative; display: inline-flex; align-items: center; color: #002f34; text-decoration: none; padding: 4px 6px; line-height: 1; }
html.dark .belllink, html.dark .chatlink, html.dark .avatarchev { color: #fff; }
.bellbadge { position: absolute; top: -3px; right: -4px; background: var(--rose); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 9px; padding: 1px 5.5px; }
/* Signed in, the account entry is the avatar + arrow menu — the
   "My Account" text link hides on desktop too (it was mobile-only). */
body.auth-in .loginlink { display: none; }
/* Desktop header icons after login: chats + avatar, same badge shape. */
.chatlink { position: relative; display: inline-flex; align-items: center; color: #002f34; text-decoration: none; padding: 4px 6px; line-height: 1; }
.chatbadge { position: absolute; top: -3px; right: -4px; background: var(--rose); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 9px; padding: 1px 5.5px; }
.avatarwrap { display: flex; align-items: center; gap: 1px; }
.avatarchev { border: 0; background: none; color: #002f34; padding: 4px 3px; line-height: 1; display: inline-flex; align-items: center; cursor: pointer; }
.avatarlink { display: flex; align-items: center; }
.avatarlink img, .avatarlink .avinit {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block;
}
/* Account menu: profile head + the app's menu rows. */
.hdprof { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid #eef0f0; }
.hdpava { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; background: #0f2e2b; color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.hdpava img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.hdpedit { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid #e8ecec; color: #0f2e2b; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.hdptx b { font-size: 16px; display: block; color: #0f2e2b; }
.hdptx a { font-size: 13.5px; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.hdmenu { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: #fff; padding: 11px 16px; font-size: 15px; color: #0f2e2b; cursor: pointer; }
a.hdmenu { text-decoration: none; }
.hdmenu:hover { background: #f7f8f8; }
.hdmenu .hmic { width: 22px; text-align: center; flex: none; font-size: 17px; }
.hdmenu .hdbadge { margin-left: auto; background: var(--rose); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.hdmenu.hdlogout { color: #b3122f; font-weight: 600; }
.hdsep { height: 1px; background: #eef0f0; margin: 4px 0; }
html.dark .hdprof { border-color: #333; }
html.dark .hdptx b { color: #fff; }
html.dark .hdmenu { background: #1e1e1e; color: #fff; }
html.dark .hdmenu:hover { background: #2a2a2a; }
html.dark .hdmenu.hdlogout { color: #ff8fa3; }
html.dark .hdsep { background: #333; }
html.dark .hdpedit { background: #2a2a2a; border-color: #444; color: #fff; }
/* Floating live-support button (desktop only). */
.supfab {
  position: fixed; right: 22px; bottom: 22px; width: 56px; height: 56px;
  border-radius: 50%; border: 0; background: #0f2e2b; color: #fff;
  box-shadow: 0 8px 24px rgba(15,46,43,.28); cursor: pointer; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
}
.supfab:hover { background: #0f766e; }
.supfab .supdot {
  position: absolute; top: 8px; right: 8px; width: 11px; height: 11px;
  border-radius: 50%; background: #22c55e; border: 2px solid #fff;
}
body.gate-login .supfab { display: none !important; }
@media (max-width: 768px) {
  .supfab { display: none !important; }
}
/* Drop-up support panel (Facebook/Cloudways shape): hangs above the
   floating button, chat keeps running while the user browses. */
.suppanel {
  position: fixed; right: 22px; bottom: 92px; width: 380px; max-width: calc(100vw - 32px);
  height: min(560px, 75vh); background: #fff; border: 1px solid #e8ecec; border-radius: 16px;
  box-shadow: 0 16px 40px rgba(15,46,43,.22); z-index: 4001; overflow: hidden;
  display: flex; flex-direction: column;
}
.suppanel[hidden] { display: none; }
.suphead { display: flex; align-items: center; gap: 10px; padding: 11px 10px 11px 16px; background: #0f2e2b; color: #fff; flex: none; }
.suphtx { flex: 1; min-width: 0; }
.suphtx b { font-size: 15.5px; display: block; }
.suphtx span { font-size: 12px; opacity: .8; display: block; }
.suphead button { border: 0; background: none; color: #fff; font-size: 20px; line-height: 1; padding: 4px 6px; cursor: pointer; }
.suphead .supopen { margin-left: auto; font-size: 17px; }
.supbody { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }
.supbody .pagehead { display: none; }
/* FB-style chat view: the panel itself never scrolls — the header and
   composer stay pinned and only the messages area scrolls inside.
   (The case list still scrolls: it has no .sbox, so the rule below
   does not apply to it.) */
.supbody:has(.sbox) { overflow: hidden; }
.supbody:has(.sbox) #supRootP { height: 100%; display: flex; flex-direction: column; }
.supbody:has(.sbox) #supRootP > p,
.supbody:has(.sbox) #supRootP > .card,
.supbody:has(.sbox) #supRootP > .scomposer,
.supbody:has(.sbox) #supRootP > #orderPicker { flex: none; }
.supbody .sbox { flex: 1; min-height: 0; height: auto !important; }
.supbody #orderPicker .card { max-height: 190px; overflow-y: auto; }
/* Unread-support badge on the floating button (replaces the green dot
   while anything is unread). */
.supfab .supbadge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 999px; background: #e11d48; color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center;
  justify-content: center; border: 2px solid #fff; box-sizing: border-box;
}
.supfab .supbadge[hidden] { display: none; }
.supfab.has-unread .supdot { display: none; }
/* Fullscreen photo viewer (lightbox). */
#lbOverlay { position: fixed; inset: 0; z-index: 7000; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; }
#lbOverlay #lbImg { max-width: 92vw; max-height: 92vh; object-fit: contain; }
#lbOverlay #lbClose { position: absolute; top: 14px; right: 18px; border: 0; background: none; color: #fff; font-size: 38px; line-height: 1; cursor: pointer; z-index: 2; }
#lbOverlay #lbPrev, #lbOverlay #lbNext { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #0f2e2b; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; }
#lbOverlay #lbPrev { left: 14px; }
#lbOverlay #lbNext { right: 14px; }
#lbOverlay #lbCount { position: absolute; right: 16px; bottom: 16px; background: rgba(0,0,0,.65); color: #fff; font-size: 13px; padding: 5px 11px; border-radius: 4px; }
.mimg, .simg { cursor: pointer; }
/* Publish success popup (sell page). */
#pubModal { position: fixed; inset: 0; z-index: 6000; background: rgba(15,46,43,.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
#pubModal[hidden] { display: none; }
#pubModal .pubcard { position: relative; background: #fff; border-radius: 16px; max-width: 380px; width: 100%; padding: 28px 24px 24px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
#pubModal .pubtick { font-size: 44px; color: #15803d; }
#pubModal h1 { font-size: 22px; margin: 8px 0; color: #0f2e2b; }
#pubModal .sub { color: var(--muted); margin-bottom: 18px; }
#pubClose { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 26px; cursor: pointer; color: #7f7f7f; line-height: 1; }
@media (max-width: 768px) {
  .suppanel { display: none !important; }
}
.avatarlink .avinit {
  background: #0f2e2b; color: #fff; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
/* Facebook-style header dropdowns: hang below the whole header, scroll
   away with it (the header is not sticky), desktop only. */
.topbar { position: relative; }
.hdrop {
  position: absolute; top: calc(100% + 2px); right: 16px; width: 380px;
  max-width: calc(100vw - 32px); background: #fff; border: 1px solid #e8ecec;
  border-radius: 12px; box-shadow: 0 12px 32px rgba(15,46,43,.18);
  z-index: 5000; overflow: hidden;
}
.hdrop[hidden] { display: none; }
.hdhead { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid #eef0f0; }
.hdhead b { font-size: 17px; color: #0f2e2b; }
.hdhead button { border: 0; background: none; color: var(--blue); font-size: 13px; font-weight: 600; }
.hdrows { max-height: min(600px, 70vh); overflow-y: auto; }
.hdrow { display: flex; gap: 11px; padding: 11px 16px; border-bottom: 1px solid #f2f4f4; align-items: flex-start; }
.hdrow:hover { background: #f7f8f8; }
.hdrow.unread { background: #eef6f6; }
.hdico { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #eef1f1; display: flex; align-items: center; justify-content: center; font-size: 19px; overflow: hidden; color: #0f2e2b; }
.hdico img { width: 100%; height: 100%; object-fit: cover; }
.hdtx { flex: 1; min-width: 0; }
.hdtx b { font-size: 14px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #0f2e2b; }
.hdtx span { font-size: 13px; color: #4c6467; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdtx small { font-size: 11.5px; color: #7a8a8d; }
.hddot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); flex: none; margin-top: 6px; }
.hdrow .ubadge {
  display: inline-block; min-width: 20px; height: 20px; border-radius: 999px;
  background: var(--rose); color: #fff; font-size: 11.5px; font-weight: 700;
  text-align: center; line-height: 20px; padding: 0 6px; margin-top: 2px; flex: none;
}
.hdfoot { display: block; text-align: center; padding: 12px; font-weight: 700; font-size: 14px; color: #0f2e2b; border-top: 1px solid #eef0f0; }
.hdfoot:hover { background: #f7f8f8; }
.hdempty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.6; }
html.dark .hdrop { background: #1e1e1e; border-color: #333; }
html.dark .hdhead { border-color: #333; }
html.dark .hdhead b, html.dark .hdtx b, html.dark .hdfoot { color: #fff; }
html.dark .hdrow { border-color: #2a2a2a; }
html.dark .hdrow:hover { background: #2a2a2a; }
html.dark .hdrow.unread { background: #23232e; }
html.dark .hdico { background: #2a2a2a; color: #fff; }
html.dark .hdtx span { color: #aaa; }
html.dark .hdfoot { border-color: #333; }
html.dark .hdfoot:hover { background: #2a2a2a; }
@media (max-width: 768px) {
  .chatlink, .avatarwrap { display: none !important; }
  .hdrop { display: none !important; }
}
@media (max-width: 768px) {
  .sbox { height: 52vh; }
  .sbub { max-width: 86%; }
  .sorder { max-width: 86%; }
  .wrow { flex-wrap: wrap; }
}

/* ---------- Content panel (was unstyled) ---------- */
.card {
  background: #fff; border: 1px solid var(--card-line); border-radius: 8px;
  padding: 18px; margin-bottom: 16px;
}
.card h2 { font-size: 17.5px; margin: 0 0 12px; color: var(--ink); }

/* ================================================================
   MOBILE APP THEME — mirrors the Brido app (same tokens as the
   native app: Lilac Mist header, app red #B3122F, teal #002F34,
   card border #E8ECEC, pale-teal own chat bubbles #D9ECE9).
   Desktop keeps the OLX layout; this layer is mobile-only.
   ================================================================ */
@media (max-width: 768px) {
  :root { --rose: #b3122f; --rose-dark: #8b0e24; }

  /* Header becomes the app header */
  .topbar { background: #e9e9f5; }
  .hwrap { padding: 10px 12px 4px; gap: 9px; align-items: stretch; }
  .logo { border-radius: 14px; padding: 8px 12px; box-shadow: 0 1px 3px rgba(15, 46, 43, .08); }
  .logo img { height: 33px; }
  .quick {
    display: flex; background: #fff; border-radius: 14px; flex-direction: column; gap: 2px;
    padding: 7px 13px; font-size: 12.5px; font-weight: 700; color: #0f2e2b;
    box-shadow: 0 1px 3px rgba(15, 46, 43, .08); justify-content: center;
  }
  .locbox .pin svg { fill: #b3122f; }
  .quick img { height: 25px; }
  .quick:hover, .quick.on { background: #fff; }
  .sellbtn { display: none; }
  .loginlink { align-self: center; font-size: 14px; }
  .belllink {
    background: #fff; border-radius: 50%; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(15, 46, 43, .08); font-size: 18px; align-self: center;
  }
  .searchrow { padding: 8px 12px 12px; flex-wrap: wrap; gap: 7px; }
  .searchbar { order: 1; flex: 1 1 100%; height: 46px; border: 0; border-radius: 10px; box-shadow: 0 1px 3px rgba(15, 46, 43, .07); }
  .searchbar input { font-size: 14.5px; }
  .searchbar button { display: none; }
  .locbox {
    order: 2; flex: 1 1 100%; background: transparent; border: 0; border-radius: 0;
    height: auto; min-width: 0; padding: 3px 2px 0; margin: 0;
    font-size: 14.5px; font-weight: 700; color: #0f2e2b;
  }
  .locbox .chev { margin-left: 2px; }
  .catnav { display: none; }
  .appband { display: none; }

  /* Page scaffolding + titles */
  .page { padding: 14px 10px 96px; }
  .pagehead h1 { font-size: 21px; color: #0f2e2b; font-weight: 800; }
  .pagehead p { font-size: 13.5px; }
  .secttl { font-size: 19px; color: #0f2e2b; font-weight: 800; }
  .card { border-radius: 14px; border-color: #e8ecec; padding: 16px; box-shadow: 0 1px 3px rgba(15, 46, 43, .04); }
  .card h2 { color: #0f2e2b; }
  .btnprimary { border-radius: 12px; }

  /* Listing cards, app-style */
  .grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .lcard { border-radius: 12px; border-color: #e8ecec; }
  .lcard .ph { aspect-ratio: 1 / 1; }
  .lcard .cbody { display: block; padding: 9px 10px 10px; }
  .lcard .cbody::after { content: ""; display: block; clear: both; }
  .lcard .price { font-size: 16px; font-weight: 800; color: #002f34; }
  .lcard .heart {
    position: absolute; top: 7px; right: 10px; z-index: 2;
    font-size: 22px; color: #002f34; text-shadow: 0 0 7px rgba(255, 255, 255, .95), 0 0 3px rgba(255, 255, 255, .9);
  }
  .lcard .ltitle { font-size: 14px; color: #0f2e2b; -webkit-line-clamp: 1; margin-top: 2px; }
  .lcard .lspec, .lcard .save { display: none; }
  .lcard .lloc, .lcard .ltime { display: inline-block; font-size: 12px; color: #7f7f7f; margin-top: 6px; }
  .lcard .ltime { float: right; }

  /* Category tiles, app-style */
  .tile .timg { background: #fff; border: 1px solid #e8ecec; border-radius: 16px; box-shadow: 0 1px 3px rgba(15, 46, 43, .05); }
  .tile .tname { color: #0f2e2b; font-weight: 600; }

  /* Chips: selected = app red, like the app's filter row */
  .txpill.on { background: #b3122f; border-color: #b3122f; color: #fff; }

  /* Chat bubbles: own = pale teal, like the app */
  .bubble.me { background: #d9ece9 !important; color: #0f2e2b; border-radius: 16px; border-bottom-right-radius: 4px; }
  .bubble.them { border-radius: 16px; border-bottom-left-radius: 4px; }
  .sbub.u { background: #d9ece9; color: #0f2e2b; }

  /* Account hub rows, app-style */
  .mrowlist { border-radius: 14px; border-color: #e8ecec; }
  .mrow { padding: 15.5px 16px; color: #0f2e2b; }
  .seller { color: #0f2e2b; }

  /* Wallet / notifications polish */
  .wbal b { color: #002f34; }
  .nico { background: #f2f3f5; }

  /* Forms */
  .formcard { border-radius: 14px; border-color: #e8ecec; }
  .fld input, .fld select, .fld textarea { border-radius: 10px; }
}

/* ---------- App navigation model + Discover home (mobile) ---------- */
#appFeed { display: none; }
.slimbar { display: none; }
@media (max-width: 768px) {
  /* Home becomes the app's Discover screen */
  #appFeed { display: block; }
  #catGrid, #sections { display: none; }
  .app-dtitle {
    font-family: Georgia, "Times New Roman", serif; text-align: center;
    font-size: 27px; font-weight: 700; color: #0f2e2b; margin: 12px 0 14px;
  }
  .apptabs { display: flex; border-bottom: 1px solid #e8ecec; }
  .atab {
    flex: 1; background: none; border: 0; cursor: pointer; text-align: center;
    padding: 8px 4px 10px; border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  }
  .atab .atab-t { display: block; font-size: 16.5px; font-weight: 600; color: #7f7f7f; }
  .atab small { display: block; color: #8a8a8a; font-size: 12px; margin-top: 2px; }
  .atab.on { border-bottom-color: #0f2e2b; }
  .atab.on .atab-t { color: #0f2e2b; font-weight: 800; }
  .newpill {
    background: #f97316; color: #fff; font-size: 10.5px; font-weight: 700;
    border-radius: 5px; padding: 1.5px 6px; vertical-align: 2px;
  }
  .appchips { display: flex; gap: 8px; padding: 13px 2px 11px; overflow-x: auto; scrollbar-width: none; }
  .appchips::-webkit-scrollbar { display: none; }
  .achip {
    border: 1px solid #d9d9d9; background: #fff; border-radius: 999px;
    padding: 7px 15px; font-size: 13.5px; font-weight: 600; color: #0f2e2b;
    white-space: nowrap; cursor: pointer;
  }
  .achip.on { background: #b3122f; border-color: #b3122f; color: #fff; }
  .fpanel {
    background: #fff; border: 1px solid #e8ecec; border-radius: 12px;
    padding: 10px; margin-bottom: 11px; display: flex; flex-wrap: wrap; gap: 8px;
  }
  .fpanel[hidden] { display: none; }
  .fopt {
    border: 1px solid #d9d9d9; background: #f7f8f8; border-radius: 999px;
    padding: 6px 13px; font-size: 13px; cursor: pointer; color: #0f2e2b;
  }
  .fopt.on { background: #0f2e2b; color: #fff; border-color: #0f2e2b; }

  /* Pushed screens: slim back bar, no bottom nav, no big header */
  body.pushed .topbar { background: #E9E9F5; box-shadow: none; }
  body.pushed { background: #fff; }
  body.pushed .hwrap, body.pushed .searchrow { display: none; }
  body.pushed .slimbar { display: flex; align-items: center; gap: 4px; padding: 11px 14px; }
  .appback {
    background: none; border: 0; font-size: 31px; line-height: 1; cursor: pointer;
    color: #0f2e2b; padding: 0 7px 3px 1px;
  }
  .slimtitle { font-size: 18px; font-weight: 700; color: #0f2e2b; }
  .card { border-radius: 12px; }
  body.pushed .mnav { display: none !important; }
  body.pushed .page { padding-top: 12px; padding-bottom: 30px; }
  body.pushed .pagehead { display: none; }

  /* Listing screen, app-style */
  body.pushed .gallery { margin: -12px -10px 0; }
  body.pushed .gallery .main { border: 0; border-radius: 0; }
  body.pushed .gallery .main img { height: 330px; }
  body.pushed .pricecard { border: 0; padding: 14px 2px 0; margin-top: 4px; }
  body.pushed .infocard, body.pushed .sidecard { border: 0; padding: 10px 2px; }
  body.pushed .trustbtn, body.pushed .chatbtn { border-radius: 12px; }
  #stickyBar { top: auto; bottom: 0; transform: translateY(110%); box-shadow: 0 -3px 14px rgba(15, 46, 43, .13); }
  #stickyBar.show { transform: none; }

  /* Sell picker, app tiles */
  body .catpick button { border-radius: 14px; border-color: #e8ecec; }
}

/* ---------- Installable app (PWA) ---------- */
.installpill {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 88px; z-index: 90;
  background: #b3122f; color: #fff; border: 0; border-radius: 999px;
  padding: 12px 44px 12px 20px; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 22px rgba(179, 18, 47, .38); white-space: nowrap;
}
body.pushed .installpill { bottom: 18px; }
.installx {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 27px; height: 27px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .22); color: #fff; font-size: 13px; line-height: 1;
}
.installsheet {
  position: fixed; left: 12px; right: 12px; bottom: 88px; z-index: 91;
  background: #fff; border: 1px solid #e8ecec; border-radius: 16px; padding: 18px;
  box-shadow: 0 14px 34px rgba(15, 46, 43, .22); display: flex; flex-direction: column; gap: 9px;
  font-size: 14.5px; line-height: 1.55; color: #0f2e2b;
}
.installsheet b { font-size: 16px; }
@media (min-width: 769px) { .installpill, .installsheet { display: none; } }

/* ---------- Why Buy rows + delivery badge (app product screen) ---------- */
.wbrow { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid #f0f2f2; }
.wbrow:first-of-type { border-top: 0; }
.wbic { font-size: 21px; width: 30px; text-align: center; flex: none; }
.wbrow b { font-size: 15px; color: #0f2e2b; }
.wbrow p { margin: 1px 0 0; color: var(--muted); font-size: 13.5px; }
.delivbadge { margin-top: 12px; font-weight: 700; color: #0f2e2b; font-size: 14.5px; }
.sbtrust { display: none; }
#sbOffer { display: none; }
.sellpickhead { display: none; }
.related .secttl2 { font-size: 19px; color: #0f2e2b; margin: 20px 0 10px; }

@media (max-width: 768px) {
  /* The app has no website footer and no extra intro lines */
  footer.site { display: none; }
  .pagehead p { display: none; }
  #sellCard .sub { display: none; }

  /* Product screen: only what the app shows, in the app's order */
  .highlights { display: none; }
  .sidecard .trustbtn, .sidecard .trustnote, .adid, .favbig { display: none !important; }
  #stickyBar { padding: 0; }
  .sbtrust {
    display: block; background: #eef7f5; color: #0f2e2b; font-size: 12px;
    padding: 7px 12px; border-bottom: 1px solid #e8ecec;
  }
  #stickyBar .sbwrap { padding: 9px 12px; }
  #sbBuy { display: none; }
  #sbOffer {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid #002f34; color: #002f34; background: #fff;
    border-radius: 10px; padding: 11px 16px; font-weight: 700; font-size: 14.5px; text-decoration: none;
  }
  #stickyBar { transform: none !important; }

  /* Sell: step 1 is the app's category screen, step 2 the form */
  .sellpickhead { display: block; margin-bottom: 14px; }
  .sellpickhead h2 { font-size: 21px; color: #0f2e2b; margin: 0 0 3px; }
  .sellpickhead p { color: var(--muted); margin: 0; font-size: 14px; }
  #sellCard > h1 { display: none; }
  body.sellform #sellCard > h1 { display: block; font-size: 20px; color: #0f2e2b; }
  body.sellform .sellpickhead, body.sellform #catField { display: none; }

  /* Chat composer, app-style round buttons */
  .composer .sendbtn { border-radius: 50%; width: 44px; height: 44px; flex: none; font-size: 0; padding: 0; }
  .composer .sendbtn::after { content: "\27A4"; font-size: 18px; }
  .composer .offerbtn { border-radius: 999px; }
}

/* ---------- App home: category strip + Recently Viewed (mobile) ---------- */
.catstrip, .recentsec { display: none; }
@media (max-width: 768px) {
  .catstrip {
    display: flex; gap: 4px; overflow-x: auto; padding: 12px 0 2px;
    scrollbar-width: none;
  }
  .catstrip::-webkit-scrollbar { display: none; }
  .catstrip a { flex: none; width: 70px; text-align: center; text-decoration: none; }
  .catstrip .csimg {
    width: 54px; height: 54px; border-radius: 16px; background: #f2f3f5;
    border: 1px solid #e8ecec; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 4px;
  }
  .catstrip img { width: 40px; height: 40px; object-fit: contain; }
  .catstrip .csname { font-size: 11.5px; color: #0f2e2b; font-weight: 600; display: block; line-height: 1.25; }
  .recentsec { margin-top: 6px; }
  .recentsec.open { display: block; }
  .recentsec h3 { font-size: 17px; color: #0f2e2b; margin: 12px 0 8px; font-weight: 800; }
  .hscroll { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
  .hscroll::-webkit-scrollbar { display: none; }
  .hscroll .lcard { flex: 0 0 158px; }
}

/* ---------- Sell intro (the app's video screen, mobile) ---------- */
.sellintro { display: none; }
@media (max-width: 768px) {
  .sellintro {
    position: relative; margin: -12px -10px 0; height: calc(100dvh - 54px);
    background: #000; overflow: hidden;
  }
  .sellintro video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .si-top {
    position: absolute; top: 0; left: 0; right: 0; display: flex;
    justify-content: space-between; padding: 14px;
  }
  .si-btn {
    background: rgba(255, 255, 255, .94); color: #0f2e2b; font-weight: 700; font-size: 14px;
    padding: 9px 16px; border-radius: 999px; text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  }
  .si-example {
    position: absolute; top: 70px; left: 14px; background: rgba(255, 255, 255, .96);
    border-radius: 12px; padding: 9px 13px; box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
  }
  .si-example b { display: block; font-size: 13.5px; color: #0f2e2b; }
  .si-example span { font-size: 12px; color: var(--muted); }
  .si-card {
    position: absolute; left: 0; right: 0; bottom: 0; background: #fff;
    border-radius: 20px 20px 0 0; padding: 20px 18px 22px;
  }
  .si-card h2 { margin: 0 0 5px; font-size: 21px; color: #0f2e2b; }
  .si-card p { margin: 0 0 15px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
  .si-card .btnprimary { width: 100%; }
}

/* ---------- Account sections + My Listings stats (app parity) ---------- */
.msec {
  font-size: 12px; letter-spacing: .09em; color: var(--muted);
  font-weight: 700; margin: 18px 2px 8px;
}
.mrow .mtxt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mrow .msub { font-size: 12.5px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.adstats { display: flex; gap: 9px; margin-bottom: 14px; }
.statbox {
  flex: 1; background: #fff; border: 1px solid var(--card-line); border-radius: 12px;
  padding: 11px 6px; text-align: center;
}
.statbox b { display: block; font-size: 18px; color: #002f34; }
.statbox span { font-size: 10.5px; letter-spacing: .05em; color: var(--muted); font-weight: 700; }

/* ---------- Category screen, app-style (mobile) ---------- */
@media (max-width: 768px) {
  .hero { display: none; }
  #browseMoreTitle, .browselinks, .seotext { display: none; }
  .sortbar {
    display: flex; align-items: center; gap: 8px; padding: 4px 0 12px;
    font-size: 14px; color: #0f2e2b;
  }
  .sortbar #countLine { font-weight: 700; }
  .sortbar label { color: var(--muted); font-size: 13px; }
  .sortbar select {
    border: 1px solid #d9d9d9; border-radius: 999px; padding: 7px 10px;
    font-size: 13.5px; background: #fff; color: #0f2e2b;
  }
  .browsetabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
  .browsetabs::-webkit-scrollbar { display: none; }
}
@media (max-width: 768px) { .crumbs { display: none; } }

/* ---------- Home = the app's home (banner, photo grid, heart) ---------- */
.homebanner, .favheart { display: none; }
.mnav .nic svg { display: block; }
.mnav a.on .nic svg { fill: currentColor; }
@media (max-width: 768px) {
  /* Three equal header cards, like the app; login text only for guests */
  .hwrap .logo { flex: 1 1 0; justify-content: center; }
  .hwrap .quick { flex: 1 1 0; align-items: center; }
  .hspacer { display: none; }
  body.auth-in .loginlink { display: none; }
  .loginlink { align-self: center; white-space: nowrap; }

  .favheart {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 46px; height: 46px; border-radius: 50%; background: #fff;
    color: #0f2e2b; font-size: 24px; text-decoration: none;
    box-shadow: 0 1px 3px rgba(15, 46, 43, .08); align-self: center;
  }
  .searchrow .searchbar { flex: 1 1 auto; }

  .homebanner { display: block; margin: 10px 0 4px; }
  .homebanner img { width: 100%; border-radius: 16px; display: block; }

  /* Category photo grid: 5 + 4, the app's own photos */
  .catstrip {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 8px;
    overflow: visible; padding: 12px 0 2px;
  }
  .catstrip a { width: auto; }
  .catstrip .csimg {
    width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 16px;
    overflow: hidden; border: 0; background: #f2f3f5; margin: 0 auto 5px;
  }
  .catstrip .csimg img { width: 100%; height: 100%; object-fit: cover; }
  .catstrip .csname { font-size: 12px; }
}
@media (max-width: 768px) {
  .favheart { order: 1; }
  .qemoji { font-size: 26px; line-height: 1.1; }
  .searchbar { background: #f4f6f6; box-shadow: none; }
}
@media (max-width: 768px) {
  /* The app's home header has no bell — notifications live under Account */
  .belllink { display: none !important; }
}

/* ---------- Compact home (OLX density — less zoomed, finer scale) ---------- */
@media (max-width: 768px) {
  .hwrap { padding-top: 10px; }
  .hwrap .logo, .hwrap .quick { padding: 9px 8px; border-radius: 13px; }
  .hwrap .logo img { height: 25px; }
  .qemoji { font-size: 22px; }
  .hwrap .quick { font-size: 13px; gap: 3px; }
  .searchrow { margin-top: 9px; }
  .searchbar input { padding: 11px 13px; font-size: 14.5px; }
  .favheart { width: 42px; height: 42px; font-size: 21px; }
  .locbox { padding: 9px 2px 3px; font-size: 14.5px; }
  .homebanner { margin: 8px 0 2px; }
  .homebanner img { border-radius: 14px; }
  .catstrip { gap: 10px 6px; padding: 10px 0 2px; }
  .catstrip .csimg { border-radius: 14px; }
  .catstrip .csname { font-size: 11px; }
  .dtitle { font-size: 27px; margin: 16px 0 2px; }
  .dtabs a { padding: 8px 2px 7px; }
  .dtabs b { font-size: 16.5px; }
  .dtabs span { font-size: 12px; }
  .chiprow { padding: 10px 0 4px; gap: 7px; }
  .fchip { padding: 8px 13px; font-size: 13px; }
  .feed { gap: 10px; }
  .rectitle { font-size: 20px; margin: 14px 0 2px; }
  .recsub { margin-bottom: 8px; }
}

/* ---------- Dark theme (Settings → Appearance; app palette) ---------- */
html.dark body { background: #121212; color: #e8ecec; }
html.dark .page, html.dark .chatwrap { background: #121212; }
html.dark .card, html.dark .dcard, html.dark .mlcard, html.dark .ofrow, html.dark .setcard,
html.dark .mrowlist, html.dark .tlist, html.dark .tmain, html.dark .seller, html.dark .accq,
html.dark .mlstats, html.dark .kpi, html.dark .qagrid a { background: #1e1e1e; border-color: #2c2c2c; color: #e8ecec; }
html.dark .thead, html.dark .lstrip, html.dark .tlisthead, html.dark .chatbar { background: #1e1e1e; border-color: #2c2c2c; }
html.dark h1, html.dark h2, html.dark h3, html.dark .dcard h3, html.dark .tname, html.dark .lt,
html.dark .accname, html.dark b { color: #f2f4f4; }
html.dark input, html.dark textarea, html.dark select { background: #262626; color: #eee; border-color: #3a3a3a; }
html.dark .topbar { background: #121212; }
html.dark .mlhead, html.dark .acchead, html.dark .hwrap .logo, html.dark .hwrap .quick { background: #23232e; }
html.dark .searchbar, html.dark .favheart, html.dark .accbell { background: #26262e; color: #eee; }
html.dark .mnav { background: #1a1a1a; border-color: #2c2c2c; }
html.dark footer.site { background: #16181a; }
html.dark .mlsearch, html.dark .mlsort, html.dark .mltabs button, html.dark .ptabs button,
html.dark .oftabs button { background: #1e1e1e; border-color: #3a3a3a; color: #e8ecec; }
html.dark .storycard { background: #1b2a2a; border-color: #2c3e3e; color: #cfe3e0; }
html.dark .slimbar { background: #1e1e1e; color: #eee; border-color: #2c2c2c; }

/* Audit round 2 dark fixes: explicit per-component overrides. A global
   dark --ink was rejected — some dark-mode surfaces are white, so a
   blanket ink change would break those. */
html.dark .seotext p { color: #b8c4c7; }
html.dark .lcard, html.dark .locbox, html.dark .catnav { background: #1e1e1e; border-color: #2c2c2c; }
html.dark .locbox { color: #e8ecec; }
html.dark .locbox .chev, html.dark .cwrap a { color: #e8ecec; }
html.dark .setrow { color: #e8ecec; border-color: #2c2c2c; }
html.dark .mrow, html.dark .accpage .mrow { color: #e8ecec; }
html.dark body.gate-login .formcard h1 { color: #f2f4f4; }
html.dark .epsec { color: #f2f4f4; }

/* Header city picker dropdown (locbox). */
.citydrop { position: absolute; z-index: 5000; width: 280px; background: #fff; border: 1px solid var(--card-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 8px; }
.citydrop input { width: 100%; padding: 9px 10px; border: 1px solid var(--card-line); border-radius: 8px; font-size: 14px; margin-bottom: 6px; box-sizing: border-box; }
.citydrop .citylist { max-height: 280px; overflow-y: auto; }
.citydrop .citylist button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; font-size: 14px; cursor: pointer; border-radius: 6px; color: var(--ink); }
.citydrop .citylist button:hover { background: #f2f4f5; }
html.dark .citydrop { background: #1e1e1e; border-color: #333; }
html.dark .citydrop .citylist button { color: #e8ecec; }
html.dark .citydrop .citylist button:hover { background: #2a2a2a; }

/* Shared secondary button (My Ads sort/select, seller pager/share). */
.mlsort { flex: none; border: 1.5px solid #dfe5e5; background: #fff; border-radius: 12px; padding: 9px 16px; font: inherit; font-weight: 700; font-size: 14.5px; color: #0f2e2b; cursor: pointer; }
.mlsort:disabled { opacity: .45; cursor: default; }

/* OLX-style compact scale on phones: OLX sets its root font to 62.5% so its
   whole mobile site renders ~13% smaller than a standard site. The same
   effect here, mobile only — desktop untouched. */
@media (max-width: 768px) {
  body { zoom: 0.87; }
}

/* Sell intro, app-style fullscreen: no header, no footer, no white gaps —
   the video fills the whole screen and the card sits at its bottom. */
@media (max-width: 768px) {
  body.sell-intro-on { background: #000; overflow: hidden; }
  /* The 0.87 mobile zoom shrinks the painted height too, so a plain 100dvh
     intro leaves a black strip at the bottom: stretch it by 1/0.87 so the
     video AND the card reach the real bottom of the screen. */
  body.sell-intro-on .sellintro { height: 115dvh; }
  body.sell-intro-on .topbar,
  body.sell-intro-on .catnav,
  body.sell-intro-on footer.site,
  body.sell-intro-on .installpill,
  body.sell-intro-on .mnav { display: none !important; }
  body.sell-intro-on main.formwrap { padding: 0; margin: 0; max-width: none; }
  body.sell-intro-on .sellintro { margin: 0; }
}