/* =========================================================
   بافتنی‌های آنا — استایل صفحات داخلی (Pages.css)
   تکمیل‌کننده style.css با هماهنگی کامل دارک/لایت مود و ریسپانسیو
   ========================================================= */

/* هدر و بنر صفحات داخلی */
.page-hero-banner {
  position: relative;
  background-color: var(--primary-light);
  padding: 3.5rem 0 3rem;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

html.dark .page-hero-banner {
  background-color: #0b1325;
  border-color: rgba(255, 255, 255, 0.08);
}

.page-hero-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  position: relative;
  z-index: 2;
}

.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.page-breadcrumb a {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.page-breadcrumb a:hover {
  color: var(--primary);
}

.page-breadcrumb .sep {
  opacity: 0.45;
  font-size: 0.75rem;
}

.page-hero-title {
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--text-dark);
  line-height: 1.3;
}

.page-hero-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 640px;
}

/* =========================================================
   صفحه آرشیو دوره‌ها و فروشگاه (فیلترها و مرتب‌سازی)
   ========================================================= */
.archive-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 2.5rem;
  padding: 3.5rem 0 5rem;
}

.filter-sidebar {
  position: sticky;
  top: 90px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  height: fit-content;
}

.filter-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

.filter-sidebar-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-dark);
}

.filter-reset-btn {
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
}

.filter-group {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--border);
}

.filter-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.filter-group-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.filter-checkbox-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.filter-checkbox-item:hover {
  color: var(--text-dark);
}

.filter-checkbox-item input[type="checkbox"],
.filter-checkbox-item input[type="radio"] {
  accent-color: var(--primary);
  width: 17px;
  height: 17px;
  margin-left: 0.5rem;
  cursor: pointer;
}

.filter-badge-count {
  font-size: 0.75rem;
  color: var(--text-light);
  background: var(--pill-bg);
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

/* نوار ابزار بالای آرشیو */
.archive-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.25rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

.archive-search-box {
  position: relative;
  flex: 1;
  max-width: 320px;
}

.archive-search-input {
  width: 100%;
  padding: 0.55rem 2.25rem 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg);
  color: var(--text-dark);
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.archive-search-input:focus {
  border-color: var(--primary);
}

.archive-search-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--text-light);
  width: 16px;
  height: 16px;
}

.archive-sort-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.archive-sort-select {
  padding: 0.45rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg);
  color: var(--text-dark);
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
}

.mobile-filter-trigger {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-dark);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

/* شبکه کارت‌های دوره‌ها و محصولات */
.archive-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

/* صفحه‌بندی (Pagination) */
.pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.pagination-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dark);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.pagination-link:hover,
.pagination-link.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  text-decoration: none;
}

/* =========================================================
   صفحه تکی دوره (Course Single Layout)
   ========================================================= */
.course-single-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 2.75rem;
  padding: 3rem 0 5rem;
}

.course-preview-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 9;
}

.course-preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.course-video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(30, 105, 232, 0.9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 35px rgba(30, 105, 232, 0.6);
  cursor: pointer;
  transition: all 0.25s ease;
}

.course-video-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.course-sticky-sidebar {
  position: sticky;
  top: 90px;
  height: fit-content;
}

.course-enroll-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-md);
}

.enroll-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.enroll-current-price {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--primary);
}

.enroll-old-price {
  font-size: 1rem;
  color: var(--text-light);
  text-decoration: line-through;
}

.btn-enroll-now {
  width: 100%;
  background: var(--primary);
  color: #ffffff;
  padding: 0.95rem;
  border-radius: var(--radius-full);
  font-weight: 800;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 6px 20px rgba(30, 105, 232, 0.3);
  transition: all 0.25s ease;
}

.btn-enroll-now:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  color: #ffffff;
}

.course-features-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 1.5rem 0;
}

.course-feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.course-feature-item svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
}

/* آکاردئون سرفصل‌های دوره */
.curriculum-section {
  margin: 3rem 0;
}

.curriculum-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.curriculum-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.curriculum-header {
  padding: 1.1rem 1.35rem;
  background: var(--pill-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-dark);
}

.curriculum-body {
  display: none;
  padding: 0.5rem 0;
  background: var(--surface);
}

.curriculum-item.active .curriculum-body {
  display: block;
}

.lesson-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.35rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--text-muted);
  transition: background-color 0.2s ease;
}

.lesson-row:last-child {
  border-bottom: none;
}

.lesson-row:hover {
  background-color: var(--primary-light);
  color: var(--primary);
}

.lesson-title-side {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.lesson-status-badge {
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
}

.lesson-status-free {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  font-weight: 700;
}

.lesson-status-locked {
  background: var(--pill-bg);
  color: var(--text-light);
}

/* بخش ویژه دسترسی به ویدیو برای خریداران (Student Video Player) */
.student-player-box {
  background: var(--surface);
  border: 2px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 10px 30px rgba(30, 105, 232, 0.12);
}

.student-player-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.student-video-wrapper {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  margin-bottom: 1.25rem;
}

.student-video-wrapper video {
  width: 100%;
  height: 100%;
  display: block;
}

.student-downloads-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}

.btn-download-pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.25rem;
  background: var(--pill-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-dark);
  font-size: 0.84rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-download-pdf:hover {
  background: var(--primary);
  color: #fff;
}

/* =========================================================
   صفحه تکی محصول فروشگاه (Product Single)
   ========================================================= */
.product-single-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  padding: 3.5rem 0 5rem;
}

.product-gallery-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.product-main-photo {
  width: 100%;
  height: 460px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: #f8fafc;
}

.product-main-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-thumbs-row {
  display: flex;
  gap: 0.75rem;
}

.product-thumb-item {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.product-thumb-item.active,
.product-thumb-item:hover {
  border-color: var(--primary);
}

.product-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-author-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.badge-teacher {
  background: rgba(30, 105, 232, 0.1);
  color: var(--primary);
}

.badge-student {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.color-picker-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.color-option {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  outline: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.color-option.active {
  outline-color: var(--primary);
  transform: scale(1.1);
}

/* =========================================================
   سبد خرید هوشمند (Cart Layout)
   ========================================================= */
/* =========================================================
   سبد خرید هوشمند و واکنش‌گرا (Cart Layout - Physical & Digital)
   ========================================================= */
.cart-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 2.5rem;
  padding: 2.5rem 0 5rem;
  align-items: flex-start;
}

/* نوار بالای لیست اقلام */
.cart-items-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cart-items-count-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
}

.cart-items-count-label svg {
  color: var(--primary);
}

.btn-clear-cart {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--border);
  color: #ef4444;
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-clear-cart:hover {
  background-color: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

html.dark .btn-clear-cart:hover {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

/* جدول و ردیف اقلام سبد */
.cart-items-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

html.dark .cart-items-table {
  background: #141f36;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.cart-item-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s ease;
}

html.dark .cart-item-row {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.cart-item-row:last-child {
  border-bottom: none;
}

.cart-item-row:hover {
  background-color: rgba(0, 0, 0, 0.015);
}

html.dark .cart-item-row:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

/* تصویر شاخص ردیف سبد */
.cart-item-thumb-col {
  flex-shrink: 0;
}

.cart-item-thumb-link {
  display: block;
  width: 95px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
  background-color: #0b1325;
}

.cart-item-thumb-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-play-mini-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ستون اطلاعات قلم سبد */
.cart-item-info-col {
  flex: 1 1 auto;
  min-width: 0;
}

.cart-item-badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0.4rem;
}

.cart-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: 6px;
}

.cart-type-badge.badge-digital {
  background-color: #ede9fe;
  color: #6d28d9;
  border: 1px solid rgba(109, 40, 217, 0.2);
}

html.dark .cart-type-badge.badge-digital {
  background-color: rgba(109, 40, 217, 0.2);
  color: #c4b5fd;
  border-color: rgba(109, 40, 217, 0.4);
}

.cart-type-badge.badge-physical {
  background-color: #ecfdf5;
  color: #047857;
  border: 1px solid rgba(4, 120, 87, 0.2);
}

html.dark .cart-type-badge.badge-physical {
  background-color: rgba(4, 120, 87, 0.2);
  color: #6ee7b7;
  border-color: rgba(4, 120, 87, 0.4);
}

.cart-access-badge,
.cart-unit-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  background-color: var(--bg);
  padding: 2.5px 7px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

html.dark .cart-access-badge,
html.dark .cart-unit-badge {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.cart-item-title {
  margin-bottom: 0.4rem;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.45;
}

.cart-item-title a {
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.cart-item-title a:hover {
  color: var(--primary);
}

.cart-item-perks-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cart-item-perks-list .perk-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: #059669;
  font-weight: 600;
}

html.dark .cart-item-perks-list .perk-item {
  color: #34d399;
}

.cart-item-unit-price {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.cart-item-unit-price strong {
  color: var(--text-dark);
  margin-right: 4px;
}

/* ستون عملیات، تعداد و قیمت قلم */
.cart-item-action-col {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}

.cart-item-qty-fixed {
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #475569;
}

html.dark .cart-item-qty-fixed {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

.cart-qty-stepper-box {
  display: inline-flex;
  align-items: center;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}

html.dark .cart-qty-stepper-box {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.btn-qty-step {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--text-dark);
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-qty-step:hover {
  background-color: var(--primary);
  color: #ffffff;
}

.qty-step-value {
  width: 36px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-dark);
}

.cart-item-price-box {
  text-align: left;
  min-width: 105px;
}

.cart-price-caption {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.cart-item-total-price {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--primary);
}

.cart-item-del-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cart-item-del-btn:hover {
  background-color: #fee2e2;
  color: #ef4444;
  border-color: #fecaca;
}

html.dark .cart-item-del-btn:hover {
  background-color: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.3);
}

/* بنرهای اطمینان زیر سبد */
.cart-trust-badges-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.cart-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dark);
}

html.dark .cart-trust-item {
  background: #141f36;
  border-color: rgba(255, 255, 255, 0.08);
}

/* سایدبار فاکتور و پرداخت (Sticky Summary Box) */
.cart-summary-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 18px);
  padding: 1.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 95px;
}

html.dark .cart-summary-box {
  background: #141f36;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.cart-summary-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

html.dark .cart-summary-title {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.cart-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}

.cart-summary-row .summary-val {
  font-weight: 700;
  color: var(--text-dark);
}

.cart-delivery-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 0.85rem;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.cart-delivery-pill.pill-digital {
  background-color: #ecfdf5;
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #047857;
}

html.dark .cart-delivery-pill.pill-digital {
  background-color: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.3);
}

.cart-delivery-pill.pill-physical {
  background-color: #eff6ff;
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #1d4ed8;
}

html.dark .cart-delivery-pill.pill-physical {
  background-color: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.3);
}

.cart-summary-divider {
  height: 1px;
  background-color: var(--border);
  margin: 1.15rem 0;
}

html.dark .cart-summary-divider {
  background-color: rgba(255, 255, 255, 0.08);
}

.cart-summary-row.total-row {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 1.5rem;
}

.summary-total-price {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -0.3px;
}

/* باکس هشدار الزام ورود برای خرید دوره‌ها */
.cart-login-gate-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0.9rem;
  border-radius: 12px;
  background-color: #fffbeb;
  border: 1px solid rgba(245, 158, 11, 0.3);
  margin-bottom: 1.25rem;
}

html.dark .cart-login-gate-box {
  background-color: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
}

.gate-icon-wrap {
  flex-shrink: 0;
  color: #d97706;
}

html.dark .gate-icon-wrap {
  color: #fbbf24;
}

.gate-text-wrap strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  color: #92400e;
  margin-bottom: 0.3rem;
}

html.dark .gate-text-wrap strong {
  color: #fde68a;
}

.gate-text-wrap p {
  font-size: 0.74rem;
  line-height: 1.6;
  color: #78350f;
  margin: 0;
}

html.dark .gate-text-wrap p {
  color: #fcd34d;
}

/* دکمه اصلی پرداخت و ثبت سفارش */
.btn-cart-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0.85rem 1.25rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary) 0%, #1e40af 100%);
  color: #ffffff !important;
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(30, 105, 232, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
  cursor: pointer;
}

.btn-cart-primary:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, #1d4ed8 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(30, 105, 232, 0.45);
}

.btn-cart-primary.btn-cart-login {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.35);
}

.btn-cart-primary.btn-cart-login:hover {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
  box-shadow: 0 8px 22px rgba(217, 119, 6, 0.45);
}

.cart-login-hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
}

.cart-login-hint a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  margin-right: 4px;
}

.cart-login-hint a:hover {
  text-decoration: underline;
}

.cart-user-active-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #ecfdf5;
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #065f46;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-size: 0.78rem;
  margin-bottom: 1rem;
}

html.dark .cart-user-active-badge {
  background-color: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.3);
}

.cart-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--text-light);
  margin-top: 1.25rem;
  line-height: 1.5;
  text-align: center;
}

/* صفحه سبد خالی */
.cart-empty-state-box {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4.5rem 1.5rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 24px;
  max-width: 650px;
  margin: 0 auto;
  width: 100%;
}

html.dark .cart-empty-state-box {
  background: #141f36;
  border-color: rgba(255, 255, 255, 0.12);
}

.cart-empty-icon-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(30, 105, 232, 0.1);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.cart-empty-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--text-dark);
  margin-bottom: 0.65rem;
}

.cart-empty-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 480px;
  margin-inline: auto;
}

.cart-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-empty-primary,
.btn-empty-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.7rem 1.5rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-empty-primary {
  background-color: var(--primary);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(30, 105, 232, 0.3);
}

.btn-empty-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 105, 232, 0.4);
}

.btn-empty-secondary {
  background-color: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-dark);
}

.btn-empty-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* واکنش‌گرایی موبایل سبد خرید */
@media (max-width: 992px) {
  .cart-layout-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 1.5rem 0 4rem;
  }
  .cart-summary-box {
    position: static;
  }
  .cart-trust-badges-row {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
}

@media (max-width: 640px) {
  .cart-item-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    padding: 1rem;
  }
  .cart-item-thumb-col {
    display: flex;
    justify-content: flex-start;
  }
  .cart-item-thumb-link {
    width: 100%;
    height: 140px;
  }
  .cart-item-action-col {
    justify-content: space-between;
    width: 100%;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
    margin-top: 0.25rem;
  }
  html.dark .cart-item-action-col {
    border-top-color: rgba(255, 255, 255, 0.08);
  }
}

.coupon-input-wrap {
  display: flex;
  gap: 0.5rem;
  margin: 1.5rem 0;
}

.coupon-input {
  flex: 1;
  padding: 0.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg);
  color: var(--text-dark);
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
}

.btn-apply-coupon {
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-full);
  background: var(--pill-bg);
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

/* مودال ثبت آدرس پستی (Address Modal) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  z-index: 2500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-overlay.is-active {
  display: flex;
}

.modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 580px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--border);
}

.modal-body {
  padding: 1.75rem;
  overflow-y: auto;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
}

.form-input {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-dark);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}

.form-input:focus {
  border-color: var(--primary);
}

/* =========================================================
   صفحه ورود و ثبت‌نام (Auth Layout with OTP)
   ========================================================= */
.auth-page-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.5rem 1.25rem;
  min-height: calc(100vh - 250px);
}

.auth-card-box {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-md);
  text-align: center;
}

.auth-logo-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  display: block;
}

.auth-nav-tabs {
  display: flex;
  background: var(--pill-bg);
  border-radius: var(--radius-full);
  padding: 4px;
  margin-bottom: 2rem;
}

.auth-tab-btn {
  flex: 1;
  padding: 0.6rem;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-tab-btn.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.auth-step-pane {
  display: none;
}

.auth-step-pane.active {
  display: block;
}

.otp-inputs-row {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  direction: ltr;
  margin: 1.5rem 0;
}

.otp-single-field {
  width: 52px;
  height: 56px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-dark);
  outline: none;
  transition: border-color 0.2s ease;
}

.otp-single-field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 105, 232, 0.15);
}

.otp-timer-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

/* =========================================================
   داشبورد پنل پروفایل کاربری (Profile Dashboard)
   ========================================================= */
.profile-dashboard-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 2.5rem;
  padding: 3.5rem 0 5rem;
}

.profile-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.25rem;
  height: fit-content;
  box-shadow: var(--shadow-sm);
}

.profile-user-card {
  text-align: center;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--primary);
  margin: 0 auto 0.85rem;
  object-fit: cover;
}

.profile-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  list-style: none;
}

.profile-nav-item a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.profile-nav-item.active a,
.profile-nav-item a:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.profile-tab-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

/* =========================================================
   ریسپانسیو صفحات جدید
   ========================================================= */
@media (max-width: 1024px) {
  .archive-layout,
  .course-single-layout,
  .cart-layout-grid,
  .profile-dashboard-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .filter-sidebar {
    display: none; /* در تبلت و موبایل با دکمه باز می‌شود */
    position: fixed;
    inset: 0;
    z-index: 2100;
    max-width: 320px;
    height: 100vh;
    border-radius: 0;
    overflow-y: auto;
  }
  
  .filter-sidebar.is-open {
    display: block;
  }

  #close-filter-sidebar-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-dark);
    cursor: pointer;
    font-size: 1rem;
  }
  
  .mobile-filter-trigger {
    display: inline-flex;
  }

  .product-single-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 640px) {
  .page-hero-title {
    font-size: 1.6rem;
  }
  
  .cart-item-row {
    grid-template-columns: 60px minmax(0, 1fr) 30px;
    gap: 0.75rem;
  }
  
  .cart-item-price-col {
    grid-column: 2 / -1;
  }
  
  .form-grid-2 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* =========================================================
   استایل فوق‌پیشرفته و کاملاً بومی صفحه تسویه حساب (Checkout)
   ========================================================= */
.checkout-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 2.25rem;
  align-items: start;
}

.checkout-main-col {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.checkout-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.25s ease;
}

html.dark .checkout-card {
  background: #141f36;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.checkout-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

html.dark .checkout-card-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.checkout-card-title-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.checkout-step-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(30, 105, 232, 0.3);
}

.checkout-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
}

.checkout-card-subtitle {
  font-size: 0.82rem;
  color: var(--text-muted);
  display: block;
  margin-top: 0.25rem;
}

.checkout-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.checkout-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.checkout-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.checkout-label svg {
  color: var(--primary);
}

.checkout-req {
  color: #ef4444;
  font-weight: bold;
}

.checkout-input {
  width: 100%;
  height: 48px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--bg);
  color: var(--text-dark);
  transition: all 0.2s ease;
  outline: none;
  box-sizing: border-box;
}

html.dark .checkout-input {
  background: #0b1325;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}

.checkout-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 105, 232, 0.15);
  background: var(--surface);
}

html.dark .checkout-input:focus {
  background: #101c36;
}

.checkout-textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--bg);
  color: var(--text-dark);
  transition: all 0.2s ease;
  outline: none;
  resize: vertical;
  min-height: 85px;
  box-sizing: border-box;
}

html.dark .checkout-textarea {
  background: #0b1325;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}

.checkout-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 105, 232, 0.15);
  background: var(--surface);
}

html.dark .checkout-textarea:focus {
  background: #101c36;
}

.checkout-select {
  width: 100%;
  height: 48px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--bg);
  color: var(--text-dark);
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

html.dark .checkout-select {
  background: #0b1325;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}

.checkout-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 105, 232, 0.15);
}

/* بنر ویژه دوره‌های آنلاین دیجیتال */
.checkout-digital-banner {
  background: #ecfdf5;
  border: 1.5px solid rgba(16, 185, 129, 0.35);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  display: flex;
  align-items: flex-start;
  gap: 1.15rem;
}

html.dark .checkout-digital-banner {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
}

.digital-banner-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.digital-banner-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #065f46;
  margin: 0 0 0.35rem;
}

html.dark .digital-banner-title {
  color: #34d399;
}

.digital-banner-desc {
  font-size: 0.88rem;
  line-height: 1.75;
  color: #047857;
  margin: 0;
}

html.dark .digital-banner-desc {
  color: #a7f3d0;
}

/* کارت‌های رادیویی شیوه‌های ارسال و پرداخت */
.checkout-radio-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.checkout-radio-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

html.dark .checkout-radio-card {
  background: #141f36;
  border-color: rgba(255, 255, 255, 0.08);
}

.checkout-radio-card:hover {
  border-color: var(--primary);
  background: rgba(30, 105, 232, 0.05);
}

html.dark .checkout-radio-card:hover {
  background: rgba(30, 105, 232, 0.12);
}

.checkout-radio-card.active {
  border-color: var(--primary);
  background: #eff6ff;
  box-shadow: 0 4px 15px rgba(30, 105, 232, 0.12);
}

html.dark .checkout-radio-card.active {
  background: rgba(30, 105, 232, 0.18);
  border-color: var(--primary);
}

.checkout-radio-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.checkout-radio-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--primary);
  flex-shrink: 0;
  border: 1px solid var(--border);
}

html.dark .checkout-radio-icon {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.checkout-radio-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 0.2rem;
}

.checkout-radio-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* کارت‌های آدرس پستی */
.checkout-addr-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.25rem 1.4rem;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 0.85rem;
  position: relative;
}

html.dark .checkout-addr-card {
  background: #141f36;
  border-color: rgba(255, 255, 255, 0.08);
}

.checkout-addr-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.checkout-addr-card.active {
  border-color: var(--primary);
  background: #eff6ff;
  box-shadow: 0 4px 15px rgba(30, 105, 232, 0.12);
}

html.dark .checkout-addr-card.active {
  background: rgba(30, 105, 232, 0.18);
  border-color: var(--primary);
}

.checkout-addr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}

html.dark .checkout-addr-top {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.checkout-addr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-dark);
}

html.dark .checkout-addr-badge {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.checkout-addr-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.btn-addr-action {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.3rem;
  font-size: 0.95rem;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.btn-addr-action:hover {
  color: var(--primary);
  background: rgba(30, 105, 232, 0.1);
}

.btn-addr-action.delete:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.checkout-addr-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.83rem;
  color: var(--text-muted);
}

.checkout-addr-meta svg {
  color: var(--primary);
  vertical-align: middle;
  margin-left: 3px;
}

.checkout-addr-text {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-dark);
}

/* باکس شماره کارت بانکی */
.checkout-c2c-info {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
  margin-top: 0.85rem;
}

html.dark .checkout-c2c-info {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.1);
}

.c2c-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
}

html.dark .c2c-row {
  background: #141f36;
  border-color: rgba(255, 255, 255, 0.08);
}

/* فرم افزودن آدرس جدید */
.new-addr-collapse-box {
  background: var(--bg);
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  margin-top: 1rem;
}

html.dark .new-addr-collapse-box {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.12);
}

.btn-add-addr-toggle {
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  padding: 0.5rem 1.2rem;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s ease;
}

.btn-add-addr-toggle:hover {
  background: var(--primary);
  color: #ffffff;
}

/* باکس اعلان نبود آدرس */
.no-address-box {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 2px dashed var(--border);
  border-radius: 20px;
  background: var(--bg);
  margin-bottom: 1.25rem;
  transition: all 0.25s ease;
}

html.dark .no-address-box {
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(255, 255, 255, 0.12);
}

.no-address-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(30, 105, 232, 0.12);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 0 auto 1rem;
}

html.dark .no-address-icon {
  background: rgba(30, 105, 232, 0.2);
}

.no-address-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 0.45rem;
}

.no-address-desc {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto 1.5rem;
}

/* سایدبار خلاصه سفارش */
.checkout-summary-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 95px;
}

html.dark .checkout-summary-box {
  background: #141f36;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.checkout-item-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

html.dark .checkout-item-mini {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.checkout-item-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
  background-color: #0b1325;
}

html.dark .checkout-item-thumb {
  border-color: rgba(255, 255, 255, 0.1);
}

.checkout-item-info {
  flex: 1;
  min-width: 0;
}

.checkout-item-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.2rem;
}

.checkout-item-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.checkout-item-price {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-dark);
  white-space: nowrap;
}

/* ریسپانسیو */
@media (max-width: 992px) {
  .checkout-layout-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .checkout-summary-box {
    position: static;
  }
}

/* =========================================================
   مودال هوشمند و لوکس ثبت و ویرایش آدرس همراه با نقشه (Address Modal)
   ========================================================= */
html.pro-modal-locked,
body.pro-modal-locked {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.pro-addr-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pro-addr-dialog {
  width: 100%;
  max-width: 820px;
  margin: auto;
  position: relative;
}

.pro-addr-card {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(226, 232, 240, 0.9);
  overflow: hidden;
  max-height: 88vh;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  animation: proAddrPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes proAddrPop {
  from {
    transform: scale(0.96) translateY(12px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

html.dark .pro-addr-card {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7);
}

.pro-addr-header {
  flex-shrink: 0;
  padding: 18px 24px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

html.dark .pro-addr-header {
  background: #0f172a;
  border-color: #334155;
}

.pro-addr-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(30, 105, 232, 0.12);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.pro-addr-title {
  color: #1e293b;
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
}

html.dark .pro-addr-title {
  color: #f1f5f9;
}

.pro-addr-sub {
  color: #64748b;
  font-size: 0.8rem;
  display: block;
  margin-top: 3px;
}

html.dark .pro-addr-sub {
  color: #94a3b8;
}

.pro-addr-close-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  color: #64748b;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.pro-addr-close-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #0f172a;
}

html.dark .pro-addr-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.pro-addr-body {
  flex: 1 1 auto;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 24px;
}

.pro-addr-body::-webkit-scrollbar {
  width: 6px;
}

.pro-addr-body::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 10px;
}

.pro-addr-footer {
  flex-shrink: 0;
  padding: 16px 24px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

html.dark .pro-addr-footer {
  background: #1e293b;
  border-color: #334155;
}

/* بخش نقشه */
.address-picker-map {
  width: 100%;
  height: 250px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.custom-map-pin-wrap {
  position: relative;
}

.custom-map-pin {
  width: 36px;
  height: 36px;
  border-radius: 50% 50% 50% 0;
  background: var(--primary);
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(30, 105, 232, 0.5);
  cursor: grab;
}

.custom-map-pin i {
  transform: rotate(45deg);
}

.custom-map-pin-pulse {
  position: absolute;
  top: 16px;
  left: 2px;
  width: 32px;
  height: 12px;
  border-radius: 50%;
  background: rgba(30, 105, 232, 0.35);
  animation: mapPinPulse 1.8s infinite;
}

@keyframes mapPinPulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

.btn-city-chip {
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-city-chip:hover,
.btn-city-chip.active-city-chip {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.pro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  background: #f1f5f9;
  border: 1.5px solid transparent;
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
}

html.dark .pro-chip {
  background: #0f172a;
  color: #cbd5e1;
}

.pro-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.pro-chip.active-chip {
  background: #eff6ff;
  border-color: var(--primary);
  color: var(--primary);
}

html.dark .pro-chip.active-chip {
  background: rgba(30, 105, 232, 0.2);
  color: #93c5fd;
}

/* فیلدهای فرم مودال */
.pro-modal-field-group {
  margin-bottom: 1rem;
}

.pro-field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 7px;
  user-select: none;
}

html.dark .pro-field-label {
  color: #cbd5e1;
}

.pro-req-star {
  color: #ef4444;
  font-weight: bold;
}

.pro-input-wrap {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 2px 14px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pro-input-wrap:focus-within {
  background: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(30, 105, 232, 0.14);
}

html.dark .pro-input-wrap {
  background: #0f172a;
  border-color: #334155;
}

html.dark .pro-input-wrap:focus-within {
  background: #1e293b;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(30, 105, 232, 0.25);
}

.pro-input-icon {
  color: #94a3b8;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  transition: color 0.2s;
  flex-shrink: 0;
}

.pro-input-wrap:focus-within .pro-input-icon {
  color: var(--primary);
}

.pro-form-input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 11px 0;
  font-size: 13.5px;
  color: #1e293b;
  outline: none;
  font-family: inherit;
}

html.dark .pro-form-input {
  color: #f1f5f9;
}

.pro-form-input::placeholder {
  color: #94a3b8;
  font-size: 13px;
}

.pro-textarea-wrap {
  align-items: flex-start;
  padding-top: 8px;
  padding-bottom: 8px;
}

.pro-form-textarea {
  resize: vertical;
  min-height: 64px;
  line-height: 1.6;
}

/* منوی جستجوی استان و شهر */
.pro-search-select {
  position: relative;
  width: 100%;
}

.pro-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  color: #1e293b;
  transition: all 0.2s;
  text-align: right;
}

html.dark .pro-select-trigger {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}

.pro-select-trigger:focus,
.pro-select-trigger.active {
  background: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(30, 105, 232, 0.14);
}

html.dark .pro-select-trigger:focus,
html.dark .pro-select-trigger.active {
  background: #1e293b;
  border-color: var(--primary);
}

.pro-select-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 9999;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 10px;
  display: none;
  max-height: 240px;
  overflow: hidden;
}

html.dark .pro-select-dropdown {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.pro-select-dropdown.show {
  display: block;
}

.pro-select-search-box {
  display: flex;
  align-items: center;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 4px 10px;
  margin-bottom: 8px;
}

html.dark .pro-select-search-box {
  background: #0f172a;
}

.pro-select-search-input {
  border: none;
  background: transparent;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
  color: #1e293b;
  width: 100%;
  outline: none;
}

html.dark .pro-select-search-input {
  color: #f1f5f9;
}

.pro-select-list {
  max-height: 170px;
  overflow-y: auto;
}

.pro-select-item {
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #334155;
  transition: all 0.15s;
}

html.dark .pro-select-item {
  color: #cbd5e1;
}

.pro-select-item:hover,
.pro-select-item.selected {
  background: #eff6ff;
  color: var(--primary);
  font-weight: 700;
}

html.dark .pro-select-item:hover,
html.dark .pro-select-item.selected {
  background: rgba(30, 105, 232, 0.2);
  color: #93c5fd;
}

/* کارت چک پیش‌فرض */
.pro-check-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
}

html.dark .pro-check-card {
  background: #0f172a;
  border-color: #334155;
}

.pro-check-info {
  display: flex;
  flex-direction: column;
}

.pro-check-title {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}

html.dark .pro-check-title {
  color: #f1f5f9;
}

.pro-check-desc {
  font-size: 11px;
  color: #64748b;
}

.pro-sync-pulse {
  animation: syncPulse 0.8s ease;
}

@keyframes syncPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); border-color: #10b981; }
  100% { transform: scale(1); }
}

/* =========================================================
   داشبورد کاربری هنرجویان و مشتریان (Profile & Courses Dashboard)
   طراحی مدرن، بهینه، کاملاً ریسپانسیو و هماهنگ با تم آنا
   ========================================================= */

/* بنر هیرو داشبورد */
.profile-hero-banner {
  padding-bottom: 4rem;
}

.profile-hero-content {
  margin-top: 1rem;
}

.profile-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 14px;
  background: rgba(30, 105, 232, 0.1);
  color: var(--primary);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
}

html.dark .profile-hero-badge {
  background: rgba(37, 117, 252, 0.2);
  color: #93c5fd;
}

.profile-hero-subtitle {
  color: var(--text-muted);
  font-size: 0.98rem;
  max-width: 640px;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* چیپ‌های آمار سریع */
.profile-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-stat-chip {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.hero-stat-chip .stat-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

html.dark .hero-stat-chip .stat-icon-wrap {
  background: rgba(37, 117, 252, 0.2);
  color: #60a5fa;
}

.hero-stat-chip .stat-data {
  display: flex;
  flex-direction: column;
}

.hero-stat-chip .stat-count {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.2;
}

.hero-stat-chip .stat-label {
  font-size: 0.78rem;
  color: var(--text-light);
}

/* ساختار شبکه داشبورد */
.profile-dashboard-layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 2rem;
  margin-top: -2.5rem;
  margin-bottom: 6rem;
  position: relative;
  z-index: 10;
  align-items: start;
}

@media (max-width: 991px) {
  .profile-dashboard-layout {
    grid-template-columns: 1fr;
    margin-top: -1.5rem;
  }
}

/* سایدبار پروفایل */
.profile-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.profile-user-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 2rem 1.5rem;
  text-align: center;
}

.profile-avatar-wrap {
  width: 90px;
  height: 90px;
  margin: 0 auto 1rem;
  position: relative;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #a855f7);
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #ffffff;
  border: 2px solid var(--surface);
}

.profile-avatar-initial {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #0c2f6c);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  border: 2px solid var(--surface);
}

.profile-avatar-badge {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background: #10b981;
  color: #ffffff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 2px solid var(--surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.profile-user-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 0.25rem;
}

.profile-user-phone {
  font-size: 0.88rem;
  color: var(--text-light);
  direction: ltr;
  display: inline-block;
}

.profile-role-wrap {
  margin-top: 0.75rem;
}

.profile-user-role {
  display: inline-flex;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.dash-role-student {
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--primary-soft);
}

html.dark .dash-role-student {
  background: rgba(37, 117, 252, 0.15);
  color: #93c5fd;
  border-color: rgba(37, 117, 252, 0.3);
}

.dash-role-vip {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.dash-role-admin {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.dash-role-editor {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
  border: 1px solid rgba(14, 165, 233, 0.25);
}

/* منوی سایدبار */
.profile-nav-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 0.75rem;
}

.profile-nav-item a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1rem;
  border-radius: 14px;
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.92rem;
  transition: all 0.2s ease;
}

.profile-nav-item:hover a {
  background: var(--bg-section);
  color: var(--text-dark);
}

.profile-nav-item.active a {
  background: var(--primary);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(30, 105, 232, 0.3);
}

.profile-nav-item .nav-item-icon {
  font-size: 1.15rem;
  display: flex;
  align-items: center;
}

.profile-nav-item .nav-item-text {
  flex-grow: 1;
}

.profile-nav-item .nav-item-badge {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
}

.profile-nav-item.active .nav-item-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.profile-nav-item:not(.active) .badge-primary {
  background: var(--primary-light);
  color: var(--primary);
}

html.dark .profile-nav-item:not(.active) .badge-primary {
  background: rgba(37, 117, 252, 0.2);
  color: #93c5fd;
}

.profile-nav-item:not(.active) .badge-neutral {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-muted);
}

html.dark .profile-nav-item:not(.active) .badge-neutral {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-light);
}

.profile-nav-item.nav-item-logout a {
  color: #ef4444;
}

.profile-nav-item.nav-item-logout:hover a {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}

/* پنل‌های محتوای تب */
.profile-tab-content {
  min-width: 0;
}

.profile-section-pane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  padding: 2rem;
  animation: fadeInPane 0.25s ease-out;
}

@keyframes fadeInPane {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .profile-section-pane {
    padding: 1.25rem;
    border-radius: 18px;
  }
}

.pane-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 576px) {
  .pane-header {
    flex-direction: column;
    align-items: stretch;
  }
}

.pane-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
}

.pane-subtitle {
  font-size: 0.88rem;
  color: var(--text-light);
}

.pane-action-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  padding: 6px 14px;
  background: var(--primary-light);
  border-radius: 999px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.pane-action-link:hover {
  background: var(--primary);
  color: #ffffff;
}

/* ================= دوره‌های آموزشی من (Dash Courses Grid) ================= */
.dash-courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 480px) {
  .dash-courses-grid {
    grid-template-columns: 1fr;
  }
}

.dash-course-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.dash-course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(30, 105, 232, 0.12);
  border-color: rgba(30, 105, 232, 0.35);
}

.dash-course-thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f1f5f9;
}

html.dark .dash-course-thumb-wrap {
  background: #0f172a;
}

.dash-course-thumb-link {
  display: block;
  width: 100%;
  height: 100%;
}

.dash-course-thumb-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.dash-course-card:hover .dash-course-thumb-link img {
  transform: scale(1.05);
}

.dash-course-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 47, 108, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.dash-course-card:hover .dash-course-play-overlay {
  opacity: 1;
}

.dash-play-pulse {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.25s ease;
}

.dash-course-card:hover .dash-play-pulse {
  transform: scale(1);
}

.dash-course-badges {
  position: absolute;
  top: 12px;
  right: 12px;
  left: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.dash-course-badge-active {
  background: rgba(16, 185, 129, 0.92);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
}

.dash-course-badge-level {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

.dash-course-content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.dash-course-title {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.dash-course-title a {
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.dash-course-title a:hover {
  color: var(--primary);
}

.dash-course-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dash-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  margin-bottom: 1.15rem;
}

.dash-course-meta-item {
  font-size: 0.8rem;
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.dash-course-meta-item i {
  color: var(--primary);
}

.dash-meta-hd {
  background: rgba(30, 105, 232, 0.08);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.74rem;
}

html.dark .dash-meta-hd {
  background: rgba(37, 117, 252, 0.2);
  color: #93c5fd;
}

.dash-course-footer {
  margin-top: 0.25rem;
}

.dash-course-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.8rem 1.25rem;
  background: var(--primary);
  color: #ffffff !important;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(30, 105, 232, 0.25);
}

.dash-course-btn:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(30, 105, 232, 0.35);
}

/* ================= سوابق سفارشات (Orders Table) ================= */
.dash-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
}

.dash-table thead {
  background: var(--bg-section);
  border-bottom: 1px solid var(--border);
}

.dash-table th {
  padding: 1rem 1.25rem;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text-muted);
  white-space: nowrap;
}

.dash-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}

.dash-table tbody tr:last-child {
  border-bottom: none;
}

.dash-table tbody tr:hover {
  background: rgba(30, 105, 232, 0.03);
}

html.dark .dash-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.dash-table td {
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: var(--text-dark);
  vertical-align: middle;
  white-space: nowrap;
}

.dash-order-code {
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.5px;
}

.dash-price {
  font-weight: 800;
  color: var(--text-dark);
}

.dash-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.dash-badge-success {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.dash-badge-primary {
  background: rgba(30, 105, 232, 0.12);
  color: var(--primary);
  border: 1px solid rgba(30, 105, 232, 0.25);
}

.dash-badge-info {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
  border: 1px solid rgba(14, 165, 233, 0.25);
}

.dash-badge-warning {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.dash-badge-danger {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.dash-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.dash-action-btn.btn-detail {
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--primary-soft);
}

.dash-action-btn.btn-detail:hover {
  background: var(--primary);
  color: #ffffff;
}

.dash-action-btn.btn-invoice {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.dash-action-btn.btn-invoice:hover {
  background: #059669;
  color: #ffffff;
}

.dash-action-btn.btn-pending {
  background: rgba(245, 158, 11, 0.08);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.2);
  cursor: default;
}

.dash-action-btn.btn-none {
  background: rgba(148, 163, 184, 0.08);
  color: var(--text-light);
  border: 1px solid var(--border);
  cursor: default;
}

/* ================= آدرس‌های پستی (Addresses Grid) ================= */
.dash-addresses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

.dash-address-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1.25rem;
  transition: all 0.2s ease;
  position: relative;
}

.dash-address-card.is-default {
  border-color: var(--primary);
  background: linear-gradient(to bottom, rgba(30, 105, 232, 0.02), var(--surface));
}

.dash-addr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}

.dash-addr-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
  display: flex;
  align-items: center;
}

.dash-addr-title i {
  color: var(--primary);
}

.dash-addr-def-badge {
  background: var(--primary-light);
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--primary-soft);
}

.dash-addr-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.dash-addr-recipient strong {
  color: var(--text-dark);
}

.dash-addr-city {
  font-weight: 700;
  color: var(--primary);
}

.dash-addr-postal {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-top: 0.25rem;
}

/* ================= تنظیمات و مشخصات کاربر ================= */
.dash-settings-card {
  max-width: 620px;
  background: var(--surface);
}

.dash-settings-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group-item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.form-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  align-items: center;
}

.form-label i {
  color: var(--primary);
}

.form-input {
  width: 100%;
  height: 48px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 0 1rem;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--bg);
  color: var(--text-dark);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(30, 105, 232, 0.12);
}

.form-input-disabled {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--text-light) !important;
  cursor: not-allowed;
}

html.dark .form-input-disabled {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #64748b !important;
}

.form-hint {
  font-size: 0.8rem;
  color: var(--text-light);
  line-height: 1.5;
}

.form-actions {
  margin-top: 0.5rem;
}

.dash-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.85rem;
  border-radius: 14px;
  background: var(--primary);
  color: #ffffff !important;
  font-weight: 800;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(30, 105, 232, 0.3);
}

.dash-primary-btn:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(30, 105, 232, 0.4);
}

/* باکس‌های خالی زیبا (Empty State) */
.dash-empty-box {
  text-align: center;
  padding: 4rem 1.5rem;
  background: var(--bg-section);
  border: 2px dashed var(--border);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dash-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  margin-bottom: 1.25rem;
}

html.dark .dash-empty-icon {
  background: rgba(37, 117, 252, 0.15);
  color: #60a5fa;
}

.dash-empty-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.dash-empty-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 480px;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* ================= خریدهای من (محصولات فیزیکی در داشبورد) ================= */
.dash-purchases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

.dash-purchase-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.dash-purchase-card:hover {
  transform: translateY(-3px);
  border-color: rgba(30, 105, 232, 0.35);
  box-shadow: 0 10px 24px rgba(30, 105, 232, 0.1);
}

.dash-purchase-thumb {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #f1f5f9;
  border: 1px solid var(--border);
}

html.dark .dash-purchase-thumb {
  background: #0f172a;
}

.dash-purchase-thumb a {
  display: block;
  width: 100%;
  height: 100%;
}

.dash-purchase-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.dash-purchase-card:hover .dash-purchase-thumb img {
  transform: scale(1.08);
}

.dash-purchase-info {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dash-purchase-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.dash-purchase-code {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 8px;
  border-radius: 6px;
}

html.dark .dash-purchase-code {
  background: rgba(37, 117, 252, 0.2);
  color: #93c5fd;
}

/* کارت دوره‌های من به سبک خریدهای من */
.dash-course-thumb {
  position: relative;
}

.dash-course-play-mini-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.6rem;
  opacity: 0;
  border-radius: 14px;
  transition: opacity 0.25s ease;
}

.dash-purchase-card:hover .dash-course-play-mini-overlay {
  opacity: 1;
}

.dash-badge-course-type {
  background: rgba(168, 85, 247, 0.12) !important;
  color: #7e22ce !important;
}

html.dark .dash-badge-course-type {
  background: rgba(168, 85, 247, 0.22) !important;
  color: #c084fc !important;
}

.dash-purchase-title {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.45;
  margin-bottom: 0.5rem;
}

.dash-purchase-title a {
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dash-purchase-title a:hover {
  color: var(--primary);
}

.dash-purchase-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.85rem;
}

.dash-purchase-meta-item {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.dash-purchase-meta-item strong {
  color: var(--text-dark);
}

.dash-purchase-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: auto;
}

.dash-btn-track {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--primary);
  color: #ffffff !important;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.dash-btn-track:hover {
  background: var(--primary-hover);
}

.dash-btn-reorder {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--bg-section);
  color: var(--text-dark);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.dash-btn-reorder:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ================= باکس گروه‌بندی‌شده خریدهای فیزیکی در یک فاکتور ================= */
.dash-purchases-orders-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dash-purchase-order-box {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.025);
  transition: all 0.25s ease;
}

.dash-purchase-order-box:hover {
  border-color: rgba(30, 105, 232, 0.3);
  box-shadow: 0 8px 24px rgba(30, 105, 232, 0.08);
}

.dash-order-box-header {
  background: var(--bg-section);
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dash-order-box-meta-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dash-order-pill {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--primary);
  background: var(--primary-light);
  padding: 4px 10px;
  border-radius: 8px;
}

html.dark .dash-order-pill {
  background: rgba(37, 117, 252, 0.2);
  color: #93c5fd;
}

.dash-order-date {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.dash-order-count {
  font-size: 0.78rem;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 6px;
  font-weight: 700;
}

.dash-order-box-items {
  padding: 0.25rem 1.25rem;
  display: flex;
  flex-direction: column;
}

.dash-order-subitem {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--border);
}

.dash-order-subitem:last-child {
  border-bottom: none;
}

.dash-subitem-thumb {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #f1f5f9;
  border: 1px solid var(--border);
}

html.dark .dash-subitem-thumb {
  background: #0f172a;
}

.dash-subitem-thumb a {
  display: block;
  width: 100%;
  height: 100%;
}

.dash-subitem-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.dash-order-subitem:hover .dash-subitem-thumb img {
  transform: scale(1.08);
}

.dash-subitem-info {
  flex-grow: 1;
  min-width: 0;
}

.dash-subitem-title {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  line-height: 1.45;
}

.dash-subitem-title a {
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.dash-subitem-title a:hover {
  color: var(--primary);
}

.dash-subitem-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.83rem;
  color: var(--text-muted);
}

.dash-subitem-meta strong {
  color: var(--text-dark);
}

.dash-subitem-action {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .dash-order-box-header {
    flex-direction: column;
    align-items: stretch;
  }
  .dash-order-box-meta-left .dash-btn-track {
    width: 100%;
    justify-content: center;
  }
  .dash-order-subitem {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .dash-subitem-action {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}

/* ================= صفحه فاکتور و رهگیری اقلام سفارش (Order Detail & Tracking) ================= */
.order-detail-layout {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.order-detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  padding: 2.5rem;
}

@media (max-width: 768px) {
  .order-detail-card {
    padding: 1.5rem;
    border-radius: 18px;
  }
}

.order-status-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 768px) {
  .order-status-header {
    flex-direction: column;
    text-align: center;
  }
}

.order-status-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  flex-shrink: 0;
}

.order-status-text {
  flex-grow: 1;
}

.order-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--text-dark);
  margin-bottom: 0.4rem;
}

.order-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.btn-download-invoice {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.25rem;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn-download-invoice:hover {
  background: #059669;
  color: #ffffff;
}

/* گرید متادیتا */
.order-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.order-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.meta-label {
  font-size: 0.8rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.meta-value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
}

/* باکس تبریک و دسترسی به دوره */
.order-courses-alert-box {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.1), rgba(168, 85, 247, 0.1));
  border: 1.5px solid rgba(244, 114, 182, 0.35);
  border-radius: 18px;
  padding: 1.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .order-courses-alert-box {
    flex-direction: column;
    text-align: center;
  }
}

.courses-alert-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #9d174d;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(157, 23, 77, 0.3);
}

.courses-alert-content {
  flex-grow: 1;
}

.courses-alert-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #831843;
  margin-bottom: 0.35rem;
}

html.dark .courses-alert-title {
  color: #f472b6;
}

.courses-alert-desc {
  font-size: 0.88rem;
  color: var(--text-dark);
  line-height: 1.6;
  margin-bottom: 0.85rem;
}

.btn-goto-courses {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.4rem;
  border-radius: 10px;
  background: #9d174d;
  color: #ffffff !important;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(157, 23, 77, 0.25);
}

.btn-goto-courses:hover {
  background: #831843;
  transform: translateY(-2px);
}

/* آدرس تحویل کالای فیزیکی */
.order-shipping-address-box {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.shipping-box-header {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.shipping-box-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
  display: flex;
  align-items: center;
}

.shipping-box-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.shipping-recipient strong {
  color: var(--text-dark);
}

/* جدول اقلام سفارش */
.order-items-section {
  margin-bottom: 2rem;
}

.order-section-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.order-items-table {
  width: 100%;
}

.order-item-row td {
  padding: 1rem;
  vertical-align: middle;
}

.order-item-flex {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.order-item-thumb {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
  background: #f1f5f9;
}

html.dark .order-item-thumb {
  background: #0f172a;
}

.order-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-item-details {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.order-item-title {
  font-size: 0.92rem;
  font-weight: 800;
  margin: 0;
}

.order-item-link {
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.order-item-link:hover {
  color: var(--primary);
}

.item-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.badge-course {
  background: rgba(168, 85, 247, 0.12);
  color: #7e22ce;
  border: 1px solid rgba(168, 85, 247, 0.25);
}

html.dark .badge-course {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}

.badge-physical {
  background: rgba(30, 105, 232, 0.1);
  color: var(--primary);
  border: 1px solid rgba(30, 105, 232, 0.2);
}

html.dark .badge-physical {
  background: rgba(37, 117, 252, 0.2);
  color: #93c5fd;
}

.order-item-qty-pill {
  background: var(--bg-section);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dark);
  white-space: nowrap;
}

.item-btn-access {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 10px;
  background: #7e22ce;
  color: #ffffff !important;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(126, 34, 206, 0.25);
}

.item-btn-access:hover {
  background: #6b21a8;
  transform: translateY(-2px);
}

.item-btn-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 10px;
  background: var(--bg-section);
  color: var(--text-dark);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.item-btn-view:hover {
  border-color: var(--primary);
  color: var(--primary);
}

html.dark .item-btn-view {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}

html.dark .item-btn-view:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--primary);
  color: #ffffff;
}

/* خلاصه مالی */
.order-finance-summary {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 380px;
  margin-right: auto;
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .order-finance-summary {
    max-width: 100%;
    margin-right: 0;
  }
}

.finance-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.finance-item.finance-total {
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text-dark);
}

/* دکمه‌های ناوبری فوتر فاکتور */
.order-footer-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-top: 1.75rem;
  border-top: 1px dashed var(--border);
  margin-top: 2rem;
}

.btn-dash-back,
.btn-dash-courses,
.btn-dash-purchases,
.btn-dash-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.68rem 1.35rem;
  border-radius: 9999px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.btn-dash-back i,
.btn-dash-courses i,
.btn-dash-purchases i,
.btn-dash-home i {
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 0 !important;
}

/* ۱. مشاهده سوابق سفارشات */
.btn-dash-back {
  background: var(--surface);
  color: var(--text-dark);
  border: 1.5px solid var(--border);
}

.btn-dash-back:hover {
  background: var(--surface-elevated, #f8fafc);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* ۲. دوره‌های من */
.btn-dash-courses {
  background: rgba(168, 85, 247, 0.1);
  color: #7e22ce;
  border: 1.5px solid rgba(168, 85, 247, 0.3);
}

.btn-dash-courses:hover {
  background: #7e22ce;
  color: #ffffff !important;
  border-color: #7e22ce;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(126, 34, 206, 0.25);
}

/* ۳. خریدهای من */
.btn-dash-purchases {
  background: rgba(37, 117, 252, 0.09);
  color: #1e69e8;
  border: 1.5px solid rgba(37, 117, 252, 0.3);
}

.btn-dash-purchases:hover {
  background: #1e69e8;
  color: #ffffff !important;
  border-color: #1e69e8;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(30, 105, 232, 0.25);
}

/* ۴. صفحه اصلی سایت */
.btn-dash-home {
  background: var(--bg-section);
  color: var(--text-muted, #64748b);
  border: 1.5px solid var(--border);
}

.btn-dash-home:hover {
  background: var(--surface);
  color: var(--text-dark);
  border-color: var(--text-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* حالت تاریک دکمه‌های ناوبری فاکتور (Dark Mode) */
html.dark .btn-dash-back {
  background: #152033;
  color: #f1f5f9;
  border-color: #26354f;
}

html.dark .btn-dash-back:hover {
  background: #1c2b45;
  color: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

html.dark .btn-dash-courses {
  background: rgba(168, 85, 247, 0.16);
  color: #d8b4fe;
  border-color: rgba(192, 132, 252, 0.35);
}

html.dark .btn-dash-courses:hover {
  background: #9333ea;
  color: #ffffff !important;
  border-color: #a855f7;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.35);
}

html.dark .btn-dash-purchases {
  background: rgba(37, 117, 252, 0.16);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.35);
}

html.dark .btn-dash-purchases:hover {
  background: #2563eb;
  color: #ffffff !important;
  border-color: #3b82f6;
  box-shadow: 0 6px 20px rgba(37, 117, 252, 0.35);
}

html.dark .btn-dash-home {
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
  border-color: #1e293b;
}

html.dark .btn-dash-home:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #f8fafc;
  border-color: #334155;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* ================= استایل‌های مدرن ویرایش مشخصات، نمایه و امنیت ================= */
.settings-grid-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.settings-section-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 22px;
  padding: 1.75rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.025);
  transition: all 0.25s ease;
}

.settings-section-card:hover {
  border-color: rgba(30, 105, 232, 0.25);
  box-shadow: 0 8px 24px rgba(30, 105, 232, 0.06);
}

.settings-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.settings-card-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(168, 85, 247, 0.12);
  color: #7e22ce;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.settings-card-header-icon.icon-info {
  background: var(--primary-light);
  color: var(--primary);
}

.settings-card-header-icon.icon-security {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

html.dark .settings-card-header-icon {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}

html.dark .settings-card-header-icon.icon-info {
  background: rgba(37, 117, 252, 0.2);
  color: #93c5fd;
}

html.dark .settings-card-header-icon.icon-security {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.settings-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 0.25rem;
}

.settings-card-subtitle {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* باکس آپلودر آواتار */
.avatar-uploader-box {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.avatar-preview-wrapper {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

.avatar-preview-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 3px var(--primary-light), 0 8px 20px rgba(0, 0, 0, 0.08);
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.dark .avatar-preview-ring {
  background: #0f172a;
  box-shadow: 0 0 0 3px rgba(37, 117, 252, 0.3), 0 8px 20px rgba(0, 0, 0, 0.2);
}

.avatar-current-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-preview-initial {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-hidden {
  display: none !important;
}

.avatar-quick-trigger {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  border: 2px solid var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.avatar-quick-trigger:hover {
  background: var(--primary-hover);
  transform: scale(1.1);
}

.avatar-actions-wrap {
  flex-grow: 1;
  min-width: 250px;
}

.avatar-buttons-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.btn-sm {
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
}

.text-danger {
  color: #ef4444 !important;
}

.text-danger:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: #ef4444 !important;
}

.avatar-upload-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

/* فرم‌های تنظیمات */
.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.settings-form-grid .full-width {
  grid-column: 1 / -1;
}

.settings-card-footer {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-security {
  background: linear-gradient(135deg, #1e69e8, #3b82f6) !important;
}

/* فیلدهای دارای قفل یا آیکون */
.input-with-lock {
  position: relative;
}

.lock-badge-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1rem;
}

/* فیلد کلمه عبور با دکمه تغییر مشاهده */
.input-password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-password-wrap .form-input {
  padding-left: 42px !important;
  width: 100%;
}

.btn-toggle-pass {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.btn-toggle-pass:hover {
  color: var(--primary);
}

.pass-info-note {
  background: rgba(30, 105, 232, 0.08);
  border: 1px solid rgba(30, 105, 232, 0.2);
  color: var(--text-dark);
  padding: 0.85rem 1rem;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
}

html.dark .pass-info-note {
  background: rgba(37, 117, 252, 0.15);
  border-color: rgba(37, 117, 252, 0.3);
}

/* بنرهای وضعیت بالای تب */
.settings-alert-banner {
  padding: 0.9rem 1.25rem;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.settings-alert-banner.alert-success {
  background: rgba(16, 185, 129, 0.12);
  border: 1.5px solid rgba(16, 185, 129, 0.3);
  color: #059669;
}

.settings-alert-banner.alert-danger {
  background: rgba(239, 68, 68, 0.12);
  border: 1.5px solid rgba(239, 68, 68, 0.3);
  color: #dc2626;
}

.settings-inline-feedback {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  display: none;
}

.settings-inline-feedback.success {
  display: inline-block;
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
}

.settings-inline-feedback.error {
  display: inline-block;
  color: #dc2626;
  background: rgba(239, 68, 68, 0.1);
}

@media (max-width: 768px) {
  .settings-form-grid {
    grid-template-columns: 1fr;
  }
  .avatar-uploader-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .avatar-buttons-row {
    justify-content: center;
  }
}

/* =========================================================
   استایل‌های مدرن و هماهنگ برگه‌های محتوایی (CMS Pages & Dark Mode)
   ========================================================= */

.page-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted, #5D636F);
  margin-top: 0.75rem;
}

.page-main-layout {
  padding: 3.5rem 1.25rem 5rem;
  max-width: 1040px;
  margin: 0 auto;
}

.anna-page-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-lg, 24px);
  padding: 2.75rem 2.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  margin-bottom: 3rem;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.page-rendered-content {
  font-size: 1rem;
  line-height: 2.1;
  color: var(--text-dark, #2A303B);
  text-align: justify;
}

.page-rendered-content h1,
.page-rendered-content h2,
.page-rendered-content h3,
.page-rendered-content h4 {
  color: var(--text-dark, #2A303B);
  font-weight: 900;
  line-height: 1.5;
  margin-top: 1.5rem;
  margin-bottom: 0.85rem;
}

.page-rendered-content p {
  color: var(--text-muted, #5D636F);
  margin-bottom: 1.25rem;
}

.page-rendered-content strong,
.page-rendered-content b {
  color: var(--text-dark, #2A303B);
}

.page-rendered-content ul,
.page-rendered-content ol {
  color: var(--text-muted, #5D636F);
  padding-right: 1.5rem;
  margin-bottom: 1.25rem;
}

.page-rendered-content li {
  margin-bottom: 0.5rem;
}

/* باکس راهنمای پشتیبانی انتهای صفحه */
.anna-page-support-card {
  background: linear-gradient(135deg, rgba(30, 105, 232, 0.06) 0%, rgba(30, 105, 232, 0.12) 100%);
  border: 1px solid rgba(30, 105, 232, 0.2);
  border-radius: var(--radius-lg, 22px);
  padding: 2.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.75rem;
  transition: all 0.3s ease;
}

.support-text-col {
  flex: 1;
  min-width: 260px;
}

.support-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--text-dark, #2A303B);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.support-title i {
  color: var(--primary, #1E69E8);
  font-size: 1.35rem;
}

.support-desc {
  font-size: 0.92rem;
  color: var(--text-muted, #5D636F);
  line-height: 1.8;
  margin: 0;
}

.support-btns-col {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.support-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem 1.5rem;
  border-radius: 14px;
  font-weight: 800;
  font-size: 0.9rem;
  background: var(--primary, #1E69E8);
  color: #ffffff !important;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.support-btn-primary:hover {
  background: var(--primary-hover, #1557c0);
  transform: translateY(-2px);
}

.support-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #ffffff);
  color: var(--text-dark, #2A303B) !important;
  border-radius: 14px;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.support-btn-outline:hover {
  background: var(--primary-light, #eff6ff);
  border-color: var(--primary, #1E69E8);
  transform: translateY(-2px);
}

/* =========================================================
   قوانین نمای شب (Dark Mode) برای صفحات و محتواهای پویا
   ========================================================= */

html.dark .anna-page-card {
  background: #111a2e !important;
  border-color: #1e293b !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

html.dark .page-rendered-content {
  color: #e2e8f0 !important;
}

html.dark .page-rendered-content h1,
html.dark .page-rendered-content h2,
html.dark .page-rendered-content h3,
html.dark .page-rendered-content h4,
html.dark .page-rendered-content h5,
html.dark .page-rendered-content h6 {
  color: #f8fafc !important;
}

html.dark .page-rendered-content p,
html.dark .page-rendered-content ul,
html.dark .page-rendered-content ol,
html.dark .page-rendered-content li {
  color: #cbd5e1 !important;
}

html.dark .page-rendered-content strong,
html.dark .page-rendered-content b {
  color: #ffffff !important;
}

/* بازنویسی کادرهای محتوای داخلی در دارک مود */
html.dark .page-rendered-content div[style*="background"],
html.dark .page-rendered-content article[style*="background"] {
  background: #16223c !important;
  border-color: #1e293b !important;
  color: #e2e8f0 !important;
}

html.dark .page-rendered-content div[style*="color: #1e293b"],
html.dark .page-rendered-content h3[style*="color: #1e293b"],
html.dark .page-rendered-content h4[style*="color: #1e293b"],
html.dark .page-rendered-content p[style*="color: #475569"],
html.dark .page-rendered-content p[style*="color: #64748b"],
html.dark .page-rendered-content p[style*="color: #334155"] {
  color: #cbd5e1 !important;
}

html.dark .page-rendered-content span[style*="background: rgba(217,119,127,0.12)"],
html.dark .page-rendered-content span[style*="background: rgba(30,105,232,0.12)"] {
  background: rgba(37, 117, 252, 0.22) !important;
  color: #60a5fa !important;
}

html.dark .anna-page-support-card {
  background: #16223c !important;
  border-color: #243456 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

html.dark .support-title {
  color: #f8fafc !important;
}

html.dark .support-desc {
  color: #94a3b8 !important;
}

html.dark .support-btn-outline {
  background: #111a2e !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html.dark .support-btn-outline:hover {
  background: #1e2d4d !important;
  border-color: #60a5fa !important;
}

/* کامپوننت‌های اختصاصی ساختار محتوای برگه‌ها */
.guide-intro-box {
  background: var(--primary-light, #eff6ff);
  border-radius: 18px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-right: 4px solid var(--primary, #1E69E8);
}
.guide-intro-title {
  font-weight: 900;
  color: var(--text-dark, #2A303B);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}
.guide-intro-desc {
  color: var(--text-muted, #5D636F);
  line-height: 1.9;
  margin: 0;
}
.guide-steps-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.guide-step-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.04));
  transition: all 0.3s ease;
}
.guide-step-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
}
.guide-step-badge {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--primary-light, #eff6ff);
  color: var(--primary, #1E69E8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.1rem;
}
.guide-step-title {
  font-weight: 800;
  color: var(--text-dark, #2A303B);
  margin: 0;
  font-size: 1.1rem;
}
.guide-step-text {
  color: var(--text-muted, #5D636F);
  line-height: 1.9;
  margin: 0;
}

/* کارت‌های پرسش‌های متداول */
.faq-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.04));
  margin-bottom: 1rem;
}
.faq-card-title {
  font-weight: 800;
  color: var(--text-dark, #2A303B);
  margin-bottom: 0.65rem;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.faq-card-title i {
  color: var(--primary, #1E69E8);
}
.faq-card-desc {
  color: var(--text-muted, #5D636F);
  line-height: 2;
  margin: 0;
}

/* آمار و بیوگرافی درباره ما */
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.about-stat-card {
  background: var(--bg-section, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  padding: 1.25rem;
  text-align: center;
}
.about-stat-num {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--primary, #1E69E8);
  margin-bottom: 0.35rem;
}
.about-stat-label {
  font-weight: 700;
  color: var(--text-dark, #2A303B);
  font-size: 0.95rem;
}

/* قوانین دارک مود برای کامپوننت‌ها */
html.dark .guide-intro-box {
  background: #16223c !important;
  border-right-color: var(--primary, #2575fc) !important;
}
html.dark .guide-intro-title {
  color: #f8fafc !important;
}
html.dark .guide-intro-desc {
  color: #cbd5e1 !important;
}
html.dark .guide-step-card,
html.dark .faq-card {
  background: #16223c !important;
  border-color: #1e293b !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}
html.dark .guide-step-badge {
  background: rgba(37, 117, 252, 0.2) !important;
  color: #60a5fa !important;
}
html.dark .guide-step-title,
html.dark .faq-card-title {
  color: #f8fafc !important;
}
html.dark .guide-step-text,
html.dark .faq-card-desc {
  color: #cbd5e1 !important;
}
html.dark .about-stat-card {
  background: #16223c !important;
  border-color: #1e293b !important;
}
html.dark .about-stat-label {
  color: #f8fafc !important;
}