/* Top ads ( دو کادر بالایی صفحه اصلی) */
.top-ads-index{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 0 16px;
    margin-top: 10px;
}

.top-ads-grid-index{
  display:flex;
  gap:12px;
  flex-wrap: wrap; /* اجازه می‌دهد کادرها در صورت نیاز به خط بعدی بروند */
  justify-content: center; /* کادرها را وسط‌چین می‌کند */
  width: 100%; /* عرض کامل والد را می‌گیرد */
}

.top-ad-slot-index{
    flex: 1 1 100%; /* در حالت پیش‌فرض (موبایل)، هر کادر تمام عرض را می‌گیرد */
    max-width: 600px; /* حداکثر عرض برای هر کادر تبلیغاتی برای جلوگیری از کشیدگی زیاد در برخی حالات */
    height: 120px;
    min-height: 120px;
    background: linear-gradient(180deg,#fffef8,#ffffff);
    border: 1px dashed #e9e4d6;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* جایگزین var(--shadow) */
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #666; /* جایگزین var(--muted) */
    position: relative;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    margin-top: 10px;
}
.top-ad-slot-index[data-filled="true"]{border-style:solid}
.top-ad-slot-index .ad-edit-hint-index{position:absolute;left:8px;bottom:6px;font-size:11px;color:#666} /* جایگزین var(--muted) */

/* برای دسکتاپ و مانیتورهای عریض (بالای 768px) */
@media (min-width: 768px) {
 .top-ads-grid-index {
        justify-content: space-between; /* کادرها را در عرض کامل توزیع می‌کند */
        max-width: none; /* حذف هرگونه max-width قبلی برای این کانتینر */
    }
 .top-ad-slot-index {
        flex: 1 1 48%; /* هر کادر تقریباً نصف عرض را می‌گیرد (با در نظر گرفتن gap) */
        max-width: none; /* حذف محدودیت عرض 600px برای هر کادر */
    }
}

/* برای موبایل (تا 480px) */
@media (max-width:480px){
  .top-ads-grid-index{
      flex-direction: column; /* چیدمان عمودی در موبایل */
      justify-content: center;
  }
  .top-ad-slot-index{
      width: 100%;
      max-width: 100%; /* تضمین می‌کند که کادرها از صفحه بیرون نزنند */
  }
}

/*  ads ( دو کادر وسط صفحه اصلی) */
.mid-ads-section {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 20px;
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom: 0;
    margin-top: -20px;
}

.mid-ads-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 100%;
    margin: 0 auto;
}

.mid-ad-slot {
    background: linear-gradient(180deg, #ffffff, #fffaf0);
    border: 1px dashed #e9e4d6;
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.3s ease;
}

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

.mid-ad-slot img {
    width: 100%; /* تغییر از 100% به auto */
    display: block;
    border-radius: 10px;    /* object-fit: cover; این خط را حذف کنید */
    height: 120px;
}

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
    .mid-ads-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Down ads (دو کادر پایینی صفحه اصلی) */
.Down-ads-index{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 0 16px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.Down-ads-grid-index{
  display:flex;
  gap:12px;
  flex-wrap: wrap; /* اجازه می‌دهد کادرها در صورت نیاز به خط بعدی بروند */
  justify-content: center; /* کادرها را وسط‌چین می‌کند */
  width: 100%; /* عرض کامل والد را می‌گیرد */
}

.Down-ad-slot-index{
    flex: 1 1 100%; /* در حالت پیش‌فرض (موبایل)، هر کادر تمام عرض را می‌گیرد */
    max-width: 600px; /* حداکثر عرض برای هر کادر تبلیغاتی برای جلوگیری از کشیدگی زیاد در برخی حالات */
    height: 120px;
    min-height: 120px;
    background: linear-gradient(180deg,#fffef8,#ffffff);
    border: 1px dashed #e9e4d6;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* جایگزین var(--shadow) */
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #666; /* جایگزین var(--muted) */
    position: relative;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    margin-top: 10px;
}
.Down-ad-slot-index[data-filled="true"]{border-style:solid}
.Down-ad-slot-index .ad-edit-hint-index{position:absolute;left:8px;bottom:6px;font-size:11px;color:#666} /* جایگزین var(--muted) */

/* برای دسکتاپ و مانیتورهای عریض (بالای 768px) */
@media (min-width: 768px) {
 .Down-ads-grid-index {
        justify-content: space-between; /* کادرها را در عرض کامل توزیع می‌کند */
        max-width: none; /* حذف هرگونه max-width قبلی برای این کانتینر */
    }
 .Down-ad-slot-index {
        flex: 1 1 48%; /* هر کادر تقریباً نصف عرض را می‌گیرد (با در نظر گرفتن gap) */
        max-width: none; /* حذف محدودیت عرض 600px برای هر کادر */
    }
}

/* برای موبایل (تا 480px) */
@media (max-width:480px){
  .Down-ads-grid-index{
      flex-direction: column; /* چیدمان عمودی در موبایل */
      justify-content: center;
  }
  .Down-ad-slot-index{
      width: 100%;
      max-width: 100%; /* تضمین می‌کند که کادرها از صفحه بیرون نزنند */
  }
}

/*  ads (صفحه تبلیغات) */
.top-ads-price{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 0 16px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.top-ads-grid-price{
  display:flex;
  gap:12px;
  flex-wrap: wrap; /* اجازه می‌دهد کادرها در صورت نیاز به خط بعدی بروند */
  justify-content: center; /* کادرها را وسط‌چین می‌کند */
  width: 100%; /* عرض کامل والد را می‌گیرد */
}

.top-ad-slot-price{
    flex: 1 1 100%; /* در حالت پیش‌فرض (موبایل)، هر کادر تمام عرض را می‌گیرد */
    max-width: 600px; /* حداکثر عرض برای هر کادر تبلیغاتی برای جلوگیری از کشیدگی زیاد در برخی حالات */
    height: 120px;
    min-height: 120px;
    background: linear-gradient(180deg,#fffef8,#ffffff);
    border: 1px dashed #e9e4d6;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* جایگزین var(--shadow) */
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #666; /* جایگزین var(--muted) */
    position: relative;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    margin-top: 10px;
}
.top-ad-slot-price[data-filled="true"]{border-style:solid}
.top-ad-slot-price .ad-edit-hint-price{position:absolute;left:8px;bottom:6px;font-size:11px;color:#666} /* جایگزین var(--muted) */

/* برای دسکتاپ و مانیتورهای عریض (بالای 768px) */
@media (min-width: 768px) {
 .top-ads-grid-price {
        justify-content: space-between; /* کادرها را در عرض کامل توزیع می‌کند */
        max-width: none; /* حذف هرگونه max-width قبلی برای این کانتینر */
    }
 .top-ad-slot-price {
        flex: 1 1 48%; /* هر کادر تقریباً نصف عرض را می‌گیرد (با در نظر گرفتن gap) */
        max-width: none; /* حذف محدودیت عرض 600px برای هر کادر */
    }
}

/* برای موبایل (تا 480px) */
@media (max-width:480px){
  .top-ads-grid-price{
      flex-direction: column; /* چیدمان عمودی در موبایل */
      justify-content: center;
  }
  .top-ad-slot-price{
      width: 100%;
      max-width: 100%; /* تضمین می‌کند که کادرها از صفحه بیرون نزنند */
  }
}

/* Top ads (دو کادر بالایی صفحه ماشین حساب) */
.top-ads-calculator{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 0 16px;
    margin-top: 10px;
}

.top-ads-grid-calculator{
  display:flex;
  gap:12px;
  flex-wrap: wrap; /* اجازه می‌دهد کادرها در صورت نیاز به خط بعدی بروند */
  justify-content: center; /* کادرها را وسط‌چین می‌کند */
  width: 100%; /* عرض کامل والد را می‌گیرد */
}

.top-ad-slot-calculator{
    flex: 1 1 100%; /* در حالت پیش‌فرض (موبایل)، هر کادر تمام عرض را می‌گیرد */
    max-width: 600px; /* حداکثر عرض برای هر کادر تبلیغاتی برای جلوگیری از کشیدگی زیاد در برخی حالات */
    height: 120px;
    min-height: 120px;
    background: linear-gradient(180deg,#fffef8,#ffffff);
    border: 1px dashed #e9e4d6;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* جایگزین var(--shadow) */
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #666; /* جایگزین var(--muted) */
    position: relative;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    margin-top: 10px;
}
.top-ad-slot-calculator[data-filled="true"]{border-style:solid}
.top-ad-slot-calculator .ad-edit-hint-calculator{position:absolute;left:8px;bottom:6px;font-size:11px;color:#666} /* جایگزین var(--muted) */

/* برای دسکتاپ و مانیتورهای عریض (بالای 768px) */
@media (min-width: 768px) {
 .top-ads-grid-calculator {
        justify-content: space-between; /* کادرها را در عرض کامل توزیع می‌کند */
        max-width: none; /* حذف هرگونه max-width قبلی برای این کانتینر */
    }
 .top-ad-slot-calculator {
        flex: 1 1 48%; /* هر کادر تقریباً نصف عرض را می‌گیرد (با در نظر گرفتن gap) */
        max-width: none; /* حذف محدودیت عرض 600px برای هر کادر */
    }
}

/* برای موبایل (تا 480px) */
@media (max-width:480px){
  .top-ads-grid-index{
      flex-direction: column; /* چیدمان عمودی در موبایل */
      justify-content: center;
  }
  .top-ad-slot-index{
      width: 100%;
      max-width: 100%; /* تضمین می‌کند که کادرها از صفحه بیرون نزنند */
  }
}

/* Down ads (دو کادر پایینی صفحه ماشین حساب) */
.Down-ads-calculator{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 0 16px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.Down-ads-grid-calculator{
  display:flex;
  gap:12px;
  flex-wrap: wrap; /* اجازه می‌دهد کادرها در صورت نیاز به خط بعدی بروند */
  justify-content: center; /* کادرها را وسط‌چین می‌کند */
  width: 100%; /* عرض کامل والد را می‌گیرد */
}

.Down-ad-slot-calculator{
    flex: 1 1 100%; /* در حالت پیش‌فرض (موبایل)، هر کادر تمام عرض را می‌گیرد */
    max-width: 600px; /* حداکثر عرض برای هر کادر تبلیغاتی برای جلوگیری از کشیدگی زیاد در برخی حالات */
    height: 120px;
    min-height: 120px;
    background: linear-gradient(180deg,#fffef8,#ffffff);
    border: 1px dashed #e9e4d6;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* جایگزین var(--shadow) */
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #666; /* جایگزین var(--muted) */
    position: relative;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    margin-top: 10px;
}
.Down-ad-slot-calculator[data-filled="true"]{border-style:solid}
.Down-ad-slot-calculator .ad-edit-hint-calculator{position:absolute;left:8px;bottom:6px;font-size:11px;color:#666} /* جایگزین var(--muted) */

/* برای دسکتاپ و مانیتورهای عریض (بالای 768px) */
@media (min-width: 768px) {
 .Down-ads-grid-calculator {
        justify-content: space-between; /* کادرها را در عرض کامل توزیع می‌کند */
        max-width: none; /* حذف هرگونه max-width قبلی برای این کانتینر */
    }
 .Down-ad-slot-calculator {
        flex: 1 1 48%; /* هر کادر تقریباً نصف عرض را می‌گیرد (با در نظر گرفتن gap) */
        max-width: none; /* حذف محدودیت عرض 600px برای هر کادر */
    }
}

/* برای موبایل (تا 480px) */
@media (max-width:480px){
  .Down-ads-grid-calculator{
      flex-direction: column; /* چیدمان عمودی در موبایل */
      justify-content: center;
  }
  .Down-ad-slot-calculator{
      width: 100%;
      max-width: 100%; /* تضمین می‌کند که کادرها از صفحه بیرون نزنند */
  }
}