/* ============================================================
   Instant Button Builder — Front-End Styles
   All presets, hover effects, animations & special FX
   ============================================================ */

/* ============================================================
   BASE BUTTON RESET
   ============================================================ */
.ibb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: inherit;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    transition: transform .2s ease, box-shadow .2s ease, background .3s ease, color .2s ease, border-color .2s ease;
    z-index: 1;
}
.ibb-btn:focus { outline: 3px solid rgba(124,58,237,.5); outline-offset: 2px; }
.ibb-btn-wrap { display: inline-block; }
.ibb-btn-wrap.ibb-align-center { display: block; text-align: center; }
.ibb-btn-wrap.ibb-align-right  { display: block; text-align: right; }
.ibb-btn-wrap.ibb-full-width .ibb-btn { width: 100%; }

/* ============================================================
   ICON
   ============================================================ */
.ibb-btn-icon { display: inline-flex; align-items: center; line-height: 1; }
.ibb-btn-icon.icon-left  { order: -1; }
.ibb-btn-icon.icon-right { order: 2; }
.ibb-btn-sub { display: block; font-size: .7em; opacity: .8; font-weight: 400; margin-top: 2px; }

/* ============================================================
   ═══════════════════════════════════════════════════════════
   PRESET STYLES
   ═══════════════════════════════════════════════════════════
   ============================================================ */

/* ─── 1. CLASSIC SOLID ─────────────────────────────────────── */
.ibb-preset-classic {
    background: #3b82f6;
    color: #fff;
    border-radius: 6px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 4px 0 #1d4ed8, 0 6px 12px rgba(59,130,246,.3);
}
.ibb-preset-classic:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #1d4ed8, 0 10px 20px rgba(59,130,246,.4);
}
.ibb-preset-classic:active { transform: translateY(2px); box-shadow: 0 2px 0 #1d4ed8; }

/* ─── 2. GLOWING 3D (Purple) ───────────────────────────────── */
.ibb-preset-glow3d {
    background: linear-gradient(180deg, #8b5cf6 0%, #6d28d9 50%, #5b21b6 100%);
    color: #fff;
    border-radius: 12px;
    padding: 16px 36px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .5px;
    box-shadow:
        0 6px 0 #3b0764,
        0 8px 24px rgba(109,40,217,.6),
        inset 0 1px 0 rgba(255,255,255,.3);
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.ibb-preset-glow3d:hover {
    background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 50%, #6d28d9 100%);
    transform: translateY(-3px);
    box-shadow: 0 9px 0 #3b0764, 0 14px 32px rgba(109,40,217,.8), inset 0 1px 0 rgba(255,255,255,.3);
}
.ibb-preset-glow3d:active { transform: translateY(4px); box-shadow: 0 2px 0 #3b0764, 0 4px 12px rgba(109,40,217,.4); }

/* ─── 3. NEON OUTLINE ──────────────────────────────────────── */
.ibb-preset-neon-outline {
    background: transparent;
    color: #00f5ff;
    border: 2px solid #00f5ff;
    border-radius: 6px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(0,245,255,.4), inset 0 0 10px rgba(0,245,255,.05);
    text-shadow: 0 0 8px rgba(0,245,255,.8);
}
.ibb-preset-neon-outline:hover {
    background: rgba(0,245,255,.1);
    box-shadow: 0 0 20px rgba(0,245,255,.8), 0 0 40px rgba(0,245,255,.4), inset 0 0 20px rgba(0,245,255,.1);
    text-shadow: 0 0 16px rgba(0,245,255,1);
    color: #fff;
}

/* ─── 4. GOLD METALLIC ─────────────────────────────────────── */
.ibb-preset-gold {
    background: linear-gradient(180deg, #f7d060 0%, #c9a84c 40%, #a07830 70%, #c9a84c 100%);
    color: #2d1a00;
    border-radius: 8px;
    padding: 15px 36px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow:
        0 4px 0 #7a5000,
        0 6px 20px rgba(201,168,76,.5),
        inset 0 1px 0 rgba(255,255,255,.6),
        inset 0 -1px 0 rgba(0,0,0,.2);
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.ibb-preset-gold:hover {
    background: linear-gradient(180deg, #ffe080 0%, #d4a843 40%, #b08030 70%, #d4a843 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #7a5000, 0 10px 28px rgba(201,168,76,.7), inset 0 1px 0 rgba(255,255,255,.6);
}
.ibb-preset-gold:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a5000; }

/* ─── 5. ORNATE GOLD FRAME ─────────────────────────────────── */
.ibb-preset-ornate {
    background: linear-gradient(135deg, #8B1A1A 0%, #6b0f0f 100%);
    color: #f7d060;
    border: 3px solid #c9a84c;
    border-radius: 4px;
    padding: 16px 40px;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow:
        0 0 0 6px rgba(201,168,76,.2),
        0 0 0 8px #c9a84c,
        0 0 0 12px rgba(201,168,76,.1),
        0 8px 24px rgba(0,0,0,.6);
    text-shadow: 0 0 12px rgba(247,208,96,.6), 0 1px 2px rgba(0,0,0,.8);
    position: relative;
}
.ibb-preset-ornate::before,
.ibb-preset-ornate::after {
    content: '✦';
    position: absolute; top: 50%; transform: translateY(-50%);
    color: #c9a84c; font-size: 14px; opacity: .8;
}
.ibb-preset-ornate::before { left: 12px; }
.ibb-preset-ornate::after  { right: 12px; }
.ibb-preset-ornate:hover {
    background: linear-gradient(135deg, #a02020 0%, #7d1212 100%);
    box-shadow: 0 0 0 6px rgba(201,168,76,.3), 0 0 0 8px #f7d060, 0 0 0 12px rgba(201,168,76,.2), 0 12px 32px rgba(0,0,0,.7);
    color: #ffe080;
    text-shadow: 0 0 20px rgba(247,208,96,.9), 0 1px 2px rgba(0,0,0,.8);
}

/* ─── 6. COMIC POP ─────────────────────────────────────────── */
.ibb-preset-comic {
    background: #e53e3e;
    color: #fff;
    border: 4px solid #1a1a1a;
    border-radius: 10px;
    padding: 14px 32px;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 5px 5px 0 #1a1a1a;
    text-shadow: 2px 2px 0 rgba(0,0,0,.3);
    position: relative;
}
.ibb-preset-comic:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 #1a1a1a;
}
.ibb-preset-comic:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #1a1a1a; }

/* Comic sub-badge */
.ibb-preset-comic .ibb-btn-sub {
    display: inline-block; background: #f6e05e; color: #1a1a1a;
    font-size: 10px; font-weight: 800; padding: 2px 8px;
    border-radius: 10px; border: 2px solid #1a1a1a;
    margin-top: 4px; text-transform: uppercase; letter-spacing: .5px;
}

/* ─── 7. GRAFFITI STREET ───────────────────────────────────── */
.ibb-preset-graffiti {
    background: #e65c00;
    color: #fff;
    border: 4px solid #fff;
    border-radius: 14px;
    padding: 16px 34px;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 0 rgba(0,0,0,.5), 4px 4px 0 rgba(0,0,0,.3);
    text-shadow: 2px 2px 4px rgba(0,0,0,.5), -1px -1px 0 rgba(0,0,0,.3);
    transform: rotate(-1deg);
    position: relative;
}
.ibb-preset-graffiti:hover {
    transform: rotate(0deg) scale(1.04);
    box-shadow: 0 6px 0 rgba(0,0,0,.5), 6px 6px 0 rgba(0,0,0,.3);
    background: #ff6a00;
}

/* ─── 8. ANCIENT POWER (RPG) ───────────────────────────────── */
.ibb-preset-ancient {
    background: linear-gradient(135deg, #2d1b00 0%, #4a2e00 50%, #2d1b00 100%);
    color: #f7d060;
    border: 2px solid #8a6a00;
    border-radius: 4px;
    padding: 16px 40px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow:
        0 0 20px rgba(247,208,96,.3),
        0 0 60px rgba(247,208,96,.1),
        inset 0 0 20px rgba(247,208,96,.05);
    text-shadow: 0 0 10px rgba(247,208,96,.8), 0 0 20px rgba(247,208,96,.4);
    animation: ibb-ancient-pulse 3s ease-in-out infinite;
}
@keyframes ibb-ancient-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(247,208,96,.3), 0 0 60px rgba(247,208,96,.1), inset 0 0 20px rgba(247,208,96,.05); }
    50%       { box-shadow: 0 0 30px rgba(247,208,96,.5), 0 0 80px rgba(247,208,96,.2), inset 0 0 30px rgba(247,208,96,.1); }
}
.ibb-preset-ancient:hover {
    background: linear-gradient(135deg, #3d2500 0%, #5c3a00 50%, #3d2500 100%);
    box-shadow: 0 0 40px rgba(247,208,96,.6), 0 0 80px rgba(247,208,96,.3), inset 0 0 30px rgba(247,208,96,.1);
    color: #ffe080;
}

/* ─── 9. ENERGY SLASH (Red) ────────────────────────────────── */
.ibb-preset-energy {
    background: #1a1a1a;
    color: #fff;
    border-radius: 4px;
    padding: 16px 40px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1px solid #e53e3e;
    box-shadow: 0 0 20px rgba(229,62,62,.4), inset 0 0 20px rgba(229,62,62,.05);
    position: relative;
    overflow: hidden;
}
.ibb-preset-energy::before {
    content: '';
    position: absolute; top: -50%; left: -60%;
    width: 40%; height: 200%;
    background: rgba(229,62,62,.15);
    transform: skewX(-20deg);
    transition: left .4s ease;
}
.ibb-preset-energy::after {
    content: '';
    position: absolute; top: -50%; left: -20%;
    width: 20%; height: 200%;
    background: rgba(229,62,62,.1);
    transform: skewX(-20deg);
    transition: left .4s ease .05s;
}
.ibb-preset-energy:hover::before { left: 120%; }
.ibb-preset-energy:hover::after  { left: 140%; }
.ibb-preset-energy:hover {
    box-shadow: 0 0 30px rgba(229,62,62,.7), inset 0 0 30px rgba(229,62,62,.1);
    border-color: #fc8181;
}

/* ─── 10. LIQUID GOLD METALLIC ─────────────────────────────── */
.ibb-preset-liquid-gold {
    background: linear-gradient(105deg, #b8860b 0%, #daa520 20%, #ffd700 40%, #daa520 60%, #b8860b 80%, #daa520 100%);
    background-size: 200% 100%;
    color: #1a0a00;
    border-radius: 10px;
    padding: 16px 40px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(218,165,32,.5), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.2);
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    animation: ibb-liquid-gold-shine 3s linear infinite;
}
@keyframes ibb-liquid-gold-shine {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.ibb-preset-liquid-gold:hover {
    box-shadow: 0 6px 25px rgba(218,165,32,.8), inset 0 1px 0 rgba(255,255,255,.6);
    transform: translateY(-2px);
}

/* ─── 11. GLASS MORPHISM ───────────────────────────────────── */
.ibb-preset-glass {
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 12px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.4);
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.ibb-preset-glass:hover {
    background: rgba(255,255,255,.25);
    border-color: rgba(255,255,255,.5);
    box-shadow: 0 12px 40px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5);
    transform: translateY(-2px);
}

/* ─── 12. RETRO PIXEL ──────────────────────────────────────── */
.ibb-preset-retro {
    background: #00aa00;
    color: #fff;
    border: none;
    border-radius: 0;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 #006600, 8px 8px 0 rgba(0,102,0,.3);
    image-rendering: pixelated;
}
.ibb-preset-retro:hover {
    background: #00cc00;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #006600, 10px 10px 0 rgba(0,102,0,.3);
}
.ibb-preset-retro:active { transform: translate(4px, 4px); box-shadow: none; }

/* ─── 13. NEUMORPHIC ───────────────────────────────────────── */
.ibb-preset-neumorphic {
    background: #e0e5ec;
    color: #4a5568;
    border: none;
    border-radius: 12px;
    padding: 16px 36px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 6px 6px 12px #b8bec7, -6px -6px 12px #ffffff;
}
.ibb-preset-neumorphic:hover {
    box-shadow: 8px 8px 16px #b8bec7, -8px -8px 16px #ffffff;
    color: #7c3aed;
}
.ibb-preset-neumorphic:active {
    box-shadow: inset 4px 4px 8px #b8bec7, inset -4px -4px 8px #ffffff;
}

/* ─── 14. GRADIENT PILL ────────────────────────────────────── */
.ibb-preset-gradient-pill {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 50px;
    padding: 14px 36px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(102,126,234,.5);
}
.ibb-preset-gradient-pill:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102,126,234,.7);
}

/* ─── 15. FIRE BUTTON ──────────────────────────────────────── */
.ibb-preset-fire {
    background: linear-gradient(135deg, #ff4500 0%, #ff8c00 50%, #ffd700 100%);
    color: #fff;
    border-radius: 8px;
    padding: 16px 36px;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 20px rgba(255,69,0,.5), 0 0 40px rgba(255,140,0,.2);
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
    animation: ibb-fire-flicker 1.5s ease-in-out infinite alternate;
}
@keyframes ibb-fire-flicker {
    0%   { box-shadow: 0 4px 20px rgba(255,69,0,.5), 0 0 40px rgba(255,140,0,.2); }
    100% { box-shadow: 0 4px 30px rgba(255,69,0,.8), 0 0 60px rgba(255,140,0,.4); }
}
.ibb-preset-fire:hover {
    background: linear-gradient(135deg, #ff6500 0%, #ffa500 50%, #ffe000 100%);
    transform: translateY(-2px) scale(1.02);
}

/* ─── 16. ICE / FROST ──────────────────────────────────────── */
.ibb-preset-ice {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    color: #1a3a4a;
    border-radius: 10px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 4px 15px rgba(168,237,234,.4), inset 0 1px 0 rgba(255,255,255,.9);
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.ibb-preset-ice:hover {
    background: linear-gradient(135deg, #c8f7f5 0%, #fee8f0 100%);
    box-shadow: 0 6px 25px rgba(168,237,234,.6), inset 0 1px 0 rgba(255,255,255,.9);
    transform: translateY(-2px);
}

/* ─── 17. DARK MINIMAL ─────────────────────────────────────── */
.ibb-preset-dark-minimal {
    background: #111827;
    color: #f9fafb;
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.ibb-preset-dark-minimal:hover {
    background: #1f2937;
    border-color: #6b7280;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
    transform: translateY(-1px);
}

/* ─── 18. OUTLINE GHOST ────────────────────────────────────── */
.ibb-preset-outline-ghost {
    background: transparent;
    color: #7c3aed;
    border: 2px solid #7c3aed;
    border-radius: 8px;
    padding: 13px 30px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
}
.ibb-preset-outline-ghost:hover {
    background: #7c3aed;
    color: #fff;
    box-shadow: 0 4px 15px rgba(124,58,237,.4);
    transform: translateY(-1px);
}

/* ─── 19. HOLOGRAPHIC ──────────────────────────────────────── */
.ibb-preset-holographic {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 25%, #4facfe 50%, #00f2fe 75%, #43e97b 100%);
    background-size: 300% 300%;
    color: #fff;
    border-radius: 10px;
    padding: 15px 36px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 20px rgba(240,147,251,.4);
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
    animation: ibb-holo-shift 4s ease infinite;
}
@keyframes ibb-holo-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.ibb-preset-holographic:hover {
    animation-duration: 1s;
    box-shadow: 0 6px 30px rgba(240,147,251,.7);
    transform: translateY(-2px) scale(1.02);
}

/* ─── 20. CYBERPUNK ────────────────────────────────────────── */
.ibb-preset-cyberpunk {
    background: #0a0a0a;
    color: #00ff41;
    border: 1px solid #00ff41;
    border-radius: 0;
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
    box-shadow: 0 0 10px rgba(0,255,65,.3), inset 0 0 10px rgba(0,255,65,.05);
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
    text-shadow: 0 0 8px rgba(0,255,65,.8);
}
.ibb-preset-cyberpunk:hover {
    background: rgba(0,255,65,.1);
    box-shadow: 0 0 20px rgba(0,255,65,.6), inset 0 0 20px rgba(0,255,65,.1);
    text-shadow: 0 0 16px rgba(0,255,65,1);
    color: #fff;
}

/* ─── 21. SOFT PASTEL ──────────────────────────────────────── */
.ibb-preset-pastel {
    background: #fce4ec;
    color: #880e4f;
    border: 2px solid #f48fb1;
    border-radius: 50px;
    padding: 13px 30px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(244,143,177,.3);
}
.ibb-preset-pastel:hover {
    background: #f8bbd0;
    border-color: #e91e63;
    box-shadow: 0 6px 20px rgba(244,143,177,.5);
    transform: translateY(-2px);
}

/* ─── 22. STRIPE / DIAGONAL ────────────────────────────────── */
.ibb-preset-stripe {
    background: repeating-linear-gradient(
        45deg,
        #1a1a2e,
        #1a1a2e 10px,
        #16213e 10px,
        #16213e 20px
    );
    color: #fff;
    border: 2px solid #7c3aed;
    border-radius: 6px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(124,58,237,.3);
}
.ibb-preset-stripe:hover {
    border-color: #a855f7;
    box-shadow: 0 6px 25px rgba(124,58,237,.6);
    transform: translateY(-2px);
}

/* ─── 23. NEON PURPLE GLOW ─────────────────────────────────── */
.ibb-preset-neon-purple {
    background: #0d0d1a;
    color: #d946ef;
    border: 2px solid #d946ef;
    border-radius: 8px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 0 12px rgba(217,70,239,.4), inset 0 0 12px rgba(217,70,239,.05);
    text-shadow: 0 0 10px rgba(217,70,239,.8);
}
.ibb-preset-neon-purple:hover {
    background: rgba(217,70,239,.1);
    box-shadow: 0 0 25px rgba(217,70,239,.8), 0 0 50px rgba(217,70,239,.4), inset 0 0 25px rgba(217,70,239,.1);
    color: #fff;
}

/* ─── 24. BRUTALIST ────────────────────────────────────────── */
.ibb-preset-brutalist {
    background: #ffff00;
    color: #000;
    border: 3px solid #000;
    border-radius: 0;
    padding: 14px 32px;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 6px 6px 0 #000;
}
.ibb-preset-brutalist:hover {
    background: #fff;
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 #000;
}
.ibb-preset-brutalist:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 #000; }

/* ─── 25. GRADIENT BORDER ──────────────────────────────────── */
.ibb-preset-gradient-border {
    background: #0f0f1a;
    color: #fff;
    border-radius: 10px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 4px 15px rgba(0,0,0,.3);
}
.ibb-preset-gradient-border::before {
    content: '';
    position: absolute; inset: -2px;
    border-radius: 12px;
    background: linear-gradient(135deg, #7c3aed, #06b6d4, #a855f7);
    z-index: -1;
}
.ibb-preset-gradient-border:hover {
    background: #1a1a2e;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,.4);
}

/* ─── 26. MATERIAL DESIGN ──────────────────────────────────── */
.ibb-preset-material {
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    transition: box-shadow .28s cubic-bezier(.4,0,.2,1);
}
.ibb-preset-material:hover {
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
    background: #1565c0;
}
.ibb-preset-material:active {
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
}

/* ─── 27. RAINBOW BORDER ───────────────────────────────────── */
.ibb-preset-rainbow {
    background: #fff;
    color: #1a1a1a;
    border-radius: 10px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 800;
    position: relative;
    border: 3px solid transparent;
    background-clip: padding-box;
}
.ibb-preset-rainbow::before {
    content: '';
    position: absolute; inset: -3px;
    border-radius: 13px;
    background: linear-gradient(90deg, #ff0000, #ff7700, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000);
    background-size: 200% 100%;
    z-index: -1;
    animation: ibb-rainbow-spin 3s linear infinite;
}
@keyframes ibb-rainbow-spin {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.ibb-preset-rainbow:hover { transform: scale(1.03); }

/* ─── 28. TYPEWRITER / MONO ────────────────────────────────── */
.ibb-preset-mono {
    background: #1a1a1a;
    color: #00ff00;
    border: 1px solid #00ff00;
    border-radius: 4px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 0 8px rgba(0,255,0,.3);
}
.ibb-preset-mono:hover {
    background: rgba(0,255,0,.1);
    box-shadow: 0 0 20px rgba(0,255,0,.6);
    text-shadow: 0 0 8px rgba(0,255,0,.8);
}

/* ─── 29. SOFT SHADOW ──────────────────────────────────────── */
.ibb-preset-soft-shadow {
    background: #fff;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.05);
}
.ibb-preset-soft-shadow:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.08);
    transform: translateY(-3px);
    border-color: #d1d5db;
}

/* ─── 30. NEON DOUBLE BORDER ───────────────────────────────── */
.ibb-preset-neon-double {
    background: #050510;
    color: #fff;
    border: 2px solid #06b6d4;
    border-radius: 6px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 0 0 4px #050510, 0 0 0 6px #06b6d4, 0 0 20px rgba(6,182,212,.4);
    text-shadow: 0 0 8px rgba(6,182,212,.8);
}
.ibb-preset-neon-double:hover {
    box-shadow: 0 0 0 4px #050510, 0 0 0 6px #22d3ee, 0 0 40px rgba(6,182,212,.8);
    color: #22d3ee;
    text-shadow: 0 0 16px rgba(6,182,212,1);
}

/* ============================================================
   ═══════════════════════════════════════════════════════════
   HOVER EFFECTS (applied as modifier classes)
   ═══════════════════════════════════════════════════════════
   ============================================================ */

/* GLOW */
.ibb-hover-glow:hover {
    filter: brightness(1.15) drop-shadow(0 0 12px currentColor);
}

/* SLIDE FILL — colour slides in from left */
.ibb-hover-slide-fill { overflow: hidden; }
.ibb-hover-slide-fill::after {
    content: '';
    position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: rgba(255,255,255,.15);
    transition: left .35s ease;
    z-index: 0;
}
.ibb-hover-slide-fill:hover::after { left: 0; }
.ibb-hover-slide-fill > * { position: relative; z-index: 1; }

/* SCALE UP */
.ibb-hover-scale:hover { transform: scale(1.06) !important; }

/* COLOUR SHIFT */
.ibb-hover-colour-shift { transition: filter .3s ease, transform .2s ease, box-shadow .2s ease !important; }
.ibb-hover-colour-shift:hover { filter: hue-rotate(30deg) brightness(1.1); }

/* SHAKE */
.ibb-hover-shake:hover { animation: ibb-shake .4s ease; }
@keyframes ibb-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-4px) rotate(-1deg); }
    40%       { transform: translateX(4px) rotate(1deg); }
    60%       { transform: translateX(-3px) rotate(-.5deg); }
    80%       { transform: translateX(3px) rotate(.5deg); }
}

/* BOUNCE */
.ibb-hover-bounce:hover { animation: ibb-bounce .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes ibb-bounce {
    0%, 100% { transform: translateY(0); }
    30%       { transform: translateY(-8px); }
    60%       { transform: translateY(-4px); }
    80%       { transform: translateY(-6px); }
}

/* PULSE RING */
.ibb-hover-pulse-ring { position: relative; }
.ibb-hover-pulse-ring:hover::before {
    content: '';
    position: absolute; inset: -4px;
    border-radius: inherit;
    border: 2px solid currentColor;
    opacity: 0;
    animation: ibb-pulse-ring .6s ease-out;
}
@keyframes ibb-pulse-ring {
    0%   { inset: -4px; opacity: .6; }
    100% { inset: -16px; opacity: 0; }
}

/* RIPPLE (hover click effect) */
.ibb-hover-ripple { overflow: hidden !important; position: relative !important; }
.ibb-ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    transform: scale(0);
    animation: ibb-ripple .6s linear;
    pointer-events: none;
    z-index: 10;
}
@keyframes ibb-ripple {
    to { transform: scale(4); opacity: 0; }
}

/* CONFETTI (hover click effect) */
.ibb-hover-confetti { position: relative !important; }

/* JELLY */
.ibb-hover-jelly:hover { animation: ibb-jelly .6s ease; }
@keyframes ibb-jelly {
    0%, 100% { transform: scale(1,1); }
    25%       { transform: scale(.9,1.1); }
    50%       { transform: scale(1.1,.9); }
    75%       { transform: scale(.95,1.05); }
}

/* FLOAT */
.ibb-hover-float:hover { animation: ibb-float 1s ease infinite; }
@keyframes ibb-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

/* SPIN ICON */
.ibb-hover-spin-icon:hover .ibb-btn-icon { animation: ibb-spin-icon .5s ease; }
@keyframes ibb-spin-icon {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* FLIP */
.ibb-hover-flip:hover { animation: ibb-flip .5s ease; }
@keyframes ibb-flip {
    0%   { transform: perspective(400px) rotateY(0); }
    50%  { transform: perspective(400px) rotateY(90deg); }
    100% { transform: perspective(400px) rotateY(0); }
}

/* UNDERLINE SLIDE */
.ibb-hover-underline { position: relative; }
.ibb-hover-underline::after {
    content: '';
    position: absolute; bottom: 6px; left: 50%;
    width: 0; height: 2px;
    background: currentColor;
    transition: width .3s ease, left .3s ease;
}
.ibb-hover-underline:hover::after { width: 60%; left: 20%; }

/* ============================================================
   ═══════════════════════════════════════════════════════════
   ENTRANCE ANIMATIONS
   ═══════════════════════════════════════════════════════════
   ============================================================ */
.ibb-anim-fade-in    { animation: ibb-fade-in .6s ease forwards; }
.ibb-anim-slide-up   { animation: ibb-slide-up .5s ease forwards; }
.ibb-anim-slide-down { animation: ibb-slide-down .5s ease forwards; }
.ibb-anim-slide-left { animation: ibb-slide-left .5s ease forwards; }
.ibb-anim-zoom-in    { animation: ibb-zoom-in .4s ease forwards; }
.ibb-anim-bounce-in  { animation: ibb-bounce-in .6s cubic-bezier(.36,.07,.19,.97) forwards; }
.ibb-anim-rotate-in  { animation: ibb-rotate-in .5s ease forwards; }
.ibb-anim-flip-in    { animation: ibb-flip-in .5s ease forwards; }

@keyframes ibb-fade-in    { from { opacity:0; } to { opacity:1; } }
@keyframes ibb-slide-up   { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes ibb-slide-down { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
@keyframes ibb-slide-left { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes ibb-zoom-in    { from { opacity:0; transform:scale(.7); } to { opacity:1; transform:scale(1); } }
@keyframes ibb-bounce-in  { 0%{opacity:0;transform:scale(.3)} 50%{opacity:1;transform:scale(1.05)} 70%{transform:scale(.9)} 100%{transform:scale(1)} }
@keyframes ibb-rotate-in  { from { opacity:0; transform:rotate(-180deg) scale(.5); } to { opacity:1; transform:rotate(0) scale(1); } }
@keyframes ibb-flip-in    { from { opacity:0; transform:perspective(400px) rotateX(-90deg); } to { opacity:1; transform:perspective(400px) rotateX(0); } }

/* Pulse (continuous) */
.ibb-anim-pulse-cont { animation: ibb-pulse-cont 2s ease-in-out infinite; }
@keyframes ibb-pulse-cont {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.04); }
}

/* Attention seekers */
.ibb-anim-tada { animation: ibb-tada 1s ease infinite; }
@keyframes ibb-tada {
    0%,100%{transform:scale(1) rotate(0)} 10%,20%{transform:scale(.9) rotate(-3deg)} 30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)} 40%,60%,80%{transform:scale(1.1) rotate(-3deg)}
}

/* ============================================================
   ═══════════════════════════════════════════════════════════
   SPARKLE / PARTICLE EFFECTS
   ═══════════════════════════════════════════════════════════
   ============================================================ */
.ibb-sparkle-wrap { position: relative; display: inline-flex; }

/* CSS-only sparkles */
.ibb-sparkle-wrap .ibb-sparkle {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
    opacity: 0;
}
.ibb-sparkle-wrap:hover .ibb-sparkle { animation: ibb-sparkle-burst .8s ease forwards; }
.ibb-sparkle-wrap .ibb-sparkle:nth-child(1)  { top: -8px;  left: 20%;  animation-delay: 0s;    background: #ffd700; }
.ibb-sparkle-wrap .ibb-sparkle:nth-child(2)  { top: -10px; left: 50%;  animation-delay: .1s;   background: #fff; }
.ibb-sparkle-wrap .ibb-sparkle:nth-child(3)  { top: -8px;  right: 20%; animation-delay: .05s;  background: #a855f7; }
.ibb-sparkle-wrap .ibb-sparkle:nth-child(4)  { bottom: -8px; left: 25%; animation-delay: .15s; background: #06b6d4; }
.ibb-sparkle-wrap .ibb-sparkle:nth-child(5)  { bottom: -10px; left: 50%; animation-delay: .08s; background: #ffd700; }
.ibb-sparkle-wrap .ibb-sparkle:nth-child(6)  { bottom: -8px; right: 25%; animation-delay: .12s; background: #fff; }
.ibb-sparkle-wrap .ibb-sparkle:nth-child(7)  { top: 50%; left: -10px; animation-delay: .06s;  background: #f472b6; }
.ibb-sparkle-wrap .ibb-sparkle:nth-child(8)  { top: 50%; right: -10px; animation-delay: .14s; background: #ffd700; }

@keyframes ibb-sparkle-burst {
    0%   { opacity: 1; transform: scale(0) translate(0,0); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.5) translate(var(--sx, 0), var(--sy, 0)); }
}
.ibb-sparkle-wrap .ibb-sparkle:nth-child(1) { --sx: -8px;  --sy: -14px; }
.ibb-sparkle-wrap .ibb-sparkle:nth-child(2) { --sx: 0px;   --sy: -16px; }
.ibb-sparkle-wrap .ibb-sparkle:nth-child(3) { --sx: 8px;   --sy: -14px; }
.ibb-sparkle-wrap .ibb-sparkle:nth-child(4) { --sx: -8px;  --sy: 14px;  }
.ibb-sparkle-wrap .ibb-sparkle:nth-child(5) { --sx: 0px;   --sy: 16px;  }
.ibb-sparkle-wrap .ibb-sparkle:nth-child(6) { --sx: 8px;   --sy: 14px;  }
.ibb-sparkle-wrap .ibb-sparkle:nth-child(7) { --sx: -16px; --sy: 0px;   }
.ibb-sparkle-wrap .ibb-sparkle:nth-child(8) { --sx: 16px;  --sy: 0px;   }

/* Always-on sparkle (continuous) */
.ibb-sparkle-always .ibb-sparkle { animation: ibb-sparkle-always-anim 2s ease-in-out infinite !important; }
.ibb-sparkle-always .ibb-sparkle:nth-child(1) { animation-delay: 0s !important; }
.ibb-sparkle-always .ibb-sparkle:nth-child(2) { animation-delay: .25s !important; }
.ibb-sparkle-always .ibb-sparkle:nth-child(3) { animation-delay: .5s !important; }
.ibb-sparkle-always .ibb-sparkle:nth-child(4) { animation-delay: .75s !important; }
.ibb-sparkle-always .ibb-sparkle:nth-child(5) { animation-delay: 1s !important; }
.ibb-sparkle-always .ibb-sparkle:nth-child(6) { animation-delay: 1.25s !important; }
.ibb-sparkle-always .ibb-sparkle:nth-child(7) { animation-delay: 1.5s !important; }
.ibb-sparkle-always .ibb-sparkle:nth-child(8) { animation-delay: 1.75s !important; }
@keyframes ibb-sparkle-always-anim {
    0%, 100% { opacity: 0; transform: scale(0) translate(0,0); }
    50%       { opacity: 1; transform: scale(1.5) translate(var(--sx,0), var(--sy,0)); }
}

/* ============================================================
   CONFETTI BURST (JS-triggered)
   ============================================================ */
.ibb-confetti-particle {
    position: fixed;
    width: 8px; height: 8px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 99999;
    animation: ibb-confetti-fall 1.2s ease-in forwards;
}
@keyframes ibb-confetti-fall {
    0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
    100% { opacity: 0; transform: translateY(120px) rotate(720deg); }
}

/* ============================================================
   COUNTDOWN TIMER BADGE
   ============================================================ */
.ibb-timer-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(0,0,0,.3); border-radius: 4px;
    padding: 2px 8px; font-size: 12px; font-weight: 700;
    font-family: monospace; letter-spacing: 1px;
    border: 1px solid rgba(255,255,255,.2);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
    .ibb-btn { font-size: 14px !important; padding: 12px 20px !important; }
    .ibb-btn-wrap.ibb-mobile-full .ibb-btn { width: 100% !important; }
}

/* ============================================================
   IBB-BTN-FRONT — alias for the new renderer output class
   ============================================================ */
.ibb-btn-front {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    text-decoration: none !important;
    cursor: pointer;
    outline: none;
    font-family: inherit;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    transition: transform .2s ease, box-shadow .2s ease, background .3s ease, color .2s ease, filter .2s ease;
    z-index: 1;
}
.ibb-btn-front:focus { outline: 3px solid rgba(124,58,237,.5); outline-offset: 2px; }
.ibb-btn-wrapper { display: block; }

/* Sub-label */
.ibb-sub-label { display: block; font-size: .7em; opacity: .8; font-weight: 400; margin-top: 2px; }

/* ============================================================
   CONTINUOUS ANIMATIONS (matching JS animation names)
   ============================================================ */
.ibb-anim-pulse     { animation: ibb-pulse 2s ease-in-out infinite; }
.ibb-anim-bounce    { animation: ibb-bounce-cont 1s ease infinite; }
.ibb-anim-float     { animation: ibb-float-cont 3s ease-in-out infinite; }
.ibb-anim-ping      { animation: ibb-ping-btn 1.5s cubic-bezier(0,0,.2,1) infinite; }
.ibb-anim-jello     { animation: ibb-jello 2s ease-in-out infinite; }
.ibb-anim-heartbeat { animation: ibb-heartbeat 1.5s ease-in-out infinite; }

@keyframes ibb-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.4); }
    50%       { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}
@keyframes ibb-bounce-cont {
    0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(.8,0,1,1); }
    50%       { transform: translateY(-8px); animation-timing-function: cubic-bezier(0,0,.2,1); }
}
@keyframes ibb-float-cont {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}
@keyframes ibb-ping-btn {
    0%        { transform: scale(1); opacity: 1; }
    75%, 100% { transform: scale(1.15); opacity: 0; }
}
@keyframes ibb-jello {
    0%, 11.1%, 100% { transform: none; }
    22.2%  { transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3%  { transform: skewX(6.25deg) skewY(6.25deg); }
    44.4%  { transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5%  { transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6%  { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    77.7%  { transform: skewX(0.390625deg) skewY(0.390625deg); }
    88.8%  { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}
@keyframes ibb-heartbeat {
    0%, 100% { transform: scale(1); }
    14%       { transform: scale(1.1); }
    28%       { transform: scale(1); }
    42%       { transform: scale(1.1); }
    70%       { transform: scale(1); }
}

/* ============================================================
   HOVER EFFECTS — additional (matching JS hover names)
   ============================================================ */
.ibb-hover-lift:hover  { transform: translateY(-4px) !important; box-shadow: 0 12px 30px rgba(0,0,0,.3) !important; }
.ibb-hover-sink:hover  { transform: translateY(2px) !important; box-shadow: 0 1px 5px rgba(0,0,0,.2) !important; }
.ibb-hover-wobble:hover { animation: ibb-wobble .5s ease !important; }
@keyframes ibb-wobble {
    0%, 100% { transform: translateX(0); }
    15%       { transform: translateX(-5px) rotate(-3deg); }
    30%       { transform: translateX(4px) rotate(2deg); }
    45%       { transform: translateX(-3px) rotate(-1deg); }
    60%       { transform: translateX(2px) rotate(1deg); }
    75%       { transform: translateX(-1px); }
}

/* ============================================================
   SPECIAL EFFECTS — overlay classes (matching JS effect names)
   ============================================================ */

/* SPARKLE */
.ibb-effect-sparkle { position: relative; overflow: visible !important; }
.ibb-sparkle-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ibb-sp { position: absolute; animation: ibb-sparkle-float 2s ease-in-out infinite; color: #ffd700; font-size: 12px; }
.sp1 { top: -8px;  left: 20%;  animation-delay: 0s; }
.sp2 { top: -10px; right: 25%; animation-delay: .4s; }
.sp3 { bottom: -8px; left: 35%; animation-delay: .8s; }
.sp4 { top: 50%;  right: -8px; animation-delay: 1.2s; }
.sp5 { top: 50%;  left: -8px;  animation-delay: 1.6s; }
@keyframes ibb-sparkle-float {
    0%, 100% { opacity: 0; transform: scale(0) translateY(0); }
    50%       { opacity: 1; transform: scale(1) translateY(-6px); }
}

/* SHIMMER */
.ibb-effect-shimmer { overflow: hidden !important; position: relative; }
.ibb-shimmer-line {
    position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    animation: ibb-shimmer 2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ibb-shimmer {
    0%   { left: -100%; }
    100% { left: 150%; }
}

/* (ibb-effect-ripple removed — ripple is now a hover effect) */

/* ENERGY SLASH */
.ibb-effect-energy-slash { overflow: hidden !important; position: relative; }
.ibb-slash {
    position: absolute; top: -20%; height: 140%; width: 15px;
    background: rgba(255,255,255,.15);
    transform: skewX(-20deg);
    animation: ibb-slash-move 2s ease-in-out infinite;
    pointer-events: none;
}
.s1 { left: 10%; animation-delay: 0s; }
.s2 { left: 30%; animation-delay: .3s; width: 8px; }
.s3 { left: 55%; animation-delay: .6s; width: 20px; }
@keyframes ibb-slash-move {
    0%   { transform: skewX(-20deg) translateX(-100%); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: skewX(-20deg) translateX(400%); opacity: 0; }
}

/* (ibb-effect-confetti removed — confetti is now a hover effect) */

/* =========================================================
   BUTTON FRAME - public shortcode wrapper
========================================================= */
.ibb-frame-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* border, padding, border-radius, background, box-shadow
       are all set via inline styles generated by the PHP renderer */
}
/* Alignment helpers for the outer wrap */
.ibb-btn-wrap.ibb-align-center .ibb-frame-wrap { display: inline-flex; }
.ibb-btn-wrap.ibb-align-right  .ibb-frame-wrap { display: inline-flex; }