/* Festify PRO Banner Templates */

/* =========================================
   1. Glassmorphism (Blurry Glass)
   ========================================= */
.festify-banner.is-glassmorphism {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    color: #333;
    /* Dark text for contrast usually, or white if dark bg */
    border-radius: 16px;
}

/* Dark Mode Glass */
body.dark-mode .festify-banner.is-glassmorphism,
.festify-banner.is-glassmorphism.dark-glass {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* =========================================
   2. Neon Border (Glowing)
   ========================================= */
.festify-banner.is-neon {
    background: #000;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 8px;
    box-shadow:
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #0ff,
        0 0 40px #0ff,
        0 0 80px #0ff;
    animation: festify-neon-pulse 1.5s infinite alternate;
}

@keyframes festify-neon-pulse {
    from {
        box-shadow:
            0 0 5px #fff,
            0 0 10px #fff,
            0 0 20px #0ff,
            0 0 40px #0ff;
    }

    to {
        box-shadow:
            0 0 2px #fff,
            0 0 5px #fff,
            0 0 10px #0ff,
            0 0 20px #0ff;
    }
}

/* =========================================
   3. Gradient Mesh
   ========================================= */
.festify-banner.is-gradient-mesh {
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    color: white;
    border: none;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* =========================================
   4. Floating Card (Material 3)
   ========================================= */
.festify-banner.is-floating {
    background: white;
    color: #333;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-radius: 20px;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.festify-banner.is-floating:hover {
    transform: translateY(-5px);
}

/* =========================================
   5. Cyberpunk
   ========================================= */
.festify-banner.is-cyberpunk {
    background: #fcee0a;
    /* Cyber yellow */
    color: #000;
    clip-path: polygon(0% 0%,
            100% 0%,
            100% 85%,
            95% 100%,
            0% 100%);
    font-family: 'Courier New', Courier, monospace;
    text-transform: uppercase;
    font-weight: bold;

    /* =========================================
   6. Minimal Dark
   ========================================= */
    .festify-banner.is-minimal-dark {
        background: #111;
        color: #eee;
        border-radius: 4px;
        border-left: 3px solid #666;
    }

    /* =========================================
   7. Minimal Light
   ========================================= */
    .festify-banner.is-minimal-light {
        background: #f9f9f9;
        color: #333;
        border-radius: 4px;
        border: 1px solid #ddd;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    /* =========================================
   8. Brutalist
   ========================================= */
    .festify-banner.is-brutalist {
        background: #fff;
        color: #000;
        border: 4px solid #000;
        box-shadow: 8px 8px 0px #000;
        border-radius: 0;
        font-family: 'Arial Black', sans-serif;
        text-transform: uppercase;
    }

    /* =========================================
   9. Retro Pop
   ========================================= */
    .festify-banner.is-retro-pop {
        background: #ffcc00;
        color: #c90076;
        border: 3px solid #c90076;
        box-shadow: 5px 5px 0px #0099cc;
        border-radius: 10px;
        font-family: 'Comic Sans MS', cursive, sans-serif;
        /* Fallback intended */
    }

    /* =========================================
   10. Abstract Shapes
   ========================================= */
    .festify-banner.is-abstract-shapes {
        background-color: #ffffff;
        background-image: radial-gradient(circle at 10% 20%, rgb(255, 197, 61) 0%, rgb(255, 94, 77) 90.2%);
        color: white;
        border-radius: 15px;
        border: none;
    }

    /* =========================================
   11. Geometric Pattern
   ========================================= */
    .festify-banner.is-geometric {
        background-color: #330000;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.2'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        color: #fff;
    }

    /* =========================================
   12. Dot Pattern
   ========================================= */
    .festify-banner.is-dots {
        background-color: #e5e5f7;
        background-image: radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);
        background-size: 10px 10px;
        color: #444cf7;
        font-weight: bold;
        border: 1px solid #444cf7;
    }

    /* =========================================
   13. Stripe Pattern
   ========================================= */
    .festify-banner.is-stripes {
        background: repeating-linear-gradient(45deg,
                #606dbc,
                #606dbc 10px,
                #465298 10px,
                #465298 20px);
        color: white;
    }

    /* =========================================
   14. Gold Foil
   ========================================= */
    .festify-banner.is-gold {
        background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
        color: #553300;
        border: 1px solid #aa771c;
        text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4);
    }

    /* =========================================
   15. Silver Foil
   ========================================= */
    .festify-banner.is-silver {
        background: linear-gradient(to right, #dbe6f6, #c5d9f1, #e6ecf5, #f2f7fc, #c5d9f1);
        color: #333;
        border: 1px solid #aab;
    }

    /* =========================================
   16. Holiday Red
   ========================================= */
    .festify-banner.is-holiday-red {
        background: #d42426;
        color: white;
        border: 2px dashed #fff;
        box-shadow: 0 0 10px rgba(212, 36, 38, 0.5);
    }

    /* =========================================
   17. Holiday Green
   ========================================= */
    .festify-banner.is-holiday-green {
        background: #165b33;
        color: #f8b229;
        border-radius: 8px;
        border: 1px solid #bb2528;
    }

    /* =========================================
   18. Spring Bloom
   ========================================= */
    .festify-banner.is-spring {
        background: #fff0f5;
        color: #d63384;
        border-top: 5px solid #d63384;
        background-image: linear-gradient(#ffe0e9 1px, transparent 1px);
        background-size: 100% 20px;
    }

    /* =========================================
   19. Winter Frost
   ========================================= */
    .festify-banner.is-winter {
        background: linear-gradient(to bottom, #e3fdfd, #cbf1f5);
        color: #2c3e50;
        border: 1px solid #a6e3e9;
        border-radius: 12px;
    }

    /* =========================================
   20. Autumn Vibes
   ========================================= */
    .festify-banner.is-autumn {
        background: linear-gradient(to right, #d35400, #e67e22, #f39c12);
        color: white;
        border-radius: 4px 20px 4px 20px;
    }