.info-inline-row {
  display: flex;
  justify-content: space-between; /* मोबाईलवर तिन्ही कप्पे समान अंतरावर पसरतील */
  align-items: center;
  gap: 2px; /* मोबाईलसाठी कप्प्यांमधील अंतर कमी केले */
  margin: 5px 0; /* कार्डच्या डिझाईननुसार वर आणि खाली थोडी स्पेस */
  padding: 12px 24px; /* डाव्या-उजव्या बाजूने थोडी मोकळी जागा */
  background-color: #f8f9fa; /* बॅकग्राउंड दिला जेणेकरून ओळ उठून दिसेल */
  border-radius: 5px;
  
  /* मोबाईल मॅजिक प्रोपर्टी: मजकूर खाली तुटून जाण्यापासून रोखते */
  flex-wrap: nowrap !important; 
  width: 100%;
  box-sizing: border-box;
}

.info-item {
  /* मोबाईल स्क्रीनसाठी फॉन्ट १५ वरून १२ केला, जेणेकरून डेटा एकाच लाईनमध्ये बसेल */
  font-size: 15px; 
  font-weight: 700; /* फॉन्ट लहान केल्यामुळे ठळक (Bold) दिसावा म्हणून ७०० केला */
  color: #333;
  
  /* मजकूर कधीही दुसऱ्या ओळीवर जाणार नाही */
  white-space: nowrap !important; 
}

.rating-click, .review-click {
  cursor: pointer;
  color: #007bff; /* क्लिक करता येणाऱ्या भागासाठी निळा रंग */
}

.rating-click:hover, .review-click:hover {
  text-decoration: underline;
}

.coupon-code {
  color: #e53935; /* ऑफर कोडसाठी लाल शेड */
  font-weight: bold;
}

.info-divider {
  color: #ccc;
  font-weight: 300;
  font-size: 12px; /* डिव्हायडरची साईझ पण मॅच केली */
}

/* =========================================
   INFO ROW - REDMI / SMALL MOBILE FIX
========================================= */

@media screen and (max-width: 400px) {

  .info-inline-row {
      width: 100%;
      padding: 8px 6px;
      margin: 5px 0;
      gap: 3px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap !important;
      box-sizing: border-box;
  }

  .info-item {
      font-size: 10px;
      font-weight: 600;
      white-space: nowrap !important;
  }

  .info-divider {
      font-size: 10px;
  }
}

/* =========================================
   INFO ROW - FINAL MOBILE FIX
========================================= */

.info-inline-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;

  width: 100% !important;
  box-sizing: border-box !important;

  overflow: hidden !important;
}

.info-inline-row .info-item {
  white-space: nowrap !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

.info-inline-row .info-divider {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}


/* Redmi / Small Mobile */
@media screen and (max-width: 480px) {

  .info-inline-row {
      padding: 8px 4px !important;
      gap: 2px !important;
  }

  .info-inline-row .info-item {
      font-size: 10px !important;
      white-space: nowrap !important;
  }

  .info-inline-row .info-divider {
      font-size: 9px !important;
  }
}

/* ======================================================
   🎁 OFFER POPUP
====================================================== */

#offerPopup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
}


.offer-popup-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.72);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;
}


.offer-popup-box {

  position: relative;

  width: min(420px, 100%);

  background: #ffffff;

  border-radius: 22px;

  padding: 30px 25px;

  text-align: center;

  box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.35);

  animation:
      offerPopupShow 0.25s ease;
}


@keyframes offerPopupShow {

  from {
      opacity: 0;
      transform: scale(0.85);
  }

  to {
      opacity: 1;
      transform: scale(1);
  }

}


.offer-close {

  position: absolute;

  top: 10px;
  right: 14px;

  border: none;

  background: transparent;

  font-size: 30px;

  cursor: pointer;

  color: #555;
}


.offer-icon {

  font-size: 48px;

  margin-bottom: 8px;
}


.offer-popup-box h2 {

  margin: 5px 0 12px;

  font-size: 24px;

}


.offer-discount {

  display: inline-block;

  padding: 8px 18px;

  border-radius: 50px;

  background: #fff0f0;

  font-size: 21px;

  font-weight: 700;

  margin-bottom: 15px;

}


.offer-popup-box p {

  font-size: 15px;

  line-height: 1.6;

  margin-bottom: 18px;

}


.offer-coupon-box {

  padding: 12px;

  border: 2px dashed #aaa;

  border-radius: 12px;

  margin-bottom: 15px;

}


.offer-coupon-box span {

  display: block;

  font-size: 12px;

  margin-bottom: 4px;

}


.offer-coupon-box strong {

  font-size: 20px;

  letter-spacing: 1px;

}


.offer-validity {

  font-size: 14px;

  margin-bottom: 20px;

}


.offer-close-btn {

  width: 100%;

  border: none;

  border-radius: 10px;

  padding: 12px;

  font-size: 16px;

  font-weight: 600;

  cursor: pointer;

}


/* 📱 Mobile */

@media screen and (max-width: 480px) {

  .offer-popup-box {

      padding: 25px 18px;

      border-radius: 18px;

  }

  .offer-popup-box h2 {

      font-size: 21px;

  }

  .offer-discount {

      font-size: 18px;

  }

}