/* ==========================================================================
   STATES — qayta ishlatiladigan empty-state / error-state / loading
   komponentlari (master spec PART 8 §18, §19, §20).

   Har qanday API-ga bog'liq ekran (kurslar, lug'at, yutuqlar, do'kon,
   o'yin natijalari va h.k.) shu uchta holatdan birini ko'rsatishi kerak:
   yuklanmoqda -> muvaffaqiyat | bo'sh | xato. Bu fayl shu uchta holat
   uchun bitta izchil vizual tilni beradi, har bir ekran o'zinikini
   qayta ixtiro qilmasin.

   Ishlatilishi (JS tomonidan innerHTML orqali qo'yiladi):

     <div class="empty-state">
       <div class="empty-state-icon">📭</div>
       <h3 class="empty-state-title">Hali saqlangan so'z yo'q</h3>
       <p class="empty-state-desc">O'rganish vaqtida foydali so'zlarni
         saqlang — ular shu yerda paydo bo'ladi.</p>
     </div>

     <div class="error-state">
       <div class="error-state-icon">⚠️</div>
       <h3 class="error-state-title">Kurslarni yuklab bo'lmadi</h3>
       <p class="error-state-desc">Internet aloqasini tekshirib qayta
         urinib ko'ring.</p>
       <button class="error-state-retry">Qayta urinish</button>
     </div>

     <div class="skeleton-card"></div>   (yoki .skeleton__line, .skeleton__circle)
     <span class="spinner"></span>
   ========================================================================== */

.empty__state,
.error__state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-10) var(--space-6);
    gap: var(--space-2);
    color: var(--muted);
}

.empty__state-icon,
.error__state-icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: var(--space-2);
    opacity: 0.9;
}

.empty__state-title,
.error__state-title {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--fg);
    margin: 0;
}

.empty__state-desc,
.error__state-desc {
    font-size: 13.5px;
    line-height: 1.5;
    max-width: 320px;
    margin: 0;
}

.error__state-icon {
    color: var(--warning);
}

.error__state-retry {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-6);
    border: none;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.error__state-retry:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.error__state-retry:active {
    transform: translateY(0);
}

.error__state-retry:focus-visible,
.empty__state :focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.error__state-retry:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ---------------- SKELETON LOADERS (§18) ---------------- */

@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

.skeleton__card,
.skeleton__line,
.skeleton__circle {
    background: var(--locked, rgba(127, 127, 127, 0.18));
    border-radius: var(--radius-md);
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton__card {
    width: 100%;
    height: 84px;
    margin-bottom: var(--space-3);
}

.skeleton__line {
    height: 12px;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-sm);
}

.skeleton__line.width--size-60 { width: 60%; }
.skeleton__line.width--size-80 { width: 80%; }
.skeleton__line.width--size-100 { width: 100%; }

.skeleton__circle {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
}

/* ---------------- SPINNER (§18) ---------------- */

@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}

.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(var(--teal-rgb), 0.25);
    border-top-color: var(--teal);
    border-radius: 50%;
    animation: spinner-rotate 0.7s linear infinite;
    vertical-align: middle;
}

.spinner.spinner__lg {
    width: 32px;
    height: 32px;
    border-width: 3.5px;
}

/* Buttons in a "loading" state (§8) reuse the same spinner, dimmed label. */
.btn__loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn__loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spinner-rotate 0.7s linear infinite;
}

/* ---------------- REDUCED MOTION (§25) ----------------
   The app-wide reduced-motion rule (css/base/themes.css) already forces
   every animation/transition to near-instant, including the spinner and
   skeleton pulse defined above — nothing extra needed here. */