/* ═══════════════════════════════════════════════════════
   KONNA UI — sayt va admin panel uchun umumiy komponentlar:
   yagona spinner, tugma yuklanish holati, skeleton (yuklanish
   joy egasi), rasm silliq paydo bo'lishi va yengil animatsiyalar.
   ═══════════════════════════════════════════════════════ */

:root {
  --k-accent: var(--blue, #1F3A8A);
  --k-skeleton-base: #eef1f6;
  --k-skeleton-shine: #f8f9fc;
  --k-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Spinner (barcha joyda bitta ko'rinish) ── */
@keyframes k-spin {
  to { transform: rotate(360deg); }
}

.k-spinner {
  --k-spinner-size: 22px;
  --k-spinner-color: var(--k-accent);
  display: inline-block;
  width: var(--k-spinner-size);
  height: var(--k-spinner-size);
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--k-spinner-color) 18%, transparent);
  border-top-color: var(--k-spinner-color);
  animation: k-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.k-spinner--sm { --k-spinner-size: 16px; }
.k-spinner--lg { --k-spinner-size: 36px; border-width: 3px; }
.k-spinner--light { --k-spinner-color: #fff; }

/* Bo'lim/blok markazidagi yuklanish holati */
.k-loading-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 16px;
  color: var(--text-muted, #9CA3AF);
  font-size: 13px;
  font-weight: 500;
}

/* ── Tugma yuklanish holati ──
   Tugma kengligi o'zgarmaydi (matn joyida qoladi, faqat ko'rinmaydi),
   markazda spinner chiqadi. JS: KonnaUI.setLoading(btn, true/false) */
.is-loading {
  position: relative !important;
  pointer-events: none !important;
  color: transparent !important;
  cursor: progress !important;
}

.is-loading > * {
  visibility: hidden;
}

.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--k-btn-spinner, var(--k-accent)) 22%, transparent);
  border-top-color: var(--k-btn-spinner, var(--k-accent));
  animation: k-spin 0.7s linear infinite;
}

/* To'q fonli tugmalarda oq spinner */
.btn-primary.is-loading,
.btn--primary.is-loading,
.btn--danger.is-loading,
.order-modal__submit.is-loading,
.callback-form__submit.is-loading,
.login-btn.is-loading {
  --k-btn-spinner: #fff;
}

/* ── Skeleton (kontent yuklanguncha joy egasi) ── */
@keyframes k-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.skeleton {
  background: linear-gradient(90deg,
      var(--k-skeleton-base) 0%,
      var(--k-skeleton-base) 35%,
      var(--k-skeleton-shine) 50%,
      var(--k-skeleton-base) 65%,
      var(--k-skeleton-base) 100%);
  background-size: 200% 100%;
  animation: k-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

.skeleton-line {
  display: block;
  height: 12px;
  border-radius: 6px;
}

.skeleton-line + .skeleton-line { margin-top: 10px; }
.skeleton-line--lg { height: 18px; }
.skeleton-line--w30 { width: 30%; }
.skeleton-line--w45 { width: 45%; }
.skeleton-line--w60 { width: 60%; }
.skeleton-line--w80 { width: 80%; }

/* Do'kon: mahsulot kartochkasi skeleti (haqiqiy kartochka o'lchamlarida) */
.product-card--skeleton {
  pointer-events: none;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
}

.product-card--skeleton:hover {
  transform: none;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
  border-color: transparent;
}

.product-card--skeleton .product-card__image {
  border-radius: 0;
}

.product-card--skeleton .skeleton-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.product-card--skeleton .skeleton-actions .skeleton {
  flex: 1;
  height: 38px;
  border-radius: 10px;
}

/* Do'kon: kategoriya banneri skeleti */
.cat-banner--skeleton {
  cursor: default;
  pointer-events: none;
}

.cat-banner--skeleton:hover {
  transform: none;
  box-shadow: none;
}

.cat-banner--skeleton .cat-banner__content {
  color: transparent;
}

.cat-banner--skeleton .skeleton-line {
  background: rgba(255, 255, 255, 0.55);
  animation: none;
}

/* Do'kon: chap paneldagi kategoriyalar skeleti */
.sidebar-skeleton-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
}

.sidebar-skeleton-item .skeleton-line { margin: 0; }

/* Admin: rasm yuklanayotganda preview ustida spinner */
.is-uploading { position: relative; }

.k-upload-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.78);
  border-radius: inherit;
  z-index: 2;
  animation: k-fade-in 0.2s ease both;
}

/* ── Rasm yuklanguncha shimmer, keyin silliq paydo bo'lish ──
   Konteynerga .k-img-wrap, rasmga .k-img qo'yiladi; JS yuklanganda .is-loaded qo'shadi */
.k-img-wrap {
  position: relative;
}

.k-img-wrap:not(.is-loaded)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg,
      var(--k-skeleton-base) 0%,
      var(--k-skeleton-base) 35%,
      var(--k-skeleton-shine) 50%,
      var(--k-skeleton-base) 65%,
      var(--k-skeleton-base) 100%);
  background-size: 200% 100%;
  animation: k-shimmer 1.4s ease-in-out infinite;
}

.k-img {
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.45s var(--k-ease-out);
}

.k-img-wrap.is-loaded .k-img {
  opacity: 1;
}

/* Lightbox: qorong'i fonda rasm yuklanguncha oq spinner */
.image-lightbox__stage { position: relative; }

.image-lightbox__spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -18px 0 0 -18px;
  display: none;
}

.image-lightbox__stage.is-loading-img .image-lightbox__spinner { display: block; }
.image-lightbox__img { transition: opacity 0.25s ease; }
.image-lightbox__stage.is-loading-img .image-lightbox__img { opacity: 0; }

/* ── Yengil paydo bo'lish animatsiyalari ── */
@keyframes k-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes k-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes k-pop-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Ro'yxat elementlari ketma-ket paydo bo'ladi: style="--i: N" bilan kechikish.
   fill-mode "backwards": tugagach transform qo'yib yuboriladi, aks holda hover'dagi
   ko'tarilish effekti ishlamay qoladi */
.k-animate-in {
  animation: k-fade-up 0.45s var(--k-ease-out) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 40ms);
}

.k-fade-in {
  animation: k-fade-in 0.3s ease backwards;
}

/* Modal fonlari (sayt va admin) silliq qorayadi */
.admin-modal.active,
.order-modal.active,
.modal-overlay.active {
  animation: k-fade-in 0.2s ease;
}

/* Harakatni kamaytirish tanlangan qurilmalarda animatsiyalar o'chiriladi,
   spinner esa sekinroq aylanadi (yuklanayotganini bildirishi uchun kerak) */
@media (prefers-reduced-motion: reduce) {
  .k-animate-in,
  .k-fade-in,
  .admin-modal.active,
  .order-modal.active,
  .modal-overlay.active {
    animation: none !important;
  }

  .skeleton,
  .k-img-wrap:not(.is-loaded)::before {
    animation: none !important;
  }

  .k-spinner,
  .is-loading::after {
    animation-duration: 1.6s !important;
  }

  .k-img {
    transition: none !important;
  }
}