@font-face {
    font-family: 'Kalameh';
    src: url(../../static/media/Kalameh-Medium.93f0d8ca4bdb9ee7c003.ttf) format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* استایل اصلی بدنه */
body {
  margin: 0;
  font-family: 'Kalameh', 'peyda', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* اطمینان از استفاده از فونت peyda در همه جا */
* {
  font-family: 'Kalameh', 'peyda', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif !important;
}

/* استثنا برای عناصر کد */
code, pre, .code, .monospace {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace !important;
}

/* جلوگیری از زوم در iOS برای تمام اینپوت‌ها */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  font-size: 16px !important; /* جلوگیری از زوم در iOS */
  -webkit-appearance: none !important; /* حذف استایل پیش‌فرض iOS */
  -webkit-tap-highlight-color: transparent !important; /* حذف highlight کلیک */
  -webkit-touch-callout: none !important; /* حذف callout iOS */
  -webkit-user-select: text !important; /* اجازه انتخاب متن */
  user-select: text !important;
}

/* جلوگیری از زوم در iOS برای تمام فرم‌ها */
form {
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
       text-size-adjust: 100% !important;
}

/* جلوگیری از زوم در iOS برای body */
body {
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
       text-size-adjust: 100% !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* اجازه انتخاب متن در اینپوت‌ها */
input, textarea {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* استایل‌های پایه برای همه اندازه‌ها */
.auth2-container {
  padding: 20px;
  margin: 0;
  background-color: #f1f5f9;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.auth2-box {
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  background-color: white;
  transform: none;
  display: flex;
  flex-direction: column;
}

.auth2-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.auth2-header {
  margin-bottom: 32px;
  text-align: center;
}

.auth2-header h1 {
  font-size: 1.6rem;
  margin-bottom: 8px;
  font-weight: 600;
  color: #1E98BC;
}

.auth2-header p {
  font-size: 1rem;
  color: #64748b;
}

.auth2-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.auth2-form .phone-display {
  padding: 16px;
  background-color: #f8fafc;
  border-radius: 12px;
  margin-bottom: 16px;
}

.auth2-form .phone-display label {
  font-size: 0.9rem;
  color: #64748b;
  display: block;
  margin-bottom: 4px;
}

.auth2-form .phone-number {
  font-size: 1.2rem;
  font-weight: 500;
  color: #1f2937;
  direction: ltr;
}

.auth2-form input[type="password"] {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 1rem;
  color: #1f2937;
  background-color: #f8fafc;
  box-sizing: border-box;
  height: auto;
}

.auth2-button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
  cursor: pointer;
  margin-top: 16px;
}

.auth2-button:hover {
  background: linear-gradient(135deg, #1a87a8 0%, #157591 100%);
}

.auth-link {
  text-align: center;
  margin-top: 16px;
}

.auth-link button {
  background: none;
  border: none;
  color: #1E98BC;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: 'Kalameh', 'peyda', sans-serif;
}

.auth-link button:hover {
  color: #157591;
  text-decoration: underline;
}

.logo {
  margin-bottom: 24px;
  text-align: center;
}

/* استایل‌های موبایل با اولویت بالا - حفظ همان استایل دسکتاپ در موبایل */
@media screen and (max-width: 480px) {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #f1f5f9 !important;
    height: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  #root {
    min-height: 100vh !important;
    position: relative !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  /* استایل‌های صفحه auth2 */
  .auth2-container, .auth-container {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 20px !important;
    margin: 0 !important;
    background-color: #f1f5f9 !important;
    min-height: 100vh !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .auth2-box, .auth-box {
    width: 90% !important;
    max-width: 400px !important;
    padding: 32px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    margin: 0 auto !important;
    background-color: white !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }

  .auth2-box:hover, .auth-box:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
  }

  .auth2-header, .auth-header {
    margin-bottom: 32px !important;
    text-align: center !important;
  }

  .auth2-header h1, .auth-header h1 {
    font-size: 1.6rem !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: #1E98BC !important;
  }

  .auth2-header p, .auth-header p {
    font-size: 1rem !important;
    color: #64748b !important;
    margin: 0 !important;
  }

  .auth2-form, .auth-form {
    gap: 24px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .auth2-form .phone-display, .auth-form .phone-display {
    padding: 16px !important;
    background-color: #f8fafc !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }

  .auth2-form .phone-display label, .auth-form .phone-display label {
    font-size: 0.9rem !important;
    color: #64748b !important;
    display: block !important;
    margin-bottom: 4px !important;
  }

  .auth2-form .phone-number, .auth-form .phone-number {
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    direction: ltr !important;
  }

  .auth2-form input[type="password"], .auth-form input[type="password"] {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    color: #1f2937 !important;
    background-color: #f8fafc !important;
    box-sizing: border-box !important;
    height: auto !important;
  }

  .auth2-button, .auth-button {
    width: 100% !important;
    padding: 14px !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: white !important;
    background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%) !important;
    cursor: pointer !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
  }

  .logo {
    margin-bottom: 24px !important;
    text-align: center !important;
  }

  .logo svg {
    width: auto !important;
    height: auto !important;
  }
  
  .verification-code {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    direction: ltr !important;
    margin-bottom: 20px !important;
  }

  .verification-code input {
    width: 40px !important;
    height: 40px !important;
    text-align: center !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: #f8fafc !important;
  }
}

@font-face {
    font-family: 'Kalameh';
    src: url(../../static/media/Kalameh-Medium.93f0d8ca4bdb9ee7c003.ttf) format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Loading Spinner Styles */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 0;
    font-size: 14px;
    color: #64748b;
    font-family: "Kalameh", "peyda", sans-serif;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top: 2px solid #1E98BC;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner p {
    color: #64748b;
    font-size: 14px;
    margin: 0;
    font-family: "Kalameh", "peyda", sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* جلوگیری از زوم در iOS برای تمام اینپوت‌ها */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  font-size: 16px !important; /* جلوگیری از زوم در iOS */
  -webkit-appearance: none !important; /* حذف استایل پیش‌فرض iOS */
  -webkit-tap-highlight-color: transparent !important; /* حذف highlight کلیک */
  -webkit-touch-callout: none !important; /* حذف callout iOS */
  -webkit-user-select: text !important; /* اجازه انتخاب متن */
  user-select: text !important;
}

/* جلوگیری از زوم در iOS برای تمام فرم‌ها */
form {
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
         text-size-adjust: 100% !important;
}

/* جلوگیری از زوم در iOS برای body */
body {
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
         text-size-adjust: 100% !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* اجازه انتخاب متن در اینپوت‌ها */
input, textarea {
    -webkit-user-select: text !important;
    user-select: text !important;
}

body {
    background-color: #f8fafc;
    font-family: Kalameh, peyda, sans-serif;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    display: none;
}

button:hover {
    cursor: pointer;
}

input[type="tel"]:focus,
input[type="num"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus {
    border: 1px solid #1E98BC;
    outline: none;
}

/* غیرفعال کردن اسکرول برای تغییر اعداد در input های عددی */
input[type="number"] { /* Firefox */
    -webkit-appearance: textfield;
            appearance: textfield; /* Standard */
}

/* حذف فلش پیش‌فرض مرورگر از تمام select ها */
select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* اطمینان از نمایش صحیح checkbox ها */
input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* جلوگیری از تغییر مقدار با اسکرول موس */
input[type="number"]:focus {
    -webkit-appearance: textfield;
            appearance: textfield;
}

input[type="number"]:focus::-webkit-outer-spin-button,
input[type="number"]:focus::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* استایل‌های اصلی */
.dmain {
    display: flex;
    min-height: 100vh;
    background-color: #f8fafc;
    font-family: "Kalameh", "peyda", sans-serif;
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

/* نوار کناری */
.rightnavbar {
    width: 280px;
    background: white;
    padding: 24px 16px;
    border-left: 1px solid #e2e8f0;
    position: fixed;
    right: 16px;
    top: 16px;
    height: calc(100vh - 32px);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}

.rightnavbar.mobile-menu-open {
    right: 0;
}

.rightnavbarlogo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 10px;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E98BC;
    margin-bottom: 0;
}

.logo-subtitle {
    font-size: 0.875rem;
    color: #64748b;
}

.nav-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 5px;
}

.rightnavbaritems {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 12px;
    color: #64748b;
    transition: all 0.2s;
    font-size: 0.9rem;
    cursor: pointer;
    width: 100%;
}

.rightnavbaritems svg {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    stroke-width: 2;
    color: currentColor;
}

.rightnavbaritems:hover {
    background-color: #f1f5f9;
    color: #1E98BC;
}

.rightnavbaritems.active {
    background-color: #1E98BC;
    color: white;
}

.rightnavbaritems span {
    font-family: "Kalameh", "peyda", sans-serif;
}

/* دکمه منوی همبرگری */
.mobile-menu-button {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #64748B !important;
}

.mobile-menu-button svg {
    width: 24px !important;
    height: 24px !important;
}

/* محتوای اصلی */
.dmainbox {
    flex: 1 1;
    margin-right: 316px;
    padding: 24px;
    transition: margin-right 0.3s ease-in-out;
    max-width: 100%;
    min-height: 100vh;

}

/* هدر */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: white;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-info {
    display: flex;
    flex: 1 1;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(30, 152, 188, 0.2);
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name {
    color: #1f2937;
    font-size: 0.9rem;
    font-weight: 500;
}

.user-phone {
    color: #64748b;
    font-size: 0.8rem;
}

.profile-status {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    white-space: nowrap;
    font-family: "Kalameh", "peyda", sans-serif;
    border: none;
    cursor: pointer;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-btn {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: #f8fafc;
    border: none;
    border-radius: 8px;
    color: #334155;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 10px;
}

.header-btn:hover {
    background-color: #f1f5f9;
}

.header-btn svg {
    width: 16px;
    height: 16px;
    margin-left: 6px;
}

.exit-btn {
    background-color: #fef2f2;
    color: #ef4444;
}

.exit-btn:hover {
    background-color: #fee2e2;
}

/* حذف استایل‌های زنگوله */
.notifications-btn,
.notifications-btn:hover,
.notifications-btn svg,
.notifications-badge {
    display: none;
}

/* کارت‌ها */
.nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 24px;
    gap: 24px;
    margin-bottom: 32px;
}

.navbox {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.navboxitemtop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navboxitemtop span {
    font-size: 0.9rem;
    color: #64748b;
    font-family: "Kalameh", "peyda", sans-serif;
}

.navboxitemtop .loan-status {
    font-size: 0.75rem;
    margin-right: 8px;
    margin-left: auto;
    font-weight: 500;
    display: inline-block;
}

.navboxitemtop svg {
    width: 24px;
    height: 24px;
    color: #1E98BC;
    margin-right: 8px;
}

.navboxitemmiddle {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.navboxitemmiddle span {
    font-size: 0.9rem;
    color: #64748b;
    font-family: "Kalameh", "peyda", sans-serif;
}

.navboxitemmiddle h3 {
    font-size: 1.5rem;
    color: #1f2937;
    font-weight: 600;
    margin: 0;
}

.loan-status {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 6px;
    background: rgba(30, 152, 188, 0.1);
    display: inline-block;
}

.navboxitemdown {
    display: flex;
    gap: 12px;
}

.navboxitemdown button {
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #f8fafc;
    color: #1E98BC;
    font-family: "Kalameh", "peyda", sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.navboxitemdown button:hover {
    background: #1E98BC;
    color: white;
}

.navboxitemdown button svg {
    width: 20px;
    height: 20px;
}

/* بخش درخواست‌ها */
.processing-section {
    margin-bottom: 32px;
    background-color: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.loan-details-card {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    margin: 20px 0;
    border: 1px solid rgba(30, 152, 188, 0.1);
}

.loan-details-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.loan-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
}

.loan-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.loan-icon-wrapper {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #e0f7fb 0%, #c7eef5 100%);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1E98BC;
    font-size: 1.4rem;
    box-shadow: 0 4px 12px rgba(30, 152, 188, 0.15);
}

.loan-title-section h3 {
    font-size: 1.25rem;
    color: #1e293b;
    margin: 0 0 6px 0;
    font-weight: 600;
}

.loan-subtitle {
    font-size: 0.9rem;
    color: #64748b;
    display: block;
}

.loan-status-badge {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #b45309;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.2);
}

.loan-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-gap: 20px;
    gap: 20px;
    margin-bottom: 30px;
}

.loan-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
}

.loan-info-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.info-icon-wrapper {
    width: 45px;
    height: 45px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1E98BC;
    font-size: 1.2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.info-content {
    flex: 1 1;
}

.info-content span {
    display: block;
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 6px;
}

.info-content strong {
    display: block;
    font-size: 1.1rem;
    color: #1e293b;
    font-weight: 600;
}

.loan-details-footer {
    padding-top: 10px;
}

.view-details-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(30, 152, 188, 0.2);
}

.view-details-btn:hover {
    background: linear-gradient(135deg, #1a87a8 0%, #167693 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(30, 152, 188, 0.3);
}

.view-details-btn i {
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.view-details-btn:hover i {
    transform: translateX(-4px);
}

@media (max-width: 768px) {
    .loan-details-card {
        padding: 20px;
        margin: 16px 0;
    }

    .loan-details-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .loan-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .loan-info-item {
        padding: 16px;
    }

    .info-icon-wrapper {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .info-content strong {
        font-size: 1rem;
    }

    .view-details-btn {
        padding: 14px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .loan-details-card {
        padding: 16px;
    }
    .dmainbox{
        padding: 0px !important;
    }

    .loan-icon-wrapper {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }

    .loan-title-section h3 {
        font-size: 1.1rem;
    }

    .loan-subtitle {
        font-size: 0.85rem;
    }
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-header h2 {
    font-size: 1.25rem;
    color: #1f2937;
    margin: 0;
}

.section-header button {
    /* display: flex; */
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    background: transparent;
    color: #1E98BC;
    border: 1px solid #1E98BC;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.section-header button:hover {
    background: #1E98BC;
    color: white;
}

.section-header button svg {
    width: 16px;
    height: 16px;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px 0;
}

.empty-state svg {
    width: 48px;
    height: 48px;
    color: #64748b;
}

.empty-state h3 {
    font-size: 1.25rem;
    color: #1f2937;
    margin: 0;
}

.empty-state p {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

.empty-state button {
    padding: 12px 24px;
    border-radius: 8px;
    background: #1E98BC;
    color: white;
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
}

.empty-state button:hover {
    background: #1a87a8;
}

@media (max-width: 768px) {
    .empty-state {
        padding: 32px 0;
        gap: 12px;
        text-align: center;
    }
    
    .empty-state svg {
        width: 40px;
        height: 40px;
    }
    
    .empty-state h3 {
        font-size: 1.1rem;
    }
    
    .empty-state button {
        padding: 10px 20px;
        font-size: 0.85rem;
        width: 100%;
        max-width: 250px;
    }
}

@media (max-width: 480px) {
    .empty-state {
        padding: 24px 0;
    }
    
    .empty-state svg {
        width: 36px;
        height: 36px;
    }
    
    .empty-state h3 {
        font-size: 1rem;
    }
    
    .empty-state p {
        font-size: 0.8rem;
        line-height: 1.5;
    }
}

/* بخش آموزش */
.tutorial-section {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.tutorial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    grid-gap: 24px;
    gap: 24px;
    margin-top: 24px;
}

.tutorial-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 350px;
    margin-right: 0;
    margin-left: auto;
}

.tutorial-image {
    height: 120px;
    background: #f8fafc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tutorial-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.tutorial-card button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: #1E98BC;
    border: none;
    border-radius: 8px;
    color: white;
    font-family: "Kalameh", "peyda", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.tutorial-card button:hover {
    background: #1a87a8;
}

@media (max-width: 1200px) {
    .tutorial-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .tutorial-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .tutorial-card {
        padding: 16px;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .tutorial-image {
        height: 100px;
    }
    
    .tutorial-card h3 {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .tutorial-grid {
        margin-top: 16px;
    }
    
    .tutorial-image {
        height: 80px;
    }
}

/* بخش تسهیلات */
.loans-section {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.loans-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    grid-gap: 24px;
    gap: 24px;
    margin-top: 24px;
}

.loan-card {
    background-color: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    transition: all 0.3s ease;
}

.loan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
}

.loan-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.loan-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.loan-title h3 {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0;
    color: #1e293b;
}

.loan-badge {
    background-color: rgba(30, 152, 188, 0.1);
    color: #1E98BC;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.loan-badge-available {
    background-color: rgba(5, 150, 105, 0.1);
    color: #059669;
}

.loan-badge-unavailable {
    background-color: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.loan-amount {
    text-align: left;
}

.loan-amount span {
    font-size: 0.9rem;
    color: #64748b;
    display: block;
    margin-bottom: 4px;
}

.loan-amount h4 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #1e293b;
    margin: 0;
}

.loan-details {
    margin-bottom: 20px;
}

.loan-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

.loan-detail-item:last-child {
    border-bottom: none;
}

.loan-detail-item span:first-child {
    color: #64748b;
    font-size: 0.9rem;
}

.loan-detail-item span:last-child {
    color: #1e293b;
    font-weight: 500;
}

.loan-description {
    margin-bottom: 20px;
    padding: 12px;
    background-color: #f8fafc;
    border-radius: 8px;
}

.loan-description p {
    margin: 0;
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
}

.loan-apply-button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background-color: #1E98BC;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.loan-apply-button:hover:not(:disabled) {
    background-color: #1a88a9;
}

.loan-apply-button.disabled {
    background-color: #94a3b8;
    cursor: not-allowed;
}

@media (max-width: 1200px) {
    .loans-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .loans-section, .processing-section, .tutorial-section {
        padding: 16px;
        margin-bottom: 24px;
    }

    .loans-grid {
        grid-template-columns: 1fr;
    }
    
    .loan-card {
        padding: 16px;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .loan-card-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .loan-amount {
        margin-top: 8px;
        text-align: right;
        flex-basis: 100%;
    }
    
    .loan-amount span, .loan-amount h4 {
        display: inline-block;
        margin-left: 4px;
    }
    
    .section-header {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 16px;
    }
    
    .section-header h2 {
        font-size: 1.1rem;
    }
    
    .section-header button {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .loan-info {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }
    
    .info-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .loan-details-content {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .loan-info-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* استایل‌های صفحه ورود */
.main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    direction: rtl;
}

.mainbox {
    width: 100%;
    max-width: 480px;
    background: white;
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(0);
    transition: all 0.3s ease;
}

.mainbox:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.maintext {
    font-family: Kalameh, peyda;
    font-size: 2rem;
    font-weight: 600;
    background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin-bottom: 32px;
}

.logreg {
    text-align: center;
    margin-bottom: 40px;
}

.logregtext {
    font-family: Kalameh, peyda;
    font-size: 1.25rem;
    color: #1f2937;
    font-weight: 500;
}

.numbox {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.numbox span {
    font-family: Kalameh, peyda;
    font-size: 1rem;
    color: #1f2937;
    font-weight: 500;
}

.numbox input {
    width: 100%;
    padding: 18px;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    font-family: Kalameh, peyda;
    font-size: 1.1rem;
    color: #1f2937;
    background: #f8fafc;
    transition: all 0.3s ease;
}

.numbox input:focus {
    border-color: #1E98BC;
    background: white;
    box-shadow: 0 0 0 4px rgba(30, 152, 188, 0.1);
}

.numbox input::placeholder {
    color: #94a3b8;
}

.error-messagemain {
    font-family: Kalameh, peyda;
    font-size: 0.9rem;
    color: #dc2626;
    margin-top: -16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.error-messagemain::before {
    content: "•";
    color: #dc2626;
}

.numbox button {
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: 16px;
    font-family: Kalameh, peyda;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
    transition: all 0.3s ease;
    margin-top: 8px;
}

.numbox button:hover:not(:disabled) {
    background: linear-gradient(135deg, #1a87a8 0%, #167693 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 152, 188, 0.2);
}

.numbox button:active:not(:disabled) {
    transform: translateY(0);
}

.numbox button:disabled {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .main {
        padding: 0;
        background: white;
    }

    .mainbox {
        padding: 24px;
        border-radius: 0;
        box-shadow: none;
        max-width: 100%;
    }

    .maintext {
        font-size: 1.5rem;
    }

    .logregtext {
        font-size: 1rem;
    }

    .numbox input,
    .numbox button {
        padding: 14px;
        font-size: 1rem;
        border-radius: 12px;
    }

    .logo svg {
        width: 40px;
        height: 40px;
    }

    .auth-container {
        padding: 0;
        background: white;
    }

    .auth-box {
        padding: 24px;
        border-radius: 0;
        box-shadow: none;
        max-width: 100%;
    }

    .auth-header h1 {
        font-size: 1.5rem;
        margin-bottom: 16px;
    }

    .auth-header p {
        font-size: 0.9rem;
        margin-bottom: 24px;
    }

    .verification-code {
        gap: 8px;
        margin: 24px 0;
    }

    .verification-code input {
        width: 36px;
        height: 42px;
        font-size: 1rem;
        border-radius: 8px;
    }

    .auth-button {
        padding: 14px;
        border-radius: 12px;
    }

    .auth-link {
        margin-top: 12px;
    }

    .auth-link button {
        font-size: 0.9rem;
    }

    /* بهینه‌سازی فاصله‌ها در حالت موبایل */
    .input-group {
        margin-bottom: 16px;
    }

    .phone-display {
        margin: 16px 0;
    }

    .phone-number {
        font-size: 1.1rem;
    }
}

/* استایل‌های مشترک صفحات احراز هویت */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    direction: rtl;
}

.auth-box {
    width: 100%;
    max-width: 480px;
    background: white;
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(0);
    transition: all 0.3s ease;
}

.auth-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-header .logo {
    margin-bottom: 16px;
}

.auth-header .logo svg {
    width: 48px;
    height: 48px;
    color: #1E98BC;
}

.auth-header h1 {
    font-family: Kalameh, peyda;
    font-size: 2rem;
    font-weight: 600;
    background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.auth-header p {
    font-family: Kalameh, peyda;
    font-size: 1rem;
    color: #64748b;
    text-align: right;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 20px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    font-family: Kalameh, peyda;
    font-size: 0.95rem;
    color: #1f2937;
    font-weight: 500;
    text-align: right;
}

.input-group input {
    width: 100%;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    font-family: Kalameh, peyda;
    font-size: 1rem;
    color: #1f2937;
    background: #f8fafc;
    transition: all 0.3s ease;
}

.input-group input:focus {
    border-color: #1E98BC;
    background: white;
    box-shadow: 0 0 0 4px rgba(30, 152, 188, 0.1);
}

.input-group input::placeholder {
    color: #94a3b8;
}

.auth-form .input-group .phone-display {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 1rem 0;
}

.auth-form .input-group .phone-display label {
    font-size: 1.1rem;
    color: #64748b;
}

.auth-form .input-group .phone-number {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1f2937;
    direction: ltr;
    display: inline-block;
}

.verification-code {
    display: flex;
    gap: 8px;
    direction: ltr;
    justify-content: center;
    margin: 1.5rem 0;
}

.verification-code input {
    width: 45px;
    height: 45px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
    color: #333;
    transition: all 0.3s ease;
}

.verification-code input:focus {
    border-color: #1E98BC;
    box-shadow: 0 0 0 2px rgba(30, 152, 188, 0.2);
    outline: none;
}

.auth-button {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 16px;
    font-family: Kalameh, peyda;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
    transition: all 0.3s ease;
    cursor: pointer;
}

.auth-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #1a87a8 0%, #167693 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 152, 188, 0.2);
}

.auth-button:active:not(:disabled) {
    transform: translateY(0);
}

.auth-button:disabled {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    cursor: not-allowed;
}

.auth-link {
    text-align: center;
    margin-top: 16px;
}

.auth-link button {
    background: none;
    border: none;
    color: #1E98BC;
    font-family: Kalameh, peyda;
    font-size: 0.95rem;
    cursor: pointer;
    transition: color 0.2s;
}

.auth-link button:hover {
    color: #167693;
}

.error-message {
    color: #dc2626;
    font-family: Kalameh, peyda;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.error-message::before {
    content: "•";
    color: #dc2626;
}

.success-message {
    color: #059669;
    font-family: Kalameh, peyda;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.success-message::before {
    content: "•";
    color: #059669;
}

/* استایل‌های صفحه احراز هویت */
.authentop {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 16px;
}

.authentop svg {
    width: 48px;
    height: 48px;
    color: #1E98BC;
    flex-shrink: 0;
}

.authentop span {
    font-family: Kalameh, peyda;
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    text-align: right;
}

.varizunpit {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.varizunpit h5 {
    font-family: Kalameh, peyda;
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 8px;
    text-align: right;
}

.varizunpit input {
    width: 100%;
    padding: 14px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-family: Kalameh, peyda;
    font-size: 1rem;
    color: #1f2937;
    background: #f8fafc;
    transition: all 0.3s ease;
}

.varizunpit input:focus {
    border-color: #1E98BC;
    background: white;
    box-shadow: 0 0 0 4px rgba(30, 152, 188, 0.1);
}

.varizunpit input:disabled {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #64748b;
    cursor: not-allowed;
}

.addcartbutton {
    background: white;
    border-radius: 16px;
    padding: 16px;
    margin-top: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.addcartbutton button {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-family: Kalameh, peyda;
    font-size: 1rem;
    font-weight: 500;
    color: white;
    background: #1E98BC;
    transition: all 0.3s ease;
    cursor: pointer;
}

.addcartbutton button:hover:not(:disabled) {
    background: #1a87a8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 152, 188, 0.2);
}

.addcartbutton button:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .auth-container {
        padding: 16px;
    }

    .auth-box {
        padding: 32px;
        border-radius: 20px;
    }

    .auth-header h1 {
        font-size: 1.75rem;
    }

    .verification-code {
        gap: 8px;
    }

    .verification-code input {
        width: 40px;
        height: 48px;
        font-size: 1.1rem;
    }

    .authentop {
        padding: 20px;
        flex-direction: column;
        text-align: center;
    }

    .varizunpit {
        padding: 16px;
    }

    .addcartbutton {
        padding: 12px;
        margin-top: 24px;
    }
}

/* استایل‌های تقویم فارسی */
.date-picker-input {
  width: 100%;
  padding: 16px;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  font-family: Kalameh, peyda;
  font-size: 1rem;
  color: #1f2937;
  background: #f8fafc;
  transition: all 0.3s ease;
  text-align: center;
}

.date-picker-input:focus {
  border-color: #1E98BC;
  background: white;
  box-shadow: 0 0 0 4px rgba(30, 152, 188, 0.1);
  outline: none;
}

.rmdp-container {
  width: 100%;
}

.rmdp-calendar {
  font-family: Kalameh, peyda !important;
  width: 320px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border: none !important;
  border-radius: 16px !important;
}

.rmdp-day, .rmdp-week-day {
  font-family: Kalameh, peyda !important;
  font-size: 0.9rem !important;
}

.rmdp-header-values {
  font-family: Kalameh, peyda !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}

.rmdp-arrow {
  border-color: #1E98BC !important;
}

.rmdp-arrow-container:hover {
  background-color: rgba(30, 152, 188, 0.1) !important;
  box-shadow: none !important;
}

.rmdp-selected span {
  background-color: #1E98BC !important;
}

.rmdp-day:hover span {
  background-color: rgba(30, 152, 188, 0.1) !important;
}

.rmdp-disabled span {
  color: #cbd5e1 !important;
}

.rmdp-day.rmdp-today span {
  background-color: rgba(30, 152, 188, 0.1) !important;
  color: #1E98BC !important;
}

/* استایل‌های پیام تأیید */
.confirm-toast {
    background: rgba(255, 255, 255, 0.95) !important;
    -webkit-backdrop-filter: blur(10px) !important;
            backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px !important;
    padding: 0 !important;
    width: 360px !important;
    box-shadow: 
        0 4px 24px -1px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
    z-index: 1000000 !important; /* افزایش z-index برای confirm-toast */
}

.confirm-dialog {
    padding: 24px;
    text-align: center;
}

.confirm-dialog h3 {
    font-family: Kalameh, peyda;
    font-size: 1.25rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 12px 0;
}

.confirm-dialog p {
    font-family: Kalameh, peyda;
    font-size: 0.95rem;
    color: #64748b;
    margin: 0 0 24px 0;
    line-height: 1.6;
}

.confirm-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.confirm-buttons button {
    font-family: Kalameh, peyda;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.confirm-yes {
    background: #ef4444;
    color: white;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.confirm-yes:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.25);
}

.confirm-no {
    background: #f1f5f9;
    color: #64748b;
}

.confirm-no:hover {
    background: #e2e8f0;
    color: #475569;
}

.auth2-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    direction: rtl;
}

.auth2-box {
    width: 100%;
    max-width: 480px;
    background: white;
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(0);
    transition: all 0.3s ease;
}

.auth2-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.auth2-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth2-header h1 {
    font-family: Kalameh, peyda;
    font-size: 2rem;
    font-weight: 600;
    background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.auth2-header p {
    font-family: Kalameh, peyda;
    font-size: 1rem;
    color: #64748b;
    text-align: center;
}

.auth2-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.auth2-form .phone-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 1rem 0;
}

.auth2-form .phone-display label {
    font-size: 1.1rem;
    color: #64748b;
    margin: 0;
}

.auth2-form .phone-number {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1f2937;
    direction: ltr;
    display: inline-block;
    margin: 0;
}

.auth2-form .verification-code {
    display: flex;
    gap: 8px;
    direction: ltr;
    justify-content: center;
    margin: 1.5rem 0;
}

.auth2-form .verification-code input {
    width: 45px;
    height: 45px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
    color: #333;
    transition: all 0.3s ease;
}

.auth2-form .verification-code input:focus {
    border-color: #1E98BC;
    box-shadow: 0 0 0 2px rgba(30, 152, 188, 0.2);
    outline: none;
}

.auth2-button {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 16px;
    font-family: Kalameh, peyda;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 16px;
}

.auth2-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #1a87a8 0%, #167693 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 152, 188, 0.2);
}

.auth2-button:disabled {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .auth2-container, .auth-container {
        padding: 0 !important;
        background: white !important;
        min-height: 100% !important;
        height: auto !important;
        display: block !important;
        position: static !important;
        overflow-y: visible !important;
        width: 100% !important;
    }

    .auth2-box, .auth-box {
        padding: 20px !important;
        padding-top: 88px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        background: white !important;
        transform: none !important;
        display: block !important;
        overflow-y: visible !important;
        position: static !important;
    }

    .auth-form, .auth2-form {
        height: auto !important;
        overflow-y: visible !important;
        position: static !important;
    }

    .main {
        min-height: 100% !important;
        height: auto !important;
        overflow-y: visible !important;
        display: block !important;
        position: static !important;
    }

    .mainbox {
        height: auto !important;
        overflow-y: visible !important;
        position: static !important;
    }

    #root {
        min-height: 100% !important;
        height: auto !important;
        overflow-y: auto !important;
        position: relative !important;
    }

    body {
        min-height: 100% !important;
        height: auto !important;
        overflow-y: auto !important;
        position: relative !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html {
        height: 100% !important;
        overflow-y: auto !important;
        position: relative !important;
    }

    .forgot-password-container {
        height: auto !important;
        min-height: 100% !important;
        overflow-y: visible !important;
        position: static !important;
    }

    .forgot-password-box {
        height: auto !important;
        min-height: auto !important;
        overflow-y: visible !important;
        position: static !important;
    }
}

@media (max-width: 480px) {
    .dashboard-header {
        padding: 12px;
        margin-top: 68px;
    }

    .header-right {
        gap: 8px;
    }

    .user-info {
        padding: 6px 10px;
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .user-avatar {
        width: 36px;
        height: 36px;
    }

    .user-name {
        font-size: 0.95rem;
    }

    .user-phone {
        font-size: 0.75rem;
    }
}

@media (max-width: 880px) {
    .dashboard-header {
        padding: 16px;
        margin-bottom: 16px;
        margin-top: 76px;
    }

    .header-right {
        width: 100%;
    }

    .user-info {
        background: rgba(30, 152, 188, 0.05);
        padding: 12px;
        border-radius: 12px;
        display: flex;
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .profile-status {
        margin: 0;
    }
}

@media (min-width: 881px) {
    .user-info {
        background: none;
    }
}

.forgot-password-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    direction: rtl;
}

.forgot-password-box {
    width: 100%;
    max-width: 480px;
    background: white;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(0);
    transition: all 0.3s ease;
}

.forgot-password-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.forgot-password-header {
    text-align: center;
    margin-bottom: 16px;
}

.forgot-password-header h1 {
    font-family: Kalameh, peyda;
    font-size: 2rem;
    font-weight: 600;
    background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.forgot-password-header p {
    font-family: Kalameh, peyda;
    font-size: 1rem;
    color: #64748b;
    text-align: center;
}

.forgot-password-header .logo svg {
    width: 32px;
    height: 32px;
    color: #1E98BC;
    margin-bottom: 16px;
}

.forgot-password-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.forgot-password-form .phone-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 1rem 0;
}

.forgot-password-form .phone-display label {
    font-size: 1.1rem;
    color: #64748b;
    margin: 0;
}

.forgot-password-form .phone-number {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1f2937;
    direction: ltr;
    display: inline-block;
    margin: 0;
}

.forgot-password-form .verification-code {
    margin: 1rem 0;
}

.forgot-password-form .verification-code input {
    width: 45px;
    height: 45px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
    color: #333;
    transition: all 0.3s ease;
}

.forgot-password-form .verification-code input:focus {
    border-color: #1E98BC;
    box-shadow: 0 0 0 2px rgba(30, 152, 188, 0.2);
    outline: none;
}

.forgot-password-form input[type="password"] {
    width: 100%;
    padding: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    font-family: Kalameh, peyda;
    font-size: 1rem;
    color: #1f2937;
    background: #f8fafc;
    transition: all 0.3s ease;
}

.forgot-password-form input[type="password"]:focus {
    border-color: #1E98BC;
    background: white;
    box-shadow: 0 0 0 4px rgba(30, 152, 188, 0.1);
    outline: none;
}

.forgot-password-button {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 16px;
    font-family: Kalameh, peyda;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 16px;
}

.forgot-password-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #1a87a8 0%, #167693 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 152, 188, 0.2);
}

.forgot-password-button:disabled {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .forgot-password-container {
        padding: 16px;
    }

    .forgot-password-box {
        padding: 32px;
        border-radius: 20px;
    }

    .forgot-password-header h1 {
        font-size: 1.75rem;
    }

    .forgot-password-form .verification-code {
        gap: 8px;
    }

    .forgot-password-form .verification-code input {
        width: 40px;
        height: 48px;
        font-size: 1.1rem;
    }
}

/* Navbar Styles */
.navbar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #64748b;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.nav-item:hover {
    background-color: #f1f5f9;
    color: #1e293b;
}

.nav-item.active {
    background-color: #e2e8f0;
    color: #1e293b;
    font-weight: 500;
}

.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.nav-icon svg {
    width: 100%;
    height: 100%;
}

.nav-title {
    font-size: 0.875rem;
}

.logout-button {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background-color: #fee2e2;
    color: #dc2626;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logout-button:hover {
    background-color: #fecaca;
}

/* Confirm Dialog Styles */
.confirm-dialog {
    background-color: white;
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
}

.confirm-dialog h3 {
    margin: 0 0 1rem 0;
    color: #1e293b;
    font-size: 1.25rem;
}

.confirm-dialog p {
    margin: 0 0 1.5rem 0;
    color: #64748b;
}

.confirm-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.confirm-yes, .confirm-no {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirm-yes {
    background-color: #dc2626;
    color: white;
    border: none;
}

.confirm-yes:hover {
    background-color: #b91c1c;
}

.confirm-no {
    background-color: #e2e8f0;
    color: #64748b;
    border: none;
}

.confirm-no:hover {
    background-color: #cbd5e1;
}

/* استایل‌های صفحه پشتیبانی */
.section-container {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-header h2 {
    color: #1f2937;
    font-size: 1.25rem;
    font-weight: 600;
}

.view-all-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    font-family: "Kalameh", "peyda", sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.view-all-button:hover {
    background: #f1f5f9;
    color: #1E98BC;
}

.view-all-button svg {
    width: 20px;
    height: 20px;
}

.support-form-container {
    max-width: 800px;
    margin: 0 auto;
}

.support-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    color: #4b5563;
    font-size: 0.9rem;
    font-weight: 500;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: "Kalameh", "peyda", sans-serif;
    font-size: 0.9rem;
    color: #1f2937;
    transition: all 0.2s;
}

.form-input:focus,
.form-textarea:focus {
    border-color: #1E98BC;
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 152, 188, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: #1E98BC;
    color: white;
    border: none;
    border-radius: 8px;
    font-family: "Kalameh", "peyda", sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 16px;
}

.submit-button:hover {
    background: #1a88aa;
}

.submit-button svg {
    width: 20px;
    height: 20px;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 24px;
    gap: 24px;
}

.faq-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s;
}

.faq-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.faq-card h3 {
    color: #1f2937;
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.faq-card p {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* استایل‌های موبایل */
@media (max-width: 768px) {
    .nav {
        grid-template-columns: 1fr;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .section-container {
        padding: 16px;
    }

    .support-form-container {
        padding: 0;
    }
}

/* استایل‌های صفحه درخواست وام */
.alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.alert-warning {
    background-color: #FFF3CD;
    color: #856404;
    border: 1px solid #FFEEBA;
}

.alert-success {
    background-color: #D4EDDA;
    color: #155724;
    border: 1px solid #C3E6CB;
}

.alert svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.loan-steps-section {
    margin-top: 32px;
}

.loan-steps-section h3 {
    color: #1f2937;
    font-size: 1.25rem;
    margin-bottom: 24px;
}

.loan-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 24px;
    gap: 24px;
}

.loan-step-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.2s;
    border: 1px solid #e2e8f0;
}

.loan-step-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.step-icon {
    width: 48px;
    height: 48px;
    background: #f0f9ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.step-icon svg {
    width: 24px;
    height: 24px;
    color: #1E98BC;
}

.loan-step-item h4 {
    color: #1f2937;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.loan-step-item p {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
}

.loan-terms-section {
    margin-top: 32px;
    background: white;
    border-radius: 16px;
    padding: 24px;
}

.loan-terms-section h3 {
    color: #1f2937;
    font-size: 1.25rem;
    margin-bottom: 24px;
}

.terms-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
    gap: 20px;
}

.term-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
}

.term-item svg {
    width: 24px;
    height: 24px;
    color: #1E98BC;
    flex-shrink: 0;
}

.term-item p {
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* استایل‌های موبایل */
@media (max-width: 768px) {
    .loan-steps-grid,
    .terms-content {
        grid-template-columns: 1fr;
    }

    .loan-step-item,
    .term-item {
        padding: 16px;
    }
}

/* استایل دکمه شروع فرایند درخواست وام */
.start-process-btn {
    width: 300px;
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    font-family: "Kalameh", "peyda", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 24px auto;
    box-shadow: 0 4px 12px rgba(30, 152, 188, 0.2);
}

.start-process-btn:hover {
    background: linear-gradient(135deg, #1a87a8 0%, #167693 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(30, 152, 188, 0.3);
}

.start-process-btn:active {
    transform: translateY(0);
}

.start-process-btn svg {
    width: 22px;
    height: 22px;
}

.start-process-btn:disabled {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (max-width: 768px) {
    .start-process-btn {
        width: 260px;
        padding: 12px 24px;
        font-size: 0.95rem;
    }
}

/* استایل‌های صفحه انتخاب پلن */
.planmaindiv {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
}

/* بخش هشدار */
.warn1 {
    background: #fff3cd;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #ffeeba;
}

.warnicon {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #856404;
}

.warnicon svg {
    width: 20px;
    height: 20px;
}

.warnicon span {
    font-size: 0.95rem;
    color: #856404;
    font-weight: 500;
}

.warn1 button {
    background: #fff;
    border: 1px solid #ffeeba;
    padding: 6px 12px;
    border-radius: 6px;
    color: #856404;
    font-size: 0.9rem;
    margin: 4px;
    transition: all 0.2s;
}

.warn1 button:hover {
    background: #fff9db;
}

/* بخش انتخاب مبلغ */
.wantloanrules {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.wantloanrulesitem {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.loanplaninput {
    background: #f8fafc;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.loanplaninput input {
    border: none;
    background: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1E293B;
    width: 100%;
    text-align: right;
    margin-bottom: 8px;
}

.loanplaninput span {
    color: #64748b;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 12px;
}

.loanplaninput input[type="range"] {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    margin: 0;
}

.loanplaninput input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #1E98BC;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.loanplaninput input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

/* بخش دکمه ادامه */
.wantloanacc {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
}

.wantloanacc button {
    background: #1E98BC;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wantloanacc button:hover {
    background: #1a87a8;
    transform: translateY(-1px);
}

.wantloanacc button:active {
    transform: translateY(0);
}

.wantloanacc svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.wantloanacc button:hover svg {
    transform: translateX(-4px);
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .planmaindiv {
        padding: 16px;
    }
    
    .warn1 {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .wantloanrules {
        padding: 16px;
    }
    
    .loanplaninput {
        padding: 12px;
    }
    
    .wantloanacc button {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/* استایل‌های جدید صفحه انتخاب پلن */
.choose-plan-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
}

.plan-header {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.plan-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.plan-header-icon {
    width: 48px;
    height: 48px;
    background: #e0f2fe;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.plan-header-icon svg {
    width: 28px;
    height: 28px;
    color: #1E98BC;
}

.plan-header-content h1 {
    font-size: 1.2rem;
    color: #1f2937;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.plan-header-content p {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

/* استایل بخش وضعیت فعلی وام */
.loan-status-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.loan-status-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.status-header h2 {
    font-size: 1.1rem;
    color: #1f2937;
    margin: 0;
    font-weight: 600;
}

.status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status-badge-success {
    background-color: #16a34a;
    color: white;
}

.status-badge-info {
    background-color: #0ea5e9;
    color: white;
}

.status-badge-warning {
    background-color: #f59e0b;
    color: white;
}

.status-badge-danger {
    background: #fee2e2;
    color: #b91c1c;
}

.loan-status-message {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.loan-status-message svg {
    width: 24px;
    height: 24px;
    margin-top: 2px;
    flex-shrink: 0;
}

.loan-status-message p {
    margin: 0;
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.6;
}

.loan-status-message.success {
    background: #f0fdf4;
}

.loan-status-message.success svg {
    color: #16a34a;
}

.loan-status-message.warning {
    background: #fffbeb;
}

.loan-status-message.warning svg {
    color: #d97706;
}

.loan-status-message.danger {
    background: #fef2f2;
}

.loan-status-message.danger svg {
    color: #dc2626;
}

/* بخش انتخاب مبلغ وام */
.loan-amount-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.loan-amount-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.card-header-icon {
    width: 40px;
    height: 40px;
    background: #e0f2fe;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-header-icon svg {
    width: 22px;
    height: 22px;
    color: #1E98BC;
}

.card-header-content h2 {
    font-size: 1.1rem;
    color: #1f2937;
    margin: 0;
    font-weight: 600;
}

.loan-slider {
    margin-bottom: 32px;
}

.amount-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.amount-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f2937;
}

.amount-label {
    font-size: 0.9rem;
    color: #64748b;
}

.slider-container {
    position: relative;
    padding: 0 12px;
}

.slider-input {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    -webkit-appearance: none;
    outline: none;
    margin: 16px 0;
}

.slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: #1E98BC;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.slider-input::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.slider-track {
    position: absolute;
    height: 8px;
    background: #1E98BC;
    border-radius: 4px;
    top: 16px;
    left: 12px;
    pointer-events: none;
}

.slider-min-max {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.slider-min, .slider-max {
    font-size: 0.8rem;
    color: #64748b;
}

/* بخش جزئیات بازپرداخت */
.repayment-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 16px;
    gap: 16px;
    margin-top: 24px;
}

.repayment-item {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.repayment-item-label {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 8px;
}

.repayment-item-value {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

/* بخش قوانین و شرایط */
.terms-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.terms-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.terms-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 16px;
    gap: 16px;
    margin-top: 24px;
}

.terms-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.terms-item-icon {
    width: 24px;
    height: 24px;
    color: #1E98BC;
    margin-top: 2px;
    flex-shrink: 0;
}

.terms-item-text {
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

/* دکمه ادامه */
.continue-button-container {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.continue-button {
    min-width: 200px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #1E98BC 0%, #0e7490 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(30, 152, 188, 0.2);
}

.continue-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(30, 152, 188, 0.3);
}

.continue-button:active {
    transform: translateY(0);
}

.continue-button svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.continue-button:hover svg {
    transform: translateX(-4px);
}

.continue-button:disabled {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* استایل برای نمایش لودینگ */
.loading-icon {
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .choose-plan-container {
        padding: 16px;
    }
    
    .plan-header,
    .loan-status-card,
    .loan-amount-card,
    .terms-card {
        padding: 20px;
    }
    
    .plan-header-icon {
        width: 40px;
        height: 40px;
    }
    
    .plan-header-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .plan-header-content h1 {
        font-size: 1.1rem;
    }
    
    .repayment-details {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .terms-items {
        grid-template-columns: 1fr;
    }
    
    .continue-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .choose-plan-container {
        padding: 12px;
    }
    
    .plan-header,
    .loan-status-card,
    .loan-amount-card,
    .terms-card {
        padding: 16px;
    }
    
    .plan-header-icon {
        width: 36px;
        height: 36px;
    }
    
    .plan-header-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .plan-header-content h1 {
        font-size: 1rem;
        margin-bottom: 6px;
    }
    
    .plan-header-content p {
        font-size: 0.85rem;
    }
    
    .status-header h2 {
        font-size: 1rem;
    }
    
    .loan-status-message {
        padding: 12px;
    }
    
    .loan-status-message p {
        font-size: 0.85rem;
    }
    
    .card-header-content h2 {
        font-size: 1rem;
    }
    
    .amount-value {
        font-size: 1.3rem;
    }
    
    .amount-label {
        font-size: 0.85rem;
    }
    
    .repayment-item {
        padding: 12px;
    }
    
    .repayment-item-label {
        font-size: 0.8rem;
    }
    
    .repayment-item-value {
        font-size: 0.95rem;
    }
    
    .terms-item-text {
        font-size: 0.85rem;
    }
    
    .continue-button {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
}

/* استایل‌های منو */
.menitem {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.menitem:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.menuitems {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
}

.menuitems svg {
  color: #1E98BC;
}

.menuitems h4 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: #333;
}

.menuitems span {
  font-size: 14px;
  color: #333;
}

.topuptext {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 10px;
}

.topuptext button {
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.topuptext svg {
  color: #64748b;
}

/* استایل‌های واکنش‌گرا */
@media (max-width: 880px) {
    .mobile-menu-button {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 1001;
        width: 44px;
        height: 44px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .mobile-menu-button svg {
        width: 24px;
        height: 24px;
    }

    .rightnavbar {
        transform: translateX(100%);
        right: 0;
        top: 0;
        height: 100vh;
        width: 280px;
        border-radius: 0;
        margin: 0;
        border: none;
        padding: 24px 16px;
        background: rgba(255, 255, 255, 0.98);
        -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 9995;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
        visibility: hidden;
        opacity: 0;
    }

    .rightnavbar.mobile-menu-open {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
    }
    
    .nav-items {
        overflow-y: auto;
        overflow-x: hidden;
        flex: 1 1;
        padding-right: 5px;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    /* Customize scrollbar for webkit browsers */
    .nav-items::-webkit-scrollbar {
        width: 4px;
    }
    
    .nav-items::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 10px;
    }
    
    .nav-items::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }
    
    .nav-items::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
}

@media (max-width: 480px) {
    .dashboard-header {
        padding: 12px;
        margin-top: 68px;
    }

    .header-right {
        gap: 8px;
    }

    .user-info {
        padding: 6px 10px;
    }

    .user-avatar {
        width: 36px;
        height: 36px;
    }

    .user-name {
        font-size: 0.95rem;
    }

    .user-phone {
        font-size: 0.75rem;
    }
}

@media (max-width: 880px) {
    .dashboard-header {
        padding: 16px;
        margin-bottom: 16px;
        margin-top: 76px;
    }

    .header-left {
        display: none !important;
    }
}

@media (min-width: 769px) and (max-width: 880px) {
    .dashboard-header {
        flex-direction: column;
        gap: 12px;
    }

    .header-right {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .user-info {
        width: 100%;
        background: rgba(30, 152, 188, 0.05);
        padding: 12px;
        border-radius: 12px;
    }

    .profile-status {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 10px;
        margin: 0;
        background: none;
    }
}

@media (min-width: 425px) and (max-width: 768px) {
    .user-info {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .user-avatar {
        order: 1;
    }

    .user-details {
        order: 2;
        flex: 1 1;
    }

    .profile-status {
        order: 3;
        margin-left: auto;
    }
}

@media (max-width: 424px) {
    .dashboard-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .header-right {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }
    
    .user-info {
        width: 100%;
        background: rgba(30, 152, 188, 0.05);
        padding: 12px;
        border-radius: 12px;
    }
    
    .profile-status {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 10px;
        margin: 0;
        background: none;
    }
}

@media (min-width: 881px) {
    .user-info {
        background: none;
    }
    
    .profile-status {
        background: rgba(30, 152, 188, 0.05);
        padding: 8px 12px;
        border-radius: 12px;
    }
}

/* استایل‌های صفحه myloan */
.myloan-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.loan-overview-card {
    background-color: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 20px;
}

.loan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.loan-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.loan-status-badge {
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    color: white;
}

.loan-info-grid {
    display: flex;
    gap: 15px;
}

.loan-info-left {
    flex: 1 1;
}

.loan-info-right {
    flex: 1 1;
}

.loan-amount-box {
    text-align: center;
    padding: 15px;
    background-color: #f8fafc;
    border-radius: 8px;
    margin-bottom: 10px;
}

.loan-amount-label {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 5px;
}

.loan-amount-value {
    font-size: 20px;
    font-weight: 700;
    color: #1E98BC;
}

.loan-progress-container {
    margin-bottom: 10px;
}

.loan-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.loan-progress-label {
    font-size: 13px;
    color: #64748b;
}

.loan-progress-stats {
    font-size: 13px;
    font-weight: 500;
}

.loan-progress-bar {
    height: 6px;
    background-color: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.loan-progress-fill {
    height: 100%;
    background-color: #1E98BC;
    border-radius: 4px;
}

.loan-info-box {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.loan-info-item {
    flex: 1 1;
    background-color: #f8fafc;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.loan-info-label {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 2px;
}

.loan-info-value {
    font-size: 14px;
    font-weight: 600;
}

.next-payment-alert {
    background-color: #e6f2f7;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0 10px;
}

.next-payment-title {
    font-size: 12px;
    font-weight: 500;
    color: #1E98BC;
}

.next-payment-subtitle {
    font-size: 11px;
    color: #64b5d2;
}

.action-buttons {
    display: flex;
    gap: 10px;
}

.action-button-primary {
    flex: 1 1;
    background-color: #1E98BC;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.action-button-secondary {
    flex: 1 1;
    background-color: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.installments-container {
    background-color: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 20px;
}

.installments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.installments-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.installments-stats {
    font-size: 13px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 5px;
}

.installments-progress {
    width: 100%;
    background-color: #f1f5f9;
    height: 8px;
    border-radius: 4px;
    margin-bottom: 25px;
    overflow: hidden;
    position: relative;
}

.installments-progress-fill {
    height: 100%;
    background-color: #1E98BC;
    border-radius: 4px;
    transition: width 0.5s ease-in-out;
}

.installments-progress-label {
    position: absolute;
    top: -18px;
    background-color: #1E98BC;
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 8px;
}

.installments-table-header {
    display: grid;
    grid-template-columns: 0.5fr 1.5fr 1.5fr 1.5fr;
    background-color: #f8fafc;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 13px;
    color: #475569;
}

.installment-item {
    display: grid;
    grid-template-columns: 0.5fr 1.5fr 1.5fr 1.5fr;
    border-bottom: 1px solid #e2e8f0;
    padding: 15px;
    align-items: center;
    border-radius: 6px;
    transition: background-color 0.2s;
    cursor: pointer;
}

.installment-item:hover {
    background-color: #f8fafc;
}

.installment-number {
    font-size: 14px;
    font-weight: 500;
}

.installment-amount {
    font-size: 14px;
}

.installment-date {
    font-size: 14px;
}

.installment-status {
    display: flex;
    align-items: center;
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}

.status-badge svg {
    margin-left: 4px;
}

.status-paid {
    background-color: #dcfce7;
    color: #10b981;
}

.status-due-soon {
    background-color: #fef3c7;
    color: #d97706;
}

.status-future {
    background-color: #f1f5f9;
    color: #64748b;
}

.status-date {
    font-size: 12px;
    color: #64748b;
    margin-right: 10px;
}

.status-days {
    font-size: 12px;
    color: #d97706;
    margin-right: 10px;
    font-weight: 500;
}

.additional-installments {
    border-top: 1px dashed #e2e8f0;
    padding-top: 10px;
    margin-top: 10px;
    transition: all 0.3s ease-in-out;
}

.installments-remaining {
    width: 100%;
    text-align: center;
    padding: 15px 0;
    color: #64748b;
    font-size: 13px;
    margin-top: 5px;
}

.toggle-installments-button {
    width: 100%;
    background-color: white;
    color: #1E98BC;
    border: 1px solid #1E98BC;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s;
}

.toggle-installments-button:hover {
    background-color: #e6f2f7;
}

.payment-guide {
    background-color: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.payment-guide h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
}

.payment-guide ul {
    padding: 0 20px;
    margin: 0;
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
}

.no-loan-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    width: 100%;
}

.no-loan-icon {
    width: 60px;
    height: 60px;
    fill: #64748b;
}

.no-loan-title {
    margin: 20px 0;
    font-size: 20px;
    color: #334155;
}

.no-loan-message {
    margin: 0 0 25px 0;
    color: #64748b;
    max-width: 300px;
}

.apply-loan-button {
    background-color: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Media queries for responsive design */
@media (max-width: 768px) {
    .myloan-container {
        padding: 16px;
    }
    
    .loan-overview-card,
    .installments-container,
    .payment-guide {
        padding: 16px;
    }
    
    .loan-info-grid {
        flex-direction: column;
        gap: 10px;
    }
    
    .installments-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .loan-header h2,
    .installments-header h3 {
        font-size: 16px;
    }
    
    .installments-stats {
        flex-wrap: wrap;
    }
    
    .installment-status {
        flex-wrap: wrap;
    }
    
    .status-date,
    .status-days {
        margin-top: 4px;
        margin-right: 0;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .installments-table-header {
        display: none;
    }
    
    .installment-item {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
    }
    
    .installment-item > div {
        display: flex;
        align-items: center;
    }
    
    .installment-item > div::before {
        content: attr(data-label);
        width: 100px;
        font-size: 12px;
        font-weight: 500;
        color: #64748b;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .loan-amount-value {
        font-size: 18px;
    }
    
    .loan-info-item {
        padding: 8px;
    }
    
    .loan-info-label {
        font-size: 11px;
    }
    
    .loan-info-value {
        font-size: 13px;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .installments-table-header {
        grid-template-columns: 0.5fr 1fr 1fr 2fr;
    }
    
    .installment-item {
        grid-template-columns: 0.5fr 1fr 1fr 2fr;
    }
}

/* استایل‌های رسپانسیو مدیا کوئری */
@media (max-width: 1024px) {
    .mobile-menu-button {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dashboard-header {
        padding: 16px;
    }
}

/* موبایل - 768px و کمتر */
@media (max-width: 768px) {
    .rightnavbar {
        transform: translateX(100%);
        right: 0;
        top: 0;
        height: 100vh;
        border-radius: 0;
        width: 280px;
        z-index: 1001;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    }

    .rightnavbar.mobile-menu-open {
        transform: translateX(0);
    }

    .dmainbox {
        margin-right: 0;
        padding: 16px;
        padding-top: 70px !important;
    }
    
    .mobile-navbar {
        display: flex;
    }
    
    .header-notification-panel {
        top: 60px;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0 0 16px 16px;
    }
    
    .header-notification-panel.show {
        top: 60px;
    }
    
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-top: 0;
    }
    
    .header-right, .header-left {
        width: 100%;
        justify-content: space-between;
    }
    
    .user-info {
        width: 100%;
    }
    
    .profile-status {
        margin-left: auto;
    }

    .nav {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .header-right, .header-left {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .header-btn {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
    
    .user-details {
        flex: 1 1;
        min-width: 0;
    }
    
    .user-name, .user-phone {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .profile-status {
        padding: 4px 8px;
        font-size: 0.7rem;
    }
}

/* اورلی برای مسدود کردن اسکرول پشت منو در موبایل */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-overlay.active {
    display: block;
    opacity: 1;
}

/* منوی موبایل */
.mobile-navbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 0 15px;
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-navbar-left {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.mobile-navbar-center {
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    color: #334155;
    text-align: center;
}

.mobile-navbar-right {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* دکمه منوی موبایل */
.mobile-menu-button {
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748B;
    padding: 0;
}

@media (max-width: 768px) {
    .mobile-navbar {
        display: flex;
    }
    
    .header-notification-panel {
        position: fixed;
        top: -500px;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 70vh;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        z-index: 9995;
        background: white;
        overflow-y: auto;
        opacity: 0;
        transition: all 0.3s ease;
        direction: rtl;
        visibility: hidden;
    }
    
    .header-notification-panel.show {
        top: 60px;
        opacity: 1;
        visibility: visible;
    }
    
    .notification-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        width: 16px;
        height: 16px;
        background-color: #EF4444;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        color: white;
        font-weight: bold;
    }
    
    .dmainbox {
        padding-top: 70px !important;
    }
    
    /* اینجا منوی اصلی پشت نوبار موبایل قرار می‌گیرد */
    .rightnavbar {
        margin-top: 60px;
    }
}

.notification-button {
    position: relative;
}

.notification-button .notification-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #ff4d4f;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

/* تنظیمات نوبار در موبایل - حذف شد چون تکراری بود */

/* تنظیمات برای تبلت (768px تا 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .rightnavbar {
        width: 240px;
        right: 12px;
        top: 12px;
        height: calc(100vh - 24px);
    }
    
    .header-notification-panel {
        width: 300px;
        right: 70px;
    }
    
    /* اصلاح فاصله‌های dashboard-content */
    .dashboard-content {
        padding: 20px 24px !important;
        margin-right: 12px;
        margin-left: 12px;
    }
}

/* پنل نوتیفیکیشن در حالت دسکتاپ */
.header-notification-panel {
    position: fixed;
    top: -500px;
    right: 50px;
    width: 350px;
    max-width: calc(100vw - 40px);
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 9998;
    max-height: 70vh;
    overflow-y: auto;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    direction: rtl;
    visibility: hidden;
}

.header-notification-panel.show {
    top: 70px;
    opacity: 1;
    visibility: visible;
}

/* داشبورد */
.dashboard-content {
    width: 100%;
    padding: 10px;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 20px;
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* پنل نوتیفیکیشن */
.header-notification-panel {
    position: fixed;
    top: -500px;
    right: 50px;
    width: 350px;
    max-width: calc(100vw - 40px);
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 9998;
    max-height: 70vh;
    overflow-y: auto;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    direction: rtl;
    visibility: hidden;
}

/* نمایش پنل نوتیفیکیشن */
.header-notification-panel.show {
    top: 70px;
    opacity: 1;
    visibility: visible;
}

/* تنظیم استایل برای رزولوشن تبلت */
@media (min-width: 769px) and (max-width: 1024px) {
    .header-btn span {
        font-size: 12px;
    }
    
    .header-btn {
        padding: 6px 10px;
        margin-left: 8px;
    }
    
    .dashboard-header {
        padding: 12px 15px;
    }
    
    .user-name {
        font-size: 14px;
    }
    
    .user-phone {
        font-size: 12px;
    }
    
    .profile-status {
        font-size: 12px;
        padding: 4px 8px;
    }
    
    .rightnavbar {
        width: 240px;
        right: 12px;
        top: 12px;
        height: calc(100vh - 24px);
    }
    
    .header-notification-panel {
        width: 300px;
        right: 70px;
    }
}

/* تبلت - بین 769px و 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .rightnavbar {
        width: 280px;
        height: 100vh;
        background: white;
        border-left: 1px solid #e2e8f0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1000;
        transition: transform 0.3s ease;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        direction: rtl;
        transform: translateX(0);
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.05);
        padding: 24px 16px;
        border-left: 1px solid #e2e8f0;
        position: fixed;
        right: 16px;
        top: 16px;
        height: calc(100vh - 32px);
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        z-index: 1000;
        transition: transform 0.3s ease-in-out;
        overflow-y: auto;
    }
    
    .dmainbox {
        margin-right: 280px;
        padding: 20px;
        transition: margin-right 0.3s ease;
    }
    
    .header-notification-panel {
        width: 300px;
        right: 20px;
    }
    
    .header-btn span {
        font-size: 13px;
    }
    
    .header-btn {
        padding: 8px 12px;
    }
    
    .dashboard-header {
        padding: 14px;
    }
    
    .user-name {
        font-size: 14px;
    }
    
    .user-phone {
        font-size: 12px;
    }
    
    .profile-status {
        font-size: 12px;
        padding: 5px 10px;
    }
}

@media (min-width: 425px) {
    .auth-container {
        padding: 40px;
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        direction: rtl;
    }

    .auth-box {
        width: 100%;
        max-width: 480px;
        background: white;
        border-radius: 24px;
        padding: 48px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        transform: translateY(0);
        transition: all 0.3s ease;
        margin: 40px auto;
    }

    .auth-header h1 {
        font-size: 2rem;
        margin-bottom: 16px;
        text-align: center;
    }

    .auth-header p {
        font-size: 1rem;
        text-align: center;
    }

    .auth-form {
        gap: 24px;
    }

    .auth-form .input-group {
        margin-bottom: 16px;
    }

    .auth-form .input-group input {
        padding: 16px;
        border-radius: 16px;
        font-size: 1rem;
    }

    .date-picker-input {
        padding: 16px !important;
        border-radius: 16px !important;
        font-size: 1rem !important;
    }

    .auth-button {
        padding: 16px;
        border-radius: 16px;
        font-size: 1rem;
        margin-top: 24px;
    }
}

@media (max-width: 480px) {
    body {
        background-color: #f1f5f9 !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #root {
        min-height: 100vh !important;
        position: relative !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    .auth-container {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        margin: 0 !important;
        background-color: #f1f5f9 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .auth-box {
        width: 90% !important;
        max-width: 400px !important;
        position: relative !important;
        margin: 0 auto !important;
        transform: none !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
        border-radius: 16px !important;
        padding: 32px !important;
        background-color: white !important;
    }

    .main {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        margin: 0 !important;
        background-color: #f1f5f9 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .mainbox {
        width: 90% !important;
        max-width: 400px !important;
        position: relative !important;
        margin: 0 auto !important;
        transform: none !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
        border-radius: 16px !important;
        padding: 24px !important;
        background-color: white !important;
    }
    
    .header-right, .header-left {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .header-btn {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
    
    .user-details {
        flex: 1 1;
        min-width: 0;
    }
    
    .user-name, .user-phone {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .profile-status {
        padding: 4px 8px;
        font-size: 0.7rem;
    }
}

.auth-header .logo {
    margin-bottom: 24px;
    text-align: center;
}

.auth-header .logo svg {
    width: 40px;
    height: 40px;
}

@media (max-width: 480px) {
    .auth-container {
        padding: 0;
        min-height: auto;
    }
    
    .auth-box {
        padding: 12px !important;
        margin: 16px !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    .auth-header {
        margin-bottom: 12px !important;
    }
    
    .auth-header .logo {
        margin-bottom: 8px !important;
    }
    
    .auth-header .logo svg {
        width: 35px !important;
        height: 35px !important;
    }
    
    .auth-header h1 {
        font-size: 1.1rem !important;
        margin-bottom: 4px !important;
    }
    
    .auth-header p {
        font-size: 0.9rem !important;
        margin-bottom: 8px !important;
        color: #64748b !important;
    }

    .verification-code {
        gap: 4px !important;
        margin: 12px 0 !important;
        direction: ltr !important;
    }
    
    .verification-code input {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
        border-radius: 8px !important;
        border: 1.5px solid #e2e8f0 !important;
        background-color: #f8fafc !important;
    }

    .verification-code input:focus {
        border-color: #1E98BC !important;
        box-shadow: 0 0 0 2px rgba(30, 152, 188, 0.1) !important;
    }

    .auth-button {
        width: 100% !important;
        padding: 12px !important;
        font-size: 0.95rem !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%) !important;
        margin-top: 8px !important;
    }

    .auth-link {
        margin-top: 8px !important;
        text-align: center !important;
    }

    .auth-link button {
        color: #1E98BC !important;
        font-size: 0.9rem !important;
        padding: 4px 8px !important;
    }

    .phone-display {
        background-color: #f8fafc !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        margin-bottom: 12px !important;
    }

    .phone-display label {
        font-size: 0.85rem !important;
        color: #64748b !important;
        margin-bottom: 2px !important;
    }

    .phone-number {
        font-size: 1rem !important;
        color: #1f2937 !important;
        direction: ltr !important;
    }
}

.phone-display {
    background-color: #f8fafc;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
}

.phone-display label {
    font-size: 0.9rem;
    color: #64748b;
    display: block;
    margin-bottom: 4px;
}

.phone-number {
    font-size: 1.2rem;
    font-weight: 500;
    color: #1f2937;
    direction: ltr;
}

@media (max-width: 480px) {
    .phone-display {
        background-color: #f8fafc !important;
        padding: 10px 14px !important;
        border-radius: 10px !important;
        margin: 8px 0 16px !important;
        border: 1px solid #e2e8f0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .phone-display label {
        font-size: 0.8rem !important;
        color: #64748b !important;
        font-weight: 400 !important;
    }

    .phone-number {
        font-size: 1.1rem !important;
        color: #1f2937 !important;
        direction: ltr !important;
        font-weight: 500 !important;
        letter-spacing: 0.5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* حذف کامل علامت + */
    .phone-number::before {
        content: "" !important;
        display: none !important;
    }
}

@media (min-width: 770px) and (max-width: 880px) {
    /* استایل‌های قبلی که نیاز است حفظ شوند */
    .dmain {
        display: flex;
        flex-direction: row;
        width: 100%;
        min-height: calc(100vh - 70px);
    }
    .header-notification-panel{
        left: -90px !important;
    }
    
    .rightnavbar {
        /* width: 240px; */
        position: fixed;
        right: 10px;
        /* top: 10px; */
        bottom: 0;
        background: white;
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
        z-index: 100;
    }
    
    .dmainbox {
        width: calc(100% - 240px);
        margin-top: -75px;
        padding: 16px;
        background: white;
        margin-right: 240px;
    }
    
    .nav {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 16px;
        gap: 16px;
        width: 100%;
    }
    
    .navbox {
        background: white;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        padding: 16px;
    }
    
    .rightnavbar.mobile-menu-closed {
        right: -240px;
    }
    
    /* تغییر مکان دکمه‌ها و دکمه وضعیت پروفایل */
    .dashboard-header {
        display: flex !important;
        flex-direction: row !important;
        padding: 16px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        margin-bottom: 16px;
        width: 100%;
        position: relative;
    }
    
    .header-right {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .user-info {
        display: flex;
        align-items: center;
        width: 100%;
    }
    
    .profile-status {
        width: 100% !important;
        margin-top: 20px !important;
    }
    
    .header-left {
        position: absolute !important;
        left: 16px !important;
        top: 65px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .header-btn {
        width: 36px !important;
        height: 36px !important;
        padding: 6px !important;
    }
    
    .header-btn span {
        display: none !important;
    }

    .notification-button button {
        width: 40px !important;
        height: 40px !important;
        background-color: transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* مدیا کوئری برای سایز 770px تا 880px */
@media (min-width: 770px) and (max-width: 880px) {
    .dashboard-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px !important;
        height: auto !important;
        margin-top: 0 !important;
        position: relative !important;
        top: auto !important;
    }
    
    .dmainbox {
        margin-top: 0 !important;
        padding-top: 16px !important;
        /* margin-right: 280px !important; */
        transition: margin-right 0.3s ease !important;
    }
    
    .rightnavbar {
        width: 260px !important;
        position: fixed !important;
        right: 10px !important;
        top: 10px !important;
        height: calc(100vh - 20px) !important;
        background: white !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 100 !important;
    }
    
    .header-right {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: auto !important;
        gap: 12px !important;
    }
    
    .user-info {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
    }
    
    .profile-status {
        position: static !important;
        width: auto !important;
        margin: 0 !important;
        padding: 6px 12px !important;
    }
    
    .header-left {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        top: auto !important;
        left: auto !important;
    }
    
    /* مخفی کردن دکمه پشتیبانی */
    .header-left .header-btn:not(.exit-btn) {
        display: none !important;
    }
    
    .header-btn {
        width: auto !important;
        height: auto !important;
        padding: 8px 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    
    .header-btn span {
        display: inline-block !important;
        font-size: 13px !important;
    }
    
    .header-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* مخفی کردن دکمه منوی موبایل */
    .mobile-menu-button {
        display: none !important;
    }
}

@media (max-width: 320px){
    .content-container{
        padding: 0px !important;
    }
    .dashboard-content{
        padding: 0px !important;
    }
}

/* افزایش z-index برای اعلان‌ها تا بالای هدر نمایش داده شوند */
.Toastify__toast-container {
    z-index: 1000000 !important; /* مقدار z-index را بالاتر از همه عناصر دیگر قرار می‌دهیم */
    position: fixed !important;
}

@media (max-width: 768px) {
    .Toastify__toast-container {
        top: 70px !important; /* فاصله اعلان‌ها از بالای صفحه در حالت موبایل */
        width: calc(100% - 32px) !important;
        left: 16px !important;
        right: 16px !important;
        margin: 0 auto !important;
    }
    
    .Toastify__toast {
        margin-bottom: 8px !important;
        border-radius: 12px !important;
    }
}

/* بهبود ریسپانسیو در حالت موبایل برای صفحه identify-info */
@media (max-width: 480px) {
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .form-group {
        margin-bottom: 12px !important;
    }
    
    .form-group label {
        font-size: 0.8rem !important;
        margin-bottom: 4px !important;
    }
    
    .form-group input,
    .form-group select {
        padding: 8px 10px !important;
        font-size: 0.85rem !important;
    }
    
    .gender-options,
    .marital-options {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .option-label {
        width: 100% !important;
        padding: 8px 15px !important;
        font-size: 0.85rem !important;
    }
    
    .card-header {
        margin-bottom: 12px !important;
    }
    
    .loan-status-card, 
    .loan-amount-card {
        padding: 15px !important;
    }
    
    .plan-header {
        padding: 15px !important;
    }
    
    .continue-button {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }
    
    .loan-status-message {
        padding: 10px !important;
        margin-bottom: 15px !important;
    }
    
    /* .dmainbox {
        padding: 12px !important;
    } */
}

/* اصلاح عرض کلی فرم و فاصله از هدر در موبایل */
@media (max-width: 480px) {
    .choose-plan-container {
        padding: 12px !important;
        margin-top: 65px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .form-group {
        width: 100% !important;
        overflow: hidden !important;
    }
    
    .form-group input,
    .form-group select {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
    
    .gender-options,
    .marital-options {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .option-label {
        box-sizing: border-box !important;
    }
    
    .loan-status-card, 
    .loan-amount-card {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .plan-header {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
    
    .continue-button {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* اصلاح مشکل overflow در صفحه identify-info */
.choose-plan-container, 
.loan-status-card, 
.loan-amount-card {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* استایل‌های مربوط به صفحه آپلود */
.upload-container {
    margin-top: 20px;
}

.upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    background-color: #f8fafc;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.upload-area:hover {
    border-color: #1e98bc;
    background-color: #f0f9ff;
}

.upload-area img {
    max-width: 100%;
    max-height: 200px;
    display: block;
    margin: 0 auto 15px;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.upload-area h3 {
    margin: 0 0 10px;
    color: #334155;
    font-size: 18px;
}

.upload-area p {
    margin: 0 0 15px;
    color: #64748b;
    font-size: 14px;
}

.upload-area .file-info {
    font-size: 14px;
    color: #475569;
    margin-bottom: 5px;
}

.upload-area .file-name {
    font-weight: 600;
    color: #1e98bc;
}

.delete-button {
    background: #ef4444;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* margin: 10px auto 0; */
    transition: all 0.2s ease;
}

.delete-button:hover {
    background: #dc2626;
}

.delete-button svg {
    width: 18px;
    height: 18px;
}

.upload-icon {
    width: 50px;
    height: 50px;
    color: #64748b;
    margin: 0 auto 15px;
    display: block;
}

.upload-instructions {
    margin: 0;
    color: #94a3b8;
    font-size: 12px;
}

/* استایل‌های موبایل */
@media (max-width: 480px) {
    .upload-area {
        padding: 20px 15px;
    }
    
    .upload-area h3 {
        font-size: 16px;
    }
    
    .upload-area p {
        font-size: 13px;
    }
    
    .upload-area img {
        max-height: 150px;
    }
    
    .upload-icon {
        width: 40px;
        height: 40px;
    }
    
    .delete-button {
        padding: 6px 12px;
        font-size: 13px;
    }
}

.upload-area.dragging {
    border-color: #1e98bc;
    background-color: #f0f9ff;
    transform: scale(1.01);
}

.loan-status-message {
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.loan-status-message svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.loan-status-message.success {
    background-color: #f0fdf4;
    color: #166534;
}

.loan-status-message.success svg {
    color: #16a34a;
}

.loan-status-message.warning {
    background-color: #fef3c7;
    color: #92400e;
}

.loan-status-message.warning svg {
    color: #d97706;
}

.loan-status-message p {
    margin: 0;
    font-size: 14px;
}

.loan-status-message .user-details {
    margin-top: 8px;
    font-size: 13px;
    color: #64748b;
}

.loading-icon {
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* بهبود استایل‌های موبایل */
@media (max-width: 480px) {
    .loan-status-message {
        padding: 15px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .loan-status-message svg {
        width: 30px;
        height: 30px;
    }
    
    .loan-status-message .user-details {
        font-size: 12px;
    }
    
    .upload-area {
        margin-top: 15px;
    }
}

.notification-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 8px;
    position: relative;
    width: 100%;
}

.notification-badge {
    background-color: #ff4d4f;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.notification-type-badge {
    background-color: #e6f7ff;
    color: #1890ff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    margin-right: 8px;
}

/* استایل‌های toast */
.Toastify__toast-container {
    position: fixed !important;
    top: 16px !important;
    right: 50% !important;
    left: auto !important;
    left: initial !important;
    transform: translateX(50%) !important;
    width: auto !important;
    min-width: 320px !important;
    max-width: 90% !important;
    z-index: 999999 !important;
}

.Toastify__toast {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.Toastify__toast--success {
    color: #1f2937 !important;
}

.Toastify__toast--error {
    color: #1f2937 !important;
}

.Toastify__toast--info {
    color: #1f2937 !important;
}

.Toastify__close-button {
    color: #6b7280 !important;
}

.Toastify__toast-body {
    font-family: 'IRANSans', sans-serif !important;
    direction: rtl !important;
    text-align: right !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

@media (max-width: 768px) {
  .Toastify__toast-container {
    position: fixed !important;
    top: 16px !important;
    right: 50% !important;
    left: auto !important;
    left: initial !important;
    transform: translateX(50%) !important;
    width: 90% !important;
    min-width: 0 !important;
    min-width: initial !important;
    max-width: 300px !important;
  }
}

/* استایل‌های جدول تیکت‌ها */
.tickets-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    margin-top: 1rem;
}

.tickets-table th {
    padding: 12px 16px;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 500;
    color: #64748b;
    background: #f8fafc;
    border: none;
}

.tickets-table td {
    padding: 16px;
    background: white;
    border: none;
    font-size: 0.9rem;
    color: #1f2937;
    vertical-align: middle;
    position: relative;
}

.tickets-table td:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #f1f5f9;
}

.tickets-table tr {
    transition: all 0.2s ease;
}

.tickets-table tr:hover td {
    background: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.tickets-table tr td:first-child {
    border-right: 3px solid #1E98BC;
    border-radius: 8px 0 0 8px;
}

.tickets-table tr td:last-child {
    border-radius: 0 8px 8px 0;
}


.ticket-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: #1E98BC;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
}

.ticket-detail-info {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.ticket-detail-row {
    display: flex;
    margin-bottom: 12px;
}

.ticket-detail-label {
    font-weight: 500;
    color: #64748b;
    width: 120px;
    flex-shrink: 0;
}

.ticket-detail-value {
    color: #1f2937;
}

.ticket-subject {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ticket-subject-text {
    font-weight: 500;
    color: #1f2937;
}

.ticket-email {
    font-size: 0.8rem;
    color: #64748b;
}

.ticket-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.ticket-status.pending {
    background-color: #fff7ed;
    color: #c2410c;
}

.ticket-status.answered {
    background-color: #f0fdf4;
    color: #15803d;
}

.ticket-status.closed {
    background-color: #f1f5f9;
    color: #475569;
}

.ticket-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.ticket-action-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.ticket-action-btn.view {
    background: #1E98BC;
    color: white;
}

.ticket-action-btn.view:hover {
    background: #1a87a8;
}

.ticket-action-btn.close {
    background: #f1f5f9;
    color: #64748b;
}

.ticket-action-btn.close:hover {
    background: #e2e8f0;
}

.ticket-action-btn i {
    font-size: 0.9rem;
}

/* استایل‌های موبایل */
@media (max-width: 768px) {
    .tickets-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .tickets-table th,
    .tickets-table td {
        padding: 12px;
        font-size: 0.85rem;
    }

    .ticket-action-btn {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    .ticket-status {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .tickets-table thead {
        display: none;
    }

    .tickets-table, 
    .tickets-table tbody, 
    .tickets-table tr, 
    .tickets-table td {
        display: block;
        width: 100%;
    }

    .tickets-table tr {
        margin-bottom: 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: white;
    }

    .tickets-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        border: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .tickets-table td:last-child {
        border-bottom: none;
    }

    .tickets-table td::before {
        content: attr(data-label);
        font-weight: 500;
        color: #64748b;
        margin-left: 1rem;
    }

    .ticket-actions {
        justify-content: flex-start;
    }

    .ticket-subject {
        flex-direction: column;
        align-items: flex-end;
    }
}

/* استایل‌های جدول تیکت‌ها - ویرایش شده */
.tickets-table-container {
    border-radius: 12px;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.tickets-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
}

.tickets-table thead {
    background-color: #f8fafc;
}

.tickets-table th {
    padding: 16px;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    border: none;
    position: relative;
}

.tickets-table th::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #e2e8f0;
}

.tickets-table td {
    padding: 16px;
    background: white;
    border: none;
    font-size: 0.9rem;
    color: #1f2937;
    vertical-align: middle;
}

.tickets-table tr {
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}

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

.tickets-table tr:hover {
    background-color: #f8fafc;
}

.ticket-priority {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.ticket-priority.high {
    background-color: #fee2e2;
    color: #b91c1c;
}

.ticket-priority.medium {
    background-color: #fef3c7;
    color: #b45309;
}

.ticket-priority.low {
    background-color: #dcfce7;
    color: #15803d;
}

.modal-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.modal-filter-button {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-filter-button:hover {
    border-color: #cbd5e1;
    color: #475569;
}

.modal-filter-button.active {
    border-color: #1E98BC;
    background: #1E98BC;
    color: white;
}

.modal-search-input {
    position: relative;
    margin-bottom: 20px;
}

.modal-search-input input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.modal-search-input input:focus {
    outline: none;
    border-color: #1E98BC;
    box-shadow: 0 0 0 3px rgba(30, 152, 188, 0.1);
}

.modal-search-input i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.empty-tickets {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    background-color: #f8fafc;
    border-radius: 12px;
}

.empty-tickets i {
    font-size: 40px;
    color: #cbd5e1;
    margin-bottom: 16px;
}

.empty-tickets h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
}

.empty-tickets p {
    font-size: 0.9rem;
    color: #64748b;
    max-width: 400px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .modal-filters {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .modal-filter-button {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    .empty-tickets {
        padding: 36px 16px;
    }
    
    .empty-tickets i {
        font-size: 32px;
    }
    
    .empty-tickets h3 {
        font-size: 1rem;
    }
}

/* استایل‌های صفحه قرارداد */
.contract-container {
    max-width: 900px;
    margin: 0 auto 80px;
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    direction: rtl;
}

.contract-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 30px;
    position: relative;
}

.contract-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: #1E98BC;
    margin-bottom: 10px;
}

.contract-logo {
    font-size: 18px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 20px;
}

.contract-number {
    font-size: 16px;
    color: #64748b;
    margin-bottom: 5px;
}

.contract-date {
    font-size: 16px;
    color: #64748b;
}

.contract-parties {
    margin-bottom: 40px;
}

.contract-parties h2 {
    font-size: 20px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 20px;
    border-right: 4px solid #1E98BC;
    padding-right: 10px;
}

.contract-party {
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.contract-party h3 {
    font-size: 18px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 15px;
}

.contract-party p {
    font-size: 16px;
    color: #475569;
    margin-bottom: 8px;
    line-height: 1.6;
}

.contract-details {
    margin-bottom: 40px;
}

.contract-details h2 {
    font-size: 20px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 20px;
    border-right: 4px solid #1E98BC;
    padding-right: 10px;
}

.contract-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.contract-item {
    flex: 1 1;
    min-width: 250px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 8px;
    margin-left: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contract-label {
    font-size: 16px;
    font-weight: 500;
    color: #475569;
}

.contract-value {
    font-size: 16px;
    font-weight: 600;
    color: #334155;
}

.contract-terms {
    margin-bottom: 40px;
}

.contract-terms h2 {
    font-size: 20px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 20px;
    border-right: 4px solid #1E98BC;
    padding-right: 10px;
}

.contract-term-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.contract-term-item:last-child {
    border-bottom: none;
}

.contract-term-item h3 {
    font-size: 18px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 10px;
}

.contract-term-item p {
    font-size: 16px;
    color: #475569;
    line-height: 1.8;
}

.contract-signatures {
    margin-bottom: 40px;
}

.contract-signatures h2 {
    font-size: 20px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 20px;
    border-right: 4px solid #1E98BC;
    padding-right: 10px;
}

.signature-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.signature-box {
    flex: 1 1;
    min-width: 250px;
    padding: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
}

.signature-box h3 {
    font-size: 18px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 15px;
    text-align: center;
}

.signature-placeholder {
    height: 120px;
    border: 2px dashed #e2e8f0;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-signature {
    max-width: 150px;
    max-height: 100px;
    opacity: 0.8;
}

.signature-box p {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 5px;
}

.contract-actions {
    border-top: 2px solid #e2e8f0;
    padding-top: 30px;
}

.terms-acceptance {
    margin-bottom: 30px;
}

.terms-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.terms-acceptance input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
}

.terms-acceptance span {
    font-size: 16px;
    color: #475569;
    line-height: 1.6;
}

.action-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.contract-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 30px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.print-button {
    background: #f1f5f9;
    color: #475569;
}

.print-button:hover {
    background: #e2e8f0;
}

.accept-button {
    background: #1E98BC;
    color: white;
}

.accept-button:hover {
    background: #167693;
}

.accept-button:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

@media print {
    .no-print {
        display: none;
    }
    
    .contract-container {
        box-shadow: none;
        padding: 0;
        margin: 0;
    }
    
    body {
        background: white;
    }
    
    .navbardiv {
        display: none;
    }
    
    .contract-header {
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    .contract-container {
        padding: 20px;
        margin-bottom: 40px;
    }
    
    .contract-header h1 {
        font-size: 22px;
    }
    
    .contract-row {
        flex-direction: column;
    }
    
    .contract-item {
        margin-left: 0;
    }
    
    .signature-boxes {
        flex-direction: column;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .contract-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .contract-container {
        padding: 15px;
    }
    
    .contract-party,
    .contract-term-item {
        padding: 15px;
    }
    
    .contract-header h1 {
        font-size: 20px;
    }
    
    .contract-party h3,
    .contract-term-item h3 {
        font-size: 16px;
    }
    
    .contract-party p,
    .contract-term-item p,
    .contract-label,
    .contract-value {
        font-size: 14px;
    }
}

/* استایل‌های صفحه تأیید قرارداد */
.confirmation-container {
    max-width: 700px;
    margin: 40px auto;
    padding: 20px;
}

.confirmation-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    direction: rtl;
}

.confirmation-icon-success {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: #dcfce7;
    color: #15803d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirmation-icon-success svg {
    width: 40px;
    height: 40px;
}

.confirmation-title {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

.confirmation-message {
    font-size: 18px;
    color: #4b5563;
    margin-bottom: 30px;
}

.confirmation-details {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
}

.confirmation-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}

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

.confirmation-label {
    font-size: 16px;
    color: #4b5563;
}

.confirmation-value {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.confirmation-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #eff6ff;
    border-radius: 12px;
    margin-bottom: 30px;
    text-align: right;
}

.confirmation-info svg {
    width: 24px;
    height: 24px;
    color: #1e40af;
    flex-shrink: 0;
    margin-top: 3px;
}

.confirmation-info p {
    font-size: 15px;
    color: #1e3a8a;
    line-height: 1.7;
    margin: 0;
}

.confirmation-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.confirmation-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.confirmation-button.primary {
    background: #1E98BC;
    color: white;
}

.confirmation-button.primary:hover {
    background: #167693;
}

.confirmation-button.secondary {
    background: #f1f5f9;
    color: #475569;
}

.confirmation-button.secondary:hover {
    background: #e2e8f0;
}

.confirmation-button svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .confirmation-card {
        padding: 30px 20px;
    }
    
    .confirmation-icon-success {
        width: 70px;
        height: 70px;
    }
    
    .confirmation-title {
        font-size: 24px;
    }
    
    .confirmation-message {
        font-size: 16px;
    }
    
    .confirmation-actions {
        flex-direction: column;
    }
    
    .confirmation-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .confirmation-card {
        padding: 25px 15px;
    }
    
    .confirmation-icon-success {
        width: 60px;
        height: 60px;
    }
    
    .confirmation-icon-success svg {
        width: 30px;
        height: 30px;
    }
    
    .confirmation-title {
        font-size: 22px;
    }
    
    .confirmation-message {
        font-size: 15px;
    }
    
    .confirmation-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .confirmation-info {
        padding: 12px;
    }
    
    .confirmation-info p {
        font-size: 14px;
    }
}

/* استایل برای کادر هشدار در صفحه loan-confirmation */
.warning-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background-color: #fff3e0;
  border: 1px solid #ffcc80;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.warning-box svg {
  width: 24px;
  height: 24px;
  min-width: 24px;
  color: #e65100;
}

.warning-box p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #e65100;
}

.warning-box p:first-child {
  font-weight: 600;
  margin-bottom: 4px;
}

.upload-area.disabled {
  opacity: 0.7;
  cursor: not-allowed;
  border: 2px dashed #cccccc;
  pointer-events: none;
  background-color: #f5f5f5;
  transition: all 0.3s ease;
}

.upload-area.disabled::after {
  content: "آپلود تکمیل شده و تایید شده است";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 14px;
  z-index: 10;
  text-align: center;
  white-space: nowrap;
}

.upload-area.disabled img {
  opacity: 0.6;
}

/* استایل‌های دکمه‌های صفحه قرارداد */
.continue-button-container {
  display: flex;
  align-items: center;
  margin-top: 30px;
  justify-content: center;
  gap: 20px;
}

.download-button {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #f8fafc;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.download-button:hover:not(:disabled) {
  background-color: #e5f3fc;
  border-color: #1E98BC;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.download-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.download-button svg {
  width: 20px;
  height: 20px;
  color: #1E98BC;
}

@media (max-width: 768px) {
  .continue-button-container {
    flex-direction: column;
    width: 100%;
  }
  
  .continue-button, .download-button {
    width: 100%;
    justify-content: center;
    margin-bottom: 30px;
  }
}

/* استایل‌های مربوط به فاکتورها */
.rtl {
    direction: rtl;
    text-align: right;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.page-title {
    font-size: 24px;
    margin: 0;
}

.page-actions {
    display: flex;
    gap: 8px;
}

.invoice-container {
    margin-bottom: 30px;
}

.invoice-card {
    padding: 20px;
}

.invoice-header {
    /* display: flex; */
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.logo img {
    max-height: 80px;
}

.invoice-title h1 {
    font-size: 24px;
    margin: 0;
}

.invoice-title h2 {
    font-size: 18px;
    margin: 10px 0;
}

.invoice-status {
    margin-top: 10px;
}

.invoice-summary {
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

.invoice-summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.invoice-summary-item.total {
    font-weight: bold;
    font-size: 18px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
    margin-top: 10px;
}

.invoice-notes {
    margin-top: 20px;
}

.invoice-footer {
    margin-top: 30px;
    text-align: center;
    color: #666;
}

@media print {
    .page-header, .ant-menu, header {
        display: none !important;
    }
    
    .invoice-container {
        margin: 0;
        padding: 0;
    }
    
    .invoice-card {
        box-shadow: none;
        border: none;
    }
    
    body {
        background: white !important;
    }
}

/* استایل‌های جدول فاکتورها */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

/* استایل کارت‌های مدرن فاکتور */
.invoices-list-modern {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}
.invoice-card-modern {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  padding: 24px 20px 18px 20px;
  transition: box-shadow 0.2s, transform 0.2s;
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid #f1f5f9;
}
.invoice-card-modern:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.13);
  transform: translateY(-2px) scale(1.01);
  border-color: #cbd5e1;
}
.invoice-card-content-modern {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.invoice-header-modern {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.invoice-number-modern {
  font-size: 1.1rem;
  font-weight: 700;
  color: #334155;
  margin: 0 0 2px 0;
}
.invoice-description-modern {
  font-size: 0.97rem;
  color: #64748b;
  margin: 0 0 2px 0;
}
.invoice-dates-modern {
  display: flex;
  gap: 18px;
  margin: 8px 0 0 0;
  font-size: 0.93rem;
  color: #64748b;
}
.invoice-date-item-modern {
  display: flex;
  align-items: center;
  gap: 4px;
}
.invoice-footer-modern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}
.status-badge {
  padding: 4px 14px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  display: inline-block;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
  color: #334155;
}
.status-پرداخت-شده {
  background: #e0f7e9;
  color: #059669;
  border-color: #34d399;
}
.status-پرداخت-نشده {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}
.status-لغو-شده {
  background: #f3f4f6;
  color: #64748b;
  border-color: #cbd5e1;
}
.invoice-amount-modern {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.5px;
}
.invoice-amount-unit-modern {
  font-size: 0.95rem;
  color: #64748b;
  margin-right: 3px;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
  color: #94a3b8;
  font-size: 1.1rem;
}

.input-value {
  margin-top: 5px;
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 500;
}

.input-note {
  font-size: 0.85rem;
  color: #94a3b8;
  font-weight: 400;
  margin-right: 5px;
}

.notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #ef4444;
    color: white;
    border-radius: 12px;
    min-width: 20px;
    height: 20px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding: 0 5px;
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.3);
    border: 1.5px solid white;
}

/* استایل‌های مربوط به حالت فقط-خواندنی */
.readonly-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(0, 123, 255, 0.15);
  color: #0077cc;
  padding: 8px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-weight: 500;
}

.readonly-banner svg {
  width: 20px;
  height: 20px;
}

.readonly-back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e9ecef;
  color: #495057;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  margin-top: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.readonly-back-button:hover {
  background-color: #dee2e6;
}

.readonly-back-button svg {
  width: 18px;
  height: 18px;
  margin-left: 8px;
}

/* استایل‌های کامپوننت LoanProgressHistory */
.loan-history-container {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 24px;
  margin-top: 24px;
}

.loan-history-header {
  margin-bottom: 24px;
  text-align: right;
}

.loan-history-header h2 {
  color: #1E98BC;
  margin-bottom: 8px;
}

.loan-history-header p {
  color: #6c757d;
  margin: 0;
}

.loan-history-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.loan-history-step {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.loan-history-step:hover {
  background-color: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.loan-history-step-icon {
  background-color: #1E98BC;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
}

.loan-history-step-icon svg {
  width: 20px;
  height: 20px;
}

.loan-history-step-content {
  flex-grow: 1;
  text-align: right;
}

.loan-history-step-number {
  background-color: #1E98BC;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-left: 8px;
}

.loan-history-step-content h3 {
  display: inline;
  margin: 0;
  color: #343a40;
}

.loan-history-step-arrow {
  margin-right: 8px;
}

.loan-history-step-arrow svg {
  width: 20px;
  height: 20px;
  color: #6c757d;
}





/* استایل‌های موبایل برای auth2 */
@media (max-width: 480px) {
    body {
        background: #f1f5f9 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .auth2-container {
        padding: 15px !important;
        margin: 0 !important; 
        background: #f1f5f9 !important;
        min-height: 100vh !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .auth2-box {
        padding: 18px !important;
        border-radius: 12px !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;
        width: 100% !important;
        max-width: 95% !important;
        margin: 0 auto !important;
        background: white !important;
        display: flex !important;
        flex-direction: column !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    }
    
    .auth2-box:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
    }

    .auth2-header {
        margin-bottom: 20px !important;
        text-align: center !important;
    }
    
    .logo {
        margin-bottom: 12px !important;
        text-align: center !important;
    }
    
    .logo svg {
        width: 28px !important;
        height: 28px !important;
    }

    .auth2-header h1 {
        font-size: 1.2rem !important;
        margin-bottom: 3px !important;
        font-family: 'peyda' !important;
        font-weight: 600 !important;
        color: #1E98BC !important;
    }
    
    .auth2-header p {
        font-size: 0.85rem !important;
        color: #64748b !important;
        text-align: center !important;
        font-family: 'peyda' !important;
        margin: 0 !important;
    }

    .auth2-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .inputGroup {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        margin-bottom: 6px !important;
    }

    .phone-display {
        margin: 0 !important;
        padding: 10px !important;
        background: #f8fafc !important;
        border-radius: 10px !important;
        margin-bottom: 10px !important;
    }

    .phone-display label {
        font-size: 0.8rem !important;
        color: #64748b !important;
        display: block !important;
        margin-bottom: 3px !important;
    }

    .phone-number {
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        color: #1f2937 !important;
        direction: ltr !important;
    }

    .auth2-form label {
        font-size: 0.85rem !important;
        color: #1f2937 !important;
        font-weight: 500 !important;
        font-family: 'peyda' !important;
        margin-bottom: 3px !important;
    }

    .auth2-form input {
        width: 100% !important;
        padding: 10px 12px !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 10px !important;
        font-size: 0.9rem !important;
        color: #1f2937 !important;
        background: #f8fafc !important;
        height: auto !important;
        font-family: 'peyda' !important;
        box-sizing: border-box !important;
    }

    .buttonGroup {
        display: flex !important;
        flex-direction: column !important;
        margin-top: 8px !important;
    }

    .auth2-button {
        width: 100% !important;
        padding: 10px !important;
        border: none !important;
        border-radius: 10px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: white !important;
        background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%) !important;
        cursor: pointer !important;
        margin-top: 10px !important;
        font-family: 'peyda' !important;
        height: auto !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    
    .auth2-button:active {
        transform: scale(0.98) !important;
    }
    
    .auth-link {
        margin-top: 10px !important;
        text-align: center !important;
    }
    
    .auth-link button {
        background: none !important;
        border: none !important;
        color: #1E98BC !important;
        font-size: 0.85rem !important;
        cursor: pointer !important;
        font-family: 'peyda' !important;
        padding: 3px 0 !important;
    }

    .error-message {
        color: #dc2626 !important;
        font-size: 0.8rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        font-family: 'peyda' !important;
        margin: 3px 0 !important;
    }

    .success-message {
        color: #059669 !important;
        font-size: 0.8rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        font-family: 'peyda' !important;
        margin: 3px 0 !important;
    }
}

/* استایل‌های صفحه بازیابی رمز عبور (فراموشی رمز) */
@media (max-width: 480px) {
    .forgot-password-container {
        padding: 15px !important;
        margin: 0 !important; 
        background: #f1f5f9 !important;
        min-height: 100vh !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        direction: rtl !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .forgot-password-box {
        padding: 18px !important;
        border-radius: 12px !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;
        width: 100% !important;
        max-width: 95% !important;
        margin: 0 auto !important;
        background: white !important;
        display: flex !important;
        flex-direction: column !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    }
    
    .forgot-password-box:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
    }

    .forgot-password-header {
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    .forgot-password-header .logo {
        margin-bottom: 12px !important;
        text-align: center !important;
        width: auto !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .forgot-password-header .logo svg {
        width: 28px !important;
        height: 28px !important;
        fill: #1E98BC !important;
    }

    .forgot-password-header h1 {
        font-size: 1.2rem !important;
        margin-bottom: 3px !important;
        font-family: 'peyda' !important;
        font-weight: 600 !important;
        color: #1E98BC !important;
        text-align: center !important;
    }

    .forgot-password-header p {
        font-size: 0.85rem !important;
        color: #64748b !important;
        text-align: center !important;
        font-family: 'peyda' !important;
        margin: 0 !important;
    }

    .forgot-password-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .forgot-password-form .phone-display {
        margin: 0 !important;
        padding: 10px !important;
        background: #f8fafc !important;
        border-radius: 10px !important;
        margin-bottom: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        border: 1px dashed #e0e0e0 !important;
    }

    .forgot-password-form .phone-display label {
        font-size: 0.8rem !important;
        color: #64748b !important;
        display: block !important;
        margin-bottom: 3px !important;
    }

    .forgot-password-form .phone-number {
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        color: #1f2937 !important;
        direction: ltr !important;
    }

    .forgot-password-form .verification-code {
        margin: 5px 0 10px !important;
        display: flex !important;
        gap: 6px !important;
        justify-content: center !important;
        direction: ltr !important;
    }

    .forgot-password-form .verification-code input {
        width: 32px !important;
        height: 38px !important;
        text-align: center !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 10px !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        background-color: #f8fafc !important;
        transition: all 0.2s ease !important;
    }
    
    .forgot-password-form .verification-code input:focus {
        border-color: #1E98BC !important;
        box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.2) !important;
        background-color: #ffffff !important;
        transform: translateY(-1px) !important;
    }

    .forgot-password-form input[type="password"] {
        width: 100% !important;
        padding: 10px 12px !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 10px !important;
        font-size: 0.9rem !important;
        color: #1f2937 !important;
        background: #f8fafc !important;
        box-sizing: border-box !important;
        height: auto !important;
        font-family: 'peyda' !important;
        text-align: right !important;
    }

    .forgot-password-form input[type="password"]:focus {
        border-color: #1E98BC !important;
        background-color: #ffffff !important;
        box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.15) !important;
    }

    .forgot-password-form input::placeholder {
        color: #94A3B8 !important;
        opacity: 0.8 !important;
    }

    .forgot-password-button {
        width: 100% !important;
        padding: 10px !important;
        border: none !important;
        border-radius: 10px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: white !important;
        background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%) !important;
        cursor: pointer !important;
        margin-top: 10px !important;
        font-family: 'peyda' !important;
        height: auto !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        letter-spacing: normal !important;
        box-shadow: 0 2px 6px rgba(25, 149, 187, 0.2) !important;
    }
    
    .forgot-password-button:not(:disabled):active {
        transform: scale(0.98) !important;
    }
    
    .forgot-password-button:disabled {
        background: linear-gradient(135deg, #a0ccd8, #b3d7e1) !important;
        opacity: 0.8 !important;
        box-shadow: none !important;
    }

    .forgot-password-form .error-message {
        color: #dc2626 !important;
        font-size: 0.8rem !important;
        padding: 8px !important;
        border-radius: 8px !important;
        background-color: rgba(220, 38, 38, 0.08) !important;
        border: 1px solid rgba(220, 38, 38, 0.2) !important;
        text-align: center !important;
        margin: 6px 0 !important;
        font-family: 'peyda' !important;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-4px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
} 
:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: hsl(6, 78%, 57%);
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  --toastify-container-width: fit-content;
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-padding: 14px;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;

  /* Used only for colored theme */
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  /* used to control the opacity of the progress trail */
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: 9999;
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, 9999);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  width: fit-content;
  width: var(--toastify-container-width);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.Toastify__toast-container--top-left {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  left: max(16px, env(safe-area-inset-left));
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--top-right {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  right: max(16px, env(safe-area-inset-right));
  right: var(--toastify-toast-right);
  align-items: end;
}
.Toastify__toast-container--bottom-left {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  left: max(16px, env(safe-area-inset-left));
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--bottom-right {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  right: max(16px, env(safe-area-inset-right));
  right: var(--toastify-toast-right);
  align-items: end;
}

.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  width: 320px;
  width: var(--toastify-toast-width);
  min-height: 64px;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 14px;
  padding: var(--toastify-toast-padding);
  border-radius: 6px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  box-shadow: var(--toastify-toast-shadow);
  max-height: 800px;
  max-height: var(--toastify-toast-max-height);
  font-family: sans-serif;
  font-family: var(--toastify-font-family);
  /* webkit only issue #791 */
  z-index: 0;
  /* inner swag */
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  word-break: break-word;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left,
  .Toastify__toast-container--top-center,
  .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left,
  .Toastify__toast-container--bottom-center,
  .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: auto;
    left: initial;
  }
  .Toastify__toast {
    --toastify-toast-width: 100%;
    margin-bottom: 0;
    border-radius: 0;
  }
}

.Toastify__toast-container[data-stacked='true'] {
  width: 320px;
  width: var(--toastify-toast-width);
}

.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}

.Toastify__toast--stacked[data-collapsed='false'] {
  overflow: visible;
}

.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
  opacity: 0;
}

.Toastify__toast--stacked:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}

.Toastify__toast--stacked[data-pos='top'] {
  top: 0;
}

.Toastify__toast--stacked[data-pos='bot'] {
  bottom: 0;
}

.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
  transform-origin: top;
}

.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
  transform-origin: bottom;
}

.Toastify__toast--stacked:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--close-on-click {
  cursor: pointer;
}

.Toastify__toast-icon {
  margin-inline-end: 10px;
  width: 22px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

.Toastify__toast-theme--dark {
  background: #121212;
  background: var(--toastify-color-dark);
  color: #fff;
  color: var(--toastify-text-color-dark);
}

.Toastify__toast-theme--light {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--default {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: #fff;
  color: var(--toastify-text-color-info);
  background: #3498db;
  background: var(--toastify-color-info);
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: #fff;
  color: var(--toastify-text-color-success);
  background: #07bc0c;
  background: var(--toastify-color-success);
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: #fff;
  color: var(--toastify-text-color-warning);
  background: #f1c40f;
  background: var(--toastify-color-warning);
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: #fff;
  color: var(--toastify-text-color-error);
  background: hsl(6, 78%, 57%);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  background: var(--toastify-color-progress-light);
}

.Toastify__progress-bar-theme--dark {
  background: #bb86fc;
  background: var(--toastify-color-progress-dark);
}

.Toastify__progress-bar--info {
  background: #3498db;
  background: var(--toastify-color-progress-info);
}

.Toastify__progress-bar--success {
  background: #07bc0c;
  background: var(--toastify-color-progress-success);
}

.Toastify__progress-bar--warning {
  background: #f1c40f;
  background: var(--toastify-color-progress-warning);
}

.Toastify__progress-bar--error {
  background: hsl(6, 78%, 57%);
  background: var(--toastify-color-progress-error);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: rgba(255, 255, 255, 0.7);
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  z-index: 1;
}

.Toastify__toast--rtl .Toastify__close-button {
  left: 6px;
  right: auto;
  right: initial;
}

.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:hover,
.Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
  transform-origin: left;
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: auto;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: 0;
  border-bottom-left-radius: initial;
}

.Toastify__progress-bar--wrp {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: 6px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
  border-bottom-right-radius: 6px;
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--wrp[data-hidden='true'] {
  opacity: 0;
}

.Toastify__progress-bar--bg {
  opacity: 0.2;
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: #e0e0e0;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: #616161;
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes Toastify__bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.Toastify__bounce-enter--top-left,
.Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--top-right,
.Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left,
.Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--top-right,
.Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}

@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}

@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}

.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.notification-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-notification-panel {
    position: absolute;
    top: 100%;
    right: auto;
    left: -250px;
    width: 350px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.15), 0 4px 8px -2px rgba(0, 0, 0, 0.1);
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}

.header-notification-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(15px);
}

.header-notification-panel.closing {
    opacity: 0;
    visibility: visible;
    transform: translateY(10px);
}

.header-notification-panel::before {
    content: '';
    position: absolute;
    top: -6px;
    right: auto;
    left: 290px;
    width: 12px;
    height: 12px;
    background-color: white;
    border-left: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
    transform: rotate(45deg);
}

.header-notification-header {
    padding: 18px 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    border-radius: 16px 16px 0 0;
}

.header-notification-header span {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.header-notification-list {
    flex: 1 1;
    overflow-y: auto;
    padding: 12px;
    max-height: 350px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.header-notification-list::-webkit-scrollbar {
    width: 6px;
}

.header-notification-list::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.header-notification-list::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
}

.header-notification-item {
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    background-color: white;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.header-notification-item:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.1);
}

.header-notification-item:last-child {
    margin-bottom: 0;
}

.header-notification-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.header-notification-icon svg {
    width: 18px;
    height: 18px;
    color: white;
}

.header-notification-content {
    flex: 1 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 28px; /* فضا برای دکمه حذف */
}

.header-notification-message {
    font-size: 13px;
    color: #1e293b;
    line-height: 1.5;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.header-notification-time {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.header-notification-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #1E98BC;
    position: absolute;
    top: 8px;
    right: 8px;
    box-shadow: 0 0 0 2px rgba(30, 152, 188, 0.2);
}

.header-delete-button {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background-color: #fee2e2;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    transition: all 0.2s ease;
    opacity: 0;
    transform: scale(0.9);
    padding: 0;
    z-index: 10;
}

.header-notification-item:hover .header-delete-button {
    opacity: 1;
    transform: scale(1);
    background-color: #fecaca;
}

.header-delete-button:hover {
    background-color: #ef4444;
    color: white;
    transform: scale(1.05);
}

.header-delete-button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    display: block;
}

.header-mark-all-read {
    padding: 8px 16px;
    border-radius: 8px;
    background-color: #1E98BC;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.header-mark-all-read:hover {
    background-color: #1a88a9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-mark-all-read svg {
    width: 16px;
    height: 16px;
}
.user-infonav{
display: flex;
}
.user-detailsnav{
    display: flex;
    flex-direction: column;
    margin-right: 10px;
}
/* رنگ‌های آیکون */
.header-notification-icon.loan {
    background-color: #3b82f6;
    background-image: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.header-notification-icon.loan-approved {
    background-color: #22c55e;
    background-image: linear-gradient(135deg, #22c55e, #16a34a);
}

.header-notification-icon.loan-rejected {
    background-color: #ef4444;
    background-image: linear-gradient(135deg, #ef4444, #dc2626);
}

.header-notification-icon.installment {
    background-color: #6366f1;
    background-image: linear-gradient(135deg, #6366f1, #4f46e5);
}

.header-notification-icon.installment-due {
    background-color: #eab308;
    background-image: linear-gradient(135deg, #eab308, #ca8a04);
}

.header-notification-icon.installment-overdue {
    background-color: #ef4444;
    background-image: linear-gradient(135deg, #ef4444, #b91c1c);
}

.header-notification-icon.wallet {
    background-color: #0ea5e9;
    background-image: linear-gradient(135deg, #0ea5e9, #0284c7);
}

.header-notification-icon.wallet-low {
    background-color: #f97316;
    background-image: linear-gradient(135deg, #f97316, #ea580c);
}

.header-notification-icon.system {
    background-color: #64748b;
    background-image: linear-gradient(135deg, #64748b, #475569);
}

.header-view-all-notifications {
    display: block;
    text-align: center;
    padding: 14px;
    background-color: #f8fafc;
    color: #1E98BC;
    font-weight: 600;
    text-decoration: none;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 16px 16px;
    transition: all 0.2s ease;
}

.header-view-all-notifications:hover {
    background-color: #e0f2fe;
    color: #0369a1;
}

.header-no-notifications {
    padding: 40px 20px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.header-notification-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.header-notification-item.unread {
    background-color: #f0f9ff;
    border-color: #bae6fd;
}

.header-notification-item.unread::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    background-color: #1E98BC;
    border-radius: 0 14px 14px 0;
}

.mark-all-read {
    font-size: 13px;
    color: #1E98BC;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.mark-all-read:hover {
    background-color: #e0f2fe;
    color: #0369a1;
}

.user-infonav{
    display: flex;
    flex-direction: row;
    align-items: center;
    
}
.user-detailsnav{
    display: flex;
        flex-direction: column;
        margin-right: 10px;
}

@media (max-width: 768px) {
    .header-notification-panel {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        transform: translateY(-100%);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .header-notification-panel.show {
        transform: translateY(0);
    }
    
    .header-notification-panel.closing {
        transform: translateY(-100%);
    }
    
    .header-notification-panel::before {
        display: none;
    }
    
    .header-notification-list {
        max-height: 60vh;
        padding: 10px;
    }
    
    .header-notification-header {
        padding: 12px;
    }
    
    .header-notification-item {
        padding: 12px;
    }
    
    .header-view-all-notifications {
        padding: 12px;
    }
    
    /* اصلاح استایل نوبار در حالت موبایل با انیمیشن بهبود یافته */
    .rightnavbar {
        position: fixed;
        top: 0;
        right: -280px;
        width: 280px;
        height: 100vh;
        background-color: white;
        z-index: 9998;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        will-change: transform; /* بهبود عملکرد انیمیشن */
    }
    
    .rightnavbar.mobile-menu-open {
        right: 0;
    }
    
    /* انیمیشن نرم‌تر برای اورلی */
    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 9996;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: opacity, visibility; /* بهبود عملکرد انیمیشن */
        backdrop-filter: blur(2px); /* افکت محو کردن پس‌زمینه */
        -webkit-backdrop-filter: blur(2px);
    }
    
    .mobile-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* ساختار سه بخشی منو: لوگو، لیست منو و دکمه خروج */
    .rightnavbarlogo {
        flex-shrink: 0;
        padding: 15px;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .mobile-user-info {
        flex-shrink: 0;
    }
    
    .navmenu {
        flex: 1 1;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 100px;
        display: flex;
        flex-direction: column;
    }
    
    .navmenu::-webkit-scrollbar {
        width: 0;
        display: none;
    }
    
    .navmenu::-webkit-scrollbar-track {
        display: none;
    }
    
    .navmenu::-webkit-scrollbar-thumb {
        display: none;
    }
    
    /* اطمینان از نمایش کامل آیتم‌های منو */
    .rightnavbar {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    
    .rightnavbarlogo {
        flex-shrink: 0;
    }
    
    .mobile-user-info {
        flex-shrink: 0;
    }
}

@media (max-width: 425px) {
    .header-notification-panel {
        top: 56px;
    }
    
    .header-notification-panel.show {
        transform: translateY(0);
    }
    
    .header-notification-panel.closing {
        transform: translateY(-100%);
    }
    
    .header-notification-panel::before {
        display: none;
    }
    
    /* اصلاح اندازه نوبار برای موبایل‌های کوچک */
    .rightnavbar {
        width: 240px;
        right: -240px;
    }
    
    .rightnavbar.mobile-menu-open {
        right: 0;
    }
}
    
    /* کاهش اندازه فونت و پدینگ برای موبایل‌های کوچک */
    .navmenu-item {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .navmenu-item svg {
        width: 18px;
        height: 18px;
    }

/* اضافه کردن استایل برای notification-badge */
.notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #ef4444;
    color: white;
    border-radius: 12px;
    min-width: 20px;
    height: 20px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding: 0 5px;
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.3);
    border: 1.5px solid white;
}

/* استایل دکمه خروج */
.navmenu-item[style*="background-color: #fee2e2"] {
    margin-top: 20px !important;
    background-color: #fee2e2 !important;
    color: #ef4444 !important;
    border: 1px solid #fca5a5 !important;
}

.navmenu-item[style*="background-color: #fee2e2"]:hover {
    background-color: #fecaca !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* استایل آیتم‌های منو */
.navmenu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 15px;
}

.navmenu-item:hover {
    background-color: #f1f5f9;
}

.navmenu-item.active {
    background-color: #e0f2fe;
    color: #0284c7;
}

.navmenu-item svg {
    width: 20px;
    height: 20px;
} 
/* Breadcrumb Navigation Styles */
.breadcrumb {
    font-family: 'peyda', sans-serif;
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 16px;
    padding: 12px 0;
    /* background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); */
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 6px;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.breadcrumb-link {
    color: #1E98BC;
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    position: relative;
    border: none;
    background-color: transparent;
}

.breadcrumb-link:hover {
    color: #1a87a8;
    /* background-color: rgba(30, 152, 188, 0.1); */
    text-decoration: none;
}

.breadcrumb-current {
    color: #374151;
    font-weight: 600;
    padding: 4px 8px;
    /* background-color: rgba(55, 65, 81, 0.1);
    border-radius: 4px; */
}

.breadcrumb-separator {
    margin: 0 8px;
    color: #9ca3af;
    font-weight: 400;
    font-size: 0.8rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .breadcrumb {
        font-size: 0.8rem;
        padding: 10px 12px;
        margin-bottom: 12px;
    }
    
    .breadcrumb-separator {
        margin: 0 6px;
    }
    
    .breadcrumb-link,
    .breadcrumb-current {
        font-size: 0.8rem;
        padding: 3px 6px;
    }
}

@media (max-width: 480px) {
    .breadcrumb {
        font-size: 0.75rem;
        padding: 8px 10px;
        margin-bottom: 10px;
    }
    
    .breadcrumb-list {
        gap: 4px;
    }
    
    .breadcrumb-separator {
        margin: 0 4px;
    }
    
    .breadcrumb-link,
    .breadcrumb-current {
        font-size: 0.75rem;
        padding: 2px 4px;
    }
}

/* استایل‌های واحد برای صفحات Marzban و Digikomak */

/* جلوگیری از زوم در iOS برای تمام اینپوت‌ها */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  font-size: 16px !important; /* جلوگیری از زوم در iOS */
  -webkit-appearance: none !important; /* حذف استایل پیش‌فرض iOS */
  -webkit-tap-highlight-color: transparent !important; /* حذف highlight کلیک */
  -webkit-touch-callout: none !important; /* حذف callout iOS */
  -webkit-user-select: text !important; /* اجازه انتخاب متن */
  user-select: text !important;
}

/* جلوگیری از زوم در iOS برای تمام فرم‌ها */
form {
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
         text-size-adjust: 100% !important;
}

/* جلوگیری از زوم در iOS برای body */
body {
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
         text-size-adjust: 100% !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* اجازه انتخاب متن در اینپوت‌ها */
input, textarea {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* متغیرهای رنگ */
:root {
    --primary-color: #1E98BC;
    --primary-light: #22d3ee;
    --primary-dark: #1a87a8;
    --primary-gradient: linear-gradient(135deg, #1E98BC, #22d3ee);
    --primary-gradient-dark: linear-gradient(135deg, #1E98BC, #1a87a8);
    --text-primary: #1f2937;
    --text-secondary: #64748b;
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --border-color: #e2e8f0;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.15);
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 20px;
    --transition: all 0.3s ease;
    
    /* رنگ‌های اضافی برای زمان باقی‌مانده */
    --text-red: #ef4444;
    --text-orange: #f97316;
    --text-gray: #6b7280;
}

/* کلاس‌های رنگ برای زمان باقی‌مانده */
.text-red-500 {
    color: #ef4444 !important;
    color: var(--text-red) !important;
}

.text-orange-500 {
    color: #f97316 !important;
    color: var(--text-orange) !important;
}

.text-gray-600 {
    color: #6b7280 !important;
    color: var(--text-gray) !important;
}

.text-gray-400 {
    color: #9ca3af !important;
}

.font-medium {
    font-weight: 500 !important;
}

/* استایل‌های وضعیت سفارش */
.status {
    font-weight: 500;
    font-size: 0.9rem;
}

.status.payment {
    color: #f59e0b; /* نارنجی - در انتظار پرداخت */
}

.status.processing {
    color: #3b82f6; /* آبی - در حال پردازش */
}

.status.packaging {
    color: #8b5cf6; /* بنفش - در حال بسته بندی */
}

.status.shipping {
    color: #06b6d4; /* آبی روشن - ارسال شده */
}

.status.delivery {
    color: #10b981; /* سبز - تحویل داده شده */
}

.status.delivered {
    color: #10b981; /* سبز - تحویل داده شده */
}

.status.pending {
    color: #f59e0b; /* نارنجی - در انتظار پرداخت */
}

.status.paid {
    color: #3b82f6; /* آبی - پرداخت شده */
}

.status.cancelled {
    color: #ef4444; /* قرمز - لغو شده */
}

.status.completed {
    color: #10b981; /* سبز - تکمیل شده */
}

/* حل مشکل آبی شدن عناصر */
* {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

*:focus {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

*:active {
    -webkit-tap-highlight-color: transparent !important;
}

button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus {
    outline: none !important;

}

button:active,
input:active,
textarea:active,
select:active,
a:active {
    -webkit-tap-highlight-color: transparent !important;
    background-color: inherit !important;
}

/* حذف آبی شدن برای دکمه‌ها */
.btn:focus,
.btn:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    background-color: inherit !important;
    transform: none !important;
}

/* حذف آبی شدن برای تگ‌ها */
.tag:focus,
.tag:active,
.badge:focus,
.badge:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    background-color: inherit !important;
}

/* کانتینر اصلی */
.page-container,
.digikomak-container,
.marzban-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
    font-family: 'peyda', sans-serif;
    direction: rtl;
}

/* هدر صفحه */
.page-header,
.digikomak-header,
.marzban-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 40px 32px;
    background: linear-gradient(135deg, #1E98BC, #22d3ee);
    background: var(--primary-gradient);
    border-radius: 20px;
    border-radius: var(--border-radius-lg);
    color: white;
    position: relative;
    overflow: hidden;
}

/* محتوای هدر */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* دکمه‌های هدر */
.header-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.page-header::before,
.digikomak-header::before,
.marzban-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

.page-header h1,
.digikomak-header h1,
.marzban-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.page-header p,
.digikomak-header p,
.marzban-header p {
    font-size: 1.2rem;
    font-weight: 500;
    opacity: 0.9;
    position: relative;
    z-index: 1;
    margin: 0;
}

.page-header .create-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
    margin-top: 20px;
}

.page-header .create-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    box-shadow: var(--shadow-md);
}

.page-header .create-btn svg {
    width: 20px;
    height: 20px;
}

/* آمار کلی */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: 20px;
    gap: 20px;
}

/* استایل‌های کلی برای کارت‌های آمار */
.stat-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    background: linear-gradient(135deg, #ffffff 0%, var(--bg-primary) 100%);
    border-radius: 16px;
    border-radius: var(--border-radius-md);
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.3s ease;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    /* background: var(--primary-gradient); */
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    box-shadow: var(--shadow-md);
    border-color: rgba(30, 152, 188, 0.2);
}

/* استایل‌های آیکون */
.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    transition: var(--transition);
    flex-shrink: 0;
}

.stat-card:hover .stat-icon {
    transform: scale(1.1);
}

.stat-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

/* استایل‌های محتوا */
.stat-content {
    flex: 1 1;
}

.stat-content h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1f2937;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.stat-content p {
    font-size: 0.9rem;
    color: #64748b;
    color: var(--text-secondary);
    margin: 0;
}

/* استایل‌های اضافی برای بهبود ظاهر کلی */
.stat-content {
    position: relative;
    z-index: 2;
}

/* بهبود انیمیشن hover برای کارت‌ها */
.stat-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border-color: rgba(30, 152, 188, 0.3);
}

/* بهبود ظاهر SVG آیکون‌ها */
.stat-icon svg {
    color: white !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* استایل کلی برای stats-grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: 20px;
    gap: 20px;
}


/* استایل کلی برای stat-card */
.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.3s ease;
    padding: 24px 20px;
    gap: 16px;
    min-height: 160px;
    max-height: 160px;
    aspect-ratio: 1;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border-color: rgba(30, 152, 188, 0.2);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #1E98BC, #22d3ee);
    background: var(--primary-gradient);
    border-radius: 12px 12px 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover::before {
    opacity: 1;
}

/* استایل برای فیلتر فعال */
.stat-card.active-filter {
    border-color: #1E98BC !important;
    box-shadow: 0 4px 16px rgba(30, 152, 188, 0.2) !important;
    transform: translateY(-2px);
}

.stat-card.active-filter::before {
    opacity: 1 !important;
    background: #1E98BC !important;
}

.stat-card.active-filter .stat-icon {
    transform: scale(1.05);
}

/* نشانگر فیلتر فعال
.filter-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: #1E98BC;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    z-index: 3;
} */

.filter-indicator svg {
    width: 12px;
    height: 12px;
}

.stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(30, 152, 188, 0.02) 0%, rgba(34, 211, 238, 0.02) 100%);
    pointer-events: none;
}

/* استایل آیکون‌ها */
.stat-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    margin: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #1E98BC 0%, #22d3ee 100%);
    /* box-shadow: 0 4px 12px rgba(30, 152, 188, 0.25); */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-card:hover .stat-icon {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 152, 188, 0.35);
}

.stat-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 12px;
    pointer-events: none;
}

.stat-icon svg {
    width: 28px;
    height: 28px;
    color: white !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    stroke: white !important;
}

/* استایل محتوا */
.stat-content {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
}

.stat-content h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.stat-content p {
    font-size: 1.5rem;
    font-weight: 900;
    margin: 0;
    color: #1E98BC;
    text-shadow: 0 2px 4px rgba(30, 152, 188, 0.15);
    letter-spacing: -0.8px;
    line-height: 1;
}

/* مخفی کردن متن دکمه‌های header-content در موبایل */
@media (max-width: 768px) {
    .header-content .header-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .header-content .header-buttons button {
        padding: 12px !important;
        min-width: 48px !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .header-content .header-buttons button span,
    .header-content .header-buttons button .button-text,
    .header-content .header-buttons button > *:not(svg) {
        display: none !important;
    }
    
    .header-content .header-buttons button svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* استایل‌های هدر مرزبان */
.marzban-header .header-content > div:first-child {
    text-align: right !important;
}

.marzban-header .header-content > div:first-child h1 {
    text-align: right !important;
}

.marzban-header .header-content > div:first-child p {
    text-align: right !important;
}

/* دکمه سبد خرید کوچک */
.cart-button {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-width: auto !important;
    height: auto !important;
}

.cart-button svg {
    width: 16px !important;
    height: 16px !important;
}

/* استایل‌های موبایل برای کارت‌های آمار */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-gap: 24px !important;
        gap: 24px !important;
        display: grid !important;
    }
    
    .stat-card {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
        background: linear-gradient(135deg, #ffffff 0%, var(--bg-primary) 100%) !important;
        border-radius: 16px !important;
        border-radius: var(--border-radius-md) !important;
        padding: 16px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        box-shadow: var(--shadow-sm) !important;
        border: 1px solid rgba(226, 232, 240, 0.8) !important;
        transition: all 0.3s ease !important;
        transition: var(--transition) !important;
        position: relative !important;
        overflow: hidden !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        text-align: left !important;
        aspect-ratio: unset !important;
        min-height: 0 !important;
        min-height: initial !important;
        max-height: none !important;
        max-height: initial !important;
        width: 100% !important;
        height: auto !important;
    }
    
    .stat-card::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        /* background: var(--primary-gradient) !important; */
        transform: scaleX(0) !important;
        transition: transform 0.3s ease !important;
    }
    
    .stat-card:hover::before {
        transform: scaleX(1) !important;
    }
    
    .stat-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
        box-shadow: var(--shadow-md) !important;
        border-color: rgba(30, 152, 188, 0.2) !important;
    }
    
    .stat-icon {
        width: 50px !important;
        height: 50px !important;
        border-radius: 8px !important;
        border-radius: var(--border-radius-sm) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
        transition: var(--transition) !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    .stat-card:hover .stat-icon {
        transform: scale(1.1) !important;
    }
    
    .stat-icon svg {
        width: 20px !important;
        height: 20px !important;
        color: white !important;
    }
    
    .stat-content {
        flex: 1 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .stat-content h3 {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        color: var(--text-primary) !important;
        margin-bottom: 8px !important;
        text-align: left !important;
        display: block !important;
        line-height: 1.2 !important;
    }
    
    .stat-content p {
        font-size: 0.9rem !important;
        color: #64748b !important;
        color: var(--text-secondary) !important;
        margin: 0 !important;
        text-align: left !important;
        font-weight: 400 !important;
        display: block !important;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-gap: 16px !important;
        gap: 16px !important;
        display: grid !important;
    }
    
    .stat-card {
        padding: 12px !important;
        gap: 8px !important;
    }
    
    .stat-icon {
        width: 28px !important;
        height: 28px !important;
    }
    
    .stat-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .stat-content h3 {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }
    
    .stat-content p {
        display: none !important;
    }
}

/* استایل‌های تبلت کوچک برای کارت‌های آمار */
@media (min-width: 481px) and (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        grid-gap: 10px !important;
        gap: 10px !important;
        display: grid !important;
    }
    
    .stat-card {
        padding: 18px 14px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        text-align: center !important;
        aspect-ratio: 1 !important;
        min-height: 90px !important;
        max-height: 90px !important;
        border-radius: 16px !important;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08) !important;
        background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
        border: 2px solid rgba(226, 232, 240, 0.8) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .stat-icon {
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        border-radius: 10px !important;
        /* background: linear-gradient(135deg, #1E98BC 0%, #22d3ee 100%) !important;
        box-shadow: 0 3px 10px rgba(30, 152, 188, 0.25) !important; */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    .stat-content h3 {
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        color: #64748b !important;
        margin: 0 !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }
    
    .stat-content p {
        font-size: 1.1rem !important;
        text-align: center !important;
        font-weight: 800 !important;
        margin: 0 !important;
        color: #1E98BC !important;
        text-shadow: 0 1px 3px rgba(30, 152, 188, 0.15) !important;
        letter-spacing: -0.5px !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* استایل‌های موبایل برای کارت‌های آمار */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-gap: 16px !important;
        gap: 16px !important;
        display: grid !important;
    }
    
    .stat-card {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
        background: linear-gradient(135deg, #ffffff 0%, var(--bg-primary) 100%) !important;
        border-radius: 16px !important;
        border-radius: var(--border-radius-md) !important;
        padding: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        box-shadow: var(--shadow-sm) !important;
        border: 1px solid rgba(226, 232, 240, 0.8) !important;
        transition: all 0.3s ease !important;
        transition: var(--transition) !important;
        position: relative !important;
        overflow: hidden !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        text-align: left !important;
        aspect-ratio: unset !important;
        min-height: 0 !important;
        min-height: initial !important;
        max-height: none !important;
        max-height: initial !important;
        width: 100% !important;
        height: auto !important;
    }
    
    .stat-card::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        /* background: var(--primary-gradient) !important; */
        transform: scaleX(0) !important;
        transition: transform 0.3s ease !important;
    }
    
    .stat-card:hover::before {
        transform: scaleX(1) !important;
    }
    
    .stat-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
        box-shadow: var(--shadow-md) !important;
        border-color: rgba(30, 152, 188, 0.2) !important;
    }
    
    .stat-icon {
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
        border-radius: var(--border-radius-sm) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
        transition: var(--transition) !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    .stat-card:hover .stat-icon {
        transform: scale(1.1) !important;
    }
    
    .stat-icon svg {
        width: 18px !important;
        height: 18px !important;
        color: white !important;
    }
    
    .stat-content {
        flex: 1 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .stat-content h3 {
        font-size: 10px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        color: var(--text-primary) !important;
        margin-bottom: 4px !important;
        text-align: left !important;
        display: block !important;
        line-height: 1.2 !important;
    }
    
    .stat-content p {
        font-size: 0.9rem !important;
        color: #64748b !important;
        color: var(--text-secondary) !important;
        margin: 0 !important;
        text-align: left !important;
        font-weight: 400 !important;
        display: block !important;
    }
}

@media (max-width: 480px) {
    .header-content .header-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .header-content .header-buttons button {
        padding: 8px !important;
        min-width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
    }
    
    .header-content .header-buttons button span,
    .header-content .header-buttons button .button-text,
    .header-content .header-buttons button > *:not(svg) {
        display: none !important;
    }
    
    .header-content .header-buttons button svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-gap: 8px !important;
        gap: 8px !important;
        display: grid !important;
        padding: 0 4px !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        justify-content: center !important;
        place-items: center !important;
    }
    
    /* مخفی کردن کارت چهارم در موبایل */
    .stat-card:nth-child(4) {
        display: none !important;
    }
    
    .stat-card {
        padding: 14px 10px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
        aspect-ratio: 1 !important; /* مربع‌شکل کردن کارت */
        min-height: 80px !important;
        max-height: 80px !important;
        border-radius: 16px !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;
        background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
        border: 2px solid rgba(226, 232, 240, 0.8) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .stat-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(30, 152, 188, 0.02) 0%, rgba(34, 211, 238, 0.02) 100%);
        pointer-events: none;
    }
    
    .stat-icon {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        border-radius: 8px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    /* رنگ‌بندی آیکون‌ها مطابق با داشبورد */
    .stat-card:nth-child(1) .stat-icon {
        background: linear-gradient(135deg, #10b981, #34d399) !important;
    }
    
    .stat-card:nth-child(2) .stat-icon {
        background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
    }
    
    .stat-card:nth-child(3) .stat-icon {
        background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
    }
    
    .stat-card:hover .stat-icon {
        transform: scale(1.08) translateY(-2px) !important;
    }
    
    
    .stat-icon::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
        border-radius: 8px;
        pointer-events: none;
    }
    
    .stat-icon svg {
        width: 16px !important;
        height: 16px !important;
        color: white !important;
        stroke: white !important;
    }
    
    .stat-content {
        text-align: center !important;
        width: 100% !important;
    }
    
    .stat-content h3 {
        display: none !important; /* حذف متن در موبایل */
    }
    
    .stat-content p {
        font-size: 1.1rem !important;
        text-align: center !important;
        font-weight: 900 !important;
        margin: 0 !important;
        color: #1E98BC !important;
        text-shadow: 0 2px 4px rgba(30, 152, 188, 0.15) !important;
        letter-spacing: -0.8px !important;
        position: relative !important;
        z-index: 2 !important;
        line-height: 1 !important;
    }
    
    .main-number {
        font-size: 1rem !important;
    }
}

@media (max-width: 360px) {
    .header-content .header-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 4px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .header-content .header-buttons button {
        padding: 8px !important;
        min-width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .header-content .header-buttons button span,
    .header-content .header-buttons button .button-text,
    .header-content .header-buttons button > *:not(svg) {
        display: none !important;
    }
    
    .header-content .header-buttons button svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-gap: 8px !important;
        gap: 8px !important;
        display: grid !important;
        padding: 0 4px !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        justify-content: center !important;
        place-items: center !important;
    }
    
    /* مخفی کردن کارت چهارم در موبایل */
    .stat-card:nth-child(4) {
        display: none !important;
    }
    
    .stat-card {
        padding: 14px 10px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
        aspect-ratio: 1 !important; /* مربع‌شکل کردن کارت */
        min-height: 80px !important;
        max-height: 80px !important;
        border-radius: 16px !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;
        background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
        border: 2px solid rgba(226, 232, 240, 0.8) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .stat-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(30, 152, 188, 0.02) 0%, rgba(34, 211, 238, 0.02) 100%);
        pointer-events: none;
    }
    
    .stat-icon {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        border-radius: 8px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    /* رنگ‌بندی آیکون‌ها مطابق با داشبورد */
    .stat-card:nth-child(1) .stat-icon {
        background: linear-gradient(135deg, #10b981, #34d399) !important;
    }
    
    .stat-card:nth-child(2) .stat-icon {
        background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
    }
    
    .stat-card:nth-child(3) .stat-icon {
        background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
    }
    
    .stat-card:hover .stat-icon {
        transform: scale(1.08) translateY(-2px) !important;
    }
    
    
    .stat-icon::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
        border-radius: 8px;
        pointer-events: none;
    }
    
    .stat-icon svg {
        width: 16px !important;
        height: 16px !important;
        color: white !important;
        stroke: white !important;
    }
    
    .stat-content {
        text-align: center !important;
        width: 100% !important;
    }
    
    .stat-content h3 {
        display: none !important; /* حذف متن در موبایل */
    }
    
    .stat-content p {
        font-size: 1.1rem !important;
        text-align: center !important;
        font-weight: 900 !important;
        margin: 0 !important;
        color: #1E98BC !important;
        text-shadow: 0 2px 4px rgba(30, 152, 188, 0.15) !important;
        letter-spacing: -0.8px !important;
        position: relative !important;
        z-index: 2 !important;
        line-height: 1 !important;
    }
    
    .main-number {
        font-size: 0.9rem !important;
    }
}

.stat-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    background: linear-gradient(135deg, #ffffff 0%, var(--bg-primary) 100%);
    border-radius: 16px;
    border-radius: var(--border-radius-md);
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.3s ease;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #1E98BC, #22d3ee);
    background: var(--primary-gradient);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    display: none;
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    box-shadow: var(--shadow-md);
    border-color: rgba(30, 152, 188, 0.2);
}

.stat-card.clickable {
    cursor: pointer;
    transition: all 0.3s ease;
}

.stat-card.clickable:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    box-shadow: var(--shadow-md);
    border-color: rgba(30, 152, 188, 0.3);
}

.stat-card.clickable:active {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-sm);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    transition: var(--transition);
    flex-shrink: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* رنگ‌بندی آیکون‌ها مطابق با داشبورد */
.stat-card:nth-child(1) .stat-icon {
    background: linear-gradient(135deg, #10b981, #34d399) !important;
}

.stat-card:nth-child(2) .stat-icon {
    background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
}

.stat-card:nth-child(3) .stat-icon {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
}

.stat-card:hover .stat-icon {
    transform: scale(1.1);
}


.stat-icon svg {
    width: 24px;
    height: 24px;
    color: white !important;
    stroke: white !important;
}

.stat-content {
    flex: 1 1;
    text-align: right;
}

.stat-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2937;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-align: center;
}

.stat-content p {
    font-size: 0.9rem;
    color: #64748b;
    color: var(--text-secondary);
    margin: 0;
    text-align: center;
    font-weight: 400;
}

.stat-numbers {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
    justify-content: flex-start;
}

.main-number {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1E98BC;
    color: var(--primary-color);
}

.sub-number {
    font-size: 0.9rem;
    color: #64748b;
    color: var(--text-secondary);
}

.stat-detail {
    font-size: 0.8rem;
    color: #64748b;
    color: var(--text-secondary);
    text-align: right;
}

.refresh-btn {
    background: linear-gradient(135deg, #1E98BC, #22d3ee);
    background: var(--primary-gradient);
    border: none;
    border-radius: 8px;
    border-radius: var(--border-radius-sm);
    color: white;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
}

.refresh-btn:hover {
    background: linear-gradient(135deg, #1E98BC, #1a87a8);
    background: var(--primary-gradient-dark);
    transform: translateY(-1px);
}

.refresh-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* فرم‌ها */
.form-container {
    /* background: var(--bg-secondary);  */
    /* border-radius: var(--border-radius-lg); */
    /* padding: 32px; */
    /* box-shadow: var(--shadow-sm); */
    /* border: 1px solid var(--border-color); */
    margin-bottom: 30px;
}

/* استایل کلی برای تمام select box ها - آیکون فلش در سمت چپ */
select {
    direction: rtl !important;
    text-align: right !important;
    padding-left: 40px !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e") !important;
    background-position: left 12px center !important;
    background-repeat: no-repeat !important;
    background-size: 16px !important;
    /* حذف فلش پیش‌فرض مرورگر */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

select:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%23374151%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e") !important;
}

select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%231E98BC%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e") !important;
}

select:disabled {
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%239ca3af%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e") !important;
}

/* کانتینر جدول */
.table-container {
    border-radius: 16px;
    border-radius: var(--border-radius-md);
    /* padding: 24px; */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

/* هدر جدول */
.table-header {
    border-radius: 16px;
    border-radius: var(--border-radius-md);
}

.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    font-weight: 600;
    color: #1f2937;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    transition: all 0.3s ease;
    transition: var(--transition);
    background: #f8fafc;
    background: var(--bg-primary);
}

.form-input:focus {
    outline: none;
    border-color: #1E98BC;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.2);
    background: white;
}

.form-input::placeholder {
    color: #64748b;
    color: var(--text-secondary);
    opacity: 0.7;
}

.submit-btn {
    background: linear-gradient(135deg, #1E98BC, #22d3ee);
    background: var(--primary-gradient);
    border: none;
    border-radius: 8px;
    border-radius: var(--border-radius-sm);
    color: white;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    width: 100%;
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.submit-btn:hover::before {
    left: 100%;
}

.submit-btn:hover {
    background: linear-gradient(135deg, #1E98BC, #1a87a8);
    background: var(--primary-gradient-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    box-shadow: var(--shadow-md);
}

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* هشدارها */
.alert {
    padding: 16px;
    border-radius: 8px;
    border-radius: var(--border-radius-sm);
    margin-bottom: 20px;
    border: 1px solid;
    font-weight: 500;
}

.alert-warning {
    background-color: #fef3c7;
    border-color: #fbbf24;
    color: #d97706;
}

.alert-error {
    background-color: #fee2e2;
    border-color: #f87171;
    color: #dc2626;
}

.alert-success {
    background-color: #dcfce7;
    border-color: #4ade80;
    color: #166534;
}

.alert-info {
    background-color: #dbeafe;
    border-color: #60a5fa;
    color: #2563eb;
}

/* جداول - حذف شده چون DataTable خودش دارد */

/* دکمه‌های عملیات */
.action-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--transition);
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-btn.primary {
    background: #1E98BC;
    background: var(--primary-color);
    color: white;
}

.action-btn.primary:hover {
    background: #1a87a8;
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.action-btn.secondary {
    background: #f8fafc;
    background: var(--bg-primary);
    color: #1f2937;
    color: var(--text-primary);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--border-color);
}

.action-btn.secondary:hover {
    background: #e2e8f0;
    background: var(--border-color);
}

.action-btn.danger {
    background: #ef4444;
    color: white;
}

.action-btn.danger:hover {
    background: #dc2626;
}

/* بج‌های وضعیت */
.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    display: inline-block;
}

.status-badge.secondary {
    background-color: #6b7280;
    color: white;
}

.status-badge.info {
    background-color: #3b82f6;
    color: white;
}

/* استایل‌های ویژه فاکتورها */
.invoice-number {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #1E98BC;
    color: var(--primary-color);
    font-size: 0.9rem;
}

.invoice-title {
    font-weight: 500;
    color: #1f2937;
    color: var(--text-primary);
}

.amount {
    font-weight: 600;
    font-size: 0.95rem;
}

/* رنگ‌های مبالغ بر اساس نوع فاکتور */
.amount.positive {
    color: #059669; /* سبز برای فاکتور فروش (درآمد) */
}

.amount.negative {
    color: #dc2626; /* قرمز برای فاکتور خرید (هزینه) */
}

.date {
    color: #64748b;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* استایل‌های تبلت کوچک برای کارت‌های آمار */
@media (min-width: 481px) and (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        grid-gap: 10px !important;
        gap: 10px !important;
        display: grid !important;
        /* padding: 0 10px !important; */
        margin: 0 auto !important;
        max-width: 100% !important;
        justify-content: center !important;
        place-items: center !important;
    }
    
    .stat-card {
        padding: 18px 14px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        text-align: center !important;
        aspect-ratio: 1 !important;
        min-height: 90px !important;
        max-height: 90px !important;
        border-radius: 16px !important;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08) !important;
        background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
        border: 2px solid rgba(226, 232, 240, 0.8) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .stat-icon {
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        border-radius: 10px !important;
        /* background: linear-gradient(135deg, #1E98BC 0%, #22d3ee 100%) !important;
        box-shadow: 0 3px 10px rgba(30, 152, 188, 0.25) !important; */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    .stat-content h3 {
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        color: #64748b !important;
        margin: 0 !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }
    
    .stat-content p {
        font-size: 1.1rem !important;
        text-align: center !important;
        font-weight: 800 !important;
        margin: 0 !important;
        color: #1E98BC !important;
        text-shadow: 0 1px 3px rgba(30, 152, 188, 0.15) !important;
        letter-spacing: -0.5px !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* استایل‌های ریسپانسیو برای فاکتورها */
@media (max-width: 768px) {
    .invoice-number {
        font-size: 0.8rem;
    }
    
    .invoice-title {
        font-size: 0.9rem;
    }
    
    .amount {
        font-size: 0.9rem;
        font-weight: 700;
        color: #059669;
    }
    
    .date {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .invoice-number {
        font-size: 0.75rem;
    }
    
    .invoice-title {
        font-size: 0.85rem;
    }
    
    .amount {
        font-size: 0.85rem;
    }
    
    .date {
        font-size: 0.7rem;
    }
}

/* استایل‌های ریسپانسیو برای ادمین داشبورد */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-gap: 8px !important;
        gap: 8px !important;
        display: grid !important;
    }
    
    /* مخفی کردن کارت چهارم در موبایل */
    .stat-card:nth-child(4) {
        display: none !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        grid-gap: 8px !important;
        gap: 8px !important;
        display: grid !important;
    }
    
    .stat-card {
        padding: 20px 16px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        text-align: center !important;
        aspect-ratio: 1 !important; /* مربع‌شکل کردن کارت */
        min-height: 100px !important;
        max-height: 100px !important;
        border-radius: 20px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
        border: 2px solid rgba(226, 232, 240, 0.8) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .stat-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(30, 152, 188, 0.02) 0%, rgba(34, 211, 238, 0.02) 100%);
        pointer-events: none;
    }
    
    .stat-icon {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        border-radius: 8px !important;
        border-radius: var(--border-radius-sm) !important;

        /* background: linear-gradient(135deg, #1E98BC 0%, #22d3ee 100%) !important;
        box-shadow: 0 4px 12px rgba(30, 152, 188, 0.25) !important; */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    .stat-card:hover .stat-icon {
        transform: scale(1.08) translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(30, 152, 188, 0.35) !important;
    }
    
    .stat-icon::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
        border-radius: 12px;
        pointer-events: none;
    }
    
    .stat-icon svg {
        width: 20px !important;
        height: 20px !important;
        color: white !important;
        stroke: white !important;
    }
    
    .stat-content {
        text-align: center !important;
        width: 100% !important;
    }
    
    .stat-content h3 {
        display: none !important; /* حذف متن در موبایل */
    }
    
    .stat-content p {
        font-size: 1.3rem !important;
        text-align: center !important;
        font-weight: 900 !important;
        margin: 0 !important;
        color: #1E98BC !important;
        text-shadow: 0 2px 4px rgba(30, 152, 188, 0.15) !important;
        letter-spacing: -0.8px !important;
        position: relative !important;
        z-index: 2 !important;
        line-height: 1 !important;
    }
    
    .main-number {
        font-size: 1.1rem ;
    }
}

@media (max-width: 480px) {
    .header-content .header-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .header-content .header-buttons button {
        padding: 8px !important;
        min-width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
    }
    
    .header-content .header-buttons button span,
    .header-content .header-buttons button .button-text,
    .header-content .header-buttons button > *:not(svg) {
        display: none !important;
    }
    
    .header-content .header-buttons button svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-gap: 8px !important;
        gap: 8px !important;
        display: grid !important;
        padding: 0 4px !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        justify-content: center !important;
        place-items: center !important;
    }
    
    /* مخفی کردن کارت چهارم در موبایل */
    .stat-card:nth-child(4) {
        display: none !important;
    }
    
    .stat-card {
        padding: 14px 10px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
        aspect-ratio: 1 !important; /* مربع‌شکل کردن کارت */
        min-height: 80px !important;
        max-height: 80px !important;
        border-radius: 16px !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;
        background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
        border: 2px solid rgba(226, 232, 240, 0.8) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .stat-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(30, 152, 188, 0.02) 0%, rgba(34, 211, 238, 0.02) 100%);
        pointer-events: none;
    }
    
    .stat-icon {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        border-radius: 8px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    /* رنگ‌بندی آیکون‌ها مطابق با داشبورد */
    .stat-card:nth-child(1) .stat-icon {
        background: linear-gradient(135deg, #10b981, #34d399) !important;
    }
    
    .stat-card:nth-child(2) .stat-icon {
        background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
    }
    
    .stat-card:nth-child(3) .stat-icon {
        background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
    }
    
    .stat-card:hover .stat-icon {
        transform: scale(1.08) translateY(-2px) !important;
    }
    
    
    .stat-icon::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
        border-radius: 8px;
        pointer-events: none;
    }
    
    .stat-icon svg {
        width: 16px !important;
        height: 16px !important;
        color: white !important;
        stroke: white !important;
    }
    
    .stat-content {
        text-align: center !important;
        width: 100% !important;
    }
    
    .stat-content h3 {
        display: none !important; /* حذف متن در موبایل */
    }
    
    .stat-content p {
        font-size: 1.1rem !important;
        text-align: center !important;
        font-weight: 900 !important;
        margin: 0 !important;
        color: #1E98BC !important;
        text-shadow: 0 2px 4px rgba(30, 152, 188, 0.15) !important;
        letter-spacing: -0.8px !important;
        position: relative !important;
        z-index: 2 !important;
        line-height: 1 !important;
    }
    
    .main-number {
        font-size: 1rem !important;
    }
}

/* استایل‌های ریسپانسیو برای AdminTabs */
@media (max-width: 768px) {
    .admin-tabs {
        flex-direction: row !important;
        gap: 6px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding-bottom: 16px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
    }
    
    .admin-tabs::-webkit-scrollbar {
        display: none !important;
    }
    
    .admin-tabs button {
        border-radius: 8px 8px 0 0 !important;
        padding: 8px 16px !important;
        font-size: 12px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        min-width: 120px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 480px) {
    .admin-tabs {
        gap: 4px !important;
        padding: 0 8px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
    }
    
    .admin-tabs::-webkit-scrollbar {
        display: none !important;
    }
    
    .admin-tabs button {
        padding: 6px 12px !important;
        font-size: 11px !important;
        flex-shrink: 0 !important;
        min-width: 100px !important;
        white-space: nowrap !important;
    }
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name {
    font-weight: 500;
    color: #1f2937;
    color: var(--text-primary);
}

.user-phone {
    font-size: 0.8rem;
    color: #64748b;
    color: var(--text-secondary);
}

.status-badge.active {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.status-badge.inactive {
    background-color: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

.status-badge.pending {
    background-color: #fef3c7;
    color: #d97706;
    border: 1px solid #fde68a;
}

.status-badge.warning {
    background-color: #fef3c7;
    color: #d97706;
    border: 1px solid #fde68a;
}

.status-badge.expired {
    background-color: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

/* استایل‌های وضعیت فاکتورها */
.status.paid {
    background-color: transparent;
    color: #059669;
    border: none;
    font-weight: 600;
}

.status.pending {
    background-color: transparent;
    color: #d97706;
    border: none;
    font-weight: 600;
}

.status.failed {
    background-color: transparent;
    color: #dc2626;
    border: none;
    font-weight: 600;
}

.status.cancelled {
    background-color: transparent;
    color: #6b7280;
    border: none;
    font-weight: 600;
}

/* حالت‌های خالی */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: #64748b;
    color: var(--text-secondary);
}

.empty-state svg {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h3 {
    font-size: 1.25rem;
    margin-bottom: 8px;
    color: #1f2937;
    color: var(--text-primary);
}

.empty-state p {
    margin: 0;
    font-size: 0.95rem;
}

/* لودینگ */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #64748b;
    color: var(--text-secondary);
}

.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 0;
    font-size: 14px;
    color: #64748b;
    font-family: 'peyda', sans-serif;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top: 2px solid #1E98BC;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* استایل‌های کیف پول */
.wallet-info {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.wallet-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.balance-display {
    text-align: center;
    position: relative;
    z-index: 1;
    flex: 1 1;
    min-width: 280px;
    max-width: 100%;
}

.balance-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.balance-header > div:first-child {
    display: flex;
    align-items: center;
    gap: 16px;
}

.balance-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.balance-icon svg {
    width: 24px;
    height: 24px;
}

.balance-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.02em;
}

.refresh-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 6px;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.refresh-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.25) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.refresh-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.balance-amount {
       display: flex;
           justify-content: center;
           align-items: center;
           font-size: 2rem;
           font-weight: 800;
           color: white;
           margin-bottom: 16px;
           text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
           line-height: 1.1;
           gap: 5px;
}

.balance-amount .amount {
    margin-right: 12px;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.balance-amount .currency {
    font-size: 1.4rem;
    opacity: 0.85;
    font-weight: 600;
}

.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 0;
    font-size: 14px;
    color: #64748b;
    font-family: 'peyda', sans-serif;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top: 2px solid #1E98BC;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

.error-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fecaca;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 16px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.action-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 8px;
}

.action-btn {
    padding: 14px 24px;
    border: none;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    justify-content: center;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.action-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.action-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.action-btn:hover svg {
    transform: scale(1.1);
}

.action-btn.primary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.action-btn.primary:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.3) 100%);
    border-color: rgba(255, 255, 255, 0.5);
}

.action-btn.secondary {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    color: #1E98BC;
    color: var(--primary-color);
    border: 2px solid rgba(30, 152, 188, 0.2);
    box-shadow: 0 8px 24px rgba(30, 152, 188, 0.1);
}

.action-btn.secondary:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: rgba(30, 152, 188, 0.3);
    color: #1a87a8;
    color: var(--primary-dark);
}

/* منوی اصلی */
.main-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-gap: 20px;
    gap: 20px;
    margin-top: 32px;
}

.menu-card {
    background: #ffffff;
    background: var(--bg-secondary);
    border-radius: 16px;
    border-radius: var(--border-radius-md);
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-sm);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    transition: var(--transition);
    cursor: pointer;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.menu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    box-shadow: var(--shadow-md);
    border-color: rgba(30, 152, 188, 0.2);
}

.menu-icon {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border-radius: var(--border-radius-sm);
    background: linear-gradient(135deg, #1E98BC, #22d3ee);
    background: var(--primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
    transition: var(--transition);
}

.menu-card:hover .menu-icon {
    transform: scale(1.1);
}

.menu-icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

.menu-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.menu-card p {
    font-size: 0.85rem;
    color: #64748b;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* دکمه‌های عملیات */
.action-icons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.action-icon {
    width: 20px;
    height: 20px;
    color: #1E98BC;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--transition);
}

.action-icon:hover {
    color: #1a87a8;
    color: var(--primary-dark);
    transform: scale(1.1);
}

.action-icon.danger {
    color: #ef4444;
}

.action-icon.danger:hover {
    color: #dc2626;
}

.action-icon.success {
    color: #10b981;
}

.action-icon.success:hover {
    color: #059669;
}

/* نتایج جستجو - حذف شده چون DataTable خودش دارد */
/* پاگینیشن - حذف شده چون DataTable خودش دارد */

/* دکمه‌های پرداخت */
.pay-button {
    padding: 2px 10px;
    border: none;
    border-radius: 8px;
    border-radius: var(--border-radius-sm);
    background: linear-gradient(135deg, #1E98BC, #22d3ee);
    background: var(--primary-gradient);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--transition);
    font-size: 0.8rem;
}

.pay-button:hover {
    background: linear-gradient(135deg, #1E98BC, #1a87a8);
    background: var(--primary-gradient-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    box-shadow: var(--shadow-md);
}

.pay-button:disabled,
.pay-button.loading {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .page-container,
    .digikomak-container,
    .marzban-container {
        padding: 5px;
    }
    
    /* دکمه‌های فاکتور در موبایل */
    .flex.space-x-4.space-x-reverse {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .flex.space-x-4.space-x-reverse button {
        max-width: 100% !important;
        width: 100% !important;
        flex: none !important;
    }
    
    .main-menu {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .menu-card {
        padding: 20px;
    }
    
    .menu-icon {
        width: 50px;
        height: 50px;
    }
    
    .menu-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .wallet-info {
        padding: 20px;
        margin-top: 16px;
        border-radius: 16px;
        flex-direction: column;
        gap: 16px;
    }
    
    .balance-display {
        min-width: 0;
        min-width: initial;
        max-width: 100%;
        padding: 24px;
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        text-align: center;
    }
    
    .balance-header {
        flex-direction: row;
        gap: 16px;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
    
    .balance-header > div:first-child {
        width: auto;
        justify-content: center;
        gap: 16px;
    }
    
    .refresh-btn {
        align-self: center;
        padding: 12px 20px;
        font-size: 1rem;
        min-width: 120px;
    }
    
    .balance-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
    }
    
    .balance-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .balance-header h3 {
        font-size: 1.3rem;
        font-weight: 700;
        text-align: center;
    }
    
    .balance-amount {
        font-size: 2.4rem;
        margin-bottom: 20px;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 8px;
    }
    
    .balance-amount .amount {
        font-size: 2.4rem;
        font-weight: 800;
        color: #ffffff;
    }
    
    .balance-amount .currency {
        font-size: 1.6rem;
        opacity: 0.9;
        font-weight: 600;
    }
    
    .action-buttons {
        flex-direction: column;
        gap: 12px;
        margin-top: 16px;
    }
    
    .action-btn {
        width: 100%;
        min-width: 0;
        min-width: initial;
        padding: 16px 24px;
        font-size: 1.1rem;
    }
    
    .page-header,
    .digikomak-header,
    .marzban-header {
        padding: 24px 20px;
        margin-bottom: 24px;
        flex-wrap: wrap !important;
        justify-content: center !important;
        justify-content: center !important;
    }
    
    .header-content {
        flex-direction: column !important;
        gap: 20px;
        align-items: center;
        text-align: center;
    }
    
    .header-buttons {
        flex-direction: column !important;
        gap: 12px;
        align-items: center;
        width: 100%;
    }
    
    .page-header h1,
    .digikomak-header h1,
    .marzban-header h1 {
        font-size: 2rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-gap: 8px !important;
        gap: 8px !important;
        display: grid !important;
    }
    
    .stat-card {
        padding: 20px 16px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        text-align: center !important;
        aspect-ratio: 1 !important; /* مربع‌شکل کردن کارت */
        min-height: 100px !important;
        max-height: 100px !important;
        border-radius: 20px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
        border: 2px solid rgba(226, 232, 240, 0.8) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .stat-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(30, 152, 188, 0.02) 0%, rgba(34, 211, 238, 0.02) 100%);
        pointer-events: none;
    }
    
    .stat-icon {
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .stat-icon svg {
        width: 20px !important;
        height: 20px !important;
        color: white !important;
        stroke: white !important;
    }
    
    .stat-content {
        text-align: center !important;
        width: 100% !important;
    }
    
    .stat-content h3 {
        display: none !important; /* حذف متن در موبایل */
    }
    
    .stat-content p {
        font-size: 1.3rem !important;
        text-align: center !important;
        font-weight: 900 !important;
        margin: 0 !important;
        color: black !important;
        text-shadow: 0 2px 4px rgba(30, 152, 188, 0.15) !important;
        letter-spacing: -0.8px !important;
        position: relative !important;
        z-index: 2 !important;
        line-height: 1 !important;
    }
    
    .main-number {
        font-size: 1.1rem ;
    }
    
 
}

@media (max-width: 480px) {
    .page-container,
    .digikomak-container,
    .marzban-container {
        padding: 0px;
    }
    
    .page-header,
    .digikomak-header,
    .marzban-header {
        padding: 20px 16px;
    }
    
    .header-content {
        gap: 16px;
        flex-direction: column !important;
        align-items: center;
        text-align: center;
    }
    
    .header-buttons {
        flex-direction: column !important;
        gap: 10px;
        align-items: center;
        width: 100%;
    }
    
    .page-header h1,
    .digikomak-header h1,
    .marzban-header h1 {
        font-size: 1.75rem;
    }
    
    .page-header p,
    .digikomak-header p,
    .marzban-header p {
        font-size: 1rem;
    }
    
    .wallet-info {
        padding: 16px;
        gap: 12px;
        margin-top: 12px;
    }
    
    .balance-display {
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }
    
    .balance-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        margin-bottom: 20px;
    }
    
    .balance-header > div:first-child {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .balance-icon {
        width: 48px;
        height: 48px;
        border-radius: 10px;
    }
    
    .balance-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .balance-header h3 {
        font-size: 1.1rem;
        font-weight: 600;
        text-align: center;
    }
    
    .balance-amount {
        font-size: 1.8rem;
        margin-bottom: 16px;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    
    .balance-amount .amount {
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.2;
    }
    
    .balance-amount .currency {
        font-size: 1.1rem;
        opacity: 0.85;
    }
    
    .refresh-btn {
        width: 100%;
        max-width: 200px;
        padding: 10px 16px;
        font-size: 0.9rem;
    }
    
    .action-btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
    
    .stat-card {
        padding: 14px 10px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
        aspect-ratio: 1 !important; /* مربع‌شکل کردن کارت */
        min-height: 80px !important;
        max-height: 80px !important;
        border-radius: 16px !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;
        background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
        border: 2px solid rgba(226, 232, 240, 0.8) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .stat-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(30, 152, 188, 0.02) 0%, rgba(34, 211, 238, 0.02) 100%);
        pointer-events: none;
    }
    
    .stat-icon {
        width: 35px !important;
        height: 35px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .stat-icon svg {
        width: 16px !important;
        height: 16px !important;
        color: white !important;
        stroke: white !important;
    }
    
    .stat-content {
        text-align: center !important;
        width: 100% !important;
    }
    
    .stat-content h3 {
        display: none !important; /* حذف متن در موبایل */
    }
    
    .stat-content p {
        font-size: 1.1rem !important;
        text-align: center !important;
        font-weight: 900 !important;
        margin: 0 !important;
        color: black !important;
        text-shadow: 0 2px 4px rgba(30, 152, 188, 0.15) !important;
        letter-spacing: -0.8px !important;
        position: relative !important;
        z-index: 2 !important;
        line-height: 1 !important;
    }
    
    .form-container {
        padding: 0px;
    }
    
    /* بهبود نمایش کارت‌های خدمات در موبایل */
    .form-container > div:last-child {
        gap: 14px !important;
    }
    
    /* بهبود نمایش اطلاعات کاربر در موبایل */
    .form-container > div > div {
        flex-direction: column !important;
        /* align-items: flex-start !important; */
        /* gap: 8px !important; */
        padding: 12px 0px !important;
    }
    
    .form-container > div > div > span:first-child {
        font-size: 0.9rem;
    }
    
    .form-container > div > div > span:last-child {
        font-size: 1rem;
        word-break: break-word;
    }
}

@media (max-width: 360px) {

    
    .page-header,
    .digikomak-header,
    .marzban-header {
        padding: 16px 12px;
        margin: 24px 5px 30px 5px;
    }

    .page-header{
        margin: 0px 10px 24px 10px;
    }
    
    .page-header h1,
    .digikomak-header h1,
    .marzban-header h1 {
        font-size: 1.5rem;
    }
    
    .page-header p,
    .digikomak-header p,
    .marzban-header p {
        font-size: 0.9rem;
    }
    
    .wallet-info {
        padding: 12px;
        gap: 10px;
        margin-top: 8px;
    }
    
    .balance-display {
        padding: 16px;
        border-radius: 10px;
    }
    
    .balance-header {
        gap: 10px;
        margin-bottom: 16px;
    }
    
    .balance-header > div:first-child {
        gap: 10px;
    }
    
    .balance-icon {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }
    
    .balance-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .balance-header h3 {
        font-size: 1rem;
    }
    
    .balance-amount {
        font-size: 1.6rem;
        margin-bottom: 12px;
    }
    
    .balance-amount .amount {
        font-size: 1.6rem;
    }
    
    .balance-amount .currency {
        font-size: 1rem;
    }
    
    .refresh-btn {
        max-width: 180px;
        padding: 8px 14px;
        font-size: 0.85rem;
    }
    
    .action-btn {
        padding: 10px 16px;
        font-size: 0.85rem;
    }
    
    .stat-card {
        padding: 14px 10px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
        aspect-ratio: 1 !important; /* مربع‌شکل کردن کارت */
        min-height: 80px !important;
        max-height: 80px !important;
        border-radius: 16px !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;
        background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
        border: 2px solid rgba(226, 232, 240, 0.8) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .stat-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(30, 152, 188, 0.02) 0%, rgba(34, 211, 238, 0.02) 100%);
        pointer-events: none;
    }
    
    .stat-icon {
        width: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .stat-icon svg {
        width: 16px !important;
        height: 16px !important;
        color: white !important;
        stroke: white !important;
    }
    
    .stat-content {
        text-align: center !important;
        width: 100% !important;
    }
    
    .stat-content h3 {
        display: none !important; /* حذف متن در موبایل */
    }
    
    .stat-content p {
        font-size: 1.1rem !important;
        text-align: center !important;
        font-weight: 900 !important;
        margin: 0 !important;
        color: black !important;
        text-shadow: 0 2px 4px rgba(30, 152, 188, 0.15) !important;
        letter-spacing: -0.8px !important;
        position: relative !important;
        z-index: 2 !important;
        line-height: 1 !important;
    }
    
    .form-container {
        padding: 5px;
    }

/* استایل‌های اضافی برای صفحه جزئیات سفارش */
.order-status-message {
    color: #059669;
    font-weight: 500;
    margin-top: 8px;
}

.order-number {
    font-weight: 600;
    color: #1e98bc;
    font-family: 'Courier New', monospace;
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f1f5f9;
    border-top: 4px solid #1e98bc;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.error-container h2 {
    color: #dc2626;
    margin-bottom: 16px;
}

.error-container p {
    color: #64748b;
    margin-bottom: 24px;
}
    
    .form-container h2 {
        font-size: 1.2rem !important;
    }
    
    /* استایل‌های ریسپانسیو برای صفحه ورود مرزبان */
 
    
    .marzban-container .form-container h2 {
        font-size: 1.3rem !important;
    }
    

    
 
    
    .marzban-container     .stat-icon svg {
        width: 20px !important;
        height: 20px !important;
        color: white !important;
        stroke: white !important;
    }
}

/* استایل‌های status-badge */
.status-badge {
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-align: center !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    cursor: default !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    -webkit-user-select: none !important;
            user-select: none !important;
}

.status-badge.active {
    background-color: #10b981 !important;
    color: white !important;
}

.status-badge.secondary {
    background-color: #6b7280 !important;
    color: white !important;
}

.status-badge.info {
    background-color: #3b82f6 !important;
    color: white !important;
}

.status-badge.warning {
    background-color: #f59e0b !important;
    color: white !important;
}

.status-badge.error {
    background-color: #ef4444 !important;
    color: white !important;
}

.status-badge:focus,
.status-badge:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    background-color: inherit !important;
}

/* استایل باکس هشدار آدرس */
.address-warning {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(245, 158, 11, 0.1);
}

.warning-content h3 {
    color: #92400e;
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
}

.warning-content p {
    color: #92400e;
    margin: 0 0 16px 0;
    font-size: 14px;
    line-height: 1.5;
}

.complete-address-btn {
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'peyda', sans-serif;
}

.complete-address-btn:hover {
    background: #d97706;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}

.complete-address-btn:active {
    transform: translateY(0);
}

/* استایل دکمه‌های عملیات در پایین باکس‌ها */
.section-actions {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.section-actions .edit-btn {
    background: #1E98BC;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'peyda', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.section-actions .edit-btn:hover {
    background: #167a96;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(30, 152, 188, 0.3);
}

.section-actions .edit-btn:active {
    transform: translateY(0);
}

.section-actions .action-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.section-actions .save-btn {
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'peyda', sans-serif;
}

.section-actions .save-btn:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

.section-actions .save-btn:active {
    transform: translateY(0);
}

.section-actions .cancel-btn {
    background: #6b7280;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'peyda', sans-serif;
}

.section-actions .cancel-btn:hover {
    background: #4b5563;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(107, 114, 128, 0.3);
}

.section-actions .cancel-btn:active {
    transform: translateY(0);
}

/* استایل‌های تبلت متوسط برای service-card */
@media (min-width: 425px) and (max-width: 768px) {
    .service-card {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
        background: linear-gradient(135deg, #ffffff 0%, var(--bg-primary) 100%) !important;
        border-radius: 16px !important;
        border-radius: var(--border-radius-md) !important;
        padding: 16px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        box-shadow: var(--shadow-sm) !important;
        border: 1px solid rgba(226, 232, 240, 0.8) !important;
        transition: all 0.3s ease !important;
        transition: var(--transition) !important;
        position: relative !important;
        overflow: hidden !important;
        cursor: pointer !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 12px !important;
        /* aspect-ratio: 1 !important; */
        /* min-height: 120px !important;
        max-height: 120px !important; */
        width: 100% !important;
        height: auto !important;
    }
    
    .service-card::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(135deg, #1E98BC, #22d3ee) !important;
        background: var(--primary-gradient) !important;
        transform: scaleX(0) !important;
        transition: transform 0.3s ease !important;
    }
    
    .service-card:hover::before {
        transform: scaleX(1) !important;
    }
    
    .service-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
        box-shadow: var(--shadow-md) !important;
        border-color: rgba(30, 152, 188, 0.2) !important;
    }
    
    .service-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        border-radius: var(--border-radius-sm) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
        transition: var(--transition) !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    .service-card:hover .service-icon {
        transform: scale(1.1) !important;
    }
    
    .service-icon svg {
        width: 20px !important;
        height: 20px !important;
        color: white !important;
    }
    
    .service-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        flex: 1 1 !important;
    }
    
    .service-content h3 {
        font-size: 10px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        color: var(--text-primary) !important;
        margin-bottom: 8px !important;
        text-align: center !important;
        display: block !important;
        line-height: 1.2 !important;
    }
    
    .service-description {
        font-size: 0.9rem !important;
        color: #64748b !important;
        color: var(--text-secondary) !important;
        margin: 0 !important;
        text-align: center !important;
        font-weight: 400 !important;
        display: none !important;
    }
}

/* استایل‌های دسکتاپ برای کارت‌های آمار */
@media (min-width: 769px) {
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        grid-gap: 20px !important;
        gap: 20px !important;
        display: grid !important;
    }
    
    .stat-card {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
        background: linear-gradient(135deg, #ffffff 0%, var(--bg-primary) 100%) !important;
        border-radius: 16px !important;
        border-radius: var(--border-radius-md) !important;
        padding: 25px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        box-shadow: var(--shadow-sm) !important;
        border: 1px solid rgba(226, 232, 240, 0.8) !important;
        transition: all 0.3s ease !important;
        transition: var(--transition) !important;
        position: relative !important;
        overflow: hidden !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        gap: 20px !important;
        aspect-ratio: unset !important;
        min-height: 0 !important;
        min-height: initial !important;
        max-height: none !important;
        max-height: initial !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }
    
    .stat-card::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(135deg, #1E98BC, #22d3ee) !important;
        background: var(--primary-gradient) !important;
        transform: scaleX(0) !important;
        transition: transform 0.3s ease !important;
    }
    
    .stat-card:hover::before {
        transform: scaleX(1) !important;
    }
    
    .stat-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
        box-shadow: var(--shadow-md) !important;
        border-color: rgba(30, 152, 188, 0.2) !important;
    }
    
    .stat-icon {
        width: 60px !important;
        height: 60px !important;
        border-radius: 8px !important;
        border-radius: var(--border-radius-sm) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
        transition: var(--transition) !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    /* رنگ‌بندی آیکون‌ها مطابق با داشبورد */
    .stat-card:nth-child(1) .stat-icon {
        background: linear-gradient(135deg, #10b981, #34d399) !important;
    }
    
    .stat-card:nth-child(2) .stat-icon {
        background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
    }
    
    .stat-card:nth-child(3) .stat-icon {
        background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
    }
    
    .stat-card:hover .stat-icon {
        transform: scale(1.1) !important;
    }
    
    .stat-icon svg {
        width: 24px !important;
        height: 24px !important;
        color: white !important;
    }
    
    .stat-content {
        flex: 1 1 !important;
    }
    
    .stat-content h3 {
        font-size: 1.2rem !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        color: var(--text-primary) !important;
        margin-bottom: 8px !important;
        text-align: right !important;
        line-height: 1.3 !important;
    }
    
    .stat-content p {
        font-size: 0.9rem !important;
        text-align: right !important;
        font-weight: 400 !important;
        margin: 0 !important;
        color: #64748b !important;
        color: var(--text-secondary) !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* Breadcrumb Container */
.breadcrumb-container {
    margin: 0 0 20px 0;
    padding: 0;
}

/* Responsive Breadcrumb */
@media (max-width: 768px) {
    .breadcrumb-container {
        margin: 0 0 16px 0;
    }
}


/* استایل‌های بهبود یافته برای صفحه کیف پول */

/* جلوگیری از زوم در iOS برای تمام اینپوت‌ها */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  font-size: 16px !important; /* جلوگیری از زوم در iOS */
  -webkit-appearance: none !important; /* حذف استایل پیش‌فرض iOS */
  -webkit-tap-highlight-color: transparent !important; /* حذف highlight کلیک */
  -webkit-touch-callout: none !important; /* حذف callout iOS */
  -webkit-user-select: text !important; /* اجازه انتخاب متن */
  user-select: text !important;
}

/* جلوگیری از زوم در iOS برای تمام فرم‌ها */
form {
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
         text-size-adjust: 100% !important;
}

/* جلوگیری از زوم در iOS برای body */
body {
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
         text-size-adjust: 100% !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* اجازه انتخاب متن در اینپوت‌ها */
input, textarea {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* استایل هدر کیف پول */
.wallet-header {
    background: linear-gradient(135deg, #1e98bc, #22d3ee, #06b6d4, #0891b2);
    border-radius: 16px;
    color: white;
    margin-bottom: 20px;
    overflow: hidden;
    padding: 24px 20px;
    position: relative;
    text-align: center;
    box-shadow: 0 8px 24px rgba(30, 152, 188, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.wallet-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: float 8s ease-in-out infinite;
}

.wallet-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(180deg); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.wallet-header-content {
    position: relative;
    z-index: 1;
}

.wallet-title {
    margin-bottom: 20px;
}

.title-row {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 12px;
    margin-bottom: 8px;
}

.title-row .title-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    animation: pulse 2s ease-in-out infinite;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    margin: 0;
}

.title-row h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    background: linear-gradient(45deg, #ffffff, #f0f9ff, #e0f2fe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}





@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}



.wallet-title p {
    font-size: 0.9rem;
    font-weight: 400;
    opacity: 0.8;
    margin: 0;
}

.wallet-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.total-balance {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.total-balance::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
    animation: shimmer 4s ease-in-out infinite;
}

.balance-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.total-balance .label {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.9;
}

.total-balance .value {
    font-size: 2rem;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    background: linear-gradient(45deg, #ffffff, #f0f9ff, #e0f2fe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.total-balance .currency {
    font-size: 1.2rem;
    font-weight: 600;
    opacity: 0.8;
}

.balance-subtitle {
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.7;
    text-align: center;
    max-width: 250px;
    line-height: 1.4;
}

.balance-breakdown {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.breakdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    min-width: 200px;
    position: relative;
    overflow: hidden;
}

.breakdown-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.breakdown-item:hover::before {
    opacity: 1;
}

.breakdown-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.item-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.breakdown-item:hover .item-icon {
    transform: scale(1.05);
}

.cash-balance .item-icon {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.4);
}

.credit-balance .item-icon {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
}

.item-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1;
}

.breakdown-item .label {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.8;
}

.breakdown-item .value {
    font-size: 1.3rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Responsive styles for wallet header */
@media (max-width: 768px) {
    .wallet-header {
        padding: 20px 16px;
        margin-bottom: 20px;
        border-radius: 14px;
        padding: 16px 12px !important;
        margin: 24px 5px 30px 5px !important;
    }
    
    
    
    
    
    .total-balance {
        padding: 14px 20px;
    }
    
    .total-balance .value {
        font-size: 1.8rem;
    }
    
    .balance-breakdown {
        gap: 12px;
        flex-direction: column;
    }
    
    .breakdown-item {
        min-width: 0;
        min-width: initial;
        width: 100%;
        padding: 14px 18px;
    }
}

@media (max-width: 480px) {
    .wallet-header {
        padding: 16px 12px;
    }
    
    
    
    
    
    .wallet-title p {
        font-size: 0.8rem;
    }
    
    .total-balance {
        padding: 12px 16px;
    }
    
    .total-balance .value {
        font-size: 1.6rem;
    }
    
    .breakdown-item {
        padding: 12px 16px;
    }
    
    .breakdown-item .value {
        font-size: 1.2rem;
    }
}

@media (max-width: 360px) {
    .wallet-header {
        padding: 14px 10px;
    }
    
    
    
    .total-balance .value {
        font-size: 1.4rem;
    }
    
    .breakdown-item .value {
        font-size: 1.1rem;
    }
}

/* استایل دکمه‌های عملیات */
.wallet-actions {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 20px;
}

.action-btn {
    background: #1E98BC;
    border: 1px solid #1E98BC;
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    justify-content: center;
}

.action-btn:hover {
    background: #1a87a8;
    border-color: #1a87a8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 152, 188, 0.3);
}

.action-btn:active {
    transform: translateY(0);
}

.action-btn.deposit-btn {
    background: #1E98BC;
    border: 1px solid #1E98BC;
    color: white;
    min-width: 70px;
    font-size: 0.7rem;
    padding: 6px 10px;
    font-family: 'peyda', sans-serif;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    flex: 1 1;
    white-space: nowrap;
}

.action-btn.deposit-btn svg {
    width: 10px;
    height: 10px;
    margin-left: 4px;
}

.action-btn.deposit-btn:hover {
    background: #167a99;
    border-color: #167a99;
    color: white;
    box-shadow: 0 2px 4px rgba(30, 152, 188, 0.3);
    transform: translateY(-1px);
}

/* Removed old wallet-info styles - replaced with new wallet-header */

.refresh-btn {
    background: #1E98BC;
    border: 1px solid #1E98BC;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.refresh-btn:hover {
    background: #1a87a8;
    border-color: #1a87a8;
}

.deposit-btn {
    background: #1E98BC !important;
    color: white !important;
    border: 1px solid #1E98BC !important;
}

.deposit-btn:hover {
    background: #1a87a8 !important;
    border-color: #1a87a8 !important;
}

/* Removed balance-amount styles - replaced with new wallet-header structure */

/* Removed loading-spinner and error-message styles - no longer needed with new header */

/* بهبود استایل breadcrumb */
.breadcrumb {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.breadcrumb button {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 0;
    cursor: pointer;
    transition: color 0.3s ease;
}

.breadcrumb button:hover {
    color: #374151;
}

.breadcrumb-current {
    color: #000;
    font-size: 14px;
    font-weight: 500;
}

/* بهبود استایل جدول */
.wallet-container {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border: 1px solid #e2e8f0;
}

/* ===== MOBILE RESPONSIVE IMPROVEMENTS ===== */

/* تبلت - 768px و کمتر */
@media (max-width: 768px) {
    .wallet-actions {
        padding: 0 16px;
        gap: 12px;
        margin-bottom: 16px;
    }
    
    .action-btn {
        min-width: 120px;
        padding: 10px 16px;
        font-size: 13px;
    }
    
    /* Removed old wallet-info styles - replaced with new wallet-header structure */
    
    /* Removed balance-amount styles - replaced with new wallet-header structure */
    
    .wallet-container {
        padding: 20px;
        margin: 0px;
        border-radius: 16px;
    }
}

/* موبایل - 480px و کمتر */
@media (max-width: 480px) {
    .wallet-actions {
        padding: 0 12px;
        gap: 8px;
        margin-bottom: 12px;
        /* flex-direction: column; */
    }
    
    .action-btn {
        width: 100%;
        min-width: 0;
        min-width: initial;
        padding: 14px 20px;
        font-size: 12px;
        justify-content: center;
    }
    
    /* Removed old wallet-info styles - replaced with new wallet-header structure */
    
    /* Removed balance-amount styles - replaced with new wallet-header structure */
    
    /* Removed balance-amount styles - replaced with new wallet-header structure */
    
    .wallet-container {
        padding: 16px;
        margin: 0 8px;
        border-radius: 12px;
    }
}

/* موبایل کوچک - 360px و کمتر */
@media (max-width: 360px) {
    .wallet-actions {
        padding: 0 8px;
        gap: 6px;
    }
    
    .action-btn {
        padding: 12px 16px;
        font-size: 13px;
    }
    
    /* Removed old wallet-info styles - replaced with new wallet-header structure */
    
    /* Removed balance-amount styles - replaced with new wallet-header structure */
    
    .wallet-container {
        padding: 5px;
        margin: 0 4px;
        border-radius: 10px;
    }
}

/* استایل دکمه‌های فیلتر */
.filter-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-btn {
    background: #f3f4f6;
    border: 1px solid #e2e8f0;
    color: #374151;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    text-align: center;
}

.filter-btn:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
    transform: translateY(-1px);
}

.filter-btn.active {
    background: #1E98BC;
    border-color: #1E98BC;
    color: white;
    box-shadow: 0 2px 8px rgba(30, 152, 188, 0.3);
}

.filter-btn.active:hover {
    background: #1a87a8;
    border-color: #1a87a8;
}

/* Responsive برای دکمه‌های فیلتر */
@media (max-width: 768px) {
    .filter-buttons {
        gap: 8px;
        margin-bottom: 20px;
        padding: 0 16px;
    }
    
    .filter-btn {
        min-width: 100px;
        padding: 8px 14px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .filter-buttons {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 0 12px;
        margin: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        white-space: nowrap;
        flex-wrap: nowrap;
    }
    
    .filter-buttons::-webkit-scrollbar {
        display: none;
    }
    
    .filter-btn {
        flex-shrink: 0;
        min-width: 80px;
        max-width: 120px;
        /* padding: 6px 12px; */
        font-size: 10px;
        white-space: nowrap;
    }
}

@media (max-width: 360px) {
    .filter-buttons {
        padding: 0 10px;
        margin: 0;
        gap: 4px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        white-space: nowrap;
        flex-wrap: nowrap;
    }
    
    .filter-buttons::-webkit-scrollbar {
        display: none;
    }
    
    .filter-btn {
        flex-shrink: 0;
        min-width: 70px;
        max-width: 100px;
        padding: 5px 10px;
        font-size: 10px;
        white-space: nowrap;
    }
} 


.cash-balance.debt .value {
    color: #ef4444;
}

.action-btn.debt-warning {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: white !important;
}

.action-btn.debt-warning:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}


/* ===== NEW WALLET CARDS STYLES ===== */

/* Container for wallet cards */
.wallet-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    gap: 20px;
    margin-bottom: 24px;
}

/* Scroll behavior for small screens */
@media (max-width: 768px) {
    .wallet-cards-grid {
        display: flex;
        gap: 20px;
        margin-bottom: 24px;
        overflow-x: auto;
        padding-bottom: 10px;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 #f1f5f9;
        justify-content: space-between;

    }

    .wallet-cards-grid::-webkit-scrollbar {
        height: 6px;
    }

    .wallet-cards-grid::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 3px;
    }

    .wallet-cards-grid::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
    }

    .wallet-cards-grid::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
}

/* Individual wallet card */
.wallet-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'peyda', sans-serif;
    min-height: 200px;
}

/* Fixed width for small screens */
@media (max-width: 768px) {
    .wallet-card {
        min-width: 280px;
        flex-shrink: 0;
    }
    
    
}

.wallet-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #1E98BC;
    border-radius: 16px 16px 0 0;
}

.wallet-card:hover {
    /* transform: translateY(-4px); */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #1E98BC;
}

/* استایل برای فیلتر فعال کارت‌های کیف پول */
.wallet-card.active-filter {
    border-color: #1E98BC !important;
    box-shadow: 0 8px 25px rgba(30, 152, 188, 0.2) !important;
    /* transform: translateY(-4px); */
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.wallet-card.active-filter::before {
    background: #1E98BC !important;
    height: 6px;
}

.wallet-card.active-filter .wallet-icon {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(30, 152, 188, 0.3);
}

.wallet-card.active-filter .action-btn.details-btn {
    background: #1E98BC !important;
    border-color: #1E98BC !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(30, 152, 188, 0.3) !important;
}

/* Cash wallet specific styling */
.cash-wallet::before {
    background: #10b981;
}

/* Credit wallet specific styling */
.credit-wallet::before {
    background: #8b5cf6;
}

/* Summary wallet specific styling */
.summary-wallet::before {
    background: #1E98BC;
}

/* Wallet card header */
.wallet-card-header {
    margin-bottom: 20px;
}

.wallet-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wallet-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #6b7280;
    flex-shrink: 0;
}

.cash-wallet .wallet-icon {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #10b981;
}

.credit-wallet .wallet-icon {
    background: #faf5ff;
    border-color: #e9d5ff;
    color: #8b5cf6;
}

.summary-wallet .wallet-icon {
    background: #e0f2fe;
    border-color: #bae6fd;
    color: #1E98BC;
}

.wallet-card-title h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    font-family: 'peyda', sans-serif;
}

/* Wallet card content */
.wallet-card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1;
}

.balance-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    justify-content: center;
    margin-bottom: 8px;
}

.balance-amount .amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    font-family: 'peyda', sans-serif;
}

.balance-amount .currency {
    font-size: 0.85rem;
    font-weight: 500;
    color: #6b7280;
    font-family: 'peyda', sans-serif;
}

/* Wallet actions */
.wallet-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: auto;
    flex-wrap: nowrap;
    align-items: center;
}

.action-btn.details-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #6b7280;
    min-width: 70px;
    font-size: 0.7rem;
    padding: 6px 10px;
    font-family: 'peyda', sans-serif;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    flex: 1 1;
    white-space: nowrap;
}

.action-btn.details-btn svg {
    width: 10px;
    height: 10px;
    margin-left: 4px;
}

/* دکمه تسویه بدهی - تسویه زودهنگام (سبز) */
.action-btn.debt-settle-btn.early-settle {
    background: #10b981;
    border: 1px solid #10b981;
    color: white;
    min-width: 70px;
    font-size: 0.7rem;
    padding: 6px 10px;
    font-family: 'peyda', sans-serif;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    flex: 1 1;
    white-space: nowrap;
}

.action-btn.debt-settle-btn.early-settle:hover {
    background: #059669;
    border-color: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

.action-btn.debt-settle-btn.early-settle svg {
    width: 10px;
    height: 10px;
    margin-left: 4px;
}

/* دکمه تسویه بدهی - تسویه بدهی (قرمز) */
.action-btn.debt-settle-btn.late-settle {
    background: #ef4444;
    border: 1px solid #ef4444;
    color: white;
    min-width: 70px;
    font-size: 0.7rem;
    padding: 6px 10px;
    font-family: 'peyda', sans-serif;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    flex: 1 1;
    white-space: nowrap;
}

.action-btn.debt-settle-btn.late-settle:hover {
    background: #dc2626;
    border-color: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

.action-btn.debt-settle-btn.late-settle svg {
    width: 10px;
    height: 10px;
    margin-left: 4px;
}

.action-btn.details-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #374151;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.action-btn.details-btn.active {
    background: #1E98BC;
    border-color: #1E98BC;
    color: white;
    box-shadow: 0 2px 8px rgba(30, 152, 188, 0.3);
}

.action-btn.details-btn.active:hover {
    background: #1a87a8;
    border-color: #1a87a8;
    color: white;
    box-shadow: 0 4px 12px rgba(30, 152, 188, 0.4);
}

.action-btn.debt-settle-btn {
    background: #dc2626;
    border: 1px solid #dc2626;
    color: white;
    min-width: 70px;
    font-size: 0.7rem;
    padding: 6px 10px;
    font-family: 'peyda', sans-serif;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    flex: 1 1;
    white-space: nowrap;
}

.action-btn.debt-settle-btn svg {
    width: 10px;
    height: 10px;
    margin-left: 4px;
}

.action-btn.debt-settle-btn:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: white;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
    transform: translateY(-1px);
}

/* Purchase credit summary */
.purchase-credit-summary {
    margin-bottom: 24px;
}

.summary-card {
    background: linear-gradient(135deg, #1e98bc, #22d3ee);
    border-radius: 16px;
    padding: 24px;
    color: white;
    box-shadow: 0 8px 24px rgba(30, 152, 188, 0.2);
    position: relative;
    overflow: hidden;
}

.summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}

.summary-header {
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.summary-header h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.summary-content {
    position: relative;
    z-index: 1;
}

.total-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
}

.total-amount .amount {
    font-size: 2.2rem;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.total-amount .currency {
    font-size: 1.3rem;
    font-weight: 600;
    opacity: 0.9;
}

.breakdown {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.breakdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 100px;
}

.breakdown-item .label {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.8;
}

.breakdown-item .value {
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Debt section inside summary card */
.debt-section {
    margin-top: 12px;
    padding: 10px;
    background: #fef2f2;
    border-radius: 6px;
    border: 1px solid #fecaca;
}

.debt-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.debt-icon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dc2626;
    color: white;
}

.debt-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.debt-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: #dc2626;
    font-family: 'peyda', sans-serif;
}

.debt-amount {
    font-size: 0.9rem;
    font-weight: 600;
    color: #dc2626;
    font-family: 'peyda', sans-serif;
}

.debt-settle-btn {
    background: #dc2626;
    border: 1px solid #dc2626;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    font-family: 'peyda', sans-serif;
}

.debt-settle-btn:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.3);
}


/* Responsive styles for wallet cards - only for button adjustments */
@media (max-width: 768px) {
    .wallet-actions {
        gap: 4px;
        flex-wrap: nowrap;
    }
    
    .action-btn.details-btn {
        font-size: 0.7rem;
        padding: 6px 10px;
        min-width: 70px;
    }
    
    .action-btn.deposit-btn,
    .action-btn.debt-settle-btn {
        font-size: 0.7rem;
        padding: 6px 10px;
        min-width: 70px;
    }
}

@media (max-width: 480px) {
    .wallet-actions {
        gap: 3px;
        flex-wrap: nowrap;
    }
    
    .action-btn.details-btn {
        font-size: 0.65rem;
        padding: 5px 8px;
        min-width: 60px;
    }
    
    .action-btn.deposit-btn,
    .action-btn.debt-settle-btn {
        font-size: 0.65rem;
        padding: 5px 8px;
        min-width: 60px;
    }
    
    .debt-section {
        margin-top: 12px;
        padding: 10px;
    }
    
    /* تنظیمات کارت‌های کیف پول برای صفحات کوچک */
    .wallet-card {
        padding: 0px;
        min-height: 180px;
    }
    
    .wallet-card-header {
        margin-bottom: 12px;
        padding: 16px 16px 0 16px;
    }
    
    .wallet-card-content {
        padding: 0 16px;
        gap: 12px;
    }
    
    .balance-amount {
        margin-bottom: 6px;
    }
    
    .balance-amount .amount {
        font-size: 1.3rem;
    }
    
    .balance-amount .currency {
        font-size: 0.8rem;
    }
    
    .wallet-actions {
        padding: 0 16px 16px 16px;
        margin-top: auto;
    }
    
    .wallet-card-title h3 {
        font-size: 0.9rem;
    }
    
    .wallet-icon {
        width: 28px;
        height: 28px;
    }
}

/* ===== WALLET MOBILE OPTIMIZATIONS ===== */

/* بهبود نمایش balance boxes در موبایل */
@media (max-width: 768px) {
    .wallet-info {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-radius: 20px;
        padding: 20px;
        margin: 0 16px 20px 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(30, 152, 188, 0.1);
    }
    
    .balance-display {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        border: 1px solid rgba(30, 152, 188, 0.15);
        box-shadow: 0 4px 16px rgba(30, 152, 188, 0.1);
        transition: all 0.3s ease;
    }
    
    .balance-display:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(30, 152, 188, 0.15);
    }
    
    .balance-display.purchase-credit-card {
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        border-color: rgba(30, 152, 188, 0.2);
    }
    
    .balance-header {
        position: relative;
    }
    
    .balance-header::after {
        content: '';
        position: absolute;
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #1E98BC, #0f4c75);
        border-radius: 2px;
    }
    
    .balance-icon {
        background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
        border: none;
        box-shadow: 0 4px 16px rgba(30, 152, 188, 0.3);
    }
    
    .balance-header h3 {
        background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 700;
    }
    
    .balance-amount {
        position: relative;
        padding: 16px 0;
    }
    
    .balance-amount::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(30, 152, 188, 0.2), transparent);
    }
    
    .balance-amount .amount {
        background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: none;
    }
    
    .balance-amount .currency {
        color: #6b7280;
        font-weight: 600;
        opacity: 0.8;
    }
}

@media (max-width: 480px) {
    .wallet-info {
        margin: 0 12px 16px 12px;
        padding: 16px;
        border-radius: 16px;
    }
    
    .balance-display {
        padding: 20px;
        border-radius: 14px;
        margin-bottom: 0;
    }
    
    .balance-header {
        margin-bottom: 20px;
    }
    
    .balance-header::after {
        width: 50px;
        height: 2px;
        bottom: -10px;
    }
    
    .balance-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }
    
    .balance-header h3 {
        font-size: 18px;
        font-weight: 700;
    }
    
    .balance-amount {
        padding: 12px 0;
    }
    
    .balance-amount::before {
        width: 60px;
        top: 0;
    }
    
    .balance-amount .amount {
        font-size: 20px;
        font-weight: 800;
        line-height: 1.2;
    }
    
    .balance-amount .currency {
        font-size: 16px;
        font-weight: 600;
    }
    
    /* بهبود دکمه‌های عملیات */
    .wallet-actions {
        /* background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); */
        border-radius: 16px;
        padding: 0px;
        margin: 0 12px 16px 12px;
        /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); */
        border: 0px solid rgba(30, 152, 188, 0.1);
    }
    
    .action-btn {
        background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
        border: none;
        box-shadow: 0 4px 16px rgba(30, 152, 188, 0.2);
        font-weight: 600;
        transition: all 0.3s ease;
    }
    
    .action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(30, 152, 188, 0.3);
    }
    
    .action-btn.deposit-btn {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2);
        width: 50%;
    }
    
    .action-btn.deposit-btn:hover {
        box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
    }
}

@media (max-width: 360px) {
    .wallet-info {
        margin: 0 8px 12px 8px;
        padding: 12px;
        border-radius: 14px;
    }
    
    .balance-display {
        padding: 16px;
        border-radius: 12px;
    }
    
    .balance-header {
        margin-bottom: 16px;
    }
    
    .balance-header::after {
        width: 40px;
        height: 2px;
        bottom: -8px;
    }
    
    .balance-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }
    
    .balance-header h3 {
        font-size: 16px;
    }
    
    .balance-amount {
        padding: 10px 0;
    }
    
    .balance-amount::before {
        width: 50px;
    }
    
    .balance-amount .amount {
        font-size: 24px;
    }
    
    .balance-amount .currency {
        font-size: 14px;
    }
    
    .wallet-actions {
        margin: 0 8px 12px 8px;
        padding: 12px;
        border-radius: 14px;
    }
    
    .action-btn {
        padding: 12px 16px;
        font-size: 13px;
    }
}

/* بهبود نمایش جدول تراکنش‌ها در موبایل */
@media (max-width: 768px) {
    .wallet-container {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        border: 1px solid rgba(30, 152, 188, 0.1);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }
    
    .filter-buttons {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-radius: 16px;
        padding: 16px;
        margin: 0 16px 20px 16px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(30, 152, 188, 0.1);
    }
    
    .filter-btn {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        border: 1px solid rgba(30, 152, 188, 0.15);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }
    
    .filter-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(30, 152, 188, 0.15);
        border-color: rgba(30, 152, 188, 0.25);
    }
    
    .filter-btn.active {
        background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
        border-color: #1E98BC;
        box-shadow: 0 4px 16px rgba(30, 152, 188, 0.3);
        color: white;
    }
}

@media (max-width: 480px) {
    .wallet-container {
        margin: 0 0px;
        border-radius: 16px;
    }
    
    .filter-buttons {
        margin: 0 12px 16px 12px;
        padding: 12px;
        border-radius: 14px;
        justify-content: start;
    }
    
    .filter-btn {
        font-weight: 600;
        /* min-height: 44px; */
    }


    .title-row .title-icon{
        width: 30px;
        height: 30px;
    }
    .title-row .title-icon svg{
        width: 15px;
        height: 15px;
    }
    .title-row  h1{
        font-size: 18px;
    }
    .action-btn.refresh-btn{
        top: 0px !important;
        width: 30px !important;
        height: 30px  !important;
        min-width: 30px !important;
        min-height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
    }


}

@media (max-width: 360px) {
    .wallet-container {
        margin: 0 0px;
        border-radius: 14px;
    }
    
    .filter-buttons {
        margin: 0 8px 12px 8px;
        padding: 10px;
        border-radius: 12px;
    }
    
    .filter-btn {
        min-height: 40px;
        font-size: 13px;
    }
}

/* انیمیشن‌های اضافی برای بهبود تجربه کاربری */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.balance-display {
    animation: fadeInUp 0.6s ease-out;
}

.balance-display:nth-child(2) {
    animation-delay: 0.1s;
}

.balance-icon {
    animation: pulse 2s ease-in-out infinite;
}

/* بهبود touch targets برای موبایل */
@media (max-width: 768px) {
    .action-btn,
    .filter-btn {
        /* min-height: 44px; */
        touch-action: manipulation;
    }
    
    .balance-display {
        cursor: pointer;
        touch-action: manipulation;
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .balance-display:active {
        transform: scale(0.98);
    }
} 
/* ===== TABLE COMPONENT STYLES ===== */

/* ===== INLINE EDITING STYLES ===== */
.editable-cell {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px 8px;
    border-radius: 4px;
}

/* .editable-cell:hover {
    background-color: #f1f5f9;
    border: 1px dashed #cbd5e1;
} */

.inline-edit-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inline-edit-input {
    flex: 1 1;
    padding: 6px 10px;
    border: 2px solid #1E98BC;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    min-width: 100px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(30, 152, 188, 0.1);
    transition: all 0.2s ease;
}

.inline-edit-input:focus {
    border-color: #0f4c75;
    border-width: 1px;
    box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.2);
}



.clickable-status {
    cursor: pointer;
    transition: all 0.2s ease;
}

/* .clickable-status:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ===== DROPDOWN EDITING STYLES ===== */
.editable-dropdown-cell,
.editable-user-select-cell {
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px 8px;
    border-radius: 4px;
}

.editable-dropdown-cell:hover,
.editable-user-select-cell:hover {
    background-color: #f1f5f9;
}

.inline-edit-dropdown {
    position: relative;
    z-index: 1000;
}

.inline-edit-dropdown .searchable-select {
    min-width: 200px;
}

/* ===== END DROPDOWN EDITING STYLES ===== */ */

/* ===== END INLINE EDITING STYLES ===== */

/* Table Container */
.table-container {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border: 1px solid #f1f5f9;
    margin-bottom: 24px;
    font-family: 'peyda', sans-serif;
}

/* Table Header Section */
.table-header {
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
    direction: ltr;
    border-radius: 7px;

}

/* Layout جدید برای مرزبان */
.table-actions-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.table-search-row {
    width: 100%;
}

.table-actions-left {
    display: flex;
    gap: 12px;
    align-items: center;
    direction: rtl;
}

.table-actions-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

.table-search {
    position: relative;
    min-width: 300px;
}

.table-search input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 16px; /* جلوگیری از زوم در iOS */
    outline: none;
    transition: all 0.3s ease;
    font-family: 'peyda', sans-serif;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    direction: rtl;
}

.table-search input:focus {
    border-color: #1E98BC;
    box-shadow: 0 0 0 3px rgba(30, 152, 188, 0.1), 0 4px 12px rgba(30, 152, 188, 0.15);
    transform: translateY(-1px);
}

.table-search input:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table-search svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    width: 18px;
    height: 18px;
    pointer-events: none;
    transition: all 0.3s ease;
}

.table-search:focus-within svg {
    color: #1E98BC;
    transform: translateY(-50%) scale(1.1);
}

.table-filters {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* جلوگیری از زوم در iOS برای تمام اینپوت‌ها */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    font-size: 16px !important; /* جلوگیری از زوم در iOS */
    -webkit-appearance: none !important; /* حذف استایل پیش‌فرض iOS */
    -webkit-tap-highlight-color: transparent !important; /* حذف highlight کلیک */
    -webkit-touch-callout: none !important; /* حذف callout iOS */
    -webkit-user-select: text !important; /* اجازه انتخاب متن */
    user-select: text !important;
}

/* جلوگیری از زوم در iOS برای تمام فرم‌ها */
form {
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
         text-size-adjust: 100% !important;
}

/* جلوگیری از زوم در iOS برای body */
body {
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
         text-size-adjust: 100% !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* اجازه انتخاب متن در اینپوت‌ها */
input, textarea {
    -webkit-user-select: text !important;
    user-select: text !important;
}

.clear-filters-btn {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #dc2626;
    border: 2px solid #fecaca;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
    font-family: 'peyda', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.1);
}

.clear-filters-btn:hover {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
    border-color: #fca5a5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}

.clear-filters-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.1);
}

.clear-filters-btn svg {
    width: 14px;
    height: 14px;
}

.table-create-btn {
    background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    font-family: 'peyda', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 36px;
    height: 36px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(30, 152, 188, 0.3);
    position: relative;
    overflow: hidden;
}

.table-create-btn:hover {
    background: linear-gradient(135deg, #0f4c75 0%, #1E98BC 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 152, 188, 0.4);
}

.table-create-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(30, 152, 188, 0.3);
}

.table-create-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.table-create-btn:hover svg {
    transform: scale(1.1);
}

/* استایل‌های اضافی برای دکمه ایجاد کاربر */
.table-create-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 152, 188, 0.2);
}

.table-create-btn:focus-visible {
    outline: 2px solid #1E98BC;
    outline-offset: 2px;
}

/* حالت loading برای دکمه */
.table-create-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.table-create-btn:disabled:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(30, 152, 188, 0.3);
}

/* انیمیشن برای کلیک */
.table-create-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.table-create-btn:active::before {
    width: 100%;
    height: 100%;
}

/* Page Size Selector in Header */
.page-size-selector-header {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 6px;
    /* border: 1px solid #e2e8f0; */
}

.page-size-selector-header label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
}

.page-size-selector-header select {
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
    font-family: 'peyda', sans-serif;
}

.page-size-selector-header select:focus {
    border-color: #1E98BC;
    box-shadow: 0 0 0 2px rgba(30, 152, 188, 0.1);
}

.page-size-selector-header select:hover {
    border-color: #9ca3af;
}

/* Table Wrapper */
.table-wrapper {
    overflow-x: scroll;
}

/* Main Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

/* Table Header Row */
.data-table thead {
    background: #f8fafc;
}

.data-table th {
    padding: 16px 20px;
    text-align: center;
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
    border-bottom: 1px solid #e5e7eb;
    font-family: 'peyda', sans-serif;
    position: relative;
    white-space: nowrap;
}

.data-table th::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    transition: background 0.3s ease;
}

.data-table th.sortable:hover::after {
    background: #1E98BC;
}

.data-table th.filterable:hover::after {
    background: #10b981;
}

.th-content {
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap: 8px; */
    position: relative;
    width: 100%;
}

.th-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}

.sort-indicator {
    color: #1E98BC;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.sort-indicator svg {
    width: 16px;
    height: 16px;
    transition: all 0.2s ease;
}

.sort-indicator:hover svg {
    transform: scale(1.1);
    color: #0f4c75;
}

.filter-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.filter-icon {
    width: 18px;
    height: 18px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 2px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-icon:hover {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.filter-icon.active {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.filter-badge {
    background: #10b981;
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-badge:hover {
    background: #059669;
    transform: scale(1.1);
}

/* Filter Modal */
.filter-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

.filter-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    border-radius: 0;
    padding: 24px;
    min-width: none;
    max-width: none;
    box-shadow: none;
    border: none;
    animation: modalFadeIn 0.2s ease-out;
    z-index: 1000000;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.filter-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.filter-modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
}

.filter-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.filter-modal-close:hover {
    background: #f1f5f9;
    color: #64748b;
}

.filter-modal-content input,
.filter-modal-content select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    font-family: 'peyda', sans-serif;
    margin-bottom: 16px;
    background: #ffffff;
}

.filter-modal-content input:focus,
.filter-modal-content select:focus {
    border-color: #1E98BC;
    box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.2);
}

.filter-dropdown {
    position: relative;
    margin-bottom: 16px;
}

.filter-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27m6 8 4 4 4-4%27/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
}


.filter-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.filter-apply-btn {
    background: #1E98BC;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-family: 'peyda', sans-serif;
}

.filter-apply-btn:hover {
    background: #0f4c75;
}

.filter-clear-btn {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-family: 'peyda', sans-serif;
}

.filter-clear-btn:hover {
    background: #e2e8f0;
    color: #475569;
}

/* Table Body */
.data-table tbody tr {
    transition: all 0.3s ease;
}

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

/* .data-table tbody tr:hover {
    background: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
} */

.data-table td {
    text-align: center;
    padding: 16px 20px;
    font-size: 0.875rem;
    color: #374151;
    font-family: 'peyda', sans-serif;
    vertical-align: middle;
}

/* Status Indicators */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.active {
    background: #10b981;
}

.status-dot.inactive {
    background: #6b7280;
}

.status-dot.warning {
    background: #f59e0b;
}

.status-dot.danger {
    background: #ef4444;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: 'peyda', sans-serif !important;
}

.status-badge.active {
    background: #dcfce7;
    color: #166534;
}

.status-badge.inactive {
    background: #f1f5f9;
    color: #64748b;
}

.status-badge.disabled {
    background: #fee2e2;
    color: #dc2626;
}

.status-badge.warning {
    background: #fef3c7;
    color: #d97706;
}

.status-badge svg {
    width: 14px;
    height: 14px;
}

/* Progress Bars */
.progress-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.progress-bar {
    width: 100px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: #1E98BC;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-fill.success {
    background: #10b981;
}

.progress-fill.warning {
    background: #f59e0b;
}

.progress-fill.danger {
    background: #ef4444;
}

.progress-text {
    font-size: 0.75rem;
    color: #64748b;
    font-family: 'peyda', sans-serif;
}

/* Action Icons */
.action-icons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.action-icon {
    width: 25px;
    height: 25px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px;
    border-radius: 4px;
}

.action-icon:hover {
    color: #1E98BC;
    background: rgba(30, 152, 188, 0.1);
}

.action-icon.danger {
    color: #ef4444;
}

.action-icon.danger:hover {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.1);
}

/* User Info */
.user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1;
}

.user-name {
    font-weight: 600;
    color: #1e293b;
}

.user-subtitle {
    font-size: 0.75rem;
    color: #64748b;
}

.user-online {
    color: #10b981;
    font-weight: 500;
}

/* Expiry Info */
.expiry-info {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 4px;
}

/* Loading State */
.table-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    color: #64748b;
}

.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 0;
    font-size: 14px;
    color: #64748b;
    font-family: 'peyda', sans-serif;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top: 2px solid #1E98BC;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Empty State */
.table-empty {
    text-align: center;
    padding: 48px 24px;
    color: #64748b;
}

.table-empty svg {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.table-empty h3 {
    font-size: 1.25rem;
    margin-bottom: 8px;
    color: #374151;
}

.table-empty p {
    font-size: 0.875rem;
    color: #64748b;
}

/* Pagination */
.table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

.pagination-info {
    font-size: 0.875rem;
    color: #64748b;
    font-family: 'peyda', sans-serif;
}

.page-size-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'peyda', sans-serif;
}

.page-size-selector label {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
}

.page-size-select {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    color: #374151;
    font-size: 0.875rem;
    font-family: 'peyda', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.page-size-select:hover {
    border-color: #1E98BC;
}

.page-size-select:focus {
    border-color: #1E98BC;
    box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.2);
}

.pagination-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pagination-btn {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #374151;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    font-family: 'peyda', sans-serif;
}

.pagination-btn:hover:not(:disabled) {
    border-color: #1E98BC;
    color: #1E98BC;
}

.pagination-btn:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.pagination-btn.active {
    background: #1E98BC;
    color: white;
    border-color: #1E98BC;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .table-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    
    .table-actions {
        justify-content: space-between;
    }
    
    .table-search {
        min-width: auto;
        flex: 1 1;
    }
    
    .table-create-btn {
        min-width: 34px;
        height: 34px;
        padding: 7px 10px;
    }
    
    .table-create-btn svg {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 768px) {
    .table-container {
        border-radius: 8px;
        margin-bottom: 16px;
    }
    
    .table-header {
        padding: 16px;
    }
    
    .table-actions {
        flex-direction: column;
        gap: 12px;
        flex-direction: column-reverse;
        align-items: stretch;
    }
    
    .table-create-btn {
        align-self: flex-start;
        min-width: 32px;
        height: 32px;
        padding: 6px 8px;
        border-radius: 6px;
    }
    
    .table-create-btn svg {
        width: 14px;
        height: 14px;
    }
    
    .table-search {
        width: 100%;
    }
    
    .data-table {
        font-size: 0.75rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 12px 16px;
    }
    
    .action-icons {
        gap: 4px;
    }
    
    .action-icon {
        width: 25px;
        height: 25px;
    }
    
    .progress-bar {
        width: 80px;
    }
    
    .table-pagination {
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px;
        margin-bottom: 20px;
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
        border-radius: 0 0 8px 8px;
    }
    
    .page-size-selector {
        order: 2;
        justify-content: center;
    }
    
    .pagination-controls {
        justify-content: center;
        gap: 6px;
        flex-wrap: wrap;
    }
    
    .pagination-btn {
        padding: 8px 10px;
        font-size: 0.8rem;
        min-width: 36px;
        height: 36px;
    }
    
    .filter-modal {
        min-width: 300px;
        margin: 20px;
    }
}

@media (max-width: 480px) {
    .table-actions-top {
        flex-direction: row;
        gap: 8px;
        align-items: center;
        justify-content: space-between;
    }
    
    .table-actions-left {
        justify-content: flex-start;
        width: auto;
    }
    .mobile-info-value span{
        font-size: 10px !important;
    }
    .invoice-detail-btn{
        width: 50% !important;
    }
    .table-actions-right {
        justify-content: flex-end;
        width: auto;
    }
    
    .data-table thead {
        display: none;
    }
    
    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td {
        display: block;
        width: 100%;
        padding: 5px;
    }
    
    .data-table tr {
        margin-bottom: 8px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: white;
        padding: 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
    
    /* Primary info section - نام کاربری، وضعیت، گیگ */
    .data-table tr .mobile-primary-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 5px;
        background: white;
        border-bottom: 1px solid #f1f5f9;
    }
    
    .mobile-primary-left {
        display: grid;
        grid-template-columns: 1fr auto auto;
        align-items: center;
        grid-gap: 12px;
        gap: 12px;
        flex: 1 1;
        min-width: 0;
    }
    
    .mobile-username {
        font-weight: 600;
        font-size: 0.9rem;
        color: #1e293b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 80px;
        text-align: right;
        justify-self: start;
    }
    
    .mobile-gb-info {
        font-size: 0.8rem;
        color: #64748b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 100px;
    }
    
    .mobile-primary-right {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .mobile-status {
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: 500;
        white-space: nowrap;
        min-width: 50px;
        text-align: center;
        justify-self: center;
    }
    
    .mobile-status.active {
        background: #dcfce7;
        color: #166534;
    }
    
    .mobile-status.inactive {
        background: #f1f5f9;
        color: #64748b;
    }
    
    .mobile-status.disabled {
        background: #fee2e2;
        color: #dc2626;
    }
    
    .mobile-status.warning {
        background: #fef3c7;
        color: #d97706;
    }
    
    /* Data info section - حجم اولیه و مصرفی */
    .mobile-data-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 0.65rem;
        color: #64748b;
        min-width: 60px;
        text-align: center;
        flex-shrink: 0;
        justify-self: end;
        /* margin-left: 10px; */
    }
    
    .mobile-data-initial {
        font-weight: 500;
        color: #1e293b;
        white-space: nowrap;
    }
    
    .mobile-data-used {
        font-weight: 400;
        color: #64748b;
        white-space: nowrap;
    }
    
    /* Dropdown toggle button */
    .mobile-dropdown-toggle {
        background: transparent;
        color: #64748b;
        border: 0px solid #e2e8f0;
        border-radius: 4px;
        padding: 4px 8px;
        font-size: 0.7rem;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: all 0.2s ease;
        min-width: 24px;
        height: 24px;
        justify-content: center;
    }
    
    .mobile-dropdown-toggle:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
    }
    
    .mobile-dropdown-toggle svg {
        width: 12px;
        height: 12px;
        transition: transform 0.2s ease;
    }
    
    .mobile-dropdown-toggle.open svg {
        transform: rotate(180deg);
    }
    
    /* Additional info section - بقیه اطلاعات */
    .mobile-additional-info {
        display: none;
        padding: 16px;
        background: white;
        border-top: 1px solid #f1f5f9;
    }
    
    .mobile-additional-info.open {
        display: block;
    }
    
    .mobile-info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f8fafc;
    }
    
    .mobile-info-item:last-child {
        border-bottom: none;
    }
    
    .mobile-info-label {
        font-weight: 600;
        color: #64748b;
        font-size: 10px;
        min-width: 80px;
    }
    
    .mobile-info-value {
        color: #374151;
        font-size: 10px;
        line-height: 1.4;
        word-wrap: break-word;
        max-width: 200px;
        text-align: left;
        flex: 1 1;
        margin-right: 12px;
    }
    
    /* Hide all regular table cells in mobile */
    .data-table td {
        display: none;
    }
    
    /* Show only primary info cells */
    .data-table td.mobile-primary-cell {
        display: block;
        padding: 0;
        border: none;
        min-height: auto;
    }
    
    .data-table td.mobile-additional-cell {
        display: block;
        padding: 0;
        border: none;
        min-height: auto;
    }
    
    /* Remove the ::before pseudo-element for mobile */
    .data-table td::before {
        display: none;
    }
    
    /* Additional mobile styles for better linear layout */
    .mobile-primary-left {
        overflow: hidden;
    }
    
    .mobile-username {
        flex-shrink: 0;
    }
    
    .mobile-gb-info {
        flex-shrink: 0;
    }
    
    .mobile-status {
        flex-shrink: 0;
    }
    
    /* Ensure consistent alignment across all cards */
    .mobile-data-initial {
        font-weight: 500;
        color: #1e293b;
        white-space: nowrap;
        text-align: center;
        min-width: 50px;
    }
    
    .mobile-data-used {
        font-weight: 400;
        color: #64748b;
        white-space: nowrap;
        text-align: center;
        min-width: 50px;
    }
    
    /* Invoice amount styles */
    .mobile-data-initial.positive {
        color: #059669;
        font-weight: 600;
    }
    
    .mobile-data-initial.negative {
        color: #dc2626;
        font-weight: 600;
        margin-left: 10px;
    }
    
    /* Ensure proper spacing in linear layout */
    .mobile-primary-info {
        min-height: 48px;
    }
    
    /* Better visual separation */
    .data-table tr:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
        transition: all 0.2s ease;
    }
    
    .action-icons {
        justify-content: flex-end;
    }
    
    .action-icon {
        width: 20px;
        height: 20px;
    }
    
    .table-create-btn {
        align-self: flex-start;
        min-width: 30px;
        height: 30px;
        padding: 5px 6px;
        border-radius: 6px;
        font-size: 12px;
        margin: 0px 8px;
    }
    
    .mobile-status{
        font-size: 10px !important;
    }
    .table-create-btn svg {
        width: 12px;
        height: 12px;
    }
    .action-btn.deposit-btn,.table-search input,.page-size-select{
        font-size: 10px !important;
    }
    .table-search-row{
        padding: 0px 8px;
    }
    .filter-btn{
        font-size: 10px !important;
        min-height: 30px !important;
    }
    .progress-container {
        align-items: flex-start;
    }
    
    .progress-bar {
        width: 100%;
        max-width: 120px;
    }
    
    .user-info {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        min-width: 0;
        overflow: hidden;
    }
    
    .user-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        flex: 1 1;
        font-size: 10px !important;
    }
    
    .user-subtitle {
        display: none;
    }
    
    .filter-modal {
        min-width: 280px;
        margin: 10px;
        padding: 16px;
    }
    
    .filter-modal-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .filter-select {
        padding-right: 35px;
        background-size: 14px;
        background-position: right 8px center;
    }
}

/* Utility Classes */
.text-center {
    text-align: end;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.font-bold {
    font-weight: 600;
}

.text-sm {
    font-size: 0.875rem;
}

.text-xs {
    font-size: 0.75rem;
}

.text-gray {
    color: #64748b;
}

.text-green {
    color: #10b981;
}

.text-red {
    color: #ef4444;
}

.text-blue {
    color: #1E98BC;
}

/* استایل دکمه Excel */
.table-excel-btn {
    background-color: #059669 !important;
    color: white !important;
    border: 2px solid #059669 !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    margin-right: 8px !important;
    min-width: 44px !important;
    justify-content: center !important;
}

.table-excel-btn:hover {
    background-color: #047857 !important;
    border-color: #047857 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3) !important;
}

.table-excel-btn:active {
    transform: translateY(0) !important;
}

.table-excel-btn svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}



/* اصلاحات موبایل برای نمایش بهتر نام قطعات */
@media (max-width: 768px) {
    .data-table td::before {
        min-width: 0 !important;
        min-width: initial !important;
        width: auto !important;
        margin-left: 8px !important;
    }
    
    .data-table td:first-child::before {
        display: none !important;
    }
    
    .data-table td:first-child {
        padding-right: 4px !important;
    }
    
    .table-excel-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    .table-excel-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Responsive for page size selector in header */
    .table-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    
    .table-actions-top {
        flex-direction: row;
        gap: 12px;
        align-items: center;
        justify-content: space-between;
    }
    
    .table-actions-left {
        justify-content: flex-start;
        width: auto;
    }
    
    .table-actions-right {
        justify-content: flex-end;
        width: auto;
    }
    
    .table-search-row {
        margin-top: 12px;
    }
    
    .page-size-selector-header {
        justify-content: center;
        /* width: 100%; */
    }
}

/* موبایل خیلی کوچک */
@media (max-width: 320px) {
    .table-actions-top {
        flex-direction: row;
        gap: 6px;
        align-items: center;
        justify-content: space-between;
    }
    
    .table-actions-left {
        justify-content: flex-start;
        width: auto;
    }
    
    .table-actions-right {
        justify-content: flex-end;
        width: auto;
    }
    
    .table-search-row {
        margin-top: 8px;
    }
    
    .page-size-selector-header label {
        font-size: 12px;
    }
    
    .page-size-selector-header select {
        font-size: 12px;
        padding: 4px 6px;
    }
}

/* Extra small mobile devices - 380px and below */
@media (max-width: 380px) {
    .mobile-primary-left {
        display: grid;
        /* grid-template-columns: 1fr 80px 100px; */
        align-items: center;
        grid-gap: 8px;
        gap: 8px;
        flex: 1 1;
        min-width: 0;
    }
    
    .mobile-username {
        font-size: 0.75rem;
        font-weight: 600;
        color: #1e293b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 50px;
        text-align: right;
        justify-self: start;
    }
    
    .mobile-status {
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 0.6rem;
        font-weight: 500;
        white-space: nowrap;
        /* width: 100%; */
        text-align: center;
        justify-self: center;
        /* max-width: 70px; */
    }
    
    .mobile-data-info {
        display: flex;
        flex-direction: column;
        gap: 1px;
        font-size: 0.55rem;
        color: #64748b;
        /* width: 100%; */
        text-align: center;
        flex-shrink: 0;
        justify-self: end;
        /* max-width: 90px; */
    }
    
    .mobile-data-initial {
        font-weight: 500;
        color: #1e293b;
        white-space: nowrap;
        text-align: center;
        width: 100%;
        font-size: 0.55rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .mobile-data-used {
        font-weight: 400;
        color: #64748b;
        white-space: nowrap;
        text-align: center;
        width: 100%;
        font-size: 0.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .mobile-data-initial.positive {
        color: #059669;
        font-weight: 600;
        margin-left: 0;
    }
    
    .mobile-data-initial.negative {
        color: #dc2626;
        font-weight: 600;
        margin-left: 10px;
    }
    
    .mobile-primary-info {
        padding: 8px 10px;
        min-height: auto;
    }
    
    .mobile-primary-right {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }
    
    .mobile-dropdown-toggle {
        background: transparent;
        color: #64748b;
        border: 0px solid #e2e8f0;
        border-radius: 4px;
        padding: 3px 10px;        font-size: 0.55rem;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        /* min-width: 18px; */
        height: 18px;
    }
    
    .mobile-dropdown-toggle svg {
        width: 8px;
        height: 8px;
        transition: transform 0.2s ease;
    }
    
    /* Quantity controls for shop tables */
    .quantity-controls {
        display: flex;
        align-items: center;
        gap: 4px;
        justify-content: center;
    }
    
    .quantity-btn {
        width: 20px;
        height: 20px;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        background: #fff;
        color: #374151;
        font-size: 0.7rem;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }
    
    .quantity-btn:hover {
        background: #f3f4f6;
        border-color: #9ca3af;
    }
    
    .quantity-btn.plus {
        color: #059669;
        border-color: #059669;
    }
    
    .quantity-btn.plus:hover {
        background: #059669;
        color: #fff;
    }
    
    .quantity-btn.minus {
        color: #dc2626;
        border-color: #dc2626;
    }
    
    .quantity-btn.minus:hover {
        background: #dc2626;
        color: #fff;
    }
    
    .quantity-display {
        font-size: 0.65rem;
        font-weight: 600;
        color: #1e293b;
        min-width: 20px;
        text-align: center;
    }
    
    /* Pagination improvements for mobile */
    .table-pagination {
        background: #f8fafc !important;
        border-top: 1px solid #e2e8f0 !important;
        padding: 8px 12px !important;
        margin-bottom: 30px !important;
        border-radius: 0 0 8px 8px !important;
    }
    
    .pagination-info {
        font-size: 0.75rem !important;
        text-align: center !important;
        margin-bottom: 8px !important;
        color: #64748b !important;
    }
    
    .pagination-controls {
        justify-content: center !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
    }
    
    .pagination-btn {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
        min-width: 32px !important;
        height: 32px !important;
        border-radius: 4px !important;
    }
    
    .page-size-selector {
        order: 1 !important;
        margin-bottom: 8px !important;
    }
    
    .page-size-select {
        /* padding: 6px 8px !important; */
        font-size: 0.75rem !important;
        /* min-width: 60px !important; */
        height: 32px !important;
    }
}

/* Part name scrollable styles */
@media (max-width: 480px) {
    .part-name-scrollable {
        font-size: 10px;
    }
}

/* Shop page specific styles - remove padding from mobile-status */
.shop-page .mobile-status {
    padding: 0px !important;
}

/* Contact button container for mobile shop */
.contact-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contact button styles to match quantity controls size */
.contact-button-container .btn {
    width: 68px !important;
    height: 20px !important;
    padding: 0 !important;
    font-size: 10px !important;
    min-width: auto !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
}

.contact-button-container .btn svg {
    width: 12px !important;
    height: 12px !important;
}

/* Shop table description styles in mobile dropdown */
.mobile-info-item .mobile-info-value[data-description="true"] {
    font-style: italic;
    color: #6b7280;
    background: #f9fafb;
    padding: 8px;
    border-radius: 6px;
    border-right: 3px solid #e5e7eb;
    margin-top: 4px;
    text-align: right !important;
    direction: rtl !important;
}

/* Style for empty descriptions */
.mobile-info-item .mobile-info-value[data-description="true"][data-empty="true"] {
    color: #9ca3af;
    font-style: normal;
    opacity: 0.7;
    background: #f3f4f6;
    border-right-color: #d1d5db;
}

/* Hide description label in mobile for shop tables */
@media (max-width: 480px) {
    /* Hide the label for description items in mobile */
    .mobile-info-item.mobile-description-item .mobile-info-label {
        display: none !important;
    }
    
    /* Style for description item container - full width */
    .mobile-info-item.mobile-description-item {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
        margin-bottom: 8px !important;
    }
    
    /* Style for description value in mobile - full width */
    .mobile-info-item.mobile-description-item .mobile-info-value {
        font-style: italic;
        color: #6b7280;
        background: #f9fafb;
        padding: 12px;
        border-radius: 8px;
        border-right: 3px solid #e5e7eb;
        margin-top: 0 !important;
        text-align: right !important;
        direction: rtl !important;
        width: 100% !important;
        max-width: none !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }
    
    .mobile-info-item.mobile-description-item .mobile-info-value[data-empty="true"] {
        color: #9ca3af;
        font-style: normal;
        opacity: 0.7;
        background: #f3f4f6;
        border-right-color: #d1d5db;
    }
}

/* Wallet table specific styles */
.wallet-table .mobile-status {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}

.wallet-table .mobile-status.completed {
    background: #dcfce7;
    color: #166534;
}

.wallet-table .mobile-status.pending {
    background: #fef3c7;
    color: #d97706;
}

.wallet-table .mobile-status.failed {
    background: #fee2e2;
    color: #dc2626;
}

.wallet-table .mobile-data-initial {
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
    min-width: 50px;
}

.wallet-table .mobile-data-initial.positive {
    color: #059669;
}

.wallet-table .mobile-data-initial.negative {
    color: #dc2626;
} 
/* استایل‌های کامپوننت AddressCheck */

.address-check-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 20px;
}

.warning-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: var(--border-radius-md);
    padding: 40px;
    max-width: 500px;
    width: 100%;
    box-shadow: var(--shadow-md);
}

.warning-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: #f59e0b;
    border-radius: 50%;
    color: white;
    margin-bottom: 24px;
}

.warning-text {
    margin-bottom: 32px;
}

.warning-text h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #92400e;
    margin: 0 0 12px 0;
}

.warning-text p {
    font-size: 1rem;
    color: #92400e;
    margin: 0;
    line-height: 1.6;
}

.warning-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.complete-address-btn {
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    min-width: 140px;
}

.complete-address-btn:hover {
    background: #d97706;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.cancel-btn {
    background: #6b7280;
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    min-width: 100px;
}

.cancel-btn:hover {
    background: #4b5563;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .address-check-warning {
        min-height: 300px;
        padding: 16px;
    }

    .warning-content {
        padding: 24px;
    }

    .warning-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 16px;
    }

    .warning-text h3 {
        font-size: 1.2rem;
    }

    .warning-text p {
        font-size: 0.9rem;
    }

    .warning-actions {
        flex-direction: column;
        width: 100%;
    }

    .complete-address-btn,
    .cancel-btn {
        width: 100%;
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .warning-content {
        padding: 20px;
    }

    .warning-text h3 {
        font-size: 1.1rem;
    }

    .warning-text p {
        font-size: 0.85rem;
    }

    .complete-address-btn,
    .cancel-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/* انیمیشن */
.address-check-warning {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.warning-content {
    animation: slideInUp 0.4s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
} 
/* Modal Overlay */
.modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.5) !important;
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  padding: 20px !important;
  animation: modalFadeIn 0.3s ease-out !important;
  direction: ltr !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Mobile Overlay - No Background */
@media (max-width: 768px) {
  .modal-overlay {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal Container */
.modal-container {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  border: none !important;
  position: relative !important;
  margin: 0 auto !important;
  direction: rtl !important;
  z-index: 1000000 !important;
  pointer-events: auto !important;
  width: 90% !important;
  max-width: 600px !important;
  -webkit-overflow-scrolling: touch !important;
}

/* جلوگیری از بسته شدن modal با کلیک روی محتوا */
.modal-container * {
  pointer-events: auto !important;
}

/* Mobile Full Screen Modal */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 20px !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: blur(8px) !important;
            backdrop-filter: blur(8px) !important;
  }
  
  .modal-container {
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 16px !important;
    height: auto !important;
    width: 95% !important;
    max-width: 600px !important;
    max-height: 90vh !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    background: #ffffff !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 1000000 !important;
    /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
    pointer-events: auto !important;
  }

  /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
  .modal-container * {
    pointer-events: auto !important;
  }
  
  .modal-header {
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 16px 20px 0 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .modal-content {
    flex: 1 1 !important;
    overflow-y: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .modal-overlay {
    padding: 10px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: blur(8px) !important;
            backdrop-filter: blur(8px) !important;
  }
  
  .modal-container {
    height: auto !important;
    width: 98% !important;
    max-width: 600px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 12px !important;
    /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
    pointer-events: auto !important;
  }

  /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
  .modal-container * {
    pointer-events: auto !important;
  }
  
  .modal-header {
    padding: 12px 16px 0 16px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .modal-title {
    font-size: 1.25rem !important;
  }
}

@media (max-width: 360px) {
  .modal-overlay {
    padding: 5px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: blur(8px) !important;
            backdrop-filter: blur(8px) !important;
  }
  
  .modal-container {
    height: auto !important;
    width: 99% !important;
    max-width: 600px !important;
    max-height: 95vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 8px !important;
    /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
    pointer-events: auto !important;
  }

  /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
  .modal-container * {
    pointer-events: auto !important;
  }
}

@media (max-width: 320px) {
  .modal-overlay {
    padding: 2px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: blur(8px) !important;
            backdrop-filter: blur(8px) !important;
  }
  
  .modal-container {
    height: auto !important;
    width: 100% !important;
    max-width: 600px !important;
    max-height: 98vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 4px !important;
    /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
    pointer-events: auto !important;
  }

  /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
  .modal-container * {
    pointer-events: auto !important;
  }
  
  .modal-header {
    padding: 8px 10px 0 10px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .modal-title {
    font-size: 1rem !important;
  }
  
  .modal-content {
    padding: 8px !important;
    overflow-y: auto !important;
    flex: 1 1 !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(100vh - 80px) !important;
  }
  
  .modal-form-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  
  .modal-buttons {
    flex-direction: column-reverse !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    padding: 6px 8px 8px 8px !important;
    margin-top: 0 !important;
    border-top: 1px solid rgba(30, 152, 188, 0.1) !important;
  }
  
  .modal-button {
    width: 100% !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  
  .modal-input,
  .modal-select,
  .modal-textarea {
    padding: 8px 10px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
  }
  
  .modal-label {
    font-size: 11px !important;
  }
  
  .accordion-header {
    padding: 8px 10px !important;
  }
  
  .accordion-icon {
    width: 28px !important;
    height: 28px !important;
  }
  
  .accordion-title {
    font-size: 12px !important;
  }
  
  .accordion-content {
    padding: 0 10px !important;
  }
  
  .accordion-content.expanded {
    padding: 10px !important;
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== ACCORDION STYLES ===== */
.accordion-container {
  width: 100%;
  max-width: 100%;
}

.accordion-section {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  background: white;
  transition: all 0.3s ease;
}

.accordion-section:last-child {
  margin-bottom: 0;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid #e5e7eb;
}

.accordion-header:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.accordion-header-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1;
}

.accordion-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
  color: white;
  flex-shrink: 0;
}

.accordion-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  text-align: right;
}

.accordion-arrow {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.accordion-arrow.expanded {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 20px;
}

.accordion-content.expanded {
  max-height: 1000px;
  padding: 20px;
}

/* Mobile Accordion Styles */
@media (max-width: 768px) {
  .accordion-section {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-bottom: 12px;
  }
  
  .accordion-header {
    padding: 12px 16px;
  }
  
  .accordion-icon {
    width: 36px;
    height: 36px;
  }
  
  .accordion-title {
    font-size: 14px;
  }
  
  .accordion-content {
    padding: 0 16px;
  }
  
  .accordion-content.expanded {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .accordion-header {
    padding: 10px 12px;
  }
  
  .accordion-icon {
    width: 32px;
    height: 32px;
  }
  
  .accordion-title {
    font-size: 13px;
  }
  
  .accordion-content {
    padding: 0 12px;
  }
  
  .accordion-content.expanded {
    padding: 12px;
  }
}

/* Modal Sizes */
.modal-small {
  width: 100%;
  max-width: 400px;
}

.modal-medium {
  width: 100%;
  max-width: 500px;
}

.modal-large {
  width: 100%;
  max-width: 700px;
}

.modal-xlarge {
  width: 100%;
  max-width: 900px;
}

/* Modal Header */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 28px 32px 20px 32px;
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.05) 0%, rgba(30, 152, 188, 0.02) 100%);
  border-bottom: 1px solid rgba(30, 152, 188, 0.1);
  margin-bottom: 0;
  margin-top: 10px !important;
  position: relative;
  border-radius: 20px 20px 0 0;
  flex-shrink: 0;
  gap: 16px;
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  flex: 1 1;
  text-align: right;
  font-family: 'peyda', sans-serif;
}

.modal-close-button {
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.1) 0%, rgba(30, 152, 188, 0.05) 100%);
  border: 1px solid rgba(30, 152, 188, 0.2);
  color: #1E98BC;
  cursor: pointer;
  padding: 12px;
  border-radius: 12px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
}

.modal-close-button:hover {
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.2) 0%, rgba(30, 152, 188, 0.1) 100%);
  color: #0f4c75;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(30, 152, 188, 0.3);
}

.modal-close-button:active {
  transform: scale(0.95);
}

.modal-close-button svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  flex-shrink: 0;
}

.modal-close-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 152, 188, 0.3);
}

/* Modal Content */
.modal-content {
  padding: 32px;
  flex: 1 1;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  direction: rtl;
  overflow-y: auto !important;
  max-height: none;
  height: 100%;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(30, 152, 188, 0.3) transparent;
  min-height: 0;
}

.modal-content::-webkit-scrollbar {
  width: 6px;
}

.modal-content::-webkit-scrollbar-track {
  background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
  background-color: rgba(30, 152, 188, 0.3);
  border-radius: 3px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(30, 152, 188, 0.5);
}

/* Form Styles */
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.modal-label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  text-align: right;
}

.modal-input,
.modal-select,
.modal-textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgba(30, 152, 188, 0.2);
  border-radius: 12px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  direction: rtl;
  text-align: right;
  font-family: 'peyda', sans-serif;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.modal-input:focus,
.modal-select:focus,
.modal-textarea:focus {
  outline: none;
  border-color: #1E98BC;
  box-shadow: 
    0 0 0 3px rgba(30, 152, 188, 0.1),
    0 8px 25px rgba(30, 152, 188, 0.15);
  transform: translateY(-2px);
  background: #ffffff;
}

.modal-input-disabled {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  color: #64748b;
  cursor: not-allowed;
  border-color: #e2e8f0;
  opacity: 0.8;
  transform: none;
  box-shadow: none;
}

.modal-input-disabled:focus {
  transform: none;
  box-shadow: none;
  border-color: #e2e8f0;
}

.field-info {
  display: inline-block;
  margin-right: 6px;
  color: #1E98BC;
  font-size: 12px;
  cursor: help;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.field-info:hover {
  opacity: 1;
}

.modal-input::placeholder,
.modal-textarea::placeholder {
  color: #9ca3af;
  text-align: right;
}

.modal-textarea {
  resize: vertical;
  min-height: 80px;
}

.modal-select {
  cursor: pointer;
  /* حذف فلش پیش‌فرض مرورگر */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Checkbox and Radio */
.modal-checkbox-group,
.modal-radio-group {
  display: flex;
  align-items: center;
  gap: 8px;
  direction: rtl;
}

.modal-checkbox,
.modal-radio {
  width: 16px;
  height: 16px;
  accent-color: #1E98BC;
}

.modal-checkbox-label,
.modal-radio-label {
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

/* Buttons */
.modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
}

.modal-button {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 100px;
  justify-content: center;
}

.modal-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.modal-button-primary {
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
  color: white;
  box-shadow: 0 8px 25px rgba(30, 152, 188, 0.3);
}

.modal-button-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #0f4c75 0%, #1E98BC 100%);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(30, 152, 188, 0.4);
}

.modal-button-secondary {
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.05) 0%, rgba(30, 152, 188, 0.02) 100%);
  color: #1E98BC;
  border: 1px solid rgba(30, 152, 188, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.modal-button-secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.1) 0%, rgba(30, 152, 188, 0.05) 100%);
  color: #0f4c75;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(30, 152, 188, 0.2);
}

.modal-button-danger {
  background-color: #dc2626;
  color: white;
}

.modal-button-danger:hover:not(:disabled) {
  background-color: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* Loading State */
.modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
  color: #64748b;
  font-family: 'peyda', sans-serif;
}

.modal-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e2e8f0;
  border-top: 2px solid #1E98BC;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Error State */
.modal-error {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-error svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Success State */
.modal-success {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-success svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-start;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
  }
  
  .modal-container {
    max-height: calc(100vh - 80px);
    border-radius: 16px 16px 0 0;
    margin: 80px 0 0 0;
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 80px);
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    animation: modalSlideUp 0.3s ease-out;
  }
  
  .modal-small,
  .modal-medium,
  .modal-large,
  .modal-xlarge {
    max-width: 100%;
    width: 100%;
  }
  
  .modal-header {
    padding: 20px 20px 16px 20px;
    margin-bottom: 0;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(30, 152, 188, 0.05) 0%, rgba(30, 152, 188, 0.02) 100%);
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid rgba(30, 152, 188, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
  }
  
  .modal-title {
    font-size: 1.25rem;
  }
  
  .modal-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 140px);
  }
  
  .modal-form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .modal-buttons {
    flex-direction: column-reverse;
    gap: 12px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 16px 20px 20px 20px;
    margin-top: 0;
    border-top: 1px solid rgba(30, 152, 188, 0.1);
    position: sticky;
    bottom: 0;
    z-index: 10;
  }
  
  .modal-button {
    width: 100%;
    padding: 14px 24px;
  }
}

@media (max-width: 480px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-start;
  }
  
  .modal-container {
    max-height: calc(100vh - 70px);
    border-radius: 12px 12px 0 0;
    margin: 70px 0 0 0;
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 70px);
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .modal-header {
    padding: 16px 16px 12px 16px;
    margin-bottom: 0;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(30, 152, 188, 0.05) 0%, rgba(30, 152, 188, 0.02) 100%);
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid rgba(30, 152, 188, 0.1);
  }
  
  .modal-title {
    font-size: 1.1rem;
  }
  
  .modal-content {
    padding: 16px;
    overflow-y: auto;
    flex: 1 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 120px);
  }
  
  .modal-form-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .modal-buttons {
    flex-direction: column-reverse;
    gap: 10px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 12px 16px 16px 16px;
    margin-top: 0;
    border-top: 1px solid rgba(30, 152, 188, 0.1);
  }
  
  .modal-button {
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
  }
  
  .modal-input,
  .modal-select,
  .modal-textarea {
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 8px;
  }
  
  .modal-label {
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-start;
  }
  
  .modal-container {
    max-height: calc(100vh - 60px);
    border-radius: 8px 8px 0 0;
    margin: 60px 0 0 0;
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 60px);
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .modal-header {
    padding: 12px 12px 8px 12px;
    margin-bottom: 0;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(30, 152, 188, 0.05) 0%, rgba(30, 152, 188, 0.02) 100%);
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid rgba(30, 152, 188, 0.1);
  }
  
  .modal-title {
    font-size: 1rem;
  }
  
  .modal-content {
    padding: 12px;
    overflow-y: auto;
    flex: 1 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 100px);
  }
  
  .modal-form-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .modal-buttons {
    flex-direction: column-reverse;
    gap: 8px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 8px 12px 12px 12px;
    margin-top: 0;
    border-top: 1px solid rgba(30, 152, 188, 0.1);
  }
  
  .modal-button {
    width: 100%;
    padding: 10px 16px;
    font-size: 13px;
  }
  
  .modal-input,
  .modal-select,
  .modal-textarea {
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 6px;
  }
  
  .modal-label {
    font-size: 12px;
  }
}

/* Add slide-up animation for mobile modals */
@keyframes modalSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* استایل‌های خاص برای مودال‌های VPN کاربران */
.vpn-user-modal {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid #e5e7eb;
}

.vpn-user-modal .modal-header {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 16px 16px 0 0;
  padding: 20px 24px;
}

.vpn-user-modal form {
  padding: 24px;
  overflow-y: auto;
  flex: 1 1;
}

.vpn-user-modal input,
.vpn-user-modal select,
.vpn-user-modal textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.vpn-user-modal input:focus,
.vpn-user-modal select:focus,
.vpn-user-modal textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.vpn-user-modal label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.vpn-user-modal .data-limit-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.vpn-user-modal .data-limit-group input {
  width: 100%;
  padding-right: 80px !important;
}

.vpn-user-modal .data-limit-group div {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #6b7280;
  pointer-events: none;
  z-index: 1;
}

.vpn-user-modal .cost-summary {
  margin-bottom: 20px;
  padding: 12px;
  background: #f0f9ff;
  border: 1px solid #0ea5e9;
  border-radius: 6px;
}

.vpn-user-modal .cost-summary div {
  font-size: 13px;
  color: #0c4a6e;
  margin-bottom: 4px;
}

.vpn-user-modal .cost-summary div:last-child {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0;
}

.vpn-user-modal .modal-buttons {
  padding: 16px 0 0 0;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.vpn-user-modal .modal-buttons button {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vpn-user-modal .modal-buttons button[type="button"] {
  background: white;
  border: 1px solid #d1d5db;
  color: #374151;
}

.vpn-user-modal .modal-buttons button[type="submit"] {
  background: #3b82f6;
  border: none;
  color: white;
  font-weight: 500;
}

.vpn-user-modal .modal-buttons button[type="submit"]:disabled {
  background: #93c5fd;
  cursor: not-allowed;
}

/* انیمیشن اعلان کپی شدن */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes slideInDown {
  from {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

@keyframes slideOutUp {
  from {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  to {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
  }
}

/* ریسپانسیو برای مودال‌های VPN */
@media (max-width: 768px) {
  .vpn-user-modal {
    border-radius: 12px;
    margin: 10px;
    max-height: 85vh;
  }
  
  .vpn-user-modal .modal-header {
    border-radius: 12px 12px 0 0;
    padding: 16px 20px;
  }
  
  .vpn-user-modal form {
    padding: 20px;
  }
  
  .vpn-user-modal .data-limit-group {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  
  .vpn-user-modal .data-limit-group input {
    padding-right: 80px !important;
  }
  
  .vpn-user-modal .data-limit-group div {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .vpn-user-modal .modal-buttons {
    flex-direction: column-reverse;
    gap: 10px;
  }
  
  .vpn-user-modal .modal-buttons button {
    width: 100%;
    padding: 12px 16px;
  }
}

@media (max-width: 480px) {
  .vpn-user-modal {
    border-radius: 8px;
    margin: 5px;
    max-height: 90vh;
  }
  
  .vpn-user-modal .modal-header {
    border-radius: 8px 8px 0 0;
    padding: 12px 16px;
  }
  
  .vpn-user-modal form {
    padding: 16px;
  }
  
  .vpn-user-modal input,
  .vpn-user-modal select,
  .vpn-user-modal textarea {
    padding: 10px 12px;
    font-size: 14px;
  }
  
  .vpn-user-modal label {
    font-size: 13px;
    margin-bottom: 6px;
  }
  
  .vpn-user-modal .cost-summary {
    padding: 10px;
  }
  
  .vpn-user-modal .cost-summary div {
    font-size: 12px;
  }
  
  .vpn-user-modal .cost-summary div:last-child {
    font-size: 13px;
  }
  
  .vpn-user-modal .modal-buttons {
    padding: 12px 0 0 0;
    gap: 8px;
  }
  
  .vpn-user-modal .modal-buttons button {
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* استایل‌های خاص برای مودال جزئیات فاکتور */
.invoice-detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.invoice-detail-value {
  padding: 8px 0;
  font-weight: 500;
  color: #374151;
}

.invoice-number-value {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: #1E98BC;
  font-size: 0.9rem;
}

.invoice-amount-value {
  font-weight: 600;
  color: #1E98BC;
}

.invoice-discount-value {
  font-weight: 600;
  color: #dc2626;
}

.invoice-final-amount {
  font-weight: 600;
  color: #059669;
  font-size: 1.1rem;
}

.invoice-type-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
  color: white;
  display: inline-block;
}

.invoice-status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  display: inline-block;
}

.invoice-status-badge.paid {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.invoice-status-badge.pending {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fde68a;
}

.invoice-status-badge.expired {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

/* ریسپانسیو برای مودال جزئیات فاکتور */
@media (max-width: 768px) {
  .invoice-detail-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .invoice-detail-value {
    padding: 6px 0;
  }
  
  .invoice-number-value {
    font-size: 0.8rem;
  }
  
  .invoice-final-amount {
    font-size: 1rem;
  }
  
  .invoice-type-badge,
  .invoice-status-badge {
    font-size: 0.75rem;
    padding: 3px 10px;
  }
}

@media (max-width: 480px) {
  .invoice-detail-row {
    gap: 10px;
  }
  
  .invoice-detail-value {
    padding: 5px 0;
  }
  
  .invoice-number-value {
    font-size: 0.75rem;
  }
  
  .invoice-final-amount {
    font-size: 0.95rem;
  }
  
  .invoice-type-badge,
  .invoice-status-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
  }
}

/* استایل‌های ریسپانسیو برای مودال‌های کاربران */
@media (max-width: 768px) {
  .user-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  .user-detail-buttons {
    flex-direction: column-reverse !important;
    gap: 10px !important;
  }
  
  .user-detail-buttons button {
    width: 100% !important;
    padding: 12px 16px !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  .user-detail-grid {
    gap: 6px !important;
  }
  
  .user-detail-buttons {
    gap: 8px !important;
  }
  
  .user-detail-buttons button {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  
  .create-user-buttons,
  .edit-user-buttons {
    flex-direction: column-reverse !important;
    gap: 10px !important;
  }
  
  .create-user-buttons button,
  .edit-user-buttons button {
    width: 100% !important;
    padding: 12px 16px !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  .user-detail-grid {
    gap: 6px !important;
  }
  
  .user-detail-buttons {
    gap: 8px !important;
  }
  
  .user-detail-buttons button {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  
  .create-user-buttons,
  .edit-user-buttons {
    gap: 8px !important;
  }
  
  .create-user-buttons button,
  .edit-user-buttons button {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  
  .create-user-form-grid,
  .edit-user-form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .create-user-access-grid,
  .edit-user-access-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .marzban-panel-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  .user-financial-grid,
  .user-usage-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .user-panel-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  .user-access-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  /* بهبود نمایش کارت‌های مالی در موبایل */
  .user-financial-grid > div,
  .user-usage-grid > div {
    padding: 12px !important;
  }
  
  .user-financial-grid > div > div:first-child,
  .user-usage-grid > div > div:first-child {
    font-size: 18px !important;
  }
  
  .user-financial-grid > div > div:last-child,
  .user-usage-grid > div > div:last-child {
    font-size: 11px !important;
  }
  
  /* بهبود نمایش پنل‌ها در موبایل */
  .user-panel-grid > div {
    padding: 8px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }
  
  .user-panel-grid > div:last-child {
    border-bottom: none !important;
  }
  
  /* بهبود نمایش دسترسی‌ها در موبایل */
  .user-access-grid > div {
    padding: 8px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }
  
  .user-access-grid > div:last-child {
    border-bottom: none !important;
  }
  
  /* بهبود نمایش آدرس پنل و توضیحات در موبایل */
  .panel-url-item,
  .panel-description-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  
  .panel-url-item > span:first-child,
  .panel-description-item > span:first-child {
    margin-left: 0 !important;
    margin-bottom: 2px !important;
  }
  
  .panel-url-item > span:last-child,
  .panel-description-item > span:last-child {
    width: 100% !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
  }
  
  .panel-url-item a,
  .panel-description-item span:last-child {
    display: block !important;
    width: 100% !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
  }
  
  /* بهبود نمایش آخرین ورود در موبایل */
  .last-login-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  
  .last-login-item > span:first-child {
    margin-left: 0 !important;
    margin-bottom: 2px !important;
  }
  
  .last-login-item > span:last-child {
    width: 100% !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
  }
}

/* ===== RESPONSIVE FOR VERY SMALL SCREENS (60px and below) ===== */
@media (max-width: 60px) {
  /* Force all modals to be responsive */
  .modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    -webkit-backdrop-filter: blur(10px) !important;
            backdrop-filter: blur(10px) !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  
  .modal-container {
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1000000 !important;
  }
  
  .modal-content {
    padding: 4px !important;
    height: 100% !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .modal-close-button {
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    z-index: 1000 !important;
    padding: 4px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    font-size: 10px !important;
  }
  
  .modal-close-button svg {
    width: 12px !important;
    height: 12px !important;
  }
  
  .modal-form-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  
  .modal-form-actions {
    flex-direction: column !important;
    gap: 4px !important;
  }
  
  .wallet-tabs {
    flex-direction: column !important;
    gap: 2px !important;
  }
  
  .wallet-tab {
    border-radius: 4px !important;
    text-align: center !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
  }
  
  .modal-btn {
    width: 100% !important;
    margin-bottom: 4px !important;
    min-height: 32px !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
  }
  
  .modal-input,
  .modal-select {
    width: 100% !important;
    font-size: 12px !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
  }
  
  .modal-form-group {
    margin-bottom: 8px !important;
  }
  
  .modal-form-group label {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }
}

/* ===== MODAL COMMON STYLES ===== */
/* استایل‌های مشترک که در جاهای مختلف استفاده می‌شوند */

/* ===== MODAL OVERLAY و CONTAINER اصلی ===== */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-container.show {
    opacity: 1;
    pointer-events: auto;
}

.modern-modal-container {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    width: 90% !important;
    max-width: 600px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    margin: 0 auto !important;
    position: relative !important;
    -webkit-overflow-scrolling: touch !important;
    /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
    pointer-events: auto !important;
}

/* جلوگیری از بسته شدن modal با کلیک روی محتوا */
.modern-modal-container * {
    pointer-events: auto !important;
}

/* ===== BUTTONS ===== */
.action-buttons {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(30, 152, 188, 0.1);
}

.btn {
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  border: none;
  min-width: 120px;
  justify-content: center;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.3);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #0f4c75 0%, #1E98BC 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(30, 152, 188, 0.4);
}

.btn-secondary {
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.05) 0%, rgba(30, 152, 188, 0.02) 100%);
  color: #64748b;
  border: 1px solid rgba(30, 152, 188, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.btn-secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.1) 0%, rgba(30, 152, 188, 0.05) 100%);
  color: #475569;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.2);
}

.btn-danger {
  background: #ef4444;
  color: white;
  border: 1px solid #ef4444;
}

.btn-danger:hover:not(:disabled) {
  background: #dc2626;
  border-color: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

.btn-success {
  background: #10b981;
  color: white;
  border: 1px solid #10b981;
}

.btn-success:hover:not(:disabled) {
  background: #059669;
  border-color: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

/* ===== SECTIONS ===== */
.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.05) 0%, rgba(30, 152, 188, 0.02) 100%);
  border-bottom: 1px solid rgba(30, 152, 188, 0.1);
}

.section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
  border-radius: 12px;
  color: white;
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.3);
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-content {
  padding: 24px;
}

/* ===== STATUS BADGES ===== */
.status-badge,
.role-badge {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.status-badge.active,
.role-badge.active {
  color: #10b981;
  background-color: #d1fae5;
}

.status-badge.inactive,
.role-badge.inactive {
  color: #6b7280;
  background-color: #f3f4f6;
}

.status-badge.warning,
.role-badge.warning {
  color: #d97706;
  background-color: #fef3c7;
}

.status-badge.danger,
.role-badge.danger {
  color: #dc2626;
  background-color: #fee2e2;
}

/* ===== MESSAGES ===== */
.error-message {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 0.9rem;
}

.success-message {
  background: #d1fae5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 0.9rem;
}

.warning-message {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 0.9rem;
}

/* ===== LOADING STATES ===== */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #64748b;
  gap: 16px;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top: 3px solid #1E98BC;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== EMPTY STATES ===== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #64748b;
  gap: 16px;
  text-align: center;
}

.empty-icon {
  font-size: 48px;
  opacity: 0.5;
}

/* ===== WARNING COMPONENTS ===== */
.warning-content {
  flex: 1 1;
}

.warning-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #92400e;
  margin: 0 0 8px 0;
}

.warning-content p {
  font-size: 0.9rem;
  color: #92400e;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.warning-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #f59e0b;
  border-radius: 50%;
  color: white;
  flex-shrink: 0;
}

.complete-address-btn {
  background: #f59e0b;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.complete-address-btn:hover {
  background: #d97706;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}

.cancel-btn {
  background: #6b7280;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn:hover {
  background: #4b5563;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(107, 114, 128, 0.3);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .action-buttons {
    flex-direction: column-reverse;
    gap: 12px;
  }
  
  .btn {
    width: 100%;
  }
  
  .section-header {
    padding: 16px 20px;
  }
  
  .section-content {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .section-header {
    padding: 12px 16px;
  }
  
  .section-content {
    padding: 16px;
  }
  
  .warning-content h3 {
    font-size: 1rem;
  }
  
  .warning-content p {
    font-size: 0.85rem;
  }
}

/* ===== MODAL STYLES - SYSTEM (DESKTOP) ===== */
/* فایل استایل‌های سیستم (دسکتاپ) برای تمام modal ها */

/* متغیرهای اصلی */
:root {
    --modal-overlay-bg: rgba(0, 0, 0, 0.5);
    --modal-bg: #ffffff;
    --modal-border-radius: 16px;
    --modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --modal-z-index: 999999;
    --modal-transition: all 0.3s ease;
}

/* ===== OVERLAY و CONTAINER اصلی ===== */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    z-index: var(--modal-z-index) !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    background-color: var(--modal-overlay-bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-container.show {
    opacity: 1;
    pointer-events: auto;
}

.modern-modal-container {
    background-color: #ffffff !important;
    background-color: var(--modal-bg) !important;
    border-radius: 16px !important;
    border-radius: var(--modal-border-radius) !important;
    width: 90% !important;
    max-width: 600px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    box-shadow: var(--modal-shadow) !important;
    margin: 0 auto !important;
    position: relative !important;
    -webkit-overflow-scrolling: touch !important;
    /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
    pointer-events: auto !important;
}

/* جلوگیری از بسته شدن modal با کلیک روی محتوا */
.modern-modal-container * {
    pointer-events: auto !important;
}

/* ===== MODAL CONTENT ===== */
.modal-content {
    background: #ffffff !important;
    background: var(--modal-bg) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    max-width: 600px !important;
    width: 90% !important;
    overflow-y: auto !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    box-shadow: var(--modal-shadow) !important;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-container.show .modal-content {
    transform: translateY(0);
}

/* ===== MODAL HEADER ===== */
.modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    position: sticky !important;
    top: 0 !important;
    background: white !important;
    z-index: 10 !important;
    border-radius: 16px 16px 0 0 !important;
    border-radius: var(--modal-border-radius) var(--modal-border-radius) 0 0 !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.modal-header h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.2rem;
    color: #1E98BC;
    margin: 0;
}

.modal-header h2 i {
    font-size: 1.2rem;
}

.modal-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.modal-header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    margin: -24px -24px 24px -24px;
    border-radius: 16px 16px 0 0;
}

.modal-header-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ===== MODAL CLOSE BUTTON ===== */
.modal-close {
    background: none !important;
    border: none !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    color: #64748b !important;
    cursor: pointer !important;
    padding: 0 !important;
}

.modal-close-btn {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #6b7280;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
    font-size: 18px;
}

.modal-close-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

.close-button {
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    cursor: pointer !important;
    color: #6b7280 !important;
    padding: 4px !important;
    border-radius: 4px !important;
    transition: background-color 0.2s !important;
}

.close-button:hover {
    background-color: #f3f4f6 !important;
}

/* ===== MODAL BODY ===== */
.modal-body {
    padding: 24px;
}

/* ===== MODAL SECTIONS ===== */
.modal-section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
}

.modal-section:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.modal-section.no-hover:hover {
    border-color: #e5e7eb;
    box-shadow: none;
}

.modal-section-header {
    padding: 16px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
}

.modal-section-header:hover {
    background: #f1f5f9;
}

.modal-section.no-hover .modal-section-header:hover {
    background: #f8fafc;
}

.modal-section-icon {
    width: 20px;
    height: 20px;
    color: #6b7280;
    flex-shrink: 0;
}

.modal-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
    flex: 1 1;
}

.modal-section-content {
    padding: 20px;
}

/* ===== COLLAPSIBLE SECTIONS ===== */
.collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 16px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
}

.collapsible-header:hover {
    background: #f1f5f9;
}

.collapsible-arrow {
    width: 20px;
    height: 20px;
    color: #6b7280;
    transition: transform 0.3s ease;
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.collapsible-content.expanded {
    max-height: 1000px;
}

.collapsible-content.collapsed {
    max-height: 0;
}

/* ===== FORMS ===== */
.modal-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.modal-form-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.modal-form-row.full-width {
    flex-direction: column;
}

.modal-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1;
}

.modal-form-group.full-width {
    width: 100%;
}

.modal-form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 4px;
}

.modal-form-label.required::after {
    content: '*';
    color: #ef4444;
    font-size: 1rem;
}

/* ===== INPUTS ===== */
.modal-input {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
    background: #ffffff;
    font-family: inherit;
}

.modal-input:focus {
    outline: none;
    border-color: #1E98BC;
    box-shadow: 0 0 0 3px rgba(30, 152, 188, 0.1);
}

.modal-input.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.modal-input:disabled,
.modal-input-disabled {
    background: #f9fafb;
    color: #6b7280;
    cursor: not-allowed;
}

.modal-select {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
    /* حذف فلش پیش‌فرض مرورگر */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.modal-select:focus {
    outline: none;
    border-color: #1E98BC;
    box-shadow: 0 0 0 3px rgba(30, 152, 188, 0.1);
}

.modal-textarea {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
    background: #ffffff;
}

.modal-textarea:focus {
    outline: none;
    border-color: #1E98BC;
    box-shadow: 0 0 0 3px rgba(30, 152, 188, 0.1);
}

/* ===== TEXT UTILITIES ===== */
.modal-text-sm {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.4;
}

.modal-font-bold {
    font-weight: 600;
}

/* ===== INFO DISPLAY ===== */
.modal-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 16px;
    gap: 16px;
}

.modal-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-info-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
}

.modal-info-value {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

/* ===== STATS GRID ===== */
.modal-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 16px;
    gap: 16px;
    margin: 20px 0;
}

.modal-stat-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
}

.modal-stat-card:hover {
    background: #f1f5f9;
    border-color: #d1d5db;
}

.modal-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E98BC;
    margin-bottom: 4px;
}

.modal-stat-label {
    font-size: 0.875rem;
    color: #6b7280;
}

/* ===== BADGES ===== */
.modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.modal-badge.success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.modal-badge.warning {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fde68a;
}

.modal-badge.error {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

.modal-badge.info {
    background: #dbeafe;
    color: #2563eb;
    border: 1px solid #93c5fd;
}

.modal-badge.neutral {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

/* ===== BUTTONS ===== */
.modal-btn {
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    background: transparent;
    font-family: inherit;
}

.modal-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.modal-btn-primary {
    background: #1E98BC;
    color: white;
    border-color: #1E98BC;
}

.modal-btn-primary:hover:not(:disabled) {
    background: #167a96;
    border-color: #167a96;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 152, 188, 0.4);
}

.modal-btn-secondary {
    background: #f8fafc;
    color: #374151;
    border-color: #d1d5db;
}

.modal-btn-secondary:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #9ca3af;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-btn-success {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

.modal-btn-success:hover:not(:disabled) {
    background: #059669;
    border-color: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* ===== ACTION BUTTONS ===== */
.modal-action-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

/* ===== SUBMIT SECTION ===== */
.submit-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.submit-btn {
    padding: 12px 32px;
    background: #1E98BC;
    color: white;
    border: 2px solid #1E98BC;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
}

.submit-btn:hover:not(:disabled) {
    background: #167a96;
    border-color: #167a96;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 152, 188, 0.4);
}

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.cancel-btn {
    padding: 12px 24px;
    background: #f8fafc;
    color: #374151;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
}

.cancel-btn:hover {
    background: #f1f5f9;
    border-color: #9ca3af;
}

/* ===== CHECKBOXES ===== */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #374151;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #1E98BC;
}

/* ===== CATEGORY SELECT ===== */
.category-select-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-select {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    background: #ffffff;
    cursor: pointer;
}

.add-category-btn {
    padding: 8px 16px;
    background: #f8fafc;
    color: #1E98BC;
    border: 2px solid #1E98BC;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
    align-self: flex-start;
}

.add-category-btn:hover {
    background: #1E98BC;
    color: white;
}

.new-category-section {
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-top: 12px;
}

.new-category-input-container {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.new-category-input {
    flex: 1 1;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.9rem;
}

.create-category-btn {
    padding: 10px 16px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
}

.create-category-btn:hover {
    background: #059669;
}

.cancel-category-btn {
    padding: 10px 16px;
    background: #f3f4f6;
    color: #374151;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
}

.cancel-category-btn:hover {
    background: #e5e7eb;
}

/* ===== MARZBAN PANELS ===== */
.marzban-panel {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.marzban-panel-header {
    padding: 12px 16px;
    background: #f1f5f9;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.marzban-panel-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}

.add-panel-btn {
    padding: 8px 16px;
    background: #1E98BC;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
}

.add-panel-btn:hover {
    background: #167a96;
}

.remove-panel-btn {
    padding: 6px 12px;
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
}

.remove-panel-btn:hover {
    background: #fecaca;
}

/* ===== LOADING STATES ===== */
.modal-loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: #6b7280;
}

.modal-loading-spinner::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #e5e7eb;
    border-top: 2px solid #1E98BC;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== EMPTY STATES ===== */
.modal-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
}

.modal-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

.modal-empty-state h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.modal-empty-state p {
    font-size: 1rem;
    color: #6b7280;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* ===== UTILITY CLASSES ===== */
.modal-mt-4 {
    margin-top: 1rem;
}

.full-width {
    width: 100% !important;
}

.required {
    color: #ef4444;
}

.error {
    color: #ef4444;
    border-color: #ef4444 !important;
}

.success {
    color: #10b981;
}

.warning {
    color: #f59e0b;
}

.info {
    color: #3b82f6;
}

.neutral {
    color: #6b7280;
}

.no-hover {
    cursor: default !important;
}

.no-hover:hover {
    background: inherit !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ===== SPECIAL MODALS ===== */
.vpn-user-modal {
    max-width: 800px;
    width: 95%;
}

.data-limit-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cost-summary {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.modal-large {
    max-width: 900px;
    width: 95%;
}

.wallet-tabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 24px;
}

.wallet-tab {
    padding: 12px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
}

.wallet-tab.active {
    color: #1E98BC;
    border-bottom-color: #1E98BC;
}

.wallet-tab:hover {
    color: #374151;
}

.modal-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

/* ===== TABLES ===== */
.modal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.modal-table th,
.modal-table td {
    padding: 12px;
    text-align: right;
    border-bottom: 1px solid #e5e7eb;
}

.modal-table th {
    background: #f8fafc;
    font-weight: 600;
    color: #374151;
}

.modal-table td {
    color: #6b7280;
}

/* ===== LISTS ===== */
.modal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal-list-item {
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-list-item:last-child {
    border-bottom: none;
}

/* ===== FILE UPLOAD ===== */
.modal-file-upload {
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
    cursor: pointer;
}

.modal-file-upload:hover {
    border-color: #1E98BC;
    background: #f8fafc;
}

.modal-file-upload.active {
    border-color: #1E98BC;
    background: #eff6ff;
}

/* ===== TABS ===== */
.modal-tabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 20px;
}

.modal-tab {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
}

.modal-tab.active {
    color: #1E98BC;
    border-bottom-color: #1E98BC;
}

.modal-tab:hover {
    color: #374151;
}

.modal-tab-content {
    padding: 20px 0;
}

/* ===== SPECIFIC MODAL STYLES ===== */
.create-part-modal,
.create-user-modal,
.edit-part-modal,
.edit-user-modal,
.treasury-modal {
    max-width: 700px;
    width: 95%;
}

/* ===== WEBSITE USER DETAIL MODAL STYLES ===== */

.user-detail-container {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
  direction: rtl;
}

/* استایل‌های مخصوص مودال خزانه */
.treasury-modal.user-detail-container {
  padding: 0;
  max-height: 70vh;
  overflow-y: auto;
  direction: rtl;
}

/* استایل‌های کلی برای تمام مودال‌ها */
.user-detail-container {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
  direction: rtl;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* استایل‌های CollapsibleSection برای مودال خزانه */
.treasury-modal .modal-section {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.treasury-modal .modal-section:last-child {
  margin-bottom: 0;
}

.treasury-modal .collapsible-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  cursor: pointer;
}

.treasury-modal .collapsible-header:hover {
  background: #f3f4f6;
}

.treasury-modal .modal-section-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  flex-shrink: 0;
}

.treasury-modal .modal-section-icon svg {
  width: 20px;
  height: 20px;
  color: white;
}

.treasury-modal .modal-section-title {
  flex: 1 1;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  text-align: right;
}

.treasury-modal .collapsible-arrow {
  margin-right: 8px;
  color: #6b7280;
  transition: all 0.3s ease;
}

.treasury-modal .collapsible-content {
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
}

.treasury-modal .modal-section-content {
  padding: 20px;
}

/* ===== DETAIL SECTIONS ===== */

.detail-section {
  margin-bottom: 32px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  border: 1px solid rgba(30, 152, 188, 0.1);
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.detail-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
  border-color: rgba(30, 152, 188, 0.2);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.05) 0%, rgba(30, 152, 188, 0.02) 100%);
  border-bottom: 1px solid rgba(30, 152, 188, 0.1);
}

.section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
  border-radius: 12px;
  color: white;
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.3);
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-content {
  padding: 24px;
}

/* ===== INFO GRID ===== */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border-radius: 12px;
  border: 1px solid rgba(30, 152, 188, 0.1);
  transition: all 0.3s ease;
}

.info-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.1);
  border-color: rgba(30, 152, 188, 0.2);
}

.info-item.full-width {
  grid-column: 1 / -1;
  align-items: flex-start;
}

.info-label {
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
  margin-left: 12px;
}

.info-value {
  color: #1e293b;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  word-break: break-word;
  flex: 1 1;
}

/* ===== STATS GRID ===== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.stat-card {
  text-align: center;
  padding: 24px 20px;
  background: white;
  border-radius: 16px;
  border: 1px solid rgba(30, 152, 188, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(30, 152, 188, 0.15);
}

.stat-value {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 8px;
  display: block;
}

.stat-value.balance {
  color: #10b981;
}

.stat-value.orders {
  color: #1e293b;
}

.stat-value.spent {
  color: #d97706;
}

.stat-value.usage {
  color: #1e293b;
}

.stat-value.cost {
  color: #dc2626;
}

.stat-value.credit {
  color: #8b5cf6;
}

.stat-label {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

/* ===== PANELS CONTAINER ===== */

.panels-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-card {
  padding: 20px;
  background: white;
  border-radius: 16px;
  border: 1px solid rgba(30, 152, 188, 0.1);
  position: relative;
  transition: all 0.3s ease;
}

.panel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(30, 152, 188, 0.1);
  border-color: rgba(30, 152, 188, 0.2);
}

.default-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.panel-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.panel-row.full-width {
  grid-column: 1 / -1;
  align-items: flex-start;
}

.panel-label {
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
  margin-left: 12px;
}

.panel-value {
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  word-break: break-word;
  flex: 1 1;
}

.panel-link {
  color: #1E98BC;
  text-decoration: none;
  word-break: break-all;
  transition: color 0.3s ease;
}

.panel-link:hover {
  color: #0f4c75;
  text-decoration: underline;
}

.panel-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.panel-status.active {
  color: #10b981;
  background-color: #d1fae5;
}

.panel-status.inactive {
  color: #6b7280;
  background-color: #f3f4f6;
}

/* ===== USAGE DETAILS ===== */

.usage-details {
  margin-top: 24px;
}

.usage-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(30, 152, 188, 0.1);
}

.usage-panels {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.usage-panel {
  padding: 16px;
  background: white;
  border-radius: 12px;
  border: 1px solid rgba(30, 152, 188, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.usage-panel:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.1);
}

.usage-panel-info {
  flex: 1 1;
}

.usage-panel-name {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 4px;
}

.usage-panel-username {
  font-size: 12px;
  color: #64748b;
}

.usage-panel-stats {
  text-align: left;
  margin-left: 20px;
}

.usage-panel-usage {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2px;
}

.usage-panel-cost {
  font-size: 13px;
  color: #dc2626;
  font-weight: 600;
  margin-bottom: 2px;
}

.usage-panel-price {
  font-size: 11px;
  color: #64748b;
}

.last-updated {
  font-size: 11px;
  color: #64748b;
  text-align: center;
  margin-top: 16px;
  padding: 8px;
  background: rgba(30, 152, 188, 0.05);
  border-radius: 8px;
}

/* ===== STATUS BADGES ===== */

.status-badge,
.role-badge {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.address-status {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.address-status.complete {
  color: #10b981;
  background-color: #d1fae5;
}

.address-status.incomplete {
  color: #dc2626;
  background-color: #fee2e2;
}

.access-status {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.access-status.active {
  color: #10b981;
  background-color: #d1fae5;
}

.access-status.inactive {
  color: #6b7280;
  background-color: #f3f4f6;
}

/* ===== LOADING STATES ===== */

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #64748b;
  gap: 16px;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top: 3px solid #1E98BC;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== EMPTY STATES ===== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #64748b;
  gap: 16px;
  text-align: center;
}

.empty-icon {
  font-size: 48px;
  opacity: 0.5;
}

/* ===== ACTION BUTTONS ===== */

.action-buttons {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(30, 152, 188, 0.1);
}

.btn {
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  border: none;
  min-width: 120px;
  justify-content: center;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.3);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #0f4c75 0%, #1E98BC 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(30, 152, 188, 0.4);
}

.btn-secondary {
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.05) 0%, rgba(30, 152, 188, 0.02) 100%);
  color: #64748b;
  border: 1px solid rgba(30, 152, 188, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.btn-secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.1) 0%, rgba(30, 152, 188, 0.05) 100%);
  color: #475569;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.2);
}

/* ===== ACCORDION STYLES ===== */
.accordion-container {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    /* overflow: hidden; */
}

.accordion-section {
    border-bottom: 1px solid #e5e7eb;
}

.accordion-section:last-child {
    border-bottom: none;
}

.accordion-header {
    background: #f8fafc;
    border: none;
    width: 100%;
    padding: 16px 20px;
    text-align: right;
    cursor: pointer;
    transition: all 0.3s ease;
    transition: var(--modal-transition);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.accordion-header:hover {
    background: #f1f5f9;
}

.accordion-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.accordion-icon {
    width: 20px;
    height: 20px;
    color: #6b7280;
}

.accordion-title {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.accordion-arrow {
    width: 20px;
    height: 20px;
    color: #9ca3af;
    transition: transform 0.3s ease;
}

.accordion-section.expanded .accordion-arrow {
    transform: rotate(180deg);
}

.accordion-content {
    padding: 20px;
    background: #ffffff;
}

/* ===== EDIT PART MODAL STYLES ===== */
.edit-part-modal {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
  direction: rtl;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.edit-part-modal .modal-header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
  margin: -24px -24px 24px -24px;
  border-radius: 16px 16px 0 0;
}

.edit-part-modal .modal-header-title h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.edit-part-modal .modal-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  color: #6b7280;
  transition: all 0.2s ease;
}

.edit-part-modal .modal-close-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.edit-part-modal .modal-form {
  padding: 0;
}

.edit-part-modal .category-select-container {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.edit-part-modal .new-category-input-container {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.edit-part-modal .submit-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ===== RESPONSIVE CONSIDERATIONS ===== */
/* در فایل سیستم، فقط استایل‌های دسکتاپ قرار می‌دهیم */
/* استایل‌های موبایل در فایل جداگانه خواهند بود */

/* ===== MODAL STYLES - MOBILE ===== */
/* فایل استایل‌های موبایل برای تمام modal ها */

/* ===== MOBILE BREAKPOINTS ===== */
/* 768px به پایین - تبلت و موبایل */
/* 480px به پایین - موبایل */  
/* 360px به پایین - موبایل کوچک */
/* 320px به پایین - موبایل خیلی کوچک */

/* ===== MOBILE OVERLAY و CONTAINER ===== */
@media (max-width: 768px) {
    .modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 999999 !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .modal-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        pointer-events: none;
        transition: opacity 0.3s ease;
        height: 100vh !important;
    }

    .modal-container.show {
        opacity: 1;
        pointer-events: auto;
    }

    .modern-modal-container {
        background-color: #ffffff !important;
        border-radius: 16px !important;
        width: 95% !important;
        max-width: 600px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
        margin: 0 auto !important;
        position: relative !important;
        -webkit-overflow-scrolling: touch !important;
        /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
        pointer-events: auto !important;
    }

    /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
    .modern-modal-container * {
        pointer-events: auto !important;
    }
}

/* ===== MOBILE RESPONSIVE 760px ===== */
@media (max-width: 760px) {
    .modal-overlay {
        padding: 10px !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 999999 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        -webkit-backdrop-filter: blur(8px) !important;
                backdrop-filter: blur(8px) !important;
    }
    
    .modern-modal-container {
        width: 95% !important;
        max-width: none !important;
        margin: 0 auto !important;
        border-radius: 12px !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
        /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
        pointer-events: auto !important;
    }

    /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
    .modern-modal-container * {
        pointer-events: auto !important;
    }
    
    /* بهبود مودال empty state */
    .modal-empty-state {
        padding: 30px 15px !important;
        text-align: center !important;
    }
    
    .modal-empty-icon {
        width: 70px !important;
        height: 70px !important;
        margin: 0 auto 20px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
    }
    
    .modal-empty-state h4 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
        line-height: 1.3 !important;
        color: #374151 !important;
        font-weight: 600 !important;
    }
    
    .modal-empty-state p {
        font-size: 15px !important;
        margin-bottom: 24px !important;
        line-height: 1.5 !important;
        color: #6b7280 !important;
        padding: 0 5px !important;
    }
    
    .modal-empty-state .modal-btn {
        width: 100% !important;
        max-width: 250px !important;
        padding: 14px 24px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 auto !important;
    }
    
    /* بهبود هدر مودال */
    .modal-section-header {
        padding: 12px 0 !important;
        margin-bottom: 16px !important;
    }
    
    .modal-section-title {
        font-size: 18px !important;
        font-weight: 600 !important;
    }
    
    /* بهبود دکمه بستن */
    .modal-btn.modal-btn-secondary {
        min-width: 40px !important;
        width: 40px !important;
        height: 40px !important;
        padding: 8px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ===== MOBILE RESPONSIVE 480px ===== */
@media (max-width: 480px) {
    .modal-overlay {
        padding: 5px !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 999999 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        -webkit-backdrop-filter: blur(8px) !important;
                backdrop-filter: blur(8px) !important;
    }
    
    .modern-modal-container {
        width: 98% !important;
        max-width: none !important;
        margin: 0 auto !important;
        border-radius: 8px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
        /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
        pointer-events: auto !important;
    }

    /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
    .modern-modal-container * {
        pointer-events: auto !important;
    }
    
    /* بهبود مودال empty state */
    .modal-empty-state {
        padding: 25px 10px !important;
        text-align: center !important;
    }
    
    .modal-empty-icon {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 16px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
    }
    
    .modal-empty-state h4 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
        line-height: 1.3 !important;
        color: #374151 !important;
        font-weight: 600 !important;
    }
    
    .modal-empty-state p {
        font-size: 14px !important;
        margin-bottom: 20px !important;
        line-height: 1.4 !important;
        color: #6b7280 !important;
        padding: 0 5px !important;
    }
    
    .modal-empty-state .modal-btn {
        width: 100% !important;
        max-width: 220px !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        margin: 0 auto !important;
    }

    /* Modal Headers */
    .modal-header {
        padding: 12px 16px !important;
        border-radius: 8px 8px 0 0 !important;
    }

    .modal-header h2 {
        font-size: 1rem !important;
    }

    .modal-title {
        font-size: 18px !important;
    }

    .modal-header-title {
        font-size: 1.25rem !important;
    }

    /* Modal Sections */
    .modal-section {
        margin-bottom: 16px !important;
        border-radius: 8px !important;
    }

    .modal-section-header {
        padding: 12px 16px !important;
    }

    .modal-section-title {
        font-size: 0.9rem !important;
    }

    .modal-section-content {
        padding: 16px !important;
    }

    /* Forms */
    .modal-form {
        gap: 16px !important;
    }

    .modal-form-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .modal-form-group {
        gap: 6px !important;
    }

    .modal-form-label {
        font-size: 0.85rem !important;
    }

    /* Inputs */
    .modal-input,
    .modal-select,
    .modal-textarea {
        padding: 10px 12px !important;
        font-size: 0.9rem !important;
        border-radius: 6px !important;
    }

    .modal-select {
        /* حذف فلش پیش‌فرض مرورگر */
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
    }

    .modal-textarea {
        min-height: 80px !important;
    }

    /* Buttons */
    .modal-btn {
        padding: 10px 16px !important;
        font-size: 0.9rem !important;
        border-radius: 6px !important;
    }

    .modal-action-buttons {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .modal-action-buttons .modal-btn {
        width: 100% !important;
    }

    .submit-section {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .submit-btn,
    .cancel-btn {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
    }

    /* Info Grid */
    .modal-info-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Stats Grid */
    .modal-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .modal-stat-card {
        padding: 12px !important;
    }

    .modal-stat-value {
        font-size: 1.25rem !important;
    }

    /* Category Select */
    .category-select-container {
        gap: 8px !important;
    }

    .new-category-input-container {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .new-category-input {
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
    }

    .create-category-btn,
    .cancel-category-btn {
        width: 100% !important;
        font-size: 0.85rem !important;
        padding: 8px 14px !important;
    }

    /* Marzban Panels */
    .marzban-panel {
        margin-bottom: 12px !important;
    }

    .marzban-panel-header {
        padding: 10px 12px !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    .add-panel-btn,
    .remove-panel-btn {
        width: 100% !important;
        font-size: 0.85rem !important;
        padding: 8px 14px !important;
    }

    /* Checkboxes */
    .checkbox-group {
        gap: 8px !important;
    }

    .checkbox-group label {
        font-size: 0.85rem !important;
    }

    .checkbox-group input[type="checkbox"] {
        appearance: auto !important;
        -webkit-appearance: checkbox !important;
        -moz-appearance: checkbox !important;
        z-index: 1 !important;
        position: relative !important;
        display: block !important;
        visibility: visible !important;
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Tables */
    .modal-table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    .modal-table th,
    .modal-table td {
        padding: 8px !important;
        font-size: 0.85rem !important;
    }

    /* Tabs */
    .modal-tabs,
    .wallet-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-tab,
    .wallet-tab {
        flex-shrink: 0 !important;
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
    }
}

/* ===== MOBILE RESPONSIVE 360px ===== */
@media (max-width: 360px) {
    .modal-overlay {
        padding: 2px !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 999999 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        -webkit-backdrop-filter: blur(8px) !important;
                backdrop-filter: blur(8px) !important;
    }
    
    .modern-modal-container {
        width: 99% !important;
        max-width: none !important;
        margin: 0 auto !important;
        border-radius: 6px !important;
        max-height: 95vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
        /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
        pointer-events: auto !important;
    }

    /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
    .modern-modal-container * {
        pointer-events: auto !important;
    }
    
    /* بهبود مودال empty state */
    .modal-empty-state {
        padding: 20px 8px !important;
        text-align: center !important;
    }
    
    .modal-empty-icon {
        width: 50px !important;
        height: 50px !important;
        margin: 0 auto 12px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
    }
    
    .modal-empty-state h4 {
        font-size: 15px !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
        color: #374151 !important;
        font-weight: 600 !important;
    }
    
    .modal-empty-state p {
        font-size: 13px !important;
        margin-bottom: 16px !important;
        line-height: 1.4 !important;
        color: #6b7280 !important;
        padding: 0 5px !important;
    }
    
    .modal-empty-state .modal-btn {
        width: 100% !important;
        max-width: 200px !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        margin: 0 auto !important;
    }

    /* Modal Headers */
    .modal-header {
        padding: 10px 12px !important;
    }

    .modal-header h2 {
        font-size: 0.9rem !important;
    }

    .modal-title {
        font-size: 16px !important;
    }

    .modal-header-title {
        font-size: 1.1rem !important;
    }

    /* Modal Sections */
    .modal-section-header {
        padding: 10px 12px !important;
    }

    .modal-section-title {
        font-size: 0.85rem !important;
    }

    .modal-section-content {
        padding: 12px !important;
    }

    /* Forms */
    .modal-form {
        gap: 12px !important;
    }

    .modal-form-group {
        gap: 4px !important;
    }

    .modal-form-label {
        font-size: 0.8rem !important;
    }

    /* Inputs */
    .modal-input,
    .modal-select,
    .modal-textarea {
        padding: 8px 10px !important;
        font-size: 0.85rem !important;
        border-radius: 4px !important;
    }

    .modal-textarea {
        min-height: 70px !important;
    }

    /* Buttons */
    .modal-btn {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
        border-radius: 4px !important;
    }

    .submit-btn,
    .cancel-btn {
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
    }

    /* Stats Grid */
    .modal-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .modal-stat-card {
        padding: 10px !important;
    }

    .modal-stat-value {
        font-size: 1.1rem !important;
    }

    .modal-stat-label {
        font-size: 0.75rem !important;
    }

    /* Category Select */
    .new-category-input {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }

    .create-category-btn,
    .cancel-category-btn {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
    }

    /* Tables */
    .modal-table th,
    .modal-table td {
        padding: 6px !important;
        font-size: 0.8rem !important;
    }

    /* Tabs */
    .modal-tab,
    .wallet-tab {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }
}

/* ===== MOBILE RESPONSIVE 320px ===== */
@media (max-width: 320px) {
    .modal-overlay {
        padding: 1px !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 999999 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        -webkit-backdrop-filter: blur(8px) !important;
                backdrop-filter: blur(8px) !important;
    }
    
    .modern-modal-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto !important;
        border-radius: 4px !important;
        max-height: 98vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
        /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
        pointer-events: auto !important;
    }

    /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
    .modern-modal-container * {
        pointer-events: auto !important;
    }
    
    /* بهبود مودال empty state */
    .modal-empty-state {
        padding: 15px 5px !important;
        text-align: center !important;
    }
    
    .modal-empty-icon {
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto 10px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
    }
    
    .modal-empty-state h4 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
        line-height: 1.2 !important;
        color: #374151 !important;
        font-weight: 600 !important;
    }
    
    .modal-empty-state p {
        font-size: 12px !important;
        margin-bottom: 12px !important;
        line-height: 1.3 !important;
        color: #6b7280 !important;
        padding: 0 5px !important;
    }
    
    .modal-empty-state .modal-btn {
        width: 100% !important;
        max-width: 180px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        border-radius: 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        margin: 0 auto !important;
    }

    /* Modal Headers */
    .modal-header {
        padding: 8px 10px !important;
    }

    .modal-header h2 {
        font-size: 0.85rem !important;
    }

    .modal-title {
        font-size: 14px !important;
    }

    .modal-header-title {
        font-size: 1rem !important;
    }

    /* Modal Sections */
    .modal-section-header {
        padding: 8px 10px !important;
    }

    .modal-section-title {
        font-size: 0.8rem !important;
    }

    .modal-section-content {
        padding: 10px !important;
    }

    /* Forms */
    .modal-form {
        gap: 10px !important;
    }

    .modal-form-label {
        font-size: 0.75rem !important;
    }

    /* Inputs */
    .modal-input,
    .modal-select,
    .modal-textarea {
        padding: 6px 8px !important;
        font-size: 0.8rem !important;
    }

    .modal-textarea {
        min-height: 60px !important;
    }

    /* Buttons */
    .modal-btn {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
    }

    .submit-btn,
    .cancel-btn {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }

    /* Stats */
    .modal-stat-card {
        padding: 8px !important;
    }

    .modal-stat-value {
        font-size: 1rem !important;
    }

    .modal-stat-label {
        font-size: 0.7rem !important;
    }

    /* Tables */
    .modal-table th,
    .modal-table td {
        padding: 4px !important;
        font-size: 0.75rem !important;
    }

    /* Tabs */
    .modal-tab,
    .wallet-tab {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
    }
}

/* ===== LANDSCAPE ORIENTATION ===== */
@media (max-height: 600px) and (orientation: landscape) {
    .modal-overlay {
        padding: 5px !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 999999 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        -webkit-backdrop-filter: blur(8px) !important;
                backdrop-filter: blur(8px) !important;
    }
    
    .modern-modal-container {
        max-height: 95vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
        /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
        pointer-events: auto !important;
    }

    /* جلوگیری از بسته شدن modal با کلیک روی محتوا */
    .modern-modal-container * {
        pointer-events: auto !important;
    }
    
    .modal-empty-state {
        padding: 20px 10px !important;
        text-align: center !important;
    }
    
    .modal-empty-icon {
        width: 50px !important;
        height: 50px !important;
        margin: 0 auto 12px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
    }
    
    .modal-empty-state h4 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
        color: #374151 !important;
        font-weight: 600 !important;
    }
    
    .modal-empty-state p {
        font-size: 14px !important;
        margin-bottom: 16px !important;
        line-height: 1.4 !important;
        color: #6b7280 !important;
        padding: 0 5px !important;
    }
    
    .modal-empty-state .modal-btn {
        width: 100% !important;
        max-width: 200px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        margin: 0 auto !important;
    }

    /* کاهش padding در landscape */
    .modal-section-content {
        padding: 12px !important;
    }

    .modal-form {
        gap: 12px !important;
    }

    .modal-action-buttons,
    .submit-section {
        margin-top: 16px !important;
        padding-top: 12px !important;
    }
}

/* ===== SPECIFIC RESPONSIVE STYLES FOR MODAL VARIANTS ===== */

/* Create Part Modal Responsive */
@media (max-width: 768px) {
    .create-part-modal {
        margin: 0 !important;
        border-radius: 0 !important;
        height: 100vh !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 480px) {
    .create-part-modal .modal-section {
        margin-bottom: 12px !important;
    }
    
    .create-part-modal .modal-form-row {
        flex-direction: column !important;
    }
    
    .create-part-modal .category-select-container {
        flex-direction: column !important;
    }
}

/* Create User Modal Responsive */
@media (max-width: 768px) {
    .create-user-modal {
        margin: 0 !important;
        border-radius: 0 !important;
        height: 100vh !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 480px) {
    .create-user-modal .marzban-panel-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .create-user-modal .add-panel-btn,
    .create-user-modal .remove-panel-btn {
        margin-top: 8px !important;
    }
}

/* Edit Modals Responsive */
@media (max-width: 768px) {
    .edit-part-modal,
    .edit-user-modal {
        margin: 0 !important;
        border-radius: 0 !important;
        height: 100vh !important;
        overflow-y: auto !important;
    }
}

/* Treasury Modal Responsive */
@media (max-width: 768px) {
    .treasury-modal {
        margin: 0 !important;
        border-radius: 0 !important;
        height: 100vh !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 480px) {
    .treasury-modal .modal-form-row {
        flex-direction: column !important;
    }
    
    .treasury-modal .amount-container {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* VPN User Modal Responsive */
@media (max-width: 480px) {
    .vpn-user-modal {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        height: 100vh !important;
    }
    
    .vpn-user-modal .data-limit-group {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    
    .vpn-user-modal .cost-summary {
        font-size: 0.9rem !important;
    }
    
    .vpn-user-modal .modal-buttons {
        flex-direction: column !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS FOR MOBILE ===== */
@media (max-width: 768px) {
    /* بهبود touch targets */
    .modal-btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    .modal-close-btn {
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    /* بهبود فاصله‌گذاری برای لمس */
    .modal-action-buttons .modal-btn {
        margin-bottom: 8px !important;
    }
    
    /* جلوگیری از zoom در inputs */
    .modal-input,
    .modal-select,
    .modal-textarea {
        font-size: 16px !important;
    }
}

/* ===== BODY SCROLL LOCK برای موبایل ===== */
body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* ===== ANIMATIONS برای موبایل ===== */
.modal-overlay {
    animation: fadeIn 0.3s ease-out !important;
}

.modern-modal-container {
    animation: slideIn 0.3s ease-out !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.modal-overlay {
    will-change: opacity !important;
}

.modern-modal-container {
    will-change: transform !important;
}

/* ===== BOX SIZING ===== */
.modal-overlay *,
.modern-modal-container * {
    box-sizing: border-box !important;
}

/* ===== SCROLL BEHAVIOR ===== */
.modern-modal-container {
    scroll-behavior: smooth !important;
    overscroll-behavior: contain !important;
}

/* ===== FOCUS STYLES برای موبایل ===== */
@media (max-width: 768px) {
    .modal-overlay:focus {
        outline: none !important;
    }
    
    .modern-modal-container:focus {
        outline: 2px solid #1E98BC !important;
        outline-offset: 2px !important;
    }
}

/* ===== SPECIAL MOBILE STYLES ===== */
@media (max-width: 768px) {
    /* حذف shadows در موبایل برای بهبود performance */
    .modal-section,
    .modal-stat-card,
    .modal-btn {
        box-shadow: none !important;
    }
    
    /* ساده‌سازی borders */
    .modal-section,
    .modal-input,
    .modal-select,
    .modal-textarea {
        border-width: 1px !important;
    }
    
    /* کاهش انیمیشن‌ها */
    .modal-section,
    .modal-btn,
    .modal-input {
        transition: none !important;
    }
}

/* ===== RESPONSIVE MODAL SPECIFIC STYLES ===== */

/* ===== CREATE PART MODAL RESPONSIVE ===== */
.create-part-modal .modal-section {
    margin-bottom: 16px;
    border-radius: 8px;
}

.create-part-modal .modal-section-header {
    padding: 12px;
    gap: 8px;
    flex-direction: column;
    text-align: center;
}

.create-part-modal .modal-section-icon {
    width: 32px;
    height: 32px;
}

.create-part-modal .modal-section-title {
    font-size: 14px;
}

.create-part-modal .modal-section-content {
    padding: 16px;
}

.create-part-modal .modal-form-row {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.create-part-modal .modal-input,
.create-part-modal .modal-select {
    padding: 14px 16px;
    font-size: 16px;
    min-height: 48px;
}

.create-part-modal .modal-form-label {
    font-size: 13px;
    margin-bottom: 6px;
}

.create-part-modal .checkbox-group {
    margin-bottom: 16px;
    padding: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    justify-content: flex-start;
    gap: 12px;
    min-height: 48px;
    font-size: 15px;
}

.create-part-modal .checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    z-index: 1 !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
}

.create-part-modal .category-select-container {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.create-part-modal .add-category-btn {
    padding: 14px;
    min-height: 48px;
    width: 100%;
    justify-content: center;
}

.create-part-modal .new-category-section {
    padding: 12px;
    margin-top: 12px;
}

.create-part-modal .new-category-input-container {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.create-part-modal .create-category-btn {
    padding: 14px 16px;
    min-height: 48px;
    width: 100%;
    justify-content: center;
}

.create-part-modal .submit-section {
    margin-top: 24px;
    padding-top: 16px;
}

.create-part-modal .submit-btn {
    padding: 16px 24px;
    font-size: 16px;
    min-height: 52px;
}

/* ===== CREATE USER MODAL RESPONSIVE ===== */
.create-user-modal .modal-section {
    margin-bottom: 16px;
    border-radius: 8px;
}

.create-user-modal .modal-section-header {
    padding: 12px;
    gap: 8px;
    flex-direction: column;
    text-align: center;
}

.create-user-modal .modal-section-icon {
    width: 32px;
    height: 32px;
}

.create-user-modal .modal-section-title {
    font-size: 14px;
}

.create-user-modal .modal-section-content {
    padding: 16px;
}

.create-user-modal .modal-form-row {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.create-user-modal .modal-input,
.create-user-modal .modal-select {
    padding: 14px 16px;
    font-size: 16px;
    min-height: 48px;
}

.create-user-modal .modal-form-label {
    font-size: 13px;
    margin-bottom: 6px;
}

.create-user-modal .checkbox-group {
    margin-bottom: 16px;
    padding: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    justify-content: flex-start;
    gap: 12px;
    min-height: 48px;
    font-size: 15px;
}

.create-user-modal .checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    z-index: 1 !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
}

.create-user-modal .marzban-panel {
    padding: 12px;
    margin-bottom: 12px;
}

.create-user-modal .marzban-panel-header {
    margin-bottom: 12px;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.create-user-modal .marzban-panel-title {
    font-size: 13px;
}

.create-user-modal .remove-panel-btn {
    padding: 8px 16px;
    font-size: 13px;
    min-height: 36px;
}

.create-user-modal .add-panel-btn {
    padding: 14px 20px;
    font-size: 15px;
    min-height: 48px;
    justify-content: center;
}

.create-user-modal .submit-section {
    margin-top: 24px;
    padding-top: 16px;
}

.create-user-modal .submit-btn {
    padding: 16px 24px;
    font-size: 16px;
    min-height: 52px;
}

/* ===== EDIT PART MODAL RESPONSIVE ===== */
.edit-part-modal .modal-section {
    margin-bottom: 16px;
    border-radius: 8px;
}

.edit-part-modal .modal-header-section {
    padding: 16px 20px 12px 20px;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    position: relative;
}

.edit-part-modal .modal-header-title h2 {
    font-size: 18px;
    order: 1;
}

.edit-part-modal .modal-close-btn {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 36px;
    height: 36px;
    order: 2;
}

.edit-part-modal .modal-close-btn svg {
    width: 18px;
    height: 18px;
}

.edit-part-modal .modal-section-header {
    padding: 12px;
    gap: 8px;
    flex-direction: column;
    text-align: center;
}

.edit-part-modal .modal-section-icon {
    width: 32px;
    height: 32px;
}

.edit-part-modal .modal-section-title {
    font-size: 14px;
}

.edit-part-modal .modal-section-content {
    padding: 16px;
}

.edit-part-modal .modal-form-row {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.edit-part-modal .modal-input,
.edit-part-modal .modal-select,
.edit-part-modal .modal-textarea {
    padding: 14px 16px;
    font-size: 16px;
    min-height: 48px;
}

.edit-part-modal .modal-form-label {
    font-size: 13px;
    margin-bottom: 6px;
}

.edit-part-modal .category-select-container {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.edit-part-modal .add-category-btn {
    padding: 14px;
    min-height: 48px;
    width: 100%;
    justify-content: center;
}

.edit-part-modal .new-category-section {
    padding: 12px;
    margin-top: 12px;
}

.edit-part-modal .new-category-input-container {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.edit-part-modal .create-category-btn,
.edit-part-modal .cancel-category-btn {
    padding: 14px 16px;
    min-height: 48px;
    width: 100%;
    justify-content: center;
}

.edit-part-modal .submit-section {
    margin-top: 24px;
    padding-top: 16px;
    flex-direction: column;
    gap: 12px;
}

.edit-part-modal .submit-btn,
.edit-part-modal .cancel-btn {
    padding: 16px 24px;
    font-size: 16px;
    min-height: 52px;
    width: 100%;
    justify-content: center;
}

/* ===== EDIT USER MODAL RESPONSIVE ===== */
.edit-user-modal .modal-section {
    margin-bottom: 16px;
    border-radius: 8px;
}

.edit-user-modal .modal-section-header {
    padding: 12px;
    gap: 8px;
    flex-direction: column;
    text-align: center;
}

.edit-user-modal .modal-section-icon {
    width: 32px;
    height: 32px;
}

.edit-user-modal .modal-section-title {
    font-size: 14px;
}

.edit-user-modal .modal-section-content {
    padding: 16px;
}

.edit-user-modal .modal-form-row {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.edit-user-modal .modal-input,
.edit-user-modal .modal-select {
    padding: 14px 16px;
    font-size: 16px;
    min-height: 48px;
}

.edit-user-modal .modal-form-label {
    font-size: 13px;
    margin-bottom: 6px;
}

.edit-user-modal .checkbox-group {
    margin-bottom: 16px;
    padding: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    justify-content: flex-start;
    gap: 12px;
    min-height: 48px;
    font-size: 15px;
}

.edit-user-modal .checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    z-index: 1 !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
}

.edit-user-modal .marzban-panel {
    padding: 12px;
    margin-bottom: 12px;
}

.edit-user-modal .marzban-panel-header {
    margin-bottom: 12px;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.edit-user-modal .marzban-panel-title {
    font-size: 13px;
}

.edit-user-modal .remove-panel-btn {
    padding: 8px 16px;
    font-size: 13px;
    min-height: 36px;
}

.edit-user-modal .add-panel-btn {
    padding: 14px 20px;
    font-size: 15px;
    min-height: 48px;
    justify-content: center;
}

.edit-user-modal .submit-section {
    margin-top: 24px;
    padding-top: 16px;
}

.edit-user-modal .submit-btn {
    padding: 16px 24px;
    font-size: 16px;
    min-height: 52px;
}

/* ===== TREASURY MODAL RESPONSIVE ===== */
.treasury-modal .modal-section {
    margin-bottom: 16px;
    border-radius: 8px;
}

.treasury-modal .modal-section-header {
    padding: 12px;
    gap: 8px;
    flex-direction: column;
    text-align: center;
}

.treasury-modal .modal-section-icon {
    width: 32px;
    height: 32px;
}

.treasury-modal .modal-section-title {
    font-size: 14px;
}

.treasury-modal .modal-section-content {
    padding: 16px;
}

.treasury-modal .modal-form-row {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.treasury-modal .modal-input,
.treasury-modal .modal-textarea {
    padding: 14px 16px;
    font-size: 16px;
    min-height: 48px;
}

.treasury-modal .modal-form-label {
    font-size: 13px;
    margin-bottom: 6px;
}

.treasury-modal .amount-input {
    padding-left: 70px;
}

.treasury-modal .amount-currency {
    left: 16px;
    font-size: 14px;
}

.treasury-modal .submit-section {
    margin-top: 24px;
    margin-bottom: 32px;
    padding-top: 16px;
    flex-direction: column;
    gap: 12px;
}

.treasury-modal .submit-btn,
.treasury-modal .cancel-btn {
    padding: 16px 24px;
    font-size: 16px;
    min-height: 52px;
    width: 100%;
    justify-content: center;
}

/* ===== WEBSITE USER DETAIL MODAL RESPONSIVE ===== */

@media (max-width: 768px) {
  .user-detail-container {
    padding: 16px;
  }
  
  /* استایل‌های مخصوص مودال خزانه در موبایل */
  .treasury-modal.user-detail-container {
    padding: 0;
    max-height: 80vh;
    overflow-y: auto;
  }
  
  /* استایل‌های کلی برای تمام مودال‌ها در موبایل */
  .user-detail-container {
    padding: 16px;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  .treasury-modal .modal-section {
    margin-bottom: 6px;
  }
  
  .treasury-modal .collapsible-header {
    padding: 12px 16px;
  }
  
  .treasury-modal .modal-section-icon {
    width: 36px;
    height: 36px;
    margin-left: 8px;
  }
  
  .treasury-modal .modal-section-icon svg {
    width: 18px;
    height: 18px;
  }
  
  .treasury-modal .modal-section-title {
    font-size: 14px;
  }
  
  .treasury-modal .modal-section-content {
    padding: 16px;
  }
  
  .section-header {
    padding: 16px 20px;
  }
  
  .section-content {
    padding: 20px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .panel-info {
    grid-template-columns: 1fr;
  }
  
  .usage-panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .usage-panel-stats {
    margin-left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  
  .action-buttons {
    flex-direction: column-reverse;
    gap: 12px;
  }
  
  .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .user-detail-container {
    padding: 12px;
  }
  
  .section-header {
    padding: 12px 16px;
  }
  
  .section-content {
    padding: 16px;
  }
  
  .info-item {
    padding: 10px 12px;
  }
  
  .stat-card {
    padding: 20px 16px;
  }
  
  .panel-card {
    padding: 16px;
  }
  
  .usage-panel {
    padding: 12px;
  }
}
.user-detail-container {
  padding: 16px;
}

.section-header {
  padding: 16px 20px;
}

.section-content {
  padding: 20px;
}

.info-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.stats-grid {
  grid-template-columns: 1fr;
  gap: 16px;
}

.panel-info {
  grid-template-columns: 1fr;
}

.usage-panel {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.usage-panel-stats {
  margin-left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.action-buttons {
  flex-direction: column-reverse;
  gap: 12px;
}

/* استایل‌های مخصوص مودال ویرایش کالا در موبایل */
@media (max-width: 768px) {
  .edit-part-modal {
    width: 95% !important;
    max-width: 95% !important;
    max-height: 95vh !important;
    margin: 0 !important;
    border-radius: 16px !important;
    position: relative !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  
  .edit-part-modal .modal-header-section {
    padding: 16px 20px 12px 20px;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    position: relative;
  }
  
  .edit-part-modal .modal-header-title h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
  }
  
  .edit-part-modal .modal-close-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    color: #6b7280;
    transition: all 0.2s ease;
  }
  
  .edit-part-modal .modal-close-btn:hover {
    background: #f3f4f6;
    color: #374151;
  }
  
  .edit-part-modal .modal-form {
    padding: 0 20px 20px 20px;
  }
  
  .edit-part-modal .category-select-container {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .edit-part-modal .new-category-input-container {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .edit-part-modal .submit-section {
    margin-top: 24px;
    padding-top: 16px;
    flex-direction: column;
    gap: 12px;
  }
}


/* استایل‌های صفحه پروفایل کاربر */

.profile-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}

.profile-section {
    background: linear-gradient(135deg, #ffffff 0%, var(--bg-primary) 100%);
    border-radius: var(--border-radius-md);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: var(--transition);
}

.profile-section:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(30, 152, 188, 0.2);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.section-header h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.edit-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-gradient);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.edit-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.action-buttons {
    display: flex;
    gap: 12px;
}

.save-btn {
    background: var(--success-gradient);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.save-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.cancel-btn {
    background: var(--gray-gradient);
    color: var(--text-primary);
    border: none;
    border-radius: var(--border-radius-sm);
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.cancel-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.cancel-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.section-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-group input,
.form-group textarea {
    padding: 12px 16px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    transition: var(--transition);
    background: white;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.2);
}

/* استایل برای dropdown ها */
.form-select {
    width: 100%;
    padding: 12px 16px;
    padding-left: 40px; /* فضا برای آیکون فلش در سمت چپ */
    border: 1px solid #d1d5db;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    color: var(--text-primary);
    background-color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e");
    background-position: left 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    font-family: 'peyda', sans-serif;
    direction: rtl;
    text-align: right;
    /* حذف فلش پیش‌فرض مرورگر */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.form-select:disabled {
    background-color: #f9fafb;
    color: #6b7280;
    cursor: not-allowed;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%239ca3af%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e");
}

.form-select:not(:disabled):hover {
    border-color: #9ca3af;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%23374151%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e");
}

.form-select:not(:disabled):focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.2);
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%231E98BC%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e");
}

/* کانتینر برای dropdown و جستجو */
.select-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* فیلد جستجو */
.search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    color: var(--text-primary);
    background-color: white;
    transition: var(--transition);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(30, 152, 188, 0.1);
}

.search-input:disabled {
    background-color: #f9fafb;
    color: #6b7280;
    cursor: not-allowed;
}

.form-group input:disabled,
.form-group textarea:disabled {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* پیام‌های سیستم */
.message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: var(--border-radius-sm);
    margin-bottom: 16px;
    font-size: 0.9rem;
    font-weight: 500;
}

.message.success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.message.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.message.warning {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.message-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.message-close:hover {
    opacity: 1;
}

/* هشدار آدرس */
.address-warning {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: var(--border-radius-md);
    padding: 20px;
    margin-top: 16px;
    justify-content: center;
}

.warning-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #f59e0b;
    border-radius: 50%;
    color: white;
    flex-shrink: 0;
}

.warning-content {
    flex: 1 1;
}

.warning-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #92400e;
    margin: 0 0 8px 0;
}

.warning-content p {
    font-size: 0.9rem;
    color: #92400e;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.complete-address-btn {
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.complete-address-btn:hover {
    background: #d97706;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .profile-container {
        gap: 16px;
        margin-top: 16px;
        margin-bottom: 60px;
    }

    .profile-section {
        padding: 16px;
        margin-bottom: 16px;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .action-buttons {
        width: 100%;
        justify-content: flex-end;
    }

    .address-warning {
        flex-direction: column;
        text-align: center;
    }

    .warning-icon {
        align-self: center;
    }

    .section-actions {
        margin-top: 12px;
        padding-bottom: 6px;
    }
}

@media (max-width: 480px) {
    .profile-container {
        margin-bottom: 80px;
    }

    .profile-section {
        padding: 12px;
        border-radius: 16px;
        margin-bottom: 20px;
    }

    .section-header h2 {
        font-size: 0.9rem;
        font-weight: 600;
    }

    .edit-btn,
    .save-btn,
    .cancel-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .form-group input,
    .form-group textarea {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .form-group label {
        font-size: 0.8rem;
    }

    .section-actions {
        margin-top: 16px;
        padding-bottom: 8px;
    }
}

/* انیمیشن‌ها */
.profile-section {
    animation: fadeInUp 0.3s ease-out;
}

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

/* استایل‌های اضافی برای فیلدهای اجباری */
.form-group label::after {
    content: ' *';
    color: #ef4444;
    font-weight: bold;
}

.form-group label:not([for*="required"])::after {
    content: '';
}

/* استایل‌های focus برای accessibility */
.form-group input:focus-visible,
.form-group textarea:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* استایل‌های placeholder */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

/* استایل‌های disabled */
.form-group input:disabled::placeholder,
.form-group textarea:disabled::placeholder {
    opacity: 0.3;
}

/* دکمه افزودن آدرس */
.add-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--success-gradient);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.add-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.add-btn:active {
    transform: translateY(0);
} 
/* ===== ADMIN DASHBOARD RESPONSIVE STYLES ===== */

.admin-container {
    padding: 24px;
    background-color: #f8fafc;
    min-height: 100vh;
}

.admin-content {
    max-width: 1400px;
    margin: 0 auto;
    background-color: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.admin-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background-color: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.admin-create-btn {
    background-color: #1E98BC !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.admin-create-btn:hover {
    background-color: #167a96 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(30, 152, 188, 0.3) !important;
}

/* ===== ACTION ICONS STYLES ===== */
.action-icons {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: end;
}

.action-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.2s ease;
    padding: 4px;
    border-radius: 4px;
}

.action-icon:hover {
    color: #1E98BC;
    background-color: #f1f5f9;
    transform: scale(1.1);
}

.action-icon.wallet-icon:hover {
    color: #10b981;
}

.action-icon.invoice-icon:hover {
    color: #8b5cf6;
}

.action-icon.danger:hover {
    color: #ef4444;
}

.action-icon.success:hover {
    color: #10b981;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .admin-container {
        padding: 16px;
    }
    
    .admin-content {
        border-radius: 12px;
        padding: 16px;
    }
    
    .admin-actions {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
        padding: 12px;
    }
    
    .admin-create-btn {
        padding: 12px 16px !important;
        font-size: 16px !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 44px !important;
    }
    
    /* بهبود جدول در موبایل */
    .user-info {
        text-align: center !important;
    }
    
    .user-name {
        font-size: 14px ;
        font-weight: 600 !important;
    }
    
    .status-badge {
        font-size: 12px !important;
        padding: 4px 8px !important;
        display: inline-block !important;
        text-align: center !important;
    }
    
    /* بهبود StatsGrid در موبایل */
    .stats-grid {
        gap: 12px !important;
    }
    
    .stat-card {
        padding: 16px !important;
        text-align: center !important;
    }
    
    .stat-icon {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: 8px !important;
    }
    
    .stat-content h3 {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }
    
    .stat-content p {
        font-size: 14px !important;
        font-weight: 600 !important;
    }
}

/* ===== MOBILE SMALL (480px) ===== */
@media (max-width: 480px) {
    .admin-container {
        padding: 0px;
    }
    
    .admin-content {
        border-radius: 8px;
        padding: 0px;
    }
    
    .admin-actions {
        padding: 8px;
        gap: 6px;
        margin-bottom: 12px;
    }
    
    .status-badge{
    font-size: 10px !important; 
    }
    .mobile-username{
        font-size: 10px !important;
        white-space: break-spaces;
        text-align: center;
    }
    .editable-cell{
padding-right: 0px !important;
    }
    .admin-create-btn {
        padding: 10px 12px !important;
        font-size: 15px !important;
        min-height: 40px !important;
    }
    
    .stats-grid {
        gap: 8px !important;
    }
    
    .stat-card {
        padding: 12px !important;
    }
    
    .stat-icon {
        width: 28px !important;
        height: 28px !important;
    }
    
    .stat-content h3 {
        font-size: 13px !important;
    }
    
    .stat-content p {
        font-size: 16px !important;
    }
}

/* ===== WALLET ICON STYLES ===== */
.wallet-icon {
    color: #059669 !important;
    transition: all 0.2s ease !important;
}

.wallet-icon:hover {
    color: #047857 !important;
    transform: scale(1.1) !important;
}

.action-icons .wallet-icon {
    margin-left: 8px;
} 
/* استایل‌های سبد خرید و دکمه‌ها */

/* استایل‌های عمومی دکمه‌ها */
.btn {
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    padding: 10px 20px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}

.btn:focus,
.btn:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    background-color: inherit !important;
    transform: none !important;
}

/* حذف آبی شدن برای تگ‌ها و badge ها */
.tag,
.badge,
.status-badge,
.category-tag,
.product-code,
.seller-tag,
.stock-tag,
.price-tag {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    -webkit-user-select: none !important;
            user-select: none !important;
}

.tag:focus,
.badge:focus,
.status-badge:focus,
.category-tag:focus,
.product-code:focus,
.seller-tag:focus,
.stock-tag:focus,
.price-tag:focus,
.tag:active,
.badge:active,
.status-badge:active,
.category-tag:active,
.product-code:active,
.seller-tag:active,
.stock-tag:active,
.price-tag:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    background-color: inherit !important;
}

.btn-primary {
    background-color: #1E98BC !important;
    color: white !important;
    border: 2px solid #1E98BC !important;
}

.btn-primary:hover:not(:disabled) {
    background-color: #167a96 !important;
    border-color: #167a96 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(30, 152, 188, 0.3);
}

.btn-primary:disabled {
    background-color: #ccc !important;
    border-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-sm {
    padding: 8px 16px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

.btn-secondary {
    background-color: #6b7280 !important;
    color: white !important;
    border: 2px solid #6b7280 !important;
}

.btn-secondary:hover {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
}

.btn-success {
    background-color: #059669 !important;
    color: white !important;
    border: 2px solid #059669 !important;
}

.btn-success:hover {
    background-color: #047857 !important;
    border-color: #047857 !important;
}

/* دکمه آیکونی کوچکتر */
.btn-icon {
    padding: 8px 10px !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
}

/* دکمه سبد خرید */
.cart-button {
    position: relative !important;
}

.cart-badge {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    background-color: #ef4444 !important;
    color: white !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: bold !important;
    min-width: 20px !important;
    z-index: 10 !important;
}


.cart-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

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

.cart-item-info {
    flex: 1 1 !important;
}

.cart-item-name {
    font-weight: 500 !important;
    color: #1f2937 !important;
    margin-bottom: 4px !important;
}

.cart-item-category {
    font-size: 12px !important;
    color: #6b7280 !important;
}

.cart-item-price {
    font-weight: 600 !important;
    color: #059669 !important;
}

.cart-item-quantity {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.quantity-btn {
    background: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    transition: background-color 0.2s !important;
    color: #374151 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    -webkit-user-select: none !important;
            user-select: none !important;
}

.quantity-btn:focus,
.quantity-btn:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    background-color: #f3f4f6 !important;
}

.quantity-btn:hover:not(:disabled) {
    background: #e5e7eb !important;
}

.quantity-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.cart-total {
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 2px solid #e5e7eb !important;
    text-align: right !important;
}

.cart-total-amount {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.cart-actions {
    display: flex !important;
    gap: 12px !important;
    margin-top: 20px !important;
    justify-content: flex-end !important;
}

.empty-cart {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #6b7280 !important;
}

.empty-cart svg {
    width: 64px !important;
    height: 64px !important;
    margin-bottom: 16px !important;
    opacity: 0.5 !important;
}

/* هدر */
.header-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

.header-content > div:first-child {
    flex: 1 1 !important;
}

/* بهبود ظاهر کنترل تعداد (+ / −) */
.cart-item-quantity {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 9999px !important;
    padding: 4px !important;
    height: 36px !important;
    gap: 10px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}

.cart-item-quantity:focus,
.cart-item-quantity:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    background-color: #f9fafb !important;
}

.cart-item-quantity span {
    min-width: 28px !important;
    text-align: center !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

.cart-item-quantity .quantity-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9999px !important;
    border: 1px solid transparent !important;
    background: #ffffff !important;
    color: #374151 !important;
    transition: all 0.15s ease !important;
    outline: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}

/* دکمه − */
.cart-item-quantity .quantity-btn:first-child {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}
.cart-item-quantity .quantity-btn:first-child:hover:not(:disabled) {
    background-color: #fee2e2 !important;
    border-color: #fca5a5 !important;
}
.cart-item-quantity .quantity-btn:first-child:focus,
.cart-item-quantity .quantity-btn:first-child:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    background-color: #fef2f2 !important;
}

/* دکمه + */
.cart-item-quantity .quantity-btn:last-child {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #047857 !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}
.cart-item-quantity .quantity-btn:last-child:hover:not(:disabled) {
    background-color: #d1fae5 !important;
    border-color: #6ee7b7 !important;
}
.cart-item-quantity .quantity-btn:last-child:focus,
.cart-item-quantity .quantity-btn:last-child:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    background-color: #ecfdf5 !important;
}

/* حالت فعال (کلیک) */
.cart-item-quantity .quantity-btn:active:not(:disabled) {
    transform: scale(0.96) !important;
}

/* حالت غیرفعال */
.cart-item-quantity .quantity-btn:disabled {
    opacity: 0.45 !important;
    box-shadow: none !important;
} 

/* دکمه تماس (آیکون تلفن) هماهنگ با استایل جدید */
.phone-icon-btn {
	width: 36px !important;
	height: 36px !important;
	border-radius: 10px !important;
	background-color: #eef2ff !important; /* آبی روشن */
	border: 1px solid #c7d2fe !important;
	color: #1e3a8a !important; /* آبی تیره */
	box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}
.phone-icon-btn:hover {
	background-color: #e0e7ff !important;
	border-color: #a5b4fc !important;
}
.phone-icon-btn:active {
	transform: translateY(0) scale(0.98) !important;
	-webkit-tap-highlight-color: transparent !important;
	outline: none !important;
}

.phone-icon-btn:focus {
	-webkit-tap-highlight-color: transparent !important;
	outline: none !important;
}

/* استایل‌های صفحه Checkout */
.quantity-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 9999px !important;
    padding: 4px !important;
    height: 36px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
	justify-content: space-between;

}

.quantity-controls .quantity-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9999px !important;
    border: 1px solid transparent !important;
    background: #ffffff !important;
    color: #374151 !important;
    transition: all 0.15s ease !important;
    outline: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

.quantity-controls .quantity-btn.minus {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
}

.quantity-controls .quantity-btn.minus:hover:not(:disabled) {
    background-color: #fee2e2 !important;
    border-color: #fca5a5 !important;
}

.quantity-controls .quantity-btn.plus {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #047857 !important;
}

.quantity-controls .quantity-btn.plus:hover:not(:disabled) {
    background-color: #d1fae5 !important;
    border-color: #6ee7b7 !important;
}

.quantity-controls .quantity-btn:active:not(:disabled) {
    transform: scale(0.96) !important;
}

.quantity-controls .quantity-btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.quantity-controls .quantity-display {
    min-width: 28px !important;
    text-align: center !important;
    font-weight: 600 !important;
    color: #111827 !important;
    font-size: 14px !important;
}

.remove-btn {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #b91c1c !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    outline: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

.remove-btn:hover {
    background-color: #fee2e2 !important;
    border-color: #fca5a5 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}

.remove-btn:active {
    transform: translateY(0) scale(0.98) !important;
}

.remove-btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}
.phone-icon-btn svg {
	stroke: currentColor !important;
}

/* ===== RESPONSIVE DESIGN FOR CART MODAL ===== */



.cart-item-label {
	font-size: 14px !important;
	color: #6b7280 !important;
	margin-bottom: 6px !important;
	font-weight: 600 !important;
}

.cart-item-value {
	font-weight: 600 !important;
	font-size: 16px !important;
}

.cart-item-name {
	color: #1f2937 !important;
}

.cart-item-category {
	font-size: 12px !important;
	color: #6b7280 !important;
	margin-top: 4px !important;
}

.cart-item-price {
	color: #059669 !important;
}

.cart-item-quantity {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	justify-content: center !important;
}

.quantity-display {
	min-width: 30px !important;
	text-align: center !important;
	font-weight: 600 !important;
	color: #1f2937 !important;
	font-size: 16px !important;
}









/* ===== BALANCE INPUT CONTAINER STYLES ===== */

.balance-input-container {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.balance-input-container .modal-input {
  flex: 1 1;
  margin: 0;
}

.treasury-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.treasury-btn:hover {
  background: linear-gradient(135deg, #0f4c75 0%, #1E98BC 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(30, 152, 188, 0.3);
}

.treasury-btn svg {
  color: white;
  flex-shrink: 0;
}

/* ===== MODERN MODAL SHARED STYLES ===== */

.modern-modal-container {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
  direction: rtl;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* smooth scrolling iOS */
  scroll-snap-type: none; /* جلوگیری از scroll snapping */
  /* جلوگیری از اسکرول دوتایی */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* استایل‌های مودال خزانه */
.treasury-modal .modern-modal-container {
  padding: 0;
  max-height: 80vh;
}

.treasury-modal .modal-section {
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.treasury-modal .modal-section:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.treasury-modal .modal-section:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* استایل‌های CollapsibleSection برای مودال خزانه */
.treasury-modal .modal-section {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.treasury-modal .modal-section:last-child {
  margin-bottom: 0;
}

.treasury-modal .collapsible-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.treasury-modal .collapsible-header:hover {
  background: #f3f4f6;
}

.treasury-modal .modal-section-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  flex-shrink: 0;
}

.treasury-modal .modal-section-icon svg {
  width: 20px;
  height: 20px;
  color: white;
}

.treasury-modal .modal-section-title {
  flex: 1 1;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  text-align: right;
}

.treasury-modal .collapsible-arrow {
  margin-right: 8px;
  color: #6b7280;
  transition: all 0.3s ease;
}

.treasury-modal .collapsible-content {
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
}

.treasury-modal .modal-section-content {
  padding: 20px;
}

/* Override scroll snapping for all modal elements */
.modal-section,
.modal-section-content,
.ant-modal-body,
.modal-content {
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: none !important;
  /* جلوگیری از اسکرول دوتایی */
  overscroll-behavior: contain !important;
}

/* بهبود تجربه موبایل برای مودال‌ها */
@media (max-width: 768px) {
  .modal-section {
    margin-bottom: 12px;
    /* جلوگیری از اسکرول اضافی */
    overflow: visible;
  }
  
  .modal-section-content {
    /* جلوگیری از اسکرول اضافی */
    overflow: visible;
  }
  
  /* بهبود اسکرول در موبایل */
  .modern-modal-container {
    /* جلوگیری از اسکرول دوتایی */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== MODAL SECTIONS ===== */

.modal-section {
  margin-bottom: 32px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  border: 1px solid rgba(30, 152, 188, 0.1);
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.modal-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
  border-color: rgba(30, 152, 188, 0.2);
}

.modal-section.no-hover:hover {
  transform: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  border-color: rgba(30, 152, 188, 0.1);
}

.modal-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.05) 0%, rgba(30, 152, 188, 0.02) 100%);
  border-bottom: 1px solid rgba(30, 152, 188, 0.1);
}

.modal-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
  border-radius: 10px;
  color: white;
  box-shadow: 0 3px 8px rgba(30, 152, 188, 0.3);
  flex-shrink: 0;
}

.modal-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex: 1 1;
  text-align: right;
}

.modal-section-content {
  padding: 24px;
}

/* ===== COLLAPSIBLE SECTIONS ===== */

.collapsible-header {
  position: relative;
  -webkit-user-select: none;
          user-select: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 16px 24px;
}

/* .collapsible-header:hover {
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.08) 0%, rgba(30, 152, 188, 0.04) 100%);
} */

.collapsible-arrow {
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(30, 152, 188, 0.1);
  border-radius: 6px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.collapsible-header:hover .collapsible-arrow {
  background: rgba(30, 152, 188, 0.2);
  transform: scale(1.05);
}

.collapsible-arrow svg {
  color: #1E98BC;
  transition: transform 0.3s ease;
}

.collapsible-content {
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  padding: 0;
  transform: translateY(0);
}

.collapsible-content.collapsed {
  opacity: 0;
  padding: 0;
  transform: translateY(-10px);
}

/* Mobile responsive for collapsible sections */
@media (max-width: 768px) {
  .collapsible-header {
    padding: 12px 16px;
    min-height: 50px;
    gap: 10px;
  }
  
  .collapsible-arrow {
    width: 24px;
    height: 24px;
  }
  
  .collapsible-arrow svg {
    width: 14px;
    height: 14px;
  }
  
  .collapsible-content {
    padding: 0 !important;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .collapsible-content.expanded {
    padding: 16px !important;
    overflow: auto !important;
  }
  
  .modal-section-icon {
    width: 30px;
    height: 30px;
  }
  
  .modal-section-title {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .collapsible-header {
    padding: 10px 12px;
    min-height: 45px;
    gap: 8px;
  }
  
  .collapsible-arrow {
    width: 22px;
    height: 22px;
  }
  
  .collapsible-arrow svg {
    width: 12px;
    height: 12px;
  }
  
  .collapsible-content {
    padding: 0 !important;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .collapsible-content.expanded {
    padding: 12px !important;
  }
  
  .modal-section-icon {
    width: 26px;
    height: 26px;
  }
  
  .modal-section-title {
    font-size: 14px;
  }
}

/* ===== FORM LAYOUTS ===== */

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.modal-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.modal-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.modal-form-label {
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.modal-form-label.required::after {
  content: ' *';
  color: #dc2626;
}

/* ===== FORM INPUTS ===== */

.modal-input,
.modal-textarea,
.modal-select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(30, 152, 188, 0.2);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  background: white;
  transition: all 0.3s ease;
  font-family: 'peyda', sans-serif;
}

.modal-input:focus,
.modal-textarea:focus,
.modal-select:focus {
  outline: none;
  border-color: #1E98BC;
  border-width: 1px;
  box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.2);
  transform: translateY(-1px);
}

.modal-input:disabled,
.modal-textarea:disabled,
.modal-select:disabled {
  background-color: #f8fafc;
  color: #64748b;
  cursor: not-allowed;
}

.modal-textarea {
  resize: vertical;
  min-height: 80px;
}

.modal-select {
  cursor: pointer;
  /* حذف فلش پیش‌فرض مرورگر */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* ===== INFO DISPLAY ===== */

.modal-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.modal-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border-radius: 12px;
  border: 1px solid rgba(30, 152, 188, 0.1);
  transition: all 0.3s ease;
}

.modal-info-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.1);
  border-color: rgba(30, 152, 188, 0.2);
}

.modal-info-item.full-width {
  grid-column: 1 / -1;
  align-items: flex-start;
}

.modal-info-label {
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
  margin-left: 12px;
}

.modal-info-value {
  color: #1e293b;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  word-break: break-word;
  flex: 1 1;
}

/* ===== STATS CARDS ===== */

.modal-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.modal-stat-card {
  text-align: center;
  padding: 24px 20px;
  background: white;
  border-radius: 16px;
  border: 1px solid rgba(30, 152, 188, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.modal-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
}

.modal-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(30, 152, 188, 0.15);
}

.modal-stat-value {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 8px;
  display: block;
}

.modal-stat-label {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

/* ===== STATUS BADGES ===== */

.modal-badge {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal-badge.success {
  color: #10b981;
  background-color: #d1fae5;
}

.modal-badge.warning {
  color: #d97706;
  background-color: #fef3c7;
}

.modal-badge.error {
  color: #dc2626;
  background-color: #fee2e2;
}

.modal-badge.info {
  color: #1E98BC;
  background-color: #e0f2fe;
}

.modal-badge.neutral {
  color: #6b7280;
  background-color: #f3f4f6;
}

/* ===== DATA TABLES ===== */

.modal-table-container {
  background: white;
  border-radius: 12px;
  border: 1px solid rgba(30, 152, 188, 0.1);
  overflow: hidden;
}

.modal-table {
  width: 100%;
  border-collapse: collapse;
}

.modal-table th {
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.05) 0%, rgba(30, 152, 188, 0.02) 100%);
  padding: 16px 20px;
  text-align: right;
  font-weight: 600;
  color: #1e293b;
  border-bottom: 1px solid rgba(30, 152, 188, 0.1);
}

.modal-table td {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(30, 152, 188, 0.05);
  color: #374151;
}

.modal-table tr:hover td {
  background-color: rgba(30, 152, 188, 0.02);
}

/* ===== LISTS ===== */

.modal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-list-item {
  padding: 16px 20px;
  background: white;
  border-radius: 12px;
  border: 1px solid rgba(30, 152, 188, 0.1);
  transition: all 0.3s ease;
}

.modal-list-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.1);
  border-color: rgba(30, 152, 188, 0.2);
}

/* ===== LOADING STATES ===== */

.modal-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #64748b;
  gap: 16px;
}

.modal-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top: 3px solid #1E98BC;
  border-radius: 50%;
  animation: modalSpin 1s linear infinite;
}

@keyframes modalSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== EMPTY STATES ===== */

.modal-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #64748b;
  gap: 16px;
  text-align: center;
}

.modal-empty-icon {
  font-size: 48px;
  opacity: 0.5;
}

/* ===== ACTION BUTTONS ===== */

.modal-action-buttons {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(30, 152, 188, 0.1);
}

.modal-btn {
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  border: none;
  min-width: 120px;
  justify-content: center;
  font-family: 'peyda', sans-serif;
}

.modal-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.modal-btn-primary {
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.3);
}

.modal-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #0f4c75 0%, #1E98BC 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(30, 152, 188, 0.4);
}

.modal-btn-secondary {
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.05) 0%, rgba(30, 152, 188, 0.02) 100%);
  color: #64748b;
  border: 1px solid rgba(30, 152, 188, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.modal-btn-secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.1) 0%, rgba(30, 152, 188, 0.05) 100%);
  color: #475569;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.2);
}

.modal-btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.modal-btn-success:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

.modal-btn-danger {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.modal-btn-danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
}

/* ===== FILE UPLOAD ===== */

.modal-file-upload {
  border: 2px dashed rgba(30, 152, 188, 0.3);
  border-radius: 12px;
  padding: 32px 20px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  background: rgba(30, 152, 188, 0.02);
}

.modal-file-upload:hover {
  border-color: rgba(30, 152, 188, 0.5);
  background: rgba(30, 152, 188, 0.05);
}

.modal-file-upload.dragover {
  border-color: #1E98BC;
  background: rgba(30, 152, 188, 0.1);
  transform: scale(1.02);
}

.modal-file-upload-icon {
  font-size: 48px;
  color: #1E98BC;
  margin-bottom: 16px;
}

.modal-file-upload-text {
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
}

.modal-file-upload-input {
  display: none;
}

/* ===== TABS ===== */

.modal-tabs {
  display: flex;
  border-bottom: 1px solid rgba(30, 152, 188, 0.1);
  margin-bottom: 24px;
}

.modal-tab {
  padding: 12px 24px;
  cursor: pointer;
  border: none;
  background: none;
  color: #64748b;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  border-bottom: 2px solid transparent;
  font-family: 'peyda', sans-serif;
}

.modal-tab:hover {
  color: #1E98BC;
  background: rgba(30, 152, 188, 0.05);
}

.modal-tab.active {
  color: #1E98BC;
  border-bottom-color: #1E98BC;
  background: rgba(30, 152, 188, 0.05);
  font-weight: 600;
}

.modal-tab-content {
  display: none;
}

.modal-tab-content.active {
  display: block;
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 768px) {
  .modern-modal-container {
    width: 95%;
    max-width: none;
    margin: 10px;
    padding: 16px;
    max-height: 85vh; /* کاهش ارتفاع برای موبایل */
    border-radius: 12px;
    /* بهبود اسکرول در موبایل */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* جلوگیری از اسکرول دوتایی */
    position: relative;
  }
  
  .modal-section {
    margin-bottom: 16px;
  }
  
  .modal-section-header {
    padding: 16px;
    flex-direction: row;
    position: relative;
    display: flex;
    align-items: center;
    text-align: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  
  .modal-section-header .modal-section-icon {
    width: 40px;
    height: 40px;
  }
  
  .modal-section-title {
    font-size: 16px;
  }
  
  .modal-section-content {
    padding: 16px;
  }
  
  .modal-form-row {
    flex-direction: column;
    gap: 16px;
  }
  
  .modal-form-group {
    width: 100%;
  }
  
  .modal-form-group.full-width {
    width: 100%;
  }
  
  .modal-info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .modal-stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .modal-action-buttons {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    /* margin-bottom: 80px; */
  }
  
  .modal-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 16px;
  }
  
  .modal-table-container {
    overflow-x: auto;
    border-radius: 8px;
  }
  
  .modal-table {
    min-width: 600px;
    font-size: 14px;
  }
  
  .modal-tabs {
    flex-direction: column;
  }
  
  .modal-tab {
    width: 100%;
    text-align: center;
    padding: 12px 16px;
  }
  
  .modal-input,
  .modal-textarea,
  .modal-select {
    font-size: 16px;
    padding: 12px 16px;
  }
  
  .modal-form-label {
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  .modal-info-label {
    font-size: 12px;
  }
  
  .modal-info-value {
    font-size: 14px;
  }
  
  .modal-stat-value {
    font-size: 20px;
  }
  
  .modal-stat-label {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .modern-modal-container {
    width: 98%;
    margin: 5px;
    padding: 12px;
    max-height: 90vh; /* کاهش بیشتر ارتفاع برای موبایل کوچک */
    border-radius: 8px;
    /* بهبود اسکرول در موبایل کوچک */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* جلوگیری از اسکرول دوتایی */
    position: relative;
  }
  
  .modal-section-header {
    padding: 12px;
    gap: 8px;
  }
  
  .modal-section-header .modal-section-icon {
    width: 36px;
    height: 36px;
  }
  
  .modal-section-title {
    font-size: 15px;
  }
  
  .modal-section-content {
    padding: 12px;
  }
  
  .modal-info-item {
    padding: 8px 12px;
  }
  
  .modal-stat-card {
    padding: 16px 12px;
  }
  
  .modal-list-item {
    padding: 10px 12px;
  }
  
  .modal-table th,
  .modal-table td {
    padding: 8px 12px;
    font-size: 13px;
  }
  
  .modal-action-buttons {
    padding: 12px;
    gap: 8px;
  }
  
  .modal-btn {
    padding: 12px 16px;
    font-size: 15px;
    min-height: 48px;
  }
  
  .modal-input,
  .modal-textarea,
  .modal-select {
    font-size: 16px;
    padding: 10px 14px;
    min-height: 44px;
  }
  
  .modal-form-label {
    font-size: 13px;
    margin-bottom: 6px;
  }
  
  .modal-info-label {
    font-size: 11px;
  }
  
  .modal-info-value {
    font-size: 13px;
  }
  
  .modal-stat-value {
    font-size: 18px;
  }
  
  .modal-stat-label {
    font-size: 11px;
  }
  
  .modal-badge {
    font-size: 11px;
    padding: 4px 8px;
  }
  
  .modal-loading-spinner {
    width: 20px;
    height: 20px;
    border-width: 2px;
  }
  
  .modal-empty-icon {
    width: 60px;
    height: 60px;
  }
  
  .modal-empty-icon svg {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 360px) {
  .modern-modal-container {
    width: 100%;
    margin: 0;
    padding: 8px;
    border-radius: 0;
    max-height: max-content;
  }
  
  .modal-section-header {
    padding: 8px;
  }
  
  .modal-section-content {
    padding: 8px;
  }
  
  .modal-action-buttons {
    padding: 8px;
  }
  
  .modal-btn {
    padding: 10px 12px;
    font-size: 14px;
    min-height: 44px;
  }
  
  .modal-input,
  .modal-textarea,
  .modal-select {
    font-size: 16px;
    padding: 8px 12px;
    min-height: 40px;
  }
  
  .modal-form-label {
    font-size: 12px;
  }
  
  .modal-info-label {
    font-size: 10px;
  }
  
  .modal-info-value {
    font-size: 12px;
  }
  
  .modal-stat-value {
    font-size: 16px;
  }
  
  .modal-stat-label {
    font-size: 10px;
  }
  
  .modal-badge {
    font-size: 10px;
    padding: 3px 6px;
  }
}

/* ===== LANDSCAPE ORIENTATION ===== */
@media (max-height: 600px) and (orientation: landscape) {
  .modern-modal-container {
    max-height: 90vh;
    padding: 12px;
  }
  
  .modal-section {
    margin-bottom: 12px;
  }
  
  .modal-section-header {
    padding: 12px;
  }
  
  .modal-section-content {
    padding: 12px;
  }
  
  .modal-action-buttons {
    padding: 12px;
  }
  
  .modal-btn {
    padding: 10px 16px;
    min-height: 40px;
  }
  
  .modal-input,
  .modal-textarea,
  .modal-select {
    padding: 8px 12px;
    min-height: 36px;
  }
}

/* ===== HIGH DPI SCREENS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .modal-section {
    border-width: 0.5px;
  }
  
  .modal-input,
  .modal-textarea,
  .modal-select {
    border-width: 0.5px;
  }
  
  .modal-btn {
    border-width: 0.5px;
  }
}

/* ===== FORCE RESPONSIVE MODALS ===== */
/* Ensure all modals are responsive regardless of their original styling */
@media (max-width: 768px) {
  /* Force all modals to be responsive */
  .ant-modal,
  .modal-overlay,
  .modern-modal-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    /* margin-top: 80px !important; فاصله از navbar */
    position: fixed !important;
    top: 0px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* height: calc(100vh - 80px) !important; */
    border-radius: 16px 16px 0 0 !important;
  }
  
  /* Force modal content to be responsive */
  .ant-modal-content,
  .modal-content,
  .modern-modal-container > div {
    max-width: 100% !important;
    width: 100% !important;
    padding: 16px !important;
    /* height: 100% !important; */
    border-radius: 16px 16px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 150px;
  }
  
  /* Force form elements to be responsive */
  .ant-form-item,
  .modal-form-group {
    width: 100% !important;
    margin-bottom: 16px !important;
  }
  
  /* Force inputs to be responsive */
  .ant-input,
  .ant-select,
  .ant-picker,
  .modal-input,
  .modal-select {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 44px !important;
  }
  
  /* Force buttons to be responsive */
  .ant-btn,
  .modal-btn {
    width: 100% !important;
    margin-bottom: 8px !important;
    min-height: 44px !important;
  }
  
  /* Override Ant Design's fixed width */
  .ant-modal {
    width: 100% !important;
    max-width: 100% !important;
    top: 80px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Force modal to be positioned correctly */
  .ant-modal-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch !important; /* smooth scrolling iOS */
  }
  
  /* Override any fixed positioning */
  .ant-modal {
    position: relative !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    transform: none !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
  }
  
  /* Smooth scrolling for modal content */
  .ant-modal-body,
  .modal-content,
  .modern-modal-container {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 !important;
    overflow-y: auto !important;
    /* max-height: calc(90vh - 140px) !important; */
  }
  
  /* Make modal header sticky */
  .ant-modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  
  /* Make modal footer sticky */
  .ant-modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;
    border-radius: 0 0 16px 16px !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    border-top: 1px solid #e5e7eb !important;
  }
}

@media (max-width: 480px) {
  .ant-modal,
  .modal-overlay,
  .modern-modal-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    /* margin-top: 70px !important; فاصله از navbar */
    position: fixed !important;
    top: 0px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* height: calc(100vh - 70px) !important; */
    border-radius: 12px 12px 0 0 !important;
  }
  
  .ant-modal-content,
  .modal-content,
  .modern-modal-container > div {
    padding: 12px !important;
    border-radius: 12px 12px 0 0 !important;
  }
  
  .ant-input,
  .ant-select,
  .ant-picker,
  .modal-input,
  .modal-select {
    min-height: 40px !important;
  }
  
  .ant-btn,
  .modal-btn {
    min-height: 40px !important;
  }
  
  /* Override Ant Design's fixed width */
  .ant-modal {
    width: 100% !important;
    max-width: 100% !important;
    top: 70px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Force modal to be positioned correctly */
  .ant-modal-wrap {
    padding: 0 !important;
    padding-top: 70px !important; /* فاصله از navbar */
    align-items: flex-start !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Override any fixed positioning */
  .ant-modal {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    height: calc(100vh - 70px) !important;
  }
  
  /* Smooth scrolling for modal content */
  .ant-modal-body,
  .modal-content,
  .modern-modal-container {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Make modal header sticky */
  .ant-modal-header {
    padding: 12px 16px !important;
  }
  
  /* Make modal footer sticky */
  .ant-modal-footer {
    padding: 12px 16px !important;
  }
}

@media (max-width: 360px) {
  .ant-modal,
  .modal-overlay,
  .modern-modal-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    margin-top: 0px !important; /* فاصله از navbar */
    position: fixed !important;
    top: 0px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* height: calc(100vh - 60px) !important; */
    border-radius: 8px 8px 0 0 !important;
  }
  
  .ant-modal-content,
  .modal-content,
  .modern-modal-container > div {
    padding: 8px !important;
    border-radius: 8px 8px 0 0 !important;
  }
  
  .ant-input,
  .ant-select,
  .ant-picker,
  .modal-input,
  .modal-select {
    min-height: 36px !important;
  }
  
  .ant-btn,
  .modal-btn {
    min-height: 36px !important;
  }
  
  /* Override Ant Design's fixed width */
  .ant-modal {
    width: 100% !important;
    max-width: 100% !important;
    top: 60px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Force modal to be positioned correctly */
  .ant-modal-wrap {
    padding: 0 !important;
    padding-top: 60px !important; /* فاصله از navbar */
    align-items: flex-start !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Override any fixed positioning */
  .ant-modal {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    height: calc(100vh - 60px) !important;
  }
  
  /* Adjusted full screen modal */
  .ant-modal-content {
    min-height: calc(100vh - 120px) !important; /* کم کردن فاصله navbar */
    border-radius: 8px 8px 0 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* Smooth scrolling for modal content */
  .ant-modal-body,
  .modal-content,
  .modern-modal-container {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Make modal header sticky */
  .ant-modal-header {
    padding: 8px 12px !important;
  }
  
  /* Make modal footer sticky */
  .ant-modal-footer {
    padding: 8px 12px !important;
  }
}

/* ===== ANT DESIGN MODAL RESPONSIVE ===== */

/* Override Ant Design Modal styles for mobile */
/* Force all Ant Design modals to be responsive */
.ant-modal {
  transition: all 0.3s ease !important;
}

/* Ensure modal is responsive by default */
.ant-modal.modern-modal {
  max-width: 600px !important;
  width: 90% !important;
  margin: 0 auto !important;
}
@media (max-width: 768px) {
  /* Force override Ant Design modal styles */
  .ant-modal.modern-modal,
  .ant-modal {
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
    top: 80px !important;
    padding: 0 !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(100vh - 80px) !important;
  }
  
  .ant-modal.modern-modal .ant-modal-content,
  .ant-modal .ant-modal-content {
    border-radius: 16px 16px 0 0 !important;
    padding: 16px !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .ant-modal.modern-modal .ant-modal-header,
  .ant-modal .ant-modal-header {
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #e5e7eb !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
  }
  
  .ant-modal.modern-modal .ant-modal-title,
  .ant-modal .ant-modal-title {
    font-size: 18px !important;
    font-weight: 600 !important;
  }
  
  .ant-modal.modern-modal .ant-modal-body,
  .ant-modal .ant-modal-body {
    padding: 0 !important;
    flex: 1 1 !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 140px) !important;
  }
  
  .ant-modal.modern-modal .ant-modal-footer,
  .ant-modal .ant-modal-footer {
    padding: 16px 20px !important;
    border-top: 1px solid #e5e7eb !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;
    border-radius: 0 0 16px 16px !important;
    margin: 0 !important;
  }
  
  .ant-modal.modern-modal .ant-form-item,
  .ant-modal .ant-form-item {
    margin-bottom: 16px !important;
  }
  
  .ant-modal.modern-modal .ant-form-item-label,
  .ant-modal .ant-form-item-label {
    padding-bottom: 8px !important;
  }
  
  .ant-modal.modern-modal .ant-form-item-label > label,
  .ant-modal .ant-form-item-label > label {
    font-size: 14px !important;
    font-weight: 500 !important;
  }
  
  .ant-modal.modern-modal .ant-input,
  .ant-modal.modern-modal .ant-input-number,
  .ant-modal.modern-modal .ant-select-selector,
  .ant-modal.modern-modal .ant-picker,
  .ant-modal .ant-input,
  .ant-modal .ant-input-number,
  .ant-modal .ant-select-selector,
  .ant-modal .ant-picker {
    height: 44px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    width: 100% !important;
  }
  
  .ant-modal.modern-modal .ant-btn,
  .ant-modal .ant-btn {
    height: 44px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 8px !important;
  }
  
  .ant-modal.modern-modal .ant-btn + .ant-btn,
  .ant-modal .ant-btn + .ant-btn {
    margin-right: 0 !important;
    margin-top: 12px !important;
  }
  
  /* Force modal to be responsive */
  .ant-modal.modern-modal .ant-modal-wrap,
  .ant-modal .ant-modal-wrap {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 0 !important;
    padding-top: 80px !important;
    overflow: hidden !important;
  }
  
  .ant-modal.modern-modal .ant-modal-mask,
  .ant-modal .ant-modal-mask {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }
}

@media (max-width: 480px) {
  .ant-modal.modern-modal,
  .ant-modal {
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
    top: 70px !important;
    padding: 0 !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(100vh - 70px) !important;
  }
  
  .ant-modal.modern-modal .ant-modal-content,
  .ant-modal .ant-modal-content {
    border-radius: 12px 12px 0 0 !important;
    padding: 12px !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .ant-modal.modern-modal .ant-modal-header,
  .ant-modal .ant-modal-header {
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;
    border-radius: 12px 12px 0 0 !important;
    margin: 0 !important;
  }
  
  .ant-modal.modern-modal .ant-modal-title,
  .ant-modal .ant-modal-title {
    font-size: 16px !important;
  }
  
  .ant-modal.modern-modal .ant-modal-body,
  .ant-modal .ant-modal-body {
    padding: 0 !important;
    flex: 1 1 !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 120px) !important;
  }
  
  .ant-modal.modern-modal .ant-modal-footer,
  .ant-modal .ant-modal-footer {
    padding: 12px 16px !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;
    border-radius: 0 0 12px 12px !important;
    margin: 0 !important;
  }
  
  .ant-modal.modern-modal .ant-form-item,
  .ant-modal .ant-form-item {
    margin-bottom: 12px !important;
  }
  
  .ant-modal.modern-modal .ant-form-item-label > label,
  .ant-modal .ant-form-item-label > label {
    font-size: 13px !important;
  }
  
  .ant-modal.modern-modal .ant-input,
  .ant-modal.modern-modal .ant-input-number,
  .ant-modal.modern-modal .ant-select-selector,
  .ant-modal.modern-modal .ant-picker,
  .ant-modal .ant-input,
  .ant-modal .ant-input-number,
  .ant-modal .ant-select-selector,
  .ant-modal .ant-picker {
    height: 40px !important;
    font-size: 16px !important;
    width: 100% !important;
  }
  
  .ant-modal.modern-modal .ant-btn,
  .ant-modal .ant-btn {
    height: 40px !important;
    font-size: 15px !important;
    width: 100% !important;
  }
  
  .ant-modal.modern-modal .ant-modal-wrap,
  .ant-modal .ant-modal-wrap {
    padding: 0 !important;
    padding-top: 70px !important;
    overflow: hidden !important;
  }
}

@media (max-width: 360px) {
  .ant-modal.modern-modal,
  .ant-modal {
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
    top: 60px !important;
    padding: 0 !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(100vh - 60px) !important;
  }
  
  .ant-modal.modern-modal .ant-modal-content,
  .ant-modal .ant-modal-content {
    border-radius: 8px 8px 0 0 !important;
    padding: 8px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .ant-modal.modern-modal .ant-modal-body,
  .ant-modal .ant-modal-body {
    flex: 1 1 !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 100px) !important;
  }
  
  .ant-modal.modern-modal .ant-modal-header,
  .ant-modal .ant-modal-header {
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;
    border-radius: 8px 8px 0 0 !important;
    margin: 0 !important;
  }
  
  .ant-modal.modern-modal .ant-modal-title,
  .ant-modal .ant-modal-title {
    font-size: 15px !important;
  }
  
  .ant-modal.modern-modal .ant-modal-footer,
  .ant-modal .ant-modal-footer {
    padding: 8px 12px !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;
    border-radius: 0 0 8px 8px !important;
    margin: 0 !important;
  }
  
  .ant-modal.modern-modal .ant-form-item,
  .ant-modal .ant-form-item {
    margin-bottom: 8px !important;
  }
  
  .ant-modal.modern-modal .ant-form-item-label > label,
  .ant-modal .ant-form-item-label > label {
    font-size: 12px !important;
  }
  
  .ant-modal.modern-modal .ant-input,
  .ant-modal.modern-modal .ant-input-number,
  .ant-modal.modern-modal .ant-select-selector,
  .ant-modal.modern-modal .ant-picker,
  .ant-modal .ant-input,
  .ant-modal .ant-input-number,
  .ant-modal .ant-select-selector,
  .ant-modal .ant-picker {
    height: 36px !important;
    font-size: 16px !important;
    width: 100% !important;
  }
  
  .ant-modal.modern-modal .ant-btn,
  .ant-modal .ant-btn {
    height: 36px !important;
    font-size: 14px !important;
    width: 100% !important;
  }
  
  .ant-modal.modern-modal .ant-modal-wrap,
  .ant-modal .ant-modal-wrap {
    padding: 0 !important;
    padding-top: 60px !important;
    overflow: hidden !important;
  }
}

/* ===== LANDSCAPE ORIENTATION FOR ANT MODALS ===== */
@media (max-height: 600px) and (orientation: landscape) {
  .ant-modal {
    top: 5% !important;
  }
  
  .ant-modal-content {
    max-height: 90vh !important;
    padding: 12px !important;
  }
  
  .ant-modal-header {
    padding: 8px 0 !important;
    margin-bottom: 8px !important;
  }
  
  .ant-modal-body {
    max-height: 60vh !important;
    overflow-y: auto !important;
  }
  
  .ant-form-item {
    margin-bottom: 8px !important;
  }
  
  .ant-input,
  .ant-input-number,
  .ant-select-selector,
  .ant-picker {
    height: 36px !important;
  }
  
  .ant-btn {
    height: 36px !important;
  }
}

/* ===== SPECIAL UTILITIES ===== */

.modal-text-center {
  text-align: center;
}

.modal-text-left {
  text-align: left;
}

.modal-text-right {
  text-align: right;
}

.modal-font-bold {
  font-weight: 700;
}

.modal-font-semibold {
  font-weight: 600;
}

.modal-text-sm {
  font-size: 12px;
}

.modal-text-base {
  font-size: 14px;
}

.modal-text-lg {
  font-size: 16px;
}

.modal-text-xl {
  font-size: 18px;
}

.modal-mb-0 {
  margin-bottom: 0;
}

.modal-mb-2 {
  margin-bottom: 8px;
}

.modal-mb-4 {
  margin-bottom: 16px;
}

.modal-mb-6 {
  margin-bottom: 24px;
}

.modal-mt-0 {
  margin-top: 0;
}

.modal-mt-2 {
  margin-top: 8px;
}

.modal-mt-4 {
  margin-top: 16px;
}

.modal-mt-6 {
  margin-top: 24px;
}

/* ===== MOBILE OPTIMIZATION ===== */

/* جلوگیری از اسکرول دوتایی در موبایل */
@media (max-width: 768px) {
  /* بهبود تجربه اسکرول */
  .modern-modal-container {
    /* جلوگیری از اسکرول دوتایی */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* بهبود عملکرد */
    will-change: scroll-position;
    transform: translateZ(0);
   
  }
  
  /* بهبود عملکرد اسکرول */
  .modal-section,
  .modal-section-content {
    /* جلوگیری از اسکرول اضافی */
    overflow: visible;
    /* بهبود عملکرد */
    will-change: auto;
    transform: none;
  }
  
  /* بهبود دکمه‌ها در موبایل */
  .modal-btn {
    /* بهبود لمس */
    min-height: 44px;
    touch-action: manipulation;
    /* جلوگیری از zoom در iOS */
    font-size: 16px;
  }
  
  /* بهبود input ها در موبایل */
  .modal-input,
  .modal-textarea,
  .modal-select {
    /* بهبود لمس */
    min-height: 44px;
    touch-action: manipulation;
    /* جلوگیری از zoom در iOS */
    font-size: 16px;
  }
}

/* بهبود برای موبایل‌های کوچک */
@media (max-width: 480px) {
  .modern-modal-container {
    /* کاهش بیشتر padding */
    padding: 8px;
    /* بهبود اسکرول */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  
  .modal-section {
    /* کاهش margin */
    margin-bottom: 8px;
  }
  
  .modal-section-content {
    /* کاهش padding */
    padding: 8px;
  }
  
  .modal-close-button {
    padding: 8px;
    min-width: 36px;
    min-height: 36px;
  }
  
  .modal-close-button svg {
    width: 16px;
    height: 16px;
  }
}

/* ===== WALLET MANAGEMENT MODAL STYLES ===== */

.wallet-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(30, 152, 188, 0.1);
  padding-bottom: 16px;
}

.wallet-tab {
  padding: 12px 24px;
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.05) 0%, rgba(30, 152, 188, 0.02) 100%);
  color: #64748b;
  border: 1px solid rgba(30, 152, 188, 0.1);
  border-radius: 12px 12px 0 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'peyda', sans-serif;
}

.wallet-tab:hover {
  background: linear-gradient(135deg, rgba(30, 152, 188, 0.1) 0%, rgba(30, 152, 188, 0.05) 100%);
  color: #1E98BC;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.2);
}

.wallet-tab.active {
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
  color: white;
  border-color: #1E98BC;
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.3);
}

/* ===== WALLET FORM ACTIONS ===== */
.modal-form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(30, 152, 188, 0.1);
}

.modal-btn {
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'peyda', sans-serif;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.modal-btn-primary {
  background: linear-gradient(135deg, #1E98BC 0%, #0f4c75 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.3);
}

.modal-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #0f4c75 0%, #1E98BC 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 152, 188, 0.4);
}

.modal-btn-primary:disabled {
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.modal-btn-secondary {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

.modal-btn-secondary:hover {
  background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(107, 114, 128, 0.4);
}

/* Responsive styles for wallet form */
@media (max-width: 768px) {
  .modal-form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .modal-form-actions {
    flex-direction: column;
  }
  
  .wallet-tabs {
    flex-direction: column;
    gap: 4px;
  }
  
  .wallet-tab {
    border-radius: 12px;
    text-align: center;
  }
  
  .modal-btn {
    width: 100%;
    margin-bottom: 8px;
  }
  
  .modal-close-button {
    padding: 10px;
    min-width: 40px;
    min-height: 40px;
  }
  
  .modal-close-button svg {
    width: 18px;
    height: 18px;
  }
} 

/* ===== RESPONSIVE MODAL OVERLAY ===== */
@media (max-width: 768px) {
  /* Ensure modal overlay covers full screen */
  .ant-modal-mask {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: blur(4px) !important;
            backdrop-filter: blur(4px) !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
  }
  
  /* Ensure modal container is properly positioned */
  .ant-modal {
    position: relative !important;
    max-width: 95vw !important;
    max-height: 95vh !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    z-index: 1000000 !important;
  }
  
  /* Prevent body scroll when modal is open */
  body.ant-scrolling-effect {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .ant-modal-mask {
    background-color: rgba(0, 0, 0, 0.6) !important;
    -webkit-backdrop-filter: blur(6px) !important;
            backdrop-filter: blur(6px) !important;
  }
}

@media (max-width: 360px) {
  .ant-modal-mask {
    background-color: rgba(0, 0, 0, 0.7) !important;
    -webkit-backdrop-filter: blur(8px) !important;
            backdrop-filter: blur(8px) !important;
  }
}

/* ===== RESPONSIVE FOR VERY SMALL SCREENS (60px and below) ===== */
@media (max-width: 60px) {
  /* Force all modals to be responsive */
  .ant-modal,
  .modal-overlay,
  .modern-modal-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    margin-top: 0px !important; /* بدون فاصله از navbar */
    position: fixed !important;
    top: 0px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    border-radius: 0 !important;
    z-index: 999999 !important;
  }
  
  /* Force modal content to be responsive */
  .ant-modal-content,
  .modal-content,
  .modern-modal-container > div {
    max-width: 100% !important;
    width: 100% !important;
    padding: 4px !important;
    height: 100% !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }
  
  /* Force modal mask to cover full screen */
  .ant-modal-mask {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    -webkit-backdrop-filter: blur(10px) !important;
            backdrop-filter: blur(10px) !important;
    z-index: 999998 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  
  /* Force modal to be positioned correctly */
  .ant-modal-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
  }
  
  /* Override any fixed positioning */
  .ant-modal {
    position: fixed !important;
    top: 0px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    z-index: 999999 !important;
  }
  
  /* Force form elements to be responsive */
  .ant-form-item,
  .modal-form-group {
    width: 100% !important;
    margin-bottom: 8px !important;
  }
  
  /* Force inputs to be responsive */
  .ant-input,
  .ant-select,
  .ant-picker,
  .modal-input,
  .modal-select {
    width: 100% !important;
    font-size: 12px !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
  }
  
  /* Force buttons to be responsive */
  .ant-btn,
  .modal-btn {
    width: 100% !important;
    margin-bottom: 4px !important;
    min-height: 32px !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
  }
  
  /* Make modal header sticky */
  .ant-modal-header {
    padding: 4px 8px !important;
    margin: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  
  /* Make modal footer sticky */
  .ant-modal-footer {
    padding: 4px 8px !important;
    margin: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;
    border-radius: 0 !important;
    border-top: 1px solid #e5e7eb !important;
  }
  
  /* Smooth scrolling for modal content */
  .ant-modal-body,
  .modal-content,
  .modern-modal-container {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
    flex: 1 1 !important;
    padding: 4px !important;
  }
  
  /* Prevent body scroll when modal is open */
  body.ant-scrolling-effect {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
} 

/* ===== MODAL SCROLLING AND STICKY ELEMENTS ===== */
@media (max-width: 768px) {
  /* Ensure modal content scrolls properly */
  .ant-modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    /* Prevent horizontal scroll */
    overflow-x: hidden !important;
    /* Ensure proper height calculation */
    height: auto !important;
    min-height: 0 !important;
  }
  
  /* Make sure form elements don't overflow */
  .ant-form {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Ensure buttons container stays at bottom */
  .ant-modal-footer {
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
    margin-top: auto !important;
  }
  
  /* Ensure header stays at top */
  .ant-modal-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin-bottom: 0 !important;
  }
  
  /* Prevent content from going under header/footer */
  .ant-modal-body {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

@media (max-width: 480px) {
  .ant-modal-body {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

@media (max-width: 360px) {
  .ant-modal-body {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
} 

/* ===== IMPORTANT OVERRIDES FOR RESPONSIVE MODALS ===== */
@media (max-width: 768px) {
  /* Ensure no other styles interfere with modal behavior */
  .ant-modal-root {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
  }
  
  /* Override any transform or positioning that might interfere */
  .ant-modal {
    transform: none !important;
    transition: all 0.3s ease !important;
    animation: modalSlideIn 0.3s ease !important;
  }
  
  /* Ensure modal content is properly sized */
  .ant-modal-content {
    position: relative !important;
    max-width: 95vw !important;
    max-height: 95vh !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Prevent any margin or padding from interfering */
  .ant-modal-body {
    margin: 0 !important;
    padding: 16px !important;
    flex: 1 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  
  /* Ensure proper z-index stacking */
  .ant-modal-wrap {
    z-index: 999999 !important;
  }
  
  .ant-modal {
    z-index: 1000000 !important;
  }
}

@media (max-width: 480px) {
  .ant-modal-body {
    padding: 12px !important;
  }
}

@media (max-width: 360px) {
  .ant-modal-body {
    padding: 8px !important;
  }
} 
/* استایل‌های صفحات فاکتور خرید و فروش */

/* کانتینر اصلی */
.invoice-container {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  overflow: hidden;
}

/* Breadcrumb Container */
.breadcrumb-container {
  margin: 0 0 20px 0;
  padding: 0;
}

/* هدر فرم */
.invoice-header {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 2px solid #e2e8f0;
  border-radius: 16px 16px 0 0;
  padding: 24px;
}

/* عنوان صفحه */
.invoice-title {
  background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.invoice-title.sale {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* هدر عملیات */
.invoice-actions-header {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
}

/* کانتینر دکمه‌های عملیات */
.actions-container {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
}

/* گروه دکمه‌های عملیات */
.action-buttons-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-direction: row;
}

/* دکمه بازگشت */
.back-button {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  font-weight: 500;
  color: #374151;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.back-button:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
}

.back-button i {
  font-size: 0.9rem;
}

/* دکمه‌های عملیات */
.action-button {
  border: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 24px;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.action-button:hover {
  transform: translateY(-1px);
}

.action-button.save {
  background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
  color: white;
  box-shadow: 0 4px 6px -1px rgba(30, 152, 188, 0.3);
}

.action-button.save:hover {
  background: linear-gradient(135deg, #1a87a8 0%, #167693 100%);
  box-shadow: 0 6px 8px -1px rgba(30, 152, 188, 0.4);
}

.action-button.cash {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3);
}

.action-button.cash:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 6px 8px -1px rgba(16, 185, 129, 0.4);
}

.action-button.close {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.3);
}

.action-button.close:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 6px 8px -1px rgba(239, 68, 68, 0.4);
}

/* بخش اطلاعات پایه */
.basic-info-section {
  padding: 24px;
}

.basic-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 24px;
}

@media (max-width: 1200px) {
  .basic-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .basic-info-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* برچسب فیلدها */
.field-label {
  color: #374151;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
  display: block;
}

/* فیلدهای ورودی */
.input-field {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  width: 100%;
  padding: 12px 16px;
}

/* فیلدهای غیرقابل ویرایش */
.input-field.readonly,
.table-input.readonly {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-color: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
  font-weight: 600;
}

.input-field:focus {
  outline: none;
  border-color: #1E98BC;
  box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.2);
  background: white;
}

.input-field::placeholder {
  color: #9ca3af;
}

/* استایل‌های DatePicker برای صفحات فاکتور */
.invoice-date-picker-container {
  width: 100%;
}

.invoice-date-picker-input {
  width: 100% !important;
  /* height: 44px !important; */
  border-radius: 12px !important;
  border: 2px solid #e2e8f0 !important;
  padding: 12px 16px !important;
  font-size: 0.95rem !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  color: #374151 !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
  font-family: 'peyda', sans-serif !important;
  line-height: normal !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.invoice-date-picker-input:focus {
  outline: none !important;
  border-color: #1E98BC !important;
  box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.2) !important;
  background: white !important;
}

.invoice-date-picker-input::placeholder {
  color: #9ca3af !important;
  font-family: 'peyda', sans-serif !important;
}

/* دراپ‌داون */
.select-field {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  padding: 8px 12px;
  width: 100%;
  /* حذف فلش پیش‌فرض مرورگر */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.select-field:focus {
  outline: none;
  border-color: #1E98BC;
  box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.2);
  background: white;
}

/* چک‌باکس */
.checkbox-field {
  width: 16px;
  height: 16px;
  color: #1E98BC;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  transition: all 0.2s ease;
}

/* اطلاعات خریدار انتخاب شده */
.selected-customer-info {
  margin-top: 12px;
  padding: 12px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: 'peyda', sans-serif;
}



.selected-customer-info p {
  margin: 4px 0;
  color: #0c4a6e;
}

.selected-customer-info strong {
  color: #0369a1;
  font-weight: 600;
}

.checkbox-field:checked {
  background-color: #1E98BC;
  border-color: #1E98BC;
}

/* بخش چک‌باکس */
.checkbox-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.checkbox-section label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #374151;
  cursor: pointer;
}

/* بخش آیتم‌ها */
.items-section {
  padding: 24px;
  background: white;
}

.items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e2e8f0;
}

.items-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}



.items-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1f2937;
  background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.add-item-button {
  background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 4px rgba(30, 152, 188, 0.2);
}

.add-item-button:hover {
  background: linear-gradient(135deg, #1a87a8 0%, #167693 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(30, 152, 188, 0.4);
}

.add-item-button i {
  font-size: 0.9rem;
}

/* جدول آیتم‌ها */
.items-table-container {
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  overflow: visible;
  margin-top: 16px;
}

.items-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  table-layout: fixed;
}

.items-table thead tr {
  background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
  color: white;
}

.items-table th {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 16px 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

/* header ستون نام کالا - عرض بیشتر */
.items-table th:nth-child(1) {
  min-width: 300px !important;
  width: 300px !important;
}

.items-table td {
  border: 1px solid #e2e8f0;
  padding: 12px 8px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  text-align: center;
  vertical-align: middle;
}

/* ستون نام کالا - عرض بیشتر */
.items-table td:nth-child(1) {
  min-width: 300px !important;
  width: 300px !important;
}

/* فیلدهای جدول */
.table-input {
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.8rem;
  transition: all 0.2s ease;
  width: 100%;
  text-align: center;
  font-weight: 500;
}

.table-input:focus {
  outline: none;
  border-color: #1E98BC;
  box-shadow: 0 0 0 2px rgba(30, 152, 188, 0.1);
  background: #f8fafc;
}

.table-input.readonly {
  background: #f1f5f9;
  color: #374151;
  cursor: not-allowed;
  font-weight: 600;
}

.table-input::placeholder {
  color: #9ca3af;
  text-align: center;
}

/* بهبود عملکرد AutoSelectInput در جداول فاکتور */
.table-input:focus {
  outline: none !important;
  border-color: #1E98BC !important;
  border-width: 1px !important;
  box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.2) !important;
}

.table-input[type="number"]:focus {
  outline: none !important;
  border-color: #1E98BC !important;
  border-width: 1px !important;
  box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.2) !important;
}

/* بهبود انتخاب متن در input های جدول */
.table-input:focus::selection {
  background-color: #1E98BC !important;
  color: white !important;
}

.table-input:focus::-moz-selection {
  background-color: #1E98BC !important;
  color: white !important;
}

/* دکمه حذف */
.delete-button {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: 'peyda', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 36px;
}

.delete-button:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.delete-button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* دکمه افزودن کالا */
.add-product-button {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-product-button:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

/* بخش انتخاب کالا */
.product-select-container {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  position: relative;
}

.product-select-container select {
  flex: 1 1;
  min-width: 0;
}

/* بخش انتخاب فروشنده */
.seller-select-container {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.seller-select-container .select-field {
  flex: 1 1;
  min-width: 0;
}

.add-seller-button {
  padding: 0;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.2);
  align-self: center;
  flex-shrink: 0;
}

.add-seller-button:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.add-seller-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.2);
}

/* بخش انتخاب خریدار */
.customer-select-container {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.customer-select-container .select-field {
  flex: 1 1;
  min-width: 0;
}

.add-customer-button {
  padding: 0;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.2);
  align-self: center;
  flex-shrink: 0;
}

.add-customer-button:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.add-customer-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.2);
}

/* فیلد توضیحات پرداخت */
.payment-description-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: 'peyda', sans-serif;
  resize: vertical;
  min-height: 80px;
  background: #ffffff;
  transition: all 0.2s ease;
}

.payment-description-input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2);
}

.payment-description-input::placeholder {
  color: #9ca3af;
  font-style: italic;
}

/* بخش خلاصه */
.summary-section {
  padding: 24px;
  background: white;
}

.summary-header {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 2px solid #e2e8f0;
  border-radius: 16px 16px 0 0;
  padding: 20px 24px;
}

.summary-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0;
  background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.summary-content {
  padding: 24px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 24px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.summary-item:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.summary-item.full-width {
  grid-column: 1 / -1;
}

.summary-label {
  font-size: 0.9rem;
  color: #374151;
  font-weight: 500;
}

.summary-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1f2937;
}

.summary-value.net {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1E98BC;
}

.summary-input {
  width: 80px;
  text-align: center;
  padding: 6px 8px;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  color: #374151;
  transition: border-color 0.2s ease;
}

.summary-input:focus {
  outline: none;
  border-color: #1E98BC;
  box-shadow: 0 0 0 2px rgba(30, 152, 188, 0.1);
}

.summary-input:hover {
  border-color: #9ca3af;
}

/* بخش فاکتور نهایی و تخفیف */
.final-amount-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 16px;
}

.final-amount-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.discount-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  flex-wrap: wrap;
  direction: ltr;
}

/* انتخاب نوع تخفیف */
.discount-type-select {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.875rem;
  color: #374151;
  min-width: 120px;
  transition: all 0.2s ease;
}

.discount-type-select:focus {
  outline: none;
  border-color: #1E98BC;
  box-shadow: 0 0 0 3px rgba(30, 152, 188, 0.1);
}

.discount-type-select:hover {
  border-color: #9ca3af;
}

.discount-input {
  width: 70px;
  text-align: center;
  padding: 8px 10px;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  color: #374151;
  transition: border-color 0.2s ease;
}

.discount-input:focus {
  outline: none;
  border-color: #1E98BC;
  box-shadow: 0 0 0 2px rgba(30, 152, 188, 0.1);
}

.discount-input:hover {
  border-color: #9ca3af;
}

.discount-percent {
  font-size: 0.9rem;
  font-weight: 500;
  color: #6b7280;
  margin-left: -4px;
}

.apply-discount-button {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.apply-discount-button:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.apply-discount-button:active {
  transform: translateY(0);
}

/* دکمه ثبت فاکتور */
.submit-invoice-button {
  background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 0;
  box-shadow: 0 2px 8px rgba(30, 152, 188, 0.2);
}

.submit-invoice-button:hover {
  background: linear-gradient(135deg, #1a87a8 0%, #167693 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.3);
}

.submit-invoice-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(30, 152, 188, 0.2);
}

.submit-invoice-button i {
  font-size: 1rem;
}

.submit-invoice-button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.submit-invoice-button:disabled:hover {
  background: #9ca3af;
  transform: none;
  box-shadow: none;
}

/* فیلدهای کوچک */
.small-input {
  width: 90px;
  text-align: center;
  padding: 8px 6px;
  font-size: 0.8rem;
  font-weight: 500;
}

.medium-input {
  width: 110px;
  text-align: center;
  padding: 8px 6px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* پیام خطا */
.error-message {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 0.9rem;
}



/* دکمه‌های عملیات */
.edit-button {
  background: #1E98BC;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'peyda', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 36px;
}

.edit-button:hover {
  background: #1a87a8;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(30, 152, 188, 0.2);
}

.edit-button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.save-button {
  background: #10b981;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'peyda', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 36px;
}

.save-button:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.save-button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.cancel-button {
  background: #6b7280;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'peyda', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 36px;
}

.cancel-button:hover {
  background: #4b5563;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
}

.cancel-button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ریسپانسیو */
@media (max-width: 768px) {
  .basic-info-grid {
    grid-template-columns: 1fr;
  }
  
  .summary-grid {
    grid-template-columns: 1fr;
  }
  
  .items-table-container {
    overflow-x: auto;
  }
  
  .items-table {
    min-width: 800px;
  }
  
  .payment-buttons {
    flex-direction: column;
  }
  
  .invoice-actions-header {
    flex-direction: column;
    gap: 12px;
  }
  
  .actions-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .actions-container button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .invoice-header,
  .basic-info-section,
  .items-section,
  .summary-section {
    padding: 16px;
  }
  
  .invoice-title {
    font-size: 1.5rem;
  }
  
  .action-button {
    padding: 6px 16px;
    font-size: 0.8rem;
  }
} 

/* SearchableSelect */
.searchable-select {
  position: relative;
  width: 100%;
}
.searchable-select-trigger {
  width: 100%;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #111827;
  cursor: pointer;
}
.searchable-select-trigger:disabled { opacity: 0.6; cursor: not-allowed; }
.searchable-select-value.placeholder { color: #6b7280; }
.searchable-select-caret { margin-inline-start: 8px; color: #6b7280; }

.searchable-select-dropdown {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: 40;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(2,6,23,0.12);
  overflow: hidden;
}
.searchable-select-search { padding: 8px; border-bottom: 1px solid #eef2f7; }
.searchable-select-input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  outline: none;
}
.searchable-select-options { max-height: 220px; overflow-y: auto; }
.searchable-select-option {
  padding: 10px 12px;
  cursor: pointer;
}
.searchable-select-option:hover { background: #f8fafc; }
.searchable-select-option.active { background: #ecfeff; color: #0e7490; font-weight: 600; }
.searchable-select-no-results { padding: 12px; color: #6b7280; text-align: center; }

.searchable-select-cancel {
    padding: 8px;
    border-top: 1px solid #eef2f7;
    text-align: center;
}

.searchable-select-cancel-btn {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.searchable-select-cancel-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
} 

/* Overlay dropdown above table content */
.searchable-select-dropdown {
  z-index: 2000;
} 

/* استایل‌های اضافی برای صفحه checkout */

/* بخش خریدار */
.party-section {
  padding: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  width: 100%;
}

.party-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.party-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  width: 100%;
}

.field-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.field-group .field-label {
  color: #374151;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
  display: block;
}

.field-group .input-field {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  width: 100%;
  padding: 12px 16px;
}

.field-group .input-field:focus {
  outline: none;
  border-color: #1E98BC;
  box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.2);
  background: white;
}

.field-group .input-field::placeholder {
  color: #9ca3af;
}

/* بخش روش پرداخت */
.payment-section {
  padding: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.payment-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
  cursor: pointer;
}

.form-check:hover {
  background: #f8fafc;
  border-color: #1E98BC;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(30, 152, 188, 0.1);
}

.form-check-input {
  width: 18px;
  height: 18px;
  color: #1E98BC;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  transition: all 0.2s ease;
  cursor: pointer;
}

.form-check-input:checked {
  background-color: #1E98BC;
  border-color: #1E98BC;
}

.form-check-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  flex: 1 1;
}

/* مبالغ پرداختی */
.payment-amounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

/* دکمه‌های عملیات */
.action-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 24px;
}

.action-buttons .btn {
  padding: 14px 28px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 160px;
}

.action-buttons .btn-primary {
  background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(30, 152, 188, 0.2);
}

.action-buttons .btn-primary:hover {
  background: linear-gradient(135deg, #1a87a8 0%, #167693 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.3);
}

.action-buttons .btn-secondary {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #374151;
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.action-buttons .btn-secondary:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-buttons .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* استایل فیلد انتخاب نوع پرداخت */
.payment-method-select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.payment-method-select:focus {
  outline: none;
  border-color: #1E98BC;
  box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.2);
}

.payment-method-select:hover {
  border-color: #9ca3af;
}

/* ریسپانسیو */
@media (max-width: 768px) {
  .party-fields {
    grid-template-columns: 1fr;
  }
  
  .payment-amounts {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 12px;
  }
  
  .action-buttons .btn {
    width: 100%;
    min-width: 0;
    min-width: initial;
  }
}

@media (max-width: 480px) {
  .party-section,
  .payment-section {
    padding: 12px;
  }
  
  .form-check {
    padding: 10px 12px;
  }
  
  .form-check-label {
    font-size: 0.9rem;
  }
  
  .action-buttons .btn {
    padding: 12px 20px;
    font-size: 0.9rem;
  }
}

/* نوار وضعیت سفارش */
.order-status-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  margin: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.order-status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  /* border-bottom: 1px solid #e2e8f0; */
}

.order-status-title {
  background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
}

.order-status-message {
  color: #6b7280;
  font-size: 1rem;
  margin: 0;
  font-weight: 500;
}

.order-status-progress {
  margin-bottom: 24px;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-bottom: 16px;
}

.progress-steps::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 2px;
  background: #e2e8f0;
  z-index: 1;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  flex: 1 1;
}

.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border: 3px solid #e2e8f0;
  background: #ffffff;
  transition: all 0.3s ease;
}

.progress-step.completed .step-circle {
  background: #10b981;
  border-color: #10b981;
  color: white;
}

.progress-step.current .step-circle {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
}

.progress-step.cancelled .step-circle {
  background: #dc2626;
  border-color: #dc2626;
  color: white;
}

.current-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.step-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  text-align: center;
}

.progress-step.completed .step-label {
  color: #10b981;
  font-weight: 600;
}

.progress-step.current .step-label {
  color: #ef4444;
  font-weight: 600;
}

.progress-step.cancelled .step-label {
  color: #dc2626;
  font-weight: 600;
}

/* پیام وضعیت سفارش */
.order-status-message-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
}

.status-message {
  margin-bottom: 16px;
}

.status-message p {
  color: #374151;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

.payment-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  color: #92400e;
  font-weight: 600;
}

.payment-timer svg {
  color: #f59e0b;
}

.order-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.btn-danger {
  background: #ef4444;
  color: white;
  border: 1px solid #ef4444;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

.btn-success {
  background: #10b981;
  color: white;
  border: 1px solid #10b981;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-success:hover {
  background: #059669;
  border-color: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

/* ریسپانسیو برای نوار وضعیت */
@media (max-width: 768px) {
  .order-status-section {
    margin: 8px;
    padding: 16px;
  }

  .order-status-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .order-status-title , .order-details-title,.summary-title {
    font-size: 18px !important;
  }

  .order-status-message , .detail-label , .detail-value , .payment-amounts{
    font-size: 12px !important;
  }

  .progress-steps {
    flex-direction: row;
    /* gap: 8px; */
    justify-content: space-between;
  }

  .progress-steps::before {
    display: block;
    top: 12px;
    left: 12px;
    right: 12px;
    height: 2px;
    background: #e2e8f0;
    z-index: 1;
  }

  .step-circle {
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 2;
  }

  .step-label {
    font-size: 0.7rem;
    margin-top: 4px;
  }

  .order-actions {
    flex-direction: column;
  }

  .btn-danger,
  .btn-success {
    width: 100%;
  }
}

/* استایل‌های جزئیات سفارش */
.order-details-section {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  margin: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.order-details-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 16px 0;
  background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.order-details-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  
}

.order-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

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

.detail-label {
  font-size: 0.9rem;
  color: #6b7280;
  font-weight: 500;
  min-width: 120px;
  text-align: right;
}

.detail-value {
  font-size: 0.9rem;
  color: #1f2937;
  font-weight: 600;
  text-align: left;
  flex: 1 1;
  margin-right: 16px;
}

.detail-value.order-number {
  color: #1E98BC;
  font-weight: 700;
}

/* ریسپانسیو برای جزئیات سفارش */
@media (max-width: 768px) {
  .order-details-section {
    margin: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
  }
  
  .order-details-content {
    align-items: center;
  }

  .order-detail-row {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
  }
  
  .detail-label {
    min-width: auto;
    text-align: right;
    font-size: 0.85rem;
  }
  
  .detail-value {
    text-align: right;
    margin-right: 0;
    font-size: 0.85rem;
  }
} 
/* استایل‌های صفحه موفقیت‌آمیز checkout */

.success-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* هدر موفقیت */
.success-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 20px;
  color: white;
  position: relative;
  overflow: hidden;
}

.success-header::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

.success-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.success-icon svg {
  width: 40px;
  height: 40px;
  color: white;
}

.success-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.success-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* اطلاعات فاکتور */
.invoice-details {
  background: white;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 32px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
}

.details-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 24px;
  text-align: center;
  background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.detail-item:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.detail-label {
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 500;
}

.detail-value {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
}

.detail-value.amount {
  color: #10b981;
  font-size: 1.1rem;
}

.detail-value.status-success {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
}

/* پیام تشکر */
.thank-you-message {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.thank-you-message::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.05) 50%, transparent 70%);
  animation: shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.message-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.message-icon svg {
  width: 30px;
  height: 30px;
  color: white;
}

.message-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1e40af;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.message-text {
  font-size: 1rem;
  color: #1e40af;
  line-height: 1.6;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* دکمه‌های عملیات */
.action-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 32px;
  /* flex-wrap: wrap; */
}

.action-buttons .btn {
  padding: 16px 32px;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 180px;
  text-decoration: none;
}

.action-buttons .btn-primary {
  background: linear-gradient(135deg, #1E98BC 0%, #1a87a8 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(30, 152, 188, 0.3);
}

.action-buttons .btn-primary:hover {
  background: linear-gradient(135deg, #1a87a8 0%, #167693 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(30, 152, 188, 0.4);
}

.action-buttons .btn-secondary {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #374151;
  border: 1px solid #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-buttons .btn-secondary:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.action-buttons .btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.action-buttons .btn:hover svg {
  transform: scale(1.1);
}

/* اطلاعات تماس */
.contact-info {
  background: white;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}

.contact-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 20px;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.contact-method:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.contact-method svg {
  color: #1E98BC;
  flex-shrink: 0;
}

.contact-method span {
  font-size: 0.95rem;
  color: #374151;
  font-weight: 500;
}

/* ریسپانسیو */
@media (max-width: 768px) {
  .success-container {
    padding: 20px 16px;
  }
  
  .success-header {
    padding: 30px 20px;
    margin-bottom: 30px;
  }
  
  .success-title {
    font-size: 1.6rem;
  }
  
  .success-subtitle {
    font-size: 1rem;
  }
  
  .invoice-details {
    padding: 24px 20px;
    margin-bottom: 24px;
  }
  
  .details-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
  }
  
  .action-buttons {
    flex-direction: row;
    gap: 16px;
  }
  
  .action-buttons .btn {
    width: 100%;
    min-width: 0;
    min-width: initial;
  }
  
  .thank-you-message {
    padding: 24px 20px;
    margin-bottom: 24px;
  }
  
  .message-title {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .success-header {
    padding: 24px 16px;
  }
  
  .success-title {
    font-size: 1.4rem;
  }
  
  .success-subtitle {
    font-size: 0.9rem;
  }
  
  .success-icon {
    width: 60px;
    height: 60px;
  }
  
  .success-icon svg {
    width: 30px;
    height: 30px;
  }
  
  .invoice-details {
    padding: 20px 16px;
  }
  
  .details-title {
    font-size: 1.2rem;
  }
  
  .thank-you-message {
    padding: 20px 16px;
  }
  
  .message-icon {
    width: 50px;
    height: 50px;
  }
  
  .message-icon svg {
    width: 25px;
    height: 25px;
  }
} 
/* ===== PARTS MANAGEMENT RESPONSIVE STYLES ===== */

.parts-container {
    padding: 24px;
    background-color: #f8fafc;
    min-height: 100vh;
}

.parts-content {
    max-width: 1400px;
    margin: 0 auto;
    background-color: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.parts-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 16px;
    background-color: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.parts-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.parts-pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.parts-excel-btn {
    background-color: #059669 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.parts-excel-btn:hover {
    background-color: #047857 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3) !important;
}

.parts-create-btn {
    background-color: #1E98BC !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.parts-create-btn:hover {
    background-color: #167a96 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(30, 152, 188, 0.3) !important;
}

.parts-page-size-select {
    padding: 8px 12px !important;
    border-radius: 8px !important;
    border: 1px solid #d1d5db !important;
    background-color: white !important;
    font-size: 14px !important;
    outline: none !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease !important;
    /* حذف فلش پیش‌فرض مرورگر */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.parts-page-size-select:focus {
    border-color: #1E98BC !important;
}

.parts-error-display {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.parts-error-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.parts-error-text {
    color: #dc2626 !important;
    font-weight: 500 !important;
}

.parts-retry-btn {
    background-color: #dc2626 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.parts-retry-btn:hover {
    background-color: #b91c1c !important;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .parts-container {
        padding: 16px;
    }
    
    .parts-content {
        border-radius: 12px;
        padding: 16px;
    }
    
    .parts-controls {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
        margin-top: 12px;
        margin-bottom: 12px;
        padding: 12px;
    }
    
    .parts-actions {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    
    .parts-excel-btn,
    .parts-create-btn {
        padding: 12px 16px !important;
        font-size: 16px !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 44px !important;
    }
    
    .parts-pagination-controls {
        flex-direction: column;
        gap: 8px;
        align-items: center;
        width: 100%;
    }
    
    .parts-page-size-select {
        padding: 10px 12px !important;
        font-size: 16px !important;
        min-height: 44px !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .parts-error-display {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 12px !important;
    }
    
    .parts-error-content {
        justify-content: center !important;
    }
    
    .parts-retry-btn {
        padding: 10px 16px !important;
        font-size: 14px !important;
        min-height: 40px !important;
        width: 100% !important;
    }
    
    /* بهبود جدول در موبایل */
    .parts-table {
        font-size: 14px !important;
    }
    
    .parts-table th,
    .parts-table td {
        padding: 8px 6px !important;
        font-size: 13px !important;
    }
    
    /* بهبود StatsGrid در موبایل */
    .stats-grid {
        gap: 12px !important;
    }
    
    .stat-card {
        padding: 16px !important;
        text-align: center !important;
    }
    
    .stat-icon {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: 8px !important;
    }
    
    .stat-content h3 {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }
    
    .stat-content p {
        font-size: 18px ;
        font-weight: 600 !important;
    }
}

/* ===== MOBILE SMALL (480px) ===== */
@media (max-width: 480px) {
    .parts-container {
        padding: 0px;
    }
    
    .parts-content {
        border-radius: 8px;
        padding: 12px;
    }
    
    .parts-controls {
        padding: 8px;
        gap: 12px;
        margin-top: 8px;
        margin-bottom: 8px;
    }
    
    .parts-actions {
        gap: 6px;
    }
    
    .parts-excel-btn,
    .parts-create-btn {
        padding: 10px 12px !important;
        font-size: 15px !important;
        min-height: 40px !important;
    }
    
    .parts-pagination-controls {
        gap: 6px;
    }
    
    .parts-page-size-select {
        padding: 8px 10px !important;
        font-size: 15px !important;
        min-height: 38px !important;
    }
    
    .parts-error-display {
        padding: 8px !important;
        gap: 8px;
    }
    
    .parts-retry-btn {
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-height: 36px !important;
    }
    
    .stats-grid {
        gap: 8px !important;
    }
    
    .stat-card {
        padding: 12px !important;
    }
    
    .stat-icon {
        width: 28px !important;
        height: 28px !important;
    }
    
    .stat-content h3 {
        font-size: 13px !important;
    }
    
    .stat-content p {
        font-size: 16px !important;
    }
} 
/* ===== INVOICE MANAGEMENT RESPONSIVE STYLES ===== */

/* ===== USER INVOICES PAGE STYLES ===== */
.user-invoices-container {
    padding: 24px;
    background-color: #f8fafc;
    min-height: 100vh;
}

.user-invoices-content {
    max-width: 1400px;
    margin: 0 auto;
    background-color: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.user-invoices-back-section {
    margin-bottom: 24px;
}

.user-invoices-back-btn {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #1E98BC;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    padding: 8px 12px;
    border-radius: 6px;
}

.user-invoices-back-btn:hover {
    color: #167a96;
    background-color: #f1f5f9;
    transform: translateX(-2px);
}

.user-invoices-header {
    margin-bottom: 32px;
}

.user-invoices-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.user-invoices-header-left h1 {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
}

.user-invoices-header-left p {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
}

.user-invoices-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 16px;
    background-color: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.user-invoices-filters {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.filter-input,
.filter-select {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    min-width: 150px;
    transition: all 0.2s ease;
}

.filter-select {
    /* حذف فلش پیش‌فرض مرورگر */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.filter-input:focus,
.filter-select:focus {
    outline: none;
    border-color: #1E98BC;
    box-shadow: 0 0 0 3px rgba(30, 152, 188, 0.1);
}

.invoice-container {
    padding: 24px;
    background-color: #f8fafc;
    min-height: 100vh;
}

.invoice-content {
    max-width: 1400px;
    margin: 0 auto;
    background-color: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.invoice-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background-color: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.invoice-purchase-btn {
    background: #1E98BC !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    min-width: 120px !important;
    justify-content: center !important;
    font-family: 'peyda', sans-serif !important;
}

.invoice-purchase-btn:hover {
    background: #1a87a8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.invoice-sale-btn {
    background: #10b981 !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    min-width: 120px !important;
    justify-content: center !important;
    font-family: 'peyda', sans-serif !important;
}

.invoice-sale-btn:hover {
    background: #059669 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.invoice-detail-btn {
    background: #1E98BC !important;
    color: white !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'peyda', sans-serif !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.invoice-detail-btn:hover {
    background: #1a87a8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .user-invoices-container {
        padding: 16px;
    }
    
    .user-invoices-content {
        border-radius: 12px;
        padding: 16px;
    }
    
    .user-invoices-header {
        margin-bottom: 24px;
    }
    
    .user-invoices-header-left h1 {
        font-size: 24px;
    }
    
    .user-invoices-header-left p {
        font-size: 14px;
    }
    
    .user-invoices-controls {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }
    
    .user-invoices-filters {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }
    
    .filter-input,
    .filter-select {
        min-width: 100%;
    }
    
    .invoice-container {
        padding: 16px;
    }
    
    .invoice-content {
        border-radius: 12px;
        padding: 16px;
    }
    
    .invoice-actions {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
        padding: 12px;
    }
    
    .invoice-purchase-btn,
    .invoice-sale-btn {
        padding: 12px 16px !important;
        font-size: 16px !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 44px !important;
        min-width: auto !important;
    }
    
    .invoice-detail-btn {
        padding: 8px 12px !important;
        font-size: 14px !important;
        min-height: 40px !important;
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* بهبود جدول در موبایل */
    .invoice-table {
        font-size: 14px !important;
    }
    
    .invoice-table th,
    .invoice-table td {
        padding: 8px 6px !important;
        font-size: 13px !important;
    }
    
    /* بهبود StatsGrid در موبایل */
    .stats-grid {
        gap: 12px !important;
    }
    
    .stat-card {
        padding: 16px !important;
        text-align: center !important;
    }
    
    .stat-icon {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: 8px !important;
    }
    
    .stat-content h3 {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }
    
    .stat-content p {
        font-size: 18px ;
        font-weight: 600 !important;
    }
}

/* ===== MOBILE SMALL (480px) ===== */
@media (max-width: 480px) {
    .user-invoices-container {
        padding: 12px;
    }
    
    .user-invoices-content {
        border-radius: 8px;
        padding: 12px;
    }
    
    .user-invoices-header {
        margin-bottom: 20px;
    }
    
    .user-invoices-header-left h1 {
        font-size: 20px;
    }
    
    .user-invoices-header-left p {
        font-size: 13px;
    }
    
    .user-invoices-controls {
        padding: 12px;
        gap: 8px;
    }
    
    .user-invoices-filters {
        gap: 8px;
    }
    
    .filter-group label {
        font-size: 13px;
    }
    
    .filter-input,
    .filter-select {
        padding: 6px 10px;
        font-size: 13px;
    }
    
    .invoice-container {
        padding: 0px;
    }
    
    .invoice-content {
        border-radius: 8px;
        padding: 0px;
    }
    
    .invoice-actions {
        padding: 8px;
        gap: 6px;
        margin-bottom: 12px;
    }
    
    .invoice-purchase-btn,
    .invoice-sale-btn {
        padding: 10px 12px !important;
        font-size: 15px !important;
        min-height: 40px !important;
    }
    
    .invoice-detail-btn {
        padding: 4px 8px !important;
        font-size: 10px !important;
        min-height: 28px !important;
    }
    
    .stats-grid {
        gap: 8px !important;
    }
    
    .stat-card {
        padding: 12px !important;
    }
    
    .stat-icon {
        width: 28px !important;
        height: 28px !important;
    }
    
    .stat-content h3 {
        font-size: 13px !important;
    }
    
    .stat-content p {
        font-size: 16px !important;
    }
} 
/* ===== INVOICE FORMS RESPONSIVE STYLES ===== */

/* استایل‌های کلی برای صفحات فاکتور خرید و فروش */

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    /* کانتینر اصلی */
    .invoice-container {
        border-radius: 12px;
        margin: 0 16px;
    }
    
    /* هدر فرم */
    .invoice-header {
        border-radius: 12px 12px 0 0;
        padding: 16px;
    }
    
    /* عنوان صفحه */
    .invoice-title {
        font-size: 1.4rem;
        margin-bottom: 12px;
    }
    
    /* هدر عملیات */
    .invoice-actions-header {
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 16px;
        margin-left: 16px;
        margin-right: 16px;
    }
    
    /* کانتینر دکمه‌های عملیات */
    .actions-container {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    /* گروه دکمه‌های عملیات */
    .action-buttons-group {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
    
    /* دکمه بازگشت */
    .back-button {
        padding: 12px 16px;
        justify-content: center;
        width: 100%;
        font-size: 16px;
        min-height: 48px;
    }
    
    /* دکمه‌های عملیات */
    .action-button {
        padding: 12px 20px;
        font-size: 16px;
        width: 100%;
        min-height: 48px;
        justify-content: center;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    /* بخش اطلاعات پایه */
    .basic-info-section {
        padding: 16px;
    }
    
    .basic-info-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 16px;
        gap: 16px;
    }
    
    /* برچسب‌های فیلدها */
    .field-label {
        font-size: 14px;
        margin-bottom: 6px;
        font-weight: 600;
        color: #374151;
    }
    
    /* فیلدهای ورودی */
    .input-field {
        padding: 12px 16px;
        font-size: 16px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        width: 100%;
        min-height: 48px;
        -webkit-appearance: none;
        appearance: none;
    }
    
    .input-field:focus {
        outline: none;
        border-color: #1E98BC;
        box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.2);
    }
    
    /* استایل‌های responsive برای DatePicker */
    .invoice-date-picker-input {
        height: 48px !important;
        font-size: 16px !important;
        padding: 12px 16px !important;
        border-radius: 8px !important;
        border: 1px solid #d1d5db !important;
        line-height: normal !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    
    /* کانتینر انتخاب فروشنده */
    .seller-select-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .seller-select-container .select-field {
        width: 100%;
        min-height: 48px;
    }
    
    .add-seller-button {
        width: 100%;
        padding: 12px;
        min-height: 48px;
        justify-content: center;
        display: flex;
        align-items: center;
        gap: 8px;
        background: #10b981;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .add-seller-button:hover {
        background: #059669;
        transform: translateY(-1px);
    }
    
    /* بخش آیتم‌ها */
    .items-section {
        padding: 16px;
    }
    
    .items-header {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 16px;
        align-items: stretch;
    }
    
    .items-title {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        text-align: center;
    }
    
    .add-item-button {
        width: 100%;
        padding: 12px 20px;
        min-height: 48px;
        justify-content: center;
        display: flex;
        align-items: center;
        gap: 8px;
        background: #1E98BC;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .add-item-button:hover {
        background: #167a96;
        transform: translateY(-1px);
    }
    
    /* جدول آیتم‌ها - نمایش کارتی */
    .items-table {
        display: none; /* مخفی کردن جدول در موبایل */
    }
    
    .mobile-items-container {
        display: block;
    }
    
    .mobile-item-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 16px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .mobile-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .mobile-item-title {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
    }
    
    .mobile-item-actions {
        display: flex;
        gap: 8px;
    }
    
    .mobile-delete-btn {
        background: #dc2626;
        color: white;
        border: none;
        border-radius: 6px;
        padding: 8px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .mobile-delete-btn:hover {
        background: #b91c1c;
    }
    
    .mobile-item-fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 12px;
        gap: 12px;
    }
    
    .mobile-field-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    .mobile-field-group.full-width {
        grid-column: 1 / -1;
    }
    
    .mobile-field-label {
        font-size: 12px;
        font-weight: 500;
        color: #6b7280;
    }
    
    .mobile-field-value {
        font-size: 14px;
        font-weight: 600;
        color: #1f2937;
        padding: 8px 12px;
        background: #f9fafb;
        border-radius: 6px;
        border: 1px solid #e5e7eb;
    }
    
    .table-input {
        padding: 10px 12px;
        font-size: 16px;
        border-radius: 6px;
        border: 1px solid #d1d5db;
        width: 100%;
        min-height: 44px;
        -webkit-appearance: none;
        appearance: none;
    }
    
    .table-input:focus {
        outline: none;
        border-color: #1E98BC;
        box-shadow: 0 0 0 2px rgba(30, 152, 188, 0.1);
    }
    
    /* کانتینر انتخاب محصول */
    .product-select-container {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .add-product-button {
        width: 100%;
        padding: 10px;
        min-height: 40px;
        justify-content: center;
        display: flex;
        align-items: center;
        gap: 6px;
        background: #6b7280;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .add-product-button:hover {
        background: #4b5563;
    }
    
    /* خلاصه فاکتور */
    .summary-section {
        padding: 16px;
        background: #f8fafc;
        border-top: 1px solid #e5e7eb;
        border-radius: 0 0 12px 12px;
    }
    
    .summary-title {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        text-align: center;
        margin-bottom: 16px;
    }
    
    .summary-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 12px;
        gap: 12px;
    }
    
    .summary-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
    }
    
    .summary-label {
        font-size: 14px;
        font-weight: 500;
        color: #6b7280;
    }
    
    .summary-value {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
    }
    
    .summary-total {
        background: linear-gradient(135deg, #1E98BC 0%, #167a96 100%);
        color: white;
        font-weight: 700;
    }
    
    .summary-total .summary-label,
    .summary-total .summary-value {
        color: white;
    }
}

/* ===== MOBILE SMALL (480px) ===== */
@media (max-width: 480px) {
    .invoice-container {
        margin: 0px;
        border-radius: 8px;
    }
    
    .invoice-header {
        padding: 12px;
        border-radius: 8px 8px 0 0;
    }
    
    .invoice-title {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }
    
    .invoice-actions-header {
        padding: 8px;
        margin-bottom: 12px;
        margin-left: 8px;
        margin-right: 8px;
        border-radius: 6px;
    }
    
    .basic-info-section {
        padding: 12px;
    }
    
    .basic-info-grid {
        gap: 12px;
    }
    
    .input-field {
        padding: 10px 12px;
        min-height: 44px;
        font-size: 15px;
    }
    
    /* استایل‌های responsive برای DatePicker در موبایل کوچک */
    .invoice-date-picker-input {
        height: 44px !important;
        font-size: 15px !important;
        padding: 10px 12px !important;
        border-radius: 6px !important;
        line-height: normal !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    
    .field-label {
        font-size: 13px;
        margin-bottom: 4px;
    }
    
    .items-section {
        padding: 12px;
    }
    
    .items-header {
        gap: 10px;
        margin-bottom: 12px;
    }
    
    .items-title {
        font-size: 16px;
    }
    
    .add-item-button,
    .back-button,
    .action-button,
    .add-seller-button {
        min-height: 44px;
        font-size: 15px;
        padding: 12px 16px;
    }
    
    .mobile-item-card {
        padding: 12px;
        margin-bottom: 12px;
        border-radius: 8px;
    }
    
    .mobile-item-fields {
        gap: 10px;
    }
    
    .table-input {
        min-height: 40px;
        padding: 8px 10px;
        font-size: 15px;
    }
    
    .summary-section {
        padding: 12px;
        border-radius: 0 0 8px 8px;
    }
    
    .summary-title {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .summary-grid {
        gap: 8px;
    }
    
    .summary-item {
        padding: 10px 12px;
        border-radius: 6px;
    }
    
    .summary-label {
        font-size: 13px;
    }
    
    .summary-value {
        font-size: 15px;
    }
}

/* ===== DESKTOP IMPROVEMENTS ===== */
@media (min-width: 769px) {
    /* بهبود نمایش جدول در دسکتاپ */
    .mobile-items-container {
        display: none;
    }
    
    .items-table {
        display: table;
        width: 100%;
        border-collapse: collapse;
        margin-top: 16px;
    }
    
    .items-table th,
    .items-table td {
        padding: 12px;
        text-align: center;
        border: 1px solid #e5e7eb;
    }
    
    .items-table th {
        background: #f8fafc;
        font-weight: 600;
        color: #374151;
    }
    
    .seller-select-container {
        flex-direction: row;
        align-items: flex-end;
        gap: 8px;
    }
    
    .seller-select-container .select-field {
        flex: 1 1;
    }
    
    .add-seller-button {
        /* width: auto;
        padding: 8px 12px;
        min-width: 44px;
        height: 44px; */
    }
    
    .product-select-container {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    
    .add-product-button {
        width: auto;
        min-width: 36px;
        height: 36px;
        padding: 6px;
    }
    
    .items-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .add-item-button {
        width: auto;
        padding: 8px 16px;
        min-height: auto;
    }
    
    .actions-container {
        flex-direction: row;
        align-items: center;
    }
    
    .action-buttons-group {
        flex-direction: row;
        width: auto;
    }
    
    .back-button,
    .action-button {
        width: auto;
        min-height: auto;
        padding: 8px 16px;
    }
}

/* ===== FOCUS STATES ===== */
.input-field:focus,
.table-input:focus,
.select-field:focus {
    outline: none;
    border-color: #1E98BC;
    box-shadow: 0 0 0 1px rgba(30, 152, 188, 0.2);
}

.add-item-button:focus,
.add-seller-button:focus,
.add-product-button:focus,
.back-button:focus,
.action-button:focus {
    outline: 2px solid #1E98BC;
    outline-offset: 2px;
}

/* ===== TOUCH IMPROVEMENTS ===== */
@media (max-width: 768px) {
    button {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    input,
    select {
        -webkit-appearance: none;
        appearance: none;
    }
    
    select {
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27m6 8 4 4 4-4%27/%3e%3c/svg%3e");
        background-position: right 12px center;
        background-repeat: no-repeat;
        background-size: 16px;
        padding-right: 40px;
    }
} 
/* ===== TREASURY MANAGEMENT RESPONSIVE STYLES ===== */

.treasury-container {
    padding: 24px;
    background-color: #f8fafc;
    min-height: 100vh;
}

.treasury-content {
    max-width: 1400px;
    margin: 0 auto;
    background-color: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.treasury-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background-color: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.treasury-deposit-btn {
    background-color: #059669 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.treasury-deposit-btn:hover {
    background-color: #047857 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3) !important;
}

.treasury-withdraw-btn {
    background-color: #dc2626 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.treasury-withdraw-btn:hover {
    background-color: #b91c1c !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3) !important;
}

.treasury-error-message {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
}

.treasury-error-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.treasury-error-text {
    flex: 1 1 !important;
}

.treasury-retry-btn {
    background-color: #dc2626 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
}

.treasury-retry-btn:hover {
    background-color: #b91c1c !important;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .treasury-container {
        padding: 16px;
    }
    
    .treasury-content {
        border-radius: 12px;
        padding: 16px;
    }
    
    .treasury-actions {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
        padding: 12px;
    }
    
    .treasury-deposit-btn,
    .treasury-withdraw-btn {
        padding: 12px 16px !important;
        font-size: 16px !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 44px !important;
    }
    
    .treasury-error-message {
        padding: 10px 12px !important;
        font-size: 14px !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
    }
    
    /* بهبود جدول در موبایل */
    .treasury-table {
        font-size: 14px !important;
    }
    
    .treasury-table th,
    .treasury-table td {
        padding: 8px 6px !important;
        font-size: 13px !important;
    }
    
    /* بهبود StatsGrid در موبایل */
    .stats-grid {
        gap: 24px !important;
    }
    
    .stat-card {
        padding: 16px !important;
        text-align: center !important;
    }
    
    .stat-icon {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: 0px !important;
    }
    
    .stat-content h3 {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }
    
    .stat-content p {
        font-size: 14px ;
        font-weight: 600 !important;
    }
}

/* ===== MOBILE SMALL (480px) ===== */
@media (max-width: 480px) {
    .treasury-container {
        padding: 0px;
    }
    
    .treasury-content {
        border-radius: 8px;
        padding: 5px;
    }
    
    .treasury-actions {
        padding: 8px;
        gap: 6px;
        margin-bottom: 12px;
    }
    
    .treasury-deposit-btn,
    .treasury-withdraw-btn {
        padding: 10px 12px !important;
        font-size: 15px !important;
        min-height: 40px !important;
    }
    
    .treasury-error-message {
        padding: 8px 10px !important;
        font-size: 13px !important;
        gap: 6px !important;
    }
    
    .stats-grid {
        gap: 8px !important;
    }
    
    .stat-card {
        padding: 12px !important;

    }
    
    .stat-icon {
        width: 28px !important;
        height: 28px !important;
    }
    
    .stat-content h3 {
        font-size: 13px !important;
    }
    
    .stat-content p {
        font-size: 10px !important;
    }
} 

/*# sourceMappingURL=main.bc3aac79.css.map*/