/* =========================================================
   Market UI v2 — Countdown Component
   Path: public/assets/marketv2/components/countdown/countdown.css

   الهدف من هذا الملف:
   ---------------------------------------------------------
   هذا الملف هو طبقة العرض والبنية لمكوّن Countdown.

   يدعم:
   - circle variant
   - digital variant
   - theme accents
   - size system
   - auto circle sizing
   - compact mode
   - no-labels mode
   - expired state
   - responsive behavior
   - reduced motion

   هذا الملف لا يحتوي على:
   ✘ business logic
   ✘ time calculation logic
   ✘ expiration logic
   ✘ theme resolution logic

   ملاحظات معمارية:
   ---------------------------------------------------------
   - هذا الملف يستهلك --m-countdown-* فقط
   - لا يجب ربطه مباشرة بألوان خام
   - أي تخصيص لاحق يجب أن يمر عبر:
     preset → component variables → context override → instance override

   علاقة هذا الملف بالمعمارية العامة:
   ---------------------------------------------------------
   Countdown هو primitive موحّد لعرض الوقت المتبقي
   داخل الكروت، العروض، التنبيهات، والحملات.
========================================================= */


/* =========================================================
   1) ROOT
========================================================= */

.m-countdown {
    --m-countdown-accent: var(--m-countdown-primary);
    --m-countdown-circle-size: var(--m-countdown-circle-md);
    --m-countdown-circle-stroke: var(--m-countdown-circle-stroke-md);
    --m-countdown-circle-value-size: var(--m-countdown-circle-value-md);
    --m-countdown-circle-unit-size: var(--m-countdown-circle-unit-md);
    --m-countdown-digital-value-size: var(--m-countdown-digital-value-md);
    --m-countdown-digital-unit-size: var(--m-countdown-digital-unit-md);
    --m-countdown-digital-font-size: var(--m-countdown-digital-font-md);
    --m-countdown-gap: var(--m-countdown-gap-md);

    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--m-countdown-gap);
    min-width: 0;
    width: auto;

    background: var(--m-countdown-bg);
    color: var(--m-countdown-text-strong);

    transition:
        gap var(--m-countdown-transition-base),
        transform var(--m-countdown-transition-base);
}

.m-countdown,
.m-countdown__item,
.m-countdown__center,
.m-countdown__fallback,
.m-countdown__expired-text {
    min-width: 0;
}


/* =========================================================
   2) FALLBACK / EXPIRED
========================================================= */

.m-countdown__fallback {
    display: none;
}

.m-countdown.is-expired .m-countdown__fallback {
    display: inline-flex;
}

.m-countdown.is-expired .m-countdown__expired-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: var(--m-countdown-expired-pill-min-height);
    padding: var(--m-countdown-expired-pill-padding-y) var(--m-countdown-expired-pill-padding-x);
    border-radius: var(--m-countdown-expired-pill-radius);

    background: var(--m-countdown-expired-bg);
    color: var(--m-countdown-expired-text-color);

    font-size: var(--m-countdown-expired-font-size);
    font-weight: var(--m-countdown-expired-font-weight);
    line-height: 1;

    white-space: nowrap;
}


/* =========================================================
   3) THEMES
========================================================= */

.m-countdown--theme-primary { --m-countdown-accent: var(--m-countdown-primary); }
.m-countdown--theme-success { --m-countdown-accent: var(--m-countdown-success); }
.m-countdown--theme-danger  { --m-countdown-accent: var(--m-countdown-danger); }
.m-countdown--theme-warning { --m-countdown-accent: var(--m-countdown-warning); }
.m-countdown--theme-info    { --m-countdown-accent: var(--m-countdown-info); }
.m-countdown--theme-dark    { --m-countdown-accent: var(--m-countdown-dark); }
.m-countdown--theme-light   { --m-countdown-accent: var(--m-countdown-light); }


/* =========================================================
   4) SIZE TOKENS
========================================================= */

.m-countdown--size-xs {
    --m-countdown-gap: var(--m-countdown-gap-xs);
    --m-countdown-circle-size: var(--m-countdown-circle-xs);
    --m-countdown-circle-stroke: var(--m-countdown-circle-stroke-xs);
    --m-countdown-circle-value-size: var(--m-countdown-circle-value-xs);
    --m-countdown-circle-unit-size: var(--m-countdown-circle-unit-xs);
    --m-countdown-digital-font-size: var(--m-countdown-digital-font-xs);
    --m-countdown-digital-value-size: var(--m-countdown-digital-value-xs);
    --m-countdown-digital-unit-size: var(--m-countdown-digital-unit-xs);
}

.m-countdown--size-sm {
    --m-countdown-gap: var(--m-countdown-gap-sm);
    --m-countdown-circle-size: var(--m-countdown-circle-sm);
    --m-countdown-circle-stroke: var(--m-countdown-circle-stroke-sm);
    --m-countdown-circle-value-size: var(--m-countdown-circle-value-sm);
    --m-countdown-circle-unit-size: var(--m-countdown-circle-unit-sm);
    --m-countdown-digital-font-size: var(--m-countdown-digital-font-sm);
    --m-countdown-digital-value-size: var(--m-countdown-digital-value-sm);
    --m-countdown-digital-unit-size: var(--m-countdown-digital-unit-sm);
}

.m-countdown--size-md {
    --m-countdown-gap: var(--m-countdown-gap-md);
    --m-countdown-circle-size: var(--m-countdown-circle-md);
    --m-countdown-circle-stroke: var(--m-countdown-circle-stroke-md);
    --m-countdown-circle-value-size: var(--m-countdown-circle-value-md);
    --m-countdown-circle-unit-size: var(--m-countdown-circle-unit-md);
    --m-countdown-digital-font-size: var(--m-countdown-digital-font-md);
    --m-countdown-digital-value-size: var(--m-countdown-digital-value-md);
    --m-countdown-digital-unit-size: var(--m-countdown-digital-unit-md);
}

.m-countdown--size-lg {
    --m-countdown-gap: var(--m-countdown-gap-lg);
    --m-countdown-circle-size: var(--m-countdown-circle-lg);
    --m-countdown-circle-stroke: var(--m-countdown-circle-stroke-lg);
    --m-countdown-circle-value-size: var(--m-countdown-circle-value-lg);
    --m-countdown-circle-unit-size: var(--m-countdown-circle-unit-lg);
    --m-countdown-digital-font-size: var(--m-countdown-digital-font-lg);
    --m-countdown-digital-value-size: var(--m-countdown-digital-value-lg);
    --m-countdown-digital-unit-size: var(--m-countdown-digital-unit-lg);
}

.m-countdown--size-xl {
    --m-countdown-gap: var(--m-countdown-gap-xl);
    --m-countdown-circle-size: var(--m-countdown-circle-xl);
    --m-countdown-circle-stroke: var(--m-countdown-circle-stroke-xl);
    --m-countdown-circle-value-size: var(--m-countdown-circle-value-xl);
    --m-countdown-circle-unit-size: var(--m-countdown-circle-unit-xl);
    --m-countdown-digital-font-size: var(--m-countdown-digital-font-xl);
    --m-countdown-digital-value-size: var(--m-countdown-digital-value-xl);
    --m-countdown-digital-unit-size: var(--m-countdown-digital-unit-xl);
}


/* =========================================================
   5) AUTO SIZE FOR CIRCLE BY ACTIVE UNIT COUNT
========================================================= */

.m-countdown--circle.m-countdown--size-auto[data-unit-count="1"] {
    --m-countdown-circle-size: var(--m-countdown-circle-auto-1);
}
.m-countdown--circle.m-countdown--size-auto[data-unit-count="2"] {
    --m-countdown-circle-size: var(--m-countdown-circle-auto-2);
}
.m-countdown--circle.m-countdown--size-auto[data-unit-count="3"] {
    --m-countdown-circle-size: var(--m-countdown-circle-auto-3);
}
.m-countdown--circle.m-countdown--size-auto[data-unit-count="4"] {
    --m-countdown-circle-size: var(--m-countdown-circle-auto-4);
}

.m-countdown--circle.m-countdown--size-auto.is-compact[data-unit-count="1"] {
    --m-countdown-circle-size: var(--m-countdown-circle-auto-compact-1);
}
.m-countdown--circle.m-countdown--size-auto.is-compact[data-unit-count="2"] {
    --m-countdown-circle-size: var(--m-countdown-circle-auto-compact-2);
}
.m-countdown--circle.m-countdown--size-auto.is-compact[data-unit-count="3"] {
    --m-countdown-circle-size: var(--m-countdown-circle-auto-compact-3);
}
.m-countdown--circle.m-countdown--size-auto.is-compact[data-unit-count="4"] {
    --m-countdown-circle-size: var(--m-countdown-circle-auto-compact-4);
}


/* =========================================================
   6) CIRCLE VARIANT
========================================================= */

.m-countdown--circle {
    justify-content: center;
}

.m-countdown--circle .m-countdown__item {
    position: relative;
    width: var(--m-countdown-circle-size);
    height: var(--m-countdown-circle-size);
    min-width: var(--m-countdown-circle-size);

    border-radius: 50%;
    flex: 0 0 auto;

    transition:
        width var(--m-countdown-transition-base),
        height var(--m-countdown-transition-base),
        min-width var(--m-countdown-transition-base),
        transform var(--m-countdown-transition-base);
}

.m-countdown--circle .m-countdown__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.m-countdown--circle .m-countdown__track,
.m-countdown--circle .m-countdown__progress {
    fill: none;
    stroke-width: var(--m-countdown-circle-stroke);
    transform-origin: center;
}

.m-countdown--circle .m-countdown__track {
    stroke: var(--m-countdown-track);
}

.m-countdown--circle .m-countdown__progress {
    stroke: var(--m-countdown-accent);
    stroke-linecap: round;
    transition:
        stroke-dashoffset .7s linear,
        stroke var(--m-countdown-transition-fast);
}

.m-countdown--circle .m-countdown__center {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    text-align: center;
    pointer-events: none;
}

.m-countdown--circle .m-countdown__value {
    font-size: var(--m-countdown-circle-value-size);
    font-weight: 800;
    line-height: 1;
    color: var(--m-countdown-text-strong);
    letter-spacing: -0.02em;
}

.m-countdown--circle .m-countdown__unit {
    font-size: var(--m-countdown-circle-unit-size);
    font-weight: 700;
    line-height: 1.1;
    color: var(--m-countdown-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.m-countdown--circle.is-no-labels .m-countdown__unit {
    display: none;
}

.m-countdown--circle.is-compact .m-countdown__center {
    gap: 1px;
}


/* =========================================================
   7) DIGITAL VARIANT
========================================================= */

.m-countdown--digital {
    justify-content: flex-start;
}

.m-countdown--digital .m-countdown__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: var(--m-countdown-digital-pill-min-height);
    padding: var(--m-countdown-digital-pill-padding-y) var(--m-countdown-digital-pill-padding-x);

    border: var(--m-countdown-digital-pill-border) solid var(--m-countdown-border);
    border-radius: var(--m-countdown-digital-pill-radius);

    background: var(--m-countdown-digital-item-bg);
    box-shadow: none;

    flex: 0 0 auto;
    white-space: nowrap;

    transition:
        border-color var(--m-countdown-transition-fast),
        transform var(--m-countdown-transition-fast),
        background-color var(--m-countdown-transition-fast);
}

@media (hover: hover) {
    .m-countdown--digital .m-countdown__item:hover {
        border-color: var(--m-countdown-digital-hover-border);
    }
}

.m-countdown--digital .m-countdown__value {
    font-size: var(--m-countdown-digital-value-size);
    font-weight: 800;
    line-height: 1;
    color: var(--m-countdown-text-strong);
    letter-spacing: -0.02em;
}

.m-countdown--digital .m-countdown__unit {
    font-size: var(--m-countdown-digital-unit-size);
    font-weight: 700;
    line-height: 1;
    color: var(--m-countdown-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.m-countdown--digital.is-no-labels .m-countdown__unit {
    display: none;
}

.m-countdown--digital.is-compact {
    --m-countdown-gap: 6px;
}

.m-countdown--digital.is-compact .m-countdown__item {
    min-height: var(--m-countdown-digital-pill-min-height-compact);
    padding: var(--m-countdown-digital-pill-padding-y-compact) var(--m-countdown-digital-pill-padding-x-compact);
}


/* =========================================================
   8) SHARED STATES
========================================================= */

.m-countdown.is-hidden-expired {
    display: none !important;
}

.m-countdown[data-unit-count="1"] {
    flex-wrap: nowrap;
}


/* =========================================================
   9) RESPONSIVE
========================================================= */

@media (max-width: 575.98px) {
    .m-countdown--circle {
        --m-countdown-gap: 8px;
    }

    .m-countdown--digital {
        --m-countdown-gap: 6px;
    }

    .m-countdown--digital .m-countdown__item {
        max-width: 100%;
    }
}


/* =========================================================
   10) REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .m-countdown,
    .m-countdown--circle .m-countdown__item,
    .m-countdown--circle .m-countdown__progress,
    .m-countdown--digital .m-countdown__item {
        transition: none !important;
    }
}