:root {
    --primary-color:#1E2E33;
    --background-color:#FFFFFF;
    --header-background-color:#F0F0F0;
    --table-header-color:#eff4f3;
    --font-color:#292D32;
    --button-secondary-color:#999999;
    --placeholder-color:#D0D0D0;
    --cta-button-color:#0D45B0;
    --red:#f44336;
    --green:#4CAF50;
    --blue:#007BFF;
    --orange:#FF9500;
}

/* General Styles */
body {
    font-family:'Vazir',Tahoma,Arial,sans-serif;
    margin:0;
    padding:0;
    direction:rtl;
    margin-top:40px;
    overflow-x:hidden;
}

.copy-right {
  direction:ltr;
  text-align:center;
  font-size:13px;
}

hr {
  border:0.5px solid var(--header-background-color);
  margin:18px 0;
}

a {
  text-decoration:none;
  color:var(--primary-color);
}

button,input,select,fieldset {
    font-family:'Vazir',Tahoma,Arial,sans-serif;
    font-size:14px;
}

button {
    border:none;
    cursor:pointer;
}

.send-code-again {
    text-align:center;
    margin:32px 0 64px 0;
}

.send-code-again button {
  background:none;
  color:var(--primary-color);
}

button:focus {
    outline:none;
}

header {
    padding:10px 3%;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background-color:white;
}

.header-icons {
    display:flex;
    align-items:center;
    gap:16px;
}

.header-icons i {
    font-size:18px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:var(--font-color);
    cursor:pointer;
}

.header-icons i:hover {
    color:var(--primary-color);
}

.header-icons img {
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
    border:0.5px solid #e5e5e5;
}

/* جداکننده‌ها */
.divider {
    width:1px;
    height:20px;
    background-color:#DFE2E6;
    margin:0 8px; /* فاصله از اطراف */
}

.header-logo {
  height:48px;
  width:auto;
}

.primary-header-button,.secondary-header-button {
  padding:10px 18px;
  background-color:var(--primary-color);
  color:var(--background-color);
  border-radius:4px;
  font-weight:medium;
}

.secondary-header-button {
  background-color:var(--background-color);
  color:var(--primary-color);
  border:1px solid var(--primary-color);
  margin:0 12px;
}

.header-secondary-button {
  padding:10px 18px;
  background-color:var(--background-color);
  color:var(--primary-color);
  border:1px solid var(--primary-color);
  border-radius:8px;
  font-weight:medium;
}

.logo-image {
    height:48px;
    width:auto;
}

.logo {
    position:absolute;
    top:10px;
    width:100%;
    text-align:center;
    z-index:1002;
}

.page-header {
    display:flex;
    direction:rtl;
}

.secondary-page-title {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:15px;
}

.page-header {
  direction:rtl;
}

.page-title {
    flex:1;
    text-align:right;
}

.page-title h1 {
  font-size:18px;
  font-weight:bold;
  margin:16px 0;
}

.page-title p {
    margin:12px 0;
    weight:normal;
    font-size:14px;
}


.subtitle-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.subtitle-row p {
  margin:0;
  font-size:14px;
}

/* Banner Styles */
.banner-container {
    width:94%;
    height:100vh;
    position:relative;
    overflow:hidden;
    margin:0 3%;
    text-align:center;
    border-radius:24px;
    z-index:1;
}

.index-container {
  width:94%;
  margin-right:3%;
}

.banner-slider {
    display:flex;
    transition:transform 1s ease-in-out;
    height:100%;
    direction:ltr;
}

.banner {
    min-width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
}

.modal-container {
    top: 6px;
    position:absolute;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:1000;
}

.modal-container hr {
  margin: 12px 0;
}

.modal-content {
    background-color:var(--background-color);
    padding:14px 18px;
    width:80%;
    max-width:480px;
    min-height:280px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
    margin:auto;
    border-radius:8px;
    z-index:1001;
    text-align:right;
    position:relative;
}

.wizard-container {
    padding:0 20px;
}

.logo-image {
    height:48px;
    width:auto;
    margin-bottom:20px;
}

.modal-body {
    padding:10px 18px;
}

.modal-body h2 {
  margin:8px 0 18px 0;
}

.modal-body p {
  font-size:14px;
}

.form-group {
    margin-bottom:20px;
    text-align:right;
}

.form-group label {
    display:block;
    font-size:12px;
    color:var(--primary-color);
    margin-bottom:8px;
    text-align:right;
    font-weight:bold;
}

.form-group input,
.form-group select,
.form-group fieldset,
.form-group textarea {
    width:100%;
    padding:12px;
    border:1px solid var(--placeholder-color);
    border-radius:8px;
    font-size:14px;
}

.form-group select {
  width:98%;
  font-size:12px;
}

select[disabled] {
    opacity:0.7;
    background-color:#f5f5f5;
}

.mobile-input::placeholder {
  text-align:right;
}

.form-group input::placeholder,.form-group select::placeholder,.form-group textarea::placeholder  {
    font-size:12px;
    color:#666666;
}

.form-group textarea {
    width:100%;
}

.form-group input,.form-group fieldset {
    width:94%;
}

.page-container {
    margin:0 auto;
    border-radius:8px;
}

.page-container p {
  font-size:13px;
  color:var(--orange);
  margin-bottom:22px;
}

.page-container .form-group {
  width:50%;
}

.page-container .form-group.full-width {
  width:100%;
}

.page-container .form-row {
    display:flex;
    justify-content:space-between;
    margin-bottom:15px;
}

.modal-container .form-row {
    display:flex;
    justify-content:space-between;
}

.modal-container .form-row input,select {
  width:280px;
  margin-left:18px
}

.modal-container .form-row select {
  width:304px;
  margin-left:18px
}

.accessory-input-group {
    position:relative;
    margin-bottom:8px;
}

.accessory-input-group input {
    width:99%;
    border-radius:8px;
    border:1px solid var(--placeholder-color);
    padding:12px;
    box-sizing:border-box;
}

.accessory-btn {
    position:absolute;
    top:50%;
    left:22px;
    transform:translateY(-50%);
    background:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.add-btn {
    color:var(--green);
}

.remove-btn {
    color:var(--red);
}

.accessory-input-group:not(:last-child) .add-btn {
    display:none;
}

.button-container {
    display:flex;
    justify-content:space-between;
    gap:18px;
}

.primary-button,.add-new-button,.accepted-button,.rejected-button {
    padding:12px 20px;
    background-color:var(--primary-color);
    color:white;
    border-radius:8px;
}

.accepted-button {
  background-color:green;
}

.rejected-button {
  background-color:red;
}

.primary-button {
  width:48%;
}

.secondary-button {
    text-align:left;
    background-color:transparent;
    color:var(--primary-color);
    border-radius:8px;
    width:48%;
}

.dashboard-container {
    min-height:100vh;
    overflow-y:auto;
}

.messages {
    margin-top:20px;
}

.message {
    background-color:#007BFF;
    color:white;
    padding:10px;
    margin-bottom:10px;
    border-radius:5px;
}

.message.success {
    background-color:green;
}

.message.error {
    background-color:red;
}

/* استایل کلی داشبورد */
.dashboard-container {
    padding:24px 20px;
}

.dashboard-cards {
    width:98%;
    margin:0 1%;
    display:flex;
    gap:20px;
    justify-content:space-between;
}

.card {
    flex:1;
    padding:18px;
    border-radius:8px;
    text-align:center;
    box-shadow:1px 1px 4px rgba(0,0,0,0.15);
}

.card img {
  margin-bottom:6px;
  width:40px;
}

.card h1 {
    margin:0;
    font-size:22px;
}

.card h3 {
    margin:0;
    font-size:14px;
    color:var(--orange);
}

.card h4 {
    margin-top:18px;
    font-size:12px;
    font-weight:normal;
    color:#888;
}

.card.hidden {
  box-shadow:none;
}

/* استایل جداول */
.dashboard-tables {
    display:flex;
    gap:8px;
}

.table-container,.chart-container,.table-container-large {
    padding:8px;
    border-radius:6px;
    box-shadow:2px 2px 4px rgba(0,0,0,0.15);
}

.table-container-large {
  width:100%;
}

.options a {
  margin-left:12px;
}

.options .option-divider {
  color:#DFE2E6;
  cursor:default;
}

table {
    width:100%;
    border-collapse:collapse;
}

table th,
table td {
    padding:18px 8px;
    text-align:right;
    border-bottom:0.5px solid #e5e5e5;
    font-size:12px;
}

table th {
    color:var(--font-color);
}

table tbody tr:hover {
    background-color:#f9f9f9;
}

h5 a {
    color:var(--blue);
    text-decoration:underline;
    font-weight:bold;
}

.submit-button {
  display:flex;
  align-items:center;
  justify-content:
  space-between;"

}

.discount-code-container {
    position:relative;
    display:flex;
    align-items:center;
}

/* مودال‌ها */
body.modal-open {
    overflow:hidden;
    position:fixed;
    width:100%;
}

.modal-overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.5);
    z-index:1000;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow-y:auto;
    padding:20px 0;
}

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

.modal-header h2 {
  font-size:17px;
}

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

.login-header h2 {
  margin:0 0;
}

.back-button {
    background:none;
    border:none;
    color:var(--primary-color);
    cursor:pointer;
    font-size:20px;
    margin-top:4px;
}

.close-modal {
    position:absolute;
    top:32px;
    left:32px;
    font-size:24px;
    cursor:pointer;
    z-index:1001;
}

.close-button {
  background-color:transparent;
}

.modal-header .close-button i {
  font-size:1.4rem;
  color:var(--font-color);
}

.form-actions {
  text-align:left;
}

/* استایل‌های آکاردئون */
.accordion-section {
  width:99%;
  border-radius:8px;
  overflow:hidden;
  margin-bottom:15px;
}

.accordion-header {
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background-color:var(--orange);
  color:white;
  border-radius:8px;
  transition:all 0.3s ease;
}

.accordion-header p {
  margin:0;
  font-size:14px;
  padding:12px 24px;
  color:white;
}

.accordion-icon {
  padding:12px 24px;
}

.accordion-content {
  display:none;
  padding:22px 18px 0 0;
  background-color:white;
  border-top:none;
}

.accordion-section.active .accordion-content {
  display:block;
}

.accordion-section.active .accordion-icon {
  transform:rotate(180deg);
}

.toast {
    position:fixed;
    top:32px;
    right:28px;
    padding:16px 28px;
    border-radius:8px;
    z-index:1001;
    color:green;
    background-color:white;
    border:0.5px solid green;
    box-shadow:0 2px 4px rgba(0,0,0,0.15);
}

.toast.error {
    border-color:red;
}

.filters-section {
    margin:12px 0;
    padding:14px 24px;
    background-color:#f9f9f9;
    border-radius:12px;
}

.filter-row {
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.filter-group {
    display:flex;
    align-items:center;
    gap:13px;
}

.filter-group label {
    font-size:12px;
}

.filter-group select {
    padding:8px 12px;
    border-radius:8px;
    border:1px solid #ddd;
    cursor:pointer;
    width:220px;
    font-size:12px;
}

.search-filter {
  padding:9px 8px;
  border-radius:8px;
  border:1px solid #ddd;
  width:220px;
  font-size:12px;
}

.tabs {
  margin-top:20px;
}

.tab-list {
  list-style:none;
  padding:0;
  display:flex;
  justify-content:center;
}

.tab-list li {
  font-size:13px;
  padding:9px 14px;
  cursor:pointer;
  border-radius:8px;
  border:1px solid var(--primary-color);
  margin-left:18px;
}

.tab-list li.active {
  background:var(--primary-color);
  color:white;
}

.tab-content {
  display:none;
  margin-top:32px;
}

.tab-content.active {
  display:block;
}

.request-status {
  color:var(--orange);
  font-size:16px;
}

.combobox-wrapper {
  position:relative;
  width:100%;
}

.combobox-input-container {
  position:relative;
  display:flex;
  align-items:center;
}

.combobox-input {
  width:100%;
  padding:8px 35px 8px 12px;
  border:1px solid #ddd;
  border-radius:4px;
  font-size:14px;
}

.combobox-toggle {
  position:absolute;
  background:none;
  border:none;
  cursor:pointer;
  padding:0 5px;
}

.combobox-toggle {
  left:12px;
  font-size: 10px;
}

.combobox-clear {
  right:8px;
  display:none;
}

.combobox-input:not(:placeholder-shown) + .combobox-clear {
  display:block;
}

.combobox-dropdown {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:1000;
  background:#fff;
  border:1px solid #ddd;
  border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
  max-height:240px;
  overflow-y:auto;
}

.combobox-options {
  padding:5px 0;
}

.combobox-option {
  padding:8px 15px;
  cursor:pointer;
}

.combobox-option:hover {
  background-color:#f5f5f5;
}

.combobox-empty {
  padding:10px;
  color:#999;
  text-align:center;
}

.combobox-wrapper.active .combobox-dropdown {
  display:block;
}

.combobox-wrapper.active .combobox-toggle i {
  transform:rotate(180deg);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 22px 0;
    direction: rtl;
}

.pagination a,
.pagination span.current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 2px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #333;
    min-width: 30px;
}

.pagination a:hover {
    background-color: #f0f0f0;
    border-color: #aaa;
}

.pagination span.current {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    font-weight: bold;
}

.pagination a i {
    font-size: 12px;
}

.pagination a.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.pagination a .fas {
    margin: 0 3px;
}

#discount_code {
    padding-left:50px;
}

#checkDiscountButton,#removeDiscountButton {
    position:absolute;
    left:10px;
    color:var(--primary-color);
    background:none;
    border:none;
    font-size:14px;
    cursor:pointer;
}

#checkDiscountButton:hover,#removeDiscountButton:hover {
    text-decoration:underline;
}

#removeDiscountButton {
    color:red;
    display:none;
}

/* Mobile and Tablet Styles */
@media (max-width:768px) {
    .modal-content {
        width:90%;
    }

    .button-container {
        flex-direction:column;
    }

    button {
        width:100%;
        font-size:14px;
    }
}

@media (max-width:480px) {
    body {
        font-size:14px;
    }

    .modal-content {
        width:90%;
        padding:16px;
    }

    .button-container {
        flex-direction:column;
        gap:8px;
    }

    .primary-button,.secondary-button {
        width:100%;
    }
}