/* MAVZUNI QO'LDA TANLASH.

   Sayt boshidan light palitraga ega: `:root` dagi qiymatlar aynan
   shu. Dark esa `prefers-color-scheme` orqali qo'llanadi, ya'ni
   tizim sozlamasiga ergashadi.

   Yetishmagani — TANLOV. Maqola o'quvchisi tizimi dark bo'lsa ham
   light o'qishni afzal ko'rishi mumkin, va aksincha.

   Shu sababli har bir dark bloki ikki joyda takrorlanadi:

     @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) }
        — tizim dark, foydalanuvchi light tanlamagan;

     :root[data-theme="dark"]
        — foydalanuvchi ataylab dark tanlagan, tizim esa light.

   Ikkalasi birga har to'rt holatni qamraydi va tanlov har doim
   tizim sozlamasidan ustun turadi. */

/* =========================================================
   goxost-landing.css
   Goxost.net ochiq bosh sahifasi uchun 0 dan yozilgan, mustaqil
   dizayn tizimi. Hech qanday Bootstrap yoki boshqa admin-panel CSS
   fayliga (styles.css, gx-utilities.css, insaf-variables.css) bog'liq
   emas — shu fayl o'zining rang/o'lcham token'larini o'zi belgilaydi.
   Faqat welcome.blade.php shu faylni yuklaydi.
   ========================================================= */

/* ---------- 1. RESET ---------- */
/* [hidden] atributi HAR DOIM ustun bo'lsin.

   Brauzerning o'z qoidasi `[hidden] { display: none }` — u atribut
   selektori, ya'ni ixtiyoriy klass qoidasidan (masalan
   `.ai-assistant__panel { display: flex }`) kuchsizroq. Natijada
   `hidden` qo'yilgan element baribir ko'rinib turadi va sahifani
   buzadi. Bu bir marta bo'lgan xato emas — `hidden` bilan boshqariladigan
   har bir panel, tab va bildirishnoma shu tuzoqqa tushadi. */
[hidden] {
  display: none !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

img, svg {
  max-width: 100%;
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

/* ---------- 2. TOKENLAR ---------- */
:root {
  /* Brend rangi — goxost.net logotipidan aniq olingan */
  --gx-primary: #6c5ffc;
  --gx-primary-hover: #5847e0;
  --gx-primary-soft: rgba(108, 95, 252, .12);
  --gx-gradient: linear-gradient(135deg, #5847e0 0%, #6c5ffc 55%, #8b7cf8 100%);

  --gx-success: #22c55e;
  --gx-success-soft: rgba(34, 197, 94, .12);

  --gx-bg: #f7f6fb;
  --gx-surface: #ffffff;
  --gx-surface-hover: #f1eefb;
  --gx-border: #e8e5f2;
  --gx-border-strong: #d7d2ea;
  --gx-text: #17152b;
  --gx-text-muted: #64607a;
  --gx-text-faint: #9691ab;
  --gx-on-primary: #ffffff;

  --gx-shadow-sm: 0 2px 6px rgba(76, 29, 149, .07);
  --gx-shadow-md: 0 8px 24px rgba(76, 29, 149, .12);
  --gx-shadow-lg: 0 20px 48px rgba(76, 29, 149, .18);

  --gx-radius-sm: 10px;
  --gx-radius-md: 16px;
  --gx-radius-lg: 22px;
  --gx-radius-full: 999px;

  --gx-font-display: "Sora", "Inter", "Segoe UI", Arial, sans-serif;
  --gx-font-body: "Inter", "Segoe UI", Arial, sans-serif;

  --gx-1: 4px;
  --gx-2: 8px;
  --gx-3: 12px;
  --gx-4: 16px;

  /* --gx-5 shkalada YO'Q edi, lekin panel CSS uni 11 joyda
     `var(--gx-5, 20px)` deb ishlatardi — ya'ni zaxira qiymat bilan.
     Zaxirasiz yozilgan har qanday joyda esa u BO'SHLIQNI YO'Q qilardi
     (kartalar bir-biriga yopishib qolardi). Endi shkalada bor. */
  --gx-5: 20px;

  --gx-6: 24px;
  --gx-8: 32px;
  --gx-12: 48px;
  --gx-16: 64px;
  --gx-20: 80px;
  --gx-24: 96px;
  --gx-32: 128px;

  --gx-container-max: 1440px;
  --gx-header-h: 76px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gx-primary-soft: rgba(108, 95, 252, .22);
    --gx-bg: #100e1c;
    --gx-surface: #191725;
    --gx-surface-hover: #221f33;
    --gx-border: #2b2740;
    --gx-border-strong: #3a3555;
    --gx-text: #f3f1fa;
    --gx-text-muted: #a49fc0;
    --gx-text-faint: #7a7599;
    --gx-shadow-sm: 0 2px 6px rgba(0, 0, 0, .3);
    --gx-shadow-md: 0 8px 24px rgba(0, 0, 0, .4);
    --gx-shadow-lg: 0 20px 48px rgba(0, 0, 0, .5);
  }
}

  :root[data-theme="dark"] {
    --gx-primary-soft: rgba(108, 95, 252, .22);
    --gx-bg: #100e1c;
    --gx-surface: #191725;
    --gx-surface-hover: #221f33;
    --gx-border: #2b2740;
    --gx-border-strong: #3a3555;
    --gx-text: #f3f1fa;
    --gx-text-muted: #a49fc0;
    --gx-text-faint: #7a7599;
    --gx-shadow-sm: 0 2px 6px rgba(0, 0, 0, .3);
    --gx-shadow-md: 0 8px 24px rgba(0, 0, 0, .4);
    --gx-shadow-lg: 0 20px 48px rgba(0, 0, 0, .5);
  }


body {
  font-family: var(--gx-font-body);
  background: var(--gx-bg);
  color: var(--gx-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 3. KONTEYNER ---------- */
.gx-wrap {
  width: 100%;
  max-width: var(--gx-container-max);
  margin-inline: auto;
  padding-inline: 20px;
}

/* `<x-img>` rasmni `<picture>` ichiga oladi — brauzer webp va asl
   format orasidan o'zi tanlasin uchun. `display: contents` bu qo'shimcha
   elementni tartibdan butunlay chiqarib tashlaydi: flex va grid uchun
   ichkaridagi `<img>` bevosita farzand bo'lib qolaveradi, ya'ni mavjud
   uslublarni o'zgartirish shart emas. */
picture {
  display: contents;
}

@media (min-width: 768px)  { .gx-wrap { padding-inline: 32px; } }
@media (min-width: 1280px) { .gx-wrap { padding-inline: 40px; } }
@media (min-width: 1440px) { .gx-wrap { padding-inline: 64px; } }

/* ---------- 4. GRID ---------- */
.gx-grid {
  display: grid;
  gap: var(--gx-6);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .gx-grid--2, .gx-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .gx-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .gx-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .gx-grid { gap: var(--gx-8); }
}

.gx-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gx-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .gx-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gx-16);
  }
}

/* ---------- 5. TIPOGRAFIYA ---------- */
.gx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gx-2);
  padding: 6px var(--gx-3);
  border-radius: var(--gx-radius-full);
  background: var(--gx-primary-soft);
  color: var(--gx-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: var(--gx-4);
}

.gx-h1 {
  font-family: var(--gx-font-display);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-size: clamp(30px, 4vw, 44px);
  max-width: 14ch;
}

.gx-h2 {
  font-family: var(--gx-font-display);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-size: clamp(24px, 3vw, 32px);
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: var(--gx-3);
}

.gx-lead {
  color: var(--gx-text-muted);
  font-size: 17px;
  line-height: 1.65;
  max-width: 46ch;
}

.gx-section-head {
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: var(--gx-12);
  text-align: center;
}

/* Sarlavha va lead bloklarining O'ZI ham markazga tursin.

   .gx-h1 da max-width: 14ch, .gx-lead da 46ch bor — ya'ni ular
   konteynerdan tor. text-align: center faqat ichidagi matnni
   markazlashtiradi, blokning o'zi esa chap chetda qolib ketadi.
   Shuning uchun margin-inline: auto kerak. */
.gx-section-head .gx-h1,
.gx-section-head .gx-h2,
.gx-section-head .gx-lead {
  margin-inline: auto;
}

.gx-section {
  padding-block: var(--gx-12);
}

@media (min-width: 1024px) {
  .gx-section { padding-block: var(--gx-20); }
}

/* ---------- 6. TUGMALAR ---------- */
.gx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gx-2);
  padding: 13px 28px;
  border-radius: var(--gx-radius-full);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  border: 1.5px solid transparent;
}

.gx-btn:hover {
  transform: translateY(-1px);
}

.gx-btn--sm {
  padding: 9px 20px;
  font-size: 14px;
}

.gx-btn--primary {
  background: var(--gx-primary);
  color: var(--gx-on-primary);
  box-shadow: 0 10px 24px rgba(108, 95, 252, .3);
}

.gx-btn--primary:hover {
  background: var(--gx-primary-hover);
}

.gx-btn--outline {
  background: transparent;
  color: var(--gx-text);
  border-color: var(--gx-border-strong);
}

.gx-btn--outline:hover {
  border-color: var(--gx-primary);
  color: var(--gx-primary);
}

.gx-btn--ghost {
  background: transparent;
  color: var(--gx-text-muted);
}

.gx-btn--ghost:hover {
  color: var(--gx-primary);
}

.gx-btn--white {
  background: #fff;
  color: var(--gx-primary);
}

.gx-btn--white:hover {
  background: rgba(255, 255, 255, .9);
}

.gx-btn--block {
  width: 100%;
}

/* ---------- 7. HEADER ---------- */
.gx-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--gx-header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--gx-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gx-border);
}

.gx-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gx-8);
}

.gx-header__logo img {
  height: 30px;
  width: auto;
}

.gx-header__logo .gx-logo-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gx-header__logo .gx-logo-light { display: none; }
  :root:not([data-theme="light"]) .gx-header__logo .gx-logo-dark { display: block; }
}

  :root[data-theme="dark"] .gx-header__logo .gx-logo-light { display: none; }
  :root[data-theme="dark"] .gx-header__logo .gx-logo-dark { display: block; }


.gx-nav {
  display: none;
  align-items: center;

  /* Sakkizta band: 1024px da var(--gx-6) bo'shliq bilan sig'masdi va
     logotipni siqib qo'yardi. Kengroq ekranda bo'shliq kattalashadi. */
  gap: var(--gx-4);
  margin-inline: auto;
}

.gx-nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--gx-text-muted);
  transition: color .15s ease;
}

.gx-nav a:hover {
  color: var(--gx-primary);
}

.gx-header__actions {
  display: none;
  align-items: center;
  gap: var(--gx-3);
  margin-left: auto;
}

.gx-nav-toggle {
  margin-left: auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--gx-radius-sm);
}

.gx-nav-toggle:hover {
  background: var(--gx-surface-hover);
}

.gx-nav-toggle svg {
  width: 22px;
  height: 22px;
}

.gx-nav-toggle .gx-icon-close { display: none; }
.gx-nav-toggle.is-open .gx-icon-open { display: none; }
.gx-nav-toggle.is-open .gx-icon-close { display: block; }

@media (min-width: 1024px) {
  .gx-nav, .gx-header__actions { display: flex; }
  .gx-nav-toggle { display: none; }
}

@media (min-width: 1280px) {
  .gx-nav { gap: var(--gx-6); }
}

/* ---------- TIL ALMASHTIRGICH ----------
   Uchta til uchun ochiluvchi ro'yxat ortiqcha: bir bosishda ko'rinadigan
   uchta tugma tezroq va JS talab qilmaydi. */
.gx-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--gx-radius-full);
  background: var(--gx-bg);
  border: 1px solid var(--gx-border);
}

.gx-lang__item {
  padding: 4px 9px;
  border-radius: var(--gx-radius-full);
  color: var(--gx-text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: background .15s ease, color .15s ease;
}

.gx-lang__item:hover { color: var(--gx-text); }

.gx-lang__item.is-active {
  background: var(--gx-primary);
  color: #fff;
}

/* Mobil menyuda — to'liq kenglikda, uchta teng bo'lak. */
.gx-lang--wide {
  display: flex;
  width: 100%;
  margin-bottom: var(--gx-4);
}

.gx-lang--wide .gx-lang__item {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  font-size: 13px;
}

/* Mobil menyu paneli */
.gx-mobile-menu {
  display: none;
  border-bottom: 1px solid var(--gx-border);
  background: var(--gx-surface);
}

.gx-mobile-menu.is-open {
  display: block;
}

.gx-mobile-menu__inner {
  padding-block: var(--gx-4);

  /* Menyu uzun: sakkizta band + til + tugmalar. Baland telefonda ham
     sig'masligi mumkin, shuning uchun ichida suriladi. */
  max-height: calc(100dvh - var(--gx-header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gx-mobile-menu__nav {
  display: flex;
  flex-direction: column;
}

/* Har bir band — butun kenglikdagi bosiladigan qator. Avval ular
   oddiy matn bo'lib turardi va tegish sohasi tor edi. */
.gx-mobile-menu__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gx-3);
  padding: 13px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--gx-text);
  border-bottom: 1px solid var(--gx-border);
}

.gx-mobile-menu__nav a .gx-icon { color: var(--gx-text-faint); }
.gx-mobile-menu__nav a:hover { color: var(--gx-primary); }
.gx-mobile-menu__nav a:hover .gx-icon { color: var(--gx-primary); }

.gx-mobile-menu__actions {
  display: flex;
  flex-direction: column;
  gap: var(--gx-2);
  padding-top: var(--gx-4);
}

.gx-mobile-menu__actions form { width: 100%; }

@media (min-width: 1024px) {
  .gx-mobile-menu { display: none !important; }
}

/* ---------- 8. HERO ---------- */
.gx-hero {
  position: relative;
  padding-block: var(--gx-16) var(--gx-8);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .gx-hero { padding-block: var(--gx-24) var(--gx-12); }
}

.gx-hero::before {
  content: "";
  position: absolute;
  top: -220px;
  right: -220px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gx-primary-soft), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.gx-hero__inner {
  position: relative;
  z-index: 1;
}

.gx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gx-3);
  margin-block: var(--gx-6) var(--gx-8);
}

.gx-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gx-8);
}

.gx-hero__stat-value {
  font-family: var(--gx-font-display);
  font-size: 22px;
  font-weight: 800;
}

.gx-hero__stat-label {
  font-size: 13px;
  color: var(--gx-text-muted);
}

.gx-hero__media {
  display: flex;
  justify-content: center;
}

.gx-hero__media img {
  width: 100%;
  max-width: 480px;
  filter: drop-shadow(0 30px 60px rgba(76, 29, 149, .18));
}

/* ---------- 9. XUSUSIYAT RO'YXATI ---------- */
.gx-feature-media img {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
}

.gx-feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--gx-8);
}

.gx-feature {
  display: flex;
  gap: var(--gx-4);
}

.gx-feature__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--gx-radius-md);
  display: grid;
  place-items: center;
  background: var(--gx-primary-soft);
  color: var(--gx-primary);
  font-size: 20px;
}

.gx-feature__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.gx-feature__desc {
  font-size: 14px;
  color: var(--gx-text-muted);
  max-width: 48ch;
}

/* ---------- 10. KARTA (umumiy asos) ---------- */
.gx-card {
  background: var(--gx-surface);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-lg);
  box-shadow: var(--gx-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gx-card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--gx-shadow-md);
  border-color: var(--gx-border-strong);
}

/* ---------- 11. STATISTIKA ---------- */
.gx-stat {
  display: flex;
  align-items: center;
  gap: var(--gx-4);
  padding: var(--gx-6);
  height: 100%;
}

.gx-stat__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--gx-radius-md);
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #fff;
  background: var(--gx-gradient);
}

.gx-stat__value {
  font-family: var(--gx-font-display);
  font-size: 26px;
  font-weight: 800;
}

.gx-stat__label {
  font-size: 13px;
  color: var(--gx-text-muted);
}

/* ---------- 12. IMKONIYATLAR ---------- */
.gx-mission {
  padding: var(--gx-6);
  height: 100%;
}

.gx-mission__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--gx-radius-md);
  display: grid;
  place-items: center;
  background: var(--gx-primary-soft);
  color: var(--gx-primary);
  font-size: 20px;
  margin-bottom: var(--gx-4);
}

.gx-mission__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.gx-mission__desc {
  font-size: 13px;
  color: var(--gx-text-muted);
}

/* ---------- 13. CTA BANNER ---------- */
.gx-banner {
  background: var(--gx-gradient);
  border-radius: var(--gx-radius-lg);
  padding: var(--gx-16) var(--gx-8);
  text-align: center;
  color: #fff;
  box-shadow: var(--gx-shadow-lg);
}

.gx-banner__title {
  font-family: var(--gx-font-display);
  font-weight: 800;
  color: #fff;
  font-size: clamp(22px, 2.6vw, 28px);
  max-width: 32ch;
  margin-inline: auto;
  margin-bottom: var(--gx-3);
}

.gx-banner__lead {
  color: rgba(255, 255, 255, .85);
  font-size: 15px;
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: var(--gx-8);
}

/* ---------- 14. NARXLAR ---------- */
.gx-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--gx-radius-full);
  background: var(--gx-surface-hover);
  margin-bottom: var(--gx-12);
}

.gx-tabs__btn {
  border-radius: var(--gx-radius-full);
  padding: 10px var(--gx-6);
  font-size: 14px;
  font-weight: 700;
  color: var(--gx-text-muted);
}

.gx-tabs__btn.is-active {
  background: var(--gx-surface);
  color: var(--gx-primary);
  box-shadow: var(--gx-shadow-sm);
}

.gx-tab-pane {
  display: none;
}

.gx-tab-pane.is-active {
  display: block;
}

.gx-price {
  padding: var(--gx-6);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.gx-price--featured {
  border-color: color-mix(in srgb, var(--gx-primary) 45%, transparent);
  box-shadow: 0 20px 50px color-mix(in srgb, var(--gx-primary) 18%, transparent);
}

.gx-price__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gx-3);
  margin-bottom: var(--gx-4);
}

.gx-price__title-wrap {
  display: flex;
  align-items: center;
  gap: var(--gx-3);
}

.gx-price__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--gx-radius-md);
  display: grid;
  place-items: center;
  background: var(--gx-primary-soft);
  color: var(--gx-primary);
  flex-shrink: 0;
}

.gx-price__title {
  font-size: 17px;
  font-weight: 700;
}

.gx-badge {
  display: inline-flex;
  padding: 3px var(--gx-3);
  border-radius: var(--gx-radius-full);
  background: var(--gx-success-soft);
  color: var(--gx-success);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.gx-price__amount {
  font-family: var(--gx-font-display);
  font-size: 26px;
  font-weight: 800;
  margin-bottom: var(--gx-1);
}

.gx-price__amount sub {
  font-family: var(--gx-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--gx-text-muted);
}

.gx-price__desc {
  color: var(--gx-text-muted);
  font-size: 14px;
  margin-bottom: var(--gx-6);
}

.gx-price__list {
  display: flex;
  flex-direction: column;
  gap: var(--gx-3);
  margin-bottom: var(--gx-6);
  flex: 1;
}

.gx-price__list li {
  display: flex;
  align-items: center;
  gap: var(--gx-2);
  font-size: 14px;
}

.gx-price__list i {
  color: var(--gx-success);
  font-size: 16px;
  flex-shrink: 0;
}

/* ---------- 15. JAMOA ---------- */
.gx-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--gx-8) var(--gx-6);
  height: 100%;
}

.gx-team__avatar {
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  margin-bottom: var(--gx-4);
  border-radius: 50%;
  overflow: hidden;
  background: var(--gx-surface-hover);
  box-shadow: 0 0 0 4px var(--gx-primary-soft);
}

.gx-team__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gx-team__name {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}

.gx-team__role {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--gx-primary);
  background: var(--gx-primary-soft);
  padding: 4px 12px;
  border-radius: var(--gx-radius-full);
  margin-bottom: var(--gx-3);
}

.gx-team__bio {
  font-size: 13px;
  line-height: 1.6;
  color: var(--gx-text-muted);
}

/* ---------- 16. SAVOL-JAVOB ---------- */
.gx-faq-col {
  display: flex;
  flex-direction: column;
  gap: var(--gx-3);
}

.gx-faq-item {
  background: var(--gx-surface);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-md);
  overflow: hidden;
}

.gx-faq-item__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gx-3);
  padding: var(--gx-4) var(--gx-6);
  text-align: left;
  font-size: 15px;
  font-weight: 600;
}

.gx-faq-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gx-primary-soft);
  color: var(--gx-primary);
  transition: transform .2s ease;
}

.gx-faq-item__btn.is-active .gx-faq-item__icon {
  transform: rotate(45deg);
}

.gx-faq-item__panel {
  display: none;
  padding: 0 var(--gx-6) var(--gx-4);
  color: var(--gx-text-muted);
  font-size: 14px;
  max-width: 62ch;
}

.gx-faq-item__panel.is-open {
  display: block;
}

.gx-faq-item__panel a,
.gx-faq-item__panel code {
  color: var(--gx-primary);
}

.gx-faq-item__panel code {
  background: var(--gx-surface-hover);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .9em;
}

/* ---------- 17. YAKUNIY CTA ---------- */
.gx-final-cta {
  padding: var(--gx-8);
  display: grid;
  gap: var(--gx-6);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .gx-final-cta { grid-template-columns: 1fr auto; }
}

.gx-final-cta__title {
  font-family: var(--gx-font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px);
  margin-bottom: var(--gx-2);
}

.gx-final-cta__lead {
  color: var(--gx-text-muted);
  max-width: 56ch;
}

/* ---------- 18. FOOTER ---------- */
.gx-footer {
  background: var(--gx-surface);
  border-top: 1px solid var(--gx-border);
  padding-block: var(--gx-20) var(--gx-8);
}

.gx-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gx-8);
}

@media (min-width: 640px) {
  .gx-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .gx-footer__grid { grid-template-columns: 2fr 1fr 1fr 2fr; gap: var(--gx-12); }
}

.gx-footer__logo img {
  height: 26px;
  margin-bottom: var(--gx-4);
}

.gx-footer__desc {
  font-size: 14px;
  color: var(--gx-text-muted);
  max-width: 42ch;
  line-height: 1.7;
  margin-bottom: var(--gx-4);
}

.gx-footer__heading {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: var(--gx-4);
}

.gx-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--gx-2);
}

.gx-footer__links a {
  font-size: 14px;
  color: var(--gx-text-muted);
  transition: color .15s ease;
}

.gx-footer__links a:hover {
  color: var(--gx-primary);
}

.gx-footer__bottom {
  margin-top: var(--gx-16);
  padding-top: var(--gx-6);
  border-top: 1px solid var(--gx-border);
  text-align: center;
  font-size: 13px;
  color: var(--gx-text-muted);
}

.gx-footer__bottom a {
  color: var(--gx-primary);
  font-weight: 600;
}

/* ---------- 19. YUQORIGA QAYTISH TUGMASI ---------- */
.gx-back-top {
  position: fixed;
  right: var(--gx-6);
  bottom: var(--gx-6);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gx-primary);
  color: #fff;
  box-shadow: var(--gx-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 40;
}

.gx-back-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gx-back-top:hover {
  background: var(--gx-primary-hover);
}

/* ---------- 20. YORDAMCHI KLASSLAR ---------- */
.gx-text-center { text-align: center; }

/* ---------- 21. FORMA BOSHQARUVLARI ----------
   Sabab: <select> uchun butun saytda hech qanday stil yozilmagan edi —
   brauzer o'zining tug'ma ko'rinishini chizardi. U yonidagi .gx-input
   maydonlaridan sezilarli past va tor bo'lib, shrifti ham merosga
   o'tmasdi (brauzerlar select uchun ~13px tizim shriftini qo'yadi).
   Natijada formalar "kichkina va hunuk" ko'rinardi.

   Shuning uchun bu yerda toza <select> elementining o'zi stillanadi —
   shunda maxsus klass yozilmagan eski formalar (masalan goxedu arizasi)
   ham avtomatik to'g'rilanadi. Tug'ma o'q appearance:none bilan
   o'chiriladi va uning o'rniga fon rasmi sifatida SVG shevron
   chiziladi (tashqi fayl emas — qo'shimcha so'rov bo'lmasligi uchun). */

:root {
  --gx-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364607a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gx-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a49fc0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  }
}

  :root[data-theme="dark"] {
    --gx-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a49fc0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  }


select,
.gx-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  padding: 12px 40px 12px 14px;

  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--gx-text);

  background-color: var(--gx-surface);
  background-image: var(--gx-select-arrow);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;

  border: 1px solid var(--gx-border-strong);
  border-radius: var(--gx-radius-sm);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

select:hover,
.gx-select:hover {
  border-color: var(--gx-primary);
}

select:focus,
.gx-select:focus {
  outline: none;
  border-color: var(--gx-primary);
  box-shadow: 0 0 0 3px var(--gx-primary-soft);
}

select:disabled,
.gx-select:disabled {
  opacity: .55;
  cursor: not-allowed;
  background-color: var(--gx-surface-hover);
}

/* Ochilgan ro'yxat elementlari — Windows/Linux'da fon oq qolib ketmasligi
   uchun (macOS bu qoidani e'tiborsiz qoldiradi, bu normal). */
select option {
  color: var(--gx-text);
  background: var(--gx-surface);
}

/* Bir qatorga joylashtirilgan select (masalan filtr yonidagi) o'z
   kengligini egallashi uchun. */
.gx-select--auto {
  display: inline-block;
  width: auto;
  min-width: 180px;
}

/* Ko'p qatorli select (size > 1) o'q va cursor'siz bo'lishi kerak. */
select[multiple],
select[size]:not([size="1"]) {
  background-image: none;
  padding-right: 14px;
  cursor: default;
}

/* Matn maydoni — select bilan bir xil ko'rinishda bo'lishi uchun.
   .gx-input goxost-auth.css da alohida yozilgan, textarea esa hech
   qayerda yo'q edi. */
.gx-textarea {
  display: block;
  width: 100%;
  min-height: 130px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gx-text);
  background: var(--gx-surface);
  border: 1px solid var(--gx-border-strong);
  border-radius: var(--gx-radius-sm);
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.gx-textarea:focus {
  outline: none;
  border-color: var(--gx-primary);
  box-shadow: 0 0 0 3px var(--gx-primary-soft);
}

.gx-textarea::placeholder { color: var(--gx-text-faint); }

/* Belgilash katakchasi va radio — tug'ma o'lchami 13px bo'lib, yonidagi
   matndan kichik ko'rinardi. */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gx-primary);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  select,
  .gx-select,
  .gx-textarea {
    transition: none;
  }
}

/* ---------- FAYL TANLASH MAYDONI ----------
   Sabab: <input type="file"> butun saytda stillanmagan edi — brauzer
   o'zining kulrang "Choose file / Файл не выбран" tugmasini chizardi.
   U yonidagi maydonlardan past, boshqa shriftda va boshqa rangda bo'lib,
   forma buzilgandek ko'rinardi.

   Yechim: maydonning o'zi punktir ramkali "yuklash sohasi"ga aylantiriladi,
   ichidagi tugma esa ::file-selector-button orqali sayt tugmalari bilan bir
   xil qilinadi. ::-webkit-file-upload-button — eski Safari uchun nusxa
   (u standart selektorni hali tanimaydi).

   Token'lar fallback qiymat bilan yozilgan: bu blok ham gx- dizayn
   tizimida (ochiq sayt, panel), ham eski insaf temasida (shaxsiy kabinet)
   ishlashi kerak, ular esa turli o'zgaruvchilar to'plamiga ega. */

input[type="file"],
.form-control[type="file"],
.gxp-input[type="file"] {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gx-text-muted, #64607a);
  background-color: var(--gx-surface, #ffffff);
  background-image: none;
  border: 1.5px dashed var(--gx-border-strong, #d7d2ea);
  border-radius: var(--gx-radius-sm, 10px);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

input[type="file"]:hover,
.form-control[type="file"]:hover {
  border-color: var(--gx-primary, #6c5ffc);
  background-color: var(--gx-surface-hover, #f1eefb);
}

input[type="file"]:focus-visible,
.form-control[type="file"]:focus-visible {
  outline: none;
  border-color: var(--gx-primary, #6c5ffc);
  box-shadow: 0 0 0 3px var(--gx-primary-soft, rgba(108, 95, 252, .14));
}

input[type="file"]::file-selector-button,
.form-control[type="file"]::file-selector-button {
  margin: -2px 14px -2px 0;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--gx-radius-sm, 9px);
  background: var(--gx-primary, #6c5ffc);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s ease;
}

input[type="file"]::-webkit-file-upload-button,
.form-control[type="file"]::-webkit-file-upload-button {
  margin: -2px 14px -2px 0;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--gx-radius-sm, 9px);
  background: var(--gx-primary, #6c5ffc);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

input[type="file"]:hover::file-selector-button,
.form-control[type="file"]:hover::file-selector-button {
  background: var(--gx-primary-hover, #5847e0);
}

input[type="file"]:disabled,
.form-control[type="file"]:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Rasm oldindan ko'rinishi — yuklashdan oldin nima tanlanganini ko'rsatadi. */
.gx-photo-field {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.gx-photo-field__preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gx-primary, #6c5ffc);
  color: #ffffff;
  font-weight: 700;
  font-size: 26px;
}

.gx-photo-field__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gx-photo-field__control {
  flex: 1 1 260px;
  min-width: 240px;
}

@media (prefers-reduced-motion: reduce) {
  input[type="file"],
  input[type="file"]::file-selector-button {
    transition: none;
  }
}

/* =========================================================
   IKONKALAR VA HARAKAT

   Bu blok sayt bo'ylab bitta: ochiq sahifa ham, panel ham, kabinet ham
   goxost-landing.css ni yuklaydi. Har bir sahifada o'z animatsiyasini
   yozish bir joyda 200ms, boshqa joyda 600ms bo'lib qolishiga olib
   kelardi — bu yerda esa muddat va egri chiziq bitta o'zgaruvchida.
   ========================================================= */

:root {
  --gx-ease: cubic-bezier(.22, .61, .36, 1);
  --gx-dur: .28s;
  --gx-dur-slow: .5s;
}

/* ---------- IKONKA ----------
   Matn bilan yonma-yon turganda siqilib ketmasin va qatorda o'rtada
   ko'rinsin. Rangni o'zi belgilamaydi — currentColor. */
.gx-icon {
  flex: 0 0 auto;
  vertical-align: -0.15em;
}

/* ---------- KIRISH ANIMATSIYASI ----------
   `data-anim` qo'yilgan element sahifa ochilganda pastdan suzib chiqadi.
   Ketma-ket kartalar uchun `style="--gx-i:2"` — kechikish shunga qarab
   hisoblanadi va ro'yxat to'lqin bo'lib ochiladi.

   Animatsiya `forwards` bilan tugaydi: tugagach element o'z holicha
   qoladi, transform qolib ketmaydi (aks holda position:fixed bo'lgan
   bolalar shu elementga nisbatan joylashib, modal buzilardi). */
@keyframes gx-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

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

@keyframes gx-scale {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}

[data-anim] {
  opacity: 0;
  animation: gx-rise var(--gx-dur-slow) var(--gx-ease) forwards;
  animation-delay: calc(var(--gx-i, 0) * 60ms);
}

[data-anim="fade"]  { animation-name: gx-fade; }
[data-anim="scale"] { animation-name: gx-scale; }

/* ---------- KO'TARILISH ----------
   Bosiladigan kartalar uchun. `will-change` ataylab yo'q: o'nlab karta
   bir vaqtda qatlamga chiqsa, mobil qurilmada aksincha sekinlashadi. */
.gx-lift {
  transition:
    transform var(--gx-dur) var(--gx-ease),
    box-shadow var(--gx-dur) var(--gx-ease),
    border-color var(--gx-dur) var(--gx-ease);
}

.gx-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--gx-shadow-md);
}

.gx-lift:active { transform: translateY(-1px); }

/* ---------- BOSISH ---------- */
.gx-press { transition: transform .12s var(--gx-ease); }
.gx-press:active { transform: scale(.97); }

/* ---------- PULSATSIYA ----------
   Diqqat talab qiladigan yagona narsa uchun (o'qilmagan bildirishnoma
   nuqtasi). Cheksiz aylanadi, shuning uchun juda past kontrastda. */
@keyframes gx-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

.gx-pulse { animation: gx-pulse 2s ease-in-out infinite; }

/* ---------- AYLANISH ----------
   Yuborilayotgan forma tugmasi ichidagi ikonka uchun. */
@keyframes gx-spin {
  to { transform: rotate(360deg); }
}

.gx-spin { animation: gx-spin .9s linear infinite; }

/* ---------- YUKLANISH SKELETI ---------- */
@keyframes gx-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.gx-skeleton {
  border-radius: var(--gx-radius-sm);
  background: linear-gradient(
    90deg,
    var(--gx-border) 25%,
    var(--gx-surface-hover) 37%,
    var(--gx-border) 63%
  );
  background-size: 200% 100%;
  animation: gx-shimmer 1.4s ease infinite;
}

/* ---------- HARAKATNI KAMAYTIRISH ----------
   Tizim sozlamasida "harakatni kamaytirish" yoqilgan bo'lsa, animatsiya
   umuman bo'lmaydi. MUHIM: [data-anim] uchun opacity 1 ga qaytariladi,
   aks holda animatsiyasiz element ko'rinmay qolardi. */
@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    opacity: 1;
    animation: none;
  }

  .gx-lift,
  .gx-press {
    transition: none;
  }

  .gx-lift:hover,
  .gx-lift:active,
  .gx-press:active {
    transform: none;
  }

  .gx-pulse,
  .gx-spin,
  .gx-skeleton {
    animation: none;
  }
}

/* =========================================================
   FORMA BOSHQARUVLARI

   Bu bloklar avval goxost-auth.css da edi — ya'ni faqat kirish/ro'yxatdan
   o'tish sahifalarida yuklanardi. Ochiq saytdagi boshqa formalar
   (GoxEdu arizasi, aloqa) esa o'sha klasslarni yozsa ham, CSS'siz qolib
   brauzerning tayyor maydonlarini ko'rsatardi.

   Endi ular shu yerda: goxost-landing.css hamma karkasga ulanadi.
   goxost-auth.css da faqat kirish sahifasiga xos narsalar qoldi.
   ========================================================= */

.gx-field {
  margin-bottom: var(--gx-4);
}

/* Oxirgi maydon — pastki bo'shliqsiz.

   `:last-of-type` EMAS, `:last-child`.

   `:last-of-type` teg turi bo'yicha ishlaydi: `.gx-field` — bu
   `<div>`, ya'ni qoida "oxirgi div" ga tushadi. Formada maydondan
   keyin `<button>` kelsa, div baribir oxirgi div bo'lib qoladi va
   bo'shliqni yo'qotadi — tugma maydonga yopishib qoladi.
   Email tasdiqlash sahifasida aynan shunday bo'lgan.

   `:last-child` esa "ortidan hech narsa kelmasa" degani, ya'ni
   qoida faqat haqiqatan oxirgi elementga tushadi. */
.gx-field:last-child { margin-bottom: 0; }

.gx-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gx-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--gx-text);
  margin-bottom: 6px;
}

.gx-label__aux {
  font-size: 12px;
  font-weight: 600;
  color: var(--gx-primary);
}

.gx-input {
  width: 100%;
  height: 46px;
  padding: 0 var(--gx-4);
  border-radius: var(--gx-radius-sm);
  border: 1.5px solid var(--gx-border);
  background: var(--gx-bg);
  color: var(--gx-text);
  font-size: 15px;
  font-family: var(--gx-font-body);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.gx-input::placeholder { color: var(--gx-text-faint); }

.gx-input:focus {
  outline: none;
  border-color: var(--gx-primary);
  box-shadow: 0 0 0 3px var(--gx-primary-soft);
}

.gx-input--error {
  border-color: #f43f5e;
}

.gx-input[readonly] {
  color: var(--gx-text-muted);
  cursor: not-allowed;
}

.gx-input-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.gx-input-group .gx-input { flex: 1 1 auto; }

.gx-input-toggle {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--gx-radius-sm);
  border: 1.5px solid var(--gx-border);
  background: var(--gx-surface);
  color: var(--gx-text-muted);
  display: grid;
  place-items: center;
  font-size: 17px;
  transition: border-color .15s ease, color .15s ease;
}

.gx-input-toggle:hover {
  color: var(--gx-primary);
  border-color: var(--gx-border-strong);
}

.gx-field-error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #e11d48;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gx-field-error { color: #fb7185; }
}

  :root[data-theme="dark"] .gx-field-error { color: #fb7185; }


.gx-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.gx-checkbox-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--gx-primary);
}

.gx-checkbox-row label {
  font-size: 13px;
  color: var(--gx-text-muted);
  font-weight: 500;
}

.gx-alert {
  padding: var(--gx-3) var(--gx-4);
  border-radius: var(--gx-radius-md);
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: var(--gx-4);
}

.gx-alert--success {
  background: var(--gx-success-soft);
  color: #15803d;
}

/* Xato varianti: ochiq saytdagi formalar uchun kerak edi, auth
   sahifalarida esa xatolar maydon ostida (.gx-field-error) chiqadi. */
.gx-alert--error {
  background: rgba(239, 68, 68, .1);
  color: #dc2626;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gx-alert--success { color: #4ade80; }
  :root:not([data-theme="light"]) .gx-alert--error { color: #fb7185; }
}

  :root[data-theme="dark"] .gx-alert--success { color: #4ade80; }
  :root[data-theme="dark"] .gx-alert--error { color: #fb7185; }


/* ---------- HEADERDAGI FOYDALANUVCHI ----------
   Tizimga kirgan odam uchun "Kirish/Ro'yxatdan o'tish" o'rniga kabinet
   tugmasi va avatar chiqadi. */
.gx-user-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  border: 1.5px solid var(--gx-border);
  background: var(--gx-primary-soft);
  color: var(--gx-primary);
  font-weight: 700;
  font-size: 14px;
  transition: border-color .2s var(--gx-ease, ease);
}

.gx-user-chip:hover { border-color: var(--gx-primary); }

.gx-user-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .gx-user-chip { transition: none; }
}

/* ─── MAVZU TUGMASI ───────────────────────────────────────────
   Ikkala ikonka ham DOM da turadi, ko'rinadigani CSS tanlaydi.
   JS ikonka almashtirish bilan shug'ullanmasa — sahifa yuklanishida
   noto'g'ri ikonka chaqnab ketmaydi. */
.gx-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-sm);
  background: var(--gx-surface);
  color: var(--gx-text-muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.gx-theme-toggle:hover {
  color: var(--gx-primary);
  border-color: var(--gx-primary);
}

.gx-theme-toggle__icon { display: none; line-height: 0; }

/* Light rejim — quyosh ko'rinadi (bosilsa qorong'iga o'tadi). */
.gx-theme-toggle__icon--moon { display: inline-flex; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gx-theme-toggle__icon--moon { display: none; }
  :root:not([data-theme="light"]) .gx-theme-toggle__icon--sun { display: inline-flex; }
}

:root[data-theme="dark"] .gx-theme-toggle__icon--moon { display: none; }
:root[data-theme="dark"] .gx-theme-toggle__icon--sun { display: inline-flex; }

:root[data-theme="light"] .gx-theme-toggle__icon--sun { display: none; }
:root[data-theme="light"] .gx-theme-toggle__icon--moon { display: inline-flex; }
/* =========================================================
   goxost-blog.css
   Ochiq blog sahifalari (ro'yxat, bitta maqola, toifa, teg) uchun
   goxost-landing.css'ning "gx-" token tizimi ustiga qurilgan, mustaqil
   komponent kutubxonasi. Bootstrap yoki admin-panel (insaf-*, styles.css)
   fayllariga hech qanday bog'liqligi yo'q — shu ikkalasi (goxost-landing.css
   + shu fayl) blog uchun yetarli. Dark rejim goxost-landing.css'dagi
   @media (prefers-color-scheme: dark) orqali avtomatik ishlaydi.
   ========================================================= */

/* ---------- 1. SAHIFA STRUKTURASI ---------- */
.gx-page {
  padding-block: var(--gx-8) var(--gx-16);
}

.gx-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gx-1);
  font-size: 13px;
  color: var(--gx-text-muted);
  margin-bottom: var(--gx-4);
}

.gx-breadcrumb a {
  color: var(--gx-text-muted);
}

.gx-breadcrumb a:hover {
  color: var(--gx-primary);
}

.gx-breadcrumb__sep {
  opacity: .6;
}

.gx-breadcrumb__current {
  color: var(--gx-text);
  font-weight: 600;
}

.gx-page-head {
  margin-bottom: var(--gx-8);
}

.gx-page-head__title {
  font-family: var(--gx-font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--gx-2);
}

.gx-page-head__desc {
  color: var(--gx-text-muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 62ch;
}

/* ---------- 2. IKKI USTUNLI JOYLASHUV ---------- */
.gx-blog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gx-10, var(--gx-8));
  align-items: start;
}

@media (min-width: 1024px) {
  .gx-blog-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--gx-12);
  }
}

.gx-blog-main { min-width: 0; }

.gx-blog-aside {
  display: flex;
  flex-direction: column;
  gap: var(--gx-6);
  min-width: 0;
}

@media (min-width: 1024px) {
  .gx-blog-aside { position: sticky; top: calc(var(--gx-header-h) + var(--gx-6)); }
}

/* ---------- 3. MAQOLA KARTASI (ro'yxat/toifa/teg gridi) ---------- */
.gx-post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gx-6);
}

@media (min-width: 640px) {
  .gx-post-grid { grid-template-columns: repeat(2, 1fr); }
}

.gx-post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--gx-surface);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-lg);
  box-shadow: var(--gx-shadow-sm);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gx-post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--gx-shadow-md);
  border-color: var(--gx-border-strong);
}

.gx-post-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--gx-surface-hover);
}

.gx-post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gx-post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--gx-5, 20px) var(--gx-6);
}

.gx-post-card__title {
  font-family: var(--gx-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: var(--gx-2);
}

.gx-post-card__title a {
  color: var(--gx-text);
}

.gx-post-card__title a:hover {
  color: var(--gx-primary);
}

.gx-post-card__desc {
  color: var(--gx-text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: var(--gx-4);
}

.gx-post-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--gx-4);
}

.gx-post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--gx-2);
  margin-top: auto;
  padding-top: var(--gx-4);
  border-top: 1px solid var(--gx-border);
}

/* ---------- 4. MUALLIF AVATARI ---------- */
.gx-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--gx-on-primary);
  background: var(--gx-gradient);
  overflow: hidden;
}

.gx-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gx-avatar--sm { width: 26px; height: 26px; font-size: 11px; }
.gx-avatar--lg { width: 48px; height: 48px; font-size: 16px; }

.gx-byline__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gx-text);
  line-height: 1.3;
}

.gx-byline__date {
  font-size: 12px;
  color: var(--gx-text-faint);
}

/* ---------- 5. TEG PILL ---------- */
.gx-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: var(--gx-radius-full);
  background: var(--gx-primary-soft);
  color: var(--gx-primary);
  font-size: 12px;
  font-weight: 700;
  margin: 0 6px 6px 0;
  transition: background-color .15s ease, color .15s ease;
}

.gx-tag:hover {
  background: var(--gx-primary);
  color: var(--gx-on-primary);
}

.gx-tag--active {
  background: var(--gx-primary);
  color: var(--gx-on-primary);
}

/* ---------- 6. YON PANEL VIDJETLARI ---------- */
.gx-widget {
  background: var(--gx-surface);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-lg);
  box-shadow: var(--gx-shadow-sm);
  padding: var(--gx-5, 20px) var(--gx-6);
}

.gx-widget__title {
  font-family: var(--gx-font-display);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: var(--gx-4);
}

.gx-widget-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gx-widget-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gx-2);
  padding: 10px 8px;
  border-radius: var(--gx-radius-sm);
  color: var(--gx-text);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}

.gx-widget-list__item:hover {
  background: var(--gx-surface-hover);
  color: var(--gx-primary);
}

.gx-widget-list__count {
  flex-shrink: 0;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: var(--gx-radius-full);
  background: var(--gx-surface-hover);
  color: var(--gx-text-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.gx-widget-empty {
  color: var(--gx-text-faint);
  font-size: 13px;
}

/* Vidjetdagi "mashhur/yangi maqolalar" — kichik rasm + sarlavha qatori */
.gx-widget-post {
  display: flex;
  align-items: center;
  gap: var(--gx-3);
}

.gx-widget-post + .gx-widget-post {
  margin-top: var(--gx-3);
  padding-top: var(--gx-3);
  border-top: 1px solid var(--gx-border);
}

.gx-widget-post__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--gx-radius-md);
  overflow: hidden;
  background: var(--gx-surface-hover);
}

.gx-widget-post__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gx-widget-post__body { min-width: 0; }

.gx-widget-post__title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gx-text);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.gx-widget-post__title:hover {
  color: var(--gx-primary);
}

.gx-widget-post__date {
  font-size: 12px;
  color: var(--gx-text-faint);
  margin-top: 2px;
  display: block;
}

/* ---------- 7. BITTA MAQOLA (o'qish sahifasi) ---------- */
.gx-post-hero {
  border-radius: var(--gx-radius-lg);
  overflow: hidden;
  margin-bottom: var(--gx-6);
  aspect-ratio: 16 / 8;
  background: var(--gx-surface-hover);
  box-shadow: var(--gx-shadow-sm);
}

.gx-post-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gx-post-title {
  font-family: var(--gx-font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-bottom: var(--gx-4);
}

.gx-post-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--gx-text-muted);
  margin-bottom: var(--gx-5, 20px);
}

.gx-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gx-5, 20px);
  padding-bottom: var(--gx-6);
  margin-bottom: var(--gx-6);
  border-bottom: 1px solid var(--gx-border);
}

.gx-post-meta__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gx-text-muted);
  font-weight: 600;
}

.gx-post-meta__item i { color: var(--gx-primary); font-size: 15px; }

/* Maqola matni — o'qishga qulay tipografiya */
.gx-post-body {
  font-size: 1.08rem;
  line-height: 1.9;
  color: var(--gx-text);
  word-break: break-word;
}

.gx-post-body > *:first-child { margin-top: 0; }

.gx-post-body p { margin: 0 0 20px; }

.gx-post-body h3 {
  font-family: var(--gx-font-display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 40px 0 14px;
}

.gx-post-body h4 {
  font-family: var(--gx-font-display);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.3;
  margin: 28px 0 10px;
}

.gx-post-body ul, .gx-post-body ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

.gx-post-body li { margin: 0 0 8px; }

.gx-post-body a {
  color: var(--gx-primary);
  text-decoration: underline;
  text-decoration-color: var(--gx-primary-soft);
  text-underline-offset: 3px;
}

.gx-post-body a:hover { text-decoration-color: var(--gx-primary); }

.gx-post-body code {
  padding: 2px 7px;
  background: var(--gx-surface-hover);
  border: 1px solid var(--gx-border);
  border-radius: 6px;
  font-size: .9em;
}

.gx-post-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--gx-radius-md);
  margin: var(--gx-4) 0;
}

.gx-post-tags {
  margin-top: var(--gx-8);
  padding-top: var(--gx-6);
  border-top: 1px solid var(--gx-border);
}

.gx-post-tags__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--gx-text-muted);
  margin-bottom: var(--gx-3);
}

/* ---------- 8. SAHIFALASH (pagination) ---------- */
.gx-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--gx-8);
  list-style: none;
  padding: 0;
}

.gx-pagination li { display: flex; }

.gx-pagination a,
.gx-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 10px;
  border-radius: var(--gx-radius-sm);
  font-size: 14px;
  font-weight: 700;
  color: var(--gx-text);
  background: var(--gx-surface);
  border: 1px solid var(--gx-border);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.gx-pagination a:hover {
  background: var(--gx-surface-hover);
  border-color: var(--gx-border-strong);
}

.gx-pagination .is-active span {
  background: var(--gx-primary);
  border-color: var(--gx-primary);
  color: var(--gx-on-primary);
}

.gx-pagination .is-disabled span {
  color: var(--gx-text-faint);
  background: transparent;
  border-color: var(--gx-border);
}

.gx-pagination .is-ellipsis span {
  border: none;
  background: none;
  color: var(--gx-text-faint);
}

/* ---------- 9. BO'SH HOLAT ---------- */
.gx-empty {
  text-align: center;
  padding: var(--gx-16) var(--gx-6);
  background: var(--gx-surface);
  border: 1px dashed var(--gx-border-strong);
  border-radius: var(--gx-radius-lg);
}

.gx-empty__icon {
  width: 56px;
  height: 56px;
  margin-inline: auto;
  margin-bottom: var(--gx-4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gx-primary-soft);
  color: var(--gx-primary);
  font-size: 24px;
}

.gx-empty__title {
  font-family: var(--gx-font-display);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: var(--gx-2);
}

.gx-empty__desc {
  color: var(--gx-text-muted);
  font-size: 14px;
  max-width: 42ch;
  margin-inline: auto;
}

/* ---------- 10. FLASH XABAR ---------- */
.gx-flash {
  padding: var(--gx-4) var(--gx-5, 20px);
  border-radius: var(--gx-radius-md);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--gx-4);
}

.gx-flash--success {
  background: var(--gx-success-soft);
  color: #15803d;
}

.gx-flash--error {
  background: rgba(244, 63, 94, .12);
  color: #be123c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gx-flash--success { color: #4ade80; }
  :root:not([data-theme="light"]) .gx-flash--error { color: #fb7185; }
}

  :root[data-theme="dark"] .gx-flash--success { color: #4ade80; }
  :root[data-theme="dark"] .gx-flash--error { color: #fb7185; }


/* ─────────────────────────────────────────────────────────────
   MUNDARIJA, JADVAL VA O'XSHASH MAQOLALAR

   Maqolalar 1200-1500 so'zga o'sgach uchta narsa kerak bo'ldi:
   o'quvchi bo'lim topa olsin, texnik ko'rsatkichlar jadvalda
   ko'rinsin, va sahifa oxirida yo'l davom etsin.

   Mavjud uslub tizimidan chetga chiqilmagan: bir xil o'zgaruvchilar,
   bir xil radius va chegara ranglari.
   ───────────────────────────────────────────────────────────── */

.gx-toc {
  margin: 0 0 var(--gx-8);
  padding: var(--gx-5, 20px) var(--gx-6);
  background: var(--gx-surface-soft, var(--gx-surface));
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-md);
}

.gx-toc__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--gx-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gx-text-muted);
  margin-bottom: var(--gx-4);
  padding-bottom: var(--gx-3);
  border-bottom: 1px solid var(--gx-border);
}

/* MUNDARIJA ICHI.

   Chekinish `text-indent` bilan qilingan edi va uzun sarlavha
   o'ralganda ikkinchi qator raqam ostiga tushib ketardi. Flex
   bunday muammoni bilmaydi: raqam alohida ustunda turadi, matn
   esa o'z ustunida bemalol o'raladi.

   Ikki daraja ranq va o'lcham bilan ajratiladi — chiziqcha yoki
   ramka bilan emas: ular kartochka ichida ortiqcha shovqin
   qiladi. */
.gx-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gx-toc;
  font-size: 15px;
}

.gx-toc__item {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.gx-toc__item + .gx-toc__item { margin-top: 2px; }

.gx-toc__item a {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: 3px 0;
  line-height: 1.5;
  color: var(--gx-text);
  text-decoration: none;
  transition: color .15s ease;
}

/* Asosiy bo'lim. */
.gx-toc__item--1 {
  counter-increment: gx-toc;
  margin-top: 6px;
}

.gx-toc__item--1::before {
  content: counter(gx-toc);
  flex: 0 0 auto;
  min-width: 18px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--gx-primary);
  font-variant-numeric: tabular-nums;
}

.gx-toc__item--1 > a { font-weight: 600; }

/* Ichki bo'lim — bir pog'ona ichkarida va yengilroq. */
.gx-toc__item--2 { padding-left: 28px; }

.gx-toc__item--2::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gx-border);
  transform: translateY(-3px);
}

.gx-toc__item--2 > a {
  font-size: 14.2px;
  color: var(--gx-text-muted);
}

/* Sarlavhalarda allaqachon raqam bor — o'zimizniki ortiqcha. */
.gx-toc--plain .gx-toc__item--1::before {
  content: "";
  min-width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gx-primary);
  transform: translateY(-3px);
}

.gx-toc__item:hover > a { color: var(--gx-primary); }
.gx-toc__item:hover::before { color: var(--gx-primary); }

/* Sarlavhaga bosib kelinganda u tepaga yopishib qolmasin. */
.gx-post-body h3[id],
.gx-post-body h4[id] { scroll-margin-top: 90px; }

/* Jadval — matn ichida.

   Tor ekranda o'z ichida suriladi: sahifani yon tomonga surish
   butun tartibni buzardi. */
.gx-post-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  margin: 0 0 24px;
  border-collapse: collapse;
  font-size: 0.96rem;
  line-height: 1.6;
}

.gx-post-body th,
.gx-post-body td {
  padding: 10px 14px;
  border: 1px solid var(--gx-border);
  text-align: left;
  vertical-align: top;
}

.gx-post-body th {
  font-weight: 700;
  background: var(--gx-bg);
  white-space: nowrap;
}

.gx-post-body tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--gx-bg) 55%, transparent);
}

/* O'xshash maqolalar. */
.gx-related {
  margin-top: var(--gx-10, 40px);
  padding-top: var(--gx-8);
  border-top: 1px solid var(--gx-border);
}

.gx-related__title {
  font-family: var(--gx-font-display);
  font-weight: 800;
  font-size: 1.35rem;
  margin: 0 0 var(--gx-5, 20px);
}

.gx-related__grid {
  display: grid;
  /* `minmax(0, …)` SHART: usiz ustun sarlavha uzunligiga qarab
     cho'zilib, panjarani konteynerdan chiqarib yuboradi. */
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--gx-4);
}

.gx-related__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--gx-surface);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}

.gx-related__card:hover {
  border-color: var(--gx-primary);
  transform: translateY(-2px);
}

.gx-related__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--gx-bg);
  overflow: hidden;
}

.gx-related__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gx-related__body {
  display: block;
  padding: var(--gx-4);
}

.gx-related__name {
  display: block;
  font-weight: 650;
  font-size: 15px;
  line-height: 1.45;
  margin-bottom: 6px;
}

.gx-related__meta {
  display: block;
  font-size: 12.5px;
  color: var(--gx-text-faint);
}

@media (prefers-reduced-motion: reduce) {
  .gx-related__card:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────
   TO'LOV USULLARI — PROVAYDERLAR BO'YICHA

   SVG'lar sahifaga ichma-ich joylashtiriladi, shuning uchun ular
   `currentColor` ni oladi va mavzu bilan birga rangini o'zgartiradi.
   `<img>` da bunday qilib bo'lmasdi: bir rangli qora logotip
   qorong'i fonda ko'rinmay qolardi.
   ───────────────────────────────────────────────────────────── */

.gx-paymethods {
  margin: 0 0 var(--gx-8);
  padding: var(--gx-6);
  background: var(--gx-surface);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-md);
}

.gx-paymethods__title {
  font-family: var(--gx-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 var(--gx-5, 20px);
}

.gx-payprovider + .gx-payprovider {
  margin-top: var(--gx-6);
  padding-top: var(--gx-6);
  border-top: 1px solid var(--gx-border);
}

.gx-payprovider__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gx-3);
  margin-bottom: var(--gx-4);
}

.gx-payprovider__mark {
  display: inline-flex;
  align-items: center;
  font-family: var(--gx-font-display);
  font-weight: 800;
  font-size: 15px;
  color: color-mix(in srgb, var(--gx-brand, var(--gx-primary)) 75%, var(--gx-text));
}

.gx-payprovider__mark svg {
  width: auto;
  height: 20px;
  fill: currentColor;
}

.gx-payprovider__note {
  font-size: 12.5px;
  color: var(--gx-text-faint);
}

.gx-paymethods__grid {
  display: grid;
  /* `minmax(0, …)` SHART: usiz uzun nom ustunni cho'zib, panjarani
     konteynerdan chiqarib yuboradi. */
  grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr));
  gap: var(--gx-3);
}

.gx-paymethod {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 74px;
  padding: var(--gx-4) var(--gx-2);
  background: var(--gx-bg);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-sm);
  transition: border-color .18s ease;
}

.gx-paymethod:hover { border-color: var(--gx-brand, var(--gx-primary)); }

.gx-paymethod__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  color: color-mix(in srgb, var(--gx-brand, var(--gx-primary)) 80%, var(--gx-text));
}

.gx-paymethod__icon svg {
  width: auto;
  height: 100%;
  max-width: 100%;
  fill: currentColor;
}

.gx-paymethod__word {
  max-width: 100%;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--gx-text-muted);
  overflow-wrap: anywhere;
}

/* Logotipsiz kartochkada matn asosiy element — kattaroq va
   brend rangida. */
.gx-paymethod:not(:has(.gx-paymethod__icon)) .gx-paymethod__word {
  font-family: var(--gx-font-display);
  font-weight: 800;
  font-size: 14px;
  color: color-mix(in srgb, var(--gx-brand, var(--gx-primary)) 70%, var(--gx-text));
}

.gx-paymethods__hint {
  margin: var(--gx-6) 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--gx-text-muted);
}

/* `<x-img>` `<picture>` ichida keladi; `display: contents` bu
   o‘ramni tartibdan chiqarib tashlaydi, shunda mavjud uslublar
   ichkaridagi `<img>` ga avvalgidek tegadi. */
picture {
  display: contents;
}