/* === Reset & Base === */
* {  margin: 0;  padding: 0;  box-sizing: border-box;}
body {  background: #edecfa;  font-family: vazir;font-size: 14px;  color: #333;  line-height: 1.7;max-width: 960px;
  width: 100%;margin:0px auto;}
button { border: 0; background: none; font-family: vazir;}
/* === Accordion === */
.accordion-button {  font-weight: 600; color: #444;  border-radius: 0px !important;  padding: 6px 14px;  transition: all 0.3s ease;}
.level1-h1 button {font-size: 22px;color: #FFF;}
.level1-h1:not(.collapsed) {  background: #d31d5b;  color: #fff;}
.level2-h1:not(.collapsed) {  background: #30beb0;  color: #fff;}
.accordion-button .handle {  margin-left: 10px;  font-size: 18px;  color: #888;}
.accordion-button:hover .handle {  color: #fff;}
.list-group.mb-3.level1 {  padding: 0px;}
.list-group.level3 {  font-family: vazir;  font-size: 16px;}
.item-class { background: #F7F6FF; margin: 5px 0px;}
.langs a { text-align: center; margin: 15px auto;  text-decoration: none;  padding: 5px 5px;
  color: #505B83;  font-size: 12px;  font-weight: 500;  background: #E9E8F5;  border-radius: 10px;}
 .langs { text-align: left; margin: 15px 25px 5px 25px;}
/* همه تب‌ها پیش‌فرض بسته باشند */
.accordion-collapse {  display: none;   /* مخفی */}
.accordion-collapse.collapse.show {  display: block;  /* وقتی باز شد */}
.name-sub { width: 100%;}
/* === List Groups === */
.list-group-item {margin:3px 0px;border-radius:8px;display: block;align-items: center;
justify-content: space-between;padding:0;  transition: all 0.2s ease;}
.list-group-item:hover {  background: #f8f9fa;}
.list-group-item .handle {  cursor: grab;  margin-left: 10px;  font-size: 16px;  color: #ffffff8a;  transition: color 0.3s;}
.list-group-item:hover .handle {  color: #fff;}

/* === Levels Styling === */
.level1 > li {  }
.level2 > li {  }
.level3 > li {  }

/* === Drag & Drop Effects === */
.draggable-item { transition: all 0.3s ease; }
.sortable-ghost {  opacity: 0.7;  background-color: #e6f7ff !important;  border: 2px dashed #0d6efd;}
.sortable-chosen {  background-color: #f0f0f0;  box-shadow: 0 0 10px rgba(0,0,0,0.15);}
.sortable-drag {  opacity: 0.9;  box-shadow: 0 6px 18px rgba(0,0,0,0.2);}

/* === Details Section (Level 3) === */
.details {  font-size: 0.9rem;  color: #444;  margin: 0px;  padding: 5px 12px; border-radius: 0px;display: none;}
.details b {  color: #222;}

/* === Buttons & Links === */
.toggle-detail {  font-size: 0.8rem;  color: #0d6efd;  text-decoration: none;  margin-left: 8px;  transition: color 0.3s;}
.toggle-detail:hover {  color: #0a58ca;  text-decoration: underline;}

/* === Toast === */
.toast-container {  position: fixed;  bottom: 1rem;  left: 1rem;  z-index: 9999;}
.toast {  font-size: 0.9rem;  border-radius: 8px;  padding: 8px 12px;  display: none; /* همیشه مخفی مگر اینکه JS نماش بده */
}
.toast.show {  display: block; /* وقتی JS فعال کرد */}
.toast-body {  display: none; /* پیش‌فرض بسته */}
.toast.show .toast-body {  display: block; /* فقط هنگام نمایش */}

/* === Headings === */
h4 {  font-weight: 700;  color: #333;  margin-bottom: 20px;  border-bottom: 2px solid #e1e1e1;  padding-bottom: 6px;}
#acc1 {  width: 100%;}
.accordion-button {  font-weight: bold;  width: 100%;  text-align: right;}
.accordion {  width: 100%;}
.level1-h1 {background: #4d71fe;color: #FFF;font-family: vazir;font-size: 18px;border: 0px;display: flex; justify-content: space-between;}
.level2-h1 {background: #009874;color: #FFF;font-family: vazir;font-size: 16px;border: 0px;display: flex;justify-content: space-between;}
.name-level1 { flex: 1;}
.name-level2 { flex: 1;}
.level-box-class {  display: none;  padding: 10px;  background: #ffeaea;  border: 1px solid #dc3545;  border-radius: 5px;  margin-top: 8px;}
.langs a.active { color: #000; text-decoration: underline;}
.list-group-item{cursor:grab}
.handle{margin-left:8px;color:#888;cursor:grab}
.toast-container{position:fixed;bottom:1rem;left:1rem;z-index:9999}

/* بهبود استایل برای درگ اند دراپ */
.draggable-item { cursor: grab; transition: all 0.3s ease;}
.draggable-item:hover {  background-color: #f0f0f0;}
.draggable-item:active {  cursor: grabbing;}
.sortable-ghost {  opacity: 0.7;  background-color: #e6f7ff !important;}
.sortable-chosen {  background-color: #f0f0f0;  box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.sortable-drag {  opacity: 0.9;  box-shadow: 0 5px 15px rgba(0,0,0,0.1);}

/* استایل‌های جدید برای آیکون‌ها */
.icon-admin { display: flex;gap: 0px;  margin: 0px;padding: 0px;}
.icon-admin i {  cursor: pointer;  font-size: 14px;  transition: all 0.2s ease;  padding: 16px;  border-radius: 0px;}
.icon-admin i:hover {  transform: scale(1.2);}
.fa-plus { color: #FFF; }
.fa-trash { color: #FFF; }
.fa-toggle-on, .fa-toggle-off { color: #FFF; }
.fa-edit { color: #FFF; }
/* استایل‌های هدر */
.header-level1, .accordion-header { width: 100%;display: flex; background:#d7d6e4;}
.accordion-button { display: flex;  align-items: center;justify-content: space-between;}
.name-level1 {  flex-grow: 1;   margin: 0 10px;}
/* باکس تأیید حذف */
.level-box-class {  display: none;  padding: 10px;  background: #ffeaea;  border: 1px solid #dc3545;  border-radius: 5px;  margin-top: 8px;}
.close-tab {  color: #dc3545;   cursor: pointer;   font-size: 18px;   margin-right: 8px;  transition: all 0.2s ease;}
.close-tab:hover {  color: #a71d2a;  transform: scale(1.2);}
.show-button {display: inline-block; background: linear-gradient(to right, #ff512f, #dd2476);margin:5px 0px;
color: white; padding: 10px 20px; font-size: 16px;font-weight: bold;border: none; border-radius: 10px;
cursor: pointer;transition: all 0.4s ease;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}
.show-button:hover {transform: translateY(-5px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);  }
.hidden-creature { height: 0; overflow: hidden; opacity: 0; transition: all 0.5s ease; padding:0%;
  margin: 0px 0px;background: linear-gradient(135deg, #8E2DE2, #4A00E0);border-radius: 10px;color: white;}
.form-main { padding: 2%;}      
.form-actions button {padding: 8px 15px; float: left; margin: 8px 5px 15px auto; color: #FFF;font-family: vazir; font-size: 15px; border-radius: 5px;}
.name-sub { display: flex;}
.name-level3 { flex: 1;}
.btn-confirm-delete {background: #DA5E5E;}
.btn-cancel {  background: #452B6D59;}
.btn-submit { background: #42ADA3;}
#toggle:checked ~ .hidden-creature {height: auto;opacity: 1;}
#toggle {  display: none;}
/* فاصله بین دوتایی‌ها */
.add-form .form-group:nth-child(odd),
.edit-form .form-group:nth-child(odd),
.add-form-with-item .form-group:nth-child(odd),
.edit-sub3-form .form-group:nth-child(odd),
.form-main .form-group:nth-child(odd) {
  font-size:17px;
}
.form-group input,textarea { width: 98%;padding: 4% 3%; font-size: 14px; border-radius: 5px;outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  color: #333; margin: 0 auto;font-family: vazir;}
.form-group-item input {
  width: 93%;  padding: 1% 2%;  font-size: 14px;  border: 1px solid #ccc;  border-radius: 5px;
  outline: none;  transition: border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;  color: #333;  margin: 5px 2%;}
textarea { padding: 1% 3%;border: 0;}
.add-form .form-group,
.edit-form .form-group,
.add-form-with-item .form-group,
.edit-sub3-form .form-group,
.form-main .form-group {  display: inline-block;
}
.box-add, .box-delete, .box-edit { width: 100%; float: right;padding: 4% 8%;}
.box-delete{background: #ffe6e6;border:0;}
.box-edit {background: #e8e6ff;}
.box-add{background: #e8e6ff;}
.form-main-header {  float: right;  width: 100%;}
.close-button {float: left; font-size: 18px;}
.add-form-class { width: 100%;margin: auto;}
.add-form {display: block;width: 100%;margin: 0;  padding: 0;}
.form-group { width: 24%; margin: 0.5%; float: right;}
.icon-level3 {  padding: 2px;}
/* استایل‌های جدید برای آیکون‌ها */
.icon-admin i:hover {   transform: scale(1.2);}
.fa-plus { color: #FFF; }
.fa-plus:hover { background-color: rgba(40, 167, 69, 0.1); }
.fa-trash { color: #FFF; }
.fa-trash:hover { background-color: rgba(220, 53, 69, 0.1); }
.fa-toggle-on, .fa-toggle-off { color: #FFF; }
.fa-toggle-on:hover, .fa-toggle-off:hover { background-color: rgba(255, 193, 7, 0.1); }
.fa-edit { color: #FFF; }
.fa-edit:hover { background-color: rgba(23, 162, 184, 0.1); }
.fas.fa-plus {  background: #3FC2B5;}
.fas.fa-trash { background: #ff7a6c;}
.fas.fa-edit { background: #42ada3;}
.box-edit input {  border-left: 8px solid #9EAADA;}
.box-add input {  border-left: 8px solid #9EAADA;}
.btn-submit-add button { background: #3FC2B5;}
.btn-submit-add button { background: #3FC2B5;}
.name-sub i { color: #FFF;padding: 10px; background: #000;}

.close-btn { position: absolute; top: 10px; right: 15px;  cursor: pointer;  font-size: 20px;  color: #666;  transition: color 0.3s;}
.close-btn:hover {  color: #e74c3c;}
.form-box {  position: relative; /* برای اینکه آیکون درست در فرم قرار بگیره */
  background: #fff;  padding: 20px;  border-radius: 8px;  width: 400px;  margin: auto;}
.hidden-box {  display: none;}
.hidden-level3 {  display: none;}
.lang-container {  margin-top: 10px;}
.btn-toggle-lang {  background: #3498db;  color: #fff;  border: none;  padding: 6px 12px;  border-radius: 5px;  cursor: pointer;}
.btn-toggle-lang.close {  background: #e74c3c;}
.base-level3, .hidden-level3 {  width: 100%;  float: right;}
.edit-form-name { width: 30%;}
.edit-form-dec { width: 68%;}
.edit-form-price { width: 30%;}


.fileUpload {background: #3caaf3;  border-radius: 2px;  color: #fff;  font-size: 1rem;  font-weight: 600;  margin: 0;
  padding: .5em 1.5em;  position: relative;  text-align: center;  max-width: 180px;  cursor: pointer;  transition: all 0.3s ease;
  overflow: hidden;}
.fileUpload:hover {  background: #009194;  transform: translateY(-2px);  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);}
.fileUpload:active {  transform: translateY(0);  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);}
.fileUpload input.upload {  position: absolute;  inset: 0; /* جایگزین top/right/width/height */  opacity: 0;
  cursor: pointer;}
.edit-form-bottom { display: block; width: 100%;  float: right;}

.content{  margin: auto;  padding: 15px;  max-width: 800px;  text-align: center;}
.dpx{  display:flex;  align-items:center;  justify-content:space-around;}
.option-input { -webkit-appearance: none;  -moz-appearance: none;  -ms-appearance: none;
  -o-appearance: none;  appearance: none;  position: relative;  top: 13.33333px;  right: 0;  bottom: 0;  left: 0;  height: 40px;
  width: 40px;  transition: all 0.15s ease-out 0s;  background: #cbd1d8;  border: none;  color: #fff;
  cursor: pointer;  display: inline-block;  margin-right: 0.5rem;  outline: none;  position: relative;  z-index: 1000;}
  
.option-input:hover {  background: #9faab7;}
.option-input:checked {  background: #30beb0;  border: 0px;}
.option-input:checked::before {  width: 32px;  height: 32px; display:flex;  content: '\f00c';  font-size: 18px;  font-weight:bold;
  position: absolute;  align-items:center;  justify-content:center;color:#FFF;  font-family:'Font Awesome 5 Free';}
.option-input:checked::after {  -webkit-animation: click-wave 0.65s;  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;  background: #30beb0;  content: '';
  display: block;  position: relative;  z-index: 100;}
.option-input.radio {  border-radius: 50%;}
.option-input.radio {  border-radius: 50%;  width: 32px;  border: 0px;  height: 32px;  padding: 0px;}
.option-input.radio::after {  border-radius: 50%;}
@keyframes click-wave {  0% {    height: 40px;    width: 40px;    opacity: 0.35;    position: relative;  }
  100% {    height: 200px;    width: 200px;    margin-left: -80px;    margin-top: -80px;    opacity: 0;  }
}

.icon-plus::before {content: "\2b";font-size: 16px; font-family: "Font Awesome 6 Free";}
.btn-toggle-lang.close .icon-plus::before {  content: "\2716"; /* ✖ (کد یونی‌کد ضربدر)*/}

.icon-plus i { cursor: pointer; font-size: 14px; transition: all 0.2s ease;
  padding: 16px;  border-radius: 0px;}



.langs a.active { color: #000; text-decoration: underline;}
.list-group-item{cursor:grab}
.handle{margin-left:8px;color:#888;cursor:grab}
.toast-container{position:fixed;bottom:1rem;left:1rem;z-index:9999}

/* بهبود استایل برای درگ اند دراپ */
.draggable-item { cursor: grab; transition: all 0.3s ease;}
.draggable-item:hover {  background-color: #f0f0f0;}
.draggable-item:active {  cursor: grabbing;}
.sortable-ghost {  opacity: 0.7;  background-color: #e6f7ff !important;}
.sortable-chosen {  background-color: #f0f0f0;  box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.sortable-drag {  opacity: 0.9;  box-shadow: 0 5px 15px rgba(0,0,0,0.1);}
.hidden-box { display: none; }
.hidden-box.active { display: block; }


/* بهبود استایل‌های هدر */
.header-level1, .accordion-header {   width: 100%;}
.accordion-button { display: flex;  align-items: center;justify-content: space-between;}





@media (max-width: 560px) {
body {width: 92%;  margin: 0px auto;  padding: 4% 0;}

.level1-h1 { background: #4d71fe; color: #FFF; font-family: vazir; font-size: 15px;border: 0px;}
.level2-h1 {  background: #009874; color: #FFF;  font-family: vazir;  font-size: 15px;  border: 0px;}
.form-group { width: 49%; margin: 0.5%; float: right;}
.accordion-button { font-weight: 600; color: #444; border-radius: 0px !important; padding: 4px 14px; transition: all 0.3s ease;}
.list-group-item .handle {cursor: grab; margin-left: 5px;  font-size: 14px; color: #ffffff8a; transition: color 0.3s;}
.icon-admin {display: flex; gap: 2px; margin-right: auto; margin-left: 0px;}
.name-level1 { flex-grow: 1; margin: 0 1px;  color: #FFF;}
.icon-admin { display: flex; gap: 0px; margin:0px;}
.icon-admin i { cursor: pointer; font-size: 12px; transition: all 0.2s ease;border-radius: 0px;padding: 15px 12px;}
.form-main {  padding: 4%;}
.add-sub-form { padding:0;}
.warning-message { font-size: 12px;  padding: 5px;}
.form-actions button {padding: 6px 12px; float: left; margin: 8px 5px 15px auto; color: #FFF;font-family: vazir; font-size: 14px; border-radius: 5px;}
.form-group input,textarea { width: 100%;padding:10px; font-size: 13px; border-radius: 5px; margin: 1% auto;font-family: vazir;}
.box-add, .box-delete, .box-edit { width: 100%; float: right; padding: 4% 3%;}
.box-icon.hidden-box { display: none; }
.box-icon.active { display: block; }
.edit-form-name { width: 99%;}
.edit-form-dec { width: 99%;}

}

input { padding: 0; margin: 0;  border: 0;}


