/* /public/css/front.css
   =========================================================
   GLOBAL, LAYOUT, COMPONENTS (Desktop-first)
   Mobile behavior MUST be handled in /public/css/mobile-searchbar.css
   (This file should NOT redefine mobile sheets/nav specifics.)
   ========================================================= */

/* NOTE:
   Category sidebar/tree styles moved to:
   /public/css/category-sidebar.css
*/


/* =========================
   0) FONTS (STATIC TTF)
   ========================= */

@font-face{
  font-family: "Vazirmatn";
  src: url("/public/fonts/static/Vazirmatn-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Vazirmatn";
  src: url("/public/fonts/static/Vazirmatn-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Vazirmatn";
  src: url("/public/fonts/static/Vazirmatn-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Vazirmatn";
  src: url("/public/fonts/static/Vazirmatn-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Vazirmatn";
  src: url("/public/fonts/static/Vazirmatn-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Vazirmatn";
  src: url("/public/fonts/static/Vazirmatn-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Vazirmatn";
  src: url("/public/fonts/static/Vazirmatn-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Vazirmatn";
  src: url("/public/fonts/static/Vazirmatn-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Vazirmatn";
  src: url("/public/fonts/static/Vazirmatn-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* =========================
   1) TOKENS, BASE, RESET
   ========================= */

:root{
  /* layout */
  --container-max: 1240px;
  --container-pad: 16px;

  /* colors */
  --bg: #f8fafc;
  --card-bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;

  --bd: #e5e7eb;
  --bd-soft: #eeeeee;

  /* radii */
  --radius: 12px;
  --radius-sm: 8px;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.10);

  /* unified z-index scale (single source of truth) */
  --z-header: 200;
  --z-modal: 2250;
  --z-mnav: 1200;           /* mobile only, used by mobile-searchbar.css */
  --z-sheet-backdrop: 1999; /* mobile sheets */
  --z-sheet: 2000;          /* mobile sheets */

  /* split-scroll vars (JS can update --navbar-height) */
  --navbar-height: 64px;
  --panel-width: 280px;
  --gap: 12px;
}

html{
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after{ box-sizing: inherit; }

html, body{
  font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  font-synthesis-weight: none;
  font-synthesis-style: none;
  margin: 0;
  padding: 0;
}

body.site-body{ background: var(--bg); }

html, body{ overflow-x: hidden; }

img, video{
  max-width: 100%;
  height: auto;
  display: block;
}

a{ color: inherit; }

input, textarea, select, button{
  font: inherit;
  color: inherit;
}

input[type="search"]{
  -webkit-appearance: none;
  appearance: none;
}

/* RTL helper (safe) */
html[dir="rtl"] .container{
  direction: rtl;
  text-align: right;
}

/* =========================
   2) UTILITIES
   ========================= */

/* mobile-searchbar.css is responsible for switching these */
.only-mobile{ display: none; }
.only-desktop{ display: block; }

.w-100{ width: 100%; }
.input-ltr{ direction: ltr; text-align: left; }
.no-scroll{ overflow: hidden !important; } /* used by scripts (sheets/modals) */

/* ✅ هماهنگ با ScrollLock در front.js که mc-lock می‌گذارد */
html.mc-lock,
body.mc-lock{
  overflow: hidden !important;
  touch-action: none;
}

.sr-only{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* =========================
   3) CONTAINER, PAGE
   ========================= */

.container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.page{
  padding-block: 12px;
  min-height: 40vh;
}

/* ✅ وقتی split-scroll فعال است، padding صفحه نباید به ارتفاع اضافه کند */
body.has-split-scroll #content.page{
  padding-block: 0;
  min-height: 0;
}


/* =========================
   4) LAYOUT GRIDS (DESKTOP FIRST)
   ========================= */

.page-grid{
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.category-main{ min-width: 0; }

/* cat-sidebar moved to category-sidebar.css */

/* Ads grid (desktop default).
   Mobile override MUST be in mobile-searchbar.css */
.ad-grid{
  --ad-col: 240px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ad-col), 1fr));
  gap: 12px;
  justify-items: stretch;
}


/* =========================
   5) BASIC UI, CARD, TEXT, BADGES
   ========================= */

.card{
  background: var(--card-bg);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.card.card-section{ margin-top: 16px; }
.card.card-slim{ padding: 10px; }

.page-title{ font-size: 1.25rem; margin: 0 0 .25rem; }
.section-title{ font-size: 1.05rem; margin: 0 0 8px; }

.muted{ color: var(--muted); }
.hint{ color: var(--muted); font-size: .875rem; margin-top: .25rem; }

.badge{
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: .75rem;
  vertical-align: middle;
}
.badge.danger{
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}


/* =========================
   6) BUTTONS
   ========================= */

.btn{
  --btn-bg: #111827;
  --btn-fg: #ffffff;

  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--radius-sm);
  padding: 9px 14px;

  cursor: pointer;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  user-select: none;
}

.btn:hover{ filter: brightness(0.95); }
.btn:disabled{ opacity: .55; cursor: not-allowed; }

.btn.ghost{ background: transparent; color: var(--text); border-color: var(--bd); }
.btn.secondary{ background: #f3f4f6; color: var(--text); border-color: #e5e7eb; }
.btn.danger{ background: #ef4444; border-color: rgba(0,0,0,.08); }
.btn-primary{ background: #2563eb; color: #fff; border-color: rgba(0,0,0,.08); }
.btn.btn-dark{ background: #111827; color: #fff; }

.btn-sm{ padding: 6px 10px; font-size: .875rem; }

.icon-btn{
  border: 1px solid var(--bd);
  background: #fff;
  color: var(--text);
  border-radius: var(--radius-sm);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}


/* =========================
   7) ALERTS
   ========================= */

.alert{
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  border: 1px solid transparent;
}
.alert.ok{
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}
.alert.info{
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}
.alert.danger{
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}


/* =========================
   8) HEADER (DESKTOP FIRST)
   ========================= */

.site-header{
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: #fff;
  border-bottom: 1px solid var(--bd);
  padding: 8px 0;
}

.topbar.container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.header-left,
.header-center,
.header-right{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.header-center{
  flex: 1 1 auto;
  justify-content: center;
}

.brand{
  font-weight: 800;
  font-size: 1.25rem;
  margin-inline-end: 12px;
  text-decoration: none;
  color: var(--text);
}

.back-btn{
  display: none; /* mobile-searchbar.css decides if/when it shows */
  border: 1px solid var(--bd);
  background: #fff;
  border-radius: var(--radius-sm);
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #374151;
}

.city-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #f9fafb;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.9rem;
  text-decoration: none;
  border: 1px solid #f3f4f6;
}

.searchbar{
  display: flex;
  gap: 8px;
  width: min(720px, 100%);
}
.searchbar input[type="search"]{
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  background: #fff;
}

.nav-link{
  margin-inline: 4px;
  font-size: 0.9rem;
  color: #374151;
  text-decoration: none;
}


/* =========================
   9) MODAL (UNIFIED)
   ========================= */

.modal[hidden]{ display: none !important; }

.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: var(--z-modal);
}
.modal.is-open{ display: block; }

.modal .modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}


.modal .modal-header{
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
}

.modal .modal-title{
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.modal .modal-dialog{
  position: relative;
  margin: 6vh auto;
  max-width: 420px;
  background: #fff;
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: 0 15px 50px rgba(0,0,0,.25);
  padding-bottom: 8px;
  border: 1px solid rgba(0,0,0,.06);
}

/* ✅ موبایل: دیالوگ تمام‌عرض‌تر + اسکرول داخلی پایدار */
@media (max-width: 900px){
  .modal .modal-dialog{
    width: calc(100% - 16px);
    margin: 8vh auto;
    max-height: 84vh;
    overflow: hidden;
  }
  .modal .modal-body{
    max-height: calc(84vh - 64px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.modal .modal-body{ padding: 16px; }
.btn-close{
  position: absolute;
  top: 8px;
  left: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  font-size: 20px;
  line-height: 28px;
  background: transparent;
  color: #667;
  cursor: pointer;
}
.btn-close:hover{
  background: #f3f4f6;
  color: #111;
}

/* Divar-like auth helpers */
.dv-title{
  font-weight: 900;
  font-size: 18px;
  margin: 0 0 6px;
  text-align: center;
}
.dv-subtitle{
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  margin: 0 0 12px;
}
.dv-badge{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 12px;
  margin-inline-start: 6px;
}
.dv-input-group{
  display: flex;
  align-items: stretch;
  width: 100%;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  overflow: hidden;
}
.dv-prefix{
  min-width: 64px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
  border-inline-end: 1px solid var(--bd);
}
.dv-input{
  flex: 1;
  padding: 10px 12px;
  border: 0;
  outline: none;
  font-size: 14px;
  background: #fff;
}
.dv-input:focus{
  outline: 2px solid #dbeafe;
  outline-offset: -2px;
}
.dv-actions{ text-align: center; margin-top: 10px; }
.dv-actions .btn{ min-width: 140px; }
.dv-policy{
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  margin-top: 8px;
}
.dv-error .dv-input-group{ border-color: #fecaca; }


/* =========================
   10) FORMS, FIELDS
   ========================= */

.field label{
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.field input[type="text"],
.field input[type="search"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea{
  width: 100%;
  border: 1px solid var(--bd);
  border-radius: var(--radius-sm);
  padding: 10px;
  background: #fff;
}

.form-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* global filters (base) */
.filters{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}


/* =========================
   11) SELL WIZARD HELPERS
   ========================= */

.grid{ display: grid; gap: 12px; }
.grid.grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-full{ grid-column: 1 / -1; }

.stack-rows{ display: grid; gap: 12px; }
.inline-form{ margin-top: 8px; }

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.media-item .media{
  max-width: 100%;
  border-radius: var(--radius-sm);
}

.media-item.uploading{
  position: relative;
  opacity: .7;
}
.media-item.uploading::after{
  content: "در حال آپلود…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.65);
  color: #374151;
  font-weight: 900;
  border-radius: var(--radius-sm);
}
/* Breadcrumbs (DESKTOP ONLY) */
.crumbs-wrap{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  max-width: 100%;
}

.breadcrumbs{
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.breadcrumbs .sep{ color: #9ca3af; }
.breadcrumbs .active{ font-weight: 900; }

/* MOBILE: hide completely (covers both implementations) */
@media (max-width: 900px){
  .crumbs-wrap,
  .split-scroll .crumbs{
    display: none !important;
  }
}


.list-cat{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.cat-item{
  width: 100%;
  text-align: right;
  justify-content: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.cat-item:hover{ background: #f9fafb; }
.cat-name{ font-weight: 700; }

.checkline{ display: inline-flex; align-items: center; gap: 8px; }
.unit{ margin-right: 6px; }

.chips{ display: flex; flex-wrap: wrap; gap: 10px; }
.chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f9fafb;
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: 6px 10px;
}

.multibox{ min-height: 120px; }

.row-between{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row{ display: flex; align-items: center; gap: 8px; }

#sell-map{
  height: 340px;
  border: 1px solid var(--bd);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #f5f5f5;
}


/* =========================
   12) DROPZONE
   ========================= */

.dropzone{
  border: 1.5px dashed #cbd5e1;
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  background: #f9fafb;
  cursor: pointer;
}
.dropzone.dragover{
  background: #f3f4f6;
  border-color: #94a3b8;
}
.dz-ghost{ display: grid; gap: 6px; justify-items: center; }
.dz-icon{ font-size: 28px; }
.dz-title{ font-weight: 900; }
.dz-hint{ color: var(--text); }
.dz-subhint{ font-size: .875rem; color: var(--muted); }


/* =========================
   13) ACCOUNT, MY ADS
   ========================= */

.account-sidebar{
  width: 260px;
  position: sticky;
  top: 12px;
  align-self: start;
}

.acc-card{
  background: #fff;
  border: 1px solid var(--bd-soft);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 8px;
}

.acc-user{ display: flex; align-items: center; gap: 10px; }
.acc-avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  background: #f3f4f6;
  border: 1px solid var(--bd-soft);
}
.acc-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acc-user-info{ display: flex; flex-direction: column; gap: 2px; }
.acc-user-name{ font-weight: 900; color: #111; }
.acc-user-phone{ font-size: 12px; color: #374151; }

.acc-nav{
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--bd-soft);
  border-radius: var(--radius);
  padding: 8px;
}
.acc-link{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
}
.acc-link:hover{
  background: #f9fafb;
  border-color: var(--bd);
}
.acc-link.is-active{
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
  font-weight: 900;
}
.acc-link[aria-disabled="true"]{
  opacity: .6;
  cursor: not-allowed;
}
.acc-logout{ padding: 8px; margin-top: 6px; }

/* Tabs */
.tabs{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.tab{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  color: #374151;
  background: #ffffff;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .12s ease;
}
.tab:hover{
  background: #f3f4f6;
  border-color: #cbd5e1;
}
.tab .count{
  font-weight: 900;
  color: #1d4ed8;
  background: #e0ebff;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1;
  border-radius: 10px;
}
.tab.is-active{
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}
.tab.is-active .count{
  color: #fff;
  background: rgba(255, 255, 255, 0.25);
}


/* =========================
   14) SPLIT SCROLL (SCOPED + STABLE)
   ========================= */

body.has-split-scroll{
  overflow: hidden; /* mobile-searchbar.css must override this on mobile */
}

.split-scroll{
  height: calc(100vh - var(--navbar-height));
  display: grid;
  grid-template-columns: var(--panel-width) 1fr;
  gap: var(--gap);
  padding: var(--gap);
}

.split-scroll__panel{
  background: #fff;
  border: 1px solid var(--bd-soft);
  border-radius: var(--radius);
  overflow: auto;
  padding: 8px;
  min-width: 0;
  min-height: 0;
}

.split-scroll__main{
  overflow: auto;
  display: grid;
  grid-auto-rows: max-content;
  gap: var(--gap);
  min-width: 0;
  min-height: 0;
}


.split-scroll__panel{
  overflow-y: auto;
  overflow-x: hidden; /* ✅ جلوگیری از اسکرول افقی */
}

.split-scroll__main{
  overflow-y: auto;
  overflow-x: hidden; /* ✅ جلوگیری از اسکرول افقی */
}

.split-scroll .crumbs{
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  padding: 0 4px;
}
.split-scroll .crumbs a{ color: var(--text); text-decoration: none; }
.split-scroll .crumbs .sep{ color: #9ca3af; }

.split-scroll .cat-header{ display: grid; gap: 6px; }
.split-scroll .cat-h1{ margin: 0; font-size: 18px; line-height: 1.6; }
.split-scroll .scope-label{ margin: 0; font-size: 12px; }

/* IMPORTANT:
   Split-scroll filters are a GRID and MUST stay scoped.
   Do NOT define .filters as grid globally. */
.split-scroll .filters{
  display: grid;
  grid-template-columns: 1fr 160px 160px 160px 160px auto;
  gap: 8px;
  align-items: center;
}
.split-scroll .filters input[type="search"],
.split-scroll .filters input[type="number"],
.split-scroll .filters select{
  border: 1px solid var(--bd);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: #fff;
}

.split-scroll .mtabs{ display: flex; gap: 8px; align-items: center; }
.split-scroll .mtab{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f3f4f6;
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
  font-size: 13px;
}
.split-scroll .mtab.is-active{
  background: #111827;
  color: #fff;
  border-color: #111827;
}

/* IMPORTANT: split-scroll ad-grid override is scoped */
.split-scroll .ad-grid{
  --ad-col: 220px;
  grid-template-columns: repeat(auto-fill, minmax(var(--ad-col), 1fr));
  gap: 12px;
}

@media (max-width: 1024px){
  :root{ --panel-width: 260px; }
}


/* =========================
   16) RESPONSIVE (DESKTOP -> TABLET)
   (Mobile specifics must be in mobile-searchbar.css)
   ========================= */

@media (max-width: 980px){
  .page-grid{ grid-template-columns: 1fr; }
  /* cat-sidebar responsive moved to category-sidebar.css */
  .searchbar{ width: 100%; }
}

@media (max-width: 860px){
  .grid.grid-2{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}