.fp-edtech-bootcamp-event-countdown-timer-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    --fp-primary-color: #f0f4f8;      
    --fp-secondary-color: #e2e8f0;    
    --fp-muted-color: #475569;        
    --fp-soft-color: #cbd5e1;         
    --fp-background-color: transparent;

    --fp-info-color: #64748b;         
    --fp-warning-color: #38bdf8;      
    --fp-danger-color: #0284c7;       
    --fp-accent-color: #1e40af;       

    --fp-nm-light: rgba(255, 255, 255, 0.9);
    --fp-nm-dark: rgba(163, 177, 198, 0.5);

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--fp-muted-color);
    background-color: var(--fp-background-color);
    box-sizing: border-box;
}

.fp-edtech-bootcamp-event-countdown-timer-ui-stage {
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background: var(--fp-primary-color);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 24px;
    box-shadow: inset 6px 6px 12px var(--fp-nm-dark), inset -6px -6px 12px var(--fp-nm-light);
}

.fp-edtech-bootcamp-event-countdown-timer-ui-metronome-wrap {
    position: absolute;
    top: -20px;
    left: 50%;
    width: 4px;
    height: 180px;
    z-index: 5;
    transform-origin: top center;
    animation: fp-edtech-bootcamp-event-countdown-timer-ui-swing 1.5s ease-in-out infinite alternate;
}

.fp-edtech-bootcamp-event-countdown-timer-ui-metronome-arm {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--fp-secondary-color);
    box-shadow: inset 1px 1px 2px var(--fp-nm-dark), inset -1px -1px 2px var(--fp-nm-light);
    border-radius: 2px;
}

.fp-edtech-bootcamp-event-countdown-timer-ui-metronome-weight {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    background: var(--fp-primary-color);
    border-radius: 50%;
    border: 3px solid var(--fp-warning-color);
    box-shadow: 4px 4px 8px var(--fp-nm-dark), -4px -4px 8px var(--fp-nm-light);
    transition: border-color 0.3s ease;
}

.fp-edtech-bootcamp-event-countdown-timer-ui-ticket {
    position: relative;
    z-index: 10;
    width: 80%;
    max-width: 380px;
    background: var(--fp-primary-color);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 12px 12px 24px var(--fp-nm-dark), -12px -12px 24px var(--fp-nm-light);
    animation: fp-edtech-bootcamp-event-countdown-timer-ui-breathe 6s ease-in-out infinite;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.fp-edtech-bootcamp-event-countdown-timer-ui-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fp-edtech-bootcamp-event-countdown-timer-ui-title {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--fp-muted-color);
}

.fp-edtech-bootcamp-event-countdown-timer-ui-badge {
    font-size: 0.65rem;
    font-weight: 800;
    background: var(--fp-primary-color);
    color: var(--fp-info-color);
    padding: 6px 12px;
    border-radius: 12px;
    letter-spacing: 0.15em;
    box-shadow: inset 3px 3px 6px var(--fp-nm-dark), inset -3px -3px 6px var(--fp-nm-light);
    transition: all 0.3s ease;
}

.fp-edtech-bootcamp-event-countdown-timer-ui-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.fp-edtech-bootcamp-event-countdown-timer-ui-box {
    background: var(--fp-primary-color);
    border-radius: 16px;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: inset 5px 5px 10px var(--fp-nm-dark), inset -5px -5px 10px var(--fp-nm-light);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fp-edtech-bootcamp-event-countdown-timer-ui-val {
    font-family: ui-monospace, "SFMono-Regular", monospace;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--fp-muted-color);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
}

.fp-edtech-bootcamp-event-countdown-timer-ui-lbl {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--fp-info-color);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.fp-edtech-bootcamp-event-countdown-timer-ui-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 2px solid var(--fp-secondary-color);
}

.fp-edtech-bootcamp-event-countdown-timer-ui-seats {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fp-info-color);
}

.fp-edtech-bootcamp-event-countdown-timer-ui-seats-val {
    font-weight: 800;
    color: var(--fp-muted-color);
    transition: color 0.3s ease;
}

.fp-edtech-bootcamp-event-countdown-timer-ui-pulse {
    width: 12px;
    height: 12px;
    background: var(--fp-secondary-color);
    border-radius: 50%;
    box-shadow: inset 2px 2px 4px var(--fp-nm-dark), inset -2px -2px 4px var(--fp-nm-light);
    transition: all 0.3s ease;
}

.fp-edtech-bootcamp-event-countdown-timer-ui.fp-is-claiming .fp-edtech-bootcamp-event-countdown-timer-ui-ticket {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 12px 12px 30px rgba(30, 64, 175, 0.15), -12px -12px 30px var(--fp-nm-light);
    animation: none; 
}

.fp-edtech-bootcamp-event-countdown-timer-ui.fp-is-claiming .fp-edtech-bootcamp-event-countdown-timer-ui-badge {
    background: var(--fp-accent-color);
    color: var(--fp-primary-color);
    box-shadow: 3px 3px 8px var(--fp-nm-dark), -3px -3px 8px var(--fp-nm-light);
}

.fp-edtech-bootcamp-event-countdown-timer-ui.fp-is-claiming .fp-edtech-bootcamp-event-countdown-timer-ui-pulse {
    background: var(--fp-accent-color);
    box-shadow: 0 0 15px var(--fp-accent-color);
}

.fp-edtech-bootcamp-event-countdown-timer-ui.fp-is-claiming .fp-edtech-bootcamp-event-countdown-timer-ui-seats-val {
    color: var(--fp-accent-color);
    transform: scale(1.1);
    display: inline-block;
}

.fp-edtech-bootcamp-event-countdown-timer-ui.fp-is-claiming .fp-edtech-bootcamp-event-countdown-timer-ui-metronome-weight {
    border-color: var(--fp-accent-color);
    background: var(--fp-warning-color);
}

.fp-edtech-bootcamp-event-countdown-timer-ui-box.fp-tick {
    transform: scale(0.95);
    box-shadow: inset 8px 8px 16px var(--fp-nm-dark), inset -8px -8px 16px var(--fp-nm-light);
}

.fp-edtech-bootcamp-event-countdown-timer-ui-box.fp-tick .fp-edtech-bootcamp-event-countdown-timer-ui-val {
    color: var(--fp-warning-color);
}

@keyframes fp-edtech-bootcamp-event-countdown-timer-ui-breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes fp-edtech-bootcamp-event-countdown-timer-ui-swing {
    0% { transform: rotate(18deg); }
    100% { transform: rotate(-18deg); }
}

@media (max-width: 480px) {
    .fp-edtech-bootcamp-event-countdown-timer-ui-stage { border-radius: 16px; padding: 12px; }
    .fp-edtech-bootcamp-event-countdown-timer-ui-ticket { width: 100%; padding: 20px; gap: 20px;}
    .fp-edtech-bootcamp-event-countdown-timer-ui-grid { gap: 8px; }
    .fp-edtech-bootcamp-event-countdown-timer-ui-box { padding: 12px 4px; }
    .fp-edtech-bootcamp-event-countdown-timer-ui-val { font-size: 1.4rem; }
    .fp-edtech-bootcamp-event-countdown-timer-ui-title { font-size: 0.8rem; }
    .fp-edtech-bootcamp-event-countdown-timer-ui-metronome-wrap { height: 140px; }
}

document.querySelectorAll('.fp-edtech-bootcamp-event-countdown-timer-ui').forEach(root => {
    const dEl = root.querySelector('#fp-edtech-bootcamp-event-countdown-timer-ui-d');
    const hEl = root.querySelector('#fp-edtech-bootcamp-event-countdown-timer-ui-h');
    const mEl = root.querySelector('#fp-edtech-bootcamp-event-countdown-timer-ui-m');
    const sEl = root.querySelector('#fp-edtech-bootcamp-event-countdown-timer-ui-s');
    const secBox = root.querySelector('#fp-edtech-bootcamp-event-countdown-timer-ui-sec-box');
    const seatsEl = root.querySelector('#fp-edtech-bootcamp-event-countdown-timer-ui-seats-count');
    const statusEl = root.querySelector('#fp-edtech-bootcamp-event-countdown-timer-ui-status');

    let targetDate = new Date().getTime() + (14 * 24 * 60 * 60 * 1000) + (8 * 60 * 60 * 1000) + (45 * 60 * 1000);
    
    let lastSec = -1;
    let seats = 1204;
    
    let phase = 'idle'; 
    let timer = 0;
    let lastTime = performance.now();
    let animationFrameId;

    function formatTime(val) {
        return val < 10 ? `0${val}` : val;
    }

    function fp_edtech_bootcamp_event_countdown_timer_ui_loop(time) {
        if (document.visibilityState === "hidden") {
            lastTime = time;
            animationFrameId = requestAnimationFrame(fp_edtech_bootcamp_event_countdown_timer_ui_loop);
            return;
        }

        let dt = time - lastTime;
        lastTime = time;
        timer += dt;

        let now = new Date().getTime();
        let distance = targetDate - now;

        if (distance > 0) {
            let days = Math.floor(distance / (1000 * 60 * 60 * 24));
            let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            let seconds = Math.floor((distance % (1000 * 60)) / 1000);

            if (seconds !== lastSec) {
                lastSec = seconds;
                if (dEl) dEl.textContent = formatTime(days);
                if (hEl) hEl.textContent = formatTime(hours);
                if (mEl) mEl.textContent = formatTime(minutes);
                if (sEl) sEl.textContent = formatTime(seconds);

                if (secBox) {
                    secBox.classList.add('fp-tick');
                    setTimeout(() => {
                        if (secBox) secBox.classList.remove('fp-tick');
                    }, 150);
                }
            }
        }

        if (phase === 'idle') {
            if (timer > (4000 + Math.random() * 4000)) {
                phase = 'claiming';
                timer = 0;
                
                root.classList.add('fp-is-claiming');
                if (statusEl) statusEl.textContent = "NEW STUDENT";
                
                seats += Math.floor(1 + Math.random() * 3);
                if (seatsEl) seatsEl.textContent = seats.toLocaleString('en-US');
            }
        } 
        else if (phase === 'claiming') {
            if (timer > 1200) {
                phase = 'idle';
                timer = 0;
                
                root.classList.remove('fp-is-claiming');
                if (statusEl) statusEl.textContent = "ENROLLING";
            }
        }

        animationFrameId = requestAnimationFrame(fp_edtech_bootcamp_event_countdown_timer_ui_loop);
    }

    animationFrameId = requestAnimationFrame(fp_edtech_bootcamp_event_countdown_timer_ui_loop);

    const observer = new MutationObserver(() => {
        if (!document.body.contains(root)) {
            cancelAnimationFrame(animationFrameId);
            observer.disconnect();
        }
    });
    observer.observe(document.body, { childList: true, subtree: true });
});