/* ============================================
   LUXURY THEME - Dark Glassmorphism (v2)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;700;900&display=swap');

:root {
  --bg: #05080f;
  --surface: rgba(20, 30, 48, 0.6);
  --surface-hover: rgba(30, 45, 70, 0.8);
  --border: rgba(255, 255, 255, 0.08);
  --text-900: #f8fafc;
  --text-500: #94a3b8;
  --accent: #3b82f6;
  --accent-glow: rgba(59, 130, 246, 0.4);
  --gold: #fbbf24;
  --gold-glow: rgba(251, 191, 36, 0.3);
}

/* پس‌زمینه کل صفحه (بدون انیمیشن که باعث پرش میشه) */
body {
  font-family: 'Vazirmatn', sans-serif;
  background-color: var(--bg) !important;
  background-image: 
    radial-gradient(circle at 15% 50%, rgba(59, 130, 246, 0.08), transparent 25%),
    radial-gradient(circle at 85% 30%, rgba(251, 191, 36, 0.05), transparent 25%) !important;
  color: var(--text-900);
}

/* انیمیشن فقط برای محتوای اصلی، نه کل صفحه */
main, .container, .product-detail, .license-request-section {
  animation: fadeInContent 0.4s ease-out;
}
@keyframes fadeInContent { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* --- هدر شیشه‌ای --- */
.site-header {
  background: rgba(5, 8, 15, 0.7) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
}
.logo {
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(90deg, #fff, var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px var(--gold-glow);
  text-decoration: none;
}

/* --- منوی دسکتاپ --- */
.main-nav ul {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a {
  color: var(--text-500);
  text-decoration: none;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 12px;
  transition: all 0.3s ease;
}
.main-nav a:hover {
  color: #fff;
  background: var(--surface);
  box-shadow: 0 0 15px var(--accent-glow);
}

/* --- دکمه همبرگری (دسکتاپ مخفی) --- */
.mobile-menu-btn { display: none; }
.menu-close-btn { display: none; }

/* --- ریسپانسیو موبایل --- */
@media (max-width: 900px) {
  .mobile-menu-btn {
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); color: #fff; border: 1px solid var(--border);
    width: 44px; height: 44px; border-radius: 12px; font-size: 24px; cursor: pointer;
  }
  .main-nav {
    position: fixed; top: 0; right: -100%; width: 300px; height: 100vh;
    background: rgba(10, 15, 25, 0.95); backdrop-filter: blur(20px);
    border-left: 1px solid var(--border); z-index: 10000;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 80px 24px 24px;
  }
  .main-nav.open { right: 0; }
  .main-nav ul { flex-direction: column; }
  .main-nav a { display: block; font-size: 18px; padding: 16px; }
  
  .menu-close-btn {
    display: block; position: absolute; top: 20px; left: 20px;
    background: none; border: none; color: #fff; font-size: 24px; cursor: pointer;
  }
  
  
}

/* --- کارت‌های شیشه‌ای (سایت اصلی) --- */
.product-card, .section, .license-form, .product-detail {
  background: var(--surface) !important;
  backdrop-filter: blur(12px);
  border: 1px solid var(--border) !important;
  border-radius: 24px !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.product-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 20px 40px -10px var(--accent-glow) !important;
}

/* --- اسلایدر محصولات --- */
.product-swiper {
  padding: 20px 40px 60px 40px !important;
}
.swiper-slide {
  height: auto;
}
/* دکمه‌های اسلایدر */
.swiper-button-next, .swiper-button-prev {
  color: var(--accent) !important;
  background: var(--surface);
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
}
.swiper-button-next::after, .swiper-button-prev::after {
  font-size: 18px !important;
  font-weight: bold;
}
.swiper-pagination-bullet {
  background: var(--text-500) !important;
}
.swiper-pagination-bullet-active {
  background: var(--gold) !important;
  width: 20px !important;
  border-radius: 10px !important;
}

/* --- دکمه‌های نئونی --- */
.btn-primary-navy, .btn-view-all, .license-submit-btn {
  background: linear-gradient(135deg, var(--accent), #2563eb) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px 32px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px;
  box-shadow: 0 0 20px var(--accent-glow) !important;
  transition: all 0.3s ease !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary-navy:hover, .btn-view-all:hover, .license-submit-btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 0 30px var(--accent-glow) !important;
}

/* --- تایپوگرافی --- */
.section-head h1 {
  font-size: 36px;
  font-weight: 900;
  background: linear-gradient(135deg, #fff 30%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
}
.section-head p { color: var(--text-500); font-size: 18px; }
.eyebrow {
  background: rgba(251, 191, 36, 0.1) !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold-glow) !important;
  border-radius: 20px !important;
  padding: 6px 16px !important;
  font-weight: 700;
  display: inline-block;
}

/* --- فرم لایسنس --- */
.license-field input, .license-field select {
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid var(--border) !important;
  color: #fff !important;
  border-radius: 12px !important;
}
.license-field input:focus, .license-field select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 15px var(--accent-glow) !important;
}

/* --- دکمه بازگشت به بالا --- */
.back-to-top {
  position: fixed; bottom: 30px; left: 30px; width: 50px; height: 50px;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--border);
  color: #fff; font-size: 24px; cursor: pointer; backdrop-filter: blur(10px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.5); opacity: 0; pointer-events: none;
  transition: all 0.3s ease; z-index: 500;
}
.back-to-top.show { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: var(--accent); box-shadow: 0 0 20px var(--accent-glow); transform: translateY(-5px); }

/* ============================================
   استایل برای پنل ادمین (Flask-Admin)
   ============================================ */
body, .container-fluid, .container {
    background-color: var(--bg) !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.1), transparent 50%) !important;
    color: var(--text-900) !important;
}
.navbar, .pprt-navbar {
    background: rgba(5, 8, 15, 0.8) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border) !important;
}
.navbar-brand { color: var(--gold) !important; font-weight: 900; }
.nav-link { color: var(--text-500) !important; }
.nav-link:hover { color: var(--accent) !important; }

/* جداول ادمین */
.table {
    background: var(--surface) !important;
    color: var(--text-900) !important;
    border-color: var(--border) !important;
    border-radius: 12px;
    overflow: hidden;
}
.table th {
    background: rgba(0,0,0,0.4) !important;
    color: var(--accent) !important;
    border-color: var(--border) !important;
    font-weight: 700;
}
.table td {
    border-color: var(--border) !important;
    vertical-align: middle;
}
.table tr:hover td {
    background: rgba(255,255,255,0.03) !important;
}

/* دکمه‌های ادمین */
.btn, .btn-primary, .btn-default {
    background: linear-gradient(135deg, var(--accent), #2563eb) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease;
}
.btn:hover, .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--accent-glow);
}

/* ============================================
   GLOBAL FONT OVERRIDE (برای یکدست شدن فونت‌ها)
   ============================================ */
*, *::before, *::after, body, button, input, select, textarea, 
h1, h2, h3, h4, h5, h6, p, a, span, div, table, th, td, label {
    font-family: 'Vazirmatn', 'Vazir', Tahoma, sans-serif !important;
}

/* ============================================
   ADMIN PANEL OVERRIDES (Flask-Admin)
   ============================================ */
/* پس‌زمینه کل پنل ادمین */
body, .container-fluid, .container, .wrapper {
    background-color: #05080f !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.08), transparent 50%) !important;
    color: #f8fafc !important;
}

/* نوار بالای ادمین */
.navbar, .pprt-navbar, .navbar-dark {
    background: rgba(5, 8, 15, 0.85) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.navbar-brand, .navbar-dark .navbar-brand {
    color: #fbbf24 !important;
    font-weight: 900;
}
.navbar-nav .nav-link {
    color: #94a3b8 !important;
    transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
    color: #3b82f6 !important;
}

/* عناوین */
h1, h2, h3, h4, h5, h6, .page-header, .model-name {
    color: #f8fafc !important;
    font-weight: 700;
}

/* جداول ادمین */
.table {
    background: rgba(20, 30, 48, 0.6) !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px;
    overflow: hidden;
}
.table thead th {
    background: rgba(0, 0, 0, 0.5) !important;
    color: #3b82f6 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    font-weight: 700;
}
.table tbody td {
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    background: transparent !important;
    vertical-align: middle;
}
.table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* لینک‌های ادمین */
a, a:hover, a:focus {
    color: #3b82f6 !important;
    text-decoration: none;
}

/* دکمه‌های ادمین */
.btn, .btn-primary, .btn-default, .btn-success, .btn-danger, .btn-warning {
    border-radius: 10px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}
.btn-primary, .btn-default {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    border: none !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-default:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
}

/* فرم‌های ادمین */
.form-control, .form-select, input, select, textarea {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
    border-radius: 10px !important;
}
.form-control:focus, .form-select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3) !important;
}

/* صفحه‌بندی (Pagination) */
.pagination > li > a, .pagination > li > span {
    background: rgba(20, 30, 48, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
}
.pagination > li.active > a {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* هشدارها */
.alert {
    background: rgba(20, 30, 48, 0.8) !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px;
}

/* کارت‌های آماری در صفحه لایسنس */
.license-stat-box {
    background: rgba(20, 30, 48, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px;
}

/* کاشی‌های عکس در پنل ادمین */
.pprt-tile {
    border-radius: 12px;
    background: rgba(20, 30, 48, 0.6) !important;
}
.pprt-tile-add {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 2px dashed rgba(255, 255, 255, 0.15) !important;
    color: #94a3b8 !important;
}
.pprt-tile-add:hover {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}

/* --- بهبود دکمه‌های عملیاتی در جدول ادمین --- */
.table td a {
    display: inline-block;
    transition: all 0.2s ease !important;
}
.table td a:hover {
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.2);
}

/* --- جلوگیری از اعمال رنگ آبی لینک‌ها روی دکمه‌های جدول ادمین --- */
.table td a {
    color: #fff !important;
}
.table td a:hover {
    color: #fff !important;
}
/* --- چیدمان بهتر برای دکمه‌های عملیاتی --- */
.table td {
    white-space: nowrap;
}

/* ============================================
   بهبود ظاهر جدول‌های پنل ادمین
   ============================================ */

/* سرستون‌ها */
.table thead th {
    font-size: 15px !important;      /* درشت‌تر کردن فونت */
    font-weight: 900 !important;     /* پررنگ‌تر */
    color: #3b82f6 !important;       /* رنگ آبی نئونی */
    background: rgba(0, 0, 0, 0.6) !important;
    padding: 16px 12px !important;   /* فاصله بهتر */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(59, 130, 246, 0.3) !important;
}

/* بدنه جدول */
.table tbody td {
    font-size: 14px !important;
    padding: 14px 12px !important;
    vertical-align: middle !important;
}

/* هاور روی ردیف‌ها */
.table tbody tr:hover td {
    background: rgba(59, 130, 246, 0.08) !important;
}

/* ستون‌های عملیاتی (دکمه‌ها) */
.table td a {
    font-size: 13px !important;
    padding: 8px 14px !important;
}

/* صفحه‌بندی */
.pagination > li > a {
    font-size: 14px !important;
    padding: 8px 14px !important;
}

/* ============================================
   اصلاح ظاهر منوهای کشویی (Select2) در پنل ادمین
   ============================================ */

/* کادر اصلی Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: rgba(20, 30, 48, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #f8fafc !important;
    height: 42px !important;
    display: flex;
    align-items: center;
}

/* متن داخل کادر */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f8fafc !important;
    line-height: 42px !important;
    padding-right: 12px !important;
}

/* فلش کنار کادر */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    left: 10px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #3b82f6 transparent transparent transparent !important;
}

/* منوی باز شده (Dropdown) */
.select2-container--default .select2-results__options {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
    padding: 8px !important;
}

/* آیتم‌های داخل منو */
.select2-container--default .select2-results__option {
    background-color: transparent !important;
    color: #94a3b8 !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease;
}

/* هاور روی آیتم‌ها */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #3b82f6 !important;
}

/* آیتم انتخاب شده */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #3b82f6 !important;
    font-weight: bold;
}

/* کادر جستجو داخل منو (اگر فعال باشد) */
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 8px !important;
}

/* استایل برای فرم‌های معمولی ادمین (غیر از Select2) */
.form-control, .form-select {
    background-color: rgba(20, 30, 48, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
    border-radius: 10px !important;
    height: 42px;
}
.form-control:focus, .form-select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3) !important;
}

/* ============================================
   استایل منوی کشویی پیش‌فرض (بدون Select2)
   ============================================ */
select.form-control, select.form-select {
    background-color: rgba(20, 30, 48, 0.9) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #f8fafc !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-family: 'Vazirmatn', sans-serif !important;
    font-size: 15px !important;
    height: 46px !important;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: left 14px center !important;
    background-size: 18px !important;
    cursor: pointer;
}

select.form-control:focus, select.form-select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3) !important;
    outline: none;
}

/* استایل آیتم‌های داخل منوی کشویی (در برخی مرورگرها) */
select.form-control option, select.form-select option {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    padding: 10px;
}

/* ============================================
   استایل قوی برای منوی کشویی (Override کامل Select2)
   ============================================ */
select.form-control, select.form-select, .select2-container {
    display: block !important;
    width: 100% !important;
    background-color: rgba(20, 30, 48, 0.9) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #f8fafc !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-family: 'Vazirmatn', sans-serif !important;
    font-size: 15px !important;
    height: auto !important;
    min-height: 46px !important;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: left 14px center !important;
    background-size: 18px !important;
    cursor: pointer;
}

/* مخفی کردن کامل هر چیزی که مربوط به Select2 است */
.select2-container, .select2-dropdown, .select2-search, .select2-results {
    display: none !important;
}

/* نمایش منوی کشویی بومی مرورگر */
select.form-control option, select.form-select option {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    padding: 10px;
}

/* ============================================
   فشرده کردن و مرتب‌سازی فرم‌های پنل ادمین
   ============================================ */

/* کاهش فاصله بین گروه‌های فرم */
.form-group {
    margin-bottom: 15px !important;
}

/* تنظیم ارتفاع و فاصله داخلی فیلدها */
.form-control {
    height: 42px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    margin-bottom: 0 !important;
}

/* تنظیم فاصله برچسب‌ها (Labels) */
.control-label, .form-label {
    margin-bottom: 5px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* فشرده کردن بخش‌های فرم که Flask-Admin به صورت پیش‌فرض حاشیه زیادی دارد */
.form-horizontal .form-group {
    margin-right: -10px !important;
    margin-left: -10px !important;
}

/* استایل برای textarea (اگر جایی استفاده شده) */
textarea.form-control {
    height: auto !important;
    min-height: 100px !important;
}

/* فاصله‌ی مناسب برای دکمه‌های ذخیره/انصراف */
.form-actions {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   محدود کردن عرض فرم‌های ادمین (جلوگیری از کشیدگی)
   ============================================ */

/* کادر اصلی فرم‌ها (صفحه ایجاد و ویرایش) */
.admin-form-container, 
.container-fluid > form,
.container-fluid > .row {
    max-width: 800px !important;
    margin: 0 auto !important;
    float: none !important;
}

/* محدود کردن عرض فیلدها در فرم‌های ادمین */
.form-control, 
.form-select, 
select.form-control, 
textarea.form-control {
    max-width: 100% !important;
}

/* فاصله مناسب برای فرم‌های ایجاد/ویرایش */
.form-horizontal .form-group {
    margin-bottom: 20px !important;
}

/* اگر فرم در یک کارت قرار دارد، عرض کارت را محدود کن */
.card, .panel {
    max-width: 100% !important;
}

/* محدود کردن عرض دکمه‌های فرم */
.form-actions {
    max-width: 100% !important;
}

/* استایل برای صفحه ایجاد/ویرایش */
body > .container-fluid > .row > .col-lg-10,
body > .container-fluid > .row > .col-md-12 {
    max-width: 800px !important;
    margin: 0 auto !important;
    float: none !important;
}

/* فشرده‌سازی فیلدهای متنی طولانی */
textarea.form-control {
    max-width: 100% !important;
    resize: vertical;
}



/* ============================================
   منوی موبایل نهایی (بدون اورلی)
   ============================================ */
@media (max-width: 900px) {
    .main-nav {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 300px !important;
        height: 100vh !important;
        background: #0f172a !important;
        z-index: 99999 !important;
        box-shadow: -15px 0 50px rgba(0,0,0,0.9) !important; /* سایه بزرگ برای تاریک کردن بقیه صفحه */
        transition: right 0.3s ease !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 0 !important;
        border-left: 1px solid rgba(255,255,255,0.1) !important;
    }
    .main-nav.open {
        right: 0 !important;
    }
    .main-nav ul {
        list-style: none !important;
        padding: 0 20px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    .main-nav ul li a {
        color: #ffffff !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        padding: 15px !important;
        display: block !important;
        border-radius: 12px !important;
        text-align: right !important;
        transition: all 0.2s ease !important;
    }
    .main-nav ul li a:hover {
        background: rgba(59, 130, 246, 0.2) !important;
        color: #3b82f6 !important;
    }
    .menu-close-btn {
        position: absolute !important;
        top: 20px !important;
        left: 20px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: none !important;
        color: #fff !important;
        font-size: 24px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        z-index: 100000 !important;
    }
}

/* ============================================
   استایل نهایی دکمه‌های اسلایدر (فلش دایره‌ای)
   ============================================ */
.swiper-button-next, .swiper-button-prev {
    background: rgba(20, 30, 48, 0.8) !important;
    backdrop-filter: blur(10px);
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #3b82f6 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    background: #3b82f6 !important;
    color: #fff !important;
    transform: scale(1.1) !important;
}
.swiper-button-next::after, .swiper-button-prev::after {
    display: none !important; /* مخفی کردن متن پیش‌فرض */
}
.swiper-button-next svg, .swiper-button-prev svg {
    width: 24px !important;
    height: 24px !important;
    fill: currentColor !important;
}

/* ============================================
   اصلاح جهت فلش‌های اسلایدر
   ============================================ */

/* اطمینان از اینکه فلش بعدی به سمت چپ (در RTL) اشاره می‌کند */
.swiper-button-next svg {
    transform: rotate(0deg) !important; 
}

/* چرخاندن فلش قبلی به سمت راست */
.swiper-button-prev svg {
    transform: rotate(180deg) !important;
}

/* برای اطمینان در حالت RTL، اگر باز هم برعکس بود این را فعال کنید */
[dir="rtl"] .swiper-button-next {
    transform: scaleX(-1) !important;
}
[dir="rtl"] .swiper-button-prev {
    transform: scaleX(-1) !important;
}

/* اما چون آیکون‌ها در وسط دایره هستند، بهتر است فقط آیکون را بچرخانیم */
.swiper-button-next svg {
    transform: scaleX(-1) !important; /* آیکون Next به سمت چپ */
}
.swiper-button-prev svg {
    transform: rotate(180deg) scaleX(-1) !important; /* آیکون Prev به سمت راست */
}

/* ============================================
   اصلاح نهایی جهت فلش‌های اسلایدر (RTL)
   ============================================ */

/* فلش سمت چپ (Next) - باید به سمت چپ اشاره کند */
.swiper-button-next svg {
    transform: rotate(0deg) !important;
}

/* فلش سمت راست (Prev) - باید به سمت راست اشاره کند */
.swiper-button-prev svg {
    transform: rotate(180deg) !important;
}

/* ============================================
   اصلاح موقعیت دکمه‌های اسلایدر (خارج از عکس‌ها)
   ============================================ */

/* افزایش فاصله دکمه‌ها از لبه‌های اسلایدر */
.swiper-button-next {
    left: -10px !important; /* انتقال به سمت چپ و خارج از عکس */
    right: auto !important;
}
.swiper-button-prev {
    right: -10px !important; /* انتقال به سمت راست و خارج از عکس */
    left: auto !important;
}

/* در صفحه‌های کوچک‌تر، دکمه‌ها را کمی به داخل بیاور تا از صفحه بیرون نزنند */
@media (max-width: 900px) {
    .swiper-button-next { left: 5px !important; }
    .swiper-button-prev { right: 5px !important; }
}

/* اطمینان از اینکه کانتینر اسلایدر فضای کافی برای دکمه‌ها دارد */
.product-swiper {
    padding-left: 50px !important;
    padding-right: 50px !important;
    overflow: visible !important;
}

/* ============================================
   اصلاح نهایی اسلایدر (حذف بیرون‌زدگی و تنظیم دکمه‌ها)
   ============================================ */

/* برگرداندن اسلایدر به حالت عادی */
.product-swiper {
    padding: 20px 0 50px 0 !important; /* حذف پدینگ چپ و راست اضافی */
    overflow: hidden !important;       /* مخفی کردن کارت‌های بیرون از کادر */
    position: relative !important;
}

/* تنظیم دقیق دکمه‌ها روی لبه‌های داخلی کادر (نه روی عکس) */
.swiper-button-next {
    left: 10px !important;  /* کمی داخل کادر */
    right: auto !important;
    top: 45% !important;    /* کمی بالاتر از مرکز برای تناسب با کارت‌ها */
}

.swiper-button-prev {
    right: 10px !important; /* کمی داخل کادر */
    left: auto !important;
    top: 45% !important;
}

/* در موبایل، دکمه‌ها کمی به داخل‌تر بیایند تا روی عکس‌ها نیفتند */
@media (max-width: 900px) {
    .swiper-button-next { left: 5px !important; }
    .swiper-button-prev { right: 5px !important; }
}

/* ============================================
   اصلاح نهایی اسلایدر (فضای خالی برای دکمه‌ها)
   ============================================ */

.product-swiper {
    padding: 20px 50px 50px 50px !important; /* ۵۰ پیکسل فاصله از چپ و راست */
    overflow: hidden !important;             /* مخفی کردن کارت‌های بیرون از کادر */
    position: relative !important;
}

/* تنظیم دقیق دکمه‌ها در فضای خالی ایجاد شده */
.swiper-button-next {
    left: 5px !important;  /* در فضای خالی سمت چپ */
    right: auto !important;
    top: 45% !important;
}

.swiper-button-prev {
    right: 5px !important; /* در فضای خالی سمت راست */
    left: auto !important;
    top: 45% !important;
}

/* در موبایل، فضای خالی کمتر شود */
@media (max-width: 900px) {
    .product-swiper {
        padding: 15px 30px 40px 30px !important;
    }
    .swiper-button-next { left: 0px !important; }
    .swiper-button-prev { right: 0px !important; }
}

/* ============================================
   انتقال دکمه‌های اسلایدر به پایین (تمیز و مدرن)
   ============================================ */

/* برگرداندن اسلایدر به حالت عادی */
.product-swiper {
    padding: 20px 0 70px 0 !important; /* فضای کافی در پایین برای دکمه‌ها و نقطه‌ها */
    overflow: hidden !important;
    position: relative !important;
}

/* بازنشانی موقعیت پیش‌فرض دکمه‌ها */
.swiper-button-next, .swiper-button-prev {
    position: absolute !important;
    top: auto !important;
    bottom: 0px !important; /* چسبیدن به پایین */
    transform: none !important;
    width: 40px !important;
    height: 40px !important;
}

/* تنظیم موقعیت افقی دکمه‌ها در پایین */
.swiper-button-next {
    left: calc(50% + 30px) !important; /* کمی سمت چپ مرکز */
    right: auto !important;
}

.swiper-button-prev {
    right: calc(50% + 30px) !important; /* کمی سمت راست مرکز */
    left: auto !important;
}

/* استایل آیکون‌ها برای پایین */
.swiper-button-next svg, .swiper-button-prev svg {
    width: 20px !important;
    height: 20px !important;
}

/* تنظیم موقعیت نقطه‌های Pagination */
.swiper-pagination {
    bottom: 10px !important;
}

/* در موبایل، دکمه‌ها کمی نزدیک‌تر به هم باشند */
@media (max-width: 900px) {
    .swiper-button-next { left: calc(50% + 25px) !important; }
    .swiper-button-prev { right: calc(50% + 25px) !important; }
}

/* ============================================
   حذف دکمه‌های پیش‌فرض Swiper و استایل دکمه‌های جدید
   ============================================ */

/* مخفی کردن کامل دکمه‌های پیش‌فرض */
.swiper-button-next, .swiper-button-prev {
    display: none !important;
}

/* استایل دکمه‌های جدید که در HTML اضافه می‌کنیم */
.custom-swiper-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(20, 30, 48, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    font-size: 18px;
}
.custom-swiper-btn:hover {
    background: #3b82f6;
    color: #fff;
    transform: scale(1.1);
}
.custom-swiper-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    position: relative;
    z-index: 10;
}

/* ============================================
   اصلاح رنگ و افکت دکمه‌های اسلایدر
   ============================================ */
.custom-swiper-btn {
    color: #3b82f6 !important; /* رنگ پیش‌فرض آبی */
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* افکت هاور: پس‌زمینه تیره‌تر و فلش زرد */
.custom-swiper-btn:hover {
    background: #1e293b !important; /* پس‌زمینه سرمه‌ای تیره */
    color: #fbbf24 !important; /* رنگ زرد */
    border-color: #fbbf24 !important; /* حاشیه زرد */
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.3) !important; /* سایه زرد */
    transform: scale(1.1) !important;
}

/* ============================================
   استایل منوی کشویی فرم لایسنس
   ============================================ */
.license-form select {
    background-color: rgba(20, 30, 48, 0.9) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #f8fafc !important;
    border-radius: 12px !important;
    padding: 16px !important;
    font-family: 'Vazirmatn', sans-serif !important;
    font-size: 16px !important;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: left 16px center !important;
    background-size: 18px !important;
    cursor: pointer;
}
.license-form select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3) !important;
    outline: none;
}
.license-form select option {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    padding: 10px;
}

/* ============================================
   اصلاح تراز و عرض متن توضیحات محصول
   ============================================ */

/* حذف محدودیت عرض و اعمال تراز راست‌چین */
.product-detail .full-desc {
    max-width: 100% !important;
    width: 100% !important;
    text-align: right !important;
    line-height: 1.8 !important;
    margin-top: 10px !important;
    color: var(--text-500) !important;
}

/* اطمینان از اینکه پاراگراف‌های داخل توضیحات هم تراز راست‌چین هستند */
.product-detail .full-desc p {
    text-align: right !important;
    margin-bottom: 15px !important;
}

/* اگر متن داخل یک کانتینر دیگر بود، عرض آن را ۱۰۰٪ کن */
.product-detail {
    max-width: 100% !important;
}

/* ============================================
   اصلاح کامل چیدمان صفحه محصول (هارمونی و تناسب)
   ============================================ */

/* محدود کردن عرض کل صفحه محصول */
.product-detail {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    background: transparent !important; /* حذف پس‌زمینه بزرگ که کل صفحه را گرفته بود */
}

/* محدود کردن ارتفاع تصویر اصلی و تنظیم آن */
.gallery-main {
    max-height: 500px !important;
    min-height: 400px !important;
    background: #0f172a !important; /* پس‌زمینه تیره برای تصویر */
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.gallery-main img {
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important; /* نمایش کامل تصویر بدون کشیدگی */
}

/* تنظیم چیدمان گالری (تامبنیل‌ها سمت راست با فاصله) */
.gallery-modern {
    display: flex !important;
    flex-direction: row !important;
    gap: 25px !important;
    align-items: flex-start !important;
    margin-bottom: 40px !important;
}
.gallery-thumbs {
    order: -1 !important;
    flex-direction: column !important;
    width: 110px !important;
    flex-shrink: 0 !important;
    max-height: 500px !important;
    overflow-y: auto !important;
    padding-left: 5px !important;
}
.gallery-thumbs .thumb {
    border-radius: 12px !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}
.gallery-thumbs .thumb.is-active {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.3) !important;
}

/* تنظیم عرض متن توضیحات */
.product-detail .full-desc {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 2 !important;
    color: #cbd5e1 !important;
    margin-top: 20px !important;
    text-align: right !important;
}

/* تنظیم دکمه پایین صفحه */
.product-detail .btn-primary-navy {
    margin-top: 30px !important;
    padding: 16px 40px !important;
    font-size: 18px !important;
}

/* در موبایل */
@media (max-width: 768px) {
    .gallery-modern {
        flex-direction: column !important;
    }
    .gallery-thumbs {
        order: 1 !important;
        flex-direction: row !important;
        width: 100% !important;
        max-height: none !important;
        overflow-x: auto !important;
    }
    .gallery-main {
        min-height: 300px !important;
        max-height: 350px !important;
    }
}

/* ============================================
   اصلاح تراز متن (Justify) برای توضیحات محصول
   ============================================ */
.product-detail .full-desc {
    text-align: justify !important;
    text-justify: inter-word !important;
    line-height: 2 !important;
}
.product-detail .full-desc p {
    text-align: justify !important;
    margin-bottom: 15px !important;
}

/* ============================================
   اصلاح به هم ریختگی جدول ادمین
   ============================================ */

/* اطمینان از اینکه جدول در کادر خودش می‌ماند */
.table-responsive {
    overflow-x: auto !important;
    width: 100% !important;
}

.table {
    table-layout: auto !important;
    width: 100% !important;
    white-space: nowrap !important;
}

.table th, .table td {
    padding: 12px 8px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* تنظیم عرض ستون‌ها برای جلوگیری از بیرون‌زدگی */
.table th:nth-child(1) { width: 40px; }   /* چک‌باکس */
.table th:nth-child(2) { width: 120px; }  /* تاریخ درخواست */
.table th:nth-child(3) { width: 100px; }  /* نام مشتری */
.table th:nth-child(4) { width: 100px; }  /* شماره تماس */
.table th:nth-child(5) { width: 150px; }  /* برنامه */
.table th:nth-child(6) { width: 180px; }  /* کد سخت‌افزار */
.table th:nth-child(7) { width: 80px; }   /* مدت */
.table th:nth-child(8) { width: 100px; }  /* وضعیت */
.table th:nth-child(9) { width: 100px; }  /* تاریخ انقضا */
.table th:nth-child(10) { width: 80px; }  /* تایید */
.table th:nth-child(11) { width: 80px; }  /* رد */
.table th:nth-child(12) { width: 80px; }  /* حذف */

/* PATCH-FOOTER */
footer.site-footer {
  text-align: right !important;
  padding: 48px 24px 22px !important;
  margin-top: 70px !important;
  background: linear-gradient(180deg, rgba(10,15,26,0) 0%, #060B14 40%) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}
footer.site-footer .pf-wrap { max-width: 1120px; margin: 0 auto; }
footer.site-footer .pf-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
footer.site-footer .pf-logo {
  font-size: 20px; font-weight: 900; margin-bottom: 14px;
  background: linear-gradient(90deg, #fff, var(--gold, #fbbf24));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
footer.site-footer .pf-desc {
  margin: 0; color: var(--text-500, #94a3b8);
  font-size: 14px; line-height: 2; max-width: 440px;
}
footer.site-footer .pf-title {
  color: var(--gold, #fbbf24); font-weight: 700; font-size: 15px;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: inline-block; min-width: 110px;
}
footer.site-footer .pf-list { list-style: none; margin: 0; padding: 0; }
footer.site-footer .pf-list li {
  margin: 0 0 10px; font-size: 14px; color: var(--text-500, #94a3b8);
}
footer.site-footer .pf-list a {
  color: #cbd5e1 !important; text-decoration: none; transition: color .2s;
}
footer.site-footer .pf-list a:hover { color: var(--gold, #fbbf24) !important; }
footer.site-footer .pf-label { color: var(--text-500, #94a3b8); }
footer.site-footer .pf-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
footer.site-footer .pf-bottom {
  margin-top: 36px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
  text-align: center; color: #64748b; font-size: 13px;
}
@media (max-width: 800px) {
  footer.site-footer { text-align: center !important; padding-top: 36px !important; }
  footer.site-footer .pf-grid { grid-template-columns: 1fr; gap: 28px; }
  footer.site-footer .pf-desc { margin: 0 auto; }
}

/* PATCH-PUBLIC */
/* فرم لایسنس: حذف کادر تو در تو (کارت بیرونی همان section است) */
.license-form {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}
.license-form input, .license-form select { min-width: 0; box-sizing: border-box; }
.hw-readonly { opacity: .7; cursor: not-allowed; }
.breadcrumb { margin-bottom: 16px; }
@media (max-width: 600px) {
  .license-request-section { padding: 24px 16px !important; }
  .license-form button[onclick*="pasteHardwareId"] { padding: 0 12px !important; white-space: nowrap; }
}