/* ================================
   General - all countdowns
   ================================= */
.suredrop-countdown {
    display: flex;
    flex-wrap: wrap;           /* allow units to wrap in small containers */
    justify-content: center;
    gap: 2rem;
    max-width: 100%;
    box-sizing: border-box;
    max-width: 600px;
    margin: 20px auto; /* center on page */
}

.suredrop-countdown .unit {
    flex: 1 1 auto;            /* allow shrinking */
    min-width: 50px;           /* prevent collapsing too much */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.suredrop-countdown .unit.label-right {
    flex-direction: row !important;   /* horizontal layout */
    align-items: flex-start !important;
    gap: 0.2rem !important;
}

.suredrop-countdown .unit.label-right .label {
    margin-top: 0 !important;
    margin-left: 0.4rem !important;
}

/* ================================
   Classic Style
   ================================= */
.suredrop-countdown.classic {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.suredrop-countdown.classic.dark {
    color: var(--suredrop-countdown-dark-foreground);
}

.suredrop-countdown.classic.light {
    color: var(--suredrop-countdown-light-foreground);
}

.suredrop-countdown.classic .digits {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: bold;
    line-height: 1;
}

.suredrop-countdown.classic .label {
    font-size: clamp(0.8rem, 2vw, 1rem);
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.suredrop-countdown.classic .colon {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: bold;
    margin: 0 0.5rem;
}

/* ================================
   Minimal Style
   ================================= */
.suredrop-countdown.minimal {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: inherit;
    font-size: 1rem;
}

.suredrop-countdown.minimal.dark {
    color: var(--suredrop-countdown-dark-foreground);
}

.suredrop-countdown.minimal.light {
    color: var(--suredrop-countdown-light-foreground);
}

.suredrop-countdown.minimal .unit {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

.suredrop-countdown.minimal .digits {
    font-size: clamp(0.9rem, 4vw, 1rem);
    font-weight: normal;
}

.suredrop-countdown.minimal .label {
    font-size: clamp(0.6rem, 2vw, 0.75rem);
    margin-left: 0.2rem;
    text-transform: none;
}

.suredrop-countdown.minimal .colon {
    font-size: clamp(0.9rem, 4vw, 1rem);
    font-weight: normal;
    margin: 0 0.2rem;
    vertical-align: baseline;
}

/* ================================
   Boxed Style
   ================================= */
.suredrop-countdown.boxed {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.suredrop-countdown.boxed.dark .digits,
.suredrop-countdown.boxed.dark .colon {
    color: var(--suredrop-countdown-dark-foreground);
}

.suredrop-countdown.boxed.dark .unit {
    background: var(--suredrop-countdown-dark-background);
}

.suredrop-countdown.boxed.light .digits,
.suredrop-countdown.boxed.light .colon {
    color: var(--suredrop-countdown-light-foreground);
}

.suredrop-countdown.boxed.light .unit {
    background: var(--suredrop-countdown-light-background);
}

.suredrop-countdown.boxed .unit {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    opacity: 0.8;
    flex-direction: column;
    align-items: center;
}

.suredrop-countdown.boxed .digits {
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: bold;
}

.suredrop-countdown.boxed .label {
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    margin-top: 0.2rem;
    text-transform: uppercase;
    color: var(--suredrop-countdown-accent-color);
}

.suredrop-countdown.boxed .colon {
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: bold;
    margin: 0 0.5rem;
}

/* ================================
   Neon Glow Style
   ================================= */
.suredrop-countdown.neon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    color: var(--suredrop-countdown-accent-color);
    text-shadow: 0 0 2px var(--suredrop-countdown-accent-color),
                 0 0 4px var(--suredrop-countdown-accent-color),
                 0 0 8px var(--suredrop-countdown-accent-color);
    font-family: 'Courier New', monospace;
    opacity: 0.9;
}

.suredrop-countdown.neon .unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.suredrop-countdown.neon .digits {
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: bold;
    opacity: 0.95;
}

.suredrop-countdown.neon .label {
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    margin-top: 0.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.suredrop-countdown.neon .colon {
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: bold;
    margin: 0 0.5rem;
    margin-top: -1.5rem;
}

/* ================================
   Large Centered Style
   ================================= */
.suredrop-countdown.large-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    color: #ffffff;
}

.suredrop-countdown.large-centered .unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.suredrop-countdown.large-centered .digits {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 900;
}

.suredrop-countdown.large-centered .label {
    font-size: clamp(0.9rem, 3vw, 1.2rem);
    margin-top: 0.1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.suredrop-countdown.large-centered .colon {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 900;
    margin: 0 0.75rem;
    margin-top: -2rem;
}

/* ================================
   Countdown Final Message
   ================================= */
.suredrop-countdown-final-message {
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: bold;
    text-align: center;
    color: var(--suredrop-countdown-accent-color);
    margin-top: 0.5rem;
}

/* ================================
   Small Container / Mobile Adjustments
   ================================= */
.suredrop-countdown {
    /* automatically wrap and shrink digits to fit container */
    flex-wrap: wrap;
}

.suredrop-countdown .unit {
    min-width: 3rem; /* prevent collapse */
    text-align: center;
}

.suredrop-countdown .colon {
    transition: opacity 0.3s;
}

@media (max-width: 480px) {


    .suredrop-countdown .unit {
        flex-direction: column;
        align-items: center;
    }

    .suredrop-countdown .colon {
        display: none; /* hide colons on small screens */
    }
}

/* Optional: container queries (modern browsers) */
@container (max-width: 250px) {
    .suredrop-countdown {
        flex-direction: column;
        gap: 0.3rem;
    }
    .suredrop-countdown .unit {
        flex-direction: column;
        align-items: center;
    }
    .suredrop-countdown .colon {
        display: none;
    }
    .suredrop-countdown .digits {
        font-size: clamp(1rem, 8vw, 2rem);
    }
    .suredrop-countdown .label {
        font-size: clamp(0.6rem, 4vw, 0.8rem);
    }
}


/* ================================ Countdown Entry Animation - Flip Up ================================= */
.suredrop-countdown.flip-up.animate {
    perspective: 600px; /* required for 3D rotation */
}

.suredrop-countdown.flip-up.animate .unit {
    opacity: 0;
    transform: rotateX(90deg);
    transform-origin: bottom center;
    animation: unit-flip-up 0.6s forwards ease-out;
}

@keyframes unit-flip-up {
    0% {
        opacity: 0;
        transform: rotateX(90deg);
    }
    100% {
        opacity: 1;
        transform: rotateX(0deg);
    }
}

/* ================================ Countdown Entry Animation - Slide Up ================================= */
.suredrop-countdown.slide-up.animate .unit {
    opacity: 0;
    transform: translateY(20px);
    animation: unit-slide-up 0.5s forwards ease-out;
}

@keyframes unit-slide-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================ Countdown Entry Animation - Fade In ================================= */
.suredrop-countdown.fade-in.animate .unit {
    opacity: 0;
    animation: unit-fade-in 0.6s forwards ease-out;
}

@keyframes unit-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ================================ Countdown Entry Animation - Pop ================================= */
.suredrop-countdown.pop.animate .unit {
    transform: scale(0.5);
    animation: unit-pop 0.5s forwards cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes unit-pop {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    60% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 1; /* <-- keep visible */
        transform: scale(1);
    }
}

/* ================================ Countdown Entry Animation - Rotate ================================= */
.suredrop-countdown.rotate-in.animate .unit {
    opacity: 0;
    transform: rotateY(-90deg);
    transform-origin: left center;
    animation: unit-rotate-in 0.6s forwards ease-out;
}

@keyframes unit-rotate-in {
    0% {
        opacity: 0;
        transform: rotateY(-90deg);
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg);
    }
}

/* ================================ Colons Animation ================================= */
/* Fade in colons for all countdown animations */
.suredrop-countdown.animate .colon {
    opacity: 0;
    animation: colon-fade-in 0.5s forwards ease-out;
}

@keyframes colon-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ================================ Live Message ================================= */
.suredrop-countdown-final-message {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    color: var(--suredrop-countdown-accent-color);
    margin-top: 0.5rem;
}