/* BuySellBelize marketplace (phase 8). Phone-first: one feed for goods, services and
   Looking for, a tab bar on phones, the Sell form, item page and member pages.
   Uses the tokens from theme.css. */
[hidden]{display:none!important}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.badge.mem{background:var(--surface);border:1px solid var(--line-strong);color:var(--muted)}
.btn.danger{color:var(--danger);border-color:var(--danger-soft)}
.btn.wa{background:#1E8E4E;border-color:#1E8E4E;color:#fff}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.notice{border:1px solid var(--line);border-left:4px solid var(--verify);border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:18px;background:var(--surface)}
.notice.ok{background:var(--verify-soft)}
.notice.err{border-left-color:var(--danger);background:var(--danger-soft)}
.notice.warn{border-left-color:var(--pro);background:var(--pro-soft)}
.box{border:1px solid var(--line);border-radius:16px;padding:18px 20px;min-width:0}
.box h2{font-size:24px;margin-bottom:8px}
.narrowbox{max-width:560px}

/* Home */
.mhero{padding-block:44px 22px}
.mhero h1{font-size:clamp(34px,5vw,60px);font-weight:400;max-width:16ch;margin-top:12px}
.mhero h1 em{font-style:italic;color:var(--sea)}
.mhero .lead{color:var(--muted);font-size:clamp(15px,1.5vw,18px);max-width:56ch;margin-top:14px}
.msearch{display:flex;gap:8px;max-width:640px;margin-top:22px}
.msearch .field{flex:1;min-width:0;border-radius:999px;padding:12px 18px;font-size:15px}
.mhero .chips,.mfilters .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.mhero .trust{margin-top:28px}
.townline{margin-top:12px;font-size:14px;color:var(--muted);max-width:420px}
.townline summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none}
.townline summary::-webkit-details-marker{display:none}
.townline summary svg{width:15px;height:15px;fill:none;stroke:var(--sea);stroke-width:2.2}
.townline summary b{color:var(--fg)}
.townline summary span{color:var(--sea);font-weight:600}
.townline form{display:grid;gap:8px;margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.townline .btn{justify-self:start}
.msection{padding-block:30px}
.msection .section-head{margin-bottom:18px}
.steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Cards */
.igrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 18px}
.wgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,220px);gap:16px;overflow-x:auto;padding-bottom:8px}
.icard{display:block;min-width:0;text-decoration:none;color:var(--fg)}
.icard .photo-wrap{margin-bottom:8px}
.icard .ip{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.01em}
.icard h3{font-family:var(--body);font-size:14.5px;font-weight:600;letter-spacing:0;line-height:1.3;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icard .im{font-size:12.5px;color:var(--muted);margin-top:2px}
.icard .ir{margin-top:6px}
.icard .badge{font-size:11px;padding:2px 8px 2px 6px}
.tag{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;background:var(--sea);color:#fff;z-index:1}
.tag.svc,.tag.sold{background:var(--fg);color:#fff}
.wantcard{display:grid;gap:3px;border:1.5px dashed var(--line-strong);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--fg);min-width:0}
.wantcard .eyebrow{color:var(--sea-ink);font-size:10.5px}
.wantcard b{font-size:15px}
.wantcard span:last-child{font-size:12.5px;color:var(--muted)}
.empty{display:grid;justify-items:start;gap:8px;border:1px dashed var(--line-strong);border-radius:16px;padding:22px;color:var(--muted);font-size:14px}
.empty b{color:var(--fg);font-size:16px}
.empty .btn{margin-top:4px}

/* Search */
.mpage{padding-block:26px 50px}
.mpage.narrow{max-width:760px}
.mpage h1{font-size:clamp(28px,3.4vw,40px)}
.mfilters{display:grid;gap:4px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end;margin-top:12px;max-width:760px}
.frow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.frow > .lbl{margin:0;min-width:90px;font-size:13px;font-weight:600}
.frow .chips{margin-top:0!important}
.frow .chip,.mfilters .chip{padding:6px 12px;font-size:13px}
.rhead{margin-bottom:14px;font-size:14px;color:var(--muted)}
.frow + .rhead{margin-top:22px}

/* Item */
.posted{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;background:var(--verify-soft);border-radius:16px;padding:16px 18px;margin-bottom:22px}
.posted b{display:block;font-size:16px}
.posted span{font-size:14px;color:var(--muted)}
.ibody{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,380px);grid-template-areas:"g b" "i b";gap:24px 44px;align-items:start}
.igallery{grid-area:g}
.ibuy{grid-area:b}
.iinfo{grid-area:i;min-width:0}
.igallery{min-width:0}
.imain{border-radius:16px}
.imain img{width:100%;height:100%;object-fit:cover}
.ithumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:10px}
.ithumbs .photo-wrap{border-radius:8px}
.ithumbs img{width:100%;height:100%;object-fit:cover}
.wanted-hero{border:1.5px dashed var(--line-strong);border-radius:16px;padding:36px 28px;display:grid;gap:8px;background:var(--sand)}
.wanted-hero b{font-family:var(--display);font-size:clamp(24px,3vw,34px);font-weight:500}
.idesc{max-width:62ch}
.idesc h2{font-size:22px;margin-bottom:8px}
.idesc p{margin-bottom:10px}
.ifacts{width:100%;max-width:62ch;border-collapse:collapse;font-size:14px;margin-top:18px}
.ifacts td{padding:9px 0;border-top:1px solid var(--line);vertical-align:top}
.ifacts td:first-child{color:var(--muted);width:38%}
.ibuy{position:sticky;top:20px;display:grid;gap:12px;min-width:0}
.ibuy h1{font-size:clamp(22px,2.4vw,30px);font-weight:500}
.iprice{font-family:var(--display);font-size:clamp(30px,3.4vw,40px);font-weight:600;letter-spacing:-.02em;line-height:1}
.imeta{font-size:13.5px;color:var(--muted)}
.seller{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:12px;text-decoration:none;color:var(--fg)}
.seller .avatar{width:44px;height:44px}
.seller b{display:block;font-size:15px}
.seller small{display:block;font-size:12.5px;color:var(--muted)}
.avatar.big{width:64px;height:64px;font-size:22px;flex:none}
.getit{display:grid;gap:8px}
.opt{display:flex;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13.5px}
.cta-buy{display:grid;gap:8px}
.cta-buy .two{gap:8px}
.cta-buy .btn{justify-content:center}
.mine{display:grid;gap:10px;border:1px solid var(--line);border-radius:16px;padding:14px;justify-items:start}
.mine .actions{margin-top:0}
.mine form,.myacts form{display:inline}
.safe{background:var(--sand);border-radius:14px;padding:12px 14px;font-size:13px;color:var(--muted)}
.safe b{color:var(--fg)}

/* Sell */
.sellform{display:grid;gap:18px;max-width:640px;margin-top:18px}
.sellform fieldset{border:0;padding:0;margin:0;min-width:0}
.sellform fieldset.box{border:1px solid var(--line);padding:16px 18px}
.sellform legend.lbl{display:block;font-size:13px;font-weight:600;margin-bottom:8px;padding:0}
.sellform .seg3{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:999px;padding:4px}
.seg3 label{position:relative;text-align:center}
.seg3 input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.seg3 span{display:block;padding:9px 6px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--muted)}
.seg3 input:checked + span{background:var(--fg);color:#fff}
.seg3 input:focus-visible + span{outline:2px solid var(--sea);outline-offset:2px}
.seg3 input:disabled + span{opacity:.4}
.sellform .radios{display:flex;gap:16px;flex-wrap:wrap;font-size:14px}
.radios input,.towncheck input,.sellform .chips input{accent-color:var(--sea)}
.towncheck{display:grid;gap:12px}
.towncheck b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.towncheck .chip,.sellform .chips .chip{padding:6px 11px;font-size:13px;margin:0 4px 6px 0;cursor:pointer}
.sellform .chips{display:flex;flex-wrap:wrap}
.zone{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:8px;margin-top:8px}
.pthumbs,.ppreview{display:flex;gap:8px;flex-wrap:wrap}
.ppreview:not(:empty){margin-top:8px}
.pthumbs{margin-bottom:8px}
.pthumb{display:grid;gap:4px;font-size:12px;width:84px}
.pthumb img,.ppreview img{width:84px;height:84px;object-fit:cover;border-radius:10px}

/* Me and member pages */
.mehead{display:flex;gap:16px;align-items:center;margin-bottom:22px}
.mehead .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px;font-size:14px}
.mehead .mesignout{margin-left:auto;flex:none}
.ptabs{overflow-y:hidden}
.ptabs a{padding:12px 14px;font-weight:600;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;text-decoration:none}
.ptabs a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--fg)}
.mylist{display:grid}
.myrow{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding-block:14px;border-top:1px solid var(--line)}
.myrow .photo-wrap{border-radius:10px}
.myrow img{width:100%;height:100%;object-fit:cover}
.myinfo{display:grid;gap:3px;font-size:13.5px;min-width:0}
.myinfo a{text-decoration:none}
.myacts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* Phone tab bar */
.tabbar{display:none}
@media (max-width:960px){
  .igrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ibody{grid-template-columns:1fr;grid-template-areas:"g" "b" "i";gap:24px}
  .ibuy{position:static}
}
@media (max-width:700px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding:6px max(4px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px))}
  .tabbar a{display:grid;justify-items:center;gap:2px;font-size:10.5px;font-weight:600;color:var(--muted);text-decoration:none}
  .tabbar a[aria-current="page"]{color:var(--fg)}
  .tabbar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  /* Sell stands out: a big gold button that rises above the bar. */
  .tabbar .sellb i{width:56px;height:56px;border-radius:50%;background:var(--gold);display:grid;place-items:center;margin-top:-26px;border:4px solid var(--surface);box-shadow:0 6px 16px rgba(15,61,46,.25)}
  .tabbar .sellb svg{width:28px;height:28px;stroke:var(--sea);stroke-width:2.8}
  .tabbar .sellb{color:var(--sea);font-weight:700}
  /* Sell and Me (signed in) open a menu above the bar. */
  .tabmenu summary{display:grid;justify-items:center;gap:2px;font-size:10.5px;font-weight:600;color:var(--muted);list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tabmenu summary::-webkit-details-marker{display:none}
  .tabmenu[open] summary,.tabmenu summary[aria-current="page"]{color:var(--fg)}
  .tabbar .sellmenu summary{color:var(--sea);font-weight:700}
  .tabpop{position:absolute;bottom:calc(100% + 10px);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 28px rgba(0,0,0,.2);overflow:hidden;z-index:2}
  .mepop{right:8px;min-width:220px}
  .sellpop{left:50%;transform:translateX(-50%);width:min(340px,calc(100vw - 24px))}
  .tabpop-h{display:block;padding:14px 16px 6px;font-size:13px;font-weight:700;color:var(--muted)}
  .tabbar .tabpop a{display:flex;align-items:center;gap:12px;min-height:54px;padding:0 16px;font-size:15.5px;font-weight:600;color:var(--fg);border-top:1px solid var(--line)}
  .tabbar .tabpop a:first-of-type{border-top:0}
  .tabbar .tabpop a.minor{font-weight:500;color:var(--muted);min-height:48px}
  .tabbar .tabpop a span{display:grid;gap:1px;min-width:0}
  .tabbar .tabpop a small{font-size:12.5px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tabpop svg{width:22px;height:22px;flex:0 0 22px;color:var(--sea)}
  .tabbar .sellmenu[open] .sellb i{transform:rotate(45deg)}
  .tabbar .sellb i{transition:transform .15s}
  body:has(.tabmenu[open]) .wafloat{display:none}
  /* Dim the page behind an open menu; tapping the dim area closes it (theme.js). */
  body:has(.tabmenu[open])::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:19}
  .mhero{padding-block:26px 12px}
  .igrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .wgrid{grid-template-columns:1fr}
  .steps.four{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr}
  .myrow{grid-template-columns:56px minmax(0,1fr)}
  .myacts{grid-column:1/-1;justify-content:flex-start}
  .ithumbs{grid-template-columns:repeat(5,minmax(0,1fr))}
  .zone{grid-template-columns:minmax(0,1fr) 96px}
}
@media print{.tabbar{display:none!important}}

/* "Install app" popup on the homepage (footer.php + theme.js). Sits above the phone tab bar. */
.installp{position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:40;display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px 14px;align-items:start;max-width:440px;margin:0 auto;padding:16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 50px rgba(15,61,46,.22)}
.installp[hidden]{display:none}
.installp img{border-radius:12px}
.installp b{display:block;font-family:var(--display);font-size:16px;line-height:1.25}
.installp p{margin:4px 0 0;font-size:14px;color:var(--muted)}
.installp p{display:none}
.installp.is-prompt .installp-and,.installp.is-ios .installp-ios,.installp.is-menu .installp-menu{display:block}
.installp-btns{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.installp-btns .btn{min-height:48px;width:100%}
.installp.is-ios .installp-go,.installp.is-menu .installp-go{display:none}
.installp.is-ios .installp-btns,.installp.is-menu .installp-btns{grid-template-columns:1fr}
@media (min-width:701px){.installp{bottom:calc(16px + env(safe-area-inset-bottom,0px))}}
@media print{.installp{display:none!important}}

/* Floating WhatsApp button to BSB support (footer.php). Phones only, above the tab bar; it steps aside while the install popup shows. */
.wafloat{display:none}
@media (max-width:700px){
  .wafloat{display:grid;place-items:center;position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:21;width:56px;height:56px;border-radius:50%;background:#25D366;box-shadow:0 6px 18px rgba(0,0,0,.22)}
  .wafloat svg{width:30px;height:30px;fill:#fff}
  body:has(.installp:not([hidden])) .wafloat{display:none}
}
@media print{.wafloat{display:none!important}}