/* ==========================================================================
   استایل اختصاصی صفحه‌ی «قیمت خودرو» — کاملاً جدا از styles.css اصلی
   (رنگ‌ها و متغیرهای پایه از styles.css خوانده می‌شوند چون قبل از این
   فایل لود شده)
   ========================================================================== */

/* دکمه‌ی بازگشت، گوشه‌ی صفحه و همیشه در دسترس */
.back-button {
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-soft);
  color: var(--slate-300);
  font-size: 0.85rem;
  font-weight: 700;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.back-button:hover {
  color: #fff;
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.15);
}

/* عنوان بالای صفحه */
.cars-page-title {
  margin-top: 2.5rem;
  padding: 1.5rem 2rem;
  border-bottom: 4px solid rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.05);
  text-align: center;
}

.cars-page-title-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
}
.cars-page-title-text i { color: var(--red, #ef4444); }

.cars-page-sub {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--slate-400);
}

/* ردیف انتخاب برند */
.brand-select-row {
  margin-top: 1.5rem;
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .brand-select-row { flex-direction: column; }
}

.brand-select-card {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.brand-select-card:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.4);
}

.brand-select-card.active {
  border-color: var(--blue, #3b82f6);
  background: rgba(59, 130, 246, 0.12);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
}

.brand-photo-circle {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-photo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-photo-fallback-icon {
  font-size: 1.75rem;
  color: var(--blue-light);
  opacity: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-name-label {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}

/* جدول‌های قیمت خودرو */
.cars-table-wrap {
  margin-top: 1.5rem;
}

.cars-loading-row {
  text-align: center;
  color: var(--slate-400);
  padding: 1.5rem !important;
}

/* ==========================================================================
   سایپا: لیست انتخاب مدل (اطلس، پراید، ساینا و ...)
   ========================================================================== */
.saipa-model-panel {
  padding: 1.5rem;
}

.saipa-model-title {
  text-align: center;
  font-size: 0.9rem;
  color: var(--slate-400);
  margin-bottom: 1.25rem;
}

.saipa-model-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .saipa-model-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .saipa-model-grid { grid-template-columns: repeat(2, 1fr); }
}

.saipa-model-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 1.1rem 0.75rem;
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.saipa-model-card:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.08);
}

.saipa-model-photo {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.saipa-model-photo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.saipa-model-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
}

/* دکمه‌ی بازگشت از جدول قیمتِ یک مدل، به لیست مدل‌های سایپا */
.saipa-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-soft);
  color: var(--slate-300);
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.saipa-back-btn:hover {
  color: #fff;
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.15);
}

/* نام مدل در جدول سایپا:
   جهت پایه راست‌به‌چپ (فارسی) است تا حروف انگلیسی مثل E / GX / CVT
   دقیقاً سر جای خودشان بمانند و بخش‌های فارسی و انگلیسی جابه‌جا نشوند. */
.saipa-name {
  display: inline-block;
  direction: rtl;
  unicode-bidi: isolate;
  text-align: right;
}

/* ستون‌های سال و نوع قیمت در جدول سایپا */
.saipa-col-year {
  text-align: center;
  white-space: nowrap;
  font-weight: 700;
  color: var(--slate-300);
}

.saipa-col-type {
  text-align: center;
  white-space: nowrap;
}

.saipa-price-badge {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  border: 1px solid transparent;
}

/* قیمت بازار */
.saipa-badge-market {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.4);
  color: #93c5fd;
}

/* قیمت کارخانه */
.saipa-badge-factory {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.4);
  color: #86efac;
}

@media (max-width: 480px) {
  .saipa-price-badge { font-size: 0.7rem; padding: 0.2rem 0.5rem; }
  .saipa-col-year { font-size: 0.82rem; }
}