/**
 * Round Christmas Light Bulb Markers
 * Mobile-optimized, accessible, performant
 * Version: 1.0
 */

/* ============================================
   BASE MARKER CONTAINER
   ============================================ */

.css-round-bulb-marker {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    
    /* Expanded touch target (44x44px minimum) */
    padding: 14px;
    margin: -14px;
    
    /* Ensure padding area is clickable */
    pointer-events: auto;
    
    /* Performance optimization */
    contain: layout style paint;
}

/* ============================================
   ROUND BULB SHAPE
   ============================================ */

.css-round-bulb {
    width: 16px;
    height: 20px;
    border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
    position: relative;
    
    /* Glass-like appearance */
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
    
    /* Subtle twinkle animation */
    animation: bulb-twinkle 3s ease-in-out infinite;
    
    /* GPU acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: opacity, filter;
}

/* Metallic screw base */
.css-round-bulb::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 5px;
    background: linear-gradient(180deg, #C0C0C0, #808080);
    border-radius: 2px 2px 3px 3px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* Internal filament (visible through glass) */
.css-round-bulb::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 8px;
    background: rgba(255, 200, 100, 0.6);
    border-radius: 1px;
    opacity: 0.7;
}

/* Twinkle animation */
@keyframes bulb-twinkle {
    0%, 100% {
        opacity: 1;
        filter: brightness(1);
    }
    50% {
        opacity: 0.85;
        filter: brightness(1.15);
    }
}

/* ============================================
   COLOR VARIATIONS
   ============================================ */

/* Red - Classic Christmas */
.css-round-bulb-red {
    background-color: #DC143C;
    background-image: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.4),
        #DC143C 40%,
        #8B0000
    );
    box-shadow: 
        0 0 8px rgba(220, 20, 60, 0.8),
        0 0 15px rgba(220, 20, 60, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        inset 2px 2px 4px rgba(255, 255, 255, 0.3);
}

/* Green - Christmas Tree */
.css-round-bulb-green {
    background-color: #228B22;
    background-image: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.4),
        #228B22 40%,
        #006400
    );
    box-shadow: 
        0 0 8px rgba(34, 139, 34, 0.8),
        0 0 15px rgba(34, 139, 34, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        inset 2px 2px 4px rgba(255, 255, 255, 0.3);
}

/* Blue - Winter Ice */
.css-round-bulb-blue {
    background-color: #4169E1;
    background-image: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.4),
        #4169E1 40%,
        #0000CD
    );
    box-shadow: 
        0 0 8px rgba(65, 105, 225, 0.8),
        0 0 15px rgba(65, 105, 225, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        inset 2px 2px 4px rgba(255, 255, 255, 0.3);
}

/* Gold - Festive Elegance */
.css-round-bulb-gold {
    background-color: #FFD700;
    background-image: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.5),
        #FFD700 40%,
        #DAA520
    );
    box-shadow: 
        0 0 8px rgba(255, 215, 0, 0.9),
        0 0 15px rgba(255, 215, 0, 0.6),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        inset 2px 2px 4px rgba(255, 255, 255, 0.4);
}

/* Purple - Royal Holiday */
.css-round-bulb-purple {
    background-color: #9370DB;
    background-image: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.4),
        #9370DB 40%,
        #4B0082
    );
    box-shadow: 
        0 0 8px rgba(147, 112, 219, 0.8),
        0 0 15px rgba(147, 112, 219, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        inset 2px 2px 4px rgba(255, 255, 255, 0.3);
}

/* White - Snow & Ice */
.css-round-bulb-white {
    background-color: #F0F8FF;
    background-image: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9),
        #F0F8FF 40%,
        #E0E0E0
    );
    box-shadow: 
        0 0 8px rgba(240, 248, 255, 0.9),
        0 0 15px rgba(240, 248, 255, 0.6),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        inset 2px 2px 4px rgba(255, 255, 255, 0.5);
}

/* Orange - Warm Glow */
.css-round-bulb-orange {
    background-color: #FF8C00;
    background-image: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.4),
        #FF8C00 40%,
        #FF4500
    );
    box-shadow: 
        0 0 8px rgba(255, 140, 0, 0.8),
        0 0 15px rgba(255, 140, 0, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        inset 2px 2px 4px rgba(255, 255, 255, 0.3);
}

/* ============================================
   BEST OF MARKER (Ornament Style)
   ============================================ */

.css-round-bulb-bestof {
    width: 24px;
    height: 28px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.5),
        #FFD700 30%,
        #FFA500
    );
    border-radius: 50%;
    position: relative;
    animation: bestof-sparkle 2s ease-in-out infinite;
    box-shadow: 
        0 0 12px rgba(255, 215, 0, 0.9),
        0 0 24px rgba(255, 215, 0, 0.6),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3),
        inset 3px 3px 6px rgba(255, 255, 255, 0.4);
}

/* Star icon for Best Of */
.css-round-bulb-bestof::before {
    content: '★';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: white;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

/* Ornament cap (instead of screw base) */
.css-round-bulb-bestof::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 4px;
    background: linear-gradient(180deg, #C0C0C0, #808080);
    border-radius: 2px 2px 0 0;
}

/* Best Of sparkle animation */
@keyframes bestof-sparkle {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
    25% { 
        transform: scale(1.05) rotate(5deg);
        filter: brightness(1.2);
    }
    50% { 
        transform: scale(1.1) rotate(0deg);
        filter: brightness(1.3);
    }
    75% { 
        transform: scale(1.05) rotate(-5deg);
        filter: brightness(1.2);
    }
}

/* ============================================
   ZOOM-RESPONSIVE SCALING
   ============================================ */

/* Street view (zoom 16+) - Larger markers */
.leaflet-zoom-animated[data-zoom="16"] .css-round-bulb,
.leaflet-zoom-animated[data-zoom="17"] .css-round-bulb,
.leaflet-zoom-animated[data-zoom="18"] .css-round-bulb {
    transform: scale(1.5);
    transform-origin: center bottom;
}

/* Neighborhood view (zoom 12-15) - Normal size */
.leaflet-zoom-animated[data-zoom="12"] .css-round-bulb,
.leaflet-zoom-animated[data-zoom="13"] .css-round-bulb,
.leaflet-zoom-animated[data-zoom="14"] .css-round-bulb,
.leaflet-zoom-animated[data-zoom="15"] .css-round-bulb {
    transform: scale(1);
}

/* City view (zoom <12) - Smaller markers */
.leaflet-zoom-animated[data-zoom="10"] .css-round-bulb,
.leaflet-zoom-animated[data-zoom="11"] .css-round-bulb {
    transform: scale(0.8);
    transform-origin: center bottom;
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Slightly larger on mobile for easier tapping */
    .css-round-bulb {
        width: 18px;
        height: 22px;
    }
    
    /* Larger touch padding */
    .css-round-bulb-marker {
        padding: 16px;
        margin: -16px;
    }
    
    /* Reduce animation complexity on mobile */
    .css-round-bulb {
        animation-duration: 4s;
    }
    
    /* Simpler shadows on mobile for performance */
    .css-round-bulb-red,
    .css-round-bulb-green,
    .css-round-bulb-blue,
    .css-round-bulb-gold,
    .css-round-bulb-purple,
    .css-round-bulb-white,
    .css-round-bulb-orange {
        box-shadow: 
            0 0 8px currentColor,
            inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* High contrast mode */
@media (prefers-contrast: high) {
    .css-round-bulb {
        border: 2px solid currentColor;
    }
    
    .css-round-bulb::before {
        border: 1px solid currentColor;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .css-round-bulb,
    .css-round-bulb-bestof {
        animation: none;
    }
}

/* Focus state for keyboard navigation */
.css-round-bulb-marker:focus-within .css-round-bulb {
    outline: 3px solid #2e7d32;
    outline-offset: 4px;
    border-radius: 50%;
}

/* ============================================
   HOVER STATES (Desktop)
   ============================================ */

@media (hover: hover) and (pointer: fine) {
    .css-round-bulb-marker:hover .css-round-bulb {
        transform: scale(1.1);
        filter: brightness(1.2);
        transition: transform 0.2s ease, filter 0.2s ease;
    }
}