/* ===================================================================
   Ikonkalar.

   Ikonka har doim MATN bilan yonma-yon turadi, shuning uchun uchta
   narsa muhim:

     · o'lchami `em` da — shrift kattalashsa ikonka ham o'sadi;
     · bazasi matn bazasiga tushsin — `vertical-align` bilan biroz
       yuqoriga surilgan, aks holda ikonka harflardan pastda "osilib"
       qoladi;
     · rangi `currentColor` — ota element rangini oladi.
   =================================================================== */
.ico {
  display: inline-block;
  flex: none;
  vertical-align: -0.16em;
  /* Chiziqlar mayda o'lchamda ham tiniq qolsin. */
  shape-rendering: geometricPrecision;
}

/* Ikonka + yozuv juftligi. `baseline` emas, `center`: ikki qatorli
   yozuvda ham ikonka matnning o'rtasiga to'g'ri keladi. */
.icon-label {
  display: inline-flex;
  align-items: center;
  gap: .45em;
}

/* Tugma ichidagi ikonka matndan bir oz kattaroq — optik muvozanat
   uchun: chiziqli shakl to'ldirilgan harflardan kichik ko'rinadi. */
.btn .ico { font-size: 1.05em; }

/* Faqat ikonkadan iborat tugma — kvadrat va markazlashgan. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- reyting yulduzlari --- */
.star {
  display: inline-flex;
  color: var(--line);          /* bo'sh yulduz — sust chiziq rangida */
  line-height: 1;
}
.star.is-on { color: var(--gold-mark); }

.stars {
  display: inline-flex;
  align-items: center;
  gap: .1em;
}

/* --- holatga bo'yalgan ikonkalar --- */
.ico-ok     { color: var(--ok); }
.ico-warn   { color: var(--warn); }
.ico-danger { color: var(--danger); }
.ico-info   { color: var(--info); }
.ico-muted  { color: var(--ink-faint); }
.ico-accent { color: var(--theme-accent); }
.ico-gold   { color: var(--gold-mark); }

/* Sust ikonka matn yonida ko'zni tortmasin — biroz shaffof. */
.ico-quiet { opacity: .62; }

/* Harakatdagi ikonka: yangilash/yuklanish. */
@keyframes ico-spin { to { transform: rotate(360deg); } }
.ico-spin { animation: ico-spin 1.1s linear infinite; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: reduce) {
  .ico-spin { animation: none; }
}