/* style.css
   سامانه مدیریت ملک — تم بصری
   پالت رنگی برگرفته از حس و حال دفاتر املاک ایرانی: کاغذ گرم، خاک رس و
   نشان‌های مهر-مانند برای وضعیت ملک (موجود / رزرو شده / فروخته شده)
*/

:root {
  --paper: #F6F1E6;
  --paper-deep: #ECE2CC;
  --surface: #FFFFFF;
  --ink: #2A2420;
  --ink-soft: #6B6155;
  --line: #E1D6C0;

  --clay: #BD6B43;
  --clay-deep: #95512F;

  --sage: #6F8F6B;
  --sage-deep: #4F6E4C;

  --amber: #C99A3D;
  --amber-deep: #9C752A;

  --rose: #A2454A;
  --rose-deep: #7E3236;

  --radius-sm: 6px;
  --radius-md: 14px;
  --shadow-card: 0 1px 2px rgba(42, 36, 32, 0.06), 0 10px 26px -14px rgba(42, 36, 32, 0.25);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  direction: rtl;
  line-height: 1.75;
  font-size: 15px;
}

h1, h2, h3 { font-weight: 800; }

a { color: inherit; }

/* ---------- نوار بالایی ---------- */

.topbar {
  background: var(--ink);
  border-bottom: 4px solid var(--clay);
}
.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-mark { width: 34px; height: 34px; flex-shrink: 0; }
.brand-text {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #C9BEAC;
}
.brand-text strong {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}
.main-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.nav-link {
  color: #C9BEAC;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-link.is-active { background: rgba(255,255,255,.12); color: #fff; }
.nav-link--cta { background: var(--clay); color: #fff; }
.nav-link--cta:hover { background: var(--clay-deep); color: #fff; }
.nav-user {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  color: #C9BEAC;
  font-size: 13px;
}
.nav-link--logout {
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  font-family: inherit;
}
.nav-link--logout:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ---------- چیدمان کلی صفحه ---------- */

.page { max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.eyebrow {
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--clay-deep);
  font-weight: 700;
  margin: 0 0 6px;
}
.page-head h1, .detail-head h1 { margin: 0; font-size: 26px; }
.page-sub { margin: 6px 0 0; color: var(--ink-soft); font-size: 14px; }

.site-footer {
  text-align: center;
  padding: 24px;
  color: var(--ink-soft);
  font-size: 13px;
  border-top: 1px solid var(--line);
}

/* ---------- دکمه‌ها ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: transform .1s, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--clay); color: #fff; }
.btn-primary:hover { background: var(--clay-deep); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--paper-deep); }
.btn-danger { background: var(--rose); color: #fff; }
.btn-danger:hover { background: var(--rose-deep); }
.btn-link { color: var(--clay-deep); text-decoration: underline; font-size: 14px; align-self: center; }

/* ---------- صفحهٔ ورود کارمندان ---------- */

.login-body { background: var(--ink); }
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: var(--radius-lg, 16px);
  padding: 36px 30px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.login-brand .brand-text { color: var(--ink-soft); }
.login-brand .brand-text strong { color: var(--ink); }
.login-card .page-sub { margin: 0 0 20px; }
.login-error {
  background: rgba(162, 69, 74, .1);
  color: var(--rose-deep);
  border: 1px solid rgba(162, 69, 74, .3);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin: 0 0 16px;
}
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-submit { width: 100%; justify-content: center; margin-top: 6px; }
.login-back {
  display: block;
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
}
.login-back:hover { color: var(--clay-deep); text-decoration: underline; }

.inline-form { margin: 0; display: inline; }

/* ---------- نوار جست‌وجو و فیلتر ---------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 28px;
  align-items: center;
}
.filter-bar input[type="text"] { flex: 1 1 220px; }
.filter-bar select { flex: 0 1 150px; }
.filter-bar input, .filter-bar select {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}
.filter-bar input:focus, .filter-bar select:focus { outline: 2px solid var(--clay); outline-offset: 1px; }

.filter-bar-ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  flex-basis: 100%;
  width: 100%;
  padding-top: 16px;
  margin-top: 6px;
  border-top: 1px dashed var(--line);
}
.range-field {
  flex: 1 1 240px;
  min-width: 220px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 16px 14px;
}
.range-field-head { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 10px; }
.range-values { display: flex; align-items: center; gap: 8px; direction: ltr; }
.range-values input[type="number"] {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  text-align: center;
  -moz-appearance: textfield;
}
.range-values input[type="number"]::-webkit-outer-spin-button,
.range-values input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.range-values input:focus { outline: 2px solid var(--clay); outline-offset: 1px; }
.range-values span { font-size: 12px; color: var(--ink-soft); flex: 0 0 auto; }

/* ---------- شبکهٔ کارت ملک‌ها ---------- */

.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 20px;
}
.property-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.card-media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--paper-deep);
  overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ink-soft);
  font-size: 13px;
  background: repeating-linear-gradient(45deg, var(--paper-deep), var(--paper-deep) 10px, var(--paper) 10px, var(--paper) 20px);
}
.media-placeholder--large { aspect-ratio: 16 / 9; border-radius: var(--radius-md); border: 1px dashed var(--line); margin-bottom: 28px; }

.card-body { padding: 14px 16px 4px; flex: 1; }
.card-code { margin: 0 0 4px; font-size: 12px; color: var(--ink-soft); }
.card-title { margin: 0 0 6px; font-size: 17px; }
.card-title a { text-decoration: none; }
.card-price { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: var(--clay-deep); }
.card-price span { font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.card-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 0;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ink-soft);
}

.card-actions { display: flex; border-top: 1px solid var(--line); }
.icon-btn {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  border-right: 1px solid var(--line);
}
.icon-btn:first-child { border-right: none; }
.icon-btn:hover { background: var(--paper-deep); color: var(--ink); }
.icon-btn--danger:hover { background: #f3e3e3; color: var(--rose-deep); }
.card-actions .inline-form { flex: 1; }
.card-actions .inline-form button { width: 100%; }

/* ---------- نشان وضعیت (مهر) ---------- */

.stamp {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2px dashed currentColor;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  transform: rotate(-12deg);
  background: rgba(255,255,255,0.9);
  line-height: 1.3;
  padding: 4px;
}
.stamp--available { color: var(--sage-deep); }
.stamp--reserved { color: var(--amber-deep); }
.stamp--sold { color: var(--rose-deep); }
.stamp--inline { position: static; transform: rotate(-6deg); width: 66px; height: 66px; font-size: 11px; flex-shrink: 0; }

/* ---------- حالت خالی ---------- */

.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  color: var(--ink-soft);
}
.empty-state h1 { color: var(--ink); margin: 0 0 10px; font-size: 22px; }
.empty-state p { margin: 0 0 18px; }

/* ---------- فرم‌ها ---------- */

.property-form { display: flex; flex-direction: column; gap: 24px; max-width: 900px; }
.form-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
  background: var(--surface);
  margin: 0;
}
.form-section legend {
  padding: 0 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--clay-deep);
}
.form-section--private { border-color: var(--rose); background: rgba(162, 69, 74, .04); }
.form-section--private legend { color: var(--rose-deep); display: flex; align-items: center; gap: 8px; }
.private-badge {
  font-size: 10px;
  font-weight: 700;
  background: var(--rose);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.field--full { grid-column: 1 / -1; margin-top: 16px; }
.field em { color: var(--rose-deep); font-style: normal; }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--clay);
  outline-offset: 1px;
  border-color: var(--clay);
}
.field-hint { font-size: 12px; color: var(--ink-soft); margin: 8px 0 0; }
.file-count { font-size: 12px; color: var(--clay-deep); margin-top: 4px; display: block; }

.amenities-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.checkbox-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  background: var(--paper);
  transition: background .15s, color .15s, border-color .15s;
}
.checkbox-pill.is-checked { background: var(--clay); border-color: var(--clay); color: #fff; }
.checkbox-pill input { accent-color: var(--clay); }

.form-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- رسانهٔ موجود (صفحه ویرایش) ---------- */

.existing-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: 10px 0 16px;
}
.existing-media-item {
  position: relative;
  display: block;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper);
}
.existing-media-item.is-thumb { border-color: var(--clay); box-shadow: 0 0 0 2px rgba(189, 107, 67, 0.2); }
.existing-media-item img, .existing-media-item video { width: 100%; height: 100px; object-fit: cover; display: block; }
.remove-toggle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(42, 36, 32, 0.78);
  color: #fff;
  font-size: 12px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  cursor: pointer;
}
.thumb-toggle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(189, 107, 67, 0.85);
  color: #fff;
  font-size: 11px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  cursor: pointer;
}
.thumb-toggle input, .remove-toggle input { accent-color: #fff; }

/* ---------- انتخاب تصویر شاخص برای تصاویر تازه‌انتخاب‌شده (پیش از آپلود) ---------- */

.thumbnail-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.thumbnail-option {
  position: relative;
  display: block;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper);
}
.thumbnail-option.is-thumb { border-color: var(--clay); box-shadow: 0 0 0 2px rgba(189, 107, 67, 0.2); }
.thumbnail-option img { width: 100%; height: 100px; object-fit: cover; display: block; }
.thumbnail-option label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(189, 107, 67, 0.85);
  color: #fff;
  font-size: 11px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  cursor: pointer;
}
.thumbnail-option input { accent-color: #fff; }

/* ---------- صفحه جزئیات ملک ---------- */

.detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.detail-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.gallery { margin-bottom: 28px; }
.gallery-main {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  background: var(--paper-deep);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding-bottom: 4px; }
.gallery-thumb {
  flex: 0 0 92px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: none;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover, .gallery-thumb.is-active { border-color: var(--clay); }

.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
.detail-main { display: flex; flex-direction: column; gap: 20px; }

.info-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.info-block h2 { margin: 0 0 12px; font-size: 16px; color: var(--clay-deep); display: flex; align-items: center; gap: 8px; }
.info-block--private { border-color: var(--rose); background: rgba(162, 69, 74, .04); }
.info-block--private h2 { color: var(--rose-deep); }

.spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 0; }
.spec-list > div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; font-size: 14px; }
.spec-list dt { color: var(--ink-soft); margin: 0; font-weight: 500; }
.spec-list dd { margin: 0; font-weight: 700; }

.amenities-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.amenities-list li { background: var(--paper-deep); border-radius: 999px; padding: 6px 14px; font-size: 13px; }

.description-text { white-space: pre-line; margin: 0; }

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.video-grid video { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #000; display: block; }

.detail-side { display: flex; flex-direction: column; gap: 20px; }
.agent-name { font-weight: 700; font-size: 16px; margin: 0 0 4px; }
.agent-phone { color: var(--ink-soft); margin: 0; direction: ltr; unicode-bidi: isolate; text-align: right; }

/* ---------- واکنش‌گرایی ---------- */

@media (max-width: 760px) {
  .detail-grid { grid-template-columns: 1fr; }
  .topbar-inner { flex-direction: column; gap: 12px; }
  .main-nav { justify-content: center; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .spec-list { grid-template-columns: 1fr; }
}

/* ---------- breadcrumb nav ---------- */

.breadcrumb-nav {
  background: var(--paper-deep);
  border-bottom: 1px solid var(--line);
  padding: 8px 24px;
}
.breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-soft);
  max-width: 1200px;
  margin: 0 auto;
}
.breadcrumb a { color: var(--clay-deep); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); }
.breadcrumb-sep { color: var(--line); font-size: 11px; }

/* ---------- city / type internal links ---------- */

.city-links, .type-links {
  margin: 40px 0 0;
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.city-links h2, .type-links h2 { font-size: 16px; color: var(--ink); margin: 0 0 16px; }
.city-links-grid, .type-links-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.city-links-grid a, .type-links-grid a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--surface);
  transition: border-color .15s, color .15s;
}
.city-links-grid a:hover, .type-links-grid a:hover {
  border-color: var(--clay);
  color: var(--clay-deep);
}

/* ---------- empty state category links ---------- */

.empty-state-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}
.empty-state-links a {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--surface);
}
.empty-state-links a:hover { border-color: var(--clay); color: var(--clay-deep); }

/* ---------- related properties ---------- */

.related-properties { margin-top: 32px; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.related-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
.related-card img { width: 100%; height: 130px; object-fit: cover; display: block; }
.related-card-body { padding: 10px 12px; }
.related-card-body h3 { font-size: 13px; margin: 0 0 4px; }
.related-card-body h3 a { color: var(--ink); text-decoration: none; }
.related-card-body h3 a:hover { color: var(--clay-deep); }
.related-card-body p { font-size: 12px; color: var(--ink-soft); margin: 0; }

/* ---------- related links sidebar ---------- */

.related-links { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.related-links a { color: var(--clay-deep); font-size: 13px; text-decoration: none; }
.related-links a:hover { text-decoration: underline; }

/* ---------- agent phone link + WhatsApp button ---------- */

.agent-phone--link {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  direction: ltr;
  text-align: right;
  margin: 4px 0 10px;
  letter-spacing: .02em;
}
.agent-phone--link:hover { color: var(--clay-deep); }
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25D366;
  color: #fff;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  width: 100%;
  justify-content: center;
  margin-bottom: 4px;
}
.btn-whatsapp:hover { background: #1ebe57; color: #fff; }

/* ---------- footer nav ---------- */

.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-nav a { color: rgba(255,255,255,.6); font-size: 13px; text-decoration: none; }
.footer-nav a:hover { color: #fff; }

@media (max-width: 760px) {
  .related-grid { grid-template-columns: 1fr; }
  .breadcrumb-nav { padding: 8px 16px; }
}

/* ---------- قیمت توافقی ---------- */

.price-field-wrap { display: flex; flex-direction: column; gap: 8px; }
.price-toafoghi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  background: var(--paper);
  color: var(--ink-soft);
  transition: background .15s, color .15s, border-color .15s;
  align-self: flex-start;
}
.price-toafoghi:has(input:checked),
.price-toafoghi.is-checked {
  background: var(--clay);
  border-color: var(--clay);
  color: #fff;
}
.price-toafoghi input { display: none; }
.price-toafoghi-badge {
  display: inline-block;
  background: var(--clay);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 12px;
  border-radius: 999px;
}