/* ===== BANNER (all tiers) ===== */
.bnr{--ratio:16/5;--radius:16px;--accent:#ff6a00;position:relative;width:100%;margin-block:12px;border-radius:var(--radius);overflow:hidden;isolation:isolate}
.bnr *{box-sizing:border-box}

/* media + loading skeleton */
.bnr-media{position:relative;display:block;width:100%;aspect-ratio:var(--ratio);overflow:hidden;border-radius:inherit;
  background:linear-gradient(100deg,#e6e9ef 30%,#f4f6fa 50%,#e6e9ef 70%);background-size:200% 100%;animation:bnr-shimmer 1.3s linear infinite}
@keyframes bnr-shimmer{to{background-position:-200% 0}}
.bnr .banner-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.03);transition:opacity .5s ease,transform .6s ease}
.bnr .banner-image.loaded{opacity:1;transform:none}
.bnr-media.is-link{cursor:pointer}

/* hover (business+) */
@media (hover:hover){.bnr-hover:hover .banner-image.loaded{transform:scale(1.04)}}

/* overlay content (business / pro) */
.bnr-over::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,calc(var(--ov,55)/100)) 0%,rgba(0,0,0,calc(var(--ov,55)/260)) 55%,transparent 100%)}
.bnr-content{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(14px,3vw,56px);color:#fff;display:flex;flex-direction:column;gap:8px;align-items:flex-start;max-width:640px; margin-bottom: 27px;}
.bnr-badge{background:var(--accent);color:#fff;font-size:12px;font-weight:600;padding:4px 12px;border-radius:50px}
.bnr-content h3{margin:0;font-size:clamp(18px,3vw,32px);line-height:1.2}
.bnr-content p{margin:0;font-size:clamp(13px,1.6vw,16px);opacity:.92}
.bnr-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding:9px 20px;border-radius:50px;transition:transform .2s}
.bnr-btn:hover{transform:translateY(-2px)}

/* ===== PREMIUM SPLIT ===== */
.bnr-split{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;overflow:visible;border-radius:0}
.bnr-split .bnr-media{border-radius:var(--radius)}
.bnr-split.bnr-side-left{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
.bnr-split.bnr-side-left .bnr-offers{order:-1}
.bnr-split.bnr-solo{grid-template-columns:1fr}
.bnr-split.bnr-solo .bnr-offers{display:none}

.bnr-offers{position:relative;border-radius:var(--radius);padding:clamp(16px,2.4vw,28px);color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#1d2b64,#f8cdda 220%);display:flex;flex-direction:column;justify-content:center;min-height:100%}
.bnr-offers-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;font-size:13px}
.bnr-count{font-weight:700;background:rgba(255,255,255,.18);padding:4px 10px;border-radius:8px;font-variant-numeric:tabular-nums}
.bnr-offer{display:none;flex-direction:column;gap:8px;animation:bnr-in .5s ease}
.bnr-offer.active{display:flex}
@keyframes bnr-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.bnr-offer h3{margin:0;font-size:clamp(18px,2.4vw,26px);line-height:1.2}
.bnr-offer p{margin:0;font-size:14px;opacity:.9}
.bnr-tag{align-self:flex-start;background:var(--accent);font-size:12px;font-weight:700;padding:4px 12px;border-radius:50px}
.bnr-price{font-size:20px}
.bnr-offer .bnr-btn{align-self:flex-start;margin-top:4px}
.bnr-dots{display:flex;gap:6px;margin-top:14px}
.bnr-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer;transition:all .25s}
.bnr-dots button.active{width:22px;border-radius:6px;background:#fff}
.bnr-split.is-admin-note::after{content:"Admin preview: offers schedule ke baad public par hide honge";position:absolute;right:8px;top:6px;font-size:11px;background:#fff8;padding:2px 8px;border-radius:6px}

/* ===== RESPONSIVE ===== */
@media (max-width:820px){
  .bnr-split,.bnr-split.bnr-side-left{grid-template-columns:1fr}
  .bnr-split.bnr-side-left .bnr-offers{order:2}
}
@media (max-width:640px){
  .bnr{--radius:12px}
  .bnr-media{aspect-ratio:var(--ratio-m,var(--ratio))}
  .bnr-content{padding:12px;gap:5px}
}
@media (prefers-reduced-motion:reduce){.bnr-media{animation:none}.bnr .banner-image,.bnr-offer{transition:none;animation:none}}