/* ============================================================
   IBO Popup Builder Pro — Frontend CSS
   Smooth overlay, premium e-commerce layouts
   ============================================================ */

/* ── Overlay ─────────────────────────────────────────────── */
#ibo-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 999999;
    display: none;                  /* JS sets to flex on open   */
    align-items: center;
    justify-content: center;
    padding: 16px;
    /* Smooth overlay — page stays visible through dark tint */
    background: rgba(0, 0, 0, 0);   /* starts transparent        */
    transition: background 0.4s ease;
    /* GPU layer prevents page jitter */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: background;
    isolation: isolate;
}

/* When JS adds this class the overlay darkens smoothly */
#ibo-overlay.ibo-ov-visible {
    background: rgba(0, 0, 0, 0.6);
}

/* ── Box base ────────────────────────────────────────────── */
#ibo-box {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    width: 100%;
    font-family: var(--ibo-ff, inherit);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
    /* Start invisible — JS adds class to animate in */
    opacity: 0;
    transform: scale(0.94) translateY(18px);
    transition: opacity 0s, transform 0s; /* overridden by data-anim */
    will-change: transform, opacity;
}

/* Box becomes visible */
#ibo-box.ibo-box-in {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ── Close button ────────────────────────────────────────── */
#ibo-close {
    position: absolute; top: 12px; right: 12px;
    background: rgba(255,255,255,0.2); border: none; color: #fff;
    width: 32px; height: 32px; border-radius: 50%; font-size: 18px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    z-index: 100; transition: background 0.2s, transform 0.2s; line-height: 1;
}
#ibo-close:hover { background: rgba(255,255,255,0.35); transform: scale(1.1) rotate(90deg); }

/* ── Shared content block ────────────────────────────────── */
.ibo-cnt {
    padding: 28px 26px;
    display: flex; flex-direction: column; gap: 14px;
}
.ibo-center { align-items: center; text-align: center; }
.ibo-center .ibo-feats { align-items: center; }

.ibo-icon {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 1.4px; text-transform: uppercase; opacity: 0.85;
}
.ibo-isvg { width: 20px; height: 20px; display: flex; align-items: center; flex-shrink: 0; }
.ibo-isvg svg { width: 100%; height: 100%; }

.ibo-title {
    font-size: var(--ibo-tsz, 30px);
    font-weight: var(--ibo-tfw, 800);
    text-align: var(--ibo-tal, left);
    margin: 0; line-height: 1.15; letter-spacing: -0.4px;
}

.ibo-feats { display: flex; flex-direction: column; gap: 7px; }
.ibo-feat {
    font-size: var(--ibo-bsz, 14px);
    font-weight: var(--ibo-bfw, 400);
    text-align: var(--ibo-bal, left);
    display: flex; align-items: center; gap: 7px;
}
.ibo-feat::before { content: '✓'; flex-shrink: 0; }

.ibo-coupon {
    display: flex; align-items: center; gap: 10px;
    border: 2px dashed rgba(255,255,255,0.35);
    border-radius: 10px; padding: 10px 14px;
    background: rgba(255,255,255,0.08);
}
.ibo-clbl  { font-size: 10px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; }
.ibo-ccode { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: 2.5px; flex: 1; }
.ibo-copy-btn { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; padding: 4px; display: flex; align-items: center; transition: color 0.2s; }
.ibo-copy-btn:hover { color: #fff; }

.ibo-btn {
    display: block; text-align: center;
    padding: 14px 24px; border-radius: 10px;
    color: #fff !important;
    font-weight: var(--ibo-btnfw, 700);
    font-size: var(--ibo-btnsz, 15px);
    text-decoration: none !important;
    transition: filter 0.2s, transform 0.18s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    letter-spacing: 0.3px;
}
.ibo-btn:hover { filter: brightness(1.12); transform: translateY(-2px); }

/* ── Email input field (used in e-commerce layouts) ───────── */
.ibo-email-wrap { display: flex; flex-direction: column; gap: 8px; }
.ibo-email-wrap.row { flex-direction: row; }
.ibo-email-input {
    width: 100%; padding: 12px 16px; border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.1);
    color: #fff; font-size: 14px; outline: none;
    transition: border-color 0.2s;
}
.ibo-email-input::placeholder { color: rgba(255,255,255,0.5); }
.ibo-email-input:focus { border-color: rgba(255,255,255,0.6); }
/* Light theme email */
.ibo-email-light { background: #fff; border-color: #e5e7eb; color: #111; }
.ibo-email-light::placeholder { color: #9ca3af; }

/* No thanks link */
.ibo-no-thanks {
    text-align: center; font-size: 12px;
    color: rgba(255,255,255,0.45); cursor: pointer;
    text-decoration: underline; transition: color 0.2s;
}
.ibo-no-thanks:hover { color: rgba(255,255,255,0.7); }
.ibo-no-thanks-dark { color: #9ca3af; }
.ibo-no-thanks-dark:hover { color: #374151; }

/* ── OPEN ANIMATIONS ─────────────────────────────────────── */
@keyframes ibo-fade   { from{opacity:0} to{opacity:1} }
@keyframes ibo-sup    { from{opacity:0; transform:translateY(32px) scale(0.96)} to{opacity:1; transform:translateY(0) scale(1)} }
@keyframes ibo-sdown  { from{opacity:0; transform:translateY(-32px) scale(0.96)} to{opacity:1; transform:translateY(0) scale(1)} }
@keyframes ibo-zoom   { from{opacity:0; transform:scale(0.78)} to{opacity:1; transform:scale(1)} }
@keyframes ibo-flip   { from{opacity:0; transform:perspective(700px) rotateX(-70deg)} to{opacity:1; transform:perspective(700px) rotateX(0)} }
@keyframes ibo-bounce { 0%{opacity:0;transform:scale(0.4) translateY(40px)} 55%{opacity:1;transform:scale(1.04)} 75%{transform:scale(0.97)} 100%{transform:scale(1)} }
@keyframes ibo-rotate { from{opacity:0;transform:rotate(-12deg) scale(0.85)} to{opacity:1;transform:rotate(0) scale(1)} }
@keyframes ibo-swing  { 0%{opacity:0;transform:rotateY(-70deg)} 55%{transform:rotateY(10deg)} 80%{transform:rotateY(-5deg)} 100%{opacity:1;transform:rotateY(0)} }
@keyframes ibo-blur   { from{opacity:0;filter:blur(16px)} to{opacity:1;filter:blur(0)} }

#ibo-box[data-anim="fade"]       { animation: ibo-fade   0.38s ease forwards; }
#ibo-box[data-anim="slide-up"]   { animation: ibo-sup    0.42s cubic-bezier(0.22, 0.68, 0, 1.1) forwards; }
#ibo-box[data-anim="slide-down"] { animation: ibo-sdown  0.42s cubic-bezier(0.22, 0.68, 0, 1.1) forwards; }
#ibo-box[data-anim="zoom"]       { animation: ibo-zoom   0.38s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; }
#ibo-box[data-anim="flip"]       { animation: ibo-flip   0.46s ease forwards; }
#ibo-box[data-anim="bounce"]     { animation: ibo-bounce 0.55s ease forwards; }
#ibo-box[data-anim="rotate"]     { animation: ibo-rotate 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; }
#ibo-box[data-anim="swing"]      { animation: ibo-swing  0.5s ease forwards; }
#ibo-box[data-anim="blur"]       { animation: ibo-blur   0.38s ease forwards; }

/* ── CLOSE ANIMATIONS ────────────────────────────────────── */
@keyframes ibo-fade-o  { from{opacity:1} to{opacity:0} }
@keyframes ibo-sdown-o { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(28px)} }
@keyframes ibo-sup-o   { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-28px)} }
@keyframes ibo-zoom-o  { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(0.78)} }
@keyframes ibo-flip-o  { from{opacity:1;transform:perspective(700px) rotateX(0)} to{opacity:0;transform:perspective(700px) rotateX(60deg)} }
@keyframes ibo-bnc-o   { 0%{transform:scale(1)} 30%{transform:scale(1.04)} 100%{opacity:0;transform:scale(0.4)} }
@keyframes ibo-rot-o   { from{opacity:1;transform:rotate(0)} to{opacity:0;transform:rotate(12deg) scale(0.85)} }
@keyframes ibo-swg-o   { from{opacity:1;transform:rotateY(0)} to{opacity:0;transform:rotateY(70deg)} }
@keyframes ibo-blr-o   { from{opacity:1;filter:blur(0)} to{opacity:0;filter:blur(16px)} }

#ibo-box[data-anim-close="fade"]       { animation: ibo-fade-o 0.3s ease forwards; }
#ibo-box[data-anim-close="slide-down"] { animation: ibo-sdown-o 0.3s ease forwards; }
#ibo-box[data-anim-close="slide-up"]   { animation: ibo-sup-o   0.3s ease forwards; }
#ibo-box[data-anim-close="zoom-out"]   { animation: ibo-zoom-o  0.3s ease forwards; }
#ibo-box[data-anim-close="flip"]       { animation: ibo-flip-o  0.32s ease forwards; }
#ibo-box[data-anim-close="bounce"]     { animation: ibo-bnc-o   0.32s ease forwards; }
#ibo-box[data-anim-close="rotate"]     { animation: ibo-rot-o   0.3s ease forwards; }
#ibo-box[data-anim-close="swing"]      { animation: ibo-swg-o   0.3s ease forwards; }
#ibo-box[data-anim-close="blur"]       { animation: ibo-blr-o   0.3s ease forwards; }

/* ============================================================
   PREMIUM E-COMMERCE LAYOUTS
   All styled to match professional popup design references
   ============================================================ */

/* ── Split panel (image left, content right) ─────────────── */
.ibo-split { display: flex; }
.ibo-sp-img {
    flex: 0 0 46%; min-height: 300px;
    background-size: cover; background-position: center;
}
.ibo-sp-diag { clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%); }
.ibo-sp-circle-wrap {
    flex: 0 0 46%; display: flex; align-items: center;
    justify-content: center; padding: 24px; background: rgba(255,255,255,0.04);
}
.ibo-sp-circle {
    width: 200px; height: 200px; border-radius: 50%;
    background-size: cover; background-position: center;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

/* ── Banner (image top/bottom) ───────────────────────────── */
.ibo-banner-wrap { display: flex; flex-direction: column; }
.ibo-img-box { width: 100%; line-height: 0; overflow: hidden; }
.ibo-img-tag { width: 100%; height: 200px; object-fit: cover; object-position: center; display: block; }

/* ── Cinematic / overlay ─────────────────────────────────── */
.ibo-cine-wrap { position: relative; min-height: 340px; display: flex; align-items: flex-end; }
.ibo-cine-img  { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ibo-cine-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,5,20,0.97) 40%, rgba(5,5,20,0.45) 70%, transparent); }
.ibo-cine-cnt  { position: relative; z-index: 1; width: 100%; }

/* ── Glass / blur ────────────────────────────────────────── */
.ibo-glass-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 18px; }
.ibo-glass-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(10px); transform: scale(1.08); }
.ibo-glass-ov { position: absolute; inset: 0; background: rgba(10,5,30,0.5); }
.ibo-glass-cnt { position: relative; z-index: 1; }

/* ── Story / vertical ────────────────────────────────────── */
.ibo-story-wrap { position: relative; min-height: 500px; display: flex; align-items: flex-end; }
.ibo-layout-story-dark .ibo-story-wrap,
.ibo-layout-story-image .ibo-story-wrap { min-height: 520px; }
.ibo-st-img  { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ibo-st-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,5,20,0.97) 38%, rgba(8,5,20,0.5) 65%, transparent); }
.ibo-st-cnt  { position: relative; z-index: 1; width: 100%; padding-bottom: 24px; }
.ibo-layout-modern-story { max-width: 360px !important; border-radius: 24px; }

/* ── Minimal with image ──────────────────────────────────── */
.ibo-min-wrap { display: flex; }
.ibo-min-img {
    flex: 0 0 44%; background-size: cover; background-position: center;
    border-radius: 18px 0 0 18px; min-height: 280px;
}
.ibo-min-cnt { flex: 1; }

/* ── Overlap card ────────────────────────────────────────── */
.ibo-overlap-wrap { position: relative; min-height: 280px; }
.ibo-overlap-img { position: absolute; inset: 0; background-size: cover; background-position: center; border-radius: 18px; }
.ibo-overlap-card {
    position: relative; z-index: 1; margin: 32px 16px 16px 38%;
    border-radius: 14px; padding: 22px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.15);
    display: flex; flex-direction: column; gap: 12px;
}

/* ── Offer badge ─────────────────────────────────────────── */
.ibo-badge-outer { display: flex; align-items: stretch; }
.ibo-badge-strip {
    flex: 0 0 56px; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; font-weight: 900; letter-spacing: 1px;
    writing-mode: vertical-rl; text-orientation: mixed;
    border-radius: 18px 0 0 18px;
}

/* ── Offer ribbon ────────────────────────────────────────── */
.ibo-ribbon-outer { position: relative; overflow: visible; }
.ibo-ribbon-badge {
    position: absolute; top: 18px; left: -8px;
    color: #fff; font-size: 11px; font-weight: 900;
    padding: 5px 20px 5px 14px; z-index: 10;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
    letter-spacing: 1.5px; box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}

/* ── Announce bar ────────────────────────────────────────── */
.ibo-announce-bar {
    padding: 11px 20px; text-align: center;
    font-size: 11px; font-weight: 800;
    letter-spacing: 2px; color: #fff; text-transform: uppercase;
}

/* ── Line accent ─────────────────────────────────────────── */
.ibo-line-accent { width: 6px; border-radius: 3px 0 0 3px; flex-shrink: 0; }

/* ── Duo (split color + content) ─────────────────────────── */
.ibo-duo { display: flex; }
.ibo-duo-l {
    flex: 0 0 35%; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 24px 16px; text-align: center; border-radius: 18px 0 0 18px;
}

/* ============================================================
   LAYOUT SPECIFIC OVERRIDES
   ============================================================ */

/* Glass variants */
[class*="ibo-layout-glass-"] {
    background: rgba(15, 8, 35, 0.6) !important;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.16);
}
.ibo-layout-glass-light {
    background: rgba(255,255,255,0.22) !important;
    border: 1px solid rgba(255,255,255,0.45);
}
.ibo-layout-glass-neon {
    background: rgba(8,4,28,0.72) !important;
    border: 1px solid rgba(124,58,237,0.65);
    box-shadow: 0 0 44px rgba(124,58,237,0.28), 0 24px 60px rgba(0,0,0,0.5) !important;
}
.ibo-layout-glass-gradient {
    background: linear-gradient(135deg, rgba(124,58,237,0.28), rgba(168,85,247,0.18)) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}

/* Dark premium */
.ibo-layout-dark-luxury {
    background: linear-gradient(145deg, #09060a, #1a120a) !important;
    border: 1px solid rgba(212,175,55,0.38);
    box-shadow: 0 0 60px rgba(212,175,55,0.08), 0 24px 60px rgba(0,0,0,0.7) !important;
}
.ibo-layout-dark-luxury .ibo-title { color: #d4af37 !important; }
.ibo-layout-dark-luxury .ibo-coupon { border-color: rgba(212,175,55,0.4); }

.ibo-layout-dark-obsidian { background: linear-gradient(145deg, #09090d, #18182e) !important; }
.ibo-layout-dark-neon {
    background: #050310 !important;
    border: 1px solid rgba(124,58,237,0.5);
    box-shadow: 0 0 50px rgba(124,58,237,0.22), 0 24px 60px rgba(0,0,0,0.6) !important;
}
.ibo-layout-dark-velvet { background: linear-gradient(145deg, #180a1e, #2d1040) !important; }
.ibo-layout-dark-space  { background: radial-gradient(ellipse at top center, #0d1b2e, #050508) !important; }
.ibo-layout-dark-carbon {
    background: repeating-linear-gradient(135deg, #191919 0, #191919 2px, #212121 2px, #212121 4px) !important;
    border: 1px solid rgba(255,255,255,0.05);
}
.ibo-layout-dark-hacker {
    background: #000 !important;
    border: 1px solid #00ff41;
    box-shadow: 0 0 22px rgba(0,255,65,0.2), 0 0 60px rgba(0,255,65,0.05) !important;
}
.ibo-layout-dark-hacker .ibo-title { color: #00ff41 !important; font-family: 'Courier New', monospace; }
.ibo-layout-dark-hacker .ibo-ccode, .ibo-layout-dark-hacker .ibo-feat::before { color: #00ff41; }
.ibo-layout-dark-hacker .ibo-coupon { border-color: rgba(0,255,65,0.4); }
.ibo-layout-dark-hacker #ibo-close  { background: rgba(0,255,65,0.12); color: #00ff41; }

/* Gradient FX */
.ibo-layout-grad-purple { background: linear-gradient(145deg, #1a0033, #4c1d95, #7c3aed) !important; }
.ibo-layout-grad-ocean  { background: linear-gradient(145deg, #001524, #0c4a6e, #0284c7) !important; }
.ibo-layout-grad-sunset { background: linear-gradient(160deg, #1a0500, #7c2d12, #ea580c, #f59e0b) !important; }
.ibo-layout-grad-aurora { background: linear-gradient(145deg, #022c22, #065f46, #0d9488) !important; }
.ibo-layout-grad-fire   { background: linear-gradient(160deg, #0f0000, #450a0a, #991b1b, #ef4444) !important; }
.ibo-layout-grad-forest { background: linear-gradient(145deg, #052e16, #14532d, #16a34a) !important; }
.ibo-layout-grad-candy  { background: linear-gradient(145deg, #831843, #be185d, #f472b6) !important; }
.ibo-layout-grad-metal  { background: linear-gradient(145deg, #1c1917, #3f3f46, #71717a) !important; }

/* Light / soft */
[class*="ibo-layout-light-"],
.ibo-layout-min-light { background: #ffffff !important; }
.ibo-layout-light-pastel   { background: linear-gradient(145deg, #fdf4ff, #fce7f3) !important; }
.ibo-layout-light-cream    { background: linear-gradient(145deg, #fffbeb, #fef3c7) !important; }
.ibo-layout-light-sky      { background: linear-gradient(145deg, #f0f9ff, #e0f2fe) !important; }
.ibo-layout-light-mint     { background: linear-gradient(145deg, #f0fdf4, #dcfce7) !important; }
.ibo-layout-light-rose     { background: linear-gradient(145deg, #fff1f2, #ffe4e6) !important; }
.ibo-layout-light-lavender { background: linear-gradient(145deg, #f5f3ff, #ede9fe) !important; }
.ibo-layout-light-peach    { background: linear-gradient(145deg, #fff7ed, #fed7aa) !important; }

/* Light theme overrides */
[class*="ibo-layout-light-"] .ibo-coupon,
.ibo-layout-min-light .ibo-coupon { border-color: #e5e7eb; background: #f9fafb; }
[class*="ibo-layout-light-"] .ibo-clbl,
.ibo-layout-min-light .ibo-clbl   { color: #9ca3af; }
[class*="ibo-layout-light-"] .ibo-ccode,
.ibo-layout-min-light .ibo-ccode  { color: #111; }
[class*="ibo-layout-light-"] .ibo-copy-btn,
.ibo-layout-min-light .ibo-copy-btn { color: #9ca3af; }
[class*="ibo-layout-light-"] #ibo-close,
.ibo-layout-min-light #ibo-close  { background: rgba(0,0,0,0.1); color: #333; }
[class*="ibo-layout-light-"] .ibo-no-thanks,
.ibo-layout-min-light .ibo-no-thanks { color: #9ca3af; }

/* Minimal special */
.ibo-layout-min-dark      { background: #0a0a0a !important; }
.ibo-layout-min-mono      { background: #161616 !important; filter: grayscale(0.4); }
.ibo-layout-min-editorial { background: #f7f7f7 !important; border-left: 6px solid #111 !important; border-radius: 0 18px 18px 18px !important; }
.ibo-layout-min-editorial .ibo-title { color: #111 !important; }
.ibo-layout-min-border    { border: 2px solid currentColor !important; background: transparent !important; }

/* FX overlays */
.ibo-layout-fx-particles::before,
.ibo-layout-fx-grid::before,
.ibo-layout-fx-scanlines::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 18px;
}
.ibo-layout-fx-particles::before {
    background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px);
    background-size: 26px 26px;
}
.ibo-layout-fx-grid::before {
    background-image: linear-gradient(rgba(124,58,237,0.18) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(124,58,237,0.18) 1px, transparent 1px);
    background-size: 38px 38px;
}
.ibo-layout-fx-scanlines::before {
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.2) 2px, rgba(0,0,0,0.2) 4px);
}
.ibo-layout-fx-particles .ibo-cnt,
.ibo-layout-fx-grid .ibo-cnt,
.ibo-layout-fx-scanlines .ibo-cnt { position: relative; z-index: 1; }

.ibo-layout-fx-holographic { background: linear-gradient(135deg, #667eea, #764ba2, #f64f59) !important; }
.ibo-layout-fx-ice   { background: linear-gradient(135deg, #dff6ff, #bae6fd) !important; border: 1px solid rgba(125,211,252,0.5); }
.ibo-layout-fx-fire  { background: linear-gradient(160deg, #160200, #7f1d1d) !important; box-shadow: 0 0 40px rgba(239,68,68,0.25) !important; }

/* Seasonal */
.ibo-layout-season-christmas   { background: linear-gradient(145deg, #0f2e18, #1e5e30) !important; }
.ibo-layout-season-halloween   { background: linear-gradient(145deg, #150800, #3d1200) !important; border: 1px solid rgba(255,107,0,0.5); }
.ibo-layout-season-valentine   { background: linear-gradient(145deg, #3d0010, #7a1028) !important; }
.ibo-layout-season-blackfriday { background: #000 !important; border: 2px solid #c9a44a; }
.ibo-layout-season-ramadan     { background: linear-gradient(145deg, #080f1e, #142038) !important; border: 1px solid rgba(201,164,74,0.5); }
.ibo-layout-season-eid         { background: linear-gradient(145deg, #042e1c, #065030) !important; border: 1px solid rgba(52,211,153,0.5); }
.ibo-layout-season-diwali      { background: linear-gradient(145deg, #380d00, #6a2800) !important; border: 1px solid rgba(251,191,36,0.5); }
.ibo-layout-season-newyear     { background: linear-gradient(145deg, #130f38, #1e1b55) !important; }

/* Offer specials */
.ibo-layout-offer-flash        { border: 2.5px solid #fbbf24 !important; box-shadow: 0 0 28px rgba(251,191,36,0.3) !important; }
.ibo-layout-offer-coupon       { border: 2px dashed rgba(255,255,255,0.4) !important; }
.ibo-layout-offer-exclusive    { background: linear-gradient(145deg, #0c0b1e, #1a183e) !important; border: 1px solid rgba(212,175,55,0.45); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .ibo-split { flex-direction: column !important; }
    .ibo-sp-img, .ibo-sp-diag { flex: none; min-height: 190px; clip-path: none; width: 100%; }
    .ibo-sp-circle-wrap { padding: 18px; }
    .ibo-sp-circle { width: 160px; height: 160px; }
    .ibo-min-wrap  { flex-direction: column; }
    .ibo-min-img   { flex: none; min-height: 170px; border-radius: 18px 18px 0 0; }
    .ibo-duo       { flex-direction: column; }
    .ibo-duo-l     { flex: none; border-radius: 18px 18px 0 0; padding: 18px; }
    .ibo-badge-outer { flex-direction: column; }
    .ibo-badge-strip { flex: none; min-height: 48px; border-radius: 18px 18px 0 0; writing-mode: horizontal-tb; }
    .ibo-overlap-card { margin: 24px 14px 14px; }
}

@media (max-width: 480px) {
    #ibo-overlay { padding: 10px; }
    .ibo-cnt { padding: 20px 16px; gap: 11px; }
    .ibo-title { font-size: max(18px, calc(var(--ibo-tsz, 30px) * 0.72)) !important; }
    .ibo-btn   { font-size: 14px; padding: 12px 16px; }
    .ibo-coupon { flex-wrap: wrap; }
    .ibo-img-tag { height: 160px; }
    .ibo-story-wrap { min-height: 380px; }
    .ibo-layout-modern-story { max-width: 100% !important; }
}