/**
 * EASY VOTE - Real-time Event Countdown Styles
 * Modern, clean, responsive countdown timer with status badges & glowing digit boxes.
 */

.ev-countdown-widget {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(226, 232, 240, 0.8);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

/* Dark variant (e.g. inside dark hero or banner) */
.ev-countdown-widget-dark {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    color: #ffffff;
}

/* Compact variant for event cards */
.ev-countdown-widget-compact {
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
}

/* Header status */
.ev-countdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ev-countdown-label {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
}

.ev-countdown-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
    animation: evPulseDot 1.8s infinite;
}

@keyframes evPulseDot {
    0% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.7; }
}

/* Digit Boxes Container */
.ev-countdown-boxes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.ev-countdown-widget-compact .ev-countdown-boxes {
    gap: 0.35rem;
}

/* Single Box */
.ev-countdown-box {
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid rgba(203, 213, 225, 0.8);
    border-radius: 10px;
    min-width: 52px;
    padding: 0.35rem 0.25rem 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}

.ev-countdown-widget-dark .ev-countdown-box {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.ev-countdown-widget-compact .ev-countdown-box {
    min-width: 42px;
    padding: 0.25rem 0.15rem 0.15rem;
    border-radius: 8px;
}

/* Digits */
.ev-countdown-digit {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ev-countdown-widget-dark .ev-countdown-digit {
    color: #f8fafc;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.ev-countdown-widget-compact .ev-countdown-digit {
    font-size: 1.05rem;
}

/* Units (HARI, JAM, MENIT, DETIK) */
.ev-countdown-unit {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #64748b;
    margin-top: 2px;
}

.ev-countdown-widget-dark .ev-countdown-unit {
    color: #94a3b8;
}

.ev-countdown-widget-compact .ev-countdown-unit {
    font-size: 0.52rem;
    letter-spacing: 0.4px;
}

/* Separator Colon */
.ev-countdown-sep {
    font-size: 1.25rem;
    font-weight: 800;
    color: #94a3b8;
    margin-top: -8px;
}

.ev-countdown-widget-dark .ev-countdown-sep {
    color: rgba(255, 255, 255, 0.4);
}

.ev-countdown-widget-compact .ev-countdown-sep {
    font-size: 0.95rem;
    margin-top: -6px;
}

/* State Specific Color Highlights */
.ev-countdown-state-upcoming .ev-countdown-digit {
    color: #b45309;
}
.ev-countdown-widget-dark.ev-countdown-state-upcoming .ev-countdown-digit {
    color: #fbbf24;
}

.ev-countdown-state-active .ev-countdown-digit {
    color: #15803d;
}
.ev-countdown-widget-dark.ev-countdown-state-active .ev-countdown-digit {
    color: #4ade80;
}

.ev-countdown-state-closed .ev-countdown-digit {
    color: #64748b;
}

/* =========================================
   MOBILE COUNTDOWN - RAPI & CENTER
   ========================================= */
@media (max-width: 575.98px) {

    .ev-countdown-widget {
        width: 100%;
        padding: 0.75rem 0.65rem;
        text-align: center;
    }

    /* Header status */
    .ev-countdown-header {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 4px;
        margin-bottom: 8px;
    }

    /* Badge VOTING SEDANG BERLANGSUNG */
    .ev-countdown-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 auto;
    }

    /* Titik hijau */
    .ev-countdown-dot {
        flex-shrink: 0;
    }

    /* Tulisan status */
    .ev-countdown-status-text {
        text-align: center;
        line-height: 1.2;
    }

    /* Sisa Waktu Pemilihan */
    .ev-countdown-subtext {
        display: block;
        width: 100%;
        text-align: center !important;
        margin: 0 auto 8px;
        line-height: 1.2;
    }

    /* Container angka */
    .ev-countdown-boxes {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin: 0 auto;
    }

    /* Kotak waktu */
    .ev-countdown-box {
        min-width: 0;
        width: 100%;
        max-width: 52px;
        flex: 1 1 0;
        padding: 0.3rem 0.15rem 0.2rem;
        border-radius: 8px;
    }

    /* Angka */
    .ev-countdown-digit {
        font-size: 1.05rem;
        line-height: 1;
    }

    /* HARI / JAM / MENIT / DETIK */
    .ev-countdown-unit {
        font-size: 0.48rem;
        letter-spacing: 0.25px;
        white-space: nowrap;
    }

    /* Titik / pemisah */
    .ev-countdown-sep {
        flex: 0 0 auto;
        font-size: 0.85rem;
        margin-top: -5px;
    }
}

/* =========================================
   MOBILE EXTRA SMALL
   ========================================= */
@media (max-width: 380px) {

    .ev-countdown-widget {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }

    .ev-countdown-boxes {
        gap: 3px;
    }

    .ev-countdown-box {
        max-width: 48px;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
    }

    .ev-countdown-digit {
        font-size: 0.95rem;
    }

    .ev-countdown-unit {
        font-size: 0.43rem;
        letter-spacing: 0.15px;
    }

    .ev-countdown-sep {
        font-size: 0.75rem;
    }

    .ev-countdown-status-text {
        font-size: 0.68rem;
    }

    .ev-countdown-subtext {
        font-size: 0.65rem !important;
    }
}

/* =========================================================
   EASY VOTE - COUNTDOWN CARD MOBILE FINAL
   CENTER + FIT + RAPI
   ========================================================= */

@media (max-width: 575.98px) {

    /* Container utama countdown */
    .ev-countdown-widget.ev-countdown-widget-compact {
        width: 100% !important;
        padding: 0.65rem 0.5rem !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* ==============================
       HEADER STATUS
       ============================== */

    .ev-countdown-widget.ev-countdown-widget-compact
    .ev-countdown-header {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 5px !important;
        margin-bottom: 8px !important;
    }

    /* Badge VOTING SEDANG BERLANGSUNG */
    .ev-countdown-widget.ev-countdown-widget-compact
    .ev-countdown-label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        white-space: normal !important;
    }

    /* Tulisan status */
    .ev-countdown-widget.ev-countdown-widget-compact
    .ev-countdown-status-text {
        display: inline-block !important;
        text-align: center !important;
        line-height: 1.15 !important;
        font-size: 0.68rem !important;
    }

    /* ==============================
       SUBTEXT
       ============================== */

    .ev-countdown-widget.ev-countdown-widget-compact
    .ev-countdown-subtext {
        display: block !important;
        width: 100% !important;
        margin: 0 auto 9px !important;
        text-align: center !important;
        font-size: 0.68rem !important;
        line-height: 1.2 !important;
    }

    /* ==============================
       COUNTDOWN BOXES
       ============================== */

    .ev-countdown-widget.ev-countdown-widget-compact
    .ev-countdown-boxes {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* ==============================
       SETIAP KOTAK
       ============================== */

    .ev-countdown-widget.ev-countdown-widget-compact
    .ev-countdown-box {
        min-width: 0 !important;
        width: 48px !important;
        max-width: 48px !important;
        flex: 0 1 48px !important;

        padding: 0.3rem 0.15rem 0.22rem !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* ==============================
       ANGKA
       ============================== */

    .ev-countdown-widget.ev-countdown-widget-compact
    .ev-countdown-digit {
        display: block !important;
        width: 100% !important;
        font-size: 1.02rem !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    /* ==============================
       HARI / JAM / MENIT / DETIK
       ============================== */

    .ev-countdown-widget.ev-countdown-widget-compact
    .ev-countdown-unit {
        display: block !important;
        width: 100% !important;
        margin-top: 3px !important;
        font-size: 0.47rem !important;
        line-height: 1 !important;
        letter-spacing: 0.2px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* ==============================
       PEMISAH
       ============================== */

    .ev-countdown-widget.ev-countdown-widget-compact
    .ev-countdown-sep {
        flex: 0 0 auto !important;
        margin-top: -5px !important;
        font-size: 0.8rem !important;
        line-height: 1 !important;
    }
}


/* =========================================================
   LAYAR SANGAT KECIL
   ========================================================= */

@media (max-width: 380px) {

    .ev-countdown-widget.ev-countdown-widget-compact {
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }

    .ev-countdown-widget.ev-countdown-widget-compact
    .ev-countdown-boxes {
        gap: 3px !important;
    }

    .ev-countdown-widget.ev-countdown-widget-compact
    .ev-countdown-box {
        width: 44px !important;
        max-width: 44px !important;
        flex-basis: 44px !important;
    }

    .ev-countdown-widget.ev-countdown-widget-compact
    .ev-countdown-digit {
        font-size: 0.95rem !important;
    }

    .ev-countdown-widget.ev-countdown-widget-compact
    .ev-countdown-unit {
        font-size: 0.42rem !important;
    }
}