/* ==== استایل جدول مقایسه ==== */
section.compare {background:#f8f8f8; padding:20px; border-radius:10px;}
table {width:100%; border-collapse: collapse; border-radius:10px; overflow:hidden;}
th, td {padding:12px; border:1px solid #ddd; text-align:center; vertical-align:middle;}
th {background-color:#a4161a; color:#fff; font-weight:600;}
tr:nth-child(even) {background-color:#fafafa;}
tr:hover {background-color:#f1f1f1; transition:0.3s;}
.card-img {width:120px; border-radius:8px; transition:transform 0.3s ease; cursor:pointer;}
.card-img:hover {transform:scale(1.05);}

/* ==== استایل محاسبه‌گر ==== */
.calc-table-container {margin-top:30px; background:#fff; padding:25px; border-radius:10px; box-shadow:0 3px 10px rgba(0,0,0,0.1);}
.calc-table th {background:#a4161a; color:#fff;}
.calc-button {margin-top:15px; padding:12px 24px; background:#a4161a; color:#fff; border:none; border-radius:8px; cursor:pointer; font-size:1em; transition:background 0.3s ease;}
.calc-button:hover {background:#e63946;}
label {display:block; margin:10px 0; font-weight:500;}
input[type=number] {padding:8px; border-radius:6px; border:1px solid #ccc; width:100px; text-align:center;}

/* ==== فوتر ==== */
footer {margin-top:30px; background:#e0e0e0; color:#333; padding:10px; border-radius:6px; font-size:0.9em;}
footer a {color:#a4161a; font-weight:bold; text-decoration:none;}
footer a:hover {text-decoration:underline;}

/* ==== پاپ‌آپ ==== */
.modal-overlay {position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; z-index:9999;}
.modal-box {position:relative; background:#fff; padding:22px; border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,0.3); max-width:480px; text-align:center; animation:popIn 0.35s ease;}
.modal-close {position:absolute; top:10px; left:12px; background:#f5f5f5; border:none; border-radius:50%; width:28px; height:28px; cursor:pointer; font-weight:bold; color:#555; transition:0.2s;}
.modal-close:hover {background:#e0e0e0; color:#000;}
.vip-badge {width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,#ffd54a,#f39c12); display:flex; align-items:center; justify-content:center; margin:0 auto;}
.vip-badge svg {width:28px; height:28px;}
.modal-title {font-size:18px; color:#222; margin:6px 0 4px;}
.modal-sub {font-size:14px; color:#666; margin-bottom:10px;}
.modal-price {font-weight:700; color:#a4161a; font-size:16px; margin-top:8px;}
.modal-cta {margin-top:14px; background:#a4161a; color:#fff; border:none; padding:10px 18px; border-radius:8px; cursor:pointer;}
.modal-cta:hover {background:#e63946;}
@keyframes popIn {from{opacity:0; transform:translateY(-12px) scale(0.98);}to{opacity:1; transform:translateY(0) scale(1);}}
/* ==== استایل عمومی ==== */
body {
  font-family: tahoma, sans-serif;
  background: #f8f9fa;
  color: #333;
  line-height: 1.6;
}

/* ==== جدول مقایسه (فقط دسکتاپ) ==== */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px auto;
  font-size: 15px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.compare-table th {
  background: #a4161a;
  color: #fff;
  padding: 12px;
  text-align: center;
  font-weight: bold;
}

.compare-table td {
  border: 1px solid #eee;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}

.compare-table tr:nth-child(even) {
  background: #fafafa;
}

.card-img {
  max-width: 80px;
  cursor: pointer;
}

/* ==== کارت‌های موبایل ==== */
.compare-cards {
  display: none; /* پیش‌فرض مخفی، فقط در موبایل نمایش داده می‌شود */
}

.card-item {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 15px;
  margin: 15px 0;
  text-align: center;
  transition: transform 0.2s ease;
}

.card-item:hover {
  transform: translateY(-3px);
}

.card-title {
  font-size: 18px;
  font-weight: 700;
  color: #a4161a;
  margin-bottom: 10px;
}

.card-detail {
  font-size: 14px;
  color: #444;
  margin: 6px 0;
}

.card-detail strong {
  color: #a4161a;
}

/* ==== محاسبه صرفه‌جویی ==== */
.calc-table-container {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin: 25px auto;
  max-width: 800px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.calc-button {
  background: #a4161a;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  margin-top: 10px;
  transition: background 0.2s ease;
}

.calc-button:hover {
  background: #821212;
}

/* جدول محاسبه دسکتاپ */
#savingTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  font-size: 14px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}

#savingTable th {
  background: #a4161a;
  color: #fff;
  padding: 8px;
  text-align: center;
}

#savingTable td {
  border: 1px solid #eee;
  padding: 8px;
  text-align: center;
}

/* کارت محاسبه در موبایل */
#savingTableMobile {
  display: none;
}

#savingTableMobile .calc-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  padding: 12px;
  margin: 12px 0;
  text-align: right;
}

#savingTableMobile .calc-title {
  font-weight: bold;
  color: #a4161a;
  margin-bottom: 6px;
  font-size: 15px;
}

#savingTableMobile .calc-value {
  font-size: 14px;
  color: #333;
  margin: 3px 0;
}

/* ==== پاپ‌آپ ==== */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  position: relative;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.modal-close {
  position: absolute;
  top: 8px;
  left: 8px;
  background: transparent !important;
  border: none !important;
  font-size: 20px;
  cursor: pointer;
  color: #444;
  line-height: 1;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0;
}

.modal-close:hover {
  color: #000;
}

.vip-badge {
  background: #a4161a;
  color: #fff;
  display: inline-block;
  padding: 8px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.modal-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #a4161a;
}

.modal-price {
  font-size: 16px;
  font-weight: bold;
  margin-top: 6px;
}

.modal-cta {
  background: #a4161a;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  margin-top: 15px;
  cursor: pointer;
}

.modal-cta:hover {
  background: #821212;
}

/* ==== فوتر ==== */
footer {
  background: #f1f1f1;
  padding: 12px;
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  border-radius: 8px;
}

/* ==== ریسپانسیو ==== */
@media screen and (max-width: 768px) {
  .compare-table { display: none; }    /* جدول دسکتاپ مخفی */
  .compare-cards { display: block; }   /* کارت‌ها فعال */
  #savingTable { display: none !important; }  /* جدول محاسبه دسکتاپ مخفی */
  #savingTableMobile { display: block; }      /* کارت محاسبه فعال */
}
/* ===== استایل فرم محاسبه ===== */
/* کانتینر فرم */
.calc-form {
  display: grid;
  grid-template-columns: 1fr 320px; /* ستون چپ برای spacer/حالت دکمه و ستون راست برای فیلدها */
  gap: 12px 20px;
  align-items: center;
  max-width: 820px;
  margin: 0 auto;
  direction: rtl; /* حفظ جهت راست‌به‌چپ */
}

/* هر ردیف فرم: label و input */
.form-row {
  display: contents; /* نگه داشتن ردیف در گرید؛ label و input جدا در ستون‌ها قرار می‌گیرند */
}

/* برچسب (label) */
.form-row > label {
  justify-self: end;           /* راست‌چین در ستون خودش */
  align-self: center;
  font-weight: 600;
  color: #333;
  margin-left: 10px;
}

/* ورودی‌ها */
.form-row > input[type="number"] {
  justify-self: start;        /* در ستون ورودی قرار می‌گیرد */
  width: 100%;
  max-width: 300px;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  box-sizing: border-box;
  background: #fff;
  color: #222;
}

/* ردیف دکمه */
.form-row.form-row-button > .calc-button {
  justify-self: start;
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* وقتی لازم باشد دکمه در سمت چپ قرار بگیرد */
.form-row.form-row-button > div {
  /* spacer cell — خالی می‌ماند تا دکمه در ستون دوم قرار گیرد */
}

/* ریسپانسیو: موبایل — فرم تک ستون و inputs تمام عرض */
@media screen and (max-width: 768px) {
  .calc-form {
    grid-template-columns: 1fr; /* تک ستون */
    gap: 10px;
    padding: 0 12px;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .form-row > label {
    justify-self: start;
    text-align: right;
    margin-bottom: 6px;
  }

  .form-row > input[type="number"] {
    max-width: 100%;
    width: 100%;
  }

  .form-row.form-row-button {
    display: flex;
    justify-content: flex-start;
  }
}