/*offers  start*/

  :root{
    --teal:#007f86;           /* الخلفية الخارجية للكارت */
    --teal-700:#006a70;
    --card-bg:#0e8c92;        /* الغامق */
    --inner:#ffffff;          /* المربع الأبيض الداخلي */
    --muted:#e7f6f7;
    --text:#0c4a4e;
    --shadow:0 12px 28px rgba(0,0,0,.10), 0 6px 14px rgba(0,0,0,.06);
  }

  .qty-offers{ padding:36px 0 48px; background:#fff; }
  .qty-offers .container{ max-width:1200px; margin:0 auto; padding:0 16px; }
  .section-title
  { margin:0 0 18px;
     font-size:28px; 
    font-weight:800; 
    color:#333; 
  }
  .section-title h2{
 display:block;
  width:100%;
  background: var(--main-color, #087b80);
  color:#fff;
  text-align:center;
  padding:12px 24px;
  margin:24px 0;
  border-radius:16px;
  font-weight:bold;
  font-size:clamp(18px,2.2vw,28px);
  line-height:1.3;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  }
  
  /* إضافة انتقال بسيط للكارت */
.offer-card{
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  border: 1px solid #eee;   /* لو عندك بوردَر بالفعل سيبه */
  background: #fff;         /* سيبه لو موجود */
  border-radius: 12px;      /* سيبه لو موجود */
}

/* الهوفر */
.offer-card:hover{
  background: #f9fafb;
  border-color: #ddd;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transform: translateY(-2px);
}


  /* Grid for md+ */
  /* توزيع 3 كروت بالتساوي داخل قسم عروض الافراد فقط */
@media (min-width: 768px){ /* md وما فوق */
  .persons-offers .row > .col-md-3{
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

.old-price{
  text-decoration: line-through;
}

.offer-card p{
  display: flex; 
  align-items: center; 
  gap: .4rem; 
  flex-wrap: wrap;      /* يحافظ على الشكل في الموبايل */
}


/* أكوادك كما هي */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}

/* Card outer */
.q-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 576px){
  .q-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
}
@media (min-width: 992px){
  .q-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
}


/* الكارت */
.q-card{
  background: var(--card-bg);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 1px;
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}
.q-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 36px rgba(0,0,0,.12); }

/* الإطار الداخلي بنفس روح الصورة (حدود + زاوية) */
.q-inset{
  background: var(--inner);
  border-radius: 16px;
  border: 4px solid var(--teal);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
/* صندوق الصورة — قصير ومُوحَّد الارتفاع */
/* صندوق الصورة */
.q-img-box{
  background: linear-gradient(180deg, #fff 0%, rgba(0,127,134,.06) 100%);
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;        /* موبايل: قصير */
  padding: 0;                  /* مهم: عشان الصورة تملأ الصندوق */
  overflow: hidden;            /* يخفي أي قصّ للحواف */
  border-radius: inherit;      /* نفس تدوير الكارت */
}

@media (min-width: 576px){
  .q-img-box{ aspect-ratio: 4 / 3; } /* تابلت/دسكتوب */
}

/* الصورة نفسها */
.q-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;           /* تملى البوكس بالكامل */
  object-position: center;     /* توسيط المنطقة المهمة من الصورة */
}


/* النصوص والمحتوى */
.q-body{
  padding: 12px 16px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;            /* يخلي الزرار ينزل تحت */
}

.q-title{
  color: var(--text);
  font-weight: 800;
  font-size: 18px;
  margin: 6px 0 2px;
}
@media (min-width: 576px){ .q-title{ font-size: 20px; } }
@media (min-width: 992px){ .q-title{ font-size: 22px; } }

/* شارة الخصم */
.q-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 900;
  line-height: 1;
}
.q-badge span{ position: relative; }
.q-badge span::before{
  content: "";
  position: absolute; inset: -6px -10px;
  background: radial-gradient(circle at 55% 55%, var(--ring-20), transparent 60%);
  filter: blur(5px);
  border-radius: 30px;
  z-index: -1;
}
.q-badge strong{ font-size: 2em; }

@media (max-width: 575.98px){
  .q-cta{
    width: 100%;
    justify-content: center;   /* يوسّط الأيقونة والنص أفقيًا */
    text-align: center;        /* احتياط */
  }
}

/* زر CTA */
.q-cta{
  margin-top: auto;          /* يثبت أسفل الكارت */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal);
  color: #fff;
  border: 1px solid var(--teal);
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
  width: 100%;               /* موبايل: بعرض الكارت */
}
.q-cta:hover{ background: var(--teal-700); transform: translateY(-1px); }
@media (min-width: 992px){ .q-cta{ width: auto; } }

.offers {
  .section-title {
    
    text-align: center;
    h3 {
      color: var(--main-color);
      font-weight: bold;
    }
    p {
      color: #555;
    }
  }
  .offers-content {
    margin-top: 40px;
    .persons-offers h2{
     display:block;
  width:100%;
  background: var(--main-color, #087b80);
  color:#fff;
  text-align:center;
  padding:12px 24px;
  margin:24px 0;
  border-radius:16px;
  font-weight:bold;
  font-size:clamp(18px,2.2vw,28px);
  line-height:1.3;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
    
    .persons-offers {
      
      margin-bottom: 30px;

      .discount {
        background-color: var(--third-color);
        color: white;
        border-top: 3px solid var(--forth-color);
        border-radius: 5px;
        font-size: 14px;
        padding: 5px 8px;
        position: relative;
        top: 15%;
        z-index: 100;
      }
      .offer-card {
        border-radius: 10px;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        min-height: 100px;
        box-shadow: 0 2px 4px 0 rgba(1, 129, 138, 0.2),
          0 3px 10px 0 rgba(1, 129, 138, 0.19);

        p {
          color: var(--secondary-color);
          margin-bottom: 0px !important;
        }
        span {
          svg {
            color: var(--secondary-color);
          }
        }
      }
    }
    .amounts-offers {
      .card {
        background-color: var(--main-color);
        text-align: center;
        color: white;
        .discount {
          width: 40%;
          background-color: green;
          position: relative;
          top: -50px;
          z-index: 999;
        }
        img {
          max-width: 80%;
          max-height: 280px;
        }
        .order-now-btn {
          background-color: white;
          color: var(--main-color);
          border-radius: 25px;
          width: fit-content;
          display: block;
          margin: auto;
          padding: 5px 30px;
          border: 1px solid var(--main-color);
        }
      }
      
    }
  }
}