/* ==========================================
   ULTRAKIT EVERGREEN COUNTDOWN — Premium
   6 Layouts × 3 Sizes × Urgency × Containers
   ========================================== */

.ultrakit-evg-wrapper {
    --evg-accent: #6c5ce7;
    --evg-accent2: #fd79a8;
    --evg-num: #1a1a2e;
    --evg-text: #4a4a5a;
    --evg-fs: 40px;
    --evg-box: 84px;
    --evg-urgent: #e63946;
    position: relative;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    color: var(--evg-text);
    font-family: inherit;
}
.ultrakit-evg-wrapper *, .ultrakit-evg-wrapper *::before, .ultrakit-evg-wrapper *::after { box-sizing: border-box; }

.evg-size-small { --evg-fs: 28px; --evg-box: 62px; }
.evg-size-large { --evg-fs: 58px; --evg-box: 116px; }

.evg-card-card   { padding: 34px 26px; background: #ffffff; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); }
.evg-card-dark   { --evg-num: #ffffff; --evg-text: #cfcfe0; padding: 34px 26px; background: #1a1a2e; border-radius: 20px; }
.evg-card-tinted { padding: 34px 26px; background: #f4f2ff; border-radius: 20px; }

.ultrakit-evg-head { margin-bottom: 22px; }
.ultrakit-evg-title { margin: 0 0 6px; font-size: 24px; font-weight: 800; line-height: 1.25; color: var(--evg-num); }
.ultrakit-evg-sub { margin: 0; font-size: 15px; line-height: 1.55; color: var(--evg-text); }

/* ---------- Timer row ---------- */
.ultrakit-evg-timer { display: inline-flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 14px; }
.ultrakit-evg-unit { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ultrakit-evg-face { position: relative; display: flex; align-items: center; justify-content: center; min-width: var(--evg-box); height: var(--evg-box); }
.ultrakit-evg-num { position: relative; z-index: 1; font-size: var(--evg-fs); font-weight: 800; line-height: 1; color: var(--evg-num); font-variant-numeric: tabular-nums; }
.ultrakit-evg-num.tick { animation: ultrakit-evg-tick 0.35s ease; }
@keyframes ultrakit-evg-tick { 0% { transform: translateY(-40%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.ultrakit-evg-label { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--evg-text); }
.ultrakit-evg-sep { display: none; font-size: var(--evg-fs); font-weight: 800; line-height: var(--evg-box); color: var(--evg-accent); opacity: 0.6; }
.ultrakit-evg-ring { display: none; position: absolute; inset: 0; width: 100% !important; height: 100% !important; flex-shrink: 0; }
.ultrakit-evg-ring-bg { stroke: rgba(127,127,160,0.22); }
.ultrakit-evg-ring-fg { stroke: var(--evg-accent); transition: stroke-dashoffset 0.4s linear; }

/* ---------- Layout: Boxes ---------- */
.evg-layout-boxes .ultrakit-evg-face { background: #ffffff; border: 2px solid color-mix(in srgb, var(--evg-accent) 22%, transparent); border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.07); padding: 0 12px; }
.evg-card-dark.evg-layout-boxes .ultrakit-evg-face { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); box-shadow: none; }
.evg-layout-boxes .ultrakit-evg-num { color: var(--evg-accent); }

/* ---------- Layout: Rings ---------- */
.evg-layout-circles .ultrakit-evg-ring { display: block; }
.evg-layout-circles .ultrakit-evg-face { width: var(--evg-box); border-radius: 50%; }
.evg-layout-circles .ultrakit-evg-num { font-size: calc(var(--evg-fs) * 0.85); }

/* ---------- Layout: Split cards (flip look) ---------- */
.evg-layout-cards .ultrakit-evg-face { background: #1a1a2e; border-radius: 12px; padding: 0 14px; box-shadow: 0 10px 24px rgba(0,0,0,0.25); overflow: hidden; }
.evg-layout-cards .ultrakit-evg-face::before { content: ''; position: absolute; inset: 0 0 50% 0; background: rgba(255,255,255,0.07); }
.evg-layout-cards .ultrakit-evg-face::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(0,0,0,0.55); }
.evg-layout-cards .ultrakit-evg-num { color: #ffffff; }
.evg-layout-cards .ultrakit-evg-sep { display: block; }

/* ---------- Layout: Gradient tiles ---------- */
.evg-layout-gradient .ultrakit-evg-face { background: linear-gradient(135deg, var(--evg-accent), var(--evg-accent2)); border-radius: 18px; padding: 0 14px; box-shadow: 0 12px 28px color-mix(in srgb, var(--evg-accent) 40%, transparent); }
.evg-layout-gradient .ultrakit-evg-num { color: #ffffff; }

/* ---------- Layout: Minimal ---------- */
.evg-layout-minimal .ultrakit-evg-timer { gap: 10px; }
.evg-layout-minimal .ultrakit-evg-face { min-width: 0; height: auto; padding: 0 4px; }
.evg-layout-minimal .ultrakit-evg-sep { display: block; line-height: 1.05; }
.evg-layout-minimal .ultrakit-evg-num { color: var(--evg-num); }

/* ---------- Layout: Banner ---------- */
.evg-layout-banner { border-radius: 16px; background: linear-gradient(90deg, var(--evg-accent), var(--evg-accent2)); padding: 22px 30px; --evg-num: #ffffff; --evg-text: rgba(255,255,255,0.88); --evg-fs: 30px; --evg-box: 52px; }
.evg-layout-banner .ultrakit-evg-live { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 30px; }
.evg-layout-banner .ultrakit-evg-head { margin: 0; text-align: left; flex: 1 1 220px; }
.evg-layout-banner .ultrakit-evg-face { min-width: 0; padding: 0 6px; }
.evg-layout-banner .ultrakit-evg-num { color: #ffffff; }
.evg-layout-banner .ultrakit-evg-sep { display: block; color: #ffffff; line-height: var(--evg-box); }
.evg-layout-banner .ultrakit-evg-unit { gap: 2px; }
.evg-layout-banner .ultrakit-evg-label { font-size: 10px; }
.evg-layout-banner .ultrakit-evg-title { color: #ffffff; }
.evg-layout-banner .ultrakit-evg-btn { background: #ffffff; color: var(--evg-accent) !important; }
.evg-layout-banner .ultrakit-evg-reset { color: #ffffff !important; }

/* ---------- CTA + reset ---------- */
.ultrakit-evg-cta { margin-top: 26px; }
.evg-layout-banner .ultrakit-evg-cta { margin-top: 0; }
.ultrakit-evg-btn { display: inline-block; padding: 14px 32px !important; background: var(--evg-accent); color: #ffffff !important; border-radius: 50px; font-size: 15px; font-weight: 800; text-decoration: none !important; box-shadow: 0 10px 24px color-mix(in srgb, var(--evg-accent) 35%, transparent); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.ultrakit-evg-btn:hover { transform: translateY(-3px); }
.ultrakit-evg-reset { display: inline-block; margin-top: 16px; padding: 0 !important; box-sizing: border-box; background: transparent; color: var(--evg-accent) !important; border: none; font-size: 12.5px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.evg-layout-banner .ultrakit-evg-reset { margin-top: 0; }

/* ---------- Urgency ---------- */
.is-urgent .ultrakit-evg-num { color: var(--evg-urgent) !important; }
.is-urgent .ultrakit-evg-ring-fg { stroke: var(--evg-urgent); }
.is-urgent.evg-layout-boxes .ultrakit-evg-face { border-color: color-mix(in srgb, var(--evg-urgent) 45%, transparent); }
.is-urgent.evg-layout-gradient .ultrakit-evg-face { background: linear-gradient(135deg, var(--evg-urgent), #ff8a5c); }
.is-urgent.evg-layout-gradient .ultrakit-evg-num, .is-urgent.evg-layout-cards .ultrakit-evg-num, .is-urgent.evg-layout-banner .ultrakit-evg-num { color: #ffffff !important; }
.is-urgent.evg-layout-banner { background: linear-gradient(90deg, var(--evg-urgent), #ff8a5c); }
.is-pulse .ultrakit-evg-face { animation: ultrakit-evg-pulse 1s ease-in-out infinite; }
@keyframes ultrakit-evg-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ---------- Expired ---------- */
.ultrakit-evg-expired { display: none; padding: 26px 20px; text-align: center; color: var(--evg-num); }
.ultrakit-evg-expired-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 8px; border-radius: 50%; background: color-mix(in srgb, var(--evg-urgent) 14%, transparent); color: var(--evg-urgent); }
.ultrakit-evg-expired-icon svg { width: 26px !important; height: 26px !important; flex-shrink: 0; }
.ultrakit-evg-expired p { margin: 0; font-size: 17px; font-weight: 700; }
.is-expired .ultrakit-evg-live { display: none; }
.is-expired .ultrakit-evg-expired { display: block; }
.evg-layout-banner.is-expired { background: #f0f0f5; --evg-num: #1a1a2e; }

@media (max-width: 600px) {
    .ultrakit-evg-timer { gap: 8px; }
    .evg-size-large { --evg-fs: 42px; --evg-box: 84px; }
    .evg-layout-banner { padding: 20px; }
    .evg-layout-banner .ultrakit-evg-head { text-align: center; }
    .evg-layout-banner .ultrakit-evg-live { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .is-pulse .ultrakit-evg-face, .ultrakit-evg-num.tick { animation: none; } }