/**
 * CounterTime Public Styles
 *
 * Base styles for the countdown timer. Dynamic styles are generated
 * from PHP settings and injected inline.
 */

/* Container */
.countertime-container {
    box-sizing: border-box;
    margin: 0 auto;
    text-align: center;
}

.countertime-container * {
    box-sizing: border-box;
}

/* Title */
.countertime-title {
    margin: 0 0 16px;
    line-height: 1.3;
}

/* Description */
.countertime-description {
    margin: 0 0 24px;
    line-height: 1.6;
}

/* Counter wrapper */
.countertime-countdown {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Counter box */
.countertime-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Number */
.countertime-number {
    line-height: 1;
    position: relative;
}

/* Label */
.countertime-label {
    margin-top: 8px;
}

/* Bottom text */
.countertime-bottom-text {
    margin: 24px 0 0;
    line-height: 1.6;
}

/* CTA Button */
.countertime-cta {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 24px;
}

.countertime-cta:hover {
    transform: translateY(-2px);
}

.countertime-cta:active {
    transform: translateY(0);
}

/* Expiration message */
.countertime-expired-message {
    padding: 20px;
}

/* Hidden state */
.countertime-hidden {
    display: none !important;
}

/* Shape: Rectangle */
.countertime-shape-rectangle .countertime-box {
    border-radius: 0 !important;
    clip-path: none !important;
}

/* Shape: Rounded Rectangle (default) */
.countertime-shape-rounded-rectangle .countertime-box {
    clip-path: none !important;
    /* Border radius set via inline styles */
}

/* Shape: Circle - Equal width/height enforced via aspect-ratio */
.countertime-shape-circle .countertime-box {
    border-radius: 50% !important;
    clip-path: none !important;
    aspect-ratio: 1 / 1 !important;
}

/* Shape: Oval - Horizontal ellipse */
.countertime-shape-oval .countertime-box {
    border-radius: 50% !important;
    clip-path: none !important;
    aspect-ratio: 1.4 / 1 !important;
}

/* Shape: Hexagon - 6-sided polygon */
.countertime-shape-hexagon .countertime-box {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    border-radius: 0 !important;
}

/* Shape: Heart - using polygon for better compatibility */
.countertime-shape-heart .countertime-box {
    clip-path: polygon(50% 15%, 65% 0%, 85% 0%, 100% 15%, 100% 40%, 50% 100%, 0% 40%, 0% 15%, 15% 0%, 35% 0%);
    border-radius: 0 !important;
}

/* Shape: Star */
.countertime-shape-star .countertime-box {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    border-radius: 0 !important;
}

/* Shape: Cloud - Organic cloud shape with bumpy edges */
.countertime-shape-cloud .countertime-box {
    clip-path: polygon(15% 75%, 5% 60%, 0% 45%, 5% 30%, 15% 20%, 25% 10%, 40% 5%, 55% 5%, 70% 10%, 80% 18%, 90% 30%, 95% 45%, 95% 60%, 90% 75%, 80% 85%, 65% 92%, 50% 95%, 35% 92%, 20% 85%);
    border-radius: 0 !important;
}

/* Animation: Flip */
.countertime-animation-flip .countertime-number {
    perspective: 300px;
}

.countertime-animation-flip .countertime-number .digit {
    display: inline-block;
    position: relative;
}

.countertime-animation-flip .countertime-number .digit.flipping {
    animation: flipAnimation 0.6s ease-in-out;
}

@keyframes flipAnimation {
    0% {
        transform: rotateX(0deg);
    }
    50% {
        transform: rotateX(-90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

/* Animation: Slide */
.countertime-animation-slide .countertime-number {
    overflow: hidden;
    position: relative;
}

.countertime-animation-slide .countertime-number .digit {
    display: inline-block;
    position: relative;
}

.countertime-animation-slide .countertime-number .digit.sliding {
    animation: slideAnimation 0.4s ease-out;
}

@keyframes slideAnimation {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Animation: None */
.countertime-animation-none .countertime-number .digit {
    transition: none;
}

/* Responsive */
@media (max-width: 600px) {
    .countertime-countdown {
        gap: 8px !important;
    }

    .countertime-box {
        width: 70px !important;
        height: 70px !important;
    }

    .countertime-number {
        font-size: 28px !important;
    }

    .countertime-label {
        font-size: 10px !important;
    }
}

@media (max-width: 400px) {
    .countertime-box {
        width: 60px !important;
        height: 60px !important;
    }

    .countertime-number {
        font-size: 24px !important;
    }
}