/* style.css - Touvar global styles. Mobile-first. No gradients. */

:root{
  --teal:#0E6B6B;
  --teal-dark:#0A4F4F;
  --sun:#E8A33D;
  --coral:#FF6B4A;
  --coral-dark:#E5502F;
  --postad:#D6336C;
  --postad-dark:#B0244F;
  --ink:#1B2430;
  --ink-soft:#5A6472;
  --bg:#F7F7F5;
  --surface:#FFFFFF;
  --border:#E4E3DD;
  --success:#2E9B5D;
  --danger:#D3453B;
  --radius:10px;
  --radius-sm:6px;
  --shadow:0 1px 3px rgba(27,36,48,0.08), 0 1px 2px rgba(27,36,48,0.06);
  --shadow-md:0 4px 14px rgba(27,36,48,0.10);
  --maxw:1180px;
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:14px;
  --fs-md:16px;
  --fs-lg:19px;
  --fs-xl:24px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:var(--fs-base);
  color:var(--ink);
  background:var(--bg);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Sora','Inter',sans-serif;
  margin:0 0 8px 0;
  font-weight:700;
  color:var(--ink);
  line-height:1.2;
}
h1{font-size:22px;}
h2{font-size:19px;}
h3{font-size:16px;}
p{margin:0 0 10px 0;}
a{color:var(--teal);text-decoration:none;}
a:hover{color:var(--teal-dark);}
img{max-width:100%;display:block;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 14px;}

/* ---------------- Header ---------------- */
.sitehead{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
}
.sitehead-inner{
  display:flex;align-items:center;gap:14px;
  max-width:var(--maxw);margin:0 auto;padding:12px 14px;
}
.sitehead .logo{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.sitehead .logo img{height:30px;width:auto;display:block;}
@media(min-width:640px){.sitehead .logo img{height:36px;}}

.citypill{
  display:flex;align-items:center;gap:6px;
  border:1px solid var(--border);border-radius:20px;
  padding:6px 12px;font-size:var(--fs-sm);background:var(--bg);
  cursor:pointer;white-space:nowrap;color:var(--ink);flex-shrink:0;
}
.citypill:hover{border-color:var(--teal);}
.citypill i{color:var(--coral);}

.headsearch{flex:1;display:none;max-width:420px;}
.headsearch input{
  width:100%;padding:9px 14px;border:1px solid var(--border);
  border-radius:20px;font-size:var(--fs-sm);background:var(--bg);
}
.headsearch input:focus{border-color:var(--teal);background:var(--surface);}
@media(min-width:860px){.headsearch{display:block;}}

.headnav{display:none;align-items:center;gap:10px;margin-left:auto;}
@media(min-width:860px){.headnav{display:flex;}}
.headnav .navlink{font-size:var(--fs-sm);font-weight:600;color:var(--ink-soft);padding:8px 6px;}
.headnav .navlink:hover{color:var(--teal);}

.navicon{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;color:var(--ink-soft);font-size:16px;flex-shrink:0;
}
.navicon:hover{background:var(--bg);color:var(--teal);}
.navbadge{
  position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 3px;
  background:var(--coral);color:#fff;font-size:10px;font-weight:800;line-height:16px;
  text-align:center;border-radius:9px;border:2px solid var(--surface);
}

.navdropdown{position:relative;}
.navdropdown-toggle{
  display:flex;align-items:center;gap:7px;background:transparent;border:1px solid transparent;
  border-radius:20px;padding:5px 10px 5px 5px;cursor:pointer;font-family:inherit;
}
.navdropdown-toggle:hover{background:var(--bg);}
.avatarcircle{
  width:28px;height:28px;border-radius:50%;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;
}
.navusername{font-size:var(--fs-sm);font-weight:600;color:var(--ink);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.navdropdown-toggle i{color:var(--ink-soft);}

.navdropdown-menu{
  display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:190px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:6px;z-index:60;
}
.navdropdown.open .navdropdown-menu{display:block;}
.navdropdown-menu a{
  display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--radius-sm);
  font-size:var(--fs-sm);font-weight:600;color:var(--ink);
}
.navdropdown-menu a i{width:16px;color:var(--ink-soft);}
.navdropdown-menu a:hover{background:var(--bg);color:var(--teal);}
.navdropdown-divider{height:1px;background:var(--border);margin:6px 4px;}

.btn-postad{
  background:var(--postad);color:#fff;border:none;border-radius:20px;
  padding:9px 18px;font-weight:700;font-size:var(--fs-sm);cursor:pointer;white-space:nowrap;
}
.btn-postad:hover{background:var(--postad-dark);}

.hamburger{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);margin-left:auto;cursor:pointer;flex-shrink:0;
}
@media(min-width:860px){.hamburger{display:none;margin-left:0;}}
.hamburger span{display:block;width:18px;height:2px;background:var(--ink);position:relative;}
.hamburger span::before,.hamburger span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--ink);}
.hamburger span::before{top:-6px;}
.hamburger span::after{top:6px;}

.mobilemenu{
  display:none;flex-direction:column;background:var(--surface);
  border-top:1px solid var(--border);padding:10px 14px;
}
.mobilemenu.open{display:flex;}
.mobilemenu a{padding:11px 4px;font-size:var(--fs-md);font-weight:600;color:var(--ink);border-bottom:1px solid var(--border);}
.mobilemenu a:last-child{border-bottom:none;}

/* ---------------- Buttons / Forms ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border-radius:var(--radius-sm);border:1px solid transparent;
  font-size:var(--fs-sm);font-weight:700;cursor:pointer;line-height:1.2;
}
.btn:disabled{opacity:0.6;cursor:not-allowed;}
.btn-primary{background:var(--teal);color:#fff;}
.btn-primary:hover{background:var(--teal-dark);}
.btn-accent{background:var(--coral);color:#fff;}
.btn-accent:hover{background:var(--coral-dark);}
.btn-outline{background:transparent;border-color:var(--border);color:var(--ink);}
.btn-outline:hover{border-color:var(--teal);color:var(--teal);}
.btn-sm{padding:6px 11px;font-size:var(--fs-xs);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-block{width:100%;}

label{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:4px;color:var(--ink);}
.formgroup{margin-bottom:12px;}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=date],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:var(--fs-sm);background:var(--surface);color:var(--ink);font-family:inherit;
}
textarea{resize:vertical;min-height:80px;}
input:focus,select:focus,textarea:focus{border-color:var(--teal);}
.helptext{font-size:var(--fs-xs);color:var(--ink-soft);margin-top:3px;}
.errortext{font-size:var(--fs-xs);color:var(--danger);margin-top:3px;}

/* ---------------- Cards ---------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}
.card-pad{padding:14px;}

.listinggrid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
}
@media(min-width:640px){.listinggrid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:960px){.listinggrid{grid-template-columns:repeat(4,1fr);}}

.listingcard{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;position:relative;transition:box-shadow .15s ease;
}
.listingcard:hover{box-shadow:var(--shadow-md);}
.listingcard .thumb{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bg);}
.listingcard .body{padding:9px 10px;}
.listingcard .price{font-weight:800;color:var(--teal-dark);font-size:var(--fs-md);}
.listingcard .title{font-size:var(--fs-sm);color:var(--ink);margin:2px 0 4px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px;}
.listingcard .meta{font-size:var(--fs-xs);color:var(--ink-soft);display:flex;align-items:center;gap:4px;}
.listingcard .featbadge{
  position:absolute;top:8px;left:8px;background:var(--sun);color:#3A2A05;
  font-size:10px;font-weight:800;padding:3px 8px;border-radius:20px;letter-spacing:.3px;
}
.listingcard .favbtn{
  position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.92);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;
}

.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media(min-width:640px){.catgrid{grid-template-columns:repeat(4,1fr);}}
.cattile{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 8px;text-align:center;cursor:pointer;
}
.cattile:hover{border-color:var(--teal);}
.cattile .icon{width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 6px auto;font-size:16px;}
.cattile .name{font-size:var(--fs-sm);font-weight:700;color:var(--ink);}

/* ---------------- Badges ---------------- */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:var(--fs-xs);font-weight:700;}
.badge-pending{background:#FFF1D6;color:#8A5B00;}
.badge-approved{background:#DCF3E4;color:var(--success);}
.badge-rejected{background:#FBE0DD;color:var(--danger);}
.badge-sold{background:#E5E7EB;color:#4B5563;}
.badge-expired{background:#EDEDED;color:#6B6B6B;}

/* ---------------- Toast ---------------- */
#toastwrap{position:fixed;top:0;left:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;z-index:9999;pointer-events:none;}
.toastbox{
  min-width:220px;max-width:88%;background:var(--ink);color:#fff;padding:13px 20px;border-radius:var(--radius);
  font-size:var(--fs-sm);font-weight:600;box-shadow:var(--shadow-md);pointer-events:auto;text-align:center;
}
.toastbox.success{background:var(--success);}
.toastbox.error{background:var(--danger);}

/* ---------------- Modal ---------------- */
.modaloverlay{position:fixed;inset:0;background:rgba(27,36,48,.55);display:none;align-items:center;justify-content:center;z-index:1000;padding:14px;}
.modaloverlay.open{display:flex;}
.modalbox{background:var(--surface);border-radius:var(--radius);max-width:460px;width:100%;padding:18px;max-height:88vh;overflow-y:auto;}
.modalbox h3{margin-bottom:10px;}
.modalclose{float:right;cursor:pointer;font-size:18px;color:var(--ink-soft);}

.iconpicker{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
.iconchoice{
  display:flex;align-items:center;justify-content:center;height:38px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface);color:var(--ink-soft);cursor:pointer;font-size:15px;
}
.iconchoice:hover{border-color:var(--teal);color:var(--teal);}
.iconchoice.selected{background:var(--teal);border-color:var(--teal);color:#fff;}

/* ---------------- Tables ---------------- */
table.datatable{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
table.datatable th,table.datatable td{padding:8px 9px;border-bottom:1px solid var(--border);text-align:left;}
table.datatable th{background:var(--bg);font-weight:700;font-size:var(--fs-xs);text-transform:uppercase;color:var(--ink-soft);}
table.datatable .colfilter{width:100%;padding:5px 6px;font-size:var(--fs-xs);border:1px solid var(--border);border-radius:4px;margin-top:4px;}

/* ---------------- Footer ---------------- */
.sitefoot{background:var(--ink);color:#C9CED6;padding:24px 14px;margin-top:24px;font-size:var(--fs-sm);}
.sitefoot a{color:#C9CED6;}
.sitefoot a:hover{color:#fff;}

/* ---------------- Admin layout ---------------- */
.adminwrap{display:flex;min-height:calc(100vh - 54px);}
.adminsidebar{width:210px;background:var(--surface);border-right:1px solid var(--border);flex-shrink:0;display:none;}
@media(min-width:860px){.adminsidebar{display:block;}}
.adminsidebar a{display:block;padding:11px 16px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-soft);border-left:3px solid transparent;}
.adminsidebar a:hover,.adminsidebar a.active{color:var(--teal-dark);background:var(--bg);border-left-color:var(--coral);}
.adminmain{flex:1;padding:16px;min-width:0;}
.statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px;}
@media(min-width:760px){.statgrid{grid-template-columns:repeat(4,1fr);}}
.statcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;}
.statcard .num{font-size:22px;font-weight:800;color:var(--teal-dark);}
.statcard .lbl{font-size:var(--fs-xs);color:var(--ink-soft);font-weight:600;text-transform:uppercase;}

/* ---------------- Chat ---------------- */
.chatwrap{display:flex;height:calc(100vh - 110px);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);}
.chatlist{width:100%;border-right:1px solid var(--border);overflow-y:auto;}
@media(min-width:760px){.chatlist{width:280px;}}
.chatthreadrow{padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;}
.chatthreadrow:hover,.chatthreadrow.active{background:var(--bg);}
.chatpane{flex:1;display:none;flex-direction:column;}
@media(min-width:760px){.chatpane{display:flex;}}
.chatmessages{flex:1;overflow-y:auto;padding:12px;background:var(--bg);}
.bubble{max-width:74%;padding:8px 12px;border-radius:14px;margin-bottom:8px;font-size:var(--fs-sm);}
.bubble.out{background:var(--teal);color:#fff;margin-left:auto;border-bottom-right-radius:3px;}
.bubble.in{background:#fff;border:1px solid var(--border);border-bottom-left-radius:3px;}
.chatinputrow{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);}
.chatinputrow input{flex:1;}

/* ---------------- Ad slots ---------------- */
.adslotbox{width:100%;}
.adslotimg{width:100%;max-height:160px;object-fit:cover;border-radius:var(--radius);display:block;}
@media(min-width:640px){.adslotimg{max-height:200px;}}

/* ---------------- Utility ---------------- */
.flex{display:flex;}
.flexbetween{display:flex;align-items:center;justify-content:space-between;}
.gap8{gap:8px;}
.mt8{margin-top:8px;}
.mt12{margin-top:12px;}
.mt16{margin-top:16px;}
.mb0{margin-bottom:0;}
.textmuted{color:var(--ink-soft);}
.textcenter{text-align:center;}
.hidden{display:none !important;}
.sectiontitle{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.sectiontitle a{font-size:var(--fs-sm);font-weight:700;}