:root{
  --discount-bg: #fffefb;
}

.offer-wrap{width:100%;}
.offer-inner{max-width:1280px;margin:14px auto;padding:0 18px;display:flex;justify-content:center;box-sizing:border-box}
.offer-card{background:var(--discount-bg);color:var(--brand,#222);display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;box-shadow:0 6px 14px rgba(19,19,19,0.04);border:1px solid rgba(0,0,0,0.04);width:100%;max-width:920px;align-items:center;transition:transform .18s ease,opacity .25s ease;opacity:0;transform:translateY(6px);animation:dk-fade-in .35s ease forwards}

@keyframes dk-fade-in{to{opacity:1;transform:none}}

/* Subtle left accent using site accent color */
.offer-card::before{content:"";width:6px;height:48px;border-radius:6px;background:var(--accent,#FFC107);margin-right:8px}

/* Badge uses subtle brand gradient but smaller and flat */
.offer-badge{background:var(--accent,#FFC107);color:#fff;width:46px;height:46px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0}
.badge-icon{font-size:1.05rem;color:#000}

.offer-content{flex:1;min-width:0;text-align:left}
.offer-heading strong{display:block;font-size:1.05rem;color:var(--brand,#111);font-weight:600}
.offer-subtext{font-size:0.92rem;color:rgba(0,0,0,0.55);max-width:640px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}

/* Responsive adjustments */
@media (max-width:575px){
  .offer-inner{padding:0 12px}
  .offer-card{gap:10px;padding:10px;border-radius:8px;flex-direction:row}
  .offer-card::before{height:40px}
  .offer-badge{width:40px;height:40px;border-radius:8px}
  .offer-heading strong{font-size:1rem}
  .offer-subtext{display:block;white-space:normal}
}

@media (min-width:576px){
  .offer-inner{padding:0 18px}
}