/* =========================================================================
   Let's Sell and Buy — v7 module styles
   search suggestions · filters · wizard · chat · plans · admin · legal ·
   mobile bottom nav.  Loaded after style.css and re-uses its design tokens.
   ========================================================================= */

/* ---- alerts ---- */
.alert{padding:.9rem 1.1rem;border-radius:var(--r-sm);background:var(--navy-50);color:var(--ink);
    border:1px solid var(--glass-brd);margin-bottom:1.2rem;font-weight:600;font-size:.92rem}
.alert--error{background:#fdecea;border-color:#f5c6c2;color:#8d211a}
.alert--ok{background:var(--green-50);border-color:#bfe6cd;color:#14663a}
.alert--warn{background:#fff6e5;border-color:#f2ddb0;color:#8a5a06}

/* ---- search suggestions ---- */
.search{position:relative}
.suggest{position:absolute;top:calc(100% + 8px);inset-inline:0;background:#fff;border:1px solid var(--line);
    border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden;z-index:60;max-height:60vh;overflow-y:auto}
.suggest__i{display:flex;flex-direction:column;gap:.15rem;padding:.6rem .9rem;border-bottom:1px solid var(--bg-2);font-size:.9rem}
.suggest__i:hover{background:var(--navy-50)}
.suggest__i small{color:var(--muted);font-size:.78rem}
.suggest__i--cat span,.suggest__i--sub span{font-weight:700;color:var(--navy)}
.suggest__i--area span{font-weight:700;color:var(--green,#16A34A)}
.suggest__i--area span::before{content:"📍 "}
.suggest__all{display:block;padding:.65rem .9rem;text-align:center;font-weight:700;color:var(--navy);background:var(--bg-2)}

/* ================= THE hero search bar =================
   One keyword field on top, then emirate / district / section and the button.
   It is the only search box on the home page. */
.herofind{max-width:860px;margin:1.8rem auto 0;background:#fff;border:1px solid var(--glass-brd);
    border-radius:var(--r);box-shadow:var(--shadow-lg);padding:.55rem;text-align:start}
.herofind__main{position:relative;display:flex;align-items:center;gap:.2rem;
    background:var(--bg-2);border-radius:99px;padding:.15rem .35rem}
.herofind__main .search__icon{margin-inline:.7rem;color:var(--muted);width:22px;height:22px;flex-shrink:0}
.herofind__main input{flex:1;border:none;outline:none;background:none;min-width:0;
    padding:.85rem .2rem;font-size:1rem;font-family:inherit}
/* flex, not a fixed grid: the district field only appears once an emirate is
   chosen, and the remaining fields must close the gap instead of leaving a hole */
.herofind__filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.55rem;align-items:flex-end}
.herofind__f{display:flex;flex-direction:column;gap:.15rem;flex:1 1 150px;min-width:0}
.herofind__f[hidden],.filters__row[hidden],.form__row[hidden]{display:none}
.herofind__f>span{font-size:.7rem;font-weight:700;color:var(--muted);padding-inline-start:.7rem}
.herofind__f select{width:100%;border:1px solid var(--line);background:#fff;border-radius:99px;
    padding:.6rem .85rem;font-weight:600;font-family:inherit;font-size:.9rem;color:var(--ink);
    outline:none;cursor:pointer;text-overflow:ellipsis}
.herofind__f select:focus{border-color:var(--navy)}
.herofind__go{align-self:end;display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
    background:linear-gradient(135deg,var(--navy),var(--navy-700));color:#fff;font-weight:700;
    padding:.72rem 1.6rem;border-radius:99px;border:none;cursor:pointer;font-family:inherit}
.herofind__go svg{width:18px;height:18px}
.herofind__go:hover{filter:brightness(1.08)}
.header__spacer{flex:1}
@media (max-width:640px){
    .herofind__f{flex:1 1 42%}
    .herofind__go{flex:1 1 100%;justify-content:center;padding-block:.8rem}
}

/* ---- browse layout: filters + results ---- */
.browse{display:grid;grid-template-columns:280px 1fr;gap:1.5rem;align-items:start}
.browse__side{position:sticky;top:96px}
.filters{border-radius:var(--r);padding:1rem}
.filters__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.filters__head h3{display:flex;align-items:center;gap:.45rem;font-size:1rem}
.filters__count{background:var(--navy);color:#fff;border-radius:99px;font-size:.72rem;padding:.05rem .45rem}
.filters__toggle{display:none;border:1px solid var(--line);border-radius:99px;padding:.35rem .9rem;font-weight:700;font-size:.85rem}
.filters__body{display:flex;flex-direction:column;gap:.85rem;margin-top:.9rem}
.filters__row label{display:block;font-size:.82rem;font-weight:700;color:var(--ink-2);margin-bottom:.3rem}
.filters__row select,.filters__row input{width:100%;padding:.55rem .7rem;border:1px solid var(--line);
    border-radius:var(--r-sm);background:#fff;font-size:.9rem}
.filters__pair{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.filters__actions{display:flex;flex-direction:column;gap:.5rem;margin-top:.3rem}

/* ---- pagination ---- */
.pager{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem;flex-wrap:wrap}
.pager__btn{border:1px solid var(--line);border-radius:99px;padding:.5rem 1.1rem;font-weight:700;background:#fff}
.pager__btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.pager__info{color:var(--muted);font-size:.88rem}

/* ---- ad slots ---- */
.adslot{margin:1.2rem 0;min-height:90px;display:flex;align-items:center;justify-content:center}
.adslot__house{display:flex;flex-direction:column;align-items:center;gap:.2rem;width:100%;padding:1.4rem 1rem;
    border:1.5px dashed var(--glass-brd);border-radius:var(--r);background:var(--bg-2);text-align:center}
.adslot__house strong{color:var(--navy)}
.adslot__house span{color:var(--muted);font-size:.85rem}
.adslot--side{min-height:250px;margin-top:1rem}
.section__note{color:var(--muted);font-size:.88rem;margin-bottom:1rem}

/* ---- post-ad wizard ---- */
.wizard-bar{display:flex;gap:.5rem;list-style:none;margin-bottom:1.2rem;flex-wrap:wrap}
.wizard-bar li{flex:1;min-width:130px;display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;border-radius:var(--r-sm);
    background:var(--bg-2);color:var(--muted);font-size:.85rem;font-weight:700;border:1px solid transparent}
.wizard-bar li span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#fff;
    border:1px solid var(--line);font-size:.8rem}
.wizard-bar li.is-active{background:var(--navy-50);color:var(--navy);border-color:var(--navy)}
.wizard-bar li.is-active span{background:var(--navy);color:#fff;border-color:var(--navy)}
.wizard-bar li.is-done{color:var(--green)}
.wizard__nav{display:flex;gap:.7rem;justify-content:space-between;margin-top:1.4rem;flex-wrap:wrap}
.wizard__nav .btn-primary{flex:1}
.form__grid--auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.form__check--row{display:flex;align-items:center;gap:.5rem;margin:.4rem 0;font-weight:600;font-size:.9rem}
.form__checks{display:flex;flex-wrap:wrap;gap:.5rem .9rem}
.form__row--boxed{padding:1rem;border-radius:var(--r);margin-bottom:1rem}
.form__hint{color:var(--muted);font-size:.85rem;margin-bottom:.6rem}
.form__err{color:var(--red);font-size:.8rem;font-weight:700;display:block;margin-top:.25rem}
.profile-block[hidden]{display:none !important}
.commission-disclosure{margin:0 0 1rem;padding:1rem 1.1rem;border:1px solid #B7791F;border-inline-start:4px solid #B7791F;
    border-radius:var(--r-sm);background:#FFF8E1;color:var(--ink)}
.commission-disclosure strong{display:block;color:#6B3F00;font-size:1rem;margin-bottom:.25rem}
.commission-disclosure p{margin:0;color:var(--ink-2);line-height:1.65}
.commission-disclosure a{font-weight:800;color:var(--navy);text-decoration:underline}
.commission-note{color:var(--ink-2);border:1px solid var(--line-strong);border-inline-start:4px solid var(--green);line-height:1.65}
.account-email-ok{margin:.8rem 0 0;padding:.8rem 1rem;border:1px solid #15803D;border-radius:var(--r-sm);
    background:#F0FDF4;color:#14532D;font-weight:700}
.wizard__error{margin:0 0 1rem}
.ad-preview{border-inline-start:4px solid var(--navy)}
.ad-preview__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:0}
.ad-preview__grid>div{padding:.75rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);min-width:0}
.ad-preview__grid dt{font-size:.76rem;color:var(--muted-strong);font-weight:800;margin-bottom:.25rem}
.ad-preview__grid dd{margin:0;color:var(--ink);font-weight:700;overflow-wrap:anywhere;line-height:1.55}
.ad-preview__wide{grid-column:1/-1}

/* ---- uploads ---- */
.upload__previews{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem}
.upload__prev{position:relative;width:88px;height:88px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line)}
.upload__prev img{width:100%;height:100%;object-fit:cover}
.upload__prev.is-cover::after{content:"\2605";position:absolute;top:2px;inset-inline-start:4px;color:var(--gold);font-size:1rem}

/* ---- OTP ---- */
.otp{margin-top:1rem;padding:1rem;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--glass-brd)}
.otp h3{font-size:1rem;margin-bottom:.3rem}
.otp__row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.otp__row input{flex:1;min-width:140px;padding:.6rem .8rem;border:1px solid var(--line);border-radius:var(--r-sm);
    letter-spacing:.3em;text-align:center;font-weight:700}
.otp__msg{font-size:.86rem;font-weight:700;margin-top:.5rem}
.otp__msg.is-ok{color:var(--green)}
.otp__msg.is-err{color:var(--red)}
.otp-page{max-width:700px;margin-inline:auto;padding:clamp(1rem,3vw,2rem);border-radius:var(--r)}
.otp-page>.alert{margin-bottom:1rem}

/* ---- account / tables ---- */
.account-card{padding:1.6rem;border-radius:var(--r);text-align:center}
.account-card__phone{margin:.4rem 0 1rem;color:var(--ink-2);font-weight:700}
.social-login{border:0;padding:0;background:transparent}
.social-login h2{font-size:1.15rem;margin-bottom:.8rem}
.social-login__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.social-login__btn{display:flex;align-items:center;justify-content:center;gap:.7rem;min-height:52px;padding:.65rem 1rem;border:1px solid #747775;border-radius:var(--r-sm);background:#fff;color:#1f1f1f;font-weight:700;line-height:1.35;transition:border-color .18s,background .18s,box-shadow .18s,transform .18s}
.social-login__btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(32,38,80,.1)}
.social-login__btn:focus-visible{outline:3px solid rgba(66,133,244,.24);outline-offset:2px}
.social-login__logo{display:block;width:26px;height:26px;flex:0 0 26px;object-fit:contain}
.social-login__btn--google:hover{border-color:#4285f4;background:#f8fbff;color:#174ea6}
.social-login__btn--yahoo{border-color:#6001d2;color:#4f00ae}
.social-login__btn--yahoo:hover{border-color:#6001d2;background:#f8f2ff;color:#6001d2}
.social-login__btn.is-disabled{opacity:.55;background:var(--bg-2);cursor:not-allowed}
.auth-divider{display:flex;align-items:center;gap:.8rem;margin:1.35rem 0;color:var(--muted);font-size:.8rem;font-weight:700}
.auth-divider::before,.auth-divider::after{content:"";height:1px;background:var(--line);flex:1}
.auth-divider span{white-space:nowrap}
.otp-email__head{display:flex;align-items:flex-start;gap:.85rem;margin-bottom:1rem}
.otp-email__icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:var(--r-sm);background:var(--navy-50);color:var(--navy)}
.otp-email__icon svg{width:22px;height:22px}
.otp-email__head h2{font-size:1.18rem;margin:0 0 .25rem}
.otp-email__head p{margin:0;color:var(--ink-2);font-size:.9rem;font-weight:600;line-height:1.75}
.otp-profile-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.otp-page .otp__row{display:grid;grid-template-columns:auto minmax(150px,1fr) auto;gap:.6rem;margin-top:.2rem}
.otp-page .otp__row [hidden]{display:none}
.table-wrap{border-radius:var(--r);overflow-x:auto}
.dtable{width:100%;border-collapse:collapse;font-size:.9rem;min-width:620px}
.dtable th,.dtable td{padding:.75rem .8rem;text-align:start;border-bottom:1px solid var(--line);vertical-align:middle}
.dtable th{background:var(--bg-2);font-size:.8rem;color:var(--ink-2);white-space:nowrap}
.dtable small{display:block;color:var(--muted);font-size:.76rem}
.dtable__actions{display:flex;gap:.35rem;flex-wrap:wrap}
.dtable__actions form{display:inline}
.btn-mini{display:inline-block;border:1px solid var(--line);background:#fff;border-radius:99px;padding:.3rem .7rem;
    font-size:.78rem;font-weight:700;white-space:nowrap}
.btn-mini:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-mini--danger:hover{background:var(--red);border-color:var(--red)}
.pill{display:inline-block;padding:.15rem .6rem;border-radius:99px;font-size:.75rem;font-weight:700;background:var(--bg-2);color:var(--ink-2)}
.pill--published{background:var(--green-50);color:#14663a}
.pill--pending{background:#fff6e5;color:#8a5a06}
.pill--rejected,.pill--blocked{background:#fdecea;color:#8d211a}
.pill--featured{background:#fdf3dd;color:#8a6206}

/* ---- plans ---- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:1.2rem 0}
.plan{position:relative;display:block;padding:1.4rem 1.2rem;border:2px solid var(--line);border-radius:var(--r);
    background:#fff;cursor:pointer;transition:.2s}
.plan:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.plan input{position:absolute;inset-inline-end:1rem;top:1rem}
.plan--popular{border-color:var(--gold)}
.plan__flag{position:absolute;top:-11px;inset-inline-start:1rem;background:var(--gold);color:#fff;font-size:.72rem;
    font-weight:800;padding:.15rem .7rem;border-radius:99px}
.plan h3{font-size:1.05rem;margin-bottom:.3rem}
.plan__price{font-size:1.6rem;font-weight:800;color:var(--navy)}
.plan__meta{color:var(--muted);font-size:.85rem;margin-bottom:.6rem}
.plan__for{font-size:.85rem;color:var(--ink-2);margin-bottom:.5rem}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:.3rem;font-size:.86rem;color:var(--ink-2)}
.plans-form{max-width:1000px;margin-inline:auto}

/* ---- listing detail extras ---- */
.gallery-thumbs{display:flex;gap:.5rem;margin-top:.7rem;overflow-x:auto;padding-bottom:.3rem}
.gallery-thumbs__i{width:74px;height:60px;border-radius:var(--r-sm);overflow:hidden;border:2px solid transparent;flex-shrink:0}
.gallery-thumbs__i.is-active{border-color:var(--navy)}
.gallery-thumbs__i img{width:100%;height:100%;object-fit:cover}
.detail-media__open{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.detail-media__open img{display:block}
.detail-media--clickable::after{content:"+";position:absolute;inset-inline-end:1rem;bottom:1rem;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--navy);font-size:1.5rem;font-weight:800;box-shadow:var(--shadow);pointer-events:none}
.gallery-lightbox{position:fixed;inset:0;z-index:160;height:100vh;height:100dvh;background:rgba(9,12,28,.96);display:grid;place-items:center;padding:max(4.25rem,env(safe-area-inset-top)) max(4.75rem,env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(4.75rem,env(safe-area-inset-left));overscroll-behavior:contain}
.gallery-lightbox[hidden]{display:none}
.gallery-lightbox__stage{width:min(100%,1440px);height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:.65rem;place-items:center;margin:0}
.gallery-lightbox__stage img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;border-radius:var(--r-sm);background:transparent;touch-action:pan-y}
.gallery-lightbox__stage figcaption{color:#fff;text-align:center;font-weight:800;font-size:.9rem;line-height:1.4}
.gallery-lightbox__close,.gallery-lightbox__nav{position:absolute;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(8px)}
.gallery-lightbox__close{top:max(1rem,env(safe-area-inset-top));inset-inline-end:max(1rem,env(safe-area-inset-right));width:44px;height:44px;border-radius:50%;font-size:2rem;line-height:1}
.gallery-lightbox__nav{top:50%;transform:translateY(-50%);width:48px;height:56px;border-radius:var(--r-sm);font-size:1.7rem;font-weight:800}
.gallery-lightbox__nav--prev{inset-inline-start:1rem}
.gallery-lightbox__nav--next{inset-inline-end:1rem}
.gallery-lightbox.is-single .gallery-lightbox__nav{display:none}
.btn-chat{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--navy);color:#fff;
    padding:.8rem 1.2rem;border-radius:99px;font-weight:700}
.btn-chat:hover{background:var(--navy-700)}
.report-link{margin-top:.8rem;color:var(--red);font-weight:700;font-size:.88rem}
.price-card__note{margin-top:.8rem;color:var(--muted);font-size:.8rem;text-align:center}
.price-card__price small{display:block;font-size:.72rem;color:var(--muted);font-weight:600}
.market-compare{margin-top:1rem;padding:.9rem;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.market-compare h2{font-size:.95rem;margin-bottom:.55rem}
.market-compare dl{display:grid;gap:.35rem;margin:0 0 .65rem}
.market-compare dl div{display:flex;justify-content:space-between;gap:.7rem;font-size:.86rem}
.market-compare dt{color:var(--muted)}
.market-compare dd{font-weight:800}
.market-compare strong{display:block;color:var(--green);font-size:.9rem}
.market-compare.is-off strong{color:var(--red)}
.market-compare p{margin:.45rem 0 0;color:var(--muted);font-size:.78rem;line-height:1.5}
.market-form__preview{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:.35rem}
.market-form__preview span,.market-form__preview strong{border:1px solid var(--line);border-radius:var(--r-sm);padding:.65rem .75rem;background:var(--bg-2)}
.market-form__preview b{display:block;color:var(--muted);font-size:.75rem}
.market-form__preview em{font-style:normal;font-weight:900;color:var(--ink)}
.market-form__preview strong{grid-column:1/-1;color:var(--red);font-size:.86rem}
.market-form.is-ok .market-form__preview strong{color:var(--green)}
.seller__badge--muted{background:var(--bg-2);color:var(--muted)}

/* ---- modal ---- */
.modal{position:fixed;inset:0;background:rgba(20,22,50,.55);z-index:120;display:grid;place-items:center;padding:1rem}
.modal[hidden]{display:none}
.modal__panel{position:relative;width:100%;max-width:440px;padding:1.6rem;border-radius:var(--r)}
.modal__close{position:absolute;top:.5rem;inset-inline-end:.8rem;font-size:1.8rem;color:var(--muted);line-height:1}
.modal__panel h3{margin-bottom:1rem}

/* ---- chat ---- */
.chat{display:grid;grid-template-columns:300px 1fr;gap:1.2rem;align-items:start;margin-top:1rem}
.chat__list{display:flex;flex-direction:column;gap:.4rem}
.chat__list h2{font-size:1.1rem;margin-bottom:.4rem}
.chat__thread{display:block;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.chat__thread.is-active{border-color:var(--navy);background:var(--navy-50)}
.chat__thread strong{display:block;font-size:.9rem}
.chat__thread span{font-size:.8rem;color:var(--ink-2)}
.chat__thread small{display:block;color:var(--muted);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat__panel{border-radius:var(--r);display:flex;flex-direction:column;min-height:60vh;padding:1rem}
.chat__head{border-bottom:1px solid var(--line);padding-bottom:.7rem;margin-bottom:.7rem}
.chat__head a{display:block;font-size:.82rem;color:var(--navy)}
.chat__msgs{flex:1;overflow-y:auto;max-height:52vh;display:flex;flex-direction:column;gap:.5rem;padding-inline-end:.3rem}
.chat__msg{max-width:78%;padding:.55rem .8rem;border-radius:var(--r-sm);background:var(--bg-2);align-self:flex-start}
.chat__msg.is-me{background:var(--navy);color:#fff;align-self:flex-end}
.chat__msg p{font-size:.9rem;word-break:break-word}
.chat__msg time{display:block;font-size:.68rem;opacity:.7;margin-top:.2rem}
.chat__privacy{display:flex;align-items:flex-start;gap:.6rem;margin-top:.75rem;padding:.7rem .8rem;border:1px solid #cdd9f5;border-radius:var(--r-sm);background:#f5f8ff;color:var(--ink-2)}
.chat__privacy-icon{width:22px;height:22px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:var(--navy);color:#fff;font-size:.74rem;font-weight:800;font-family:serif}
.chat__privacy p{font-size:.74rem;line-height:1.65;margin:0}.chat__privacy strong{display:block;color:var(--navy);font-size:.76rem}
.chat__compose{display:flex;gap:.5rem;margin-top:.8rem}
.chat__compose input{flex:1;padding:.7rem .9rem;border:1px solid var(--line);border-radius:99px}
.chat__empty{color:var(--muted);text-align:center;padding:2rem 1rem}
.chat__safety{color:var(--muted);font-size:.78rem;margin-top:.5rem;text-align:center}

/* ---- legal pages ---- */
.legal h2{font-size:1.15rem;margin:1.6rem 0 .5rem;color:var(--navy)}
.legal p,.legal li{color:var(--ink-2);font-size:.95rem}
.legal ul{padding-inline-start:1.2rem;display:flex;flex-direction:column;gap:.35rem;margin:.4rem 0}
.legal__note{margin-top:2rem;padding:.9rem 1.1rem;background:var(--bg-2);border-radius:var(--r-sm);font-size:.85rem}

/* ---- admin ---- */
.admin-body{background:var(--bg-2)}
.admin-top{background:var(--navy);color:#fff;padding:.7rem 0}
.admin-top__inner{display:flex;align-items:center;gap:1rem}
.admin-top__brand{font-weight:800}
.admin-top__tag{background:rgba(255,255,255,.18);padding:.1rem .7rem;border-radius:99px;font-size:.78rem;margin-inline-end:auto}
.admin-foot{padding:1.2rem 0;color:var(--muted);font-size:.85rem;text-align:center}
.admin__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.admin__tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.2rem}
.admin__tabs a{padding:.45rem 1rem;border-radius:99px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:.85rem}
.admin__tabs a.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}
.admin__settings{margin-bottom:1.5rem;padding:1.4rem;border-radius:var(--r)}
.admin__settings h2{font-size:1rem;margin:1.2rem 0 .6rem;color:var(--navy)}
.admin__settings textarea{width:100%;padding:.7rem;border:1px solid var(--line);border-radius:var(--r-sm);font-family:inherit}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem;margin-bottom:1.5rem}
.stat{padding:1.1rem;border-radius:var(--r);text-align:center}
.stat strong{display:block;font-size:1.8rem;color:var(--navy);font-weight:800}
.stat span{color:var(--muted);font-size:.85rem}

/* ---- mobile bottom nav + cookie bar ---- */
.botnav{display:none}
.cookiebar{position:fixed;inset-inline:12px;bottom:12px;z-index:110;background:#fff;border:1px solid var(--line);
    border-radius:var(--r);box-shadow:var(--shadow-lg);padding:.8rem 1rem;display:flex;gap:.8rem;align-items:center;
    justify-content:space-between;font-size:.85rem;flex-wrap:wrap;max-width:640px;margin-inline:auto}
.cookiebar[hidden]{display:none}
.cookiebar button{background:var(--navy);color:#fff;border-radius:99px;padding:.4rem 1.1rem;font-weight:700}
.footer__legal a{color:inherit;text-decoration:underline}
.hero__search--slim{max-width:820px}
.hero__search--slim select{border:none;background:none;font-weight:700;padding:.5rem;max-width:170px}
.success__actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}

@media (max-width:900px){
    .browse{grid-template-columns:1fr}
    .browse__side{position:static}
    .filters__toggle{display:inline-block}
    .filters__body{display:none}
    .filters__body.is-open{display:flex}
    .chat{grid-template-columns:1fr}
    .chat__list{flex-direction:row;overflow-x:auto;padding-bottom:.4rem}
    .chat__thread{min-width:220px}
}
@media (max-width:768px){
    .botnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset-inline:0;bottom:0;z-index:90;
        background:#fff;border-top:1px solid var(--line);padding:.35rem .2rem env(safe-area-inset-bottom)}
    .botnav__i{display:flex;flex-direction:column;align-items:center;gap:.15rem;font-size:.68rem;font-weight:700;
        color:var(--ink-2);padding:.3rem 0}
    .botnav__i svg{width:20px;height:20px}
    .botnav__i--cta{color:#fff;background:linear-gradient(135deg,var(--red),var(--red-600));border-radius:var(--r-sm);margin:-.6rem .3rem .2rem}
    .site-main{padding-bottom:66px}
    .fab-wa{bottom:78px}
    .cookiebar{bottom:74px}
    .wizard-bar li{min-width:100px;font-size:.78rem}
    .gallery-lightbox{padding:calc(env(safe-area-inset-top) + 3.75rem) 0 calc(env(safe-area-inset-bottom) + 5.5rem)}
    .gallery-lightbox__stage{width:100vw;height:100%;gap:.45rem}
    .gallery-lightbox__stage img{border-radius:0}
    .gallery-lightbox__close{top:max(.7rem,env(safe-area-inset-top));inset-inline-end:.7rem}
    .gallery-lightbox__nav{top:auto;bottom:calc(env(safe-area-inset-bottom) + .9rem);transform:none;width:46px;height:46px;border-radius:50%}
    .gallery-lightbox__nav--prev{inset-inline-start:1rem}
    .gallery-lightbox__nav--next{inset-inline-end:1rem}
    .market-form__preview{grid-template-columns:1fr}
}
@media (max-width:600px){
    .social-login__row,.otp-profile-fields{grid-template-columns:1fr}
    .otp-page .otp__row{grid-template-columns:1fr}
    .otp-page .otp__row>*{width:100%}
    .ad-preview__grid{grid-template-columns:1fr}
    .ad-preview__wide{grid-column:auto}
}

/* Button modifiers live here, in the LAST stylesheet the admin loads.
   In style.css they lost to app.css's own `.btn-mini{background:#fff}` — equal
   specificity, later sheet wins — which rendered white text on white. */
.btn-mini--ok{background:#16A34A;color:#fff;border-color:#16A34A}
.btn-mini--ok:hover{background:#12823C;border-color:#12823C;color:#fff}
.btn-mini--danger{color:var(--red);border-color:#F3C9C5}
.btn-mini--danger:hover{background:var(--red);border-color:var(--red);color:#fff}

/* =========================================================================
   Footer
   The logo is a dark wordmark, so it needs a light panel to read against —
   dropping it onto the deep navy made it disappear. The brand colour stays,
   as a band above and the bar below.
   ========================================================================= */
.site-footer{background:var(--bg-2);color:var(--ink);border-top:1px solid var(--line)}
/* Four columns, four children, one row.
   This used to be five children in a four-column grid — the wordmark was a
   grid item of its own — and named areas were introduced to stop it dropping
   onto a second row. The wordmark now lives INSIDE the first column in the
   markup, which is what it always meant, so the areas are no longer needed and
   the columns line up on their own. The three link columns are <details>
   elements for the phone accordion; they are still .footer__col, so nothing
   below had to change. */
.footer__grid{display:grid;gap:1.75rem 2rem;padding:2.5rem 0 1.75rem;
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  align-items:start}
.footer__brand{display:block;margin-bottom:1rem}
@media (max-width:1000px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__about{grid-column:1/-1}
}
.footer__logo{height:46px;width:auto;max-width:220px;object-fit:contain;display:block}
.footer__about p{color:var(--ink-2);font-size:.9rem;line-height:1.8;margin:0 0 1rem;max-width:34ch}

.footer__col h4{font-size:.95rem;margin:0 0 .85rem;color:var(--ink);font-weight:800}
.footer__col a{display:block;color:var(--ink-2);text-decoration:none;font-size:.88rem;
  padding:.22rem 0;transition:color .15s}
.footer__col a:hover{color:var(--navy)}
.footer__contact{display:flex;align-items:center;gap:.5rem}
.footer__contact svg{width:16px;height:16px;flex:none}

.footer__social{display:flex;gap:.5rem}
.footer__social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;border:1px solid var(--line);color:var(--ink-2);background:var(--card)}
.footer__social a:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.footer__social svg{width:18px;height:18px}

/* The bar keeps its own .container, so its left and right edges line up with
   the columns above. It used to be display:contents, which dissolved the box:
   measured in Brave at 1440px the bar ran 15->1440 while the grid ran
   127->1327, and the footer read as two different widths stacked. */
.footer__bar{border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-2)}
.footer__bar-inner{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;
  justify-content:center;text-align:center;padding-block:1rem}
.footer__credit{margin:0;order:99;width:100%;color:var(--ink-2)}
.footer__credit a{color:var(--navy);font-weight:800;text-decoration:underline;
  text-underline-offset:2px}
.footer__credit a:hover,.footer__credit a:focus-visible{color:var(--red)}

/* The national-pride band keeps the brand colour, directly above the footer. */
.proud{background:var(--navy);color:#fff}
.proud h3,.proud p{color:#fff}

/* ---- admin: even out the panels ---- */
.admin__tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 1.25rem}
.admin__tabs a{padding:.45rem .9rem;border-radius:99px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);text-decoration:none;font-size:.85rem;font-weight:700}
.admin__tabs a.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.stat-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-bottom:1.5rem}
.stat{padding:1rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);text-align:center}
.stat strong{display:block;font-size:1.5rem;color:var(--navy)}
.stat span{font-size:.8rem;color:var(--muted-strong)}
.dtable__actions{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.dtable__actions form{margin:0}
.dtable td{vertical-align:middle}

/* Profile picture. The whole circle is the file input's label, so the obvious
   thing to click is the thing that works. */
.avatar{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-bottom:1rem}
.avatar__figure{position:relative;width:96px;height:96px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;cursor:pointer;background:var(--navy-50);
  border:2px solid var(--line);color:var(--navy)}
.avatar__img{width:100%;height:100%;object-fit:cover;display:block}
.avatar__initial{font-size:2.2rem;font-weight:800;line-height:1}
.avatar__edit{position:absolute;inset-inline-end:4px;bottom:4px;width:26px;height:26px;border-radius:50%;
  background:var(--navy);color:#fff;display:grid;place-items:center;font-size:.8rem}
.avatar__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.avatar__acts{display:flex;gap:.4rem;align-items:center}
.avatar__acts label{cursor:pointer}
.topbar__avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;display:block;
  border:1px solid rgb(255 255 255 / .5)}

/* Seller photo on a listing: fills the existing avatar circle. */
.seller__pic{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.seller__avatar{overflow:hidden}

/* Photo picker controls. The cover is simply the first photo, so "make cover"
   moves it to the front rather than storing a separate flag. */
.upload__previews{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.75rem}
.upload__prev{position:relative;width:110px;height:110px;border-radius:.6rem;overflow:hidden;
  border:2px solid var(--line);background:var(--bg-2)}
.upload__prev.is-cover{border-color:var(--navy)}
.upload__prev img{width:100%;height:100%;object-fit:cover;display:block}
.upload__cover{position:absolute;inset-inline:0;bottom:0;border:0;cursor:pointer;
  background:rgb(0 0 0 / .62);color:#fff;font-size:.68rem;font-weight:700;padding:.25rem;width:100%}
.upload__prev.is-cover .upload__cover{background:var(--navy);cursor:default}
.upload__del{position:absolute;top:4px;inset-inline-end:4px;width:22px;height:22px;border:0;
  border-radius:50%;background:rgb(0 0 0 / .6);color:#fff;font-size:1rem;line-height:1;cursor:pointer}
.upload__del:hover{background:var(--red)}

/* =========================================================================
   OWNER-MANAGED BANNERS  (admin › Banners)
   The banner replaces whatever the slot used to render, so it inherits the
   slot's own box and only needs to fill it without overflowing.
   ========================================================================= */
.banner{display:block;width:100%;line-height:0}
.banner img{display:block;width:100%;height:auto;max-width:100%;border-radius:var(--r,14px)}
.adslot .banner img{border-radius:12px}
.adslot--header .banner img{max-height:110px;object-fit:contain}
/* The rails and the phone banner already shape their own <img> in ui.css;
   those rules match `.home-ad-rail img` / `.mobile-home-banner img` and keep
   applying, because the banner markup reuses the same containers. */
a.banner{transition:transform .18s ease}
a.banner:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){a.banner:hover{transform:none}}

/* =========================================================================
   SALE COMMISSION
   ========================================================================= */
.commission-page{background:var(--bg)}
.commission-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg-2)}
.commission-hero__inner{min-height:390px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);align-items:center;gap:3rem;padding-block:4rem}
.commission-hero__copy{max-width:760px}
.commission-eyebrow{display:inline-flex;align-items:center;min-height:30px;padding:.25rem .65rem;border:1px solid var(--line-strong);border-radius:6px;color:var(--red);background:var(--card);font-weight:800;font-size:.8rem}
.commission-hero h1{font-size:clamp(2rem,4vw,3.5rem);line-height:1.18;margin:.8rem 0 1rem;letter-spacing:0;max-width:16ch}
.commission-hero p{max-width:62ch;color:var(--ink-2);font-size:1rem;line-height:1.8}
.commission-rate{display:flex;align-items:center;gap:.75rem;margin-top:1.35rem}
.commission-rate strong{font-size:2rem;color:var(--red)}
.commission-rate span{color:var(--muted-strong);font-weight:700}
.commission-hero__visual{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:8px;background:var(--card);display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow-md)}
.commission-hero__visual:before,.commission-hero__visual:after{content:"";position:absolute;inset:auto -12% 18%;height:12%;background:var(--navy);transform:rotate(-9deg);opacity:.88}
.commission-hero__visual:after{inset:auto -12% 6%;background:var(--red);transform:rotate(7deg);opacity:.78}
.commission-hero__visual img{position:relative;width:70%;height:auto;z-index:2;background:#fff;padding:.6rem;border-radius:6px}
.commission-hero__tag{position:absolute;inset-inline-end:7%;top:4%;font-size:8rem;font-weight:900;color:var(--gold-50);line-height:1}

.commission-work{padding-block:2.5rem}
.commission-form{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.5rem;align-items:start}
.commission-form__main{border-top:3px solid var(--navy);padding-top:1rem}
.commission-step{display:flex;align-items:center;gap:.75rem;margin:1.2rem 0 .9rem}
.commission-step>span{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:6px;background:var(--navy);color:#fff;font-weight:900}
.commission-step div{display:flex;flex-direction:column}.commission-step strong{font-size:1.05rem}.commission-step small{color:var(--muted);font-size:.78rem}
.commission-form .form__row{display:flex;flex-direction:column;gap:.35rem;margin:.75rem 0}
.commission-form .form__row>span:first-child{font-weight:800;font-size:.86rem}
.commission-form select,.commission-form input[type="text"],.commission-money-input{width:100%;min-height:48px;border:1px solid var(--line-strong);border-radius:6px;background:var(--card);color:var(--ink)}
.commission-money-input{display:flex;align-items:center;overflow:hidden}.commission-money-input input{min-width:0;flex:1;border:0!important;background:transparent!important;box-shadow:none!important}.commission-money-input b{padding-inline:1rem;white-space:nowrap;color:var(--navy)}
.commission-methods{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.commission-methods label{position:relative;min-height:86px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);padding:.9rem;cursor:pointer;display:flex;gap:.65rem;align-items:flex-start}
.commission-methods label:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 2px var(--navy-50)}
.commission-methods label.is-disabled{opacity:.55;cursor:not-allowed}
.commission-methods input{margin-top:.25rem;accent-color:var(--navy)}
.commission-methods span{display:flex;flex-direction:column;gap:.25rem}.commission-methods b{font-size:.92rem}.commission-methods small{font-size:.74rem;color:var(--muted)}
.commission-bank{margin-top:1rem;padding:1rem;border-inline-start:3px solid var(--gold);background:var(--gold-50)}
.commission-bank[hidden]{display:none}
.commission-bank__details{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.75rem}.commission-bank__details span,.commission-bank__details code{font-size:.84rem}.commission-bank__details small{color:var(--muted-strong)}
.commission-upload{display:flex;flex-direction:column;gap:.35rem;margin-top:.75rem;font-weight:800;font-size:.86rem}.commission-upload input{padding:.6rem;background:var(--card);border:1px dashed var(--line-strong);border-radius:6px}.commission-upload small{font-weight:500;color:var(--muted)}
.commission-summary{position:sticky;top:200px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);padding:1.25rem;box-shadow:var(--shadow-md)}
.commission-summary>span{display:block;font-weight:900;margin-bottom:1rem}.commission-summary>div{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.commission-summary small{color:var(--muted-strong)}.commission-summary strong{font-size:1rem}.commission-summary__total strong{font-size:1.45rem;color:var(--red)}
.commission-summary p{font-size:.72rem;line-height:1.6;color:var(--muted);margin:1rem 0}.commission-summary .btn-primary{width:100%}
.commission-summary button:disabled{opacity:.45;cursor:not-allowed}
.commission-empty{padding:1rem;border:1px dashed var(--line-strong);background:var(--bg-2);color:var(--ink-2);border-radius:6px}
.commission-history{padding-block:1rem 4rem}.commission-history .table-wrap{border:1px solid var(--line);border-radius:8px;overflow:auto}.commission-history .dtable{width:100%;border-collapse:collapse;min-width:720px}.commission-history th,.commission-history td{text-align:start;padding:.85rem;border-bottom:1px solid var(--line);font-size:.84rem}.commission-history th{color:var(--muted-strong);background:var(--bg-2)}

@media(max-width:900px){
  .commission-hero__inner{min-height:0;grid-template-columns:1fr;padding-block:2.25rem}.commission-hero__visual{display:none}
  .commission-form{grid-template-columns:1fr}.commission-summary{position:static;order:-1}.commission-summary>div{padding:.55rem 0}
}
@media(max-width:600px){
  .commission-hero h1{font-size:1.75rem}.commission-hero p{font-size:.9rem}.commission-rate strong{font-size:1.6rem}
  .commission-work{padding-block:1.25rem}.commission-methods{grid-template-columns:1fr}.commission-methods label{min-height:72px}
  .commission-summary{padding:1rem}.commission-bank{padding:.8rem}.commission-history{padding-bottom:2rem}
}

/* ---- admin table ---- */
.banner-thumb{width:120px;height:56px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);background:var(--bg-2);display:block}
.banner-file{min-width:0;max-width:11rem;font-size:.76rem}
.banner-warn{color:var(--red,#c0392b);font-weight:700}