/* Republica — asosiy global stillar */

/* Matn belgilanganda (selection) brend qizil fon, oq yozuv */
::selection {
  background-color: #C2A14D;
  color: #ffffff;
}
::-moz-selection {
  background-color: #C2A14D;
  color: #ffffff;
}

/* ────────────────────────────────────────────────────────────
   MOBIL AKKORDEON — ochiq holat uchun zaxira stillar
   Bu qoidalar JS dinamik qo'shadigan `grid-rows-[1fr]` va
   `rotate-45` klasslarini kafolatlaydi. Tailwind Play CDN ularni
   ish vaqtida o'zi generatsiya qiladi, lekin agar kelajakda
   loyiha Tailwind'ni "build" qilsa (CDN o'rniga), o'sha dinamik
   klasslar tozalanib ketishi mumkin — shu sabab bu zaxira.
   ──────────────────────────────────────────────────────────── */
.mobile-acc-panel.grid-rows-\[1fr\] {
  grid-template-rows: 1fr;
}
.mobile-acc-icon.rotate-45 {
  transform: rotate(45deg);
}

/* ────────────────────────────────────────────────────────────
   MOBIL AKKORDEON — yopiq holatda kontent ko'rinib qolmasligi.
   CSS grid 0fr/1fr usulida yopilish to'liq ishlashi uchun
   ichki (klip qiluvchi) blokka min-height:0 kerak. Aks holda
   matn pastdagi bo'limga "chayilib" chiqib qoladi.
   ──────────────────────────────────────────────────────────── */
.mobile-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}
.mobile-acc-panel > div {
  overflow: hidden;
  min-height: 0;
}
.mobile-acc-panel.grid-rows-\[1fr\] {
  grid-template-rows: 1fr;
}

/* ────────────────────────────────────────────────────────────
   BREND IKONKALAR — tashqi (qizil) SVG ikonkalarni brend oltin
   rangiga bo'yash. CSS mask orqali ikonkaning shakli olinadi va
   ustiga brend rangi qo'yiladi.
   ──────────────────────────────────────────────────────────── */
.brand-icon {
  display: inline-block;
  width: 56px;
  height: 56px;
  background-color: #C2A14D;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
}