/* باکس سفید مشخصات آگهی — مورد #3 Polish.md؛ باکس «آگهی‌های مشابه» ساختاری جدا و بیرون از این
   باکس است (به #adinfo-root اضافه نمی‌شود). */
#adinfo-root {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

/* task-jadid.md پیگیری — بنر پیش‌نمایش آگهیِ خودِ کاربر که هنوز تایید نشده (در انتظار/رد/منقضی). */
.adinfo-status-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: 0.88rem;
  border: 1px solid transparent;
}

.adinfo-status-banner i {
  font-size: 1.1rem;
  margin-top: 2px;
}

.adinfo-status-banner--pending {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
  color: var(--color-warning);
}

.adinfo-status-banner--rejected {
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
  color: var(--color-danger);
}

.adinfo-status-banner--expired {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.adinfo-status-banner-title {
  font-weight: 700;
  color: var(--color-text);
}

.adinfo-status-banner-reason,
.adinfo-status-banner-note {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-weight: 400;
}

.adinfo-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .adinfo-layout {
    grid-template-columns: 1fr 1fr;
  }
}

.adinfo-gallery {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-alt);
  touch-action: pan-y;
}

/* modal-view.md — این قانون قبلاً هم اسلایدهای گالری و هم لایت‌باکس تمام‌صفحه (که چون JSX‌اش
   داخل همین .adinfo-gallery رندر می‌شود، از نظر DOM هم فرزند آن حساب می‌شود) را هدف می‌گرفت.
   چون سلکتور «.adinfo-gallery img» (تخصص کلاس+المنت) از «.adinfo-lightbox-image» (تخصص فقط
   کلاس) قوی‌تر است، همیشه روی لایت‌باکس هم برنده می‌شد و object-fit:cover آن، contain واقعیِ
   لایت‌باکس را بی‌اثر می‌کرد — تصویر بزرگ‌شده/کراپ‌شده («fill») به‌جای نمایش کامل با سایز اصلی
   دیده می‌شد؛ سمت ادمین این مشکل را نداشت چون لایت‌باکسش در یک درخت DOM جدا رندر می‌شود. این
   قانون اصلاً هم زائد بود — همان استایل را کلاس اختصاصی .adinfo-gallery-slide (پایین‌تر) از قبل
   پوشش می‌دهد، پس اینجا کامل حذف شد به‌جای محدودکردن دامنه‌اش. */

/* اسلایدر گالری — وقتی آگهی بیش از یک تصویر دارد (AdGallery.tsx). */
.adinfo-gallery-track {
  direction: ltr;
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 280ms ease;
}

.adinfo-gallery-slide {
  flex: 0 0 100%;
  /* min-width/min-height:0 — همان دسته‌باگ توضیح‌داده‌شده در .adinfo-lightbox-image: چون این img
     فرزند مستقیم یک فلکس-روِ (.adinfo-gallery-track) است، مرورگر پیش‌فرض min-size:auto دارد یعنی
     هرگز از عرض/ارتفاع ذاتی تصویر کوچک‌تر نمی‌شود. برای تصویری با نسبت ابعاد خیلی نامتعارف
     (خیلی پهن یا خیلی کشیده — مثل آگهی‌های قدیمی بدون thumbnail کراپ‌شده) همین باعث می‌شد تصویر
     از کادر ۴:۳ گالری بیرون بزند و کل چیدمان صفحه‌ی جزئیات آگهی به‌هم بریزد.
     مورد #3 Important-Tasks. */
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.adinfo-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(18, 28, 42, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: background var(--transition-fast);
}

.adinfo-gallery-arrow:hover {
  background: rgba(18, 28, 42, 0.6);
}

.adinfo-gallery-arrow-prev {
  right: var(--space-3);
}

.adinfo-gallery-arrow-next {
  left: var(--space-3);
}

.adinfo-gallery-dots {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.adinfo-gallery-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.55);
  /* مورد #5 Polish.md — سایه‌ی کوچک تا وقتی خودِ تصویر آپلودی سفید است، نقطه‌ها هنوز دیده شوند. */
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
  transition: background var(--transition-fast), width var(--transition-fast);
}

.adinfo-gallery-dot.active {
  width: 18px;
  border-radius: 999px;
  background: #fff;
}

/* لایت‌باکس تمام‌صفحه‌ی گالری — مورد #5 Polish.md. */
.adinfo-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 14, 22, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.adinfo-lightbox-image {
  /* min-width/min-height:0 لازم است چون img به‌عنوان فرزند فلکس، پیش‌فرض مرورگر min-size:auto
     دارد (یعنی هرگز از سایز ذاتی‌اش کوچک‌تر نمی‌شود) — بدون این دو خط، max-width/max-height و
     object-fit:contain عملاً نادیده گرفته می‌شدند و تصویر (چه عمودی چه افقی) با سایز واقعی/کامل
     رندر و از کادر لایت‌باکس بیرون می‌زد. */
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
  cursor: default;
}

.adinfo-lightbox-close {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adinfo-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.adinfo-lightbox-arrow-prev {
  right: var(--space-4);
}

.adinfo-lightbox-arrow-next {
  left: var(--space-4);
}

.adinfo-breadcrumb {
  font-size: 0.78rem;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}

/* مورد #4 Polish.md — دسته‌بندی/زیردسته‌بندی/استان/شهر لینکی. */
.adinfo-breadcrumb a,
.adinfo-location-link {
  color: inherit;
  font: inherit;
  border: none;
  background: none;
  padding: 0;
  text-decoration: none;
}

.adinfo-breadcrumb a:hover,
.adinfo-location-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.adinfo-title {
  font-size: 1.2rem;
  margin-bottom: var(--space-1);
}

.adinfo-meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* خط جداکننده زیر لوکیشن/زمان طبق دیزاین — مورد #73 BigTasks. */
.adinfo-meta-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0 0 var(--space-3);
}

.adinfo-price {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

/* مورد #17/#18 Polish.md — ردیف اکشن‌ها: سمت راست تماس/چت بزرگ و کنار هم، سمت چپ
   اشتراک‌گذاری/نشان دایره‌ای کوچک؛ در ریسپانسیو دکمه‌های آیکنی به‌جای افتادن زیر، بالای
   تماس/چت می‌آیند. */
.adinfo-actions-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.adinfo-primary-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.adinfo-primary-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px var(--space-3);
  font-size: 0.92rem;
  font-weight: 700;
}

/* task-jadid.md دسته ۳ مورد ۷ — وقتی آگهی فقط یکی از دو دکمه (چت یا تماس) را دارد، flex:1
   بالا تنها دکمه را به‌اندازه‌ی جای دو دکمه کش می‌آورد. تک‌فرزند بودن یعنی دکمه‌ی دیگر
   اصلاً رندر نشده (نه صرفاً مخفی)، پس فقط همین حالت را هدف می‌گیریم و به اندازه‌ی طبیعی یک
   دکمه محدودش می‌کنیم، نه گسترش به کل عرض ردیف. */
.adinfo-primary-actions .adinfo-primary-btn:only-child {
  flex: 0 1 auto;
  min-width: 160px;
}

.adinfo-primary-btn-disabled {
  background: var(--color-surface-alt);
  color: var(--color-text-faint);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  cursor: not-allowed;
  font-size: 0.8rem;
}

.adinfo-icon-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.adinfo-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background var(--transition-fast);
}

.adinfo-icon-btn:hover {
  background: var(--color-surface-alt);
}

.adinfo-icon-btn .is-saved {
  color: var(--color-primary);
}

@media (max-width: 420px) {
  .adinfo-actions-row {
    flex-wrap: wrap;
  }

  .adinfo-icon-actions {
    order: -1;
    margin-inline-start: auto;
  }

  .adinfo-primary-actions {
    flex-basis: 100%;
  }
}

.adinfo-description {
  white-space: pre-wrap;
  line-height: 2;
  color: var(--color-text);
}

/* مورد جدید (میان‌پیام) — فایل‌های ضمیمه‌ی آگهی در صفحه‌ی جزئیات. */
.adinfo-attachments {
  margin-top: var(--space-4);
}

.adinfo-attachments-title {
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 var(--space-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.adinfo-attachment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.adinfo-attachment-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-strong);
}

.adinfo-attachment-item:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.adinfo-attachment-item > i:first-child {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.adinfo-attachment-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adinfo-attachment-name {
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adinfo-attachment-size {
  font-size: 0.72rem;
  color: var(--color-text-faint);
}

.adinfo-notice {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  color: var(--color-warning);
  font-size: 0.8rem;
}