/* ============================================================
   app.css — وهاب آنلاین
   (۱) سیستم تایپوگرافی کامل  (.typo)
   (۲) کامپوننت‌های صفحه «مشاهده اطلاعات محصول»
   ============================================================ */

:root {
  --app-ink: #1e293b;
  --app-body: #334155;
  --app-muted: #64748b;
  --app-faint: #94a3b8;
  --app-brand: #2563eb;
  --app-brand-dark: #1d4ed8;
  --app-line: #e2e8f0;
  --app-soft: #f8fafc;
  --app-display: 'Lalezar', 'Vazirmatn', 'Tahoma', sans-serif;
  --app-font: 'Vazirmatn', 'Tahoma', 'Arial', sans-serif;
}

/* ════════════════════════════════════════════════════════════
   (۱) سیستم تایپوگرافی
   اسکوپ: .typo — این استایل‌ها فقط داخل ظرف محتوایی
   (توضیحات محصول، مقاله و…) اعمال می‌شوند تا هدر/فوتر و
   کارت‌های سکشن‌ها دست‌نخورده بمانند.
   ════════════════════════════════════════════════════════════ */
.logo-desktop{
  width: 90px;
}
.typo {
  font-family: var(--app-font);
  font-size: 15px;
  line-height: 2.05;
  color: var(--app-body);
  text-align: right;
}

/* ── سلسله مراتب عناوین h1 تا h6 ── */
.typo h1,
.typo h2,
.typo h3 {
  font-family: var(--app-display);
  color: var(--app-ink);
  line-height: 1.5;
  margin: 1.6em 0 .7em;
}
.typo h1 { font-size: 34px; }
.typo h2 { font-size: 26px; color: #1e3a8a; }
.typo h3 { font-size: 21px; }
.typo h4,
.typo h5,
.typo h6 {
  font-family: var(--app-font);
  font-weight: 800;
  color: var(--app-ink);
  line-height: 1.7;
  margin: 1.5em 0 .55em;
}
.typo h4 { font-size: 17px; }
.typo h5 { font-size: 15.5px; }
.typo h6 { font-size: 14px; color: #475569; }

/* ── پاراگراف‌ها ── */
.typo p { margin: 0 0 1.1em; }
.typo .lead {
  font-size: 16.5px;
  color: #475569;
  font-weight: 500;
}
.typo h1, .typo h2, .typo h3, .typo h4, .typo h5, .typo h6,
.typo h1 strong, .typo h2 strong, .typo h3 strong, .typo h4 strong, .typo h5 strong, .typo h6 strong{
  font-weight: 500 !important;
}
/* ── تأکیدها و عبارات ── */
.typo strong, .typo b { font-weight: 800; color: var(--app-ink); }
.typo em, .typo i { font-style: italic; }
.typo u {
  text-decoration: underline;
  text-decoration-color: #93c5fd;
  text-underline-offset: 4px;
}
.typo del, .typo s { text-decoration: line-through; color: var(--app-faint); }
.typo mark {
  background: linear-gradient(90deg, #fef3c7, #fde68a);
  color: #713f12;
  border-radius: 4px;
  padding: 0 5px;
  font-weight: 600;
}
.typo small { font-size: 12px; color: var(--app-muted); }
.typo abbr[title] { text-decoration: underline dotted; cursor: help; }

/* ── پیوندها ── */
.typo a {
  color: var(--app-brand);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color .2s;
}
.typo a:hover { color: var(--app-brand-dark); text-decoration-thickness: 2px; }

/* ── فهرست‌ها: ul ،ol ،li (با تودرتویی) ── */
.typo ul, .typo ol {
  margin: 0 0 1.2em;
  padding-inline-start: 1.5em;
}
.typo ul { list-style: disc; }
.typo ol { list-style: decimal; }
.typo ul ul { list-style: circle; }
.typo ul ul ul { list-style: square; }
.typo ol ol { list-style: lower-alpha; }
.typo li { margin-bottom: .45em; padding-inline-start: 2px; }
.typo li::marker { color: var(--app-brand); font-weight: 700; }

/* ── بلوک نقل‌قول ── */
.typo blockquote {
  margin: 1.6em 0;
  padding: 16px 20px;
  border-inline-start: 4px solid #6366f1;
  background: linear-gradient(180deg, #eef2ff, #f5f3ff);
  border-radius: 14px;
  color: #4338ca;
  font-size: 14.5px;
}
.typo blockquote p { margin: 0; }
.typo blockquote cite {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-style: normal;
  color: #818cf8;
  font-weight: 700;
}

/* ── شکل و شرح شکل ── */
.typo figure { margin: 1.6em 0; }
.typo figure img {
  border-radius: 16px;
  border: 1px solid var(--app-line);
  width: 100%;
  display: block;
}
.typo figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 12.5px;
  color: var(--app-muted);
  font-weight: 600;
}

/* ── فهرست تعریفی dl/dt/dd ── */
.typo dl {
  margin: 0 0 1.2em;
  display: grid;
  grid-template-columns: minmax(130px, 210px) 1fr;
  gap: 10px 16px;
}
.typo dt { font-weight: 800; color: var(--app-ink); }
.typo dd { margin: 0; }

/* ── کد ،کلید و بلوک کد ── */
.typo code {
  direction: ltr;
  unicode-bidi: embed;
  background: #f1f5f9;
  border: 1px solid var(--app-line);
  color: #be185d;
  font-size: 12.5px;
  padding: 2px 7px;
  border-radius: 6px;
  font-family: 'Consolas', 'Monaco', monospace;
}
.typo kbd {
  direction: ltr;
  unicode-bidi: embed;
  background: #1e293b;
  color: #f8fafc;
  font-size: 11.5px;
  font-family: 'Consolas', monospace;
  padding: 2px 7px;
  border-radius: 6px;
  box-shadow: 0 2px 0 #0f172a;
}
.typo pre {
  direction: ltr;
  text-align: left;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 12.5px;
  line-height: 1.8;
  overflow-x: auto;
  margin: 0 0 1.4em;
}
.typo pre code {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* ── خط جداکننده ── */
.typo hr {
  border: 0;
  border-top: 1px dashed #cbd5e1;
  margin: 2em 0;
}

/* ── جدول ── */
.typo table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4em;
  font-size: 13.5px;
}
.typo th, .typo td {
  border: 1px solid var(--app-line);
  padding: 10px 14px;
  text-align: right;
}
.typo thead th {
  background: var(--app-soft);
  color: var(--app-ink);
  font-weight: 800;
}
.typo tbody tr:nth-child(even) { background: #fbfdff; }
.typo tbody tr:hover { background: #f1f6fe; }

/* ════════════════════════════════════════════════════════════
   (۲) صفحه «مشاهده اطلاعات محصول»
   ════════════════════════════════════════════════════════════ */

/* ── بردکرامب ── */
.breadcrumb { margin: 26px 0 18px; }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--app-muted);
}
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before {
  content: '/';
  color: #cbd5e1;
  margin: 0 9px;
  font-weight: 400;
}
.breadcrumb a { color: var(--app-brand); transition: color .2s; }
.breadcrumb a:hover { color: var(--app-brand-dark); }
.breadcrumb li[aria-current='page'] { color: var(--app-ink); font-weight: 800; }

/* ── برگه اصلی محصول ── */
.product-sheet {
  background: #fff;
  border: 1px solid var(--app-line);
  border-radius: 26px;
  padding: 26px;
  box-shadow: 0 20px 55px -20px rgba(15, 23, 42, .10);
}
@media (min-width: 1024px) { .product-sheet { padding: 34px; } }

/* ── گالری تصاویر ── */
.gallery { position: relative; }
.gallery-main {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--app-line);
  background: var(--app-soft);
  aspect-ratio: 4 / 3;
}
.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .22s ease;
}
.gallery-main img.gallery-swap { opacity: 0; }
.gallery-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 13px;
  border-radius: 9999px;
  box-shadow: 0 8px 20px -6px rgba(16, 185, 129, .55);
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--app-line);
  color: #334155;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 18px -4px rgba(15, 23, 42, .18);
  transition: all .2s;
}
.gallery-arrow:hover {
  background: #fff;
  color: var(--app-brand);
  transform: translateY(-50%) scale(1.07);
}
.gallery-prev { right: 12px; }
.gallery-next { left: 12px; }
.gallery-arrow svg { width: 17px; height: 17px; }

.gallery-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  padding-bottom: 6px;
}
.gallery-thumbs::-webkit-scrollbar { height: 6px; }
.gallery-thumbs::-webkit-scrollbar-track { background: transparent; }
.gallery-thumbs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.gallery-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  scroll-snap-align: start;
  padding: 0;
  cursor: pointer;
  border-radius: 13px;
  overflow: hidden;
  border: 2px solid var(--app-line);
  background: var(--app-soft);
  opacity: .78;
  transition: all .22s;
}
.gallery-thumb:hover { opacity: 1; border-color: #93c5fd; }
.gallery-thumb.active {
  opacity: 1;
  border-color: var(--app-brand);
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .45);
}
.gallery-thumb.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(37, 99, 235, .08);
}
.gallery-thumb img {
  width: 100%;
  height: 74px;
  object-fit: cover;
  display: block;
}

/* ── اطلاعات محصول ── */
.product-info { padding-top: 6px; }
.pi-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 9999px;
  box-shadow: 0 6px 14px -4px rgba(245, 158, 11, .5);
}
.pi-badge-soft {
  background: #eef2ff;
  color: #4f46e5;
  box-shadow: none;
  border: 1px solid #e0e7ff;
}
.pi-title {
  font-family: var(--app-display);
  font-size: 27px;
  line-height: 1.55;
  color: var(--app-ink);
  margin: 12px 0 10px;
}
.pi-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--app-muted);
  font-weight: 600;
}
.pi-stars { font-size: 14px; letter-spacing: 2px; }
.pi-score { color: var(--app-ink); font-weight: 800; }
.pi-desc {
  margin: 14px 0 18px;
  color: #475569;
  font-size: 14px;
  line-height: 2;
}
.pi-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 0 0 18px;
  padding: 16px 0;
  border-block: 1px dashed var(--app-line);
}
.pi-meta__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-inline-start: 10px;
  border-inline-start: 2px solid #dbeafe;
}
.pi-meta dt { font-size: 11.5px; color: var(--app-faint); font-weight: 700; }
.pi-meta dd { margin: 0; font-size: 13px; color: var(--app-ink); font-weight: 800; }

.pi-price {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 18px;
}
.price-old {
  font-size: 13px;
  color: var(--app-faint);
  text-decoration: line-through;
  font-weight: 600;
}
.price-new {
  font-size: 28px;
  font-weight: 900;
  color: var(--app-brand-dark);
  line-height: 1;
  white-space: nowrap;
}
.price-new small { font-size: 13px; font-weight: 700; color: var(--app-muted); }
.discount-chip {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 9999px;
}

/* ── کلید سفارش محصول ── */
.pi-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #2563eb, #4f46e5 60%, #7c3aed);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  padding: 15px 34px;
  border-radius: 14px;
  box-shadow: 0 12px 30px -8px rgba(37, 99, 235, .55);
  transition: all .25s;
}
.order-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -8px rgba(37, 99, 235, .65);
}
.order-btn svg { width: 18px; height: 18px; }
.cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid var(--app-line);
  color: #334155;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 24px;
  border-radius: 14px;
  transition: all .25s;
}
.cart-btn:hover {
  border-color: var(--app-brand);
  color: var(--app-brand);
  background: #f5f9ff;
}
.cart-btn svg { width: 17px; height: 17px; }

.trust-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 18px 0 0;
  padding: 0;
}
.trust-row li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--app-muted);
}
.trust-row svg { width: 14px; height: 14px; color: #10b981; flex: none; }

/* ── کارت‌های بخش‌های پایین (توضیحات / مشخصات) ── */
.section-card {
  background: #fff;
  border: 1px solid var(--app-line);
  border-radius: 22px;
  padding: 26px;
  box-shadow: 0 14px 40px -18px rgba(15, 23, 42, .08);
  margin-top: 22px;
}

/* ── صفحه ساده (single-statics) ── */
.iv-page-body { max-width: 860px; margin-inline: auto; }
.iv-page-body-full { max-width: 100%; margin-inline: auto; }
.section-title {
  font-family: var(--app-display);
  font-size: 22px;
  color: #1e3a8a;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--app-line);
  position: relative;
}
.section-title::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1.5px;
  width: 64px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #2563eb, #6366f1);
}

/* ── جدول مشخصات فنی ── */
.specs-wrap { overflow-x: auto; }
.specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.specs-table th,
.specs-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--app-line);
  text-align: right;
  vertical-align: top;
}
.specs-table tr:last-child th,
.specs-table tr:last-child td { border-bottom: 0; }
.specs-table th {
  background: var(--app-soft);
  color: var(--app-ink);
  font-weight: 800;
  width: 220px;
}
.specs-table td { color: #475569; font-weight: 500; }
.specs-table tr:hover td { background: #f8fbff; }

/* ── کلید پیشنمایش محصول ── */
.demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #eef2ff;
  border: 1.5px solid #a5b4fc;
  color: #4338ca;
  font-weight: 800;
  font-size: 14px;
  padding: 13px 24px;
  border-radius: 14px;
  transition: all .25s;
}
.demo-btn:hover {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(99, 102, 241, .55);
}
.demo-play {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  display: grid;
  place-items: center;
}
.demo-btn:hover .demo-play { background: rgba(255, 255, 255, .22); }
.demo-play svg { width: 13px; height: 13px; }

/* ── کلیدهای ویدئو آپارات / یوتیوب ── */
.video-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px dashed var(--app-line);
}
.video-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1.5px solid var(--app-line);
  color: #334155;
  font-weight: 700;
  font-size: 13px;
  padding: 11px 18px;
  border-radius: 12px;
  transition: all .22s;
}
.video-btn svg { width: 19px; height: 19px; flex: none; }
.video-btn-aparat svg { color: #e0203a; }
.video-btn-youtube svg { color: #ff0000; }
.video-btn-aparat:hover {
  border-color: #e0203a;
  background: #fef2f4;
  color: #9f1239;
}
.video-btn-youtube:hover {
  border-color: #ff0000;
  background: #fff7f7;
  color: #b91c1c;
}

/* ── چیدمان توضیحات + سایدبار سفارش ── */
.desc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}
.buy-sidebar { position: sticky; top: 96px; }
.buy-card {
  border: 1px solid var(--app-line);
  border-radius: 18px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 18px 44px -20px rgba(15, 23, 42, .18);
}
.bc-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--app-line); }
.bc-thumb { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; border: 1px solid var(--app-line); flex: none; }
.bc-name { font-weight: 800; font-size: 13px; color: var(--app-ink); line-height: 1.6; }
.bc-rating { margin-top: 4px; color: #f59e0b; font-size: 11.5px; letter-spacing: 1.5px; }
.bc-rating span { color: var(--app-muted); font-weight: 700; letter-spacing: 0; margin-inline-start: 5px; }

/* ── ستاره‌های میانگین با پرکنش جزئی (pi-rating / bc-rating / پیشخوان) ── */
.vahab-avg-stars {
  position: relative;
  display: inline-block;
  color: #e2e8f0;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  vertical-align: middle;
}
.vahab-avg-stars .vahab-avg-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: #f59e0b;
  pointer-events: none;
}
.bc-rating .vahab-avg-stars { color: #e2e8f0; margin-inline-start: 0; letter-spacing: 1.5px; }
.bc-price { margin: 14px 0 4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bc-price-old { color: var(--app-faint); text-decoration: line-through; font-size: 12px; font-weight: 600; }
.bc-price-new { font-family: var(--app-display); font-size: 25px; color: #1e3a8a; line-height: 1.2; }
.bc-price-new small { font-size: 13px; color: var(--app-muted); font-weight: 700; }
.bc-actions { display: grid; gap: 10px; margin-top: 12px; }
.bc-actions .order-btn,
.bc-actions .demo-btn { width: 100%; padding: 12px 18px; font-size: 14px; }
.bc-video { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--app-line); }
.bc-video .video-btn { justify-content: center; font-size: 12.5px; padding: 9px 14px; }
.bc-trust { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.bc-trust li { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--app-muted); }
.bc-trust svg { width: 14px; height: 14px; color: #10b981; flex: none; }

/* ── دکمه شناور سفارش (موبایل) ── */
.order-fab {
  position: fixed;
  bottom: 18px;
  right: 50%;
  transform: translate(50%, 90px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #2563eb, #4f46e5 60%, #7c3aed);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 18px 40px -10px rgba(37, 99, 235, .65);
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .3, 1.1);
}
.order-fab.visible { opacity: 1; pointer-events: auto; transform: translate(50%, 0); }
.order-fab:active { transform: translate(50%, 2px) scale(.97); }
.fab-ic {
  width: 24px; height: 24px;
  flex: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  display: grid;
  place-items: center;
}
.fab-ic svg { width: 13px; height: 13px; }
.fab-label { display: block; line-height: 1.3; }
.fab-price { display: block; font-size: 11px; font-weight: 700; color: #dbeafe; line-height: 1.3; }
@media (min-width: 768px) { .order-fab { display: none; } }
@media (max-width: 1023px) and (min-width: 768px) {
  .desc-grid { grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; }
}
@media (max-width: 767px) {
  .desc-grid { grid-template-columns: 1fr; }
  .buy-sidebar { display: none; }
}

/* ── لایتباکس تصویر تمامصفحه ── */
.gallery-main img { cursor: zoom-in; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 26, .93);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lb-figure { margin: 0; max-width: 92vw; text-align: center; }
.lightbox img {
  max-width: min(92vw, 1080px);
  max-height: 80vh;
  border-radius: 14px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .55);
  transform: scale(.94);
  transition: transform .28s ease;
}
.lightbox.open img { transform: scale(1); }
.lb-caption {
  margin-top: 14px;
  color: #dbeafe;
  font-size: 13.5px;
  font-weight: 600;
}
.lb-close {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 46px; height: 46px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .22s;
}
.lb-close:hover { background: rgba(239, 68, 68, .85); transform: rotate(90deg); }
.lb-close svg { width: 20px; height: 20px; }
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px; height: 50px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .22s;
}
.lb-nav:hover { background: #2563eb; border-color: #2563eb; }
.lb-nav svg { width: 22px; height: 22px; }
.lb-prev { right: 22px; }
.lb-next { left: 22px; }
@media (max-width: 640px) {
  .lb-nav { width: 40px; height: 40px; }
  .lb-prev { right: 8px; }
  .lb-next { left: 8px; }
}

/* ── بخش نظرات ── */
.reviews-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 26px;
  align-items: start;
}
.reviews-summary {
  border: 1px solid var(--app-line);
  border-radius: 18px;
  padding: 22px;
  background: linear-gradient(180deg, #f5f9ff, #fbfdff);
  text-align: center;
  position: sticky;
  top: 100px;
}
.rs-score { font-family: var(--app-display); font-size: 44px; color: #1e3a8a; line-height: 1; }
.rs-stars { color: #f59e0b; font-size: 17px; letter-spacing: 3px; margin: 8px 0 2px; }
.rs-count { color: var(--app-muted); font-size: 12.5px; font-weight: 600; }
.rs-bars { margin: 18px 0 0; display: grid; gap: 7px; text-align: right; }
.rs-bar-row { display: grid; grid-template-columns: 26px 1fr 34px; gap: 10px; align-items: center; font-size: 11.5px; color: var(--app-muted); font-weight: 700; }
.rs-bar {
  height: 8px;
  border-radius: 6px;
  background: #e2e8f0;
  overflow: hidden;
}
.rs-bar span {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.reviews-list { display: grid; gap: 16px; }
.review-card {
  border: 1px solid var(--app-line);
  border-radius: 18px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 10px 28px -18px rgba(15, 23, 42, .12);
}
.rc-head { display: flex; align-items: center; gap: 12px; }
.rc-avatar {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #8b5cf6);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  display: grid;
  place-items: center;
}
.rc-name { font-weight: 800; color: var(--app-ink); font-size: 14px; }
.rc-buyer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 8px;
  border-radius: 999px;
  margin-inline-start: 6px;
}
.rc-buyer svg { width: 11px; height: 11px; }
.rc-date { font-size: 11.5px; color: var(--app-faint); font-weight: 600; margin-top: 2px; }
.rc-stars { color: #f59e0b; font-size: 13px; letter-spacing: 2px; margin-inline-start: auto; }
.rc-stars .off { color: #e2e8f0; }
.rc-text { margin: 12px 0 0; font-size: 13.5px; line-height: 1.9; color: var(--app-body); }
.rc-foot { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rc-helpful {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--app-muted);
  border: 1px solid var(--app-line);
  background: #fafbfc;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all .2s;
}
.rc-helpful:hover, .rc-helpful.liked { color: var(--app-brand); border-color: #bfdbfe; background: #eff6ff; }
.rc-helpful.liked { color: #fff; background: var(--app-brand); border-color: var(--app-brand); }
.rc-helpful svg { width: 13px; height: 13px; }
.rc-reply {
  display: block;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border-right: 4px solid #a5b4fc;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--app-muted);
  text-align: right;
}
.rc-reply b { color: #4338ca; }

/* ── فرم ثبت دیدگاه ── */
.review-form {
  border: 1.5px dashed #c7d2fe;
  border-radius: 18px;
  padding: 22px;
  background: #fbfdff;
  margin-top: 6px;
}
.rf-head {
  font-family: var(--app-display);
  font-size: 17px;
  color: #1e3a8a;
  margin-bottom: 14px;
}
.rf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.review-form input[type="text"],
.review-form textarea {
  width: 100%;
  border: 1.5px solid var(--app-line);
  border-radius: 12px;
  padding: 11px 14px;
  font: inherit;
  font-size: 13.5px;
  color: var(--app-ink);
  background: #fff;
  outline: none;
  transition: all .2s;
}
.review-form textarea { resize: vertical; min-height: 96px; margin-top: 12px; }
.review-form input:focus,
.review-form textarea:focus {
  border-color: var(--app-brand);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .09);
}
.star-picker {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 2px;
  direction: ltr;
}
.star-picker input { position: absolute; opacity: 0; pointer-events: none; }
.star-picker label {
  font-size: 26px;
  line-height: 1;
  color: #e2e8f0;
  cursor: pointer;
  transition: color .15s;
  padding: 0 2px;
}
.star-picker label:hover,
.star-picker label:hover ~ label,
.star-picker input:checked ~ label { color: #f59e0b; }
.star-picker input:checked + label { color: #f59e0b; }
.rf-stars {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--app-muted);
}
.rf-submit {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #2563eb, #4f46e5 60%, #7c3aed);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 12px 28px;
  border-radius: 12px;
  box-shadow: 0 10px 24px -8px rgba(37, 99, 235, .5);
  transition: all .25s;
}
.rf-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(37, 99, 235, .6); }
.rf-success {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rf-success svg { width: 16px; height: 16px; flex: none; }
.rf-success[hidden] { display: none; }
.rf-error { border-color: #fca5a5 !important; }

/* ── خلاصه امتیاز: ستاره‌های جزئی (رفت‌وسیله روی پس‌زمینه) ── */
.rs-stars { position: relative; display: inline-block; direction: ltr; unicode-bidi: isolate; }
.rs-stars .rs-bg { color: #e2e8f0; }
.rs-stars .rs-fill {
  position: absolute;
  top: 0; left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #f59e0b;
  pointer-events: none;
}

/* ── فرم دیدگاه استاندارد وردپرس (داخل .review-form) ── */
.reviews-list .comment-reply-title {
  font-family: var(--app-display);
  font-size: 17px;
  color: #1e3a8a;
  margin: 0 0 14px;
}
.reviews-list #commentform { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reviews-list #commentform p { margin: 0; }
.reviews-list #commentform .comment-form-author { grid-column: 1; }
.reviews-list #commentform .comment-form-email { grid-column: 2; }
.reviews-list #commentform .comment-form-url { display: none; }
.reviews-list #commentform .comment-form-rating,
.reviews-list #commentform .comment-form-comment,
.reviews-list #commentform .comment-form-cookies-consent,
.reviews-list #commentform .form-submit,
.reviews-list .logged-in-as { grid-column: 1 / -1; }
.reviews-list #commentform input[type="text"],
.reviews-list #commentform textarea { width: 100%; }
.reviews-list #commentform .comment-form-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--app-muted);
  margin-top: 2px;
}
.reviews-list #commentform .comment-form-rating label { display: inline-flex; align-items: center; }
.reviews-list #commentform .comment-form-rating .vahab-stars { margin-inline-start: 4px; }
.reviews-list #commentform #submit { border: 0; cursor: pointer; }
.reviews-list .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--app-muted);
}
.reviews-list .logged-in-as { font-size: 12.5px; font-weight: 600; color: var(--app-muted); margin-bottom: 10px !important; }
.reviews-list .must-log-in { font-size: 13px; font-weight: 700; color: var(--app-muted); }

/* ── حالت خالی / اطلاعیه ── */
.reviews-empty {
  border: 1.5px dashed var(--app-line);
  border-radius: 14px;
  padding: 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--app-muted);
  background: #fbfdff;
  text-align: center;
}

/* ── فرم دیدگاه: امتیاز الزامی + نتیجه‌ی ارسال AJAX ── */
.vahab-star-msg {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #dc2626;
  margin-top: 4px;
}
.vahab-star-msg[hidden] { display: none; }
.vahab-stars.required-error .vahab-star { color: #f87171; }

.vahab-comment-result {
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
  margin-top: 12px;
}
.vahab-comment-result[hidden] { display: none; }
.vahab-comment-result.ok {
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}
.vahab-comment-result.error {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.review-form.is-sending { opacity: .65; pointer-events: none; }

/* ── ریسپانسیو ── */
@media (max-width: 640px) {
  .reviews-list #commentform { grid-template-columns: 1fr; }
  .reviews-list #commentform .comment-form-author,
  .reviews-list #commentform .comment-form-email { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
  .pi-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .typo { font-size: 14.5px; }
  .typo h1 { font-size: 26px; }
  .typo h2 { font-size: 22px; }
  .typo h3 { font-size: 18px; }
  .typo dl { grid-template-columns: 1fr; gap: 4px; }
  .typo dt { margin-top: 7px; }

  .product-sheet { padding: 18px; border-radius: 20px; }
  .section-card { padding: 20px; border-radius: 18px; }
  .pi-title { font-size: 22px; }
  .pi-actions { flex-direction: column; }
  .pi-actions a { width: 100%; }
  .gallery-thumb img { height: 60px; }
  .gallery-arrow { width: 34px; height: 34px; }
  .gallery-badge { top: 10px; right: 10px; }
  .specs-table th { width: 130px; }

  /* نظرات در موبایل */
  .reviews-grid { grid-template-columns: 1fr; }
  .reviews-summary { position: static; }
  .rf-row { grid-template-columns: 1fr; }
  .pi-actions a { width: 100% !important; }
  .video-btns { flex-direction: column; }
  .video-btn { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   (۳) صفحه آرشیو محصولات (archive.html)
   تمام استایل‌های این صفحه در همین فایل قرار دارند.
   ════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: 'Vazirmatn', 'Tahoma', sans-serif;
  background: #fff;
  color: #1e293b;
  overflow-x: clip;
}

.container-wide { width: min(1240px, calc(100% - 32px)); margin-inline: auto; }

/* ── Mega Menu (مشترک با index) ── */
/* پنل‌های مگا نسبت به ردیف ناوبری تمام‌عرض می‌شوند (نه نسبت به ستون تریگر) */
.header-nav-row { position: relative; }
.mega-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition: all .25s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.mega-wrap:hover .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Mobile Drawer (مشترک با index) ── */
.mobile-drawer { transform: translateX(105%); transition: transform .3s ease-in-out; }
.mobile-drawer.open { transform: translateX(0); }
.mobile-overlay { opacity: 0; visibility: hidden; transition: .25s ease; }
.mobile-overlay.open { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
.submenu-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.submenu-content.open { max-height: 800px; transition: max-height 0.4s ease-in; }
.accordion-arrow.rotated { transform: rotate(180deg); }

/* ── Header: کوچک‌شدن چسبان هنگام اسکرول (مشترک با index) ── */
.site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.site-header .header-main-row { height: 80px; transition: height .3s ease; }
.site-header .header-nav-row { height: 56px; transition: height .3s ease; }
.site-header.scrolled {
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, .10);
  background-color: rgba(255, 255, 255, .97);
}
.site-header.scrolled .header-main-row { height: 64px; }
.site-header.scrolled .header-nav-row { height: 48px; }

/* ── کارت محصول (نمای مشترک با index.html) ── */
.theme-product-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  transition: all .45s cubic-bezier(.22,1,.36,1);
  position: relative;
  direction: rtl;
  box-shadow:
    0 4px 6px -1px rgba(0,0,0,.02),
    0 10px 20px -5px rgba(0,0,0,.04),
    0 30px 60px -12px rgba(99,102,241,.08);
  border: 1px solid rgba(0,0,0,.04);
}
.theme-product-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow:
    0 8px 12px -2px rgba(0,0,0,.04),
    0 20px 40px -10px rgba(0,0,0,.06),
    0 50px 100px -20px rgba(99,102,241,.15);
  border-color: rgba(99,102,241,.15);
}
.theme-card-img-wrap { position: relative; overflow: hidden; height: 160px; }
.theme-card-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.theme-product-card:hover .theme-card-img-wrap img { transform: scale(1.08); }
.theme-card-img-wrap::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 60%;
  background: linear-gradient(to top, rgba(255,255,255,1) 0%, transparent 100%);
  pointer-events: none;
}
.theme-card-badge {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  padding: 6px 14px; border-radius: 12px; font-size: 11px; font-weight: 800;
  backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.25);
}
/* رنگ‌های بج محصولات (به‌جای استایل inline از جاوااسکریپت) */
.theme-card-badge.badge-blue    { background: rgba(37,99,235,.85);  color: #fff; }
.theme-card-badge.badge-slate   { background: rgba(30,41,59,.85);   color: #e2e8f0; }
.theme-card-badge.badge-emerald { background: rgba(16,185,129,.85); color: #fff; }
.theme-card-badge.badge-violet  { background: rgba(124,58,237,.85); color: #fff; }
.theme-card-badge.badge-sky     { background: rgba(14,165,233,.85); color: #fff; }
.theme-card-badge.badge-orange  { background: rgba(249,115,22,.85); color: #fff; }
.theme-card-badge.badge-purple  { background: rgba(139,92,246,.85); color: #fff; }
.theme-card-badge.badge-amber   { background: rgba(245,158,11,.85); color: #fff; }
.theme-card-badge.badge-red     { background: rgba(239,68,68,.85);  color: #fff; }
.theme-card-badge.badge-green   { background: rgba(5,150,105,.85);  color: #fff; }
.theme-card-badge.badge-indigo  { background: rgba(79,70,229,.9);   color: #fff; }
.theme-card-badge.badge-fuchsia { background: rgba(217,70,239,.9);  color: #fff; }

.theme-card-discount {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  padding: 5px 12px; border-radius: 10px; font-size: 11px; font-weight: 800;
  background: linear-gradient(135deg, #ef4444, #f43f5e); color: #fff;
  box-shadow: 0 4px 12px rgba(239,68,68,.3);
}
.theme-card-body { padding: 16px 20px 4px; }
.theme-card-title { font-size: 14px; font-weight: 800; color: #0f172a; line-height: 1.5; margin-bottom: 4px; }
.theme-card-meta {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: #94a3b8; font-weight: 600;
  margin: 5px 0 7px;
}
.theme-card-meta svg { width: 13px; height: 13px; fill: #fbbf24; }
.theme-card-meta b { color: #f59e0b; font-size: 11px; }
.theme-card-desc { font-size: 11px; color: #64748b; line-height: 1.7; font-weight: 500; }
.theme-card-footer { padding: 10px 20px 20px; display: flex; align-items: center; justify-content: space-between; }
.theme-card-price-old { font-size: 11px; color: #94a3b8; font-weight: 600; text-decoration: line-through; }
.theme-card-price-new { font-size: 16px; font-weight: 900; color: #2563eb; line-height: 1.2; }
.theme-card-price-new-disabled { font-size: 16px; font-weight: 900; color: #a5a6a7; line-height: 1.2; }
.theme-card-price-label { font-size: 10px; color: #94a3b8; font-weight: 600; }
.theme-buy-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 18px; border-radius: 12px; font-size: 11px; font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  box-shadow: 0 4px 12px rgba(59,130,246,.25), 0 12px 28px rgba(59,130,246,.15);
  transition: all .35s cubic-bezier(.22,1,.36,1);
  border: none; text-decoration: none;
}
.theme-buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59,130,246,.35), 0 16px 40px rgba(99,102,241,.2);
  background: linear-gradient(135deg, #2563eb, #4f46e5);
}

/* کارت پویا در صفحه اصلی (پیوندِ کلی کارت به صفحه قالب) */
a.theme-product-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
a.theme-product-card .theme-card-footer {
  justify-content: center;
}
a.theme-product-card .theme-card-title { color: #0f172a; }
a.theme-product-card:hover .theme-card-title { color: #2563eb; }

/* ── محصولات ناموجود (غیرقابل سفارش) ── */
.theme-product-card.soldout:hover {
  transform: none;
  box-shadow:
    0 4px 6px -1px rgba(0,0,0,.02),
    0 10px 20px -5px rgba(0,0,0,.04),
    0 30px 60px -12px rgba(99,102,241,.08);
  border-color: rgba(0,0,0,.04);
}
.theme-product-card.soldout .theme-card-img-wrap img {
  filter: grayscale(1) brightness(.92);
  opacity: .5;
}
.theme-product-card.soldout .theme-card-img-wrap::after {
  background: linear-gradient(to top, rgba(255,255,255,.94) 0%, rgba(255,255,255,.25) 100%);
}
.soldout-tag {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  pointer-events: none;
}
.soldout-tag span {
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(15,23,42,.78);
  color: #fff;
  font-size: 12.5px; font-weight: 800;
  border: 1.5px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 24px rgba(15,23,42,.35);
  backdrop-filter: blur(6px);
}
.theme-product-card.soldout .theme-card-body { opacity: .62; }
.theme-product-card.soldout .theme-card-title { color: #64748b; }
.soldout-btn {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none;
}
.soldout-btn svg { opacity: .7; }

/* کارت‌های هم‌ارتفاع آرشیو */
.archive-card { display: flex; flex-direction: column; }
.archive-card .theme-card-body { flex: 1; padding-bottom: 14px; }
.archive-card .theme-card-footer {
  border-top: 1px dashed rgba(99,102,241,.22);
  padding-top: 12px;
}

/* ── آرشیو مجله (mag) ── */
.mag-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 18px;
}
.mag-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: #475569;
  background: #fff; border: 1px solid var(--app-line);
  transition: all .25s ease;
}
.mag-chip:hover { color: #2563eb; border-color: #bfdbfe; background: #eff6ff; }
.mag-chip.active {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(59,130,246,.35);
}
.mag-chip-count {
  font-size: 10.5px; font-weight: 800;
  background: #eef2ff; color: #4f46e5;
  padding: 2px 8px; border-radius: 999px;
}
.mag-chip.active .mag-chip-count { background: rgba(255,255,255,.25); color: #fff; }
.mag-card .theme-card-img-wrap { height: 190px; }
.mag-card-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: #94a3b8; font-weight: 600;
  margin: 6px 0 8px;
}
.mag-card-meta svg { width: 13px; height: 13px; }
.mag-card-dot { width: 3px; height: 3px; border-radius: 50%; background: #cbd5e1; }

/* ── تک‌مطلب مجله (single-mag) ── */
.mag-post-head { padding-bottom: 26px; }
.mag-post-cat a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; color: #1d4ed8;
  background: #fff; border: 1px solid #dbeafe;
  box-shadow: 0 4px 12px rgba(37,99,235,.08);
  text-decoration: none;
  transition: all .25s ease;
}
.mag-post-cat a:hover { background: #eff6ff; border-color: #93c5fd; }
.mag-post-head h1 { margin-top: 14px; font-size: 32px; }
.mag-post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 16px; font-size: 12px; color: #64748b; font-weight: 600;
}
.mag-post-meta span { display: inline-flex; align-items: center; gap: 6px; }
.mag-post-meta svg { width: 14px; height: 14px; color: #94a3b8; }
.mag-post-cover { margin-top: 22px; }
.mag-post-cover img {
  width: 100%; max-height: 430px; object-fit: cover;
  border-radius: 22px;
  border: 1px solid var(--app-line);
  box-shadow: 0 14px 40px -18px rgba(15,23,42,.12);
}

/* ── مستندات (docs) ── */
.docs-layout {
  display: grid;
  grid-template-columns: 292px minmax(0,1fr);
  gap: 26px;
  align-items: start;
  margin: 26px 0 8px;
}
.docs-side {
  position: sticky; top: 104px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 22px;
  padding: 8px 18px 18px;
  box-shadow: 0 10px 30px rgba(15,23,42,.05);
}
.side-box{
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 22px;
  padding: 8px 18px 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}
.docs-nav-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; color: #0f172a;
  text-decoration: none;
  transition: color .2s;
  padding: 4px 2px;
}
.docs-nav-title .mag-side-cat-count { margin-inline-start: auto; }
.docs-nav-title:hover { color: #2563eb; }
.docs-nav-title.active { color: #2563eb; }
.side-group.is-active {
  border-bottom: 1px dashed #e2e8f0;
  padding: 15px 2px;
}
.docs-nav-link {
  display: block;
  padding: 6px 12px; margin: 2px 0;
  border-radius: 10px;
  font-size: 12px; font-weight: 600; color: #475569;
  border-right: 3px solid transparent;
  text-decoration: none;
  transition: all .15s;
}
.docs-nav-link:hover {
  color: #2563eb; background: #eff6ff;
  border-right-color: #93c5fd;
}
.docs-nav-link.active {
  color: #2563eb; background: #eff6ff;
  border-right-color: #2563eb; font-weight: 700;
}
.docs-article, .docs-section { scroll-margin-top: 120px; }
.docs-article-head {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px dashed var(--app-line);
  position: relative;
}
.docs-article-head h2 {
  font-family: var(--app-display);
  font-size: 21px; color: #1e3a8a; margin: 0;
}
.docs-article-head::after {
  content: ''; position: absolute; right: 0; bottom: -1.5px;
  width: 64px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #2563eb, #6366f1);
}
.docs-date {
  font-size: 11px; font-weight: 700; color: #1d4ed8;
  background: #eff6ff; border: 1px solid #dbeafe;
  padding: 4px 12px; border-radius: 999px;
}
.docs-section { margin-top: 26px; }
.docs-subtitle {
  font-size: 16.5px; font-weight: 800; color: #0f172a;
  margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.docs-subtitle::before {
  content: ""; width: 5px; height: 14px; border-radius: 3px;
  background: linear-gradient(180deg, #3b82f6, #6366f1);
}
/* دکمه‌های بوت‌استرپی داخل متن مستندات → استایل قالب */
.docs-content .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin: 4px 0; padding: 9px 18px;
  border-radius: 12px; border: none;
  font-family: inherit; font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  box-shadow: 0 6px 16px rgba(59,130,246,.3);
  text-decoration: none; cursor: pointer; transition: all .25s;
}
.docs-content .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59,130,246,.4);
}
@media (max-width: 1023px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-side { position: static; }
}

/* ── سربرگ صفحه آرشیو ──
   باکس عنوان دقیقاً همراستا با چیدمان سایدبار + لیست محصولات است
   (بدون حاشیه منفی؛ عرض برابر container-wide). */
.archive-head {
  background:
    radial-gradient(circle at 15% 20%, rgba(99,102,241,.12), transparent 34%),
    radial-gradient(circle at 85% 30%, rgba(59,130,246,.12), transparent 32%),
    linear-gradient(180deg, #eef4ff 0%, #f8faff 100%);
  border-bottom: 1px solid rgba(255,255,255,.6);
  border-radius: 16px;
  margin-top: -6px;
  padding: 30px 24px 34px;
}
.archive-head h1 {
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-size: 30px; font-weight: 800; color: #0f172a; line-height: 1.4;
}
.archive-head h1 span.accent { color: #2563eb; }
.archive-head .sub { margin-top: 8px; font-size: 13px; color: #64748b; font-weight: 500; line-height: 1.9; }
.archive-head .chip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  padding: 6px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
  background: #fff; border: 1px solid #dbeafe; color: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37,99,235,.08);
}

/* ── چیدمان: سایدبار (راست در RTL) + لیست ── */
.archive-layout {
  display: grid;
  grid-template-columns: 292px minmax(0,1fr);
  gap: 26px;
  align-items: start;
  margin: 26px 0 8px;
}

/* ── سایدبار فیلترها ── */
.archive-side {
  position: sticky; top: 104px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 22px;
  padding: 8px 18px 18px;
  box-shadow: 0 10px 30px rgba(15,23,42,.05);
}
.side-box { border-top: 1px solid #e2e8f0; margin-top: 10px; padding-top: 6px; }

/* ── لیست زیبای محصولات ── */
.simple-product-list {
  list-style: none; margin: 0; padding: 0;
  counter-reset: product-counter;
}
.simple-product-list li {
  counter-increment: product-counter;
  position: relative;
  border-bottom: 1px solid rgba(15,23,42,.05);
  transition: background .2s;
}
.simple-product-list li:last-child { border-bottom: none; }
.simple-product-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 35px 14px 54px;
  font-size: 14px; font-weight: 600; color: #334155;
  text-decoration: none;
  border-radius: 12px;
  position: relative;
  transition: all .2s;
}
.simple-product-list a::before {
  content: counter(product-counter);
  position: absolute; right: 0px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #94a3b8;
  background: #f1f5f9; border-radius: 8px;
  transition: all .2s;
}
.simple-product-list a:hover {
  color: #1e40af; background: #f8fafc;
}
.simple-product-list a:hover::before {
  background: linear-gradient(135deg, #2563eb, #6366f1);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37,99,235,.25);
}
.simple-product-list li:first-child a { border-radius: 14px 14px 12px 12px; }
.simple-product-list li:last-child a { border-radius: 12px 12px 14px 14px; }

/* ── نشان وضعیت محصول ── */
.pl-title { flex: 1; min-width: 0; }
.pl-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
.pl-dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.pl-status.active {
  color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0;
}
.pl-status.active .pl-dot { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.4); }
.pl-status.stopped {
  color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca;
}
.pl-status.stopped .pl-dot { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,.4); }

/* ── نوار فیلتر وضعیت ── */
.product-filter-bar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 20px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #64748b;
  background: #fff; border: 1.5px solid #e2e8f0;
  text-decoration: none;
  transition: all .2s;
}
.filter-chip:hover {
  color: #2563eb; border-color: #93c5fd; background: #eff6ff;
}
.filter-chip.active {
  color: #fff; border-color: #2563eb;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  box-shadow: 0 4px 14px rgba(37,99,235,.3);
}

.side-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 800; color: #0f172a;
  padding: 14px 2px 4px; margin-bottom: 6px;
}
.side-title svg { width: 18px; height: 18px; color: #2563eb; }
.side-group { border-bottom: 1px dashed #e2e8f0; padding: 15px 2px; }
.side-group:last-of-type { border-bottom: none; }
.side-group-title {
  font-size: 12.5px; font-weight: 800; color: #0f172a; margin-bottom: 11px;
  display: flex; align-items: center; gap: 8px;
}
.side-group-title::before {
  content: ""; width: 6px; height: 15px; border-radius: 4px;
  background: linear-gradient(180deg, #3b82f6, #6366f1);
}
.side-group-body { display: flex; flex-direction: column; gap: 4px; }

/* ── درخت دسته‌بندی (سایدبار جستجو) ── */
.cat-branch { position: relative; }
/* خط راهنمای شاخه برای سطوح زیردسته */
.side-group-body .side-group-body {
  margin-right: 14px;
  padding-right: 12px;
  border-right: 1px dashed #dbeafe;
}
.cat-branch .docs-nav-link { padding-right: 10px; }
/* سطح سوم و عمیق‌تر: فرورفتگی و رنگ ملایم‌تر */
.cat-branch-deep .docs-nav-link {
  font-size: 11.5px; color: #64748b; padding-right: 18px;
}
.cat-branch-deep .docs-nav-link:hover { color: #2563eb; background: #eff6ff; }
.cat-branch-deep .mag-side-cat-count { font-size: 10px; }

.side-field { position: relative; }
.side-field svg {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: #94a3b8; pointer-events: none;
}
.side-field input[type="search"] {
  width: 100%; height: 42px; border-radius: 12px;
  border: 1px solid #e2e8f0; background: #f8fafc;
  padding: 0 38px 0 48px; font-size: 12.5px; color: #0f172a;
  outline: none; transition: .2s;
}
.side-field input[type="search"]:focus {
  border-color: #93c5fd; background: #fff;
  box-shadow: 0 0 0 4px rgba(59,130,246,.08);
}
.side-field .side-search-btn {
  position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 9px; border: none;
  background: #2563eb; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; transition: .2s;
}
.side-field .side-search-btn:hover { background: #1d4ed8; }
.side-field .side-search-btn:active { transform: translateY(-50%) scale(.95); }
.side-field .side-search-btn svg {
  position: static; transform: none; width: 15px; height: 15px;
  color: inherit; pointer-events: none;
}

.filter-radio, .filter-check {
  display: flex; align-items: center; gap: 9px;
  padding: 8.5px 11px; border-radius: 12px; border: 1px solid transparent;
  font-size: 12.5px; font-weight: 600; color: #475569;
  cursor: pointer; transition: .15s;
}
.filter-radio:hover, .filter-check:hover { background: #f1f5f9; }
.filter-radio:has(input:checked), .filter-check:has(input:checked) {
  background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8;
}
.filter-radio input, .filter-check input {
  accent-color: #2563eb; width: 15px; height: 15px; margin: 0; cursor: pointer; flex-shrink: 0;
}
.filter-count { margin-inline-start: auto; font-size: 10.5px; font-weight: 700; color: #94a3b8; }
.filter-radio:has(input:checked) .filter-count, .filter-check:has(input:checked) .filter-count { color: #3b82f6; }

/* ── چیپ‌های تگ (کنارهم با #) — رادیوی مخفی هویت انتخاب را نگه می‌دارد ── */
.tag-chips {
  display: flex; flex-wrap: wrap; gap: 7px;
}
.tag-chip {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  padding: 5.5px 12px; border-radius: 999px;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  font-size: 12px; font-weight: 600; color: #475569;
  cursor: pointer; user-select: none; transition: .15s;
}
.tag-chip:hover { background: #e2e8f0; border-color: #cbd5e1; color: #1e293b; }
.tag-chip input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.tag-chip:focus-within { outline: 2px solid #93c5fd; outline-offset: 2px; }
.tag-chip:has(input:checked) {
  background: #2563eb; border-color: #2563eb; color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, .35);
}
.tag-chip:has(input:checked):hover { background: #1d4ed8; border-color: #1d4ed8; }
.tag-chip-count { font-size: 10px; font-weight: 700; color: #94a3b8; }
.tag-chip:has(input:checked) .tag-chip-count { color: #bfdbfe; }

/* ── زیردسته‌ها (درخت تو در تو زیر دسته‌ها) ── */
.filter-subcats {
  display: flex; flex-direction: column; gap: 2px;
  margin: 2px 16px 8px 0;
  padding-inline-start: 8px;
  border-inline-start: 1px dashed #e2e8f0;
}
.filter-subcat {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 10px; border: 1px solid transparent;
  font-size: 11.5px; font-weight: 600; color: #64748b;
  cursor: pointer; transition: .15s;
}
.filter-subcat:hover { background: #f1f5f9; }
.filter-subcat:has(input:checked) {
  background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8;
}
.filter-subcat input {
  accent-color: #2563eb; width: 14px; height: 14px; margin: 0; cursor: pointer; flex-shrink: 0;
}
.filter-subcat .filter-count { margin-inline-start: auto; font-size: 10px; }
.filter-subcat:has(input:checked) .filter-count { color: #3b82f6; }

.reset-filters {
  width: 100%; height: 40px; margin-top: 6px;
  border-radius: 12px; border: 1px dashed #cbd5e1; background: #f8fafc;
  color: #475569; font-size: 12px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; transition: .2s;
}
.reset-filters:hover { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
.reset-filters svg { width: 14px; height: 14px; }

/* ── نوار ابزار ── */
.archive-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #fff; border: 1px solid rgba(15,23,42,.06); border-radius: 18px;
  padding: 12px 16px; margin-bottom: 22px;
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
}
.result-count { font-size: 12.5px; font-weight: 700; color: #475569; display: flex; align-items: center; gap: 8px; }
.result-count b { color: #2563eb; }
.sort-box { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #475569; }
.sort-box select {
  height: 38px; border-radius: 11px; border: 1px solid #e2e8f0; background: #f8fafc;
  padding: 0 10px; font-size: 12px; font-weight: 700; color: #0f172a;
  outline: none; cursor: pointer; font-family: inherit;
}
.filter-toggle { display: none; }

/* ── حالت خالی ── */
.archive-empty {
  display: none; text-align: center; padding: 60px 20px;
  border: 1px dashed #cbd5e1; border-radius: 20px; background: #fff;
}
.archive-empty.show { display: block; }
.archive-empty .ae-ic {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 18px;
  background: #f1f5f9; color: #94a3b8;
  display: grid; place-items: center;
}
.archive-empty .ae-ic svg { width: 26px; height: 26px; }
.archive-empty p { font-weight: 800; color: #0f172a; margin-top: 16px; font-size: 14px; }
.archive-empty span { font-size: 12px; color: #94a3b8; display: block; margin-top: 6px; }
.archive-empty button {
  margin-top: 18px; height: 40px; padding: 0 22px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff;
  font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit;
  box-shadow: 0 6px 16px rgba(59,130,246,.3); transition: .2s;
}
.archive-empty button:hover { transform: translateY(-2px); }

/* ── صفحه‌بندی ── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 30px; flex-wrap: wrap; }
.page-link,
.page-numbers {
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 12px;
  border: 1px solid #bfdbfe; background: #fff; color: #1d4ed8;
  font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transition: .15s; text-decoration: none; cursor: pointer;
  font-family: inherit;
}
.page-link:hover,
a.page-numbers:hover {
  border-color: #60a5fa; color: #1d4ed8; background: #eff6ff; transform: translateY(-1px);
}
.page-link.active,
.page-numbers.current {
  background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff;
  border-color: transparent; box-shadow: 0 6px 16px rgba(59,130,246,.3);
}
.page-link.disabled,
.page-numbers.disabled {
  opacity: .4; pointer-events: none;
}
.page-numbers.dots {
  min-width: auto; height: auto; border: none; background: none;
  color: #94a3b8; padding: 0 4px; pointer-events: none;
}
.pagination .pg-dots { color: #94a3b8; font-size: 13px; font-weight: 700; padding: 0 4px; }
.page-link .pg-arrow { width: 15px; height: 15px; }
.page-link .pg-arrow.prev { transform: rotate(180deg); }

/* ── فوتر آرشیو ── */
.footer-shadow { box-shadow: 0 -8px 30px rgba(0,0,0,.06), 0 -2px 8px rgba(0,0,0,.03); }
.footer-top-bg { background: linear-gradient(180deg, #f8faff 0%, #ffffff 30%); }
.footer-pattern {
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2736%27 height=%2736%27 viewBox=%270 0 36 36%27%3E%3Cpath d=%27M18 2 L22.5 12.5 L34 18 L23.5 22.5 L18 34 L13.5 23.5 L2 18 L12.5 13.5 Z%27 fill=%27%236366f1%27 fill-opacity=%270.04%27/%3E%3C/svg%3E');
  background-size: 36px 36px;
}
.footer-cta {
  background: linear-gradient(120deg, #1e3a8a 0%, #2563eb 48%, #4f46e5 100%);
  box-shadow: 0 24px 50px -12px rgba(37,99,235,.45);
}
.footer-cta-pattern {
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2736%27 height=%2736%27 viewBox=%270 0 36 36%27%3E%3Cpath d=%27M18 2 L22.5 12.5 L34 18 L23.5 22.5 L18 34 L13.5 23.5 L2 18 L12.5 13.5 Z%27 fill=%27%23ffffff%27 fill-opacity=%270.06%27/%3E%3C/svg%3E');
  background-size: 36px 36px;
}

/* ── ریسپانسیو ── */
@media (max-width: 1023px) {
  .archive-layout { grid-template-columns: 1fr; }
  .archive-side { position: static; display: none; }
  .archive-side.open { display: block; }
  .filter-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 14px; border-radius: 11px;
    border: 1px solid #dbeafe; background: #eff6ff; color: #1d4ed8;
    font-size: 12px; font-weight: 800; cursor: pointer;
  }
  .filter-toggle svg { width: 15px; height: 15px; }
}
@media (max-width: 640px) {
  .archive-head { padding-inline: 16px; }
  .archive-head h1 { font-size: 24px; }
  .archive-toolbar { padding: 12px; }
  .theme-card-img-wrap { height: 150px; }
  #archiveGrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  #archiveGrid { grid-template-columns: 1fr; padding-inline: 4px; }
}

/* ════════════════════════════════════════════════════════════
   صفحه: محصول ناموجود (soldout.html — صفحه تک‌محصول به سبک product.html)
   تمام استایل‌های مخصوص وضعیت «ناموجود» در همین بخش است؛ بدون style inline.
   ════════════════════════════════════════════════════════════ */

/* بج «ناموجود» در نوار وضعیت محصول */
.pi-badge-soldout {
  background: #fff1f2;
  color: #e11d48;
  border: 1px solid #fecdd3;
  box-shadow: none;
}

/* گالری محصول غیرفعال — placeholder به‌جای تصویر محصول */
.gallery-soldout-media {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 30px 24px;
  background:
    radial-gradient(circle at 18% 12%, rgba(148, 163, 184, .12), transparent 52%),
    radial-gradient(circle at 85% 88%, rgba(100, 116, 139, .10), transparent 48%),
    linear-gradient(180deg, #f8fafc, #f1f5f9);
}
.gallery-soldout-media svg { width: 110px; height: 110px; }
.gallery-soldout-media strong { font-size: 15px; color: #64748b; margin-top: 12px; }
.gallery-soldout-media span {
  font-size: 12px; color: #94a3b8; font-weight: 500; line-height: 1.8;
  text-align: center; max-width: 260px;
}

/* بندانگشتی وضعیت در سایدبار — placeholder به‌جای عکس محصول */
.bc-thumb-soldout {
  display: grid !important;
  place-items: center;
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0 !important;
}
.bc-thumb-soldout svg { width: 26px; height: 26px; }

/* دکمه سفارش غیرفعال (جایگزین دکمه خرید) — هم در pi-actions هم در سایدبار */
.soldout-order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none;
  font-family: inherit;
}

/* نوار اطلاع‌رسانی زیر دکمه در اطلاعات محصول */
.pi-soldout-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff7ed, #fffbeb);
  border: 1px dashed #fcd34d;
}
.pi-soldout-note svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: #d97706;
  margin-top: 2px;
}
.pi-soldout-note b { display: block; font-size: 13px; color: #78350f; }
.pi-soldout-note p { margin-top: 4px; font-size: 12.5px; color: #92400e; font-weight: 500; line-height: 1.9; }

/* یادداشت کوتاه داخل سایدبار وضعیت */
.so-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px dashed #fdba74;
  color: #9a3412;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.9;
}

/* نوار درصد امتیازها — بدون استایل inline */
.fill-76 { width: 76%; }
.fill-17 { width: 17%; }
.fill-5  { width: 5%; }
.fill-1  { width: 1%; }

/* ریسپانسیو */
@media (max-width: 640px) {
  .pi-actions .soldout-order-btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════
   بخش انتهای صفحه آرشیو: توضیحات دسته + لینک محصولات مشابه (archive.html)
   محتوای بخش با JS از وضعیت فیلتر (دسته فعال) پر می‌شود.
   ════════════════════════════════════════════════════════════ */
.cat-info {
  margin-top: 30px;
  padding: 26px 28px;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.cat-info-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
}
.cat-info-title::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(180deg, #2563eb, #4f46e5);
}
.cat-info-text {
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 2;
  color: #475569;
}
.cat-info-sim {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed #cbd5e1;
}
.cat-info-sub {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 800;
  color: #334155;
}
.cat-info-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cat-info-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.cat-info-links a:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1e40af;
}
.cat-info-links svg {
  width: 13px;
  height: 13px;
}
@media (max-width: 640px) {
  .cat-info { padding: 20px 16px; }
  .cat-info-links a { flex: 1 1 auto; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   صفحه: دانلود آخرین نسخه WHMCS (whmcs.html)
   سرویس اشتراکی: پکیج‌های ماهانه / سه ماهه / شش ماهه + لیست نسخه‌ها + توضیحات
   تمام استایل‌های اختصاصی این صفحه در همین بخش است؛ بدون style inline.
   ════════════════════════════════════════════════════════════ */
.wm-head {
  background:
    radial-gradient(circle at 15% 20%, rgba(99,102,241,.12), transparent 34%),
    radial-gradient(circle at 85% 30%, rgba(59,130,246,.12), transparent 32%),
    linear-gradient(180deg, #eef4ff 0%, #f8faff 100%);
  border-bottom: 1px solid rgba(255,255,255,.6);
  border-radius: 16px;
  margin-top: -6px;
  padding: 30px 24px 26px;
}
.wm-head h1 {
  font-family: var(--app-display);
  font-size: 30px; font-weight: 800; color: #0f172a; line-height: 1.4;
}
.wm-head h1 .accent { color: #2563eb; }
.wm-head .sub { margin-top: 8px; font-size: 13px; color: #64748b; font-weight: 500; line-height: 1.9; max-width: 780px; }
.wm-head .sub strong { color: #0f172a; font-weight: 800; }
.wm-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wm-head .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
  background: #fff; box-shadow: 0 4px 12px rgba(37,99,235,.08);
}
.chip-nulled { border: 1px solid #fecdd3; color: #be123c; }
.chip-fa { border: 1px solid #fde68a; color: #b45309; }
.chip-rtl { border: 1px solid #dbeafe; color: #1d4ed8; }

/* ── بخش سفارش و خرید ── */
.wm-buy {
  margin: 26px 0 30px;
  padding: 26px 28px;
  border-radius: 20px;
  border: 1px solid var(--app-line);
  background: #fff;
  box-shadow: 0 10px 30px rgba(15,23,42,.05);
}
.wm-buy-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 800; color: #0f172a;
}
.wm-buy-title::before {
  content: ''; flex-shrink: 0;
  width: 5px; height: 20px; border-radius: 6px;
  background: linear-gradient(180deg, #2563eb, #4f46e5);
}
.wm-buy-note { margin-top: 8px; font-size: 13px; color: var(--app-muted); font-weight: 500; line-height: 1.9; }

.wm-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.wm-plan {
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  padding: 18px 16px 16px;
  border-radius: 16px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.wm-plan:hover { border-color: #bfdbfe; background: #f0f7ff; }
.wm-plan.selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.wm-plan input { position: absolute; opacity: 0; pointer-events: none; }
.wm-plan-badge {
  position: absolute; top: -10px; right: 14px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
  background: linear-gradient(90deg, #2563eb, #4f46e5); color: #fff;
  box-shadow: 0 4px 10px rgba(37,99,235,.25);
}
.wm-plan-badge.green { background: linear-gradient(90deg, #059669, #10b981); box-shadow: 0 4px 10px rgba(5,150,105,.25); }
.wm-plan-name { font-size: 14px; font-weight: 800; color: #0f172a; }
.wm-plan-price {
  font-size: 22px; font-weight: 900; color: #1d4ed8;
  font-family: var(--app-display); line-height: 1.3;
}
.wm-plan-unit { font-size: 11.5px; color: var(--app-muted); font-weight: 700; }
.wm-plan-note { margin-top: 4px; font-size: 11px; color: var(--app-faint); font-weight: 600; line-height: 1.8; }

.wm-order {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.wm-order-label { font-size: 12.5px; color: var(--app-muted); font-weight: 700; }
.wm-order-plan { font-size: 14px; font-weight: 900; color: #0f172a; margin-inline-start: 6px; }
.wm-order-price { font-size: 16px; font-weight: 900; color: #2563eb; margin-inline-start: 10px; }
.wm-order-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px;
  border-radius: 12px;
  font-size: 13.5px; font-weight: 800;
  text-decoration: none;
  transition: transform .15s, box-shadow .2s, background .2s, filter .2s;
}
.wm-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.wm-btn-primary {
  background: linear-gradient(90deg, #2563eb, #4f46e5); color: #fff;
  box-shadow: 0 10px 22px -8px rgba(37,99,235,.5);
}
.wm-btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.wm-btn-ghost { background: #fff; border: 1.5px solid #dbeafe; color: #1d4ed8; }
.wm-btn-ghost:hover { background: #eff6ff; }

.wm-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 16px 0 0; padding: 0; }
.wm-trust li {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: #475569;
}
.wm-trust li::before {
  content: ''; flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}

/* ── لیست نسخه‌های ارائه‌شده ── */
.wm-versions-note { margin-top: 6px; font-size: 12.5px; color: var(--app-muted); font-weight: 500; line-height: 1.9; }
.wm-versions {
  list-style: none; margin: 16px 0 0; padding: 0;
  border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden;
}
.wm-ver {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid #f1f5f9;
  transition: background .15s;
}
.wm-ver:last-child { border-bottom: none; }
.wm-ver:hover { background: #f0f7ff; }
.wm-ver-code {
  flex-shrink: 0;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 11.5px; font-weight: 800; letter-spacing: .3px;
  padding: 4px 10px; border-radius: 8px;
  background: #1e293b; color: #e2e8f0;
}
.wm-ver-name { flex: 1; font-size: 13.5px; font-weight: 700; color: #0f172a; }
.wm-ver-chip {
  flex-shrink: 0;
  font-size: 10.5px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px;
  background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0;
}
.wm-ver-chip-latest { background: #d1fae5; color: #047857; border-color: #a7f3d0; }
.wm-ver-chip-stable { background: #eff6ff; color: #1d4ed8; border-color: #dbeafe; }

/* ── ریسپانسیو صفحه WHMCS ── */
@media (max-width: 820px) {
  .wm-plans { grid-template-columns: 1fr; }
  .wm-order { flex-direction: column; align-items: stretch; }
  .wm-order-actions .wm-btn { flex: 1; }
}
@media (max-width: 640px) {
  .wm-head { padding: 24px 16px 22px; }
  .wm-head h1 { font-size: 23px; }
  .wm-buy { padding: 20px 16px; }
  .wm-ver { flex-wrap: wrap; gap: 8px 12px; }
  .wm-ver-name { flex: 1 1 100%; order: 3; }
}

/* ═══════════════ صفحه نصب و کانفیگ WHMCS (install.html) ═══════════════ */

/* ── سربرگ (هیرو سفید دوستونه: متن راست + ماکت WHMCS) ── */
.iv-hero {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 30px;
  align-items: center;
  margin: 26px 0 0;
  padding: 34px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--app-border, rgba(15,23,42,.08));
  box-shadow: 0 18px 40px -24px rgba(15,23,42,.25);
}
.iv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.iv-chips .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800;
  background: #eef2ff;
  border: 1px solid #e0e7ff;
  color: #4338ca;
}
.iv-chips .chip::before { content: '✦'; font-size: 10px; color: #6366f1; }
.iv-hero h1 {
  font-family: var(--app-display);
  font-size: 34px; font-weight: 800;
  color: #0f172a; line-height: 1.4; margin: 0;
}
.iv-hero h1 .accent { color: #2563eb; }
.iv-hero .sub {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--app-muted, #64748b); font-weight: 500; line-height: 2; max-width: 620px;
}
.iv-hero .sub strong { color: #0f172a; font-weight: 800; }
.iv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.iv-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 14px;
  font-size: 14px; font-weight: 800;
  transition: .2s; text-decoration: none;
}
.iv-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.iv-btn-prime {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff; box-shadow: 0 14px 26px -12px rgba(37,99,235,.6);
}
.iv-btn-prime:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(37,99,235,.7); }
.iv-btn-ghost {
  background: #fff; color: #334155;
  border: 1px solid #e2e8f0;
}
.iv-btn-ghost:hover { border-color: #c7d2fe; color: #4338ca; transform: translateY(-2px); }

/* ── ماکت داشبورد WHMCS ── */
.iv-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 8px;
}
.iv-art-window {
  position: relative; z-index: 1;
  width: 100%;
  max-width: 430px;
  border-radius: 18px;
  background: #0f172a;
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 30px 60px -28px rgba(15,23,42,.55);
  overflow: hidden;
}
.iv-art-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: #1e293b;
  border-bottom: 1px solid rgba(148,163,184,.15);
}
.iv-art-tab {
  font-size: 9.5px; font-weight: 800; color: #94a3b8;
}
.iv-art-body { display: flex; min-height: 170px; }
.iv-art-side {
  width: 46px; flex-shrink: 0;
  background: #111c31;
  border-left: 1px solid rgba(148,163,184,.12);
  display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 0;
}
.iv-art-side-item { width: 20px; height: 20px; border-radius: 7px; background: #263449; }
.iv-art-side-item.active {
  background: linear-gradient(135deg, #2563eb, #6366f1);
  box-shadow: 0 6px 12px -4px rgba(99,102,241,.6);
}
.iv-art-main { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.iv-art-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.iv-art-kpi {
  background: #16233f; border-radius: 10px; padding: 9px 8px;
  text-align: center;
}
.iv-art-kpi b { display: block; font-size: 11px; font-weight: 800; color: #e2e8f0; }
.iv-art-kpi span { font-size: 8.5px; font-weight: 600; color: #7c8db5; }
.iv-art-chart {
  flex: 1;
  background: #16233f; border-radius: 10px;
  display: flex; align-items: flex-end; gap: 6px;
  padding: 10px 10px 8px;
  min-height: 62px;
}
.iv-art-chart i {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
}
.iv-art-badge {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  box-shadow: 0 16px 30px -14px rgba(15,23,42,.35);
  animation: iv-float 5s ease-in-out infinite;
}
.iv-art-badge svg { width: 15px; height: 15px; color: #2563eb; }
.iv-art-badge.b1 { top: 5%; right: 5%; }
.iv-art-badge.b2 { bottom: 7%; left: 5%; animation-delay: 1.6s; }
@keyframes iv-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* ── کارت ویدیوی بزرگ (پلیر + کلیدها) ── */
.iv-video { position: relative; }
.iv-video .section-title { margin-bottom: 18px; }
.iv-video-box {

  width: 100%;

  margin: 0 auto;
  aspect-ratio: 16 / 9;
  padding: 0px;
  text-align: center;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 12% -10%, rgba(59,130,246,.32), transparent 46%),
    radial-gradient(120% 120% at 100% 110%, rgba(99,102,241,.3), transparent 46%),
    linear-gradient(145deg, #0b1220 0%, #101c33 60%, #14274d 100%);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 30px 60px -28px rgba(15,23,42,.6);
  color: #fff;
}
.iv-video-chip {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: #fff;
  background: rgba(37,99,235,.92);
  box-shadow: 0 8px 18px -8px rgba(37,99,235,.6);
  pointer-events: none;
}
.iv-video-chip::before { content: '●'; font-size: 8px; color: #fbbf24; }
.iv-video-play {
  position: relative;
  width: 82px; height: 82px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: #1d4ed8; border: none; cursor: pointer;
  box-shadow: 0 16px 34px -12px rgba(0,0,0,.55);
  transition: .2s;
}
.iv-video-play::before,
.iv-video-play::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  animation: iv-pulse 2.4s ease-out infinite;
}
.iv-video-play::after { animation-delay: 1.2s; }
@keyframes iv-pulse {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.9); opacity: 0; }
}
.iv-video-play:hover { transform: scale(1.06); }
.iv-video-play svg { width: 32px; height: 32px; margin-right: -3px; }
.iv-video-caption p { font-size: 16px; font-weight: 800; color: #fff; margin: 0; }
.iv-video-caption small { font-size: 11.5px; color: #94a3b8; font-weight: 600; }
.iv-video-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 5px;
  background: rgba(148,163,184,.18);
}
.iv-video-progress::after {
  content: '';
  position: absolute; top: 0; bottom: 0; right: 0;
  width: 58%;
  background: linear-gradient(90deg, #2563eb, #6366f1);
}
.iv-video-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}
.iv-vlink {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 24px; border-radius: 14px;
  font-size: 13.5px; font-weight: 800; color: #fff;
  text-decoration: none;
  transition: .2s;
  box-shadow: 0 12px 24px -12px rgba(15,23,42,.4);
}
.iv-vlink svg { width: 20px; height: 20px; flex-shrink: 0; }
.iv-vlink-yt { background: #FF0000; }
.iv-vlink-yt:hover { background: #d40000; transform: translateY(-2px); }
.iv-vlink-ap { background: #ED145B; }
.iv-vlink-ap:hover { background: #c90f4e; transform: translateY(-2px); }

/* ── نوار آمار ── */
.iv-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.iv-stat {
  background: #fff;
  border: 1px solid var(--app-line);
  border-radius: 16px;
  padding: 17px 14px 15px;
  text-align: center;
  box-shadow: 0 10px 26px -18px rgba(15,23,42,.14);
  transition: .25s;
}
.iv-stat:hover { border-color: #bfdbfe; transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(37,99,235,.3); }
.iv-stat b {
  display: block;
  font-family: var(--app-display);
  font-size: 21px; font-weight: 800; color: #2563eb;
}
.iv-stat span { display: block; margin-top: 5px; font-size: 11.5px; color: var(--app-muted); font-weight: 600; }

/* ── مزیت‌ها ── */
.iv-feats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.iv-feat {
  position: relative;
  background: #fff;
  border: 1px solid var(--app-line);
  border-radius: 18px;
  padding: 20px 17px;
  box-shadow: 0 10px 28px -18px rgba(15,23,42,.10);
  transition: .25s;
}
.iv-feat:hover {
  border-color: #bfdbfe;
  box-shadow: 0 18px 34px -18px rgba(37,99,235,.28);
  transform: translateY(-3px);
}
.iv-feat-icon {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid; place-items: center;
  color: #fff; margin-bottom: 13px;
  box-shadow: 0 10px 18px -8px rgba(37,99,235,.55);
}
.iv-feat-icon svg { width: 21px; height: 21px; }
.iv-feat h3 { font-size: 13.5px; font-weight: 800; color: #0f172a; margin: 0 0 6px; }
.iv-feat p { font-size: 11.5px; color: var(--app-muted); font-weight: 500; line-height: 1.9; margin: 0; }

/* ── مراحل سفارش ── */
.iv-steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  counter-reset: step;
}
.iv-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--app-line);
  border-radius: 18px;
  padding: 22px 17px 19px;
  box-shadow: 0 10px 26px -18px rgba(15,23,42,.1);
  transition: .25s;
}
.iv-step:hover { border-color: #bfdbfe; box-shadow: 0 18px 34px -18px rgba(37,99,235,.28); transform: translateY(-3px); }
.iv-step::before {
  counter-increment: step;
  content: counter(step);
  width: 36px; height: 36px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #2563eb, #6366f1);
  color: #fff; font-size: 16px; font-weight: 900;
  box-shadow: 0 10px 18px -6px rgba(99,102,241,.55);
  margin-bottom: 13px;
}
.iv-step h3 { font-size: 13px; font-weight: 800; color: #0f172a; margin: 0 0 5px; }
.iv-step p { font-size: 11.5px; color: var(--app-muted); font-weight: 500; line-height: 1.9; margin: 0; }

/* ── لیست خدمات ── */
.iv-services-note { margin-top: 6px; font-size: 12.5px; color: var(--app-muted); font-weight: 500; line-height: 1.9; }
.iv-services {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
}
.iv-services li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 12.5px; font-weight: 600; color: #334155;
  line-height: 1.9;
  padding: 14px 15px;
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 13px;
  box-shadow: 0 6px 16px -12px rgba(15,23,42,.12);
  transition: .22s;
}
.iv-services li:hover {
  border-color: #bfdbfe;
  background: #f0f7ff;
  transform: translateY(-1px);
  box-shadow: 0 12px 20px -14px rgba(37,99,235,.35);
}
.iv-services li::before {
  content: '✓';
  flex-shrink: 0;
  width: 22px; height: 22px; margin-top: 4px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  font-size: 11px; font-weight: 900;
  box-shadow: 0 6px 12px -4px rgba(16,185,129,.55);
}

/* ── چیدمان دوستونه: محتوا + سایدبار ── */
.iv-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  align-items: start;
  margin-top: 16px;
}
.iv-main { min-width: 0; }

/* ── سایدبار ثبت سفارش ── */
.iv-order {
  position: sticky;
  top: 88px;
  background: #fff;
  border: 1px solid var(--app-line);
  border-radius: 20px;
  padding: 22px 20px 20px;
  box-shadow: 0 20px 44px -26px rgba(15,23,42,.28);
}
.iv-order-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.iv-order-badge {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #6366f1);
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 10px 18px -8px rgba(99,102,241,.55);
}
.iv-order-badge svg { width: 20px; height: 20px; }
.iv-order h2 {
  font-size: 15.5px; font-weight: 900; color: #0f172a;
  margin: 0; flex: 1;
}
.iv-order-pill {
  font-size: 10.5px; font-weight: 800;
  padding: 5px 11px; border-radius: 999px;
  background: #ecfdf5; color: #059669;
  border: 1px solid #a7f3d0;
  white-space: nowrap;
}
.iv-order-note {
  font-size: 12px; color: var(--app-muted, #64748b);
  font-weight: 500; line-height: 2;
  margin: 0 0 16px;
}
.iv-order-note strong { color: #059669; font-weight: 800; }
.iv-order-actions { display: flex; }
.iv-order-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  font-size: 14.5px; font-weight: 900;
  padding: 15px 26px; border-radius: 14px;
  box-shadow: 0 14px 30px -12px rgba(37,99,235,.65);
  transition: .2s;
  text-decoration: none; border: none; cursor: pointer;
}
.iv-order-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(37,99,235,.75); }
.iv-order-btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.iv-order-trust {
  list-style: none;
  display: flex; flex-direction: column; gap: 9px;
  margin: 16px 0 0; padding: 16px 0 0;
  border-top: 1px dashed var(--app-line);
  font-size: 11.5px; font-weight: 700; color: #334155;
}
.iv-order-trust li { display: flex; align-items: center; gap: 8px; }
.iv-order-trust li::before { content: '✓'; color: #10b981; font-weight: 900; }
.iv-order-help {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 14px; padding: 12px 13px;
  font-size: 11px; color: var(--app-muted, #64748b);
  font-weight: 500; line-height: 1.8;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 12px;
}
.iv-order-help svg { width: 16px; height: 16px; flex-shrink: 0; color: #6366f1; margin-top: 1px; }

/* ── ریسپانسیو صفحه نصب و کانفیگ ── */
@media (max-width: 1050px) {
  .iv-wrap { grid-template-columns: minmax(0, 1fr) 280px; }
  .iv-feats { grid-template-columns: repeat(2, 1fr); }
  .iv-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .iv-wrap { grid-template-columns: minmax(0, 1fr); }
  .iv-order {
    position: static;
    order: 2;
    margin-top: 18px;
    padding: 22px 20px 20px;
  }
  .iv-stats { grid-template-columns: repeat(2, 1fr); }
  .iv-hero { grid-template-columns: 1fr; padding: 30px 24px 34px; }
  .iv-art { margin-top: 18px; }
}
@media (max-width: 820px) {
  .iv-services { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .iv-feats, .iv-steps, .iv-stats { grid-template-columns: 1fr; }
  .iv-hero { padding: 24px 18px 26px; }
  .iv-hero h1 { font-size: 24px; }
  .iv-actions .iv-btn { flex: 1; justify-content: center; }
  .iv-video-box { aspect-ratio: auto; min-height: 210px; }
  .iv-video-links { flex-direction: column; }
  .iv-vlink { justify-content: center; }
  .iv-art { padding: 14px 0; }
  .iv-art-badge { font-size: 10px; padding: 7px 11px; }
  .iv-video-play { width: 64px; height: 64px; }
  .iv-video-play svg { width: 26px; height: 26px; }
}
/* ════════════════════════════════════════════════════════════════
   صفحه: پشتیبانی و نگهداری WHMCS (support.html)
   ════════════════════════════════════════════════════════════════ */
.sv-hero { padding: 26px 4px 6px; }
.sv-hero h1 {
  font-family: var(--app-display);
  font-size: 34px; font-weight: 800;
  color: #0f172a; line-height: 1.4; margin: 0;
}
.sv-hero h1 .accent { color: #7c3aed; }
.sv-hero .sub {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--app-muted, #64748b); font-weight: 500; line-height: 2; max-width: 720px;
}
.sv-hero .sub strong { color: #0f172a; font-weight: 800; }

.sv-lead { color: #64748b; font-size: 14.5px; margin: 4px 0 24px; }

/* ── خدمات ── */
.sv-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sv-feat {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px;
  padding: 20px 18px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sv-feat:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -12px rgba(30,64,175,.22); border-color: #c7d2fe; }
.sv-feat-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; margin-bottom: 14px;
}
.sv-feat-icon svg { width: 26px; height: 26px; }
.sv-feat h3 { font-weight: 800; color: #0f172a; font-size: 16px; margin-bottom: 8px; }
.sv-feat p { color: #64748b; font-size: 13.5px; line-height: 1.9; }

/* ── پکیج‌های پشتیبانی ── */
.sv-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.sv-plan {
  position: relative;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 20px;
  padding: 26px 24px 24px;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sv-plan:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -18px rgba(30,64,175,.28); border-color: #c7d2fe; }
.sv-plan.featured { border: 2px solid #7c3aed; box-shadow: 0 18px 40px -18px rgba(124,58,237,.35); }
.sv-plan-badge {
  position: absolute; top: -14px; right: 24px;
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  color: #fff; font-size: 12px; font-weight: 700;
  padding: 7px 18px; border-radius: 999px;
  box-shadow: 0 6px 14px -6px rgba(124,58,237,.55);
}
.sv-plan-head { text-align: center; padding-bottom: 20px; border-bottom: 1px dashed #e2e8f0; margin-bottom: 18px; }
.sv-plan-head h3 { font-weight: 800; font-size: 20px; color: #0f172a; }
.sv-plan-head p { color: #64748b; font-size: 13.5px; margin: 6px 0 18px; }
.sv-plan-price b {
  display: block;
  font-family: var(--app-display);
  font-size: 40px; font-weight: 800; line-height: 1; color: #1e3a8a;
}
.sv-plan.featured .sv-plan-price b { color: #7c3aed; }
.sv-plan-price span { color: #94a3b8; font-size: 12.5px; margin-top: 6px; display: block; }
.sv-plan-list { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.sv-plan-list li {
  position: relative;
  padding: 8px 30px 8px 0;
  color: #334155; font-size: 14px; line-height: 1.8;
}
.sv-plan-list li::before {
  content: "✓";
  position: absolute; right: 6px; top: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #ecfdf5; color: #059669;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sv-plan.featured .sv-plan-list li::before { background: #f5f3ff; color: #7c3aed; }
.sv-plan-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #1e3a8a; color: #fff;
  border-radius: 12px; padding: 13px 16px;
  font-weight: 700; font-size: 14.5px;
  transition: background .2s ease, transform .2s ease;
}
.sv-plan-btn svg { width: 18px; height: 18px; }
.sv-plan-btn:hover { background: #1e40af; transform: translateY(-2px); }
.sv-plan.featured .sv-plan-btn { background: linear-gradient(90deg, #7c3aed, #a855f7); }
.sv-plan.featured .sv-plan-btn:hover { background: linear-gradient(90deg, #6d28d9, #9333ea); }

/* ── ریسپانسیو ── */
@media (max-width: 1000px) {
  .sv-feats { grid-template-columns: repeat(2, 1fr); }
  .sv-plans { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .sv-hero h1 { font-size: 26px; }
  .sv-feats { grid-template-columns: 1fr; }
  .sv-plans { max-width: 100%; }
  .sv-plan { padding: 22px 18px; }
}
/* ════════════════════════════════════════════════════════════════
   صفحه پشتیبانی و نگهداری WHMCS (support.html) — نسخه ۲ (جان‌دارتر)
   ════════════════════════════════════════════════════════════════ */
.sv-hero {
  position: relative;
  margin: 26px 0 0;
  padding: 34px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--app-border, rgba(15,23,42,.08));
  box-shadow: 0 18px 40px -24px rgba(15,23,42,.25);
  overflow: hidden;
}
.sv-hero::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(420px 240px at 90% 6%, rgba(124,58,237,.10), transparent 62%),
    radial-gradient(380px 220px at 4% 96%, rgba(37,99,235,.10), transparent 62%);
}
.sv-hero-wrap { position: relative; display: grid; grid-template-columns: 1.04fr .96fr; gap: 34px; align-items: center; }
.sv-hero-copy { position: relative; }
.sv-hero-copy .sub { max-width: 560px; }
.sv-hero-copy .sub-full { max-width: 100%; }

/* ── ماکت پنل پشتیبانی ── */
.sv-art { position: relative; padding: 24px 8px 10px; }
.sv-art-card {
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(15,23,42,.28);
}
.sv-art-head { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: #f8fafc; border-bottom: 1px solid #eef2f7; }
.sv-art-dot { width: 9px; height: 9px; border-radius: 50%; }
.sv-art-dot.r { background: #f87171; }
.sv-art-dot.y { background: #fbbf24; }
.sv-art-dot.g { background: #34d399; }
.sv-art-head-title { font-size: 11.5px; font-weight: 800; color: #475569; margin-right: 8px; }
.sv-art-body { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.sv-art-ticket {
  display: flex; align-items: center; gap: 10px;
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: 10px 12px;
}
.sv-art-t-icon {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
}
.sv-art-ticket.ok .sv-art-t-icon { background: linear-gradient(135deg, #10b981, #059669); }
.sv-art-ticket.run .sv-art-t-icon {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  animation: bounceIn 1s ease-in-out infinite;
}
.sv-art-t-body { flex: 1; display: flex; flex-direction: column; }
.sv-art-t-body b { font-size: 12.5px; font-weight: 800; color: #0f172a; }
.sv-art-t-body small { font-size: 10.5px; color: #94a3b8; margin-top: 2px; }
.sv-art-t-status { font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.sv-art-ticket.ok .sv-art-t-status { background: #ecfdf5; color: #059669; }
.sv-art-ticket.run .sv-art-t-status { background: #eef2ff; color: #4f46e5; }
.sv-art-badge {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 14px;
  box-shadow: 0 14px 30px -14px rgba(15,23,42,.35); padding: 10px 14px;
}
.sv-art-badge .sv-art-av {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 800;
}
.sv-art-badge b { display: block; font-size: 12px; color: #0f172a; white-space: nowrap; }
.sv-art-badge small { display: block; font-size: 10.5px; color: #94a3b8; margin-top: 2px; white-space: nowrap; }
.sv-art-badge.b1 { top: 4px; right: -4px; }
.sv-art-badge.b2 { bottom: 36px; left: -6px; }
.sv-art-badge.b1 .sv-art-av { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.sv-art-badge.b2 .sv-art-av { background: linear-gradient(135deg, #3b82f6, #2563eb); }

/* ── پلیر آمبد آپارات (کد آپارات؛ استایل‌ها اینجا منتقل شد) ── */
.h_iframe-aparat_embed_frame { position: relative; }
.iv-video-embed { position: relative; border-radius: 16px; overflow: hidden; background: #0f172a; border: 1px solid rgba(15,23,42,.08); }
.iv-video-embed .ratio { display: block; width: 100%; height: auto; padding-top: 57%; }
.iv-video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ── خط رنگی پکیج‌ها ── */
.sv-plan-line { display: block; width: 64px; height: 4px; border-radius: 999px; margin: 14px auto 0; }
.sv-plan:nth-child(1) .sv-plan-line { background: linear-gradient(90deg, #b45309, #f59e0b); }
.sv-plan:nth-child(2) .sv-plan-line { background: linear-gradient(90deg, #7c3aed, #a855f7); }
.sv-plan:nth-child(3) .sv-plan-line { background: linear-gradient(90deg, #b45309, #fbbf24); }
.sv-plan.featured .sv-plan-line { background: linear-gradient(90deg, #7c3aed, #a855f7); }

/* ── ریسپانسیو hero / art ── */
@media (max-width: 1000px) {
  .sv-hero-wrap { grid-template-columns: 1fr; gap: 26px; }
  .sv-hero { padding: 28px 22px; }
  .sv-art { padding: 14px 4px 6px; max-width: 620px; margin: 0 auto; }
  .sv-art-badge.b2 { bottom: 26px; }
}
@media (max-width: 640px) {
  .sv-art-badge { padding: 8px 11px; }
  .sv-art-badge .sv-art-av { width: 30px; height: 30px; }
  .sv-art-badge b { font-size: 11px; }
  .sv-art-badge small { font-size: 9.5px; }
}
/* ════════════════════════════════════════════════════════════════
   صفحه: پنل پیامکی (sms.html) — تم سایان
   ════════════════════════════════════════════════════════════════ */
.sm-hero h1 .accent { color: #0891b2; }
.sm-hero::before {
  background:
    radial-gradient(420px 240px at 90% 6%, rgba(8,145,178,.10), transparent 62%),
    radial-gradient(380px 220px at 4% 96%, rgba(37,99,235,.10), transparent 62%);
}

/* پکیج‌ها: دو ستونه + تم سایان برای پکیج رایگان (featured) */
.sm-plans { grid-template-columns: repeat(2, 1fr); max-width: 980px; margin: 0 auto; }
.sm-plans .sv-plan:nth-child(1) .sv-plan-line { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.sm-plans .sv-plan:nth-child(2) .sv-plan-line { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.sm-plans .sv-plan.featured { border-color: #06b6d4; box-shadow: 0 18px 40px -18px rgba(8,145,178,.35); }
.sm-plans .sv-plan.featured .sv-plan-price b { color: #0891b2; }
.sm-plans .sv-plan.featured .sv-plan-list li::before { background: #ecfeff; color: #0891b2; }
.sm-plans .sv-plan-badge { background: linear-gradient(90deg, #06b6d4, #0ea5e9); box-shadow: 0 6px 14px -6px rgba(8,145,178,.55); }
.sm-plans .sv-plan.featured .sv-plan-btn { background: linear-gradient(90deg, #06b6d4, #0ea5e9); }
.sm-plans .sv-plan.featured .sv-plan-btn:hover { background: linear-gradient(90deg, #0891b2, #0284c7); }
@media (max-width: 1000px) {
  .sm-plans { grid-template-columns: 1fr; max-width: 540px; }
}
/* ════════════════════════════════════════════════════════════════
   صفحه: رمزنگاری فایل‌های PHP با یونکوب (ioncube.html) — تم نارنجی
   ════════════════════════════════════════════════════════════════ */
.ic-hero h1 .accent { color: #ea580c; }
.ic-hero::before {
  background:
    radial-gradient(420px 240px at 90% 6%, rgba(234,88,12,.10), transparent 62%),
    radial-gradient(380px 220px at 4% 96%, rgba(37,99,235,.10), transparent 62%);
}

/* مراحل: پنج ستونه در دسکتاپ */
.ic-steps { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) {
  .ic-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ic-steps { grid-template-columns: 1fr; }
}

/* بخش ثبت سفارش */
.ic-cta { text-align: center; }
.ic-cta p {
  max-width: 640px;
  margin: 4px auto 26px;
  color: var(--app-muted, #64748b);
  font-size: 14px; font-weight: 500; line-height: 2;
}
.ic-cta .iv-btn { padding: 16px 38px; font-size: 15px; border-radius: 15px; }
/* ══ about-* : صفحه درباره ما ══ */
.ab-hero::before {
  background:
    radial-gradient(420px 240px at 90% 6%, rgba(124,58,237,.10), transparent 62%),
    radial-gradient(380px 220px at 4% 96%, rgba(6,182,212,.10), transparent 62%);
}
.ab-hero h1 .accent { color: #7c3aed; }
.about-custom-box {
  margin-top: 1.25rem;
  border: 2px dashed #06b6d4;
  background: #f0fdfa;
  border-radius: 1rem;
  padding: 2rem 1.75rem;
  text-align: center;
  color: #475569;
  line-height: 2;
  font-size: 1.05rem;
}
.about-custom-box strong { color: #0d9488; }
@media (max-width: 640px) {
  .about-custom-box { padding: 1.25rem 1rem; font-size: .95rem; }
}
/* ── شبکه های اجتماعی (about) ── */
.about-social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 1.5rem; }
.about-social-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 16px;
  padding: 15px 18px; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.about-social-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -22px rgba(15,23,42,.30);
  border-color: var(--brand);
}
.about-social-icon {
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  display: grid; place-items: center; color: var(--brand); background: var(--tint);
}
.about-social-icon svg { width: 24px; height: 24px; }
.about-social-txt b { display: block; font-size: 14.5px; font-weight: 800; color: #0f172a; }
.about-social-txt small { display: block; font-size: 12px; color: #64748b; margin-top: 2px; }
.about-social-card.tg { --brand: #229ed9; --tint: #e3f3fc; }
.about-social-card.ig { --brand: #e4405f; --tint: #fdeaf0; }
.about-social-card.wa { --brand: #25d366; --tint: #e4f9ee; }
.about-social-card.em { --brand: #3b82f6; --tint: #e8f0fe; }
.about-social-card.ph { --brand: #7c3aed; --tint: #f3edfd; }

/* ── CTA پایانی (about) ── */
.about-cta {
  margin-top: 1.25rem;
  background: linear-gradient(120deg, #f5f3ff, #eef2ff);
  border: 1px solid rgba(124,58,237,.22);
  border-radius: 22px; padding: 2.5rem 1.75rem; text-align: center;
}
.about-cta h2 { font-size: 26px; font-weight: 900; color: #0f172a; margin-bottom: .6rem; }
.about-cta h2 .accent { color: #7c3aed; }
.about-cta p { color: #475569; font-size: 15px; max-width: 520px; margin: 0 auto 1.5rem; line-height: 2; }
.about-cta .iv-actions { justify-content: center; }
.about-cta .iv-btn-prime,
.ab-hero .iv-btn-prime { background: linear-gradient(135deg, #2563eb, #4f46e5); box-shadow: 0 10px 24px -12px rgba(37,99,235,.55); }
.about-cta .iv-btn-prime:hover,
.ab-hero .iv-btn-prime:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(37,99,235,.6); }

@media (max-width: 900px) {
  .about-social { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .about-social { grid-template-columns: 1fr; }
  .about-cta { padding: 1.75rem 1.25rem; }
  .about-cta h2 { font-size: 21px; }
}
/* ══ ct-* : صفحه تماس با ما ══ */
.ct-hero::before {
  background:
    radial-gradient(420px 240px at 90% 6%, rgba(2,132,199,.10), transparent 62%),
    radial-gradient(380px 220px at 4% 96%, rgba(56,189,248,.10), transparent 62%);
}
.ct-hero h1 .accent { color: #0284c7; }
.ct-hero .iv-btn-prime,
.ct-submit { background: linear-gradient(135deg, #0284c7, #38bdf8); box-shadow: 0 10px 24px -12px rgba(2,132,199,.55); }
.ct-hero .iv-btn-prime:hover,
.ct-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(2,132,199,.6); }

/* راه های ارتباطی */
.ct-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 1.5rem; }
.ct-info-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 16px;
  padding: 16px 18px; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.ct-info-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -22px rgba(15,23,42,.30); border-color: rgba(2,132,199,.35); }
.ct-info-icon {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
}
.ct-info-icon svg { width: 23px; height: 23px; }
.ct-info-icon.c1 { color: #10b981; background: #e4f8f0; }
.ct-info-icon.c2 { color: #3b82f6; background: #e8f0fe; }
.ct-info-icon.c3 { color: #229ed9; background: #e3f3fc; }
.ct-info-icon.c4 { color: #f59e0b; background: #fdf3e0; }
.ct-info-txt b { display: block; font-size: 14.5px; font-weight: 800; color: #0f172a; }
.ct-info-txt small { display: block; font-size: 13px; font-weight: 600; color: #64748b; margin-top: 3px; }

/* فرم تماس */
.ct-form {
  margin-top: 1.5rem;
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 20px;
  padding: 1.75rem;
  box-shadow: 0 18px 40px -26px rgba(15,23,42,.18);
}

@media (max-width: 640px) {
  .ct-info { grid-template-columns: 1fr; }
  .ct-form { padding: 1.25rem; }
}
/* ══ rt-* : صفحه نظرات کاربران ══ */
.rt-hero::before {
  background:
    radial-gradient(420px 240px at 90% 6%, rgba(245,158,11,.12), transparent 62%),
    radial-gradient(380px 220px at 4% 96%, rgba(249,115,22,.10), transparent 62%);
}
.rt-hero h1 .accent { color: #f59e0b; }
.rt-hero .iv-btn-prime,
.rt-submit { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 10px 24px -12px rgba(245,158,11,.55); }
.rt-hero .iv-btn-prime:hover,
.rt-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(245,158,11,.6); }

/* ستاره‌ها */
.rt-stars { display: inline-flex; gap: 2px; direction: ltr; }
.rt-star { display: inline-grid; place-items: center; color: #cbd5e1; transition: color .15s, transform .15s; }
.rt-star svg { width: 17px; height: 17px; }
.rt-stars.lg .rt-star svg { width: 24px; height: 24px; }
.rt-star.active { color: #f59e0b; }
.rt-star:hover { transform: scale(1.15); }

/* آمار امتیازها */
.rt-stats {
  margin-top: 1.5rem;
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 20px;
  padding: 1.75rem; display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: center;
  box-shadow: 0 18px 40px -26px rgba(15,23,42,.18);
}
.rt-stats-side { text-align: center; border-left: 1px dashed #e2e8f0; padding-left: 1.5rem; }
.rt-stats-num { font-size: 56px; font-weight: 900; color: #0f172a; line-height: 1.1; }
.rt-stats-num::after { content: " از 5"; font-size: 17px; color: #64748b; font-weight: 700; }
.rt-stats-side .rt-stars { margin-top: 8px; }
.rt-stats-sub { margin-top: 10px; color: #64748b; font-size: 13.5px; }
.rt-stats-sub b { color: #0f172a; }
.rt-bars { display: flex; flex-direction: column; gap: 10px; }
.rt-bar { display: grid; grid-template-columns: 74px 1fr 46px; gap: 12px; align-items: center; font-size: 13px; }
.rt-bar-l { color: #475569; font-weight: 700; }
.rt-bar-track { height: 9px; border-radius: 99px; background: #f1f5f9; overflow: hidden; display: block; }
.rt-bar-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.rt-bar-v { color: #64748b; font-weight: 700; }

/* باکس دیدگاه‌ها: ردیف‌های تمام‌عرض + اسکرول با ارتفاع ثابت */
.rt-box {
  margin-top: 1.5rem;
  height: 560px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  background: #fafcff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 #fff;
}
.rt-box::-webkit-scrollbar { width: 8px; }
.rt-box::-webkit-scrollbar-track { background: transparent; }
.rt-box::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }
.rt-box::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* کارت دیدگاه: تمام‌عرض */
.rt-card {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%;
  background: #fff; border: 1px solid #eef2f7; border-radius: 14px;
  padding: 16px 18px;
  transition: border-color .2s, box-shadow .2s;
}
.rt-card + .rt-card { margin-top: 12px; }
.rt-card:hover { border-color: #fde68a; box-shadow: 0 10px 24px -18px rgba(245, 158, 11, .45); }
.rt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rt-card-id { display: flex; align-items: center; gap: 10px; }
.rt-card-text { font-size: 14px; line-height: 2.05; color: #475569; margin: 0; max-width: 100%; }
.rt-card-ava {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px;
}
.rt-card-ava.a1 { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.rt-card-ava.a2 { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.rt-card-ava.a3 { background: linear-gradient(135deg, #ea580c, #fbbf24); }
.rt-card-ava.a4 { background: linear-gradient(135deg, #059669, #34d399); }
.rt-card-ava.a5 { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.rt-card-ava.a6 { background: linear-gradient(135deg, #e11d48, #fb7185); }
.rt-card-who b { display: block; font-size: 14px; font-weight: 800; color: #0f172a; }
.rt-card-who small { display: block; font-size: 12px; color: #64748b; margin-top: 2px; }

/* فرم ثبت دیدگاه */
.rt-form {
  margin-top: 1.5rem;
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 20px;
  padding: 1.75rem;
  box-shadow: 0 18px 40px -26px rgba(15,23,42,.18);
}
.rt-rating { margin-top: 1.25rem; }
.rt-rating-label { display: block; font-size: 14px; font-weight: 700; color: #334155; margin-bottom: 10px; }
.rt-rating-value { display: inline-block; margin-inline-start: 12px; font-size: 13px; font-weight: 700; color: #b45309; vertical-align: middle; }
.rt-input-stars .rt-star { cursor: pointer; }

@media (max-width: 900px) {
  .rt-box { height: 500px; }
  .rt-stats { grid-template-columns: 1fr; gap: 1.5rem; }
  .rt-stats-side { border-left: 0; border-bottom: 1px dashed #e2e8f0; padding-left: 0; padding-bottom: 1.25rem; }
}
@media (max-width: 560px) {
  .rt-box { height: 420px; }
  .rt-bar { grid-template-columns: 64px 1fr 40px; gap: 8px; }
  .rt-form { padding: 1.25rem; }
}
/* ══ پاسخ مدیریت به دیدگاه ══ */
.rt-card-shop { display: block; font-size: 12px; font-weight: 600; color: #94a3b8; margin-top: 3px; }
.rt-reply {
  background: #faf9ff;
  border: 1px solid #ede9fe;
  border-radius: 12px;
  padding: 12px 14px;
}
.rt-reply-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #7c3aed;
}
.rt-reply-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #8b5cf6;
}
.rt-reply p { font-size: 13px; line-height: 1.9; color: #475569; margin: 7px 0 0; }

/* ══ فرم ثبت دیدگاه: فیلدها ══ */
.rt-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.rt-field label { display: block; font-size: 14px; font-weight: 700; color: #334155; margin-bottom: 8px; }
.rt-field .req { color: #e11d48; }
.rt-field input,
.rt-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: #334155;
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.rt-field input::placeholder,
.rt-field textarea::placeholder { color: #94a3b8; }
.rt-field input:focus,
.rt-field textarea:focus {
  background: #fff;
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, .12);
}
.rt-field textarea { resize: vertical; min-height: 110px; }
.rt-form .rt-rate-field,
.rt-form .rt-message-field { margin-top: 18px; }
.rt-rate-label { display: block; font-size: 14px; font-weight: 700; color: #334155; }
.rt-rate-field .rt-input-stars { margin-top: 8px; }
.rt-rate-field .rt-input-stars .rt-star { cursor: pointer; }
.rt-input-stars .rt-star.hover { color: #f59e0b; }
.rt-rate-out { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: #b45309; }
.rt-form .submit { margin-top: 22px; width: 100%; justify-content: center; }
.rt-note { margin-top: 12px; font-size: 12.5px; color: #94a3b8; }

@media (max-width: 640px) {
  .rt-fields { grid-template-columns: 1fr; }
}

/* ── شرایط ارائه خدمات (terms) ── */
.trm-hero h1 .accent { color: #92400e; }
.trm-hero .iv-btn-prime {
  background: linear-gradient(135deg, #92400e, #d97706);
  box-shadow: 0 10px 24px -12px rgba(217, 119, 6, .5);
}

/* توضیحات عمومی */
.trm-overview { scroll-margin-top: 100px; }
.trm-overview-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; margin-top: 8px; }
.trm-overview-main p { color: #475569; font-size: 14px; line-height: 2.1; margin-bottom: 14px; }
.trm-overview-main strong { color: #0f172a; font-weight: 800; }
.trm-overview-side { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.trm-kp {
  background: linear-gradient(160deg, #fffbeb, #fef3c7);
  border: 1px solid #fde68a; border-radius: 16px;
  padding: 18px 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center;
}
.trm-kp-n { font-family: var(--app-display); font-size: 26px; font-weight: 800; color: #b45309; line-height: 1.2; }
.trm-kp-t { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; color: #78350f; }
.trm-kp-t b { font-size: 13px; font-weight: 800; color: #92400e; }

/* چیدمان: فهرست سایدبار + مواد شرایط */
.trm-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; margin-top: 18px; }
.trm-toc {
  position: sticky; top: 100px;
  background: #fafaf9; border: 1px solid #e7e5e4; border-radius: 18px;
  padding: 18px 14px;
}
.trm-toc-title {
  font-size: 14px; font-weight: 800; color: #0f172a;
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.trm-toc-title::before { content: '§'; color: #b45309; font-size: 17px; font-weight: 900; }
.trm-toc-nav {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 420px; overflow-y: auto;
  margin-left: -6px; padding-left: 6px;
}
.trm-toc-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.trm-toc-nav a { padding: 7px 8px; border-radius: 10px; }
.trm-toc-link {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600; color: #57534e;
  padding: 7px 8px; border-radius: 10px;
  transition: background .15s ease, color .15s ease;
}
.trm-toc-link:hover { background: #fef3c7; color: #92400e; }
.trm-toc-n {
  width: 20px; height: 20px; flex-shrink: 0;
  display: grid; place-items: center;
  background: #f5f5f4; border: 1px solid #e7e5e4;
  color: #78716c; font-size: 11px; font-weight: 800;
  border-radius: 7px;
}
.trm-toc-link:hover .trm-toc-n { background: #b45309; border-color: #b45309; color: #fff; }
.trm-toc-note {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed #d6d3d1;
  font-size: 11px; color: #a8a29e;
}

.trm-articles { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.trm-item {
  background: #fff; border: 1px solid #e7e5e4; border-radius: 16px;
  padding: 18px 20px; scroll-margin-top: 100px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.trm-item:hover { box-shadow: 0 12px 28px -14px rgba(120, 53, 15, .2); border-color: #fcd34d; }
.trm-item h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 15.5px; font-weight: 800; color: #0f172a; margin-bottom: 10px;
}
.trm-num {
  width: 28px; height: 28px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #b45309, #d97706);
  color: #fff; font-size: 13px; font-weight: 800; border-radius: 9px;
}
.trm-item p { color: #57534e; font-size: 13.5px; line-height: 2.05; }

@media (max-width: 900px) {
  .trm-wrap { grid-template-columns: 1fr; }
  .trm-toc { position: static; }
  .trm-toc-nav { max-height: 260px; }
}
@media (max-width: 640px) {
  .trm-overview-grid { grid-template-columns: 1fr; }
  .trm-overview-side { grid-template-columns: repeat(3, 1fr); }
  .trm-item { padding: 16px; }
  .trm-kp-n { font-size: 22px; }
}

/* ── سوالات متداول (faq) ── */
.faq-hero h1 .accent { color: #0d9488; }
.faq-hero .iv-btn-prime {
  background: linear-gradient(135deg, #0d9488, #14b8a6);
  box-shadow: 0 10px 24px -12px rgba(20, 184, 166, .5);
}

/* ماکت هیرو: ردیف پرسش/پاسخ */
.fa-art-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 11px 13px;
}
.fa-art-row + .fa-art-row { margin-top: 8px; }
.fa-art-q { font-size: 11.5px; font-weight: 700; color: #0f172a; }
.fa-art-q::before { content: '؟'; color: #0d9488; font-weight: 900; margin-left: 4px; }
.fa-art-a {
  font-size: 10.5px; font-weight: 600; color: #0d9488;
  background: #f0fdfa; border: 1px solid #99f6e4;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}

/* آمار */
.fa-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
.fa-kp {
  background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.fa-kp b { font-family: var(--app-display); font-size: 22px; color: #0f766e; line-height: 1.2; }
.fa-kp span { font-size: 12px; color: #115e59; font-weight: 600; }

/* دسته‌ها */
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: start; }
.faq-cat {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 20px;
  padding: 20px 18px; scroll-margin-top: 100px;
}
.faq-cat-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 14px; }
.faq-cat-n {
  width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #0d9488, #14b8a6);
  color: #fff; font-size: 14px; font-weight: 800;
}

/* آکاردئون */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid #f1f5f9; }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 4px;
  font-size: 13.5px; font-weight: 700; color: #1e293b;
  transition: color .15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #0f766e; }
.faq-item summary::after {
  content: '+'; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  background: #f0fdfa; color: #0d9488; font-size: 15px; font-weight: 800;
  transition: transform .2s ease, background .2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); background: #0d9488; color: #fff; }
.faq-item[open] summary { color: #0f766e; }
.faq-ans { padding: 0 4px 14px; }
.faq-ans p { font-size: 13px; color: #64748b; line-height: 2; }

/* باند CTA */
.faq-cta {
  margin-top: 26px; border-radius: 22px;
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  color: #fff; padding: 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.faq-cta h3 { font-size: 18px; font-weight: 800; }
.faq-cta p { margin-top: 6px; font-size: 13px; line-height: 2; color: #ccfbf1; max-width: 560px; }
.faq-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.faq-cta-btn {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
  border-radius: 12px; font-size: 13px; font-weight: 800;
  transition: transform .15s ease, box-shadow .15s ease;
}
.faq-cta-btn.solid { background: #fff; color: #0f766e; }
.faq-cta-btn.ghost { border: 1.5px solid rgba(255, 255, 255, .45); color: #fff; }
.faq-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(15, 118, 110, .5); }

@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .faq-cta { flex-direction: column; align-items: flex-start; }
}
/* ============================================================
   index1.html — استایل‌های انتقال‌یافته
   ============================================================ */

/* ── بلاک استایل #1 ── */
html { scroll-behavior: smooth; overflow-x: clip; }
    body {
      font-family: Vazirmatn, Tahoma, sans-serif;
      background: #ffffff;
      color: #1e293b;
      overflow-x: clip;
    }
    .container-wide { width: min(1240px, calc(100% - 32px)); margin-inline: auto; }
    .mesh {
      background:
        radial-gradient(circle at 10% 10%, rgba(59,130,246,.15), transparent 30%),
        radial-gradient(circle at 85% 15%, rgba(99,102,241,.12), transparent 28%),
        linear-gradient(180deg, #eef4ff 0%, #f8faff 72%, #f8fafc 100%);
    }
    .hero-grid {
      background-image:
        linear-gradient(rgba(59,130,246,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,.04) 1px, transparent 1px);
      background-size: 36px 36px;
      mask-image: linear-gradient(to bottom, black 10%, transparent 90%);
    }
    .line-clamp-2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .product-art {
      min-height: 160px;
      position: relative;
      overflow: hidden;
    }
    .product-art::before {
      content: "";
      position: absolute;
      width: 200px; height: 200px;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      left: -60px; top: -90px;
    }
    /* Section title diagonal highlight */
    .title-highlight {
      position: relative;
      display: inline-block;
    }
    .title-highlight::after {
      content: '';
      position: absolute;
      left: -6px;
      right: -6px;
      bottom: 2px;
      height: 14px;
      border-radius: 8px;
      transform: skewX(-8deg);
      z-index: -1;
    }
    .title-indigo { color: #3730a3; }
    .title-indigo::after {
      background: linear-gradient(135deg, #6366f1, #a5b4fc);
    }
    .title-emerald { color: #065f46; }
    .title-emerald::after {
      background: linear-gradient(135deg, #10b981, #a7f3d0);
    }
    .title-teal { color: #134e4a; }
    .title-teal::after {
      background: linear-gradient(135deg, #14b8a6, #99f6e4);
    }
    .title-amber { color: #92400e; }
    .title-amber::after {
      background: linear-gradient(135deg, #f59e0b, #fde68a);
    }
    .title-azure { color: #1e40af; }
    .title-azure::after {
      background: linear-gradient(135deg, #3b82f6, #bfdbfe);
    }

    /* Mega Menu Styles */
    /* پنل‌های مگا نسبت به ردیف ناوبری تمام‌عرض می‌شوند (نه نسبت به ستون تریگر) */
    .header-nav-row { position: relative; }
    .mega-panel { 
      opacity: 0; 
      visibility: hidden; 
      transform: translateY(12px); 
      pointer-events: none; 
      transition: all .25s cubic-bezier(0.165, 0.84, 0.44, 1); 
    }
    .mega-wrap:hover .mega-panel { 
      opacity: 1; 
      visibility: visible; 
      transform: translateY(0); 
      pointer-events: auto; 
    }

    /* Mobile Drawer Styles */
    .mobile-drawer { transform: translateX(105%); transition: transform .3s ease-in-out; }
    .mobile-drawer.open { transform: translateX(0); }
    .mobile-overlay { opacity: 0; visibility: hidden; transition: .25s ease; }
    .mobile-overlay.open { opacity: 1; visibility: visible; }
    body.menu-open { overflow: hidden; }

    /* Accordion transition for mobile menu */
    .submenu-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }
    .submenu-content.open {
      max-height: 800px;
      transition: max-height 0.4s ease-in;
    }
    .accordion-arrow.rotated {
      transform: rotate(180deg);
    }

    /* Header: sticky shrink on scroll */
    .site-header { transition: box-shadow .3s ease, background-color .3s ease; }
    .site-header .header-main-row { height: 80px; transition: height .3s ease; }
    .site-header .header-nav-row { height: 56px; transition: height .3s ease; }
    .site-header.scrolled {
      box-shadow: 0 10px 30px -5px rgba(15, 23, 42, .10);
      background-color: rgba(255, 255, 255, .97);
    }
    .site-header.scrolled .header-main-row { height: 64px; }
    .site-header.scrolled .header-nav-row { height: 48px; }

/* ── بلاک استایل #2 ── */
/* ── Hero Intro Animations ── */
    @keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-50px) scale(1.1)} 66%{transform:translate(-20px,30px) scale(0.95)} }
    @keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-40px,40px) scale(0.9)} 66%{transform:translate(50px,-30px) scale(1.15)} }
    @keyframes orbFloat3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(25px,50px)} }
    @keyframes heroFadeUp { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }
    @keyframes heroFadeUpDelay1 { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
    @keyframes heroFadeUpDelay2 { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
    @keyframes heroFadeUpDelay3 { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
    @keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }
    @keyframes codeScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-40%)} }
    @keyframes pulseRing { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(2.2);opacity:0} }
    @keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
    @keyframes gridScroll { 0%{background-position:0 0} 100%{background-position:36px 36px} }
    @keyframes tagFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

    .hero-intro {
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, #f8fbff 0%, #eef2ff 35%, #f5f3ff 70%, #fbfaff 100%);
      min-height: 620px;
    }
    .hero-intro::before {
      content: "";
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(99,102,241,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,.05) 1px, transparent 1px);
      background-size: 40px 40px;
      animation: gridScroll 8s linear infinite;
      opacity: .4;
      -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
              mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
    }
    .hero-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
    }
    .hero-orb-1 { width:500px;height:500px;background:rgba(99,102,241,.16);top:-120px;right:-100px;animation:orbFloat1 18s ease-in-out infinite; }
    .hero-orb-2 { width:400px;height:400px;background:rgba(59,130,246,.13);bottom:-100px;left:-80px;animation:orbFloat2 22s ease-in-out infinite; }
    .hero-orb-3 { width:250px;height:250px;background:rgba(139,92,246,.12);top:40%;left:50%;animation:orbFloat3 15s ease-in-out infinite; }

    /* ── Shamse corner ornaments (light theme) ── */
    .hero-shamse {
      position: absolute;
      pointer-events: none;
      z-index: 0;
    }
    .hero-shamse-top { top: -30px; right: -20px; width: 190px; height: 190px; }
    .hero-shamse-bot { bottom: 55px; left: -30px; width: 150px; height: 150px; }
    @media (max-width: 640px) {
      .hero-shamse-top { width: 110px; height: 110px; top: -15px; right: -10px; }
      .hero-shamse-bot { width: 90px; height: 90px; bottom: 46px; }
    }

    /* ── Bottom wave divider (into page background) ── */
    .hero-wave {
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 90px;
      pointer-events: none;
      z-index: 4;
    }
    .hero-wave svg { width: 100%; height: 100%; display: block; }

    /* ── Support seal stamp on the editor corner ── */
    .hero-stamp {
      position: absolute;
      top: -22px;
      left: -18px;
      width: 118px;
      height: 118px;
      z-index: 5;
      border-radius: 50%;
      background: linear-gradient(145deg, #ffffff 0%, #f0f4ff 60%, #eef2ff 100%);
      border: 2px dashed rgba(99,102,241,.55);
      box-shadow: 0 14px 34px -12px rgba(99,102,241,.4);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      transform: rotate(-12deg);
    }
    .hero-stamp::before {
      content: "";
      position: absolute;
      inset: 6px;
      border-radius: 50%;
      border: 1px solid rgba(99,102,241,.28);
    }
    .hero-stamp-inner { display: flex; flex-direction: column; align-items: center; gap: 2px; }
    .hero-stamp-icon { width: 26px; height: 26px; margin-bottom: 2px; }
    .hero-stamp-title { font-size: 21px; line-height: 1.15; font-weight: 900; color: #4f46e5; }
    .hero-stamp-sub { font-size: 10.5px; line-height: 1.4; font-weight: 700; color: #6366f1; }

    .hero-content { animation: heroFadeUp 0.9s cubic-bezier(.22,1,.36,1) both; }
    .hero-content-delay1 { animation: heroFadeUpDelay1 0.9s cubic-bezier(.22,1,.36,1) 0.15s both; }
    .hero-content-delay2 { animation: heroFadeUpDelay2 0.9s cubic-bezier(.22,1,.36,1) 0.3s both; }
    .hero-content-delay3 { animation: heroFadeUpDelay3 0.9s cubic-bezier(.22,1,.36,1) 0.45s both; }

    .hero-gradient-text {
      background: linear-gradient(135deg, #2563eb 0%, #6366f1 40%, #8b5cf6 70%, #2563eb 100%);
      background-size: 200% 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradientShift 6s ease infinite;
    }

    .hero-terminal {
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(99,102,241,.18);
      border-radius: 20px;
      backdrop-filter: blur(20px);
      overflow: hidden;
      box-shadow: 0 24px 60px -20px rgba(99,102,241,.25), 0 8px 24px -8px rgba(59,130,246,.12);
    }
    .hero-terminal-bar {
      background: rgba(241,245,249,.9);
      border-bottom: 1px solid rgba(99,102,241,.12);
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .hero-terminal-dot { width:10px;height:10px;border-radius:50%; }
    .hero-terminal-code {
      padding: 20px;
      font-family: 'Fira Code', 'Cascadia Code', monospace;
      font-size: 12px;
      line-height: 2;
      color: #475569;
      direction: ltr;
      text-align: left;
      overflow: hidden;
    }
    .hero-terminal-code .code-keyword { color: #7c3aed; }
    .hero-terminal-code .code-func { color: #2563eb; }
    .hero-terminal-code .code-string { color: #059669; }
    .hero-terminal-code .code-comment { color: #94a3b8; font-style: italic; }
    .hero-terminal-code .code-bracket { color: #d97706; }
    .hero-terminal-code .code-cursor {
      display: inline-block;
      width: 7px; height: 16px;
      background: #6366f1;
      vertical-align: text-bottom;
      animation: cursorBlink 1s step-end infinite;
    }

    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 18px;
      border-radius: 14px;
      font-size: 13px;
      font-weight: 700;
      background: rgba(255,255,255,.85);
      border: 1px solid rgba(99,102,241,.18);
      box-shadow: 0 4px 12px -4px rgba(99,102,241,.15);
      transition: all .35s cubic-bezier(.22,1,.36,1);
      cursor: default;
    }
    .hero-tag:hover { transform: translateY(-4px) scale(1.04); border-color: rgba(99,102,241,.45); box-shadow: 0 10px 20px -6px rgba(99,102,241,.25); }
    .hero-tag-blue { background: #eff6ff; color: #2563eb; }
    .hero-tag-indigo { background: #eef2ff; color: #4f46e5; }
    .hero-tag-purple { background: #f5f3ff; color: #7c3aed; }
    .hero-tag-emerald { background: #ecfdf5; color: #059669; }
    .hero-tag-rose { background: #fff1f2; color: #e11d48; }
    .hero-tag-amber { background: #fffbeb; color: #d97706; }

    .hero-cta-primary {
      background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
      background-size: 200% 200%;
      animation: gradientShift 4s ease infinite;
      transition: all .3s ease;
      position: relative;
    }
    .hero-cta-primary::after {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      z-index: -1;
      opacity: 0;
      filter: blur(12px);
      transition: opacity .3s ease;
    }
    .hero-cta-primary:hover::after { opacity: .5; }
    .hero-cta-primary:hover { transform: translateY(-2px); }

    .hero-cta-ghost {
      background: #fff;
      border: 1px solid #e2e8f0;
      color: #475569;
      box-shadow: 0 4px 14px -4px rgba(15,23,42,.08);
      transition: all .3s ease;
    }
    .hero-cta-ghost:hover {
      background: #f8faff;
      border-color: #c7d2fe;
      color: #4f46e5;
      transform: translateY(-2px);
      box-shadow: 0 10px 24px -8px rgba(99,102,241,.25);
    }

    .hero-stats-ring {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-stats-ring::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 2px solid rgba(99,102,241,.35);
      animation: pulseRing 2.5s ease-out infinite;
    }

    @media (max-width: 640px) {
      .hero-wave { height: 44px; }
      .hero-intro { min-height: auto; padding-top: 2.5rem; padding-bottom: 2.5rem; }
    }

/* ── بلاک استایل #3 ── */
/* ── Theme Cards Premium Styles ── */
      @keyframes themeCardFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

      .theme-section-bg {
        background: linear-gradient(180deg, #f4f7ff 0%, #f0f4ff 40%, #f6f5ff 100%);
        position: relative;
        border-radius: 36px;
        padding: 84px 0 84px;
        margin-top: 64px;
        overflow: hidden;
        overflow-x: clip;
      }
      .theme-section-bg::before {
        content: "";
        position: absolute;
        top: -200px;
        left: -100px;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(99,102,241,.08) 0%, transparent 70%);
        pointer-events: none;
      }
      .theme-section-bg::after {
        content: "";
        position: absolute;
        bottom: -150px;
        right: -80px;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(59,130,246,.07) 0%, transparent 70%);
        pointer-events: none;
      }

      /* ── Shamse corner ornaments (light theme) ── */
      .theme-shamse {
        position: absolute;
        pointer-events: none;
        width: 170px;
        height: 170px;
        z-index: 0;
      }
      .theme-shamse-top { top: -55px; right: -35px; }
      .theme-shamse-bot { bottom: -50px; left: -35px; width: 140px; height: 140px; }
      @media (max-width: 640px) {
        .theme-shamse-top { width: 90px; height: 90px; top: -18px; right: -12px; }
        .theme-shamse-bot { width: 80px; height: 80px; }
      }

      /* ── Ornament divider under the section header ── */
      .theme-ornament-line {
        display: flex;
        align-items: center;
        gap: 12px;
        max-width: 380px;
        margin: 0 auto 32px;
        padding: 0 20px;
        direction: rtl;
      }
      .theme-ornament-line-bar {
        flex: 1;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(270deg, rgba(99,102,241,0) 0%, rgba(99,102,241,.45) 100%);
      }
      .theme-ornament-line .theme-ornament-line-bar:last-child {
        background: linear-gradient(90deg, rgba(99,102,241,0) 0%, rgba(99,102,241,.45) 100%);
      }
      .theme-ornament-line svg { width: 22px; height: 22px; flex: 0 0 auto; }

      /* ── Card meta (rating) + bestseller chip ── */
      .theme-card-meta {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 8px;
      }
      .theme-card-meta svg { width: 14px; height: 14px; color: #f59e0b; fill: #f59e0b; }
      .theme-card-meta b { font-size: 12px; font-weight: 800; color: #0f172a; }
      .theme-card-meta span { font-size: 10.5px; font-weight: 600; color: #94a3b8; }
      .theme-card-bestseller {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 9.5px;
        font-weight: 800;
        color: #92400e;
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        border: 1px solid rgba(217,119,6,.28);
        padding: 2px 9px;
        border-radius: 999px;
        vertical-align: middle;
        margin-right: 8px;
        letter-spacing: 0;
      }

      /* ── Trust strip (4 icon cards) ── */
      .theme-trust {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
      }
      .theme-trust-item {
        display: flex;
        align-items: center;
        gap: 12px;
        background: rgba(255,255,255,.75);
        border: 1px solid rgba(99,102,241,.12);
        border-radius: 18px;
        padding: 16px 18px;
        transition: all .35s ease;
      }
      .theme-trust-item:hover {
        transform: translateY(-3px);
        background: #fff;
        border-color: rgba(99,102,241,.3);
        box-shadow: 0 14px 30px -14px rgba(99,102,241,.3);
      }
      .theme-trust-icon {
        width: 42px;
        height: 42px;
        flex: 0 0 auto;
        border-radius: 13px;
        display: grid;
        place-items: center;
        color: #4f46e5;
        background: linear-gradient(135deg, #eef2ff, #f5f3ff);
        border: 1px solid rgba(99,102,241,.16);
      }
      .theme-trust-icon svg { width: 20px; height: 20px; }
      .theme-trust-title { font-size: 13px; font-weight: 800; color: #1e293b; }
      .theme-trust-sub { font-size: 10.5px; font-weight: 500; color: #64748b; margin-top: 2px; line-height: 1.5; }
      @media (max-width: 1023px) {
        .theme-trust { grid-template-columns: repeat(2, 1fr); }
      }
      @media (max-width: 480px) {
        .theme-trust { grid-template-columns: 1fr; }
      }

      .theme-product-card {
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        transition: all .45s cubic-bezier(.22,1,.36,1);
        position: relative;
        direction: rtl;
        box-shadow:
          0 4px 6px -1px rgba(0,0,0,.02),
          0 10px 20px -5px rgba(0,0,0,.04),
          0 30px 60px -12px rgba(99,102,241,.08);
        border: 1px solid rgba(0,0,0,.04);
      }
      .theme-product-card:hover {
        transform: translateY(-8px) scale(1.015);
        box-shadow:
          0 8px 12px -2px rgba(0,0,0,.04),
          0 20px 40px -10px rgba(0,0,0,.06),
          0 50px 100px -20px rgba(99,102,241,.15);
        border-color: rgba(99,102,241,.15);
      }

      .theme-card-img-wrap {
        position: relative;
        overflow: hidden;
        height: 160px;
      }
      .theme-card-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s cubic-bezier(.22,1,.36,1);
      }
      .theme-product-card:hover .theme-card-img-wrap img {
        transform: scale(1.08);
      }
      .theme-card-img-wrap::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60%;
        background: linear-gradient(to top, rgba(255,255,255,1) 0%, transparent 100%);
        pointer-events: none;
      }
      .theme-card-badge {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 2;
        padding: 6px 14px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 800;
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255,255,255,.25);
      }
      .theme-card-discount {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 2;
        padding: 5px 12px;
        border-radius: 10px;
        font-size: 11px;
        font-weight: 800;
        background: linear-gradient(135deg, #ef4444, #f43f5e);
        color: #fff;
        box-shadow: 0 4px 12px rgba(239,68,68,.3);
      }

      .theme-card-body {
        padding: 16px 20px 4px;
      }
      .theme-card-title {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.5;
        margin-bottom: 4px;
      }
      .theme-card-desc {
        font-size: 11px;
        color: #64748b;
        line-height: 1.7;
        font-weight: 500;
      }

      .theme-card-footer {
        padding: 10px 20px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .theme-card-price-old {
        font-size: 11px;
        color: #94a3b8;
        font-weight: 600;
        text-decoration: line-through;
      }
      .theme-card-price-new {
        font-size: 16px;
        font-weight: 900;
        color: #2563eb;
        line-height: 1.2;
      }
      .theme-card-price-label {
        font-size: 10px;
        color: #94a3b8;
        font-weight: 600;
      }

      .theme-buy-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 8px 18px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 800;
        color: #fff;
        background: linear-gradient(135deg, #3b82f6, #6366f1);
        box-shadow:
          0 4px 12px rgba(59,130,246,.25),
          0 12px 28px rgba(59,130,246,.15);
        transition: all .35s cubic-bezier(.22,1,.36,1);
        cursor: pointer;
        border: none;
      }
      .theme-buy-btn:hover {
        transform: translateY(-2px);
        box-shadow:
          0 6px 16px rgba(59,130,246,.35),
          0 16px 40px rgba(59,102,241,.2);
        background: linear-gradient(135deg, #2563eb, #4f46e5);
      }

      /* ── Section header archive button ── */
      .theme-archive-btn {
        background: linear-gradient(135deg, #3b82f6, #6366f1);
        box-shadow:
          0 6px 18px rgba(59,130,246,.28),
          0 14px 34px rgba(99,102,241,.18);
        transition: all .35s cubic-bezier(.22,1,.36,1);
      }
      .theme-archive-btn:hover {
        transform: translateY(-2px);
        box-shadow:
          0 8px 22px rgba(59,130,246,.4),
          0 18px 44px rgba(99,102,241,.26);
      }

      /* ── Themes section only: equal-height cards + price divider ── */
      #whmcs-themes .theme-product-card {
        display: flex;
        flex-direction: column;
      }
      #whmcs-themes .theme-card-body {
        flex: 1;
        padding-bottom: 14px;
      }
      #whmcs-themes .theme-card-footer {
        border-top: 1px dashed rgba(99,102,241,.22);
        padding-top: 12px;
      }

/* ── بلاک استایل #4 ── */
/* ── Plugins section — full-width, own teal identity, layered waves ── */
      .plugins-section-bg {
        position: relative;
        width: auto;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 108px 0 104px;
        overflow: hidden;
        overflow-x: clip;
        background:
          radial-gradient(circle at 88% 8%, rgba(20,184,166,.08) 0%, transparent 42%),
          radial-gradient(circle at 10% 92%, rgba(13,148,136,.07) 0%, transparent 45%),
          linear-gradient(180deg, #f2fdf8 0%, #f0fdfa 35%, #f7fffb 60%, #eefbf6 100%);
      }

      /* ── Top & bottom layered waves (white page flows into the section) ── */
      .plugins-wave-top,
      .plugins-wave-bottom {
        position: absolute;
        left: 0;
        width: 100%;
        height: 132px;
        pointer-events: none;
        z-index: 2;
      }
      .plugins-wave-top { top: -1px; }
      .plugins-wave-bottom { bottom: -1px; }
      .plugins-wave-bottom .plugins-wave-stack {
        transform: scaleY(-1);
      }
      .plugins-wave-stack {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
      .plugins-wave-stack svg {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
      }
      /* soft pearl glow riding the wave crests */
      .plugins-wave-glow {
        position: absolute;
        border-radius: 50%;
        filter: blur(10px);
        opacity: .8;
        background: radial-gradient(circle, rgba(153,246,228,.9) 0%, rgba(153,246,228,0) 70%);
        pointer-events: none;
      }
      .plugins-wave-top .plugins-wave-glow {
        top: 46px;
        right: 24%;
        width: 90px;
        height: 90px;
      }
      .plugins-wave-bottom .plugins-wave-glow {
        bottom: 46px;
        left: 22%;
        width: 90px;
        height: 90px;
      }

      /* ── Shamse corner ornaments (teal) ── */
      .plugins-shamse {
        position: absolute;
        pointer-events: none;
        width: 170px;
        height: 170px;
        z-index: 3;
      }
      .plugins-shamse-top { top: 66px; right: 34px; }
      .plugins-shamse-bot { bottom: 60px; left: 34px; width: 140px; height: 140px; }
      @media (max-width: 640px) {
        .plugins-shamse-top { width: 90px; height: 90px; top: 70px; right: 14px; }
        .plugins-shamse-bot { width: 80px; height: 80px; }
        .plugins-wave-top, .plugins-wave-bottom { height: 58px; }
        .plugins-wave-glow { display: none; }
      }

      /* ── Plugin tag chips on images ── */
      .plugins-tag {
        display: inline-flex;
        align-items: center;
        padding: 6px 14px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 800;
        border: 1px solid rgba(255,255,255,.25);
        box-shadow: 0 4px 10px -2px rgba(15,23,42,.15);
      }

      /* ── Plugins section only: equal-height cards + teal price divider ── */
      #whmcs-plugins .theme-product-card {
        display: flex;
        flex-direction: column;
      }
      #whmcs-plugins .theme-card-body {
        flex: 1;
        padding-bottom: 14px;
      }
      #whmcs-plugins .theme-card-footer {
        border-top: 1px dashed rgba(20,184,166,.28);
        padding-top: 12px;
      }

      /* ── Plugins section only: teal button + ornament + divider accents ── */
      #whmcs-plugins .theme-buy-btn {
        background: linear-gradient(135deg, #14b8a6, #0d9488);
        box-shadow:
          0 4px 12px rgba(20,184,166,.25),
          0 12px 28px rgba(13,148,136,.16);
      }
      #whmcs-plugins .theme-buy-btn:hover {
        background: linear-gradient(135deg, #0d9488, #0f766e);
        box-shadow:
          0 6px 16px rgba(20,184,166,.38),
          0 16px 40px rgba(13,148,136,.22);
      }
      #whmcs-plugins .theme-archive-btn {
        background: linear-gradient(135deg, #14b8a6, #0d9488);
        box-shadow:
          0 6px 18px rgba(20,184,166,.30),
          0 14px 34px rgba(13,148,136,.18);
      }
      #whmcs-plugins .theme-archive-btn:hover {
        transform: translateY(-2px);
        box-shadow:
          0 8px 22px rgba(20,184,166,.42),
          0 18px 44px rgba(13,148,136,.26);
      }
      #whmcs-plugins .theme-ornament-line { color: #0d9488; }
      #whmcs-plugins .theme-ornament-line-bar {
        background: linear-gradient(270deg, rgba(20,184,166,0) 0%, rgba(20,184,166,.5) 100%);
      }
      #whmcs-plugins .theme-ornament-line .theme-ornament-line-bar:last-child {
        background: linear-gradient(90deg, rgba(20,184,166,0) 0%, rgba(20,184,166,.5) 100%);
      }

/* ── بلاک استایل #5 ── */
/* ── WordPress Theme & Site Design — full-width dark violet identity ── */
      #wp-services {
        position: relative;
        overflow: hidden;
        /* بدون margin-top: موج پایین بخش افزونه‌ها مستقیماً به این بخش محو می‌شود */
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 92px 0 88px;
        background: linear-gradient(180deg, #1e1b4b 0%, #312e81 46%, #2e1065 100%);
        isolation: isolate;
      }
      #wp-services::after {
        content: '';
        position: absolute;
        pointer-events: none;
        z-index: 0;
      }
      /* corner glow moved OUT of the section (was ::before) onto the top wave, see .wps-wave-top-glow */
      #wp-services::after {
        width: 640px; height: 640px; border-radius: 50%;
        background: radial-gradient(circle, rgba(217, 70, 239, .26) 0%, rgba(217, 70, 239, 0) 66%);
        bottom: -180px; right: -150px;
      }
      .wps-grid {
        position: absolute; inset: 0; z-index: 0; pointer-events: none;
        background-image: radial-gradient(circle, rgba(255, 255, 255, .12) 1px, transparent 1.2px);
        background-size: 22px 22px;
        -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 78%);
                mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 78%);
      }
      .wps-ring {
        position: absolute; z-index: 0; pointer-events: none;
        width: 300px; height: 300px; border-radius: 50%;
        border: 1px solid rgba(196, 181, 253, .3);
        bottom: -150px; left: 12%;
      }
      .wps-ring::after {
        content: '';
        position: absolute; inset: 26px; border-radius: 50%;
        border: 1px dashed rgba(196, 181, 253, .22);
      }

      /* ── Top wave: FIRST thing at the top of the violet block — rises OVER the previous (teal) section.
         It is the EXACT SAME solid color + dot grid as #wp-services (see .wps-grid), so wave and section
         read as one continuous violet surface; the shape is clipped to the wave silhouette, so the gaps
         still show the previous section's own teal color. ── */
      .wps-wave-top-wrap {
        position: relative;
        z-index: 4;               /* above the teal section's own background, below its content (z-10) */
        height: 0;
        pointer-events: none;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
      }
      .wps-wave-top {
        position: absolute;
        left: 0;
        top: -131px;
        width: 100%;
        height: 132px;
        background-color: #1e1b4b;   /* same as #wp-services' background top */
        background-image: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1.2px);
        background-size: 22px 22px;  /* same dot pattern + size as .wps-grid */
        clip-path: url(#wpsWaveClipPath);
      }
      .wps-wave-top-defs {
        position: absolute;
        width: 0;
        height: 0;
      }
      /* Former #wp-services::before corner glow, transferred up onto the boundary line. Same circle and
         gradient as before, but anchored to the wrap (wrap top == section top), so the half that used to
         be clipped by the section's overflow:hidden now washes over the wave and the teal edge above it.
         It sits ABOVE the wave (later in DOM) like the old glow sat above the section background. */
      .wps-wave-top-glow {
        position: absolute;
        top: -140px;
        left: -120px;
        width: 560px;
        height: 560px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(139, 92, 246, .42) 0%, rgba(139, 92, 246, 0) 68%);
        pointer-events: none;
      }
      @media (max-width: 640px) {
        .wps-wave-top {
          top: -57px;
          height: 58px;
          /* 58px wave: shift the pattern 14px so its rows land on the same 22px lattice as the section */
          background-position: 0 14px;
        }
      }

      /* ── Bottom wave: violet melts back into the white page ── */
      .wps-wave-bottom {
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 132px;
        z-index: 1;
        pointer-events: none;
      }
      .wps-wave-bottom svg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: block;
      }
      @media (max-width: 640px) {
        .wps-wave-bottom { height: 58px; }
      }

      #wp-services .container-wide { position: relative; z-index: 2; }
      #wp-badge {
        display: inline-flex; align-items: center; gap: 6px;
        border-radius: 9999px; padding: 6px 14px;
        background: rgba(167, 139, 250, .14);
        border: 1px solid rgba(196, 181, 253, .32);
        color: #c4b5fd; font-size: 11px; font-weight: 700;
      }
      #wp-badge svg { width: 13px; height: 13px; }
      .wps-title {
        background: linear-gradient(135deg, #a78bfa 0%, #818cf8 45%, #f0abfc 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        line-height: 1.4;
        padding-bottom: 6px;
      }
      .wps-sub { color: #c7d2fe; font-size: 15px; line-height: 2; max-width: 470px; }
      .wps-ticks { display: flex; flex-direction: column; gap: 12px; }
      .wps-ticks li {
        display: flex; align-items: center; gap: 10px;
        color: #dbe4ff; font-size: 14px; font-weight: 600;
      }
      .wps-tick-ic {
        flex: none; width: 26px; height: 26px; border-radius: 50%;
        background: linear-gradient(135deg, #8b5cf6, #d946ef);
        display: inline-flex; align-items: center; justify-content: center;
        color: #fff; box-shadow: 0 4px 12px -2px rgba(139, 92, 246, .5);
      }
      .wps-tick-ic svg { width: 13px; height: 13px; }
      .wps-cta-row { margin-top: 30px; }
      .wps-cta-primary {
        display: inline-flex; align-items: center; gap: 10px;
        padding: 14px 26px; border-radius: 14px;
        background: linear-gradient(135deg, #8b5cf6, #6d28d9 55%, #d946ef);
        color: #fff; font-weight: 800; font-size: 15px;
        box-shadow: 0 10px 30px -8px rgba(139, 92, 246, .5), 0 4px 14px rgba(217, 70, 239, .3);
        animation: wpsPulse 3s ease-in-out infinite;
        transition: transform .25s;
      }
      .wps-cta-primary:hover { transform: translateY(-2px) scale(1.02); }
      .wps-cta-primary svg { width: 17px; height: 17px; }
      @keyframes wpsPulse {
        0%, 100% { box-shadow: 0 10px 30px -8px rgba(139, 92, 246, .5), 0 4px 14px rgba(217, 70, 239, .3); }
        50%      { box-shadow: 0 14px 44px -6px rgba(139, 92, 246, .78), 0 6px 22px rgba(217, 70, 239, .5); }
      }
      .wps-cta-ghost {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 14px 24px; border-radius: 14px;
        border: 1px solid rgba(196, 181, 253, .4);
        color: #e9e4ff; font-weight: 700; font-size: 14px;
        background: rgba(255, 255, 255, .04);
        transition: all .25s;
      }
      .wps-cta-ghost:hover { background: rgba(255, 255, 255, .09); border-color: rgba(196, 181, 253, .6); }
      .wps-cta-ghost svg { width: 15px; height: 15px; }

      /* ── Browser mockup card ── */
      .wps-device {
        position: relative;
        border-radius: 22px;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .16);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5), 0 0 60px -10px rgba(139, 92, 246, .35);
        padding: 14px;
        margin: 34px 0;
        transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
        animation: wpsFloat 6s ease-in-out infinite;
      }
      @keyframes wpsFloat {
        0%, 100% { transform: perspective(1400px) rotateY(-7deg) rotateX(2deg) translateY(0); }
        50%      { transform: perspective(1400px) rotateY(-7deg) rotateX(2deg) translateY(-10px); }
      }
      .wps-device-bar { display: flex; align-items: center; gap: 6px; padding: 0 2px 12px; }
      .wps-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
      .wps-dot:nth-child(1) { background: #f87171; }
      .wps-dot:nth-child(2) { background: #fbbf24; }
      .wps-dot:nth-child(3) { background: #34d399; }
      .wps-addr {
        margin-inline-start: auto;
        font-size: 10.5px; color: #c7d2fe;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .1);
        padding: 4px 12px; border-radius: 8px;
      }
      .wps-device-body {
        background: rgba(30, 27, 75, .45);
        border-radius: 16px; padding: 18px;
        border: 1px solid rgba(255, 255, 255, .08);
      }
      .wps-device-head { display: flex; align-items: center; gap: 12px; }
      .wps-wp-logo {
        flex: none; width: 46px; height: 46px; border-radius: 13px;
        background: linear-gradient(135deg, #8b5cf6, #4f46e5);
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-family: 'Lalezar', sans-serif; font-size: 24px;
        box-shadow: 0 8px 20px -6px rgba(139, 92, 246, .6);
      }
      .wps-device-title { color: #ede9fe; font-weight: 800; font-size: 14px; }
      .wps-device-sub { color: #a5b4fc; font-size: 11px; margin-top: 2px; }
      .wps-device-toolbar { display: flex; gap: 8px; margin-top: 16px; }
      .wps-device-toolbar span { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
      .wps-device-toolbar span:nth-child(1) { width: 34%; }
      .wps-device-toolbar span:nth-child(2) { width: 22%; }
      .wps-device-toolbar span:nth-child(3) { width: 26%; }
      .wps-device-toolbar span:nth-child(4) { width: 18%; }
      .wps-device-blocks { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; margin-top: 12px; }
      .wps-block { border-radius: 10px; height: 64px; }
      .wps-block-big {
        background: linear-gradient(135deg, rgba(139, 92, 246, .4), rgba(99, 102, 241, .18));
        border: 1px solid rgba(196, 181, 253, .25);
      }
      .wps-block-small {
        background: linear-gradient(135deg, rgba(217, 70, 239, .32), rgba(59, 130, 246, .16));
        border: 1px solid rgba(244, 114, 182, .25);
      }
      .wps-chip {
        position: absolute; z-index: 3;
        display: inline-flex; align-items: center; gap: 6px;
        background: rgba(30, 27, 75, .88);
        border: 1px solid rgba(196, 181, 253, .4);
        color: #e9d5ff; font-size: 11px; font-weight: 700;
        padding: 7px 12px; border-radius: 9999px;
        box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .5);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }
      .wps-chip svg { width: 13px; height: 13px; color: #a78bfa; }
      .wps-chip-1 { top: -18px; right: -14px; }
      .wps-chip-2 { bottom: -16px; left: -10px; }

      /* ── Services cards ── */
      .wps-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
      .wps-card {
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .13);
        border-radius: 18px;
        padding: 22px 20px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: all .3s;
      }
      .wps-card:hover {
        transform: translateY(-4px);
        background: rgba(255, 255, 255, .1);
        border-color: rgba(196, 181, 253, .45);
        box-shadow: 0 18px 40px -14px rgba(139, 92, 246, .4);
      }
      .wps-card-ic {
        width: 44px; height: 44px; border-radius: 13px;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 14px;
      }
      .wps-card-ic svg { width: 21px; height: 21px; color: #fff; }
      .wps-card:nth-child(1) .wps-card-ic { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
      .wps-card:nth-child(2) .wps-card-ic { background: linear-gradient(135deg, #d946ef, #ec4899); }
      .wps-card:nth-child(3) .wps-card-ic { background: linear-gradient(135deg, #6366f1, #3b82f6); }
      .wps-card:nth-child(4) .wps-card-ic { background: linear-gradient(135deg, #0ea5e9, #14b8a6); }
      .wps-card:nth-child(5) .wps-card-ic { background: linear-gradient(135deg, #ec4899, #f43f5e); }
      .wps-card:nth-child(6) .wps-card-ic { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
      .wps-card h3 { color: #f1f5f9; font-weight: 800; font-size: 15px; margin-bottom: 6px; }
      .wps-card p { color: #a5b4fc; font-size: 13px; line-height: 1.9; }
      .wps-footnote {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        margin-top: 24px; color: #c4b5fd; font-size: 13px; font-weight: 600; text-align: center;
      }
      .wps-footnote svg { width: 15px; height: 15px; color: #a78bfa; flex: none; }

      /* ── Responsive ── */
      @media (max-width: 1023px) {
        #wp-services { padding: 76px 0 72px; }
        .wps-device { animation: none; transform: none; margin: 36px 6px 30px; }
        .wps-services { grid-template-columns: repeat(2, 1fr); margin-top: 44px; }
      }
      @media (max-width: 640px) {
        .wps-services { grid-template-columns: 1fr; }
        .wps-title { font-size: 26px; }
        .wps-chip { padding: 6px 10px; font-size: 10px; }
        .wps-device { margin: 30px 2px 24px; }
        .wps-cta-row { flex-direction: column; align-items: stretch; }
        .wps-cta-row a { justify-content: center; }
      }

/* ── بلاک استایل #6 ── */
/* ── Section 3: Business Needs — gradient-frame box, own identity ── */
      #business-needs {
        position: relative;
        border-radius: 40px;
        padding: 3px;
        margin-top: 64px;
        background: linear-gradient(135deg, #7dd3fc 0%, #93c5fd 28%, #a5b4fc 62%, #c4b5fd 100%);
        box-shadow:
          0 18px 50px -18px rgba(59,130,246,.3),
          0 30px 80px -30px rgba(129,140,248,.25);
      }
      .bn-inner {
        position: relative;
        border-radius: 37px;
        overflow: hidden;
        overflow-x: clip;
        padding: 84px 0 84px;
        background: linear-gradient(180deg, #eff8ff 0%, #eaf3ff 42%, #f5f9ff 100%);
      }
      .bn-inner::before {
        content: "";
        position: absolute;
        top: -140px;
        right: -80px;
        width: 380px;
        height: 380px;
        background: radial-gradient(circle, rgba(56,189,248,.28) 0%, transparent 65%);
        pointer-events: none;
        z-index: 0;
      }
      .bn-inner::after {
        content: "";
        position: absolute;
        bottom: -120px;
        left: -70px;
        width: 320px;
        height: 320px;
        background: radial-gradient(circle, rgba(129,140,248,.24) 0%, transparent 65%);
        pointer-events: none;
        z-index: 0;
      }
      @media (max-width: 640px) {
        #business-needs { border-radius: 30px; padding: 2.5px; }
        .bn-inner { border-radius: 27.5px; padding: 72px 0 68px; }
      }

      /* ── Shamse corner ornaments (azure) ── */
      .bn-shamse {
        position: absolute;
        pointer-events: none;
        width: 170px;
        height: 170px;
        z-index: 0;
      }
      .bn-shamse-top { top: -55px; right: -35px; }
      .bn-shamse-bot { bottom: -50px; left: -35px; width: 140px; height: 140px; }
      @media (max-width: 640px) {
        .bn-shamse-top { width: 90px; height: 90px; top: -18px; right: -12px; }
        .bn-shamse-bot { width: 80px; height: 80px; }
      }

      /* ── Business section only: azure ornament line + divider accents ── */
      #business-needs .theme-ornament-line { color: #2563eb; }
      #business-needs .theme-ornament-line-bar {
        background: linear-gradient(270deg, rgba(59,130,246,0) 0%, rgba(59,130,246,.5) 100%);
      }
      #business-needs .theme-ornament-line .theme-ornament-line-bar:last-child {
        background: linear-gradient(90deg, rgba(59,130,246,0) 0%, rgba(59,130,246,.5) 100%);
      }
      #business-needs .theme-card-footer {
        border-top: 1px dashed rgba(59,130,246,.22);
        padding-top: 12px;
      }
      #business-needs .theme-product-card {
        display: flex;
        flex-direction: column;
      }
      #business-needs .theme-card-body {
        flex: 1;
        padding-bottom: 14px;
      }

      /* ── Slider ── */
      .bn-slider-wrap { position: relative; }
      .bn-slider { overflow: hidden; border-radius: 24px; direction: ltr; }
      .bn-track {
        display: flex; gap: 18px;
        transition: transform 0.5s cubic-bezier(.4,0,.2,1);
        padding: 6px 4px 10px;
      }
      .bn-arrow {
        position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
        width: 46px; height: 46px; border-radius: 50%;
        background: linear-gradient(135deg, #3b82f6, #6366f1);
        border: none;
        box-shadow:
          0 4px 16px rgba(59,130,246,.32),
          0 10px 28px rgba(99,102,241,.2);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; transition: all .25s;
      }
      .bn-arrow svg { width: 18px; height: 18px; color: #fff; }
      .bn-arrow:hover {
        transform: translateY(-50%) scale(1.06);
        box-shadow:
          0 6px 22px rgba(59,130,246,.46),
          0 14px 36px rgba(99,102,241,.3);
      }
      .bn-arrow-left  { left: -8px; }
      .bn-arrow-right { right: -8px; }
      .bn-arrow.disabled { opacity: .35; pointer-events: none; }
      @media (max-width: 640px)  {
        .bn-arrow { width: 38px; height: 38px; }
        .bn-arrow svg { width: 15px; height: 15px; }
        .bn-arrow-left  { left: 6px; }
        .bn-arrow-right { right: 6px; }
        .bn-track .theme-product-card { flex: 0 0 100% !important; min-width: 0 !important; }
      }
      @media (min-width: 641px) and (max-width: 1024px) {
        .bn-track .theme-product-card { flex: 0 0 calc(50% - 9px) !important; min-width: 0 !important; }
      }

      /* ── Dots ── */
      .bn-dots { display: flex; justify-content: center; gap: 7px; margin-top: 20px; }
      .bn-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: #cbd5e1; cursor: pointer; transition: all .3s;
      }
      .bn-dot.active {
        width: 26px;
        border-radius: 5px;
        background: linear-gradient(90deg, #3b82f6, #6366f1);
      }


/* ============================================================
   index1.html — کلاس‌های جایگزین attr های inline
   (تبدیل style="..." به کلاس — مطابق الگوی تفکیک CSS)
   ============================================================ */
.tg-f0 { animation: tagFloat 3s ease-in-out 0s infinite; }
.tg-f1 { animation: tagFloat 3s ease-in-out .3s infinite; }
.tg-f2 { animation: tagFloat 3s ease-in-out .6s infinite; }
.tg-f3 { animation: tagFloat 3s ease-in-out .9s infinite; }
.tg-f4 { animation: tagFloat 3s ease-in-out 1.2s infinite; }
.tg-f5 { animation: tagFloat 3s ease-in-out 1.5s infinite; }

.bd-blue      { background: rgba(37,99,235,.85);  color: #fff; }
.bd-slate     { background: rgba(30,41,59,.85);   color: #e2e8f0; }
.bd-emerald   { background: rgba(16,185,129,.85); color: #fff; }
.bd-emerald-9 { background: rgba(16,185,129,.9);  color: #fff; }
.bd-violet    { background: rgba(124,58,237,.85); color: #fff; }
.bd-sky       { background: rgba(59,130,246,.85); color: #fff; }
.bd-sky-disabled       { background: #979ba3d9; color: #fff; }
.bd-indigo    { background: rgba(99,102,241,.85); color: #fff; }
.bd-amber     { background: rgba(245,158,11,.85); color: #fff; }
.bd-amber-9   { background: rgba(245,158,11,.9);  color: #fff; }
.bd-teal      { background: rgba(20,184,166,.85); color: #fff; }
.bd-teal-9    { background: rgba(20,184,166,.9);  color: #fff; }
.bd-azur-9    { background: rgba(14,165,233,.9);  color: #fff; }
.bd-rose      { background: rgba(244,63,94,.85);  color: #fff; }
.bd-rose-9    { background: rgba(244,63,94,.9);   color: #fff; }
.bd-cyan      { background: rgba(8,145,178,.85);  color: #fff; }
.bd-abs       { position: absolute; top: 16px; right: 16px; z-index: 2; }

.cp-card  { flex: 0 0 calc(25% - 14px); min-width: 0; }

.ft-shadow { box-shadow: 0 -8px 30px rgba(0,0,0,.06), 0 -2px 8px rgba(0,0,0,.03); }
.ft-bg     { background: linear-gradient(180deg, #f8faff 0%, #ffffff 30%); }
.pat-indigo { background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2736%27 height=%2736%27 viewBox=%270 0 36 36%27%3E%3Cpath d=%27M18 2 L22.5 12.5 L34 18 L23.5 22.5 L18 34 L13.5 23.5 L2 18 L12.5 13.5 Z%27 fill=%27%236366f1%27 fill-opacity=%270.04%27/%3E%3C/svg%3E'); background-size: 36px 36px; }
.pat-white  { background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2736%27 height=%2736%27 viewBox=%270 0 36 36%27%3E%3Cpath d=%27M18 2 L22.5 12.5 L34 18 L23.5 22.5 L18 34 L13.5 23.5 L2 18 L12.5 13.5 Z%27 fill=%27%23ffffff%27 fill-opacity=%270.06%27/%3E%3C/svg%3E');  background-size: 36px 36px; }
.cta-grad { background: linear-gradient(120deg, #1e3a8a 0%, #2563eb 48%, #4f46e5 100%); box-shadow: 0 24px 50px -12px rgba(37,99,235,.45); }
/* ══ lg-* : صفحه ورود به حساب ══ */
.lg-login {
  max-width: 470px;
  margin: 0 auto;
  padding: 44px 0 60px;
  position: relative;
  scroll-margin-top: 90px;
}
/* هاله ملایم پشت کارت */
.lg-login::before {
  content: '';
  position: absolute;
  inset: -40px -70px;
  z-index: -1;
  background:
    radial-gradient(340px 200px at 85% 0%, rgba(79,70,229,.07), transparent 62%),
    radial-gradient(300px 200px at 8% 100%, rgba(129,140,248,.07), transparent 62%);
  pointer-events: none;
}
.lg-login-card {
  background: #fff;
  border: 1px solid rgba(15,23,42,.07);
  border-radius: 24px;
  padding: 2.6rem 2.25rem;
  box-shadow: 0 26px 60px -32px rgba(79,70,229,.30);
  text-align: center;
}
.lg-login-icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 18px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, #4338ca, #6366f1);
  box-shadow: 0 12px 24px -12px rgba(79,70,229,.6);
}
.lg-login-icon svg { width: 26px; height: 26px; }
.lg-login-card h1 { font-size: 21px; font-weight: 800; color: #0f172a; }
.lg-login-sub { font-size: 13.5px; line-height: 1.95; color: #64748b; margin: 8px 0 22px; }

/* فرم */
.lg-form { text-align: right; display: flex; flex-direction: column; gap: 16px; }
.lg-label {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 700; color: #475569; margin-bottom: 7px;
}
.lg-label .req { color: #f43f5e; }
.lg-field {
  width: 100%; height: 48px; border-radius: 13px; border: 1.5px solid #e2e8f0;
  background: #f8fafc; padding: 0 14px; font-size: 14px; color: #0f172a;
  outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
  direction: rtl;
}
.lg-field::placeholder { color: #94a3b8; }
.lg-field:focus { border-color: #6366f1; background: #fff; box-shadow: 0 0 0 4px rgba(99,102,241,.12); }
.lg-field-email { direction: ltr; text-align: left; }
.lg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lg-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; }
.lg-remember input { width: 17px; height: 17px; accent-color: #6366f1; border-radius: 5px; }
.lg-forgot { font-size: 13px; font-weight: 700; color: #4f46e5; }
.lg-forgot:hover { text-decoration: underline; }
.lg-btn {
  width: 100%; height: 50px; border: none; border-radius: 13px; cursor: pointer;
  background: linear-gradient(135deg, #4338ca, #6366f1); color: #fff;
  font-size: 15px; font-weight: 800; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 12px 26px -14px rgba(79,70,229,.65); transition: transform .2s, box-shadow .2s;
}
.lg-btn svg { width: 19px; height: 19px; }
.lg-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(79,70,229,.7); }

/* جداکننده و ورود با شبکه‌ها */
.lg-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: #94a3b8; font-size: 12.5px; font-weight: 600; }
.lg-divider::before, .lg-divider::after { content: ''; flex: 1; height: 1px; background: #eef2f7; }
.lg-social { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lg-social-btn {
  height: 46px; border-radius: 12px; cursor: pointer; font-family: inherit;
  border: 1.5px solid #e2e8f0; background: #fff; color: #334155;
  font-size: 13.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: border-color .2s, background .2s;
}
.lg-social-btn svg { width: 18px; height: 18px; }
.lg-social-btn:hover { border-color: #c7d2fe; background: #f5f7ff; }

/* پایین کارت */
.lg-login-alt { text-align: center; font-size: 13.5px; color: #64748b; margin-top: 18px; }
.lg-login-alt a { color: #4f46e5; font-weight: 800; }
.lg-login-alt a:hover { text-decoration: underline; }
.lg-login-sec { text-align: center; font-size: 12px; color: #94a3b8; margin-top: 12px; line-height: 1.9; }

@media (max-width: 480px) {
  .lg-login { padding: 28px 0 44px; }
  .lg-login-card { padding: 2rem 1.4rem; border-radius: 20px; }
  .lg-login-card h1 { font-size: 19px; }
}

@media (max-width: 420px) {
  .lg-social { grid-template-columns: 1fr; }
}

/* ══ rg-* : صفحه عضویت ══ */
.rg-login { padding-top: 36px; }
.rg-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* باکس کپچا: کادر دار، تصویر وسط‌چین */
.rg-captcha-box {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  position: relative;
  border: 1.5px solid #e2e8f0; border-radius: 14px;
  padding: 14px 16px; background: #fff;
}
.rg-captcha-img {
  flex: none; width: 108px; height: 48px; border-radius: 12px; overflow: hidden;
  border: 1px solid #e2e8f0;
  background:
    repeating-linear-gradient(45deg, rgba(79,70,229,.05) 0 6px, transparent 6px 12px),
    linear-gradient(135deg, #eef2ff, #f8fafc);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.rg-captcha-img i { font-family: var(--app-display); font-size: 19px; font-weight: 800; font-style: italic; }
.rg-captcha-img i:nth-child(1) { color: #4f46e5; transform: rotate(-8deg); }
.rg-captcha-img i:nth-child(2) { color: #0ea5e9; transform: rotate(5deg); }
.rg-captcha-img i:nth-child(3) { color: #f59e0b; transform: rotate(-4deg); }
.rg-captcha-img i:nth-child(4) { color: #10b981; transform: rotate(7deg); }
.rg-captcha-input {
  width: 100%; height: 38px; border: none; border-bottom: 1.5px solid #e2e8f0;
  background: transparent; border-radius: 0; text-align: center;
  direction: rtl; padding: 0; font-size: 14px; color: #0f172a; outline: none;
  transition: border-color .2s;
  flex: none;
}
.rg-captcha-input::placeholder { color: #94a3b8; }
.rg-captcha-input:focus { border-bottom-color: #6366f1; box-shadow: none; background: transparent; }
.rg-captcha-refresh {
  position: absolute; top: 12px; left: 12px;
  width: 40px; height: 40px; border-radius: 11px; cursor: pointer;
  border: 1.5px solid #e2e8f0; background: #fff; color: #64748b; font-size: 16px;
  display: grid; place-items: center; transition: border-color .2s, color .2s, transform .25s;
}
.rg-captcha-refresh:hover { border-color: #c7d2fe; color: #4f46e5; transform: rotate(180deg); }
.rg-terms {
  display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 18px;
  font-size: 12.5px; line-height: 1.95; color: #64748b; text-align: right;
}
.rg-terms a { color: #4f46e5; font-weight: 700; }
.rg-terms a:hover { text-decoration: underline; }
.rg-terms input { width: 17px; height: 17px; accent-color: #6366f1; margin-top: 2px; flex: none; }

@media (max-width: 380px) {
  .rg-captcha-img { width: 92px; }
  .rg-captcha-img i { font-size: 16px; }
}

/* ══ db-* : داشبورد کاربری ══ */
.db-top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 18px 0 4px;
}
.db-top h1 { font-size: 26px; font-weight: 800; color: #0f172a; }
.db-top .accent { color: #4f46e5; }
.db-top-sub { font-size: 13.5px; color: #64748b; margin-top: 6px; }
.db-top-actions { display: flex; align-items: center; gap: 12px; }
.db-online {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: #059669;
  background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 999px; padding: 6px 12px;
}
.db-online i { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.15); }
.db-logout {
  font-size: 12.5px; font-weight: 700; color: #f43f5e;
  background: #fff1f2; border: 1px solid #fecdd3; border-radius: 999px; padding: 6px 14px;
  transition: background .2s;
}
.db-logout:hover { background: #ffe4e6; }

/* گرید اصلی */
.db-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; margin-top: 1.25rem; }

/* سایدبار */
/* ── هدر: منوی کاربری (نام + زیرمنو) ── */
.db-uc { position: relative; }
.db-uc-details { position: static; }
.db-uc-btn {
  list-style: none; display: flex; align-items: center; gap: 9px;
  cursor: pointer; user-select: none; height: 44px;
  background: linear-gradient(135deg, #4338ca, #6366f1); color: #fff;
  padding: 4px 14px 4px 8px; border-radius: 999px;
  box-shadow: 0 10px 20px -10px rgba(79,70,229,.55);
  transition: box-shadow .2s, transform .2s;
}
.db-uc-btn::-webkit-details-marker { display: none; }
.db-uc-btn:hover { box-shadow: 0 14px 26px -10px rgba(79,70,229,.65); transform: translateY(-1px); }
.db-uc-avatar {
  width: 33px; height: 33px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.38);
  font-family: var(--app-display); font-size: 15px; font-weight: 800;
  display: grid; place-items: center;
}
.db-uc-name { font-size: 13px; font-weight: 800; }
.db-uc-caret {
  width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .25s; margin: 0 3px 2px 1px;
}
.db-uc-details[open] .db-uc-caret { transform: rotate(135deg); }
.db-uc-menu {
  position: absolute; top: calc(100% + 10px); right: 0; width: 240px;
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 16px;
  padding: 8px; z-index: 95;
  box-shadow: 0 26px 55px -20px rgba(15,23,42,.35);
}
.db-uc-menu::before {
  content: ''; position: absolute; top: -6px; right: 24px; width: 12px; height: 12px;
  background: #fff; transform: rotate(45deg);
  border: 1px solid rgba(15,23,42,.08); border-right: none; border-bottom: none;
}
.db-uc-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: #334155; text-decoration: none;
  padding: 10px 12px; border-radius: 10px; transition: background .2s, color .2s;
}
.db-uc-item svg { flex: none; color: #64748b; transition: color .2s; }
.db-uc-item:hover { background: #eef2ff; color: #4338ca; }
.db-uc-item:hover svg { color: #4338ca; }
.db-uc-sep { height: 1px; background: #eef2f7; margin: 5px 4px; }
.db-uc-item.danger { color: #e11d48; }
.db-uc-item.danger svg { color: #e11d48; }
.db-uc-item.danger:hover { background: #fff1f2; color: #be123c; }
.db-uc-item.danger:hover svg { color: #be123c; }

/* ── سایدبار کاربری ── */
.db-side {
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 18px;
  padding: 0; overflow: hidden; position: sticky; top: 92px;
  box-shadow: 0 16px 36px -28px rgba(15,23,42,.18);
}
.db-side-user {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 12px;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border-bottom: 1px solid #e0e7ff;
}
.db-side-avatar {
  width: 40px; height: 40px; border-radius: 13px; flex: none;
  background: linear-gradient(135deg, #4338ca, #6366f1); color: #fff;
  font-family: var(--app-display); font-size: 18px;
  display: grid; place-items: center;
  box-shadow: 0 8px 16px -8px rgba(79,70,229,.6);
}
.db-side-id { min-width: 0; }
.db-side-id b { display: block; font-size: 13.5px; font-weight: 800; color: #1e1b4b; }
.db-side-id small { font-size: 11px; color: #6b7ab5; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-side-tier {
  margin-right: auto; flex: none;
  font-size: 10px; font-weight: 800; color: #4338ca;
  background: #fff; border: 1px solid #c7d2fe; border-radius: 999px; padding: 3px 9px;
}
.db-nav { display: flex; flex-direction: column; padding: 10px 10px 12px; }
.db-group { border-radius: 12px; }
.db-group + .db-group, .db-nav > .db-item { margin-top: 2px; }
.db-group summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700; color: #334155;
  padding: 7px 8px; border-radius: 11px; transition: background .2s, color .2s;
}
.db-group summary::-webkit-details-marker { display: none; }
.db-group summary:hover { background: #f5f7ff; color: #4338ca; }
.db-group[open] summary { background: #eef2ff; color: #4338ca; }
.db-gicon {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: grid; place-items: center; color: #6366f1;
  background: #f1f5f9; transition: background .2s, color .2s;
}
.db-gicon svg { width: 16px; height: 16px; }
.db-group summary:hover .db-gicon { background: #e0e7ff; }
.db-group[open] summary .db-gicon { background: #4338ca; color: #fff; }
.db-caret { width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .25s; margin: 0 0 1px auto; }
.db-group[open] .db-caret { transform: rotate(135deg); }
.db-sub { display: flex; flex-direction: column; padding: 4px 0 8px; }
.db-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: #64748b; text-decoration: none;
  padding: 8px 10px; margin: 0 8px; border-radius: 9px;
  border-right: 3px solid transparent; transition: background .2s, color .2s, border-color .2s;
}
.db-item svg { flex: none; width: 16px; height: 16px; color: #94a3b8; transition: color .2s; }
.db-item:hover { background: #f8fafc; color: #4338ca; border-right-color: #6366f1; }
.db-item:hover svg { color: #4338ca; }
.db-item.is-active { background: #eef2ff; color: #4338ca; border-right-color: #6366f1; font-weight: 800; }
.db-dot { width: 5px; height: 5px; border-radius: 50%; background: #c7d2fe; flex: none; margin-right: 2px; transition: background .2s, transform .2s; }
.db-item:hover .db-dot, .db-item.is-active .db-dot { background: #6366f1; transform: scale(1.25); }
.db-badge {
  float: left; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 2px 8px;
  background: #eef2ff; color: #4338ca;
}
.db-nav > a.db-item { margin: 0 0; }
.db-sep {
  height: 1px; margin: 9px 4px;
  background: linear-gradient(90deg, transparent, #e2e8f0 12%, #e2e8f0 88%, transparent);
}

/* محتوا */
.db-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* آمار */
.db-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.db-stat {
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 16px;
  padding: 16px 18px; position: relative; overflow: hidden;
  transition: transform .22s, box-shadow .22s;
}
.db-stat:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -26px rgba(15,23,42,.35); }
.db-stat-icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-size: 19px; margin-bottom: 12px;
}
.db-stat.s1 .db-stat-icon { background: #eef2ff; }
.db-stat.s2 .db-stat-icon { background: #fff7ed; }
.db-stat.s3 .db-stat-icon { background: #fef2f2; }
.db-stat.s4 .db-stat-icon { background: #ecfdf5; }
.db-stat b { display: block; font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1.1; }
.db-stat small { font-size: 12.5px; font-weight: 700; color: #64748b; }
.db-stat p { font-size: 11.5px; color: #94a3b8; margin-top: 8px; line-height: 1.8; }

/* کارت‌های محتوا */
.db-card {
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 18px;
  padding: 1.4rem 1.5rem; box-shadow: 0 16px 36px -30px rgba(15,23,42,.2);
}
.db-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.db-card-head h2 { font-size: 16px; font-weight: 800; color: #0f172a; }
.db-see-all { font-size: 12.5px; font-weight: 700; color: #4f46e5; text-decoration: none; }
.db-see-all:hover { text-decoration: underline; }

/* اطلاعات کاربر */
.db-user-head { display: flex; align-items: center; gap: 14px; }
.db-avatar {
  width: 54px; height: 54px; border-radius: 16px; flex: none;
  background: linear-gradient(135deg, #4338ca, #6366f1); color: #fff;
  font-family: var(--app-display); font-size: 24px;
  display: grid; place-items: center; box-shadow: 0 10px 22px -12px rgba(79,70,229,.6);
}
.db-user-id b { display: block; font-size: 15.5px; font-weight: 800; color: #0f172a; }
.db-user-id small { font-size: 12.5px; color: #94a3b8; }
.db-user-level {
  margin-right: auto; font-size: 11.5px; font-weight: 800; color: #b45309;
  background: #fef3c7; border: 1px solid #fde68a; border-radius: 999px; padding: 5px 12px;
}
.db-user-body { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #eef2f7; }
.db-user-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 13px; color: #475569; }
.db-user-meta b { color: #0f172a; font-weight: 800; }
.db-user-bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.db-user-bar-track { flex: 1; height: 8px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.db-user-bar-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.db-user-bar small { font-size: 11.5px; color: #94a3b8; font-weight: 600; }

/* فاکتورها */
.db-inv { display: flex; flex-direction: column; }
.db-inv-head, .db-inv-row {
  display: grid; grid-template-columns: 1.1fr 1fr 1.4fr .9fr; gap: 12px; align-items: center;
  padding: 10px 12px; font-size: 13px;
}
.db-inv-head { font-weight: 800; color: #94a3b8; font-size: 11.5px; background: #f8fafc; border-radius: 10px; }
.db-inv-row { color: #475569; border-bottom: 1px solid #f1f5f9; font-weight: 600; }
.db-inv-row:last-child { border-bottom: none; }
.db-inv-row:hover { background: #f8fafc; }
.db-st { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 4px 10px; justify-self: start; }
.db-st.ok { color: #059669; background: #ecfdf5; }
.db-st.wait { color: #b45309; background: #fef3c7; }
.db-st.over { color: #e11d48; background: #fff1f2; }

/* باکس شارژ شگفت‌انگیز */
.db-charge {
  position: relative; overflow: hidden;
  border-radius: 20px; color: #fff;
  background: linear-gradient(120deg, #1e1b4b 0%, #312e81 45%, #4f46e5 100%);
  box-shadow: 0 26px 50px -26px rgba(79,70,229,.5);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 1.6rem 1.8rem;
}
.db-charge-deco {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2736%27 height=%2736%27 viewBox=%270 0 36 36%27%3E%3Cpath d=%27M18 2 L22.5 12.5 L34 18 L23.5 22.5 L18 34 L13.5 23.5 L2 18 L12.5 13.5 Z%27 fill=%27%23ffffff%27 fill-opacity=%270.05%27/%3E%3C/svg%3E');
  background-size: 36px 36px;
}
.db-charge-copy { position: relative; max-width: 480px; }
.db-charge-tag {
  display: inline-block; font-size: 11px; font-weight: 800;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; padding: 4px 12px; margin-bottom: 10px;
}
.db-charge h2 { font-size: 19px; font-weight: 800; }
.db-charge p { font-size: 13px; line-height: 2; color: #c7d2fe; margin-top: 6px; }
.db-charge p b { color: #fff; }
.db-charge-btn {
  position: relative; flex: none;
  background: #fff; color: #312e81;
  font-size: 13.5px; font-weight: 800; text-decoration: none;
  border-radius: 13px; padding: 13px 22px;
  box-shadow: 0 14px 26px -12px rgba(15,23,42,.5);
  transition: transform .2s, box-shadow .2s;
}
.db-charge-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(15,23,42,.55); }

/* واکنش‌گرایی */
@media (max-width: 1100px) {
  .db-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .db-wrap { grid-template-columns: 1fr; }
  .db-side { position: static; }
}
@media (max-width: 480px) {
  .db-stats { grid-template-columns: 1fr; }
  .db-inv-head { display: none; }
  .db-inv-row {
    grid-template-columns: 1fr 1.2fr auto;
    row-gap: 4px; border: 1px solid #f1f5f9; border-radius: 12px; margin-bottom: 8px; padding: 12px;
  }
  .db-inv-row span:nth-child(2) { grid-column: 1; }
  .db-inv-row span:nth-child(3) { grid-column: 2; }
  .db-inv-row .db-st { grid-column: 3; grid-row: 1 / span 2; }
}

/* ══ db-2 : داشبورد نسخه جدید (خوش‌آمد / موجودی / بنرها / اطلاعات / بسته‌ها) ══ */

/* خوش‌آمد */
.db-hello {
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 18px;
  padding: 1.15rem 1.5rem;
  background-image: linear-gradient(120deg, #f8faff, #eef2ff 55%, #f5f3ff);
}
.db-hello h2 { font-size: 19px; font-weight: 800; color: #1e1b4b; }
.db-hello p { font-size: 13px; color: #64748b; margin-top: 6px; }

/* آمار: موجودی + ۴ کارت */
.db-stats { display: grid; grid-template-columns: 1.15fr repeat(4, 1fr); gap: 14px; align-items: stretch; }
.db-wallet {
  position: relative; overflow: hidden; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  box-shadow: 0 20px 40px -22px rgba(37,99,235,.65);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
}
.db-wallet::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2736%27 height=%2736%27 viewBox=%270 0 36 36%27%3E%3Cpath d=%27M18 2 L22.5 12.5 L34 18 L23.5 22.5 L18 34 L13.5 23.5 L2 18 L12.5 13.5 Z%27 fill=%27%23ffffff%27 fill-opacity=%270.06%27/%3E%3C/svg%3E');
  background-size: 34px 34px;
}
.db-wallet-ic {
  width: 40px; height: 40px; border-radius: 12px; position: relative;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25);
  display: grid; place-items: center; font-size: 19px; margin-bottom: 6px;
}
.db-wallet small { position: relative; font-size: 12px; font-weight: 700; color: #c7d2fe; }
.db-wallet b { position: relative; font-size: 24px; font-weight: 800; }
.db-wallet-link {
  position: relative; margin-top: auto; align-self: flex-start;
  font-size: 11.5px; font-weight: 800; color: #fff; text-decoration: none;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px; padding: 5px 12px; transition: background .2s;
}
.db-wallet-link:hover { background: rgba(255,255,255,.28); }

/* کارت‌های آماری (۴ عدد بعدی) */
.db-stat {
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 16px;
  padding: 16px 18px; position: relative; overflow: hidden;
  transition: transform .22s, box-shadow .22s;
}
.db-stat:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -26px rgba(15,23,42,.35); }
.db-stat-icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-size: 19px; margin-bottom: 12px;
}
.db-stat.s1 .db-stat-icon { background: #eff6ff; }
.db-stat.s2 .db-stat-icon { background: #fff7ed; }
.db-stat.s3 .db-stat-icon { background: #fef2f2; }
.db-stat.s4 .db-stat-icon { background: #ecfdf5; }
.db-stat b { display: block; font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1.1; }
.db-stat small { font-size: 12.5px; font-weight: 700; color: #64748b; }
.db-stat p { font-size: 11.5px; color: #94a3b8; margin-top: 8px; line-height: 1.8; }

/* بنرهای اطلاع‌رسانی */
.db-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.db-banner {
  position: relative; overflow: hidden; border-radius: 18px; color: #fff;
  padding: 1.1rem 1.2rem;
  display: flex; align-items: center; gap: 14px;
}
.db-banner.b1 { background: linear-gradient(120deg, #1d4ed8, #4f46e5); box-shadow: 0 22px 44px -24px rgba(29,78,216,.6); }
.db-banner.b2 { background: linear-gradient(120deg, #7c3aed, #c026d3); box-shadow: 0 22px 44px -24px rgba(124,58,237,.55); }
.db-banner-deco {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2728%27 height=%2728%27 viewBox=%270 0 28 28%27%3E%3Ccircle cx=%272%27 cy=%272%27 r=%272%27 fill=%27%23ffffff%27 fill-opacity=%270.14%27/%3E%3C/svg%3E');
  background-size: 28px 28px;
}
.db-banner-emoji {
  width: 44px; height: 44px; flex: none; position: relative;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  border-radius: 13px; display: grid; place-items: center; font-size: 21px;
}
.db-banner-copy { flex: 1; position: relative; min-width: 0; }
.db-banner h3 { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.db-banner p { font-size: 12px; line-height: 1.9; color: rgba(255,255,255,.82); }
.db-banner-btn {
  flex: none; position: relative;
  background: #fff; font-size: 12px; font-weight: 800; text-decoration: none;
  border-radius: 11px; padding: 10px 16px;
  box-shadow: 0 12px 24px -12px rgba(15,23,42,.5);
  transition: transform .2s;
}
.db-banner-btn:hover { transform: translateY(-2px); }
.db-banner.b1 .db-banner-btn { color: #1d4ed8; }
.db-banner.b2 .db-banner-btn { color: #7c3aed; }

/* اطلاعات شما */
.db-profile dl { margin: 0; }
.db-pro { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.db-pro > div { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px dashed #eef2f7; }
.db-pro dt { font-size: 12.5px; font-weight: 600; color: #94a3b8; width: 150px; flex: none; }
.db-pro dd { margin: 0; font-size: 13.5px; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 8px; }
.db-ver {
  font-size: 10.5px; font-weight: 800; color: #059669;
  background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 999px; padding: 3px 9px;
}

/* فاکتورهای اخیر (مدل جدید) */
.db-inv { display: flex; flex-direction: column; }
.db-inv-row {
  display: grid; grid-template-columns: 1.3fr 1fr .9fr auto; gap: 12px; align-items: center;
  padding: 13px 10px; border-bottom: 1px solid #f1f5f9;
  transition: background .2s;
}
.db-inv-row:last-child { border-bottom: none; }
.db-inv-row:hover { background: #f8fafc; }
.db-inv-no { font-size: 13px; font-weight: 700; color: #334155; }
.db-inv-amt { font-size: 14.5px; font-weight: 800; color: #4338ca; }
.db-inv-exp { font-size: 12px; color: #94a3b8; font-weight: 600; }
.db-inv-link { font-size: 12px; font-weight: 700; color: #4f46e5; text-decoration: none; }
.db-inv-link:hover { text-decoration: underline; }

/* شارژ شگفت‌انگیز */
.db-wow-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.db-wow-top h2 { font-size: 16px; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 8px; }
.db-wow-tag {
  font-size: 10.5px; font-weight: 800; color: #b45309;
  background: #fef3c7; border: 1px solid #fde68a; border-radius: 999px; padding: 3px 10px;
}
.db-wow-order {
  font-size: 12.5px; font-weight: 800; color: #1d4ed8; text-decoration: none;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 11px; padding: 9px 16px;
  transition: background .2s;
}
.db-wow-order:hover { background: #dbeafe; }
.db-wow-rules { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.db-wow-rules li {
  font-size: 12.5px; font-weight: 600; color: #475569;
  border-radius: 10px; padding: 9px 13px;
  display: flex; align-items: center; gap: 9px;
}
.db-wow-rules li.ok { background: #f0fdf4; color: #166534; }
.db-wow-rules li.no { background: #fef2f2; color: #9f1239; }
.db-wow-rules li.ok::marker, .db-wow-rules li.no::marker { content: ''; }
.db-wow-cta {
  font-size: 12px; font-weight: 800; color: #4338ca;
  margin: 0 0 10px; padding-right: 4px; letter-spacing: .2px;
}

/* بسته‌های شارژ */
.db-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.db-pack {
  position: relative; border: 1px solid #e2e8f0; border-radius: 16px;
  padding: 1.1rem 1.15rem; background: #fff;
  display: flex; flex-direction: column; transition: transform .22s, box-shadow .22s;
}
.db-pack:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -24px rgba(15,23,42,.3); }
.db-pack h3 { font-size: 14.5px; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.db-pack-rows { display: flex; flex-direction: column; margin-bottom: 12px; flex: 1; }
.db-pack-rows span { font-size: 11.5px; font-weight: 600; color: #94a3b8; margin-bottom: 3px; }
.db-pack-rows b { font-size: 14px; font-weight: 800; color: #1e293b; margin-bottom: 8px; }
.db-pack-btn {
  font-size: 12.5px; font-weight: 800; text-align: center; text-decoration: none;
  color: #4338ca; background: #eef2ff; border: 1px solid #c7d2fe;
  border-radius: 11px; padding: 10px 0; transition: background .2s, color .2s;
}
.db-pack-btn:hover { background: #4338ca; color: #fff; }
.db-pack.hot {
  background: linear-gradient(160deg, #312e81, #4f46e5);
  border: none; color: #fff;
  box-shadow: 0 24px 48px -24px rgba(79,70,229,.6);
}
.db-pack.hot h3 { color: #fff; }
.db-pack.hot .db-pack-rows span { color: #a5b4fc; }
.db-pack.hot .db-pack-rows b { color: #fff; }
.db-pack.hot .db-pack-btn { background: #fff; color: #312e81; border: none; }
.db-pack.hot .db-pack-btn:hover { background: #eef2ff; }
.db-pack-hot {
  position: absolute; top: -11px; right: -6px;
  font-size: 10px; font-weight: 800; color: #fff;
  background: linear-gradient(120deg, #f59e0b, #f97316);
  border-radius: 999px; padding: 4px 11px;
  box-shadow: 0 8px 16px -6px rgba(245,158,11,.6);
}

/* عملیات سریع */
.db-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.db-q {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 800; color: #334155; text-decoration: none;
  border: 1px solid rgba(15,23,42,.07); border-radius: 14px; padding: 16px 8px;
  transition: transform .22s, box-shadow .22s;
}
.db-q span { font-size: 22px; }
.db-q:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(15,23,42,.35); }
.db-q.q1 { background: #eff6ff; }
.db-q.q2 { background: #eef2ff; }
.db-q.q3 { background: #f5f3ff; }
.db-q.q4 { background: #f0f9ff; }

/* واکنش‌گرایی جدید */
@media (max-width: 1200px) {
  .db-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .db-banners { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .db-packs { grid-template-columns: 1fr; }
  .db-pro { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .db-stats { grid-template-columns: repeat(2, 1fr); }
  .db-quick-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .db-inv-row { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .db-inv-link { justify-self: start; }
  .db-banner { flex-wrap: wrap; }
  .db-banner-btn { width: 100%; text-align: center; }
}

/* ══ db-3 : چیدمان اصلاح‌شده ══ */

/* خوش‌آمد + موجودی حساب در یک ردیف */
.db-hello { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.db-hello-copy { flex: 1; min-width: 240px; }
.db-hello-wallet {
  display: flex; align-items: center; gap: 13px; flex: none;
  background: linear-gradient(135deg, #2563eb, #4f46e5); color: #fff;
  border-radius: 16px; padding: 10px 20px 10px 10px;
  box-shadow: 0 18px 38px -18px rgba(37,99,235,.6);
}
.db-hw-ic {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26);
  display: grid; place-items: center; font-size: 19px;
}
.db-hw-meta { display: flex; flex-direction: column; }
.db-hw-meta small { font-size: 11px; font-weight: 700; color: #bfdbfe; }
.db-hw-meta b { font-size: 17px; font-weight: 800; line-height: 1.4; }
.db-hw-btn {
  font-size: 11.5px; font-weight: 800; color: #1d4ed8;
  background: #fff; text-decoration: none; border-radius: 10px; padding: 9px 15px;
  transition: transform .2s, box-shadow .2s;
}
.db-hw-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -8px rgba(15,23,42,.4); }

/* چهار باکس وضعیت رنگی */
.db-stats { grid-template-columns: repeat(4, 1fr); }
.db-stat { color: #fff; border: none; }
.db-stat b { color: #fff; }
.db-stat small { color: rgba(255,255,255,.88); }
.db-stat p { color: rgba(255,255,255,.75); }
.db-stat.s1 { background: linear-gradient(135deg, #2563eb, #3b82f6); box-shadow: 0 20px 40px -22px rgba(37,99,235,.6); }
.db-stat.s2 { background: linear-gradient(135deg, #f59e0b, #fb923c); box-shadow: 0 20px 40px -22px rgba(245,158,11,.55); }
.db-stat.s3 { background: linear-gradient(135deg, #e11d48, #fb7185); box-shadow: 0 20px 40px -22px rgba(225,29,72,.5); }
.db-stat.s4 { background: linear-gradient(135deg, #059669, #34d399); box-shadow: 0 20px 40px -22px rgba(5,150,105,.5); }
.db-stat-icon { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28); }

/* بنرهای اطلاع‌رسانی: زیر هم */
.db-banners { grid-template-columns: 1fr; }

@media (max-width: 1200px) {
  .db-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .db-stats { grid-template-columns: 1fr; }
  .db-hello-wallet { width: 100%; justify-content: flex-start; }
}

/* ══ db-4 : سایدبار جمع‌وجورتر + حالت کشویی موبایل ══ */

/* فشرده‌سازی منو */
.db-nav { padding: 8px 8px 12px; }
.db-group summary { padding: 7px 8px; }
.db-group[open] summary { box-shadow: inset 0 0 0 1px rgba(99,102,241,.12); }
.db-sub { padding: 2px 0 6px; }
.db-item { padding: 7px 10px; margin: 0 6px; font-size: 12.5px; }
.db-dot { width: 4px; height: 4px; margin-right: 2px; }
.db-sep { margin: 7px 2px; }

/* دکمه منوی داشبورد (فقط موبایل) */
.db-menu-trigger {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; color: #312e81; cursor: pointer;
  background: #fff; border: 1px solid #c7d2fe; border-radius: 999px; padding: 8px 16px;
  box-shadow: 0 8px 18px -12px rgba(79,70,229,.5);
  transition: background .2s, color .2s;
}
.db-menu-trigger:hover { background: #eef2ff; }
@media (min-width: 861px) {
  .db-menu-trigger { display: none; }
}

/* overlay */
.db-overlay {
  position: fixed; inset: 0; z-index: 114;
  background: rgba(15,23,42,.45);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
body.db-menu-open .db-overlay { opacity: 1; visibility: visible; }

/* سایدبار: حالت کشویی در موبایل */
@media (max-width: 860px) {
  .db-side {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 300px; max-width: 88vw;
    border-radius: 0 0 0 0;
    overflow-y: auto;
    z-index: 120;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .32s ease, visibility .32s;
    box-shadow: -26px 0 60px -30px rgba(15,23,42,.55);
  }
  body.db-menu-open .db-side { transform: translateX(0); visibility: visible; }
  body.db-menu-open { overflow: hidden; }
}


/* ===== صفحه سرویس‌های من ===== */
.sv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; margin: 6px 0 18px; }
.sv-head h1 { font-size: 23px; font-weight: 800; color: #1e1b4b; }
.sv-head p { font-size: 13px; color: #64748b; margin-top: 6px; max-width: 640px; }
.sv-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: 100%; max-width: 480px; }
.sv-search { position: relative; display: flex; align-items: center; width: 100%; }
.sv-search > span { position: absolute; right: 13px; font-size: 15px; opacity: .55; pointer-events: none; }
.sv-search input {
  width: 100%; padding: 11px 42px 11px 14px; font: inherit; font-size: 13px;
  border: 1px solid rgba(15,23,42,.12); border-radius: 12px; background: #fff; outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.sv-search input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.sv-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.sv-chip {
  padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 600; color: #64748b;
  background: #fff; border: 1px solid rgba(15,23,42,.12); border-radius: 999px; cursor: pointer;
  transition: all .18s;
}
.sv-chip:hover { border-color: #a5b4fc; color: #4338ca; }
.sv-chip.on { background: linear-gradient(135deg,#2563eb,#4f46e5); color: #fff; border-color: transparent;
  box-shadow: 0 10px 20px -12px rgba(79,70,229,.7); }

.sv-list { display: flex; flex-direction: column; gap: 12px; min-height: 60px; }
.sv-row {
  display: grid; grid-template-columns: minmax(220px,1.4fr) auto minmax(300px,1.6fr) auto;
  gap: 14px 20px; align-items: center;
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 16px; padding: 14px 18px;
  transition: border-color .18s, box-shadow .18s;
}
.sv-row:hover { border-color: rgba(79,70,229,.35); box-shadow: 0 14px 30px -22px rgba(37,99,235,.5); }
.sv-main b { display: block; font-size: 14.5px; font-weight: 700; color: #1e1b4b; }
.sv-main code {
  display: inline-block; margin-top: 6px; font-size: 11.5px; color: #4f46e5;
  background: #eef2ff; border: 1px solid #e0e7ff; padding: 3px 9px; border-radius: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3px;
}
.sv-status { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.st-active { color: #047857; background: #d1fae5; }
.st-renew  { color: #b45309; background: #fef3c7; }
.st-expired{ color: #b91c1c; background: #fee2e2; }
.sv-meta { display: flex; gap: 22px; flex-wrap: wrap; }
.sv-meta span { display: flex; flex-direction: column; gap: 3px; }
.sv-meta small { font-size: 11px; color: #94a3b8; }
.sv-meta b { font-size: 13px; font-weight: 700; color: #334155; }
.sv-actions { display: flex; gap: 8px; }
.sv-btn {
  text-decoration: none; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 11px;
  background: linear-gradient(135deg,#2563eb,#4f46e5); color: #fff; white-space: nowrap; cursor: pointer;
  transition: transform .15s, opacity .15s; border: 0;
}
.sv-btn:hover { transform: translateY(-1px); opacity: .94; }
.sv-btn.ghost { background: #fff; color: #4338ca; border: 1px solid #c7d2fe; }

.sv-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 22px; flex-wrap: wrap; }
.sv-info { font-size: 12.5px; color: #64748b; min-height: 18px; }
.sv-pager { display: flex; gap: 6px; flex-wrap: wrap; }
.sv-pg {
  min-width: 38px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600;
  color: #475569; background: #fff; border: 1px solid rgba(15,23,42,.12); border-radius: 10px; cursor: pointer;
  transition: all .16s;
}
.sv-pg:hover:not(:disabled) { border-color: #a5b4fc; color: #4338ca; }
.sv-pg.on { background: linear-gradient(135deg,#2563eb,#4f46e5); color: #fff; border-color: transparent; }
.sv-pg:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 900px) {
  .sv-row { grid-template-columns: 1fr auto; }
  .sv-meta { grid-column: 1 / -1; }
  .sv-actions { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sv-tools { max-width: 100%; }
  .sv-row { grid-template-columns: 1fr; }
  .sv-status { justify-self: start; }
  .sv-meta { gap: 14px; }
  .sv-foot { flex-direction: column; align-items: flex-start; }
}


/* ===== صفحه جزئیات سرویس ===== */
.svd-top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 6px 0 18px;
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 18px; padding: 16px 20px;
  background-image: linear-gradient(120deg, #f8faff, #eef2ff 55%, #f5f3ff);
}
.svd-id { display: flex; align-items: center; gap: 14px; }
.svd-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px;
  background: linear-gradient(135deg,#2563eb,#4f46e5); color: #fff; box-shadow: 0 12px 24px -12px rgba(37,99,235,.6); }
.svd-id h1 { font-size: 20px; font-weight: 800; color: #1e1b4b; }
.svd-id code { display: inline-block; margin-top: 5px; font-size: 11.5px; color: #4f46e5;
  background: #eef2ff; border: 1px solid #e0e7ff; padding: 3px 10px; border-radius: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3px; }
.svd-top-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.svd-exp { font-size: 12.5px; color: #64748b; }
.svd-exp b { color: #b45309; font-weight: 700; }

.svd-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.svd-tab { padding: 10px 18px; font: inherit; font-size: 13.5px; font-weight: 700; color: #64748b;
  background: #fff; border: 1px solid rgba(15,23,42,.1); border-radius: 12px; cursor: pointer;
  transition: all .18s; }
.svd-tab:hover { border-color: #a5b4fc; color: #4338ca; }
.svd-tab.is-on { background: linear-gradient(135deg,#2563eb,#4f46e5); color: #fff; border-color: transparent;
  box-shadow: 0 12px 22px -14px rgba(79,70,229,.75); }

.svd-pane { display: none; flex-direction: column; gap: 14px; }
.svd-pane.is-on { display: flex; animation: svdFade .22s ease; }
@keyframes svdFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.svd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.svd-card { background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 16px; padding: 18px 20px; }
.svd-card h3 { font-size: 14.5px; font-weight: 800; color: #1e1b4b; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px dashed #e2e8f0; }
.svd-def { display: flex; flex-direction: column; }
.svd-def > div { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px dashed #eef2f7; }
.svd-def > div:last-child { border-bottom: 0; }
.svd-def dt { font-size: 12.5px; color: #94a3b8; }
.svd-def dd { font-size: 13.5px; font-weight: 700; color: #334155; text-align: left; }
.svd-def code { font-size: 11.5px; color: #4f46e5; background: #eef2ff; border: 1px solid #e0e7ff;
  padding: 2px 8px; border-radius: 7px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.svd-desc { font-size: 13px; line-height: 1.9; color: #475569; }
.svd-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.svd-dl { display: flex; flex-direction: column; }
.svd-dl-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 0; border-bottom: 1px dashed #eef2f7; flex-wrap: wrap; }
.svd-dl-row:last-child { border-bottom: 0; }
.svd-dl-row b { display: block; font-size: 13.5px; color: #1e1b4b; }
.svd-dl-row small { display: block; margin-top: 4px; font-size: 11.5px; color: #94a3b8; }

.svd-lic { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px;
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; margin-bottom: 6px; }
.svd-lic span { font-size: 12.5px; color: #64748b; }
.svd-lic code { font-size: 13px; font-weight: 700; color: #4f46e5;
  font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3px; }

.svd-tbl { overflow-x: auto; }
.svd-tbl-row { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr 1fr .8fr; gap: 10px;
  align-items: center; padding: 12px 8px; border-bottom: 1px dashed #eef2f7; font-size: 13px; }
.svd-tbl-hd { color: #94a3b8; font-size: 11.5px; font-weight: 700; border-bottom: 1px solid #e2e8f0; }
.svd-tbl-hd span { white-space: nowrap; }
.svd-link { color: #4338ca; font-weight: 700; text-decoration: none; }
.svd-link:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .svd-grid { grid-template-columns: 1fr; }
  .svd-top { align-items: flex-start; }
  .svd-tbl-row { grid-template-columns: 1fr 1fr; }
  .svd-tbl-hd { display: none; }
  .svd-tbl-row span:nth-child(3), .svd-tbl-row span:nth-child(4) { grid-column: span 1; }
}


/* ===== صفحه فاکتورها ===== */
.inv-list { display: flex; flex-direction: column; gap: 12px; min-height: 60px; }
.inv-row {
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 16px;
  overflow: hidden; transition: border-color .18s, box-shadow .18s;
}
.inv-row:hover { border-color: rgba(79,70,229,.35); box-shadow: 0 14px 30px -22px rgba(37,99,235,.5); }
.inv-head {
  display: grid; grid-template-columns: minmax(220px,1.4fr) auto minmax(280px,1.5fr) auto;
  gap: 14px 20px; align-items: center; padding: 14px 18px;
}
.inv-main b { display: block; font-size: 14px; font-weight: 700; color: #1e1b4b; margin-top: 4px; }
.inv-main code { display: inline-block; font-size: 12px; color: #4f46e5;
  background: #eef2ff; border: 1px solid #e0e7ff; padding: 3px 10px; border-radius: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3px; }
.inv-meta { display: flex; gap: 22px; flex-wrap: wrap; }
.inv-meta span { display: flex; flex-direction: column; gap: 3px; }
.inv-meta small { font-size: 11px; color: #94a3b8; }
.inv-meta b { font-size: 13px; font-weight: 700; color: #334155; }
.inv-actions { display: flex; gap: 8px; align-items: center; }
.inv-toggle {
  padding: 9px 14px; font: inherit; font-size: 12.5px; font-weight: 700; color: #4338ca;
  background: #eef2ff; border: 1px solid #e0e7ff; border-radius: 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: all .18s;
}
.inv-toggle::after { content: '▾'; font-size: 10px; opacity: .7; transition: transform .18s; }
.inv-toggle[aria-expanded="true"] { background: linear-gradient(135deg,#2563eb,#4f46e5);
  color: #fff; border-color: transparent; }
.inv-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

.inv-det { padding: 0 18px 16px; animation: invGrow .2s ease; }
@keyframes invGrow { from { opacity: .4; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.inv-det-label { font-size: 11.5px; font-weight: 800; color: #64748b; margin: 2px 0 8px; }
.inv-items { width: 100%; border-collapse: collapse; font-size: 13px;
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; overflow: hidden; }
.inv-items th { font-size: 11.5px; color: #94a3b8; font-weight: 700; text-align: right;
  padding: 9px 14px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
.inv-items td { padding: 9px 14px; color: #334155; border-bottom: 1px dashed #eef2f7; }
.inv-items tr:last-child td { border-bottom: 0; }
.inv-items .num { text-align: left; font-weight: 700; white-space: nowrap; }
.inv-det-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 10px; font-size: 13.5px; }
.inv-det-foot span { color: #64748b; }
.inv-det-foot b { color: #1e1b4b; font-size: 15px; }

@media (max-width: 900px) {
  .inv-head { grid-template-columns: 1fr auto; }
  .inv-meta { grid-column: 1 / -1; }
  .inv-actions { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .inv-head { grid-template-columns: 1fr; }
  .inv-status { justify-self: start; }
  .inv-actions { flex-wrap: wrap; }
  .inv-det { padding: 0 10px 12px; overflow-x: auto; }
}


/* ===== صفحه مشاهده فاکتور ===== */
.invv-top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 6px 0 18px;
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 18px; padding: 16px 20px;
  background-image: linear-gradient(120deg, #f8faff, #eef2ff 55%, #f5f3ff); }
.invv-id { display: flex; align-items: center; gap: 14px; }
.invv-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px;
  background: linear-gradient(135deg,#2563eb,#4f46e5); color: #fff; box-shadow: 0 12px 24px -12px rgba(37,99,235,.6); }
.invv-id h1 { font-size: 20px; font-weight: 800; color: #1e1b4b; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.invv-id code { font-size: 14px; color: #4f46e5; background: #eef2ff; border: 1px solid #e0e7ff;
  padding: 3px 10px; border-radius: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3px; }
.invv-svc { display: block; margin-top: 5px; font-size: 13px; color: #64748b; }
.invv-top-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.invv-due { font-size: 12.5px; color: #64748b; }
.invv-due b { color: #b45309; font-weight: 700; }

.invv-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; align-items: start; }
.invv-main { display: flex; flex-direction: column; gap: 14px; }
.invv-side { display: flex; flex-direction: column; gap: 14px; }

.invv-items { width: 100%; border-collapse: collapse; font-size: 13px; }
.invv-items th { font-size: 11.5px; color: #94a3b8; font-weight: 700; text-align: right;
  padding: 8px 12px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
.invv-items td { padding: 10px 12px; color: #334155; border-bottom: 1px dashed #eef2f7; }
.invv-items tr:last-child td { border-bottom: 0; }
.invv-items .num { text-align: left; font-weight: 700; white-space: nowrap; }

.invv-totals { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e2e8f0;
  display: flex; flex-direction: column; gap: 8px; }
.invv-totals > div { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.invv-totals span { color: #64748b; }
.invv-totals b { color: #334155; }
.invv-totals .invv-total { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px;
  padding: 10px 14px; }
.invv-totals .invv-total span { font-weight: 800; color: #1e1b4b; }
.invv-totals .invv-total b { font-size: 16px; color: #4338ca; }

.invv-gws { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.invv-gw { display: flex; align-items: center; gap: 11px; text-align: right; cursor: pointer;
  padding: 13px 14px; font: inherit;
  background: #fff; border: 1.5px solid rgba(15,23,42,.1); border-radius: 14px; transition: all .18s; }
.invv-gw:hover { border-color: #a5b4fc; }
.invv-gw.is-on { border-color: #4f46e5; background: #f5f3ff;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.invv-gw-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-size: 18px; background: #f1f5f9; border: 1px solid #e2e8f0; flex-shrink: 0; }
.invv-gw.is-on .invv-gw-ic { background: #eef2ff; border-color: #e0e7ff; }
.invv-gw-body b { display: block; font-size: 13.5px; color: #1e1b4b; }
.invv-gw-body small { display: block; margin-top: 3px; font-size: 11px; color: #94a3b8; line-height: 1.5; }

.invv-paybar { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.invv-pay-btn { font-size: 14.5px; padding: 12px 26px; }
.invv-demo { font-size: 12px; color: #b45309; background: #fef3c7; border: 1px solid #fde68a;
  padding: 8px 12px; border-radius: 10px; }
.invv-red { color: #b91c1c; }

@media (max-width: 980px) {
  .invv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .invv-gws { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .invv-gws { grid-template-columns: 1fr; }
}


/* ===== صفحه شارژ حساب ===== */
.rcg-top { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; margin: 6px 0 18px; }
.rcg-top h1 { font-size: 23px; font-weight: 800; color: #1e1b4b; }
.rcg-top p { font-size: 13px; color: #64748b; margin-top: 6px; max-width: 640px; }
.rcg-wallet {
  position: relative; overflow: hidden; border-radius: 18px; color: #fff; min-width: 250px;
  background: linear-gradient(135deg, #2563eb, #4f46e5); padding: 18px 22px;
  box-shadow: 0 20px 40px -22px rgba(37,99,235,.65); display: flex; flex-direction: column; gap: 4px;
}
.rcg-wallet::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2736%27 height=%2736%27 viewBox=%270 0 36 36%27%3E%3Cpath d=%27M18 2 L22.5 12.5 L34 18 L23.5 22.5 L18 34 L13.5 23.5 L2 18 L12.5 13.5 Z%27 fill=%27%23ffffff%27 fill-opacity=%270.06%27/%3E%3C/svg%3E');
  background-size: 34px 34px; }
.rcg-wallet small { position: relative; font-size: 12px; font-weight: 700; opacity: .85; }
.rcg-wallet b { position: relative; font-size: 24px; font-weight: 800; letter-spacing: .2px; }
.rcg-wallet span { position: relative; font-size: 11px; opacity: .75; }

.rcg-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }
.rcg-chip { padding: 9px 16px; font: inherit; font-size: 13px; font-weight: 700; color: #475569;
  background: #fff; border: 1.5px solid rgba(15,23,42,.12); border-radius: 12px; cursor: pointer;
  transition: all .18s; }
.rcg-chip:hover { border-color: #a5b4fc; color: #4338ca; }
.rcg-chip.is-on { background: linear-gradient(135deg,#2563eb,#4f46e5); color: #fff; border-color: transparent;
  box-shadow: 0 12px 22px -14px rgba(79,70,229,.7); }
.rcg-input { position: relative; display: flex; align-items: center; max-width: 320px; }
.rcg-input input { width: 100%; padding: 11px 16px; font: inherit; font-size: 14px; font-weight: 600;
  border: 1.5px solid rgba(15,23,42,.14); border-radius: 12px; outline: none; transition: border-color .18s, box-shadow .18s; }
.rcg-input input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.rcg-input span { position: absolute; left: 14px; font-size: 12px; color: #94a3b8; font-weight: 700; pointer-events: none; }
.rcg-min { margin-top: 8px; font-size: 11.5px; color: #94a3b8; }

.rcg-hx { overflow-x: auto; }
.rcg-hx-row { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr .9fr .8fr; gap: 10px;
  align-items: center; padding: 12px 8px; border-bottom: 1px dashed #eef2f7; font-size: 13px; color: #334155; }
.rcg-hx-row:last-child { border-bottom: 0; }
.rcg-hx-hd { color: #94a3b8; font-size: 11.5px; font-weight: 700; border-bottom: 1px solid #e2e8f0 !important; }
.rcg-hx-amt { font-weight: 700; }

@media (max-width: 720px) {
  .rcg-wallet { min-width: 100%; }
  .rcg-hx-row { grid-template-columns: 1fr 1fr; }
  .rcg-hx-hd { display: none; }
}

/* ===== پرداخت دلخواه (pay-any.html) ===== */
.cpay-targets{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.cpay-target{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--ln);border-radius:12px;background:#fff;cursor:pointer;text-align:right;transition:all .15s;width:100%}
.cpay-target:hover{border-color:var(--pk);background:#f6f8ff}
.cpay-target.is-on{border-color:var(--pk);background:#eef3ff;box-shadow:0 0 0 1px var(--pk) inset}
.cpay-target .cpay-t-ic{width:38px;height:38px;border-radius:10px;background:#f1f4fb;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.cpay-target.is-on .cpay-t-ic{background:#fff}
.cpay-target b{display:block;font-size:14px;color:var(--tx)}
.cpay-target small{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
.cpay-invsel{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cpay-invsel[hidden]{display:none}
.cpay-invsel label{font-size:13px;color:var(--tx);white-space:nowrap;font-weight:600}
.cpay-invsel select{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--ln);border-radius:10px;font-size:13px;font-family:inherit;background:#fff;color:var(--tx)}
.cpay-invsel select:focus{outline:2px solid var(--pk);outline-offset:1px;border-color:var(--pk)}
.cpay-note{display:block;font-size:13px;font-weight:600;color:var(--tx)}
.cpay-note input{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid var(--ln);border-radius:10px;font-size:13px;font-family:inherit}
.cpay-note input:focus{outline:2px solid var(--pk);outline-offset:1px;border-color:var(--pk)}
.cpay-hx{display:flex;flex-direction:column;gap:8px}
.cpay-hx-row{display:grid;grid-template-columns:1.1fr 1.1fr 1.3fr 1fr .8fr;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--ln);border-radius:10px;background:#fff;font-size:12.5px;color:var(--tx)}
.cpay-hx-hd{background:#f7f8fb;font-size:12px;font-weight:700;color:var(--mut);padding:8px 12px}
.cpay-hx-amt{font-weight:700}
.cpay-hx .sv-status{justify-self:start}

/* ===== وضعیت‌های تیکت (tickets.html) ===== */
.st-wait{color:#1d4ed8;background:#dbeafe}
.st-mute{color:#475569;background:#e5e7eb}

/* ===== منوی فیلتر وضعیت تیکت (tickets.html) ===== */
.tk-filt{position:relative;display:inline-flex}
.tk-filt-btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--ln);border-radius:12px;background:#fff;font:inherit;font-size:13px;font-weight:700;color:var(--tx);cursor:pointer;transition:border-color .15s, box-shadow .15s;white-space:nowrap}
.tk-filt-btn:hover{border-color:var(--pk)}
.tk-filt-btn:focus-visible{outline:2px solid var(--pk);outline-offset:1px}
.tk-filt-btn[aria-expanded="true"]{border-color:var(--pk);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.tk-filt-cnt{font-size:11.5px;font-weight:800;color:#4f46e5;background:#eef2ff;border:1px solid #e0e7ff;border-radius:999px;padding:1px 8px}
.tk-caret{font-size:9px;color:#94a3b8;transition:transform .18s}
.tk-filt-btn[aria-expanded="true"] .tk-caret{transform:rotate(180deg)}
.tk-filt-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;max-width:calc(100vw - 32px);background:#fff;border:1px solid rgba(15,23,42,.1);border-radius:14px;box-shadow:0 18px 40px -18px rgba(30,27,75,.35);padding:6px;z-index:60;display:flex;flex-direction:column;gap:2px}
.tk-filt-menu[hidden]{display:none}
.tk-fopt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:9px;background:transparent;font:inherit;font-size:13px;color:var(--tx);cursor:pointer;text-align:right}
.tk-fopt:hover{background:#f6f7fb}
.tk-fopt-t{flex:1;text-align:right}
.tk-fopt-c{font-size:11px;font-weight:800;color:#94a3b8;background:#f1f5f9;border-radius:999px;padding:1px 8px}
.tk-fopt.on{background:#eef2ff}
.tk-fopt.on .tk-fopt-t{color:#4338ca;font-weight:700}
.tk-fopt.on .tk-fopt-c{color:#4338ca;background:#e0e7ff}
.tk-fopt.on::after{content:'✓';color:#4f46e5;font-size:12px;font-weight:900}

/* ===== چیدمان سربرگ و لیست تیکت (tickets.html) ===== */
.sv-head.tk-head{display:block}
.tk-left{display:flex;flex-direction:column;gap:14px}
.tk-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.tk-bar .sv-search{flex:1 1 300px;width:auto;max-width:560px}
.tk-list{display:flex;flex-direction:column;gap:16px;min-height:60px}


/* ==== ارسال تیکت جدید (ticket-new.html) ==== */
.tkg-lead{font-size:13.5px;color:#64748b;line-height:1.9;margin:0 0 4px}
.tkg-tips{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.tkg-tips li{position:relative;padding-right:28px;font-size:13.5px;color:#334155;line-height:1.85}
.tkg-tips li::before{content:'\2713';position:absolute;right:0;top:3px;width:18px;height:18px;border-radius:6px;background:#eef2ff;color:#4f46e5;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center}
.tkg-tips code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:1px 6px;color:#0f172a}
.tkg-box{margin-top:16px;padding:12px 14px;background:#fffbeb;border:1px solid #fde68a;border-radius:12px;font-size:13px;color:#92400e;line-height:1.85}
.tkg-terms{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding:13px 15px;border:1px dashed #cbd5e1;border-radius:12px;background:#fbfcfe;cursor:pointer;position:relative;font-size:13px;color:#334155;line-height:1.75;user-select:none}
.tkg-terms input{position:absolute;top:13px;right:15px;width:20px;height:20px;opacity:0;z-index:2;margin:0;cursor:pointer}
.tkg-tick{width:20px;height:20px;border:2px solid #cbd5e1;border-radius:6px;background:#fff;position:relative;flex:none;transition:background .15s,border-color .15s}
.tkg-terms input:checked ~ .tkg-tick{background:#4f46e5;border-color:#4f46e5}
.tkg-terms input:checked ~ .tkg-tick::after{content:'\2713';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:900}
.tkg-terms input:focus-visible ~ .tkg-tick{outline:2px solid #4f46e5;outline-offset:2px}
.tkg-terms-txt a{color:#4f46e5;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.tkg-terms-txt a:hover{color:#3730a3}
.tk-send-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid #e8edf5}
.tk-send-hint{font-size:12px;color:#94a3b8;line-height:1.7}
.tk-send-hint[hidden]{display:none}
.tk-send{min-width:150px}
.sv-btn:disabled,.sv-btn:disabled:hover{opacity:.45;cursor:not-allowed;transform:none}


/* ==== انتخاب دپارتمان (ticket-dept.html) ==== */
.tkd-sub{font-size:13px;color:#64748b;line-height:1.8;margin:0 0 14px}
.tkd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.tkd-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:right;padding:15px 16px 14px;border:1.5px solid #e2e8f0;border-radius:14px;background:#fff;cursor:pointer;font:inherit;transition:border-color .15s,background .15s,transform .15s}
.tkd-card:hover{border-color:#c7d2fe;transform:translateY(-1px)}
.tkd-card:focus-visible{outline:2px solid #4f46e5;outline-offset:2px}
.tkd-card.is-sel{border-color:#4f46e5;background:#eef2ff}
.tkd-ic{width:38px;height:38px;border-radius:11px;background:#eef2ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;margin-bottom:4px;transition:background .15s,color .15s}
.tkd-card.is-sel .tkd-ic{background:#4f46e5;color:#fff}
.tkd-t{font-size:14px;font-weight:800;color:#0f172a}
.tkd-desc{font-size:12px;color:#64748b;line-height:1.75}
.tkd-chk{position:absolute;top:12px;left:12px;width:22px;height:22px;border:2px solid #cbd5e1;border-radius:50%;background:#fff;transition:background .15s,border-color .15s}
.tkd-card.is-sel .tkd-chk{background:#4f46e5;border-color:#4f46e5}
.tkd-card.is-sel .tkd-chk::after{content:'\2713';color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
/* حالت لیستی دپارتمان‌ها (هر ردیف + دکمه ارسال تیکت) */
.tkd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tkd-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid #e2e8f0;border-radius:14px;background:#fff;transition:border-color .15s,background .15s,transform .15s}
.tkd-item:hover{border-color:#c7d2fe;transform:translateY(-1px)}
.tkd-item .tkd-ic{flex:none;margin-bottom:0}
.tkd-item .tkd-info{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.tkd-item .tkd-go{flex:none;padding:9px 18px;font-size:13px}
@media (max-width:560px){
  .tkd-item{flex-wrap:wrap;gap:10px}
  .tkd-item .tkd-go{width:100%;justify-content:center}
}
.tkd-empty{display:flex;align-items:center;justify-content:center;padding:26px 16px;border:1.5px dashed #cbd5e1;border-radius:14px;background:#fbfcfe;font-size:13px;font-weight:600;color:#1d4ed8}
.tkf-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 20px;text-align:center;border:1.5px dashed #cbd5e1;border-radius:14px;background:#fbfcfe;color:#64748b}
.tkf-empty svg{color:#c7d2fe}
.tkf-empty b{font-size:14px;color:#334155}
.tkf-empty span{font-size:12.5px;max-width:420px;line-height:1.85}
/* فرم سفارش نصب و کانفیگ (صفحه سفارشی config) */
.cfg-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}
.cfg-main{min-width:0}
.cfg-group{border:1.5px solid #e2e8f0;border-radius:14px;padding:14px 16px;margin:0 0 14px;background:#fbfcfe}
.cfg-group legend{padding:0 6px;font-weight:700;font-size:13.5px;color:#334155}
.cfg-req{color:#dc2626}
.cfg-error{background:#fdecea;border:1.5px solid #f5c6cb;color:#b02a37;border-radius:12px;padding:12px 16px;margin:0 0 14px;font-size:13.5px;font-weight:600}
.cfg-opt-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:2px}
.cfg-opt{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1.5px solid #e2e8f0;border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s;flex:1 1 230px;min-width:0}
.cfg-opt:hover{border-color:#c7d2fe}
.cfg-opt input{margin-top:3px;accent-color:#4f46e5;width:16px;height:16px;flex:none}
.cfg-opt:has(input:checked){border-color:#4f46e5;background:#eef2ff}
.cfg-opt-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.cfg-opt-n{font-size:13.5px;font-weight:600;color:#1e293b}
.cfg-opt-p{font-size:12px;color:#1d4ed8;font-weight:700}
.cfg-side{position:sticky;top:96px;display:grid;gap:14px}
.cfg-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:20px;box-shadow:0 18px 44px -22px rgba(15,23,42,.12)}
.cfg-side-head{padding-bottom:12px;border-bottom:1px dashed #e2e8f0;margin-bottom:4px}
.cfg-side-head h3{margin:0 0 4px;font-size:15px;font-weight:900;color:#0f172a}
.cfg-side-head p{margin:0;font-size:12px;color:#64748b;font-weight:700}
.cfg-side-items{list-style:none;margin:0;padding:4px 0 0;display:flex;flex-direction:column}
.cfg-side-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 2px;font-size:12.5px;font-weight:700;color:#475569;border-bottom:1px dashed #eef2f6}
.cfg-side-row:last-child{border-bottom:0}
.cfg-side-row span{min-width:0;flex:1}
.cfg-side-row b{font-weight:900;color:#0f172a;white-space:nowrap;font-variant-numeric:tabular-nums}
.cfg-side-row b.free{color:#047857}
.cfg-total{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:14px;background:#eef2ff;border:1.5px solid #c7d2fe;margin:12px 0}
.cfg-total span{font-size:13.5px;font-weight:700;color:#334155}
.cfg-total b{font-size:17px;color:#4f46e5;font-weight:900;white-space:nowrap}
.cfg-submit{width:100%;justify-content:center;font-size:14.5px;padding:13px 20px}
.cfg-note{font-size:12px;color:#64748b;line-height:1.9;margin:12px 0 0;padding-top:12px;border-top:1px dashed #e2e8f0}
.cfg-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cfg-groups .cfg-group{margin-bottom:0}
.cfg-prod-desc{font-size:12.5px;color:#475569;line-height:2;background:#f8fafc;border:1.5px dashed #e2e8f0;border-radius:12px;padding:10px 14px;margin:0 0 14px}
.cfg-cf-grid{display:grid;grid-template-columns:1fr;gap:14px}
.cfg-cf-field{display:flex;flex-direction:column;gap:6px}
.cfg-cf-field input[type=text],.cfg-cf-field input[type=password],.cfg-cf-field textarea,.cfg-cf-field select{font:inherit;font-size:13.5px;color:#1e293b;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:11px 14px;outline:none;width:100%;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}
.cfg-cf-field input:focus,.cfg-cf-field textarea:focus,.cfg-cf-field select:focus{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.09)}
.cfg-cf-field textarea{resize:vertical;min-height:96px;line-height:1.9}
.cfg-cf-desc{font-size:12px;color:#64748b;line-height:1.85}
.cfg-cf-field.cfg-cf-err input,.cfg-cf-field.cfg-cf-err textarea,.cfg-cf-field.cfg-cf-err select{border-color:#dc2626;background:#fef2f2}
.cfg-cf-field.cfg-cf-err .cfg-cf-desc{color:#dc2626}
.cfg-cf-inline{display:flex;flex-wrap:wrap;gap:8px}
.cfg-cf-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1.5px solid #e2e8f0;border-radius:12px;background:#fff;cursor:pointer;font-size:13px;font-weight:700;color:#334155;transition:border-color .15s ease,background .15s ease}
.cfg-cf-chip:hover{border-color:#c7d2fe}
.cfg-cf-chip input{accent-color:#4f46e5}
@media (max-width:1023px){
  .cfg-layout{grid-template-columns:minmax(0,1fr) 300px;gap:18px}
}
@media (max-width:960px){
  .cfg-groups{grid-template-columns:1fr}
}
@media (max-width:860px){
  .cfg-layout{grid-template-columns:1fr}
  .cfg-side{position:static}
  .cfg-opt{flex:1 1 100%}
}


/* ==== فرم نوشتن تیکت (ticket-form.html) ==== */
.tkf-field{margin-top:18px}
.tkf-lbl{display:block;font-size:13px;font-weight:700;color:#0f172a;margin-bottom:8px}
.tkf-sel{width:100%;padding:11px 12px;border:1px solid #e2e8f0;border-radius:10px;font-size:13px;font-family:inherit;background:#fff;color:#334155}
.tkf-sel:focus{outline:2px solid #4f46e5;outline-offset:1px;border-color:#4f46e5}
.tkf-sel.tkf-err{border-color:#dc2626;outline-color:#dc2626}
.tkf-req{color:#dc2626;font-weight:800}
.tkf-opt{color:#94a3b8;font-weight:500;font-size:11.5px}
.tkf-chips{display:flex;gap:10px;flex-wrap:wrap}
.tkf-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border:1.5px solid #e2e8f0;border-radius:11px;background:#fff;font-size:13px;font-weight:600;color:#334155;cursor:pointer;transition:border-color .15s,background .15s;user-select:none}
.tkf-chip input{position:absolute;opacity:0;pointer-events:none}
.tkf-chip.is-on{border-color:#4f46e5;background:#eef2ff;color:#3730a3}
.tkf-chip:focus-within{outline:2px solid #4f46e5;outline-offset:2px}
.tkf-dot{width:8px;height:8px;border-radius:50%;flex:none}
.tkf-dot-n{background:#16a34a}
.tkf-dot-u{background:#d97706}
.tkf-dot-c{background:#dc2626}
.tkf-tarea{width:100%;padding:12px;border:1px solid #e2e8f0;border-radius:10px;font-size:13.5px;font-family:inherit;color:#334155;line-height:1.9;resize:vertical;min-height:120px}
.tkf-tarea:focus{outline:2px solid #4f46e5;outline-offset:1px;border-color:#4f46e5}
.tkf-tarea.tkf-err{border-color:#dc2626;outline-color:#dc2626}
.tkf-count{text-align:left;font-size:11.5px;color:#94a3b8;margin-top:5px}
.tkf-file{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tkf-file-hint{font-size:12px;color:#94a3b8;line-height:1.7}
.tkf-att{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.tkf-att-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;font-size:12.5px}
.tkf-att-ic{color:#4f46e5;display:flex}
.tkf-att-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#0f172a;font-weight:600;direction:ltr;text-align:left}
.tkf-att-size{color:#94a3b8;font-size:11.5px;white-space:nowrap}
.tkf-att-rm{width:24px;height:24px;border:0;border-radius:7px;background:#f1f5f9;color:#64748b;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tkf-att-rm:hover{background:#fee2e2;color:#dc2626}
.tkf-back{float:left;font-size:12px;font-weight:600;color:#4f46e5;text-decoration:none;line-height:1.9}
.tkf-back:hover{color:#3730a3;text-decoration:underline}


/* ==== صفحه تأیید ارسال تیکت (ticket-done.html) ==== */
.tkok{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 20px 26px}
.tkok-ic{width:84px;height:84px;border-radius:50%;background:#ecfdf5;color:#16a34a;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.tkok h2{font-size:20px;color:#0f172a;margin:0}
.tkok-code{font-size:13.5px;color:#64748b;margin:8px 0 0}
.tkok-code b{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:15px;color:#4f46e5;background:#eef2ff;border:1px solid #c7d2fe;border-radius:8px;padding:2px 10px}
.tkok-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:560px;margin-top:18px}
.tkok-cell{display:flex;flex-direction:column;gap:3px;padding:11px 12px;border:1px solid #e2e8f0;border-radius:11px;background:#fbfcfe}
.tkok-cell span{font-size:11px;color:#94a3b8;font-weight:600}
.tkok-cell b{font-size:13px;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkok-note{font-size:12.5px;color:#94a3b8;line-height:1.85;margin:16px 0 0;max-width:440px}
.tkok-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;justify-content:center}


/* ==== تعرفه انکود (encode.html) ==== */
.enc-head-act{display:flex;align-items:center;gap:8px}
.enc-send{display:inline-flex;align-items:center;gap:8px}
.enc-sub{font-size:13px;color:#64748b;line-height:1.85;margin:0 0 16px}
.enc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.enc-plan{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px 18px 16px;border:1.5px solid #e2e8f0;border-radius:14px;background:#fff}
.enc-plan.enc-hot{border-color:#4f46e5;background:#eef2ff}
.enc-badge{position:absolute;top:-10px;left:14px;background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:99px}
.enc-plan-t{font-size:13.5px;font-weight:800;color:#0f172a;line-height:1.7}
.enc-plan-q{font-size:11.5px;color:#94a3b8}
.enc-plan-p{font-size:22px;color:#1e1b4b;margin-top:6px;display:flex;align-items:baseline;gap:6px}
.enc-plan-p i{font-style:normal;font-size:12px;color:#64748b;font-weight:600}
.enc-plan.enc-hot .enc-plan-p{color:#4f46e5}
.enc-list{margin-top:18px;border:1.5px solid #e2e8f0;border-radius:14px;overflow:hidden}
.enc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;font-size:13px}
.enc-row:nth-child(odd){background:#fbfcfe}
.enc-row + .enc-row{border-top:1px solid #eef2f7}
.enc-t{display:flex;flex-direction:column;gap:2px;font-weight:700;color:#0f172a;line-height:1.6}
.enc-t small{font-weight:500;font-size:11.5px;color:#94a3b8}
.enc-p{white-space:nowrap;color:#334155;font-weight:800;display:flex;align-items:baseline;gap:5px}
.enc-p i{font-style:normal;font-size:11.5px;color:#64748b;font-weight:600}
.enc-p em{font-style:normal;font-size:10.5px;background:#eef2ff;color:#4f46e5;border-radius:6px;padding:2px 7px;font-weight:700}
.enc-note{margin-top:14px;padding:12px 14px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;font-size:12.5px;color:#1e40af;line-height:1.85}
.enc-note[hidden]{display:none}
.enc-note a{color:#4f46e5;font-weight:700}


/* ==== درخواست‌های ثبت شده انکود (enc-requests.html) ==== */
.st-danger{color:#b91c1c;background:#fee2e2}
.encr-top{display:flex;flex-direction:column;gap:12px}
.encr-title h1{font-size:23px;font-weight:800;color:#1e1b4b;margin:0}
.encr-title p{font-size:13px;color:#64748b;line-height:1.85;margin:4px 0 0}
.encr-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.encr-bar .sv-search{flex:1;min-width:220px;max-width:360px}
.encr-list{margin-top:4px;overflow-x:auto}
.encr-table{width:100%;border-spacing:0;border-collapse:separate;font-size:12.5px;background:#fff;border:1px solid #eef2f7;border-radius:14px;overflow:hidden}
.encr-table th{background:#f8fafc;color:#64748b;font-size:11.5px;font-weight:800;text-align:right;padding:10px 12px;border-bottom:1px solid #e2e8f0;white-space:nowrap}
.encr-table td{padding:10px 12px;border-bottom:1px solid #eef2f7;vertical-align:middle;line-height:1.65}
.encr-tr:hover td{background:#fbfcfe}
.encr-code{font-family:ui-monospace,Consolas,monospace;direction:ltr;display:inline-block;font-size:12px;font-weight:700;color:#0f172a}
.encr-user{display:block;color:#94a3b8;font-size:10.5px}
.encr-t{font-variant-numeric:tabular-nums;white-space:nowrap;color:#475569;direction:ltr;display:inline-block}
.encr-amt{font-weight:800;color:#1e1b4b;white-space:nowrap}
.encr-amt small{font-weight:600;color:#94a3b8;font-size:10.5px}
.encr-detail td{background:#fbfcfe;padding:6px 14px 12px}
.encr-note{font-size:12px;color:#475569;line-height:1.9;border-right:3px solid #e2e8f0;padding-right:10px}
.encr-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.encr-actions .sv-btn{padding:6px 12px;font-size:11.5px}
.encr-more{padding:6px 10px;border:1px solid #e2e8f0;background:#fff;border-radius:9px;color:#334155;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit}
.encr-more:hover{background:#f1f5f9}
@media (max-width:760px){
  .encr-table thead{display:none}
  .encr-table,.encr-table tbody,.encr-table tr{display:block}
  .encr-table td{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px}
  .encr-table td::before{content:attr(data-l);font-size:11px;font-weight:700;color:#94a3b8}
  .encr-detail td{display:block;padding:4px 12px 10px}
  .encr-detail td::before{content:none}
}


/* ==== مشاهده پروژه انکود (enc-project.html) ==== */
.encp-title h1{font-size:23px;font-weight:800;color:#1e1b4b;margin:0}
.encp-title p{font-size:13px;color:#64748b;line-height:1.85;margin:4px 0 0}
.encp-hero{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(135deg,#f8fafc,#eef2ff);border:1px solid #e2e8f0;border-radius:14px;padding:18px 20px;margin-top:6px}
.encp-hero-main h2{font-size:16.5px;font-weight:800;color:#0f172a;margin:0}
.encp-hero-sub{font-size:12.5px;color:#64748b;margin:4px 0 8px}
.encp-hero-sub b{color:#334155}
.encp-code{display:inline-block;background:#1e1b4b;color:#fff;padding:7px 14px;border-radius:9px;direction:ltr;font-weight:700;font-size:13px;font-family:ui-monospace,Consolas,monospace}
.encp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
.encp-card{background:#fff;border:1px solid #eef2f7;border-radius:14px;padding:16px 18px}
.encp-wide{grid-column:1 / -1}
.encp-card-t{font-size:13.5px;font-weight:800;color:#0f172a;margin:0 0 10px}
.encp-rows{margin:0}
.encp-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed #eef2f7;font-size:13px}
.encp-row:last-child{border-bottom:0}
.encp-row dt{color:#64748b;font-weight:600}
.encp-row dd{margin:0;color:#334155;font-weight:800}
.encp-dt{font-variant-numeric:tabular-nums;direction:ltr;display:inline-block;color:#334155}
.encp-inv{margin-top:12px}
.encp-chips{display:flex;flex-wrap:wrap;gap:8px}
.encp-chip{background:#eef2ff;color:#4f46e5;font-size:12px;font-weight:700;padding:6px 12px;border-radius:99px}
.encp-fail{font-size:15px;font-weight:800;color:#b91c1c;margin:0}
.encp-fail-sub{font-size:12.5px;color:#64748b;margin:4px 0 0}
.encp-help{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;background:linear-gradient(135deg,#2563eb,#4f46e5);border-radius:14px;padding:18px 20px;color:#fff}
.encp-help-txt b{font-size:15px}
.encp-help-txt p{font-size:12.5px;margin:4px 0 0;color:rgba(255,255,255,.85)}
.encp-help-btn{display:inline-flex;align-items:center;background:#fff;color:#4f46e5;font-size:13px;font-weight:800;padding:10px 18px;border-radius:10px;text-decoration:none}
@media (max-width:720px){
  .encp-grid{grid-template-columns:1fr}
  .encp-wide{grid-column:auto}
}

/* ==== ثبت درخواست انکود (enc-new.html) ==== */
.encn-title h1{font-size:23px;font-weight:800;color:#1e1b4b;margin:0}
.encn-title p{font-size:13px;color:#64748b;line-height:1.85;margin:4px 0 0}
.encn-card{background:#fff;border:1px solid #eef2f7;border-radius:14px;padding:18px;margin-top:6px}
.encn-intro h2{font-size:16px;font-weight:800;color:#0f172a;margin:0}
.encn-intro>p{font-size:12.5px;color:#64748b;line-height:1.9;margin:6px 0 0}
.encn-note{background:#f8fafc;border-right:3px solid #c7d2fe;padding:10px 12px;border-radius:8px;font-size:12px;color:#475569;line-height:1.9;margin:10px 0 0}
.encn-field{display:block;margin-top:18px}
.encn-l{display:block;font-size:12.5px;font-weight:800;color:#0f172a;margin-bottom:8px}
.encn-field input{width:100%;border:1.5px solid #e2e8f0;border-radius:10px;padding:11px 12px;font-size:13px;font-family:inherit;background:#fbfcfe;color:#0f172a}
.encn-field input:focus{outline:none;border-color:#4f46e5;background:#fff}
.encn-group{border:0;padding:0;margin:18px 0 0}
.encn-group .encn-l{margin-bottom:10px}
.encn-opt-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.encn-opt{border:1.5px solid #e2e8f0;background:#fff;border-radius:12px;padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:flex-start;font-size:13px;font-weight:700;color:#334155;font-family:inherit;text-align:right}
.encn-opt small{font-size:11px;color:#94a3b8;font-weight:600}
.encn-opt.is-on{border-color:#4f46e5;background:#eef2ff;color:#1e1b4b}
.encn-php-row{display:flex;flex-wrap:wrap;gap:8px}
.encn-php{border:1.5px solid #e2e8f0;background:#fff;border-radius:99px;padding:7px 14px;font-size:12px;font-weight:700;color:#334155;cursor:pointer;font-family:inherit}
.encn-php.is-on{border-color:#4f46e5;background:#eef2ff;color:#4f46e5}
.encn-drop{border:2px dashed #cbd5e1;border-radius:14px;padding:26px 16px;text-align:center;background:#fbfcfe;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color .15s,background .15s}
.encn-drop:hover,.encn-drop.over{border-color:#4f46e5;background:#eef2ff}
.encn-drop b{font-size:13.5px;color:#1e1b4b}
.encn-drop span{font-size:12px;color:#64748b}
.encn-drop small{font-size:11px;color:#94a3b8}
.encn-msg{font-size:12px;margin:8px 0 0;font-weight:700}
.encn-msg.err{color:#b91c1c}
.encn-ok{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;border-radius:14px;padding:16px 18px}
.encn-ok[hidden]{display:none}
.encn-ok-txt b{font-size:14px}
.encn-ok-txt p{font-size:12px;margin:4px 0 0;line-height:1.8}
.encn-ok-act{display:flex;gap:8px;flex-wrap:wrap}
.encn-ok-btn{display:inline-flex;align-items:center;background:#065f46;color:#fff;font-size:12.5px;font-weight:800;padding:9px 16px;border-radius:10px;text-decoration:none}
.encn-ok-ghost{display:inline-flex;align-items:center;background:#fff;color:#065f46;border:1px solid #a7f3d0;font-size:12.5px;font-weight:800;padding:9px 16px;border-radius:10px;text-decoration:none}
@media (max-width:420px){.encn-opt-row{grid-template-columns:1fr}}

/* اصلاح لینک اطلاعات بیشتر در لیست درخواست‌ها */
.encr-more{text-decoration:none;display:inline-flex;align-items:center}


/* ==== جزئیات سفارش انکود (enc-checkout.html) ==== */
.encq-title h1{font-size:23px;font-weight:800;color:#1e1b4b;margin:0}
.encq-title p{font-size:13px;color:#64748b;line-height:1.85;margin:4px 0 0}
.encq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
.encq-card{background:#fff;border:1px solid #eef2f7;border-radius:14px;padding:16px 18px}
.encq-wide{grid-column:1 / -1}
.encq-card-t{font-size:13.5px;font-weight:800;color:#0f172a;margin:0}
.encq-sub{font-size:12px;color:#94a3b8;margin:2px 0 10px}
.encq-rows{margin:0}
.encq-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed #eef2f7;font-size:13px}
.encq-row:last-child{border-bottom:0}
.encq-row dt{color:#64748b;font-weight:600;display:flex;flex-direction:column;gap:2px;line-height:1.5}
.encq-row dt small{font-size:11px;color:#94a3b8;font-weight:600}
.encq-row dd{margin:0;color:#334155;font-weight:800;white-space:nowrap}
.encq-row dd small{font-weight:600;color:#94a3b8;font-size:11px}
.encq-row .encq-k b{font-size:13px;color:#0f172a}
.encq-code{display:inline-block;background:#1e1b4b;color:#fff;padding:5px 12px;border-radius:8px;direction:ltr;font-weight:700;font-size:12.5px;font-family:ui-monospace,Consolas,monospace}
.encq-total{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding:12px 14px;background:#eef2ff;border-radius:10px}
.encq-total span{font-size:13.5px;font-weight:800;color:#1e1b4b}
.encq-total b{font-size:18px;font-weight:800;color:#4f46e5;white-space:nowrap}
.encq-total b small{font-size:11.5px;font-weight:600}
.encq-note{font-size:11.5px;color:#94a3b8;line-height:1.9;margin:10px 0 0}
.encq-pay-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#334155;margin-bottom:12px}
.encq-pay-act{display:flex;gap:8px;flex-wrap:wrap}
.encq-info{margin:14px 0 0;padding-right:18px;font-size:12px;color:#475569;line-height:2.1}
@media (max-width:720px){
  .encq-grid{grid-template-columns:1fr}
  .encq-wide{grid-column:auto}
}


/* ==== سامانه پیامکی (sms.html) ==== */
.sms-title h1{font-size:23px;font-weight:800;color:#1e1b4b;margin:0}
.sms-title p{font-size:13px;color:#64748b;line-height:1.85;margin:4px 0 0}
.sms-note{background:#eff6ff;border:1px solid #dbeafe;border-radius:14px;padding:16px 18px;margin-top:14px}
.sms-note p{font-size:13px;color:#334155;line-height:2.1;margin:0 0 8px}
.sms-note p:last-child{margin-bottom:0}
.sms-note a{color:#4f46e5;font-weight:800}
.sms-note .sms-doc{display:block;color:#4338ca;font-weight:700}
.sms-tabs{display:flex;gap:6px;margin:16px 0 0;background:#fff;border:1px solid #eef2f7;border-radius:12px;padding:5px;width:fit-content}
.sms-tab{border:0;background:transparent;padding:9px 20px;border-radius:9px;font-size:13px;font-weight:800;color:#64748b;cursor:pointer;transition:all .15s}
.sms-tab:hover{color:#1e1b4b;background:#f8fafc}
.sms-tab.is-active{background:#4f46e5;color:#fff}
.sms-panel{background:#fff;border:1px solid #eef2f7;border-radius:14px;padding:16px 18px;margin-top:12px}
.sms-panel[hidden]{display:none}
.sms-panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.sms-panel-head h2{font-size:15px;font-weight:800;color:#0f172a;margin:0}
.sms-refresh{border:1px solid #c7d2fe;background:#eef2ff;color:#4f46e5;font-size:12px;font-weight:800;padding:7px 14px;border-radius:9px;cursor:pointer}
.sms-refresh:disabled{opacity:.6;cursor:wait}
.sms-refresh small{display:block;font-size:10px;font-weight:600;color:#818cf8;margin-top:1px}
.sms-scroll{overflow-x:auto}
.sms-table{width:100%;border-collapse:collapse;min-width:720px}
.sms-table th{font-size:11.5px;color:#94a3b8;font-weight:800;text-align:right;padding:9px 12px;border-bottom:1px solid #eef2f7}
.sms-table td{font-size:13px;color:#334155;padding:11px 12px;border-bottom:1px solid #f1f5f9;white-space:nowrap}
.sms-table tr:last-child td{border-bottom:0}
.sms-table td:first-child{font-weight:800;color:#94a3b8}
.sms-table td:nth-child(2){font-weight:800;color:#0f172a}
.sms-table tbody tr{transition:background .15s}
.sms-table tbody tr:hover{background:#f8fafc}
.sms-type{display:inline-block;background:#f1f5f9;color:#64748b;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px}
.sms-type.is-agent{background:#eef2ff;color:#4f46e5}
.sms-lapsed{display:inline-block;background:#fee2e2;color:#dc2626;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;margin-right:4px}
.sms-renew{border:1px solid #c7d2fe;background:#fff;color:#4f46e5;font-size:12px;font-weight:800;padding:6px 12px;border-radius:8px;cursor:pointer;transition:all .15s}
.sms-renew:hover{background:#eef2ff}
.sms-foot{font-size:11.5px;color:#94a3b8;margin:10px 0 0}
.sms-form{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.sms-field{display:flex;flex-direction:column;gap:6px}
.sms-field label{font-size:12.5px;font-weight:800;color:#1e1b4b}
.sms-field label b{color:#dc2626}
.sms-field input,.sms-field select{width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:10px;font-size:13px;color:#0f172a;background:#fff;outline:none;transition:border-color .15s;box-sizing:border-box}
.sms-field input:focus,.sms-field select:focus{border-color:#818cf8}
.sms-hint{font-size:11.5px;color:#94a3b8;line-height:1.7}
.sms-birth{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sms-submit{display:flex;align-items:center;gap:12px;grid-column:1 / -1;margin-top:2px}
.sms-msg{font-size:12.5px;font-weight:700;padding:10px 14px;border-radius:10px;margin:0}
.sms-msg.sms-ok{background:#dcfce7;color:#15803d}
.sms-msg.sms-err{background:#fee2e2;color:#b91c1c}
@media (max-width:720px){
  .sms-tabs{width:100%}
  .sms-tab{flex:1}
  .sms-form{grid-template-columns:1fr}
  .sms-submit{grid-column:auto}
}



/* ===== wcfg: صفحه پیکربندی WHMCS ===== */
.wcfg-group{border:0;margin:0;padding:14px 0 0}
.wcfg-features{margin-top:18px;border-top:2px dashed #e2e8f0}
.wcfg-title{display:block;font-size:13.5px;font-weight:800;color:#334155;margin-bottom:12px;line-height:2}
.wcfg-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wcfg-opt{position:relative;cursor:pointer}
.wcfg-opt input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2}
.wcfg-card{display:flex;flex-direction:column;gap:6px;height:100%;border:2px solid #e2e8f0;border-radius:16px;padding:14px 16px;background:#fff;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.wcfg-opt:hover .wcfg-card{border-color:#bfdbfe;box-shadow:0 10px 26px -12px rgba(37,99,235,.22)}
.wcfg-opt:focus-within .wcfg-card{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.wcfg-opt input:checked + .wcfg-card{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 4px rgba(37,99,235,.10)}
.wcfg-card b{font-size:14.5px;font-weight:800;color:#0f172a;display:flex;align-items:center;gap:8px;line-height:1.6}
.wcfg-card p{font-size:12.5px;color:#64748b;line-height:1.9;margin:0}
.wcfg-card small{font-size:12px;font-weight:800;color:#2563eb}
.wcfg-checkmark{width:19px;height:19px;border-radius:7px;border:2px solid #cbd5e1;display:grid;place-items:center;flex-shrink:0;margin-right:auto;background:#fff;transition:background .15s ease,border-color .15s ease}
.wcfg-checkmark::after{content:'';width:9px;height:9px;border-radius:3px;background:#fff;transform:scale(0);transition:transform .15s ease}
.wcfg-opt.is-radio .wcfg-checkmark{border-radius:50%}
.wcfg-opt.is-radio .wcfg-checkmark::after{border-radius:50%}
.wcfg-opt input:checked + .wcfg-card .wcfg-checkmark{background:#2563eb;border-color:#2563eb}
.wcfg-opt input:checked + .wcfg-card .wcfg-checkmark::after{transform:scale(1)}
.wcfg-hint-required{display:none;font-size:12px;color:#dc2626;font-weight:700;margin:10px 0 0}
.wcfg-hint-required.show{display:block}
.wcfg-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:6px}
.wcfg-sec-title{grid-column:span 2;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:#0f172a;margin-top:8px;padding-top:16px;border-top:1px dashed #e2e8f0}
.wcfg-sec-title:first-of-type{border-top:0;padding-top:0;margin-top:0}
.wcfg-full{grid-column:span 2}
.wcfg-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;background:linear-gradient(180deg,#f8fafc,#fff);border:1px solid #e2e8f0;border-radius:18px;padding:16px 18px}
.wcfg-summary-info h2{font-size:16px;font-weight:900;color:#0f172a;margin:0}
.wcfg-summary-info p{font-size:12px;color:#64748b;margin:4px 0 0;line-height:1.9}
.wcfg-total{display:flex;align-items:baseline;gap:8px;background:#fff;border:2px solid #2563eb;border-radius:16px;padding:12px 20px;box-shadow:0 12px 30px -14px rgba(37,99,235,.35)}
.wcfg-total small{font-size:12.5px;color:#64748b;font-weight:700}
.wcfg-total b{font-size:24px;font-weight:900;color:#1d4ed8;font-variant-numeric:tabular-nums}
.wcfg-count{font-size:12px;color:#2563eb;font-weight:800;background:#dbeafe;border-radius:999px;padding:6px 14px}
.wcfg-send-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.wcfg-err{display:none;font-size:12.5px;color:#dc2626;font-weight:700;margin:0}
.wcfg-err.show{display:block}
.wcfg-done{display:none;margin-top:18px;border:2px solid #bbf7d0;background:#f0fdf4;border-radius:18px;padding:24px 20px;text-align:center}
.wcfg-done.show{display:block}
.wcfg-done h3{font-size:16.5px;font-weight:900;color:#166534;margin:0}
.wcfg-done p{font-size:13px;color:#166534;margin:10px 0 14px;line-height:2}
.wcfg-done .wcfg-total{display:inline-flex}
.wcfg-done-actions{display:flex;gap:10px;justify-content:center;margin-top:14px}
.wcfg-done-actions .sv-btn{background:#16a34a}
.wcfg-done-actions .sv-btn:hover{background:#15803d}
@media (max-width:760px){
  .wcfg-opts{grid-template-columns:1fr}
  .wcfg-form{grid-template-columns:1fr}
  .wcfg-sec-title,.wcfg-full{grid-column:span 1}
  .wcfg-summary{flex-direction:column;align-items:stretch;text-align:center}
  .wcfg-total{justify-content:center}
}






/* تب‌بار پایین موبایل: بالای سایدبار و overlay تا همیشه در دسترس بماند؛ آیکن منو بسته/باز به‌صورت برگر/ضربدر */
.db-tabbar{display:none}
.db-tab-x{display:none}
.db-tabbtn[aria-expanded="true"] .db-tab-x{display:block}
.db-tabbtn[aria-expanded="true"] .db-tab-burger{display:none}
@media (max-width:860px){
  .db-tabbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;bottom:0;right:0;left:0;z-index:130;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid #e2e8f0;box-shadow:0 -14px 34px -20px rgba(15,23,42,.28);padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}
  .db-tabbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:50px;border-radius:14px;color:#64748b;font-size:11px;font-weight:800;background:none;border:0;cursor:pointer;text-decoration:none;transition:color .15s ease,background .15s ease,transform .1s ease}
  .db-tabbtn svg{width:22px;height:22px}
  .db-tabbtn:active{transform:scale(.95)}
  .db-tabbtn.active,.db-tabbtn[aria-expanded="true"]{color:#2563eb;background:#eff6ff}
  .db-tabbar .db-tabbtn:hover{color:#2563eb}
}

/* وقتی تب‌بار پایین وجود دارد، فضای انتهای صفحه آزاد شود */
@media (max-width:860px){
  body:has(.db-tabbar){padding-bottom:76px}
}

/* در موبایل، فضای کافی زیر سایدبار بگذار تا آخرین گزینه‌ها زیر تب‌بار پنهان نمانند */
@media (max-width:860px){
  .db-side{padding-bottom:84px}
}

/* ── سبد خرید (whmcs-cart.html) ── */
.cart-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start;margin-top:18px}
.cart-main{display:grid;gap:18px;min-width:0}
.cart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:14px 18px}
.cart-head h2{font-size:15.5px;font-weight:900;color:#0f172a;margin:0;display:flex;align-items:center;gap:10px}
.cart-count{font-size:11.5px;font-weight:800;color:#2563eb;background:#dbeafe;border-radius:999px;padding:5px 12px}
.cart-clear{background:none;border:0;font:inherit;font-size:12.5px;font-weight:800;color:#dc2626;cursor:pointer;padding:6px 10px;border-radius:10px;transition:background .15s ease}
.cart-clear:hover{background:#fef2f2}
.cart-items{display:grid;gap:12px}
.cart-item{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:16px 18px;transition:box-shadow .2s ease}
.cart-item:hover{box-shadow:0 12px 30px -18px rgba(15,23,42,.18)}
.cart-item-info{display:flex;flex-direction:column;gap:5px;min-width:0}
.cart-item-tag{display:inline-flex;align-self:flex-start;font-size:10.5px;font-weight:800;color:#4338ca;background:#eef2ff;border:1px solid #e0e7ff;border-radius:999px;padding:3px 10px}
.cart-item-info b{font-size:14.5px;font-weight:800;color:#0f172a}
.cart-item-info small{font-size:12.5px;color:#64748b;line-height:1.8}
.cart-item-cycle{font-style:normal;font-size:11.5px;color:#94a3b8;font-weight:700;display:flex;align-items:center;gap:6px}
.cart-item-cycle b{font-size:11.5px;color:#047857;font-weight:800;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:999px;padding:2px 9px}
.cart-item-side{display:flex;align-items:center;gap:12px;flex-shrink:0}
.cart-item-price{font-size:16px;font-weight:900;color:#1d4ed8;font-variant-numeric:tabular-nums}
.cart-del{width:36px;height:36px;border-radius:11px;border:1px solid #fecaca;background:#fff;color:#dc2626;cursor:pointer;display:grid;place-items:center;transition:background .15s ease,color .15s ease,border-color .15s ease}
.cart-del:hover{background:#dc2626;color:#fff;border-color:#dc2626}
.cart-empty{display:grid;gap:8px;justify-items:center;text-align:center;background:#fff;border:1.5px dashed #cbd5e1;border-radius:18px;padding:46px 20px}
.cart-empty b{font-size:15.5px;font-weight:900;color:#0f172a}
.cart-empty p{font-size:13px;color:#64748b;line-height:1.9;margin:0 0 8px}
.cart-discount{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:16px 18px}
.cart-discount h3{font-size:14px;font-weight:900;color:#0f172a;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.cart-coupon-row{display:flex;gap:10px}
.cart-coupon-row input{flex:1;min-width:0;font:inherit;font-size:13.5px;color:#1e293b;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:12px;padding:11px 14px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.cart-coupon-row input:focus{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.09);background:#fff}
.cart-coupon-row .sv-btn{flex-shrink:0}
.cart-coupon-msg{margin:12px 0 0;font-size:12.5px;font-weight:700;line-height:1.9}
.cart-coupon-msg.ok{color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:12px;padding:9px 12px}
.cart-coupon-msg.err{color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:9px 12px}
.cart-coupon-msg[hidden]{display:none}
.cart-coupon-x{background:none;border:0;font:inherit;font-size:12px;font-weight:800;color:#dc2626;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0;margin-inline-start:6px}
.cart-summary{position:sticky;top:96px;background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:20px;display:grid;gap:2px;box-shadow:0 18px 44px -22px rgba(15,23,42,.12)}
.cart-summary h2{font-size:15.5px;font-weight:900;color:#0f172a;margin:0 0 6px;padding-bottom:14px;border-bottom:1px dashed #e2e8f0}
.cart-sum-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 2px;font-size:13.5px;color:#475569;font-weight:700}
.cart-sum-row b{font-weight:900;color:#0f172a;font-variant-numeric:tabular-nums}
.cart-disc b{color:#dc2626}
.cart-cycle b{color:#047857}
.cart-sum-total{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 4px;background:linear-gradient(180deg,#eff6ff,#ffffff);border:1.5px solid #bfdbfe;border-radius:14px;padding:12px 14px}
.cart-sum-total span{font-size:13.5px;font-weight:900;color:#1e40af}
.cart-sum-total b{font-size:19px;font-weight:900;color:#1d4ed8;font-variant-numeric:tabular-nums}
.cart-note{margin-top:12px;padding-top:14px;border-top:1px dashed #e2e8f0;display:grid;gap:8px}
.cart-note p{margin:0;font-size:12px;color:#94a3b8;line-height:1.9}
.cart-note p b{display:block;font-size:12.5px;color:#0f172a;font-weight:800}
.cart-note p span{color:#334155;font-weight:800}
.cart-note small{display:block;color:#94a3b8;font-weight:600}
.cart-checkout{width:100%;justify-content:center;margin-top:16px;font-size:15px;padding:15px 24px}
.cart-checkout:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
@media (max-width:1024px){
  .cart-grid{grid-template-columns:minmax(0,1fr) 300px;gap:16px}
}
@media (max-width:900px){
  .cart-grid{grid-template-columns:1fr}
  .cart-summary{position:static;top:auto}
}
@media (max-width:520px){
  .cart-item{flex-direction:column;align-items:stretch}
  .cart-item-side{justify-content:space-between}
  .cart-coupon-row{flex-direction:column}
  .cart-coupon-row .sv-btn{width:100%;justify-content:center}
}

/* ---------- نوار پیشرفت بالای صفحه (ناوبری نرم) ---------- */
.vahab-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;pointer-events:none;opacity:0;transition:opacity .25s ease}
.vahab-progress.active{opacity:1}
.vahab-progress-bar{height:100%;width:0;background:linear-gradient(90deg,#3b82f6,#06b6d4,#8b5cf6);border-radius:0 2px 2px 0;transition:width .15s ease;box-shadow:0 0 8px rgba(59,130,246,.6)}

/* ---------- ناوبری نرم (SPA-light) — انتقال بین صفحات ---------- */
#vahab-page{transition:opacity .24s ease, transform .24s ease}
#vahab-page.vahab-transition{opacity:0;transform:translateY(10px)}
@media (prefers-reduced-motion:reduce){#vahab-page{transition:none;transform:none}}

/* ---------- صفحه نصب و کانفیگ WHMCS: فهرست کارها ---------- */
.wc-work-sub{margin:6px 0 16px;font-size:12.5px;color:var(--app-muted,#64748b);font-weight:500;line-height:1.9}
.wc-work{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.wc-work li{display:flex;align-items:flex-start;gap:12px;padding:13px 4px;border-bottom:1px dashed var(--app-line,#e2e8f0)}
.wc-work li:last-child{border-bottom:0}
.wc-work-check{flex-shrink:0;display:grid;place-items:center;width:24px;height:24px;border-radius:9999px;background:#10b981;color:#fff;font-size:13px;font-weight:900;margin-top:1px;box-shadow:0 6px 12px -6px rgba(16,185,129,.55)}
.wc-work-txt{min-width:0}
.wc-work-txt b{display:block;font-size:14px;font-weight:800;color:#0f172a}
.wc-work-txt p{margin:3px 0 0;font-size:12.5px;line-height:1.9;color:#64748b;font-weight:500}



/* =========================================================== */
/* ===== استایل کلی ===== */
.vo-chatbot-container {
  position: fixed;
  bottom: 25px;
  left: 25px;
  z-index: 9999;
  direction: rtl;
}

/* ===== دکمه شناور ===== */
.vo-chatbot-toggle {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0088cc, #00b4d8);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 136, 204, 0.45);
  transition: all 0.3s ease;
  position: relative;
  animation: vo-chatbot-pulse 2s infinite;
}

.vo-chatbot-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 28px rgba(0, 136, 204, 0.65);
}

@keyframes vo-chatbot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.55); }
  70% { box-shadow: 0 0 0 18px rgba(0, 136, 204, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 136, 204, 0); }
}

/* ===== نشانگر قرمز ===== */
.vo-chatbot-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  background: #ff3b3b;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: vo-chatbot-blink 1.2s infinite;
}

@keyframes vo-chatbot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ===== پنجره چت ===== */
.vo-chatbot-window {
  position: absolute;
  bottom: 85px;
  left: 0;
  width: 320px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.92);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: bottom left;
}

.vo-chatbot-window.vo-chatbot-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* ===== هدر پنجره ===== */
.vo-chatbot-header {
  background: linear-gradient(135deg, #0088cc, #00b4d8);
  color: #fff;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.vo-chatbot-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.vo-chatbot-header-info {
  flex: 1;
}

.vo-chatbot-header-info h4 {
  margin: 0;
  font-size: 15px;
  font-weight: bold;
}

.vo-chatbot-header-info span {
  font-size: 11.5px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
}

.vo-chatbot-online-dot {
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px #4ade80;
}

/* ===== دکمه بستن ===== */
.vo-chatbot-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.vo-chatbot-close:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: rotate(90deg);
}

/* ===== بدنه چت ===== */
.vo-chatbot-body {
  padding: 18px 16px;
  background: #f7f9fc;
  max-height: 330px;
  overflow-y: auto;
}

.vo-chatbot-msg {
  background: #fff;
  padding: 12px 14px;
  border-radius: 14px 14px 14px 4px;
  font-size: 13px;
  color: #333;
  line-height: 1.9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
  animation: vo-chatbot-fadein 0.4s ease;
}

@keyframes vo-chatbot-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.vo-chatbot-msg strong {
  color: #0088cc;
}

/* ===== دکمه‌های ارتباط ===== */
.vo-chatbot-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.vo-chatbot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.vo-chatbot-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.vo-chatbot-btn-telegram {
  background: linear-gradient(135deg, #0088cc, #00a8e8);
  box-shadow: 0 4px 14px rgba(0, 136, 204, 0.4);
}

.vo-chatbot-btn-whatsapp {
  background: linear-gradient(135deg, #25d366, #1ebe5d);
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
}

.vo-chatbot-btn svg {
  width: 20px;
  height: 20px;
  fill: #fff;
  flex-shrink: 0;
}

.vo-chatbot-hint {
  text-align: center;
  font-size: 11px;
  color: #888;
  padding: 10px 16px 14px;
  background: #f7f9fc;
  margin: 0;
}

/* ===== فوتر ===== */
.vo-chatbot-footer {
  text-align: center;
  font-size: 10.5px;
  color: #aaa;
  padding: 8px;
  background: #fff;
  border-top: 1px solid #eef1f5;
}

/* ============================================================
   🌙 حالت خواب (خارج از ساعت کاری ۹ تا ۱۷)
   ============================================================ */
.vo-chatbot-sleep .vo-chatbot-header {
  background: linear-gradient(135deg, #334155, #64748b);
}
.vo-chatbot-sleep .vo-chatbot-avatar { background: rgba(255,255,255,.18); }
.vo-chatbot-sleep .vo-chatbot-toggle {
  background: linear-gradient(135deg, #475569, #64748b);
  box-shadow: 0 6px 20px rgba(71,85,105,.45);
  animation: none;
}
.vo-chatbot-sleep .vo-chatbot-toggle:hover {
  box-shadow: 0 8px 26px rgba(71,85,105,.6);
}
.vo-chatbot-sleep-dot {
  width: 8px;
  height: 8px;
  background: #f59e0b;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px #f59e0b;
}
.vo-chatbot-msg-sleep {
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.vo-chatbot-msg-sleep strong { color: #b45309; }
.vo-chatbot-btn-ticket {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  box-shadow: 0 4px 14px rgba(99,102,241,.4);
}

/* ============================================================
   📱 موبایل: دکمه کوچک‌تر + پنجره متناسب با صفحه
   ============================================================ */
@media (max-width: 768px) {

  .vo-chatbot-container {
    bottom: 18px;
    left: 18px;
  }

  /* دکمه شناور کوچک‌تر */
  .vo-chatbot-toggle {
    width: 52px;
    height: 52px;
    font-size: 24px;
    animation: none;
  }

  .vo-chatbot-badge {
    width: 14px;
    height: 14px;
    top: -2px;
    right: -2px;
  }

  /* پنجره چت متناسب با عرض موبایل */
  .vo-chatbot-window {
    width: calc(100vw - 36px);
    bottom: 68px;
  }

  .vo-chatbot-body {
    max-height: 260px;
    padding: 14px 12px;
  }

  .vo-chatbot-msg {
    font-size: 12.5px;
    padding: 10px 12px;
  }

  .vo-chatbot-btn {
    padding: 11px 14px;
    font-size: 13px;
  }

  .vo-chatbot-header {
    padding: 13px 14px;
  }

  .vo-chatbot-avatar {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}




.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
/* ════════════════════════════════════════════════════════════════
   قالب تک‌ابزار (single-tools.php) — قاب مرورگرمانند برای ابزارهای آنلاین
   ════════════════════════════════════════════════════════════════ */
.iv-tool-frame {
  margin: 0;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 48px -28px rgba(15, 23, 42, .30);
}
.iv-tool-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #f1f5f9;
  border-bottom: 1px solid rgba(15, 23, 42, .07);
}
.iv-tool-dots { display: inline-flex; gap: 6px; }
.iv-tool-dots i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
}
.iv-tool-dots i:nth-child(1) { background: #f87171; }
.iv-tool-dots i:nth-child(2) { background: #fbbf24; }
.iv-tool-dots i:nth-child(3) { background: #34d399; }
.iv-tool-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  direction: ltr;
  text-align: left;
  color: #64748b;
}
.iv-tool-frame iframe {
  display: block;
  width: 100%;
  border: 0;
  max-width: 100%;
}

/* ════════════════════════════════════════════════════════════════

/* ════════════════════════════════════════════════════════════════
   قالب تک‌نمونه‌کار (single-portfolio.php) — سایدبار اطلاعات پروژه
   ════════════════════════════════════════════════════════════════ */
.pf-info-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: #475569;
  padding: 7px 2px;
}
.pf-info-row svg { width: 15px; height: 15px; color: #2563eb; flex-shrink: 0; }
.pf-info-row strong { color: #0f172a; font-weight: 800; margin-inline-start: auto; }
.pf-side-cta {
  display: flex; flex-direction: column; gap: 10px;
  padding: 15px 2px;
  border-bottom: 1px dashed #e2e8f0;
}
.pf-side-btn.theme-buy-btn {
  width: 100%; justify-content: center; text-align: center;
  padding: 12px 14px; font-size: 13.5px; line-height: 1.7;
}
.pf-side-btn svg { flex-shrink: 0; }
.pf-order-chat {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 12.5px;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, .12);
  background: #fff;
  padding: 11px 14px;
  border-radius: 12px;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.pf-order-chat:hover { border-color: #6366f1; color: #6366f1; }
/* سایر نمونه کارها */
.pf-side-list { display: flex; flex-direction: column; gap: 8px; }
.pf-side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all .15s;
}
.pf-side-item:hover { background: #f8fafc; border-color: rgba(15, 23, 42, .08); }
.pf-side-item img {
  width: 56px; height: 42px; flex-shrink: 0;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: #f1f5f9;
}
.pf-side-item-title {
  font-size: 12px; font-weight: 700; color: #334155;
  line-height: 1.65;
  transition: color .15s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pf-side-item:hover .pf-side-item-title { color: #2563eb; }

/* ── سایدبار مجله (single-mag.php) ── */
.docs-nav-link.active { color:#2563eb; background:#eff6ff; border-right-color:#93c5fd; }
.mag-side-cat-count {
  margin-inline-start:auto;
  font-size:11px; font-weight:800; color:#94a3b8;
  background:#f1f5f9; border-radius:999px; padding:1px 9px;
  float: left;
}
.docs-nav-link:hover .mag-side-cat-count { color:#2563eb; background:#dbeafe; }

/* ═══════════════════════════════════════════════════════════════
   صفحه ۴۰۴ — یافت نشد
   ═══════════════════════════════════════════════════════════════ */
.error-404-wrap {
  display: flex; justify-content: center;
  padding: 60px 0 80px;
}
.error-404-card {
  max-width: 560px; width: 100%;
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 28px;
  padding: 52px 40px 48px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(15,23,42,.06);
}
.error-404-num {
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-size: 110px; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #2563eb, #6366f1, #a855f7);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}
.error-404-icon {
  display: flex; justify-content: center; margin-bottom: 20px;
}
.error-404-icon svg {
  width: 56px; height: 56px;
  color: #cbd5e1;
}
.error-404-card h1 {
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-size: 24px; font-weight: 800; color: #0f172a;
  margin: 0 0 12px; line-height: 1.5;
}
.error-404-desc {
  font-size: 14px; color: #64748b; line-height: 2;
  margin: 0 0 28px;
}

/* جستجو */
.error-404-search {
  position: relative; margin-bottom: 28px;
}
.error-404-search input[type="search"] {
  width: 100%; height: 50px;
  border: 2px solid #e2e8f0; border-radius: 16px;
  padding: 0 20px 0 52px;
  font-size: 14px; color: #0f172a; background: #f8fafc;
  outline: none; transition: all .2s;
  font-family: inherit;
}
.error-404-search input[type="search"]:focus {
  border-color: #93c5fd; background: #fff;
  box-shadow: 0 0 0 4px rgba(59,130,246,.1);
}
.error-404-search input[type="search"]::placeholder { color: #94a3b8; }
.error-404-search button {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  border: none; border-radius: 12px; cursor: pointer;
  transition: all .2s;
}
.error-404-search button svg { width: 18px; height: 18px; color: #fff; }
.error-404-search button:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
}

/* دکمه‌ها */
.error-404-actions {
  display: flex; gap: 12px; justify-content: center;
  margin-bottom: 32px; flex-wrap: wrap;
}
.error-404-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 14px;
  font-size: 13.5px; font-weight: 700;
  text-decoration: none; transition: all .2s;
}
.error-404-btn svg { width: 18px; height: 18px; }
.error-404-btn.primary {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  box-shadow: 0 6px 18px rgba(37,99,235,.3);
}
.error-404-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,99,235,.4);
}
.error-404-btn.secondary {
  color: #475569;
  background: #f1f5f9; border: 1.5px solid #e2e8f0;
}
.error-404-btn.secondary:hover {
  color: #2563eb; border-color: #93c5fd; background: #eff6ff;
}

/* لینک‌های پرکاربرد */
.error-404-links {
  border-top: 1px solid #f1f5f9;
  padding-top: 24px;
}
.error-404-links-title {
  display: block;
  font-size: 12px; font-weight: 700; color: #94a3b8;
  margin-bottom: 12px;
}
.error-404-links-list {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.error-404-links-list a {
  padding: 6px 16px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #64748b;
  background: #f8fafc; border: 1px solid #e2e8f0;
  text-decoration: none; transition: all .2s;
}
.error-404-links-list a:hover {
  color: #2563eb; border-color: #93c5fd; background: #eff6ff;
}

/* ریسپانسیو */
@media (max-width: 640px) {
  .error-404-card { padding: 36px 24px 32px; border-radius: 22px; }
  .error-404-num { font-size: 80px; }
  .error-404-card h1 { font-size: 20px; }
  .error-404-actions { flex-direction: column; align-items: center; }
  .error-404-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   صفحه «فروشنده شوید» (page-becomeseller)
   ═══════════════════════════════════════════════════════════════ */

/* ── مزایا ── */
.bs-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 22px;
}
.bs-benefit {
  background: linear-gradient(180deg, #f8faff 0%, #fff 55%);
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 20px;
  padding: 24px 22px;
  text-align: center;
  transition: all .25s;
}
.bs-benefit:hover {
  transform: translateY(-4px);
  border-color: #bfdbfe;
  box-shadow: 0 14px 34px rgba(37,99,235,.1);
}
.bs-benefit-icon {
  width: 58px; height: 58px;
  border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.bs-benefit-icon svg { width: 28px; height: 28px; }
.bs-benefit-icon.b1 { background: #eff6ff; color: #2563eb; }
.bs-benefit-icon.b2 { background: #fdf4ff; color: #a855f7; }
.bs-benefit-icon.b3 { background: #f0fdf4; color: #16a34a; }
.bs-benefit-icon.b4 { background: #fff7ed; color: #f97316; }
.bs-benefit b {
  display: block;
  font-size: 14.5px; font-weight: 800; color: #0f172a;
  margin-bottom: 8px;
}
.bs-benefit small {
  display: block;
  font-size: 12px; color: #64748b; line-height: 1.9;
}

/* ── مراحل ── */
.bs-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 24px;
  counter-reset: bs-step;
}
.bs-step {
  position: relative;
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 20px;
  padding: 34px 20px 22px;
  text-align: center;
}
.bs-step-num {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 16px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, #2563eb, #6366f1);
  box-shadow: 0 6px 16px rgba(37,99,235,.35);
  border: 3px solid #fff;
}
.bs-step b {
  display: block;
  font-size: 14px; font-weight: 800; color: #0f172a;
  margin-bottom: 8px;
}
.bs-step small {
  display: block;
  font-size: 12px; color: #64748b; line-height: 1.9;
}

/* ── قوانین ── */
.bs-rules {
  margin-top: 10px;
}
.bs-rules-list {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; gap: 12px;
}
.bs-rules-list li {
  position: relative;
  padding: 14px 52px 14px 20px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  font-size: 13px; color: #334155; line-height: 1.9;
}
.bs-rules-list li::before {
  content: "✓";
  position: absolute; right: 16px; top: 14px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  font-size: 12px; font-weight: 800; color: #15803d;
  background: #dcfce7;
}
.bs-rules-agree {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border: 1.5px dashed #c7d7fe;
  border-radius: 16px;
  background: #f5f9ff;
  cursor: pointer;
  user-select: none;
}
.bs-rules-agree input { display: none; }
.bs-agree-box {
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 2px solid #cbd5e1;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
}
.bs-agree-box svg {
  width: 14px; height: 14px; color: #fff; opacity: 0; transform: scale(.5);
  transition: all .2s;
}
.bs-rules-agree input:checked + .bs-agree-box {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  border-color: transparent;
}
.bs-rules-agree input:checked + .bs-agree-box svg { opacity: 1; transform: scale(1); }
.bs-agree-text {
  font-size: 13px; color: #334155; line-height: 1.8;
}
.bs-agree-text strong { color: #1d4ed8; }

/* ── دکمه درخواست ── */
.bs-request {
  text-align: center;
  margin-top: 26px;
}
.bs-request-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 44px;
  border-radius: 16px;
  font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  box-shadow: 0 6px 18px rgba(37,99,235,.3);
  text-decoration: none;
  opacity: .45;
  filter: grayscale(.5);
  pointer-events: none;
  cursor: not-allowed;
  transition: all .3s;
}
.bs-request-btn svg { width: 20px; height: 20px; }
.bs-request-btn.enabled {
  opacity: 1;
  filter: none;
  pointer-events: auto;
  cursor: pointer;
  animation: bs-btn-ready .4s ease;
}
.bs-request-btn.enabled:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(37,99,235,.45);
}
@keyframes bs-btn-ready {
  0% { transform: scale(.94); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.bs-request-hint {
  margin: 12px 0 0;
  font-size: 12px; color: #94a3b8;
}

/* ── تسویه ── */
.bs-settle { margin-top: 8px; }
.bs-settle-note {
  display: flex; align-items: flex-start; gap: 16px;
  background: linear-gradient(120deg, #eef4ff, #f5f3ff);
  border: 1px solid #dbeafe;
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 24px;
}
.bs-settle-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2563eb, #6366f1);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bs-settle-icon svg { width: 26px; height: 26px; }
.bs-settle-note p {
  margin: 0;
  font-size: 13.5px; color: #334155; line-height: 2;
}
.bs-settle-note strong { color: #1d4ed8; }
.bs-settle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.bs-settle-card {
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 18px;
  padding: 24px 20px;
  text-align: center;
  transition: all .25s;
}
.bs-settle-card:hover {
  transform: translateY(-4px);
  border-color: #ddd6fe;
  box-shadow: 0 12px 30px rgba(99,102,241,.1);
}
.bs-settle-card-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.bs-settle-card-icon svg { width: 26px; height: 26px; }
.bs-settle-card-icon.c1 { background: #eff6ff; color: #2563eb; }
.bs-settle-card-icon.c2 { background: #f0fdf4; color: #16a34a; }
.bs-settle-card-icon.c3 { background: #fff7ed; color: #f97316; }
.bs-settle-card-icon.c4 { background: #fdf4ff; color: #a855f7; }
.bs-settle-card b {
  display: block;
  font-size: 14px; font-weight: 800; color: #0f172a;
  margin-bottom: 8px;
}
.bs-settle-card small {
  display: block;
  font-size: 12px; color: #64748b; line-height: 1.9;
}

/* ── دعوت به اقدام ── */
.bs-cta {
  text-align: center;
  margin-top: 34px;
  padding: 46px 30px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 15% 20%, rgba(99,102,241,.14), transparent 34%),
    radial-gradient(circle at 85% 30%, rgba(59,130,246,.14), transparent 32%),
    linear-gradient(180deg, #eef4ff 0%, #f8faff 100%);
  border: 1px solid #dbeafe;
}
.bs-cta h2 {
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-size: 26px; font-weight: 800; color: #0f172a;
  margin: 0 0 8px;
}
.bs-cta p {
  margin: 0 0 22px;
  font-size: 13.5px; color: #64748b;
}

/* ریسپانسیو */
@media (max-width: 1023px) {
  .bs-benefits, .bs-steps, .bs-settle-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bs-benefits, .bs-steps, .bs-settle-grid { grid-template-columns: 1fr; }
}