/**
 * Rekhi Factory Stats — Frontend CSS
 * Animated counter cards with glassmorphism.
 *
 * COLOR FIX ARCHITECTURE:
 *   --rekhi-accent       = full hex (e.g. #e63946 or #2271b1)
 *   --rekhi-accent-rgb   = comma-separated RGB (e.g. 230, 57, 70 or 34, 113, 177)
 *   --rekhi-accent-light = lighter hex for gradient endpoints
 *
 *   Every single color reference uses ONE of these variables.
 *   ZERO hardcoded hex or rgba values. This is the fix.
 */
.cw-fs-container{--rekhi-accent:#e63946;--rekhi-accent-rgb:230,57,70;--rekhi-accent-light:#ff7070;--rekhi-bg:#0a0a0a;--rekhi-text:#fff;--rekhi-subtitle:#aaa;--fs-glass-bg:rgba(255,255,255,0.05);--fs-glass-border:rgba(var(--rekhi-accent-rgb),0.18);--fs-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;width:100%;max-width:1280px;margin:0 auto;text-align:center;padding:50px 20px;box-sizing:border-box;font-family:var(--fs-font);color:var(--rekhi-text)}

.cw-fs-header{margin-bottom:48px}
.cw-fs-title{font-size:2.6rem;font-weight:700;margin:0 0 14px;background:linear-gradient(90deg,var(--rekhi-text),var(--rekhi-accent),var(--rekhi-text));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cw-fs-subtitle{font-size:1.15rem;color:var(--rekhi-subtitle);font-weight:400;margin:0}

/* 4-column responsive grid */
.cw-fs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* Card — visible by default; .active still used for motion polish */
.cw-fs-card{opacity:1;transform:none;transition:opacity 0.5s cubic-bezier(0.25,0.1,0.25,1),transform 0.5s cubic-bezier(0.25,0.1,0.25,1)}
.cw-fs-card.is-pending{opacity:0;transform:translateY(24px)}
.cw-fs-card.active{opacity:1;transform:translateY(0)}

/* Glass card face */
.cw-fs-glass{background:var(--fs-glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--fs-glass-border);border-radius:22px;padding:32px 20px 26px;box-shadow:0 6px 28px rgba(0,0,0,0.32);transition:border-color 0.35s ease,box-shadow 0.35s ease;display:flex;flex-direction:column;align-items:center;text-align:center;height:100%;min-height:240px;box-sizing:border-box}
.cw-fs-glass:hover{border-color:var(--rekhi-accent);box-shadow:0 0 40px rgba(var(--rekhi-accent-rgb),0.22)}

/* Icon circle */
.cw-fs-icon-wrap{width:64px;height:64px;border-radius:50%;background:rgba(var(--rekhi-accent-rgb),0.08);border:2px solid var(--rekhi-accent);display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0;box-shadow:0 0 18px rgba(var(--rekhi-accent-rgb),0.12);transition:all 0.4s ease}
.cw-fs-glass:hover .cw-fs-icon-wrap{box-shadow:0 0 32px rgba(var(--rekhi-accent-rgb),0.3);background:rgba(var(--rekhi-accent-rgb),0.14)}
.cw-fs-icon{font-size:1.7rem;color:var(--rekhi-accent);transition:transform 0.3s ease}
.cw-fs-glass:hover .cw-fs-icon{transform:scale(1.1)}

/* Value + suffix container */
.cw-fs-value-wrap{display:flex;align-items:baseline;justify-content:center;gap:2px;margin-bottom:6px}

/* Counter number */
.cw-fs-counter{font-size:2.4rem;font-weight:800;color:var(--rekhi-accent);line-height:1.1;display:inline-block}
.cw-fs-suffix--inline{font-size:1.5rem;font-weight:700;color:var(--rekhi-accent);line-height:1.1}

/* Label */
.cw-fs-label{font-size:0.9rem;font-weight:600;color:var(--rekhi-text);margin:0 0 10px;text-transform:uppercase;letter-spacing:0.04em}

/* Description */
.cw-fs-desc{font-size:0.8rem;color:var(--rekhi-subtitle);line-height:1.5;margin:0;flex:1}

/* ==================== DONE PULSE ==================== */
/* Uses the accent-light for the glow — computed from the accent in PHP */
.cw-fs-card.done .cw-fs-icon-wrap{animation:cw-fs-pulse 2s infinite alternate}
@keyframes cw-fs-pulse{from{box-shadow:0 0 18px rgba(var(--rekhi-accent-rgb),0.15)}to{box-shadow:0 0 38px rgba(var(--rekhi-accent-rgb),0.4)}}

/* ==================== RESPONSIVE ==================== */
@media(max-width:1000px){.cw-fs-grid{grid-template-columns:repeat(2,1fr)}.cw-fs-title{font-size:2rem}}
@media(max-width:560px){.cw-fs-grid{grid-template-columns:1fr}.cw-fs-title{font-size:1.6rem}.cw-fs-subtitle{font-size:1rem}.cw-fs-glass{min-height:auto;padding:24px 18px 22px}.cw-fs-counter{font-size:2rem}}

/* Reduced motion: skip animation, show immediately */
@media(prefers-reduced-motion:reduce){.cw-fs-card{transition:opacity 0.1s ease;transform:none}.cw-fs-card.active{opacity:1}.cw-fs-card.done .cw-fs-icon-wrap{animation:none}}