/* =========================================================
   پتروآپ — استایل اختصاصی
   پالت رنگی:
   #40A2E3 (آبی اصلی)
   #FFF6E9 (کرم روشن)
   #BBE2EC (آبی روشن)
   #0D9276 (سبز)
   ========================================================= */

:root {
  --pt-blue: #40A2E3;
  --pt-cream: #FFF6E9;
  --pt-sky: #BBE2EC;
  --pt-green: #0D9276;
  --pt-green-dark: #0a7a63;
  /* نسخه‌ی AA (کنتراست ≥ 4.5 روی سفید) برای متن و پس‌زمینه‌ی دکمه‌ها؛ #0D9276 فقط برای عناصر تزئینی */
  --pt-green-aa: #0a7a63;
  --pt-green-aa-dark: #086352;
  --bs-link-color: #0a7a63;
  --bs-link-color-rgb: 10, 122, 99;
  --bs-link-hover-color: #086352;
  --bs-link-hover-color-rgb: 8, 99, 82;
  --pt-blue-dark: #2f88c4;
  --pt-text: #1f2d3d;
  --pt-text-muted: #5d6b7a;
  --pt-radius: 1rem;
  --pt-shadow: 0 8px 24px rgba(13, 146, 118, 0.10);
  --pt-shadow-hover: 0 14px 34px rgba(64, 162, 227, 0.20);
}
/*
  فونت: از Vazirmatn (فونت فارسی متن‌باز، از طریق CDN) استفاده می‌شود چون
  فایل‌های iransansdn.woff2/woff در پروژه آپلود نشده بودند.
  اگر بعداً فونت IRANSansDN را با مجوز معتبر تهیه کردید، کافی است:
  ۱) فایل‌های woff2/woff را در public_html/assets/fonts/ قرار دهید
  ۲) بلاک @font-face زیر را از حالت کامنت خارج کنید
  ۳) اولین مقدار font-family در body را به 'iransansdn' تغییر دهید
*/
/*
@font-face {
    font-family: 'iransansdn';
    src: url('../fonts/iransansdn.woff2') format('woff2'),
         url('../fonts/iransansdn.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
*/
/* ---------- Base ---------- */
body {
  font-family: "Vazirmatn", "iransansdn", Tahoma, sans-serif;
  background-color: var(--pt-cream);
  color: var(--pt-text);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--pt-text);
}

.section-title {
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
}
.section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 55%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(to left, var(--pt-green), var(--pt-blue));
}

.text-brand { color: var(--pt-green) !important; }

.bg-soft { background-color: var(--pt-sky); }
.bg-soft { background: linear-gradient(180deg, rgba(187, 226, 236, 0.45), rgba(187, 226, 236, 0.15)); }

/* ---------- Buttons ---------- */
.btn-brand {
  background-color: var(--pt-green-aa);
  border-color: var(--pt-green-aa);
  color: #fff;
  font-weight: 600;
}
.btn-brand:hover,
.btn-brand:focus {
  background-color: var(--pt-green-aa-dark);
  border-color: var(--pt-green-aa-dark);
  color: #fff;
}

.btn-outline-brand {
  border: 2px solid var(--pt-green-aa);
  color: var(--pt-green-aa);
  font-weight: 600;
  background: transparent;
}
.btn-outline-brand:hover {
  background-color: var(--pt-green);
  border-color: var(--pt-green);
  color: #fff;
}

.btn-soft-brand {
  background-color: rgba(13, 146, 118, 0.10);
  color: var(--pt-green-aa);
  font-weight: 600;
  border: none;
}
.btn-soft-brand:hover {
  background-color: var(--pt-green);
  color: #fff;
}

/* ---------- Navbar ---------- */
.navbar-petroup {
  background-color: rgba(255, 246, 233, 0.95);
  backdrop-filter: blur(8px);
}
.site-logo-img {
  height: 40px;
  max-height: 40px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}
.navbar-petroup .nav-link {
  font-weight: 600;
  color: var(--pt-text);
  border-radius: 0.5rem;
  padding-inline: 0.9rem;
}
.navbar-petroup .nav-link:hover,
.navbar-petroup .nav-link.active {
  color: var(--pt-green);
  background-color: rgba(13, 146, 118, 0.08);
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(13, 146, 118, 0.25); }

/* ---------- Hero ---------- */
.hero-section {
  background:
    radial-gradient(circle at 85% 15%, rgba(64, 162, 227, 0.18), transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(13, 146, 118, 0.14), transparent 45%),
    linear-gradient(160deg, var(--pt-sky) 0%, var(--pt-cream) 75%);
}
.text-muted-hero { color: var(--pt-text-muted); }

.hero-badge {
  background-color: rgba(13, 146, 118, 0.12);
  color: var(--pt-green-aa-dark);
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: 2rem;
}

.search-box .form-control,
.search-box .form-select {
  background: transparent;
  color: var(--pt-text);
}
.search-box .form-control::placeholder { color: var(--pt-text-muted); }
.search-select { max-width: 180px; }

@media (max-width: 767.98px) {
  .search-select { max-width: 100%; }
}

.tag-link {
  display: inline-block;
  padding: 0.25rem 0.9rem;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--pt-sky);
  color: var(--pt-text-muted);
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.2s ease;
}
.tag-link:hover {
  background: var(--pt-blue);
  border-color: var(--pt-blue);
  color: #fff;
}
.tag-link.active {
  background: var(--pt-green);
  border-color: var(--pt-green);
  color: #fff;
}

/* ---------- Stats ---------- */
.stats-section { margin-top: -1rem; }
.stat-card {
  background: #fff;
  border-radius: var(--pt-radius);
  padding: 1.25rem 0.5rem;
  box-shadow: var(--pt-shadow);
  border-bottom: 4px solid var(--pt-sky);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--pt-green);
}
.stat-number {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--pt-blue-dark-aa, #1f6fa5);
}
.stat-label {
  font-size: 0.85rem;
  color: var(--pt-text-muted);
}

/* ---------- Categories ---------- */
.category-card {
  display: block;
  text-align: center;
  background: #fff;
  border-radius: var(--pt-radius);
  padding: 1.75rem 0.75rem 1.25rem;
  text-decoration: none;
  color: var(--pt-text);
  box-shadow: var(--pt-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}
.category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--pt-shadow-hover);
  color: var(--pt-text);
}
.category-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 0.9rem;
  display: grid;
  place-items: center;
  border-radius: 1.1rem;
  font-size: 1.7rem;
  color: #fff;
  background: linear-gradient(135deg, var(--pt-blue), var(--pt-green));
}

/* ---------- Ad Cards ---------- */
.ad-card {
  border: none;
  border-radius: var(--pt-radius);
  overflow: hidden;
  box-shadow: var(--pt-shadow);
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ad-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--pt-shadow-hover);
}
.ad-img-wrap { position: relative; }
.ad-img-wrap img { object-fit: cover; height: 190px; width: 100%; }

.ad-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.4rem 0.9rem;
  border-radius: 2rem;
  font-weight: 700;
  font-size: 0.8rem;
}
/* وقتی داخل کارت جزئیات استفاده می‌شود، موقعیت‌دهی نمی‌خواهد */
.card-body > .ad-badge { position: static; }

.ad-badge-supply { background-color: var(--pt-green); color: #fff; }
.ad-badge-demand { background-color: var(--pt-blue); color: #fff; }

.ad-title {
  min-height: 2.8em;
  line-height: 1.4em;
}
.ad-price {
  font-weight: 800;
  color: var(--pt-green-aa);
  font-size: 1.05rem;
}
.ad-price small {
  font-weight: 400;
  color: var(--pt-text-muted);
  font-size: 0.72rem;
}

/* ---------- Features ---------- */
.feature-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 1.4rem;
  font-size: 1.9rem;
  color: var(--pt-green);
  background: rgba(13, 146, 118, 0.10);
  border: 2px dashed rgba(13, 146, 118, 0.35);
}

/* ---------- CTA ---------- */
.cta-section {
  background: linear-gradient(120deg, var(--pt-green), var(--pt-blue));
  color: #fff;
}
.cta-section h2 { color: #fff; }
.cta-section .btn-light { color: var(--pt-green); }

/* ---------- Articles ---------- */
.article-card {
  border: none;
  border-radius: var(--pt-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--pt-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.article-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--pt-shadow-hover);
}
.article-card img { height: 190px; object-fit: cover; }
.article-badge {
  background-color: rgba(64, 162, 227, 0.15);
  color: var(--pt-blue-dark);
  font-weight: 600;
}

/* ---------- Footer ---------- */
.footer {
  background-color: #122a35;
  color: var(--pt-sky);
}
.footer h6 { color: #fff; }
.footer-brand { color: #fff !important; }
.footer-brand i { color: var(--pt-blue); }
.footer-links li { margin-bottom: 0.6rem; }
.footer-links a {
  color: var(--pt-sky);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.footer-links a:hover { opacity: 1; color: #fff; }
.footer-divider { border-color: rgba(187, 226, 236, 0.2); }

.social-link {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(187, 226, 236, 0.12);
  color: var(--pt-sky);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.social-link:hover {
  background: var(--pt-blue);
  color: #fff;
  transform: translateY(-3px);
}

/* ---------- Single Ad Page ---------- */
.detail-card {
  border: none;
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow);
  background: #fff;
}
.main-ad-img { object-fit: cover; max-height: 460px; }

.thumb-img {
  width: 88px;
  height: 66px;
  object-fit: cover;
  border-radius: 0.6rem;
  cursor: pointer;
  border: 3px solid transparent;
  opacity: 0.7;
  transition: all 0.2s ease;
}
.thumb-img:hover { opacity: 1; }
.thumb-img.active {
  border-color: var(--pt-green);
  opacity: 1;
}

.price-box {
  background: rgba(13, 146, 118, 0.08);
  border: 1px dashed rgba(13, 146, 118, 0.4);
  border-radius: 0.8rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.price-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--pt-green);
}
.price-unit { color: var(--pt-text-muted); font-size: 0.85rem; }

.spec-table th {
  width: 42%;
  color: var(--pt-text-muted);
  font-weight: 600;
  background: rgba(187, 226, 236, 0.18);
}
.spec-table th,
.spec-table td { padding: 0.75rem 1rem; }

.seller-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  font-size: 1.5rem;
  color: #fff;
  background: linear-gradient(135deg, var(--pt-blue), var(--pt-green));
}
.seller-meta i { color: var(--pt-green); }

.safety-alert {
  background-color: rgba(64, 162, 227, 0.10);
  border: 1px solid rgba(64, 162, 227, 0.35);
  color: var(--pt-text);
  border-radius: var(--pt-radius);
}
.safety-alert i { color: var(--pt-blue); }

@media (min-width: 992px) {
  .sticky-sidebar {
    position: sticky;
    top: 90px;
  }
}

/* ---------- Article body (blog) ---------- */
.article-body h2 { margin-top: 2rem; margin-bottom: 1rem; font-weight: 700; font-size: 1.5rem; }
.article-body h3 { margin-top: 1.75rem; margin-bottom: 0.85rem; font-weight: 700; font-size: 1.25rem; }
.article-body p { margin-bottom: 1.1rem; color: var(--pt-text); }
.article-body img { max-width: 100%; height: auto; border-radius: 0.8rem; margin: 1rem 0; }
.article-body ul, .article-body ol { margin-bottom: 1.1rem; padding-inline-start: 1.5rem; }
.article-body blockquote {
  border-inline-start: 4px solid var(--pt-green);
  background: rgba(13, 146, 118, 0.06);
  padding: 0.9rem 1.2rem;
  border-radius: 0.6rem;
  margin: 1.2rem 0;
  color: var(--pt-text-muted);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb-item a { color: var(--pt-green-aa); }
.breadcrumb-item.active { color: var(--pt-text-muted); }

/* ---------- Small screens tuning ---------- */
@media (max-width: 575.98px) {
  .stat-number { font-size: 1.3rem; }
  .ad-img-wrap img { height: 160px; }
  .price-value { font-size: 1.5rem; }
  .display-5 { font-size: 1.9rem; }
}


/* ===== جزئیات تکمیلی UI (یکپارچه‌سازی و رفع مشکلات مشاهده‌شده) ===== */
.stat-number bdi { unicode-bidi: isolate; }
.stat-plus { margin-inline-start: .1rem; }

/* فیلد فایل: ظاهر هماهنگ با فیلدهای متنی (RTL، دکمه‌ی برند) */
input[type="file"] {
  width: 100%;
  padding: .35rem;
  border: 1px solid #ced4da;
  border-radius: .5rem;
  background: #fff;
  font-family: inherit;
  font-size: .9rem;
}
input[type="file"]::file-selector-button {
  margin-inline-end: .75rem;
  padding: .45rem .9rem;
  border: 0;
  border-radius: .4rem;
  background: var(--pt-green-aa);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--pt-green-aa-dark); }

/* بخش «آخرین آگهی‌ها» با تعداد کم: کارت‌ها وسط‌چین، بدون فضای خالی نامتعادل */
.latest-ads-row { justify-content: center; }

/* کارت دعوت به ثبت آگهی (وقتی آگهی‌ها کم هستند) */
.ad-cta-card {
  height: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1.5rem;
  text-align: center;
  background: #fff;
  border: 2px dashed var(--pt-green);
  border-radius: var(--pt-radius);
  color: var(--pt-text);
}
.ad-cta-card .bi { font-size: 2rem; color: var(--pt-green-aa); }

/* صفحه‌های خطا (۴۰۳/۴۰۴/۵۰۰) */
.error-section { min-height: 60vh; }
.error-code {
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 800;
  line-height: 1;
  color: var(--pt-green);
  opacity: .9;
}
.error-links-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; }

/* منوی زبان: عرض مناسب لمس */
.lang-switcher-dd .dropdown-item { padding-block: .6rem; }

/* درخت دسته‌ها */
.category-tree, .category-tree ul { list-style: none; margin: 0; padding-inline-start: 1rem; }
.category-tree li { padding-block: .25rem; }

/* حباب پیام */
.msg-body { white-space: normal; overflow-wrap: anywhere; line-height: 1.8; }
.msg-time { display: block; margin-top: .25rem; font-size: .75rem; color: var(--pt-text-muted); }

/* انتخاب محصولات شرکت */
.products-by-category { display: grid; gap: 1.25rem; }
.product-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .5rem .75rem;
}
.product-checkbox-grid label { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: .4rem; }
.product-checkbox-grid label:hover { background: rgba(13, 146, 118, .08); }

/* دکمه‌ی آیکونی هدر (پیام‌ها/اعلان‌ها/علاقه‌مندی‌ها): هدف لمس ≥ 44px */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border-radius: 50%; color: var(--pt-text); font-size: 1.2rem;
}
.btn-icon:hover, .btn-icon:focus-visible { background: rgba(13, 146, 118, .12); color: var(--pt-green-aa-dark); }
.btn-icon .nav-count-badge { position: absolute; top: 2px; inset-inline-end: 0; font-size: .65rem; }
.navbar-petroup .nav-link { white-space: nowrap; }

/* ===== نوار ناوبری پنل کاربری (جدا از منوی اصلی سایت) ===== */
.user-panel-nav {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow);
  padding: .5rem;
}
.user-panel-list {
  display: flex;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;           /* موبایل: اسکرول افقی داخلی؛ صفحه عرضی اسکرول نمی‌شود */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.user-panel-list li { flex: 0 0 auto; }
.user-panel-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;           /* هدف لمس */
  padding: .4rem .9rem;
  border-radius: .6rem;
  color: var(--pt-text);
  text-decoration: none;
  white-space: nowrap;
  font-size: .92rem;
}
.user-panel-link:hover { background: rgba(13, 146, 118, .1); color: var(--pt-green-aa-dark); }
.user-panel-link.active { background: var(--pt-green-aa); color: #fff; font-weight: 700; }
.user-panel-link .badge { font-size: .7rem; }
.navbar-petroup .nav-count-badge { position: absolute; top: -6px; inset-inline-end: -6px; font-size: .65rem; }

/* حساب کاربر در هدر: نام بلند نباید چیدمان را بشکند */
.navbar-petroup .dropdown > .btn { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbar-petroup .navbar-collapse > .d-flex { flex-wrap: nowrap !important; }
@media (max-width: 1199.98px) { .navbar-petroup .navbar-collapse > .d-flex { flex-wrap: wrap !important; padding-block: .5rem; } }
.ad-card .card-title a, .ad-card h3 a { display: inline-block; padding-block: .35rem; }
.blog-cover { aspect-ratio: 1200 / 630; height: auto; object-fit: cover; }

/* Focus مشخص و ثابت برای دکمه‌ها/لینک‌های Bootstrap (outline:0 پیش‌فرض Bootstrap را خنثی می‌کند) */
.btn:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible, .navbar-toggler:focus-visible,
.form-control:focus-visible, .form-select:focus-visible, .page-link:focus-visible {
  outline: 3px solid var(--pt-green-aa-dark) !important;
  outline-offset: 2px;
}

/* لوگوی فوتر — زمینه‌ی روشن تا روی فوتر تیره خوانا بماند */
.footer-logo-img {
  height: 48px;
  max-height: 48px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
}


/* ===== نوبار هدر — فضای تنفس بیشتر (کم‌شلوغ‌سازی) ===== */
.navbar-petroup { padding-block: .65rem; }
.navbar-petroup .navbar-brand { margin-inline-end: 1.5rem; }
.navbar-petroup .navbar-main-links { gap: .25rem; }
.navbar-petroup .navbar-main-links .nav-link {
  padding: .55rem 1rem;
  font-size: .95rem;
}
.navbar-petroup .navbar-actions .btn { padding-inline: 1rem; white-space: nowrap; }
@media (min-width: 1200px) {
  .navbar-petroup .navbar-actions { margin-inline-start: 1rem; }
}
/* لپ‌تاپ‌های متوسط (۱۲۰۰–۱۳۹۹): نام کاربر در دکمه‌ی حساب مخفی می‌شود (آیکن + منوی کشویی می‌ماند) تا نوبار فشرده نشود */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .navbar-petroup .nav-account-name { display: none; }
  .navbar-petroup .navbar-brand { margin-inline-end: .75rem; }
  .navbar-petroup .navbar-main-links { gap: 0; }
  .navbar-petroup .navbar-main-links .nav-link { padding: .5rem .6rem; font-size: .9rem; }
  .navbar-petroup .navbar-actions { margin-inline-start: .5rem; gap: .5rem !important; }
  .navbar-petroup .navbar-actions .btn { padding-inline: .7rem; font-size: .9rem; }
}
/* موبایل/تبلت: منوی بازشده مرتب و با فاصله */
@media (max-width: 1199.98px) {
  .navbar-petroup .navbar-collapse { padding-block: .75rem; }
  .navbar-petroup .navbar-main-links .nav-link { padding: .7rem 1rem; }
  .navbar-petroup .navbar-actions { padding-top: .75rem; border-top: 1px solid rgba(0,0,0,.08); }
}