/* =========================================================
   PaymentBaz — اصلاحات چیدمانی
   ========================================================= */

/* ---------------------------------------------------------
   ۱) فوتر چسبان (Sticky footer)
   body به یک ستون فلکسی با حداقل ارتفاع صفحه تبدیل می‌شود و
   #paymentbaz-site-content (تمام محتوای بین هدر و فوتر، شامل صفحات
   المنتوری) فضای باقی‌مانده را پر می‌کند. نتیجه: در صفحاتی با
   محتوای کوتاه (سبد خرید/پرداخت با یکی-دو آیتم) فوتر همیشه به
   کف واقعیِ ویوپورت می‌چسبد و زیرش فضای خالی نمی‌ماند.
--------------------------------------------------------- */
html, body { height: auto; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* مرورگرهای جدیدتر: با نوار پایین آیفون هم درست کار می‌کند */
}
#paymentbaz-site-content.paymentbaz-site-content {
  flex: 1 0 auto;
  min-width: 0;
}
footer.footer-section {
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   ۲) دکمه «بازگشت به بالا» هنگام باز بودن منوی کناری (موبایل)
   حالت عادی از خاصیت منطقی inset-inline-end استفاده می‌کند؛ حالت
   drawer-open قبلاً left فیزیکی ست می‌کرد که یک خاصیت CSS متفاوت
   است و transition تعریف‌شده روی left هم بین دو حالت هماهنگ نبود
   (باعث می‌شد بار اول جابه‌جایی/دررفتگی چیدمان دیده شود، مخصوصاً
   وقتی نوار پایین مرورگر آیفون هم هم‌زمان ارتفاع ویوپورت را تغییر
   می‌دهد). این‌جا هر دو حالت روی همان خاصیت منطقی یکسان می‌شوند.
--------------------------------------------------------- */
.back-to-top {
  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility .3s,
    box-shadow .25s ease,
    border-color .25s ease,
    inset-inline-start .35s cubic-bezier(.4,0,.2,1),
    inset-inline-end .35s cubic-bezier(.4,0,.2,1),
    bottom .35s cubic-bezier(.4,0,.2,1);
}
body.drawer-open .back-to-top {
  left: auto;
  inset-inline-start: auto;
  inset-inline-end: 25px;
  /* باید بالاتر از منوی شناور (که خودش عمودی می‌شود) بایستد؛ چون پایینِ
     خود منو env(safe-area-inset-bottom) و var(--paymentbaz-vv-bottom-gap) را
     هم جمع می‌زند، این مقدار هم باید همان دو را جمع بزند، وگرنه روی
     گوشی‌هایی با safe-area غیرصفر (اکثر گوشی‌های جدید) رویش می‌افتد. */
  bottom: calc(210px + env(safe-area-inset-bottom) + var(--paymentbaz-vv-bottom-gap, 0px));
}
@media (max-width: 360px) {
  body.drawer-open .back-to-top {
    bottom: calc(230px + env(safe-area-inset-bottom) + var(--paymentbaz-vv-bottom-gap, 0px));
  }
}

/* ---------------------------------------------------------
   ۳) دسته‌بندی‌های صفحه فروشگاه: در موبایل و تبلت ۴ مورد اول و در
   دسکتاپ (۱۰۲۴px به بالا، هم‌راستا با شبکه‌ی ۶ستونه‌ی خودِ همین
   کامپوننت) ۶ مورد اول نمایش داده می‌شود؛ بقیه با کلاس is-collapsed
   مخفی می‌مانند. کلیک روی دکمه «مشاهده همه دسته‌بندی‌ها» (main.js)
   این کلاس را از کانتینر برمی‌دارد و همه را در هر اندازه صفحه نشان
   می‌دهد.
--------------------------------------------------------- */
@media (max-width: 1023px) {
  .shop-cat-icons.is-collapsed .shop-cat-icon:nth-child(n+5) {
    display: none;
  }
}
@media (min-width: 1024px) {
  .shop-cat-icons.is-collapsed .shop-cat-icon:nth-child(n+7) {
    display: none;
  }
}
.shop-cat-icons-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-top: .9rem;
}
.shop-cat-icons-toggle-wrap[hidden] { display: none; }
.shop-cat-icons-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1edff;
  color: var(--paymentbaz-primary);
  border: 1px solid #ddd5ff;
  border-radius: 999px;
  padding: .55rem 1.1rem;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.shop-cat-icons-toggle:hover {
  background: var(--paymentbaz-primary);
  color: #fff;
}
.shop-cat-icons-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform .25s ease;
}
.shop-cat-icons-toggle.is-open svg {
  transform: rotate(180deg);
}
.dark .shop-cat-icons-toggle {
  background: rgba(var(--paymentbaz-primary-rgb-comma), .15);
  border-color: rgba(124, 92, 250, .25);
  color: var(--paymentbaz-primary-tint);
}
.dark .shop-cat-icons-toggle:hover {
  background: var(--paymentbaz-primary);
  color: #fff;
}
.shop-cat-icon__image--vector {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------
   ۴) شبکه محصولات فروشگاه در موبایل: دو ستون کنار هم به‌جای
   یک ستونِ تمام‌عرض (چیدمان پایه‌ی ووکامرس فقط از ۶۴۰px به بالا
   چندستونه می‌شد). فاصله‌ها و پدینگ کارت هم برای عرض کم‌تر
   جمع‌وجورتر شده تا در موبایل شلوغ/بی‌نظم به نظر نرسد.
--------------------------------------------------------- */
@media (max-width: 639px) {
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 12px !important;
  }
  ul.products .pf-card__body {
    padding: 14px 14px 14px 16px;
  }
  ul.products .pf-card__title {
    font-size: 13.5px;
    min-height: 2.6em;
  }
  ul.products .pf-card__excerpt {
    display: none; /* در کارت‌های باریک دوستونه، توضیح کوتاه حذف می‌شود تا شلوغ نشود */
  }
  ul.products .pf-card__footer {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 374px) {
  ul.products {
    gap: 12px 10px !important;
  }
}

/* ---------------------------------------------------------
   ۶) فیلد امتیازدهی در فرم ثبت دیدگاه محصول: ۵ آیکون ستاره‌ی
   کلیک‌پذیر به‌جای رادیوهای متنی پیش‌فرض ووکامرس. ترتیب DOM از ۵ به ۱
   است و با direction:ltr + row-reverse به‌صورت بصری از ۱ (راست) تا ۵
   (چپ) در RTL نمایش داده می‌شود؛ انتخاب ستاره‌ی هرکدام، خودش و همه‌ی
   ستاره‌های قبل از آن (در DOM) را با ~ (سیبلینگ عمومی) روشن می‌کند.
--------------------------------------------------------- */
.paymentbaz-star-rating {
  margin-bottom: 1.25rem;
}
.paymentbaz-star-rating > label {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-secondary, #555);
  margin-bottom: .5rem;
}
.paymentbaz-star-rating .required {
  color: #e11d48;
}
.paymentbaz-star-rating .optional {
  color: var(--text-muted, #999);
  font-weight: 400;
}
.paymentbaz-star-rating__stars {
  display: inline-flex;
  flex-direction: row-reverse;
  direction: ltr;
  gap: 4px;
}
.paymentbaz-star-rating__stars input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.paymentbaz-star-rating__stars label {
  cursor: pointer;
  color: #d8d8e2;
  transition: color .15s ease, transform .15s ease;
}
.paymentbaz-star-rating__stars label svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  display: block;
}
.paymentbaz-star-rating__stars input:checked ~ label,
.paymentbaz-star-rating__stars label:hover,
.paymentbaz-star-rating__stars label:hover ~ label {
  color: #f5b301;
}
.paymentbaz-star-rating__stars label:hover {
  transform: scale(1.12);
}
.paymentbaz-star-rating__stars input:focus-visible + label {
  outline: 2px solid var(--paymentbaz-primary, #5b30f6);
  outline-offset: 2px;
  border-radius: 4px;
}
.paymentbaz-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------
   ۷) باکس سفید محتوای اصلی صفحه (بخش «محتوای اختصاصی» که از
   ویرایشگر/المنتور می‌آید) — همان زبان بصری کارت‌های دیگر قالب
   (پس‌زمینه سفید/تیره، گوشه گرد، سایه ملایم) با تایپوگرافی مرتب برای
   تیتر/پاراگراف/لیست/تصویر محتوای آزاد. این کلاس بین صفحه‌ی هر «خدمت»
   (single-service.php) و صفحه‌ی هر «نمونه‌کار/پروژه» (single-project.php)
   مشترک است تا ظاهر هر دو یکسان بماند.
--------------------------------------------------------- */
.paymentbaz-service-content {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: var(--card-shadow);
  padding: 2rem;
  color: var(--text-secondary, #4b5563);
  line-height: 1.9;
}
@media (min-width: 640px) {
  .paymentbaz-service-content {
    padding: 2.75rem;
  }
}
.paymentbaz-service-content > :first-child {
  margin-top: 0;
}
.paymentbaz-service-content > :last-child {
  margin-bottom: 0;
}
.paymentbaz-service-content h1,
.paymentbaz-service-content h2,
.paymentbaz-service-content h3,
.paymentbaz-service-content h4 {
  color: var(--text-primary, #1e1c3a);
  font-weight: 800;
  line-height: 1.5;
  margin: 1.75em 0 .75em;
}
.paymentbaz-service-content h2 { font-size: 1.4rem; }
.paymentbaz-service-content h3 { font-size: 1.2rem; }
.paymentbaz-service-content h4 { font-size: 1.05rem; }
.paymentbaz-service-content p {
  margin: 0 0 1.25em;
}
.paymentbaz-service-content ul,
.paymentbaz-service-content ol {
  margin: 0 0 1.25em;
  padding-inline-start: 1.5em;
  display: flex;
  flex-direction: column;
  gap: .5em;
}
.paymentbaz-service-content ul { list-style: disc; }
.paymentbaz-service-content ol { list-style: decimal; }
.paymentbaz-service-content a {
  color: var(--paymentbaz-primary, #5b30f6);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.paymentbaz-service-content img {
  max-width: 100%;
  height: auto;
  border-radius: .85rem;
  margin: 1.5em 0;
}
.paymentbaz-service-content blockquote {
  margin: 1.5em 0;
  padding: .25em 1.25em;
  border-inline-start: 3px solid var(--paymentbaz-primary, #5b30f6);
  color: var(--text-primary, #1e1c3a);
  font-style: normal;
}
.paymentbaz-service-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: .9rem;
}
.paymentbaz-service-content th,
.paymentbaz-service-content td {
  border: 1px solid var(--border);
  padding: .6em .85em;
  text-align: start;
}
.paymentbaz-service-content th {
  background: var(--bg-subtle);
  color: var(--text-primary, #1e1c3a);
  font-weight: 700;
}

/* ---------------------------------------------------------
   ۸) بخش «نمونه‌کارهای» صفحه اصلی: تعداد ستون قابل‌تنظیم از
   تنظیمات قالب ← صفحه اصلی ← بخش نمونه‌کارها. مقدار ستون‌ها با
   متغیرهای CSS ‏(--port-cols-desktop/--port-cols-tablet) به‌صورت
   inline روی همان گرید (#home-portfolio-grid) ست می‌شود؛ در موبایل
   همیشه تک‌ستونه می‌ماند. سلکتور با id چون باید نسخه‌ی صفحه اصلی را
   مستقل از گرید عمومی «.port-grid» (آرشیو نمونه‌کارها) اورراید کند.
--------------------------------------------------------- */
@media (min-width: 640px) {
  #home-portfolio-grid {
    grid-template-columns: repeat(var(--port-cols-tablet, 2), 1fr);
  }
}
@media (min-width: 1024px) {
  #home-portfolio-grid {
    grid-template-columns: repeat(var(--port-cols-desktop, 3), 1fr);
  }
}

/* ---------------------------------------------------------
   ۹) بخش «باشگاه مشتریان»: رنگ پس‌زمینه و رنگ دکمه از تنظیمات
   قالب ← صفحه اصلی ← بخش باشگاه مشتریان قابل‌تنظیم است. تا وقتی
   ادمین رنگی انتخاب نکرده، همان مقدار پیش‌فرض قبلی (گرادیان رنگ
   اصلی برای پس‌زمینه، رنگ ثانویه برای دکمه) از طریق fallback خودِ
   var() اعمال می‌شود.
--------------------------------------------------------- */
.club-section {
  background: var(--paymentbaz-club-bg, linear-gradient(135deg, var(--paymentbaz-primary), #4520dc 55%, #3d1fd6));
}
.club-cta {
  background: var(--paymentbaz-club-btn, var(--paymentbaz-secondary));
  color: var(--paymentbaz-club-btn-text, #1e1c3a);
}
.club-cta:hover {
  background: var(--paymentbaz-club-btn-hover, #ffc733);
  color: var(--paymentbaz-club-btn-text, #1e1c3a);
}

/* ---------------------------------------------------------
   ۱۰) مگامنوی چندستونه‌ی هدر (شیوه‌ی نمایش «مگامنو» برای هر آیتم
   منو، از پیشخوان ← ظاهر ← فهرست‌ها). ساختار: ستون راست = فهرست
   دسته‌بندی‌ها (سطح ۱)، پنل محتوا (سمت چپ) = چند ستون که هرکدام
   یک زیرمجموعه‌ی سطح ۲ است و لینک‌های سطح ۳ را زیر خودش لیست
   می‌کند. چون در RTL اولین فرزند flex در سمت راست قرار می‌گیرد،
   ترتیب طبیعی مارک‌آپ (ستون دسته‌بندی‌ها اول، پنل محتوا دوم) دقیقاً
   همان چیدمان راست‌به‌چپ لازم را بدون هیچ ترفند جهتی می‌سازد.
--------------------------------------------------------- */
.paymentbaz-mega-panel {
  width: min(1060px, calc(100vw - 2rem));
  max-width: none;
  padding: 0;
}
.paymentbaz-mega-panel__inner {
  display: flex;
  align-items: stretch;
  max-height: min(70vh, 640px);
}
.paymentbaz-mega-panel__cats {
  flex: 0 0 240px;
  overflow-y: auto;
  padding: 14px;
  border-inline-start: 1px solid var(--border, #e2e0f4);
}
.paymentbaz-mega-panel__cat {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1e1c3a);
  text-align: start;
  transition: background-color .15s ease, color .15s ease;
}
.paymentbaz-mega-panel__cat:hover {
  background: var(--paymentbaz-primary-50, rgba(91, 48, 246, .06));
}
.paymentbaz-mega-panel__cat.is-active {
  background: var(--paymentbaz-primary, #5b30f6);
  color: #fff;
}
.paymentbaz-mega-panel__cat-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  opacity: .8;
}
.paymentbaz-mega-panel__cat-icon svg { width: 100%; height: 100%; }
.paymentbaz-mega-panel__cat-label { flex: 1; }
.paymentbaz-mega-panel__cat-chevron {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: .5;
}
.paymentbaz-mega-panel__cat.is-active .paymentbaz-mega-panel__cat-chevron { opacity: .9; }

.paymentbaz-mega-panel__content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 22px 26px;
}
.paymentbaz-mega-panel__grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 22px 18px;
}
.paymentbaz-mega-panel__grid.is-active { display: grid; }
.paymentbaz-mega-panel__empty {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--text-muted, #6b6898);
  padding: 20px 0;
}
.paymentbaz-mega-panel__col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary, #1e1c3a);
  margin-bottom: 10px;
}
a.paymentbaz-mega-panel__col-head:hover { color: var(--paymentbaz-primary, #5b30f6); }
.paymentbaz-mega-panel__col-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.paymentbaz-mega-panel__col-icon svg { width: 100%; height: 100%; }
.paymentbaz-mega-panel__col-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.paymentbaz-mega-panel__col-links a {
  font-size: 12.5px;
  color: var(--text-muted, #6b6898);
  transition: color .15s ease;
}
.paymentbaz-mega-panel__col-links a:hover { color: var(--paymentbaz-primary, #5b30f6); }

.dark .paymentbaz-mega-panel__cats { border-inline-start-color: var(--border, #2e2a45); }
.dark .paymentbaz-mega-panel__cat { color: var(--text-primary, #f0eeff); }
.dark .paymentbaz-mega-panel__cat:hover { background: rgba(255,255,255,.06); }
.dark .paymentbaz-mega-panel__col-head { color: var(--text-primary, #f0eeff); }

/* اسکرول‌بار قابل‌مشاهده (نه فقط اسکرول‌بار پیش‌فرض و کم‌رنگ مرورگر)
   برای ستون‌های داخل مگامنو — وقتی تعداد آیتم‌های یک دسته زیاد است و
   نیاز به اسکرول دارد، این‌جوری برای کاربر مشخص می‌شود که محتوای
   بیشتری پایین‌تر هست، نه این‌که فکر کند لیست ناقص/بریده‌شده است. */
.paymentbaz-mega-panel__cats,
.paymentbaz-mega-panel__content {
  scrollbar-width: thin;
  scrollbar-color: var(--paymentbaz-primary, #5b30f6) transparent;
}
.paymentbaz-mega-panel__cats::-webkit-scrollbar,
.paymentbaz-mega-panel__content::-webkit-scrollbar {
  width: 6px;
}
.paymentbaz-mega-panel__cats::-webkit-scrollbar-thumb,
.paymentbaz-mega-panel__content::-webkit-scrollbar-thumb {
  background-color: var(--paymentbaz-primary, #5b30f6);
  border-radius: 10px;
}

/* ---------------------------------------------------------
   ۱۲) اولویت نمایش مگامنو نسبت به دکمه‌ی «بازگشت به بالا» — هر دو
   z-index:50 داشتند و چون دکمه‌ی بازگشت به بالا در DOM بعد از هدر
   می‌آید، وقتی مگامنو تا پایین صفحه ادامه پیدا می‌کرد، آن دکمه از
   روی گوشه‌ی مگامنو دیده می‌شد (انگار یک تکه از مگامنو جدا افتاده).
--------------------------------------------------------- */
.paymentbaz-mega-panel { z-index: 60; }

@media (max-width: 1100px) {
  .paymentbaz-mega-panel { width: calc(100vw - 1.5rem); right: -1rem; }
}

/* ---------------------------------------------------------
   ۱۱) کارت‌های آماری داشبورد پنل کاربری: همیشه هر سه کنار هم در
   یک ردیف (حتی در موبایل). چون فضای هر کارت در عرض‌های خیلی کم
   محدود می‌شود، آیکون و فاصله‌ها را کوچک‌تر می‌کنیم تا برچسب‌ها
   جا بشوند و ارتفاع کارت‌ها یکدست بماند.
--------------------------------------------------------- */
@media (max-width: 480px) {
  .paymentbaz-dash-stats { gap: 8px; }
  .paymentbaz-dash-stats .card {
    padding: 12px 10px !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px !important;
    text-align: start;
  }
  .paymentbaz-dash-stats .card > div:first-child {
    width: 32px !important;
    height: 32px !important;
  }
  .paymentbaz-dash-stats .card > div:first-child svg {
    width: 16px !important;
    height: 16px !important;
  }
  .paymentbaz-dash-stats .card p:first-of-type { font-size: 1.05rem !important; }
  .paymentbaz-dash-stats .card p:last-of-type {
    font-size: 10px !important;
    line-height: 1.4;
  }
}