/* =========================================================================
   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}

/* ---- 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:520px;margin-inline:auto;padding:1.6rem;border-radius:var(--r)}

/* ---- 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}
.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}
.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}
.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__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}
}