/**
 * Jscriptz SocialLogin - Holiday Themes CSS
 *
 * Provides styles for:
 * - SVG decorative frames around buttons
 * - Animated particle effects (snowflakes, hearts, confetti, etc.)
 * - Holiday-specific button animations
 */

/* ==========================================================================
   HOLIDAY FRAME CONTAINER
   ========================================================================== */

.jscriptz-social-login-holiday-wrapper {
    position: relative;
    display: inline-block;
}

.jscriptz-holiday-frame {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.jscriptz-holiday-frame .frame-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

.jscriptz-holiday-frame .social-login-btn {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   PARTICLE CONTAINER
   ========================================================================== */

.jscriptz-particles-container {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}

.jscriptz-particle {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
}

/* ==========================================================================
   SNOWFLAKE PARTICLES
   ========================================================================== */

.particle-snowflake {
    color: rgba(180, 210, 255, 0.85);
    text-shadow: 0 0 4px rgba(150, 200, 255, 0.6), 0 0 8px rgba(200, 230, 255, 0.3);
    animation: snowflake-fall var(--fall-duration, 8s) linear infinite;
    animation-delay: var(--delay, 0s);
    font-weight: 300;
}

@keyframes snowflake-fall {
    0% {
        transform: translateY(-30px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        transform: translateY(500px) translateX(var(--drift, 30px)) rotate(720deg);
        opacity: 0;
    }
}

/* Individual snowflake animations with different timings */
.particle-snowflake:nth-child(odd) {
    animation-name: snowflake-fall-drift-left;
}

@keyframes snowflake-fall-drift-left {
    0% {
        transform: translateY(-30px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    25% {
        transform: translateY(120px) translateX(-15px) rotate(180deg);
    }
    50% {
        transform: translateY(250px) translateX(10px) rotate(360deg);
    }
    75% {
        transform: translateY(380px) translateX(-10px) rotate(540deg);
    }
    85% {
        opacity: 1;
    }
    100% {
        transform: translateY(500px) translateX(-20px) rotate(720deg);
        opacity: 0;
    }
}

/* ==========================================================================
   HEART PARTICLES
   ========================================================================== */

.particle-heart {
    color: #ff4081;
    animation: heart-float var(--float-duration, 6s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes heart-float {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translateY(-15px) translateX(8px) scale(1.1);
        opacity: 1;
    }
    50% {
        transform: translateY(-25px) translateX(-5px) scale(0.9);
        opacity: 0.9;
    }
    75% {
        transform: translateY(-10px) translateX(5px) scale(1.05);
        opacity: 1;
    }
}

/* ==========================================================================
   CONFETTI PARTICLES
   ========================================================================== */

.particle-confetti {
    width: 8px;
    height: 8px;
    background: var(--confetti-color, #ffd700);
    animation: confetti-fall var(--fall-duration, 4s) ease-out infinite;
    animation-delay: var(--delay, 0s);
}

.particle-confetti.square {
    border-radius: 0;
}

.particle-confetti.circle {
    border-radius: 50%;
}

.particle-confetti.ribbon {
    width: 4px;
    height: 12px;
    border-radius: 2px;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(-30px) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateY(40px) rotate(180deg) scale(0.8);
    }
    100% {
        transform: translateY(120px) rotate(720deg) scale(0.3);
        opacity: 0;
    }
}

/* ==========================================================================
   SPARKLE PARTICLES
   ========================================================================== */

.particle-sparkle {
    width: 4px;
    height: 4px;
    background: #ffd700;
    border-radius: 50%;
    box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.6);
    animation: sparkle-twinkle var(--twinkle-duration, 2s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes sparkle-twinkle {
    0%, 100% {
        transform: scale(0.5);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* ==========================================================================
   FIREWORK PARTICLES
   ========================================================================== */

.particle-firework {
    width: 3px;
    height: 3px;
    background: var(--firework-color, #ff0000);
    border-radius: 50%;
    box-shadow: 0 0 4px 1px var(--firework-color, #ff0000);
    animation: firework-burst var(--burst-duration, 1.5s) ease-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes firework-burst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(var(--burst-x, 20px), var(--burst-y, -30px)) scale(1.5);
        opacity: 1;
    }
    100% {
        transform: translate(var(--burst-x-end, 30px), var(--burst-y-end, 10px)) scale(0);
        opacity: 0;
    }
}

/* ==========================================================================
   BAT PARTICLES
   ========================================================================== */

.particle-bat {
    color: #1a1a1a;
    animation: bat-flutter var(--flutter-duration, 3s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes bat-flutter {
    0%, 100% {
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    20% {
        transform: translateX(10px) translateY(-5px) rotate(5deg);
    }
    40% {
        transform: translateX(-5px) translateY(8px) rotate(-3deg);
    }
    60% {
        transform: translateX(8px) translateY(-3px) rotate(3deg);
    }
    80% {
        transform: translateX(-8px) translateY(5px) rotate(-5deg);
    }
}

/* ==========================================================================
   LEAF PARTICLES
   ========================================================================== */

.particle-leaf {
    color: var(--leaf-color, #ff8a65);
    animation: leaf-fall var(--fall-duration, 7s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes leaf-fall {
    0% {
        transform: translateY(-20px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    25% {
        transform: translateY(20px) translateX(15px) rotate(45deg);
    }
    50% {
        transform: translateY(45px) translateX(-10px) rotate(90deg);
    }
    75% {
        transform: translateY(70px) translateX(20px) rotate(180deg);
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100px) translateX(-5px) rotate(270deg);
        opacity: 0;
    }
}

/* ==========================================================================
   HOLIDAY-SPECIFIC BUTTON ANIMATIONS
   ========================================================================== */

/* Christmas Lights Animation */
@keyframes christmas-lights-shift {
    0%, 100% {
        filter: hue-rotate(0deg) brightness(1);
    }
    25% {
        filter: hue-rotate(60deg) brightness(1.1);
    }
    50% {
        filter: hue-rotate(120deg) brightness(1);
    }
    75% {
        filter: hue-rotate(180deg) brightness(1.1);
    }
}

.christmas-lights-animation {
    animation: christmas-lights-shift 3s ease-in-out infinite;
}

/* Valentine's Pulse */
@keyframes valentines-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 64, 129, 0.4);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 0 20px rgba(255, 64, 129, 0.6);
    }
}

.valentines-pulse-animation {
    animation: valentines-pulse 2s ease-in-out infinite;
}

/* Spooky Halloween Flicker */
@keyframes halloween-flicker {
    0%, 100% {
        opacity: 1;
        filter: brightness(1);
    }
    5% {
        opacity: 0.8;
        filter: brightness(1.2);
    }
    10% {
        opacity: 1;
        filter: brightness(1);
    }
    15% {
        opacity: 0.9;
        filter: brightness(0.9);
    }
    50% {
        opacity: 1;
        filter: brightness(1);
    }
    55% {
        opacity: 0.85;
        filter: brightness(1.1);
    }
}

.halloween-flicker-animation {
    animation: halloween-flicker 4s ease-in-out infinite;
}

/* ==========================================================================
   DECORATIVE FRAME STYLES
   ========================================================================== */

/* Hearts Frame */
.frame-hearts .frame-element {
    fill: #ff4081;
    opacity: 0.7;
}

.frame-hearts .frame-element:nth-child(even) {
    fill: #ff6b9d;
    opacity: 0.5;
}

/* Shamrocks Frame */
.frame-shamrocks .frame-element {
    fill: #4caf50;
}

.frame-shamrocks .frame-accent {
    fill: #ffd700;
}

/* Easter Eggs Frame */
.frame-eggs .frame-element {
    stroke-width: 1.5;
}

.frame-eggs .egg-1 { fill: #e1bee7; stroke: #9c27b0; }
.frame-eggs .egg-2 { fill: #b3e5fc; stroke: #03a9f4; }
.frame-eggs .egg-3 { fill: #c8e6c9; stroke: #4caf50; }
.frame-eggs .egg-4 { fill: #fff9c4; stroke: #ffc107; }

/* Stars Frame */
.frame-stars .frame-element {
    fill: #ffd700;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
}

.frame-stars .star-red { fill: #b71c1c; }
.frame-stars .star-blue { fill: #0d47a1; }
.frame-stars .star-white { fill: #ffffff; stroke: #ccc; stroke-width: 0.5; }

/* Pumpkins Frame */
.frame-pumpkins .frame-element {
    fill: #ff9800;
    stroke: #e65100;
    stroke-width: 1;
}

.frame-pumpkins .pumpkin-face {
    fill: #1a1a1a;
}

.frame-pumpkins .pumpkin-stem {
    fill: #5d4037;
}

/* Autumn Leaves Frame */
.frame-leaves .frame-element {
    opacity: 0.8;
}

.frame-leaves .leaf-orange { fill: #ff8a65; }
.frame-leaves .leaf-red { fill: #d84315; }
.frame-leaves .leaf-yellow { fill: #ffc107; }
.frame-leaves .leaf-brown { fill: #8d6e63; }

/* Christmas Ornaments Frame */
.frame-ornaments .frame-element {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.frame-ornaments .ornament-red { fill: #c62828; }
.frame-ornaments .ornament-green { fill: #1b5e20; }
.frame-ornaments .ornament-gold { fill: #ffd700; }
.frame-ornaments .ornament-cap { fill: #9e9e9e; }
.frame-ornaments .ornament-hook { stroke: #9e9e9e; stroke-width: 1; fill: none; }

/* Christmas Lights Frame */
.frame-lights .wire {
    stroke: #2e7d32;
    stroke-width: 2;
    fill: none;
}

.frame-lights .bulb {
    filter: drop-shadow(0 0 4px currentColor);
}

.frame-lights .bulb-red { fill: #f44336; }
.frame-lights .bulb-green { fill: #4caf50; }
.frame-lights .bulb-blue { fill: #2196f3; }
.frame-lights .bulb-yellow { fill: #ffc107; }
.frame-lights .bulb-purple { fill: #9c27b0; }

/* Champagne Frame */
.frame-champagne .frame-element {
    opacity: 0.9;
}

.frame-champagne .glass {
    fill: rgba(255, 255, 255, 0.3);
    stroke: #c0c0c0;
    stroke-width: 1;
}

.frame-champagne .bubbles {
    fill: rgba(255, 215, 0, 0.6);
}

.frame-champagne .streamer {
    stroke-width: 2;
    fill: none;
}

/* Snowflakes Frame */
.frame-snowflakes .frame-element {
    fill: none;
    stroke: #90caf9;
    stroke-width: 2;
    opacity: 0.85;
}

.frame-snowflakes .frame-element:nth-child(even) {
    stroke: #b3e5fc;
    opacity: 0.7;
}

.frame-snowflakes .frame-element path {
    stroke: inherit;
}

/* ==========================================================================
   ICICLE BUTTON DECORATIONS (Winter Theme)
   ========================================================================== */

.button-icicles {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 30px;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

.icicle {
    position: absolute;
    top: -2px;
    width: 6px;
    height: var(--icicle-height, 12px);
    transform: translateX(-50%);
    background: linear-gradient(
        180deg,
        rgba(200, 230, 255, 0.95) 0%,
        rgba(180, 220, 255, 0.9) 30%,
        rgba(160, 210, 255, 0.85) 60%,
        rgba(140, 200, 255, 0.7) 100%
    );
    border-radius: 0 0 3px 3px;
    clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 30% 100%);
    box-shadow:
        0 2px 4px rgba(100, 180, 255, 0.3),
        inset 0 0 3px rgba(255, 255, 255, 0.8);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Icicle shimmer effect */
.icicle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1px;
    width: 2px;
    height: 60%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.3) 100%
    );
    border-radius: 1px;
}

/* Button shake animation on hover */
.social-login-btn:has(.button-icicles):hover {
    animation: icicle-shake 0.4s ease-in-out;
}

@keyframes icicle-shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-3px) rotate(-1deg); }
    30% { transform: translateX(3px) rotate(1deg); }
    45% { transform: translateX(-2px) rotate(-0.5deg); }
    60% { transform: translateX(2px) rotate(0.5deg); }
    75% { transform: translateX(-1px); }
    90% { transform: translateX(1px); }
}

/* Icicle drop animation - JS controlled via class */
.icicle.dropping {
    animation: icicle-drop 0.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
    animation-delay: var(--drop-delay, 0.2s);
}

/* Keep icicle hidden after drop (off screen) */
.icicle.dropped {
    transform: translateX(-50%) translateY(200px);
    opacity: 0;
}

@keyframes icicle-drop {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    20% {
        transform: translateX(-50%) translateY(5px);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(200px);
        opacity: 0;
    }
}

/* Icicles regenerate - grow from button like ice forming */
.icicle.regrowing {
    animation: icicle-regrow 1.5s ease-out forwards;
    animation-delay: var(--regrow-delay, 0.3s);
    transform-origin: top center;
}

@keyframes icicle-regrow {
    0% {
        transform: translateX(-50%) translateY(0) scaleY(0);
        opacity: 0;
    }
    15% {
        transform: translateX(-50%) translateY(0) scaleY(0.15);
        opacity: 0.5;
    }
    40% {
        transform: translateX(-50%) translateY(0) scaleY(0.4);
        opacity: 0.7;
    }
    70% {
        transform: translateX(-50%) translateY(0) scaleY(0.7);
        opacity: 0.85;
    }
    100% {
        transform: translateX(-50%) translateY(0) scaleY(1);
        opacity: 1;
    }
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .jscriptz-particles-container {
        display: none; /* Hide particles on mobile for performance */
    }

    .jscriptz-holiday-frame .frame-svg {
        width: calc(100% + 16px);
        height: calc(100% + 16px);
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .jscriptz-particle {
        animation: none;
    }

    .christmas-lights-animation,
    .valentines-pulse-animation,
    .halloween-flicker-animation {
        animation: none;
    }
}

/* ==========================================================================
   HOLIDAY THEMED BUTTON SHAPES
   ========================================================================== */

/* Base styles for themed buttons */
.jscriptz-social-login-container[data-current-holiday] .social-login-btn {
    position: relative;
    overflow: visible;
}

.jscriptz-social-login-container[data-current-holiday] .social-login-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
}

/* ==========================================================================
   HALLOWEEN - Pumpkin Shaped Buttons
   ========================================================================== */

.jscriptz-social-login-container[data-current-holiday="halloween"] .social-login-btn {
    background: linear-gradient(145deg, #ff9800 0%, #e65100 50%, #bf360c 100%);
    border-radius: 45% 45% 50% 50% / 40% 40% 60% 60%;
    border: 2px solid #e65100;
    box-shadow:
        inset 3px 3px 6px rgba(255, 255, 255, 0.2),
        inset -3px -3px 6px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Pumpkin stem */
.jscriptz-social-login-container[data-current-holiday="halloween"] .social-login-btn::before {
    width: 10px;
    height: 12px;
    background: linear-gradient(90deg, #5d4037 0%, #795548 50%, #5d4037 100%);
    border-radius: 2px 2px 0 0;
    top: -8px;
    transform: translateX(-50%);
}

/* Pumpkin ridges */
.jscriptz-social-login-container[data-current-holiday="halloween"] .social-login-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.1) 15%,
        transparent 30%
    );
    pointer-events: none;
}

/* Halloween icon fills - orange and black */
.jscriptz-social-login-container[data-current-holiday="halloween"] .social-login-btn img {
    filter: brightness(0) saturate(100%);
}

.jscriptz-social-login-container[data-current-holiday="halloween"] .social-login-btn:nth-child(odd) img {
    filter: brightness(0) saturate(100%) invert(100%);
}

/* ==========================================================================
   CHRISTMAS - Ornament Shaped Buttons
   ========================================================================== */

.jscriptz-social-login-container[data-current-holiday="christmas"] .social-login-btn {
    border-radius: 50%;
    border: none;
    box-shadow:
        inset 4px 4px 10px rgba(255, 255, 255, 0.4),
        inset -4px -4px 10px rgba(0, 0, 0, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Alternating red and green ornaments */
.jscriptz-social-login-container[data-current-holiday="christmas"] .social-login-btn:nth-child(odd) {
    background: linear-gradient(135deg, #e53935 0%, #c62828 50%, #b71c1c 100%);
}

.jscriptz-social-login-container[data-current-holiday="christmas"] .social-login-btn:nth-child(even) {
    background: linear-gradient(135deg, #43a047 0%, #2e7d32 50%, #1b5e20 100%);
}

/* Ornament cap */
.jscriptz-social-login-container[data-current-holiday="christmas"] .social-login-btn::before {
    width: 16px;
    height: 10px;
    background: linear-gradient(180deg, #ffd700 0%, #c0a000 100%);
    border-radius: 3px 3px 6px 6px;
    top: -6px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

/* Ornament hook */
.jscriptz-social-login-container[data-current-holiday="christmas"] .social-login-btn::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid #c0c0c0;
    border-bottom: none;
    border-radius: 50% 50% 0 0;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
}

/* Ornament shine */
.jscriptz-social-login-container[data-current-holiday="christmas"] .social-login-btn img {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

/* ==========================================================================
   EASTER - Egg Shaped Buttons
   ========================================================================== */

.jscriptz-social-login-container[data-current-holiday="easter"] .social-login-btn {
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        inset 2px 2px 6px rgba(255, 255, 255, 0.5),
        0 3px 6px rgba(0, 0, 0, 0.15);
}

/* Pastel color rotation */
.jscriptz-social-login-container[data-current-holiday="easter"] .social-login-btn:nth-child(6n+1) {
    background: linear-gradient(145deg, #f8bbd9 0%, #f48fb1 100%);
}
.jscriptz-social-login-container[data-current-holiday="easter"] .social-login-btn:nth-child(6n+2) {
    background: linear-gradient(145deg, #b3e5fc 0%, #81d4fa 100%);
}
.jscriptz-social-login-container[data-current-holiday="easter"] .social-login-btn:nth-child(6n+3) {
    background: linear-gradient(145deg, #c8e6c9 0%, #a5d6a7 100%);
}
.jscriptz-social-login-container[data-current-holiday="easter"] .social-login-btn:nth-child(6n+4) {
    background: linear-gradient(145deg, #fff9c4 0%, #fff59d 100%);
}
.jscriptz-social-login-container[data-current-holiday="easter"] .social-login-btn:nth-child(6n+5) {
    background: linear-gradient(145deg, #e1bee7 0%, #ce93d8 100%);
}
.jscriptz-social-login-container[data-current-holiday="easter"] .social-login-btn:nth-child(6n+6) {
    background: linear-gradient(145deg, #ffe0b2 0%, #ffcc80 100%);
}

/* Egg stripe decoration */
.jscriptz-social-login-container[data-current-holiday="easter"] .social-login-btn::after {
    content: '';
    position: absolute;
    inset: 20% 10%;
    border-top: 3px dashed rgba(255, 255, 255, 0.6);
    border-bottom: 3px dashed rgba(255, 255, 255, 0.6);
    border-radius: inherit;
    pointer-events: none;
}

/* ==========================================================================
   INDEPENDENCE DAY - Star Shaped Buttons
   ========================================================================== */

.jscriptz-social-login-container[data-current-holiday="independence"] .social-login-btn {
    clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
    );
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Red, white, blue rotation */
.jscriptz-social-login-container[data-current-holiday="independence"] .social-login-btn:nth-child(3n+1) {
    background: linear-gradient(145deg, #ef5350 0%, #c62828 100%);
}
.jscriptz-social-login-container[data-current-holiday="independence"] .social-login-btn:nth-child(3n+2) {
    background: linear-gradient(145deg, #ffffff 0%, #e0e0e0 100%);
}
.jscriptz-social-login-container[data-current-holiday="independence"] .social-login-btn:nth-child(3n+3) {
    background: linear-gradient(145deg, #42a5f5 0%, #1565c0 100%);
}

/* Adjust icon positioning for star shape */
.jscriptz-social-login-container[data-current-holiday="independence"] .social-login-btn img {
    position: relative;
    top: 5%;
}

/* ==========================================================================
   VALENTINE'S DAY - Heart Shaped Buttons
   ========================================================================== */

.jscriptz-social-login-container[data-current-holiday="valentines"] .social-login-btn {
    background: linear-gradient(145deg, #ff6b9d 0%, #e91e63 50%, #c2185b 100%);
    clip-path: path('M24,44 C8,32 0,20 0,12 C0,4 6,0 12,0 C18,0 24,8 24,8 C24,8 30,0 36,0 C42,0 48,4 48,12 C48,20 40,32 24,44 Z');
    border: none;
    box-shadow:
        inset 2px 2px 6px rgba(255, 255, 255, 0.3),
        0 4px 8px rgba(233, 30, 99, 0.4);
}

/* Heart shine */
.jscriptz-social-login-container[data-current-holiday="valentines"] .social-login-btn::before {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    top: 20%;
    left: 25%;
    transform: none;
}

/* Pink/red icon tint */
.jscriptz-social-login-container[data-current-holiday="valentines"] .social-login-btn img {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
}

/* ==========================================================================
   ST. PATRICK'S DAY - Shamrock/Clover Shaped Buttons
   ========================================================================== */

.jscriptz-social-login-container[data-current-holiday="st_patricks"] .social-login-btn {
    background: linear-gradient(145deg, #66bb6a 0%, #388e3c 50%, #1b5e20 100%);
    border-radius: 50%;
    border: 2px solid #2e7d32;
    box-shadow:
        inset 2px 2px 6px rgba(255, 255, 255, 0.2),
        0 4px 8px rgba(27, 94, 32, 0.4);
}

/* Gold coin border accent */
.jscriptz-social-login-container[data-current-holiday="st_patricks"] .social-login-btn::before {
    inset: -4px;
    border: 3px solid #ffd700;
    border-radius: 50%;
    background: none;
    width: auto;
    height: auto;
    transform: none;
    top: -4px;
    left: -4px;
}

/* Shamrock clover decoration around button */
.jscriptz-social-login-container[data-current-holiday="st_patricks"] .social-login-btn::after {
    content: '\2618';
    position: absolute;
    font-size: 0.75rem;
    color: #1b5e20;
    top: -8px;
    right: -8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   THANKSGIVING - Leaf Shaped Buttons
   ========================================================================== */

.jscriptz-social-login-container[data-current-holiday="thanksgiving"] .social-login-btn {
    border-radius: 80% 20% 80% 20% / 80% 80% 20% 20%;
    border: 2px solid rgba(139, 69, 19, 0.5);
    box-shadow:
        inset 2px 2px 6px rgba(255, 255, 255, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Autumn color rotation */
.jscriptz-social-login-container[data-current-holiday="thanksgiving"] .social-login-btn:nth-child(4n+1) {
    background: linear-gradient(145deg, #ff8a65 0%, #e64a19 100%);
}
.jscriptz-social-login-container[data-current-holiday="thanksgiving"] .social-login-btn:nth-child(4n+2) {
    background: linear-gradient(145deg, #ffc107 0%, #ff8f00 100%);
}
.jscriptz-social-login-container[data-current-holiday="thanksgiving"] .social-login-btn:nth-child(4n+3) {
    background: linear-gradient(145deg, #d84315 0%, #bf360c 100%);
}
.jscriptz-social-login-container[data-current-holiday="thanksgiving"] .social-login-btn:nth-child(4n+4) {
    background: linear-gradient(145deg, #8d6e63 0%, #5d4037 100%);
}

/* Leaf vein line */
.jscriptz-social-login-container[data-current-holiday="thanksgiving"] .social-login-btn::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 60%;
    background: rgba(139, 69, 19, 0.3);
    transform: rotate(45deg);
    top: 20%;
    left: 48%;
}

/* ==========================================================================
   NEW YEAR'S - Champagne Bubble Buttons
   ========================================================================== */

.jscriptz-social-login-container[data-current-holiday="new_years"] .social-login-btn {
    background: linear-gradient(145deg, #ffd54f 0%, #ffb300 50%, #ff8f00 100%);
    border-radius: 50%;
    border: 3px solid #ffc107;
    box-shadow:
        inset 3px 3px 8px rgba(255, 255, 255, 0.5),
        inset -2px -2px 6px rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(255, 152, 0, 0.4);
}

/* Sparkle decoration */
.jscriptz-social-login-container[data-current-holiday="new_years"] .social-login-btn::before {
    content: '\2726';
    position: absolute;
    font-size: 0.875rem;
    color: #ffd700;
    top: -10px;
    right: -10px;
    transform: none;
    width: auto;
    height: auto;
    background: none;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.8);
    animation: sparkle-twinkle 1.5s ease-in-out infinite;
}

@keyframes sparkle-twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Bubble shine */
.jscriptz-social-login-container[data-current-holiday="new_years"] .social-login-btn::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    top: 15%;
    left: 20%;
}

/* ==========================================================================
   WINTER - Snowflake Shaped Buttons
   ========================================================================== */

.jscriptz-social-login-container[data-current-holiday="winter"] .social-login-btn {
    background: linear-gradient(145deg, #e3f2fd 0%, #90caf9 50%, #64b5f6 100%);
    border-radius: 50%;
    border: 2px solid #64b5f6;
    box-shadow:
        inset 2px 2px 8px rgba(255, 255, 255, 0.6),
        0 4px 8px rgba(100, 181, 246, 0.4);
}

/* Frost crystal effect border */
.jscriptz-social-login-container[data-current-holiday="winter"] .social-login-btn::before {
    inset: -6px;
    border: 2px dashed rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    background: none;
    width: auto;
    height: auto;
    transform: none;
    top: -6px;
    left: -6px;
    animation: frost-rotate 20s linear infinite;
}

@keyframes frost-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Snowflake accent */
.jscriptz-social-login-container[data-current-holiday="winter"] .social-login-btn::after {
    content: '\2744';
    position: absolute;
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.8);
    top: -6px;
    right: -6px;
    text-shadow: 0 0 3px rgba(100, 181, 246, 0.8);
}