/* ===== Discount Banner Style ===== */
#discountBanner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 90%;
  max-width: 360px;
  background: linear-gradient(180deg, #0f1724 0%, #111827 100%);
  color: #fff;
  padding: 18px;
  border-radius: 14px;
  z-index: 999999;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
  font-family: "Tajawal", "Segoe UI", Roboto, sans-serif;
  display: none;
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
}

#discountBanner.show {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

#discountBanner .topRow {
  display:flex;
  gap:12px;
  align-items:center;
}

#discountBanner .promoImage {
  width:72px;
  height:72px;
  border-radius:10px;
  object-fit:cover;
  flex: 0 0 72px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  border: 2px solid rgba(255,255,255,0.06);
}

#discountBanner .content {
  flex:1;
}

#discountBanner h4 {
  margin:0 0 6px 0;
  font-size:16px;
  line-height:1.15;
}

#discountBanner p.lead {
  margin:0;
  font-size:13px;
  line-height:1.35;
  color: #e6eef8;
}

#discountBanner .formRow {
  margin-top:12px;
  display:flex;
  gap:8px;
  align-items:center;
}

#discountBanner input[type="tel"]{
  flex:1;
  padding:10px 12px;
  border-radius:10px;
  border: none;
  outline: none;
  font-size:14px;
  text-align:center;
  background: #fff;
  color:#111;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.05);
}

#discountBanner button.cta {
  padding:10px 12px;
  border-radius:10px;
  border: none;
  font-weight:700;
  cursor:pointer;
  background: linear-gradient(180deg,#FFD46B,#D4AF37);
  color:#0b0b0b;
  min-width:110px;
}

#discountBanner .codeBox {
  margin-top:12px;
  background: rgba(255,255,255,0.96);
  color:#111;
  padding:10px 12px;
  border-radius:10px;
  display:none;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  font-weight:700;
  box-shadow: 0 6px 18px rgba(2,6,23,0.12);
}

#discountBanner .codeText {
  font-size:18px;
  letter-spacing:1px;
}

#discountBanner .smallBtn {
  padding:8px 10px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  background: #0b1220;
  color:#fff;
  font-weight:700;
}

#discountBanner .closeBtn {
  margin-left:8px;
  background: rgba(255,255,255,0.06);
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border: 1px solid rgba(255,255,255,0.04);
}

#discountBanner .muted {
  font-size:12px;
  color: rgba(230,238,248,0.8);
  margin-top:8px;
}

@media (max-width:420px){
  #discountBanner { 
    width:92%; 
    padding:14px; 
  }
  #discountBanner .promoImage { 
    width:64px; 
    height:64px; 
  }
  #discountBanner .closeBtn { 
    width:32px; 
    height:32px; 
  }
}