.elementor-4568 .elementor-element.elementor-element-2c4ba7c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4568 .elementor-element.elementor-element-040fee5{--display:flex;--min-height:472px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4568 .elementor-element.elementor-element-3e7d787{--display:flex;}@media(min-width:768px){.elementor-4568 .elementor-element.elementor-element-040fee5{--content-width:1229px;}}/* Start custom CSS for html, class: .elementor-element-8a6d25a */@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'); /* برای آیکون‌ها */

.tax-calculator {
  width: 700px;
  margin: 50px auto;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.15);
  font-family: 'IranSans', sans-serif; /* فونت مدرن */
  background-image: linear-gradient(to bottom right, #f5f5f5, #e0e0e0); /* گرادینت ملایم */
}

.tax-calculator-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 28px;
}

.tax-calculator-title i {
  color: #007bff; /* آبی */
  margin-right: 10px;
}

.input-group,
.output-group {
  margin-bottom: 25px;
}

label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #444;
  font-size: 16px;
  text-align: right; /* راست‌چین شدن متن لیبل */
}

label i {
  color: #007bff;
  margin-right: 8px;
}

input[type="number"],
input[type="text"] {
  width: 90%;
  padding: 15px;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  /* حذف راست‌چین کردن اعداد */
}

input[type="number"]:focus,
input[type="text"]:focus {
  outline: none;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

#calculate-btn {
  background-color: #007bff;
  color: white;
  padding: 20px 40px; /* فضای داخلی بیشتر */
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 20px; /* فونت بزرگتر */
  transition: all 0.2s ease;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
  width: 60%; /* دکمه بزرگتر */
  display: block;
  margin: 0 auto; /* وسط‌چین شدن دکمه */
  text-align: center;
}

#calculate-btn:hover {
  background-color: #ff9800; /* نارنجی شدن در هاور */
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
}

#calculate-btn i {
  margin-right: 10px;
}

#tax-table-section {
  margin-top: 40px;
  overflow-x: auto; /* اسکرول افقی برای جدول در صورت نیاز */
}

.tax-table-title {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
  font-size: 20px;
}

.tax-table-title i {
  color: #007bff;
  margin-right: 10px;
}

table {
  width: 100%;
  border-collapse: collapse; /* ادغام حاشیه‌ها */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* سایه ظریف‌تر */
  border-radius: 10px; /* گوشه‌های گرد */
  overflow: hidden; /* برای اعمال گوشه‌های گرد به کل جدول */
}

th,
td {
  text-align: center;
  padding: 12px; /* فضای داخلی کمتر */
  border-bottom: 1px solid #eee; /* خط جداکننده ظریف‌تر */
}

th {
  background-color: #007bff; /*  آبی  برای عنوان */
  color: white; /* رنگ  سفید برای متن عنوان */
  font-weight: bold;
  padding: 12px; /* فضای داخلی  برای عنوان */
  font-size: 15px;
}

th:first-child {
  border-top-left-radius: 10px; /* گوشه گرد بالا چپ */
}

th:last-child {
  border-top-right-radius: 10px; /* گوشه گرد بالا راست */
}

tr:last-child td {
  border-bottom: none; /* حذف خط پایین ردیف آخر */
}

/* رنگ یکی در میون ردیف‌ها */
tr:nth-child(even) {
  background-color: #e6f2ff; /* آبی خیلی کمرنگ */
}

tr:nth-child(odd) {
  background-color: #fff; /* سفید */
}

.range-from,
.range-to {
  font-size: 14px; /* فونت کوچکتر */
  color: #333; /* رنگ تیره‌تر برای اعداد */
}

.rate {
  color: #007bff; /* آبی برای نرخ */
  font-weight: 600;
}

.edit-btn {
  background-color: #ffc107;
  color: #212529;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.edit-btn:hover {
  background-color: #e0a800;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.edit-btn i {
  margin-right: 5px;
}

/* استایل‌های مربوط به حالت ویرایش */
.edit-mode .range-from,
.edit-mode .range-to,
.edit-mode .rate {
  display: none;
}

.edit-mode .edit-input {
  display: inline-block;
  width: 90%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  margin: 0 auto;
  text-align: center;
}

.edit-mode .save-btn,
.edit-mode .cancel-btn {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  margin-left: 5px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.edit-mode .cancel-btn {
  background-color: #dc3545;
}

/* استایل برای "به بالا" */
#tax-table td:last-child {
  font-style: italic; /* متن کج */
}
/* ... ادامه کد از قسمت قبلی ... */

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
  .tax-calculator {
    width: 95%;
    padding: 20px;
  }

  .tax-calculator-title {
    font-size: 24px;
  }

  label {
    font-size: 14px;
  }

  input[type="number"],
  input[type="text"] {
    font-size: 16px;
    padding: 10px;
  }

  #calculate-btn {
    font-size: 18px;
    padding: 15px 30px;
    width: 80%; /* بزرگتر شدن دکمه در موبایل */
  }

  th,
  td {
    padding: 10px;
    font-size: 13px; /* فونت کمی کوچکتر در جدول */
  }

  th {
    padding: 10px; /* فضای داخلی کمتر برای عنوان در موبایل */
    font-size: 14px;
  }

  .edit-btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  .edit-mode .edit-input {
    font-size: 12px;
    padding: 6px;
  }

  .edit-mode .save-btn,
  .edit-mode .cancel-btn {
    padding: 6px 10px;
    font-size: 12px;
    margin-left: 3px;
  }
}/* End custom CSS */