/* =============================================================================
   ХЯНАЛТЫН ЭЛЕМЕНТ — ТОВЧ + ФОРМ
   -----------------------------------------------------------------------------
   Товч ба формын талбар нь нэг гэр бүл: ижил радиусын шатлал (энгийн `.rounded-2`
   = .75rem · жижиг `.rounded-1` = .5rem), ижил хэмжээний зарчим (`-sm` / энгийн /
   `-lg`), хэрэглэгч хоёуланг нь зэрэг тааруулдаг. Тиймээс НЭГ файлд
   (хэрэглэгчийн заавар 2026-09-13).

   ⚠️ Дүрмийг `style.css`-ээс ЗӨӨГӨӨГҮЙ — ХУУЛСАН. Эх хувилбар тэндээ хэвээр тул
   бусад төслүүд өмнөх кодоороо ажилласаар байна. Бүгд шилжиж дуусвал л
   `style.css`-ээс хуучин хувилбарыг хасна.

   ── ХАМРАХ ХҮРЭЭ ──
   1. ТОВЧ (`.btn` бүх хувилбар)              ← style.css мөр 463-649
   2. ВЭБИЙН СТАНДАРТ ФОРМ (`.form-control`,
      `.form-select`, `.form-group label`)    ← style.css мөр 654-676

   ⛔ Энд БАЙХГҮЙ:
   · `.btn-close` — modal/offcanvas-ын chrome тул MODAL хэсэгтэйгээ `style.css`-д.
   · **СИСТЕМИЙН ФОРМ** (`#green_crm_form` · `.crm-form-host` — CRM widget-ийн
     `forms.greensoft.mn/js/widget/index.js` гаргадаг `.rendered-form`
     `.formbuilder-*` markup). Extra-д ЭНЭ ХҮРТЭЛ ОГТ БАЙГААГҮЙ: төсөл бүр
     өөрийн style.css-д гараар хийсээр ирсэн (brb · energy · jdu · legend · mcs ·
     monnis · weproperty). Хамгийн боловсронгуй нь `public/weproperty/crm-form.css`
     (304 мөр, `.crm-form-host`-оор scope хийсэн, layout вариантуудтай).
     1990-д системийн форм ОГТ байхгүй тул энд оруулаагүй — жишиг болгох бол
     тусад нь шийднэ.

   Энэ файлыг ЗӨВХӨН шилжсэн төсөл ачаална (одоогоор 1990).
   Ачаалах дараалал: bootstrap → extra/style.css → … → ЭНЭ ФАЙЛ → төслийн brand/style
   ============================================================================= */


/* =============================================
   1 · ТОВЧ (btn)
   ============================================= */
/* ТОВЧ (btn) — ГУРВАН ХЭМЖЭЭ НЭГ ЗАГВАРТАЙ: `btn-sm` · (классгүй) · `btn-lg`.
   Ялгаа нь ЗӨВХӨН хэмжээ (доторх зай + үсгийн хэмжээ); бөөрөнхий (pill) хэлбэр, хүрээний
   зузаан, сүүдэр, hover-ийн өргөлт гурвуулан дээр ИЖИЛ.

   Бүгдийг Bootstrap-ийн ӨӨРИЙН хувьсагчаар өгсөн тул `btn-primary` · `btn-outline-*` ·
   `btn-link` бүх хувилбар автоматаар дагана. markup-д utility класс БИЧИХГҮЙ —
   `btn btn-primary` хангалттай (rounded-pill, px-*, fw-* нэмэх шаардлагагүй). */

.btn {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: .5rem;

  /* ⚠️ Товчны бичээс ЗААВАЛ нэг мөрөнд. `width: fit-content`-той flex item нь мөрөнд
     үлдсэн зайд багтахаар өргөнөө тооцдог тул зураастай үг (ж. «modal-sm») дунджаа
     хугарч, товч 2 мөр болдог — дараагийн мөр рүү шилжихийн оронд. */
  white-space: nowrap;

  /* Хэмжээ нь доорх «3 ТҮВШИН» хэсгээс — энд тоо бичихгүй. */

  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

/* Hover — бага зэрэг өргөгдөж сүүдэр нь гүнзгийрнэ.
   ⚠️ `:not(:focus-visible)` нь гарнаас фокуслах үеийн цагирагийг дарахгүйн тулд. */
.btn:hover:not(:focus-visible) {
  box-shadow: 0 .375rem .75rem rgba(0, 0, 0, .12);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

/* `btn-link` нь текст хэлбэртэй тул сүүдэр/өргөлт хамаарахгүй */
.btn-link,
.btn-link:hover:not(:focus-visible),
.btn-link:active {
  box-shadow: none;
  transform: none;
}


.btn-primary {
  --bs-btn-bg: var(--bs-primary) !important;
  --bs-btn-border-color: var(--bs-primary) !important;

  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black) !important;
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 75%, black) !important;

  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 70%, black) !important;
  --bs-btn-active-border-color: color-mix(
    in srgb,
    var(--bs-primary) 65%,
    black
  ) !important;

  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb) !important;

  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;

  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-disabled-color: #fff;
}

.btn-secondary {
  --bs-btn-bg: var(--bs-secondary) !important;
  --bs-btn-border-color: var(--bs-secondary) !important;

  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 85%, black) !important;
  --bs-btn-hover-border-color: color-mix(
    in srgb,
    var(--bs-secondary) 75%,
    black
  ) !important;

  --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 70%, black) !important;
  --bs-btn-active-border-color: color-mix(
    in srgb,
    var(--bs-secondary) 65%,
    black
  ) !important;

  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb) !important;

  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;

  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
  --bs-btn-disabled-color: #fff;
}

.btn-outline-primary {
  --bs-btn-bg: transparent !important;
  --bs-btn-border-color: var(--bs-primary) !important;
  --bs-btn-color: var(--bs-primary) !important;

  --bs-btn-hover-bg: var(--bs-primary) !important;
  --bs-btn-hover-border-color: var(--bs-primary) !important;
  --bs-btn-hover-color: #fff !important;

  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 85%, black) !important;
  --bs-btn-active-border-color: color-mix(
    in srgb,
    var(--bs-primary) 85%,
    black
  ) !important;
  --bs-btn-active-color: #fff !important;

  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb) !important;

  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
}

.btn-outline-secondary {
  --bs-btn-bg: transparent !important;
  --bs-btn-border-color: var(--bs-secondary) !important;
  --bs-btn-color: var(--bs-secondary) !important;

  --bs-btn-hover-bg: var(--bs-secondary) !important;
  --bs-btn-hover-border-color: var(--bs-secondary) !important;
  --bs-btn-hover-color: #fff !important;

  --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 85%, black) !important;
  --bs-btn-active-border-color: color-mix(
    in srgb,
    var(--bs-secondary) 85%,
    black
  ) !important;
  --bs-btn-active-color: #fff !important;

  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb) !important;

  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-secondary);
  --bs-btn-disabled-color: var(--bs-secondary);
}

.btn-circle {
  border-radius: 50% !important;
  padding: 0px !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-circle {
  transition: all .4s ease-in-out;
}
.btn-circle:after {
  content: '\f105';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  line-height: 1;
}
.btn-circle:has(i):after {
  content: none;
}


/* ── СОШИАЛ ТОВЧ — брэндийн ЦУЛ өнгө ──────────────────────────────────────
   Хэрэглээ: `<a class="btn btn-viber">`. Хэмжээ, булан, хүрээний зузаан нь
   доорх 3 түвшний жишгээс — энд ЗӨВХӨН өнгө.

   ⚠️ Бичээсийн өнгийг ялгарлаар СОНГОСОН (WCAG 1.4.3 AA, 4.5:1) — брэндийн
      уламжлалаар биш. Хэмжиж баталсан: telegram 5.57 · snapchat 9.85 нь
      БАРААН текстээр л давна (цагаанаар 2.8 ба 1.6 болно).
   🔴 whatsapp нь ЦАГААН бичээстэй — хэрэглэгчийн шийдвэр 2026-09-14. Албан
      ёсны #25D366 дээр цагаан = 1.98:1, AA-г ДАВАХГҮЙ. Давахын тулд ногооныг
      36% гүнзгийрүүлэх (#188741) эсвэл бараан бичээс рүү буцах хэрэгтэй.
   ⚠️ facebook · instagram · youtube · viber дөрвийн АЛБАН ЁСНЫ өнгө аль ч
      бичээсээр 4.5-д хүрдэггүй (4.00–4.48) тул 0.5–6.5%-иар гүнзгийрүүлэв.
      Icon-ы палитр (`style.css` → `.social-*`) нь албан ёсны өнгөөрөө ХЭВЭЭР. */

.btn-facebook,
.btn-instagram,
.btn-youtube,
.btn-linkedin,
.btn-viber,
.btn-whatsapp,
.btn-telegram,
.btn-pinterest,
.btn-snapchat,
.btn-discord,
.btn-twitch,
.btn-x,
.btn-tiktok,
.btn-github {
  --bs-btn-border-color: var(--bs-btn-bg);
  --bs-btn-hover-bg: var(--bs-btn-bg);
  --bs-btn-hover-border-color: var(--bs-btn-bg);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-active-bg: var(--bs-btn-bg);
  --bs-btn-active-border-color: var(--bs-btn-bg);
  --bs-btn-active-color: var(--bs-btn-color);
}

/* Icon-ы брэнд өнгө (`style.css` → `.fa-*`) цул дэвсгэр дээр далдардаг */
:is(.btn-facebook, .btn-instagram, .btn-youtube, .btn-linkedin, .btn-viber,
    .btn-whatsapp, .btn-telegram, .btn-pinterest, .btn-snapchat, .btn-discord,
    .btn-twitch, .btn-x, .btn-tiktok, .btn-github) > i {
  color: inherit;
}

.btn-facebook  { --bs-btn-bg: #1772E7; --bs-btn-color: #fff; }
.btn-instagram { --bs-btn-bg: #DA2F69; --bs-btn-color: #fff; }
.btn-youtube   { --bs-btn-bg: #ED0000; --bs-btn-color: #fff; }
.btn-linkedin  { --bs-btn-bg: #0A66C2; --bs-btn-color: #fff; }
.btn-viber     { --bs-btn-bg: #715FEE; --bs-btn-color: #fff; }
.btn-pinterest { --bs-btn-bg: #E60023; --bs-btn-color: #fff; }
.btn-discord   { --bs-btn-bg: #5865F2; --bs-btn-color: #fff; }
.btn-twitch    { --bs-btn-bg: #9146FF; --bs-btn-color: #fff; }
.btn-whatsapp  { --bs-btn-bg: #25D366; --bs-btn-color: #fff; }   /* 1.98:1 — дээрх 🔴 */

.btn-telegram  { --bs-btn-bg: #26A5E4; --bs-btn-color: #212529; }
.btn-snapchat  { --bs-btn-bg: #F7CA00; --bs-btn-color: #212529; }

/* Хар/цагаан брэнд — темтэй хамт эргэнэ (дэвсгэр нь `--social-*`, бичээс нь
   биеийн дэвсгэрийн өнгө тул үргэлж эсрэгээрээ таарна) */
.btn-x         { --bs-btn-bg: var(--social-x-color);      --bs-btn-color: var(--bs-body-bg); }
.btn-tiktok    { --bs-btn-bg: var(--social-tiktok-color); --bs-btn-color: var(--bs-body-bg); }
.btn-github    { --bs-btn-bg: var(--social-github-color); --bs-btn-color: var(--bs-body-bg); }



/* =============================================
   2 · ФОРМ — вэбийн стандарт хяналтууд
   (Bootstrap-ийн `.form-control` · `.form-select` дээрх бидний засвар)
   ============================================= */

.form-group label {
  color: var(--bs-body-color);
}
.form-control {
  appearance: auto !important;
}

/* ═══ ХЭМЖЭЭНИЙ 3 ТҮВШИН — товч ба формын талбар НЭГ стандарт ══════════════
   Түвшин бүр нэг хэсэг: эхэнд товч (Bootstrap-ын `--bs-btn-*` API-аар),
   дараа нь `.form-control` · `.form-select` · `.input-group-text`.
   Хэмжээ солих бол ТЭР ТҮВШНИЙ хэсгээ л засна.

   ⚠️ ХҮРЭЭНИЙ ӨНГӨ энд БАЙХГҮЙ — товч нь вариантынхаа өнгөтэй, талбар нь
      саармаг `--bs-border-color`. Зөвхөн ЗУЗААН нь ижил. */

/* Булан ба хүрээний зузаан — Bootstrap-ын ӨӨРИЙН токеноор, зөвхөн эдгээр
   элемент дээр (`:root`-д тавибал карт, модал, хүснэгт г.м БҮГД дагана).
   Bootstrap-ын `-sm`/`-lg` дүрмүүд эднийг уншдаг тул булангийн ажлыг
   өөрсдөө зөв хийнэ — доор давтаж бичихгүй. */
.btn,
.form-control,
.form-select,
.input-group-text {
  --bs-border-radius-sm: .5rem;      /* `-sm` түвшний булан */
  --bs-border-radius: .75rem;        /* үндсэн түвшний булан */
  --bs-border-radius-lg: .75rem;     /* `-lg` нь буланг ТОМРУУЛАХГҮЙ */
  --bs-border-width: 2px;
}


/* ── ҮНДСЭН түвшин — 45px ─────────────────────────────────────────────── */

.btn {
  --bs-btn-padding-y: .625rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-font-size: .875rem;
  --bs-btn-font-weight: 500;
}

.form-control,
.form-select,
.input-group-text {
  padding: .625rem 1.5rem;
  font-size: .875rem;
  font-weight: 500;
}

/* Сумны зай — баруун padding дээр icon-ы өргөнийг НЭМНЭ (`em` тул үсгээ дагана) */
.form-select {
  padding-right: calc(1.5rem + 1.25em);
}


/* ── `-sm` түвшин — 37px ──────────────────────────────────────────────── */

.btn-sm {
  --bs-btn-padding-y: .375rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: .875rem;
}

/* ⚠️ `.input-group-sm > …` нь Bootstrap дээр ХАТУУ утгатай (0,2,0) бөгөөд суурь
   дүрмийг (0,1,0) дардаг — товч ч багтана. Тиймээс ижил жинтэйгээр энд нэгтгэв:
   `input-group-sm` = `form-control-sm` = `btn-sm`. */
.form-control-sm,
.form-select-sm,
.input-group-sm > .btn,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
  padding: .375rem 1rem;
  font-size: .875rem;
  font-weight: 500;
}

.form-select-sm,
.input-group-sm > .form-select {
  padding-right: calc(1rem + 1.25em);
}


/* ── `-lg` түвшин — 56px ──────────────────────────────────────────────── */

.btn-lg {
  --bs-btn-padding-y: .875rem;
  --bs-btn-padding-x: 2rem;
  --bs-btn-font-size: 1rem;
}

.form-control-lg,
.form-select-lg,
.input-group-lg > .btn,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
  padding: .875rem 2rem;
  font-size: 1rem;
  font-weight: 500;
}

.form-select-lg,
.input-group-lg > .form-select {
  padding-right: calc(2rem + 1.25em);
}