/* GENERAL */

:root,
[data-bs-theme] {
  --bs-primary: #E57825;
  --bs-primary-rgb: 229, 120, 37;
  --bs-secondary: #B5813E;
  --bs-secondary-rgb: 181, 129, 62;
}

/* Брэндийн фонт — extra-гийн `body { font-family: "EffraTrial" }`-г давна
   (Mulish нь _start.php / layout.blade.php-д Google Fonts-оор татагдана) */
body {
  font-family: "Mulish", sans-serif;
}




  /* LAPTOP CONTAINER FIX */

   /* 1280px (2560@200%) дэлгэц дээр хажуу тал 70px зайтай нь оновчтой.
   Гэвч Bootstrap container 1400px-аас дээш 1320px-д тогтдог тул
   1536px (1920@125%) зэрэг laptop дээр хажуу зай хэт өсдөг (108px+).
   Шийдэл: 1200–1800px мужид дэлгэцээс тогтмол 140px (2 талд 70px) хасаж,
   бүх laptop-ыг 1280 дэлгэцтэй ижил зайтай болгоно.
   1280 ба түүнээс доош → max(1140px) тул огт өөрчлөгдөхгүй.
   1800px-аас дээш (1920 desktop) → Bootstrap default 1320px хэвээр. */
@media (min-width: 1200px) and (max-width: 1799.98px) {
  .container {
    max-width: max(1140px, calc(100vw - 140px)) !important;
  }
}




/* BTN — 3 ХЭМЖЭЭНИЙ СТАНДАРТ: btn-sm · default · btn-lg (хэрэглэгч 2026-08-25).
   ⚠️ Padding-ыг ШУУД өгдөг тул extra-гийн `--bs-btn-padding-*` хувьсагчийг дардаг —
      иймд btn-sm/btn-lg-ийг ЭНД тодорхойлохгүй бол огт ялгарахгүй. Default дүрэмд
      `:not(.btn-sm):not(.btn-lg)` тавьж, гурвыг харилцан үл нөлөөтэй болгов. */

.btn:not(.btn-circle) {
  font-weight: 700;
}

/* default (одоо байгаа хэмжээ — өөрчлөгдөөгүй) */
.btn:not(.btn-circle):not(.btn-sm):not(.btn-lg) {
  padding: .5rem 1rem;
  border-radius: .5rem;
  font-size: .75rem;
}
/* small */
.btn:not(.btn-circle).btn-sm {
  padding: .375rem .75rem;
  border-radius: .4rem;
  font-size: .7rem;
}
/* large */
.btn:not(.btn-circle).btn-lg {
  padding: .625rem 1.25rem;
  border-radius: .625rem;
  font-size: .85rem;
}

@media (min-width: 992px) {
  .btn:not(.btn-circle):not(.btn-sm):not(.btn-lg) {
    padding: .75rem 1.5rem;
    font-size: .875rem;
    border-radius: .75rem;
  }
  .btn:not(.btn-circle).btn-sm {
    padding: .5rem 1rem;
    font-size: .8rem;
    border-radius: .6rem;
  }
  .btn:not(.btn-circle).btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
    border-radius: .9rem;
  }
}




/* FORM — САЙТЫН БҮХ ФОРМЫН СУУРЬ */

/* Хэмжээг НЭГ УДАА токеноор тодорхойлж, хоёр газар хэрэглэнэ:
     ① `.form-control`/`.form-select` — төслийн өөрийн формууд
     ② `#green_crm_form …`           — CRM widget (доорх тайлбарыг үз)
   Утга нь дээрх `.btn`-тэй ЯГ ижил шатлалтай (padding · font-size · radius). */

:root,
[data-bs-theme] {
  --form-padding: .5rem 1rem;
  --form-font-size: .75rem;
  --form-radius: .5rem;
  --form-btn-padding: .5rem 1rem;
}

@media (min-width: 992px) {
  :root,
  [data-bs-theme] {
    --form-padding: .75rem 1rem;
    --form-font-size: .875rem;
    --form-radius: .75rem;
    --form-btn-padding: .75rem 1.5rem;
  }
}

.form-control,
.form-select {
  height: auto;
  padding: var(--form-padding);
  font-size: var(--form-font-size);
  line-height: 1.5;
  border-radius: var(--form-radius);
}

.form-label,
.form-check-label {
  font-size: var(--form-font-size);
}

/* CRM widget (`forms.greensoft.mn`) — ADMIN-PANEL §8.8.
   Widget нь `.rendered-form.formbuilder-embedded-bootstrap` (0,3,0)-оор Bootstrap 3-ын
   метрикийг тулгадаг (input 34px · padding 6px 12px · radius 4px) тул дээрх (0,1,0)
   суурь дүрэм ХҮРДЭГГҮЙ. ID сонгогчоор (1,1,0) ижил токенуудыг ДАХИН тунхаглана. */

#green_crm_form .form-control,
#green_crm_form .form-select {
  height: auto;
  padding: var(--form-padding);
  font-size: var(--form-font-size);
  line-height: 1.5;
  border-radius: var(--form-radius);
}

#green_crm_form label,
#green_crm_form .form-check-label {
  font-size: var(--form-font-size);
}

/* ТАЛБАРЫН шошго (`.form-group`-ийн ШУУД хүү: «Овог, нэр» · «Ангилал» · «Бусад» …) —
   болд + доод зай. Сонголтын шошго (`.formbuilder-checkbox/-radio > label`) нь доод
   түвшинд байдаг тул хөндөгдөхгүй — тэд жирийн жинтэй хэвээр. */
#green_crm_form .form-group > label {
  font-weight: 700;
  margin-bottom: .375rem;
}

/* Шошго хоосон үед (админд label-ыг зориуд хоослосон бүлгүүд) widget нь тагийг ГАРГАСААР
   байдаг: `inline-block` + өндөр 0 боловч МӨРИЙН ХАЙРЦАГ (line-height) үүсгэж ~24px хий
   зай авдаг. Тиймээс бүрэн унтраана. */
#green_crm_form .form-group > label:empty {
  display: none;
}

#green_crm_form .btn {
  padding: var(--form-btn-padding);
  font-size: var(--form-font-size);
  font-weight: 700;
  border-radius: var(--form-radius);
}

/* Widget нь агуулгаа өөрийн `.card`-д хийдэг — modal/блокийн хүрээтэй ДАВХАР хүрээ болно */
#green_crm_form .card {
  border: 0;
  border-radius: 0;
  background: transparent;
}

#green_crm_form .card-body {
  padding: 0;
}

/* ℹ️ Хэсгийн гарчгийн ХЭМЖЭЭНД CSS БИЧИХГҮЙ — маягтыг админаас **h6**-аар үүсгэсэн тул
   `.typography h1-h6` (extra)-аар өөрөө 16px/700 болно (хэрэглэгч 2026-08-22: «h4-ийг
   заавал CSS бичихгүй h6 болгох, задгай CSS-ийг багасга»). */

/* Check / radio — хайрцаг ба текст наалдахгүй, урт текст хайрцгийн ХАЖУУД эвхэгдэнэ
   (widget-ийн `.formbuilder-checkbox > input + label` нь зайгүй, block урсгалтай) */
#green_crm_form .checkbox-group,
#green_crm_form .radio-group {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

#green_crm_form .formbuilder-checkbox,
#green_crm_form .formbuilder-radio {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}

#green_crm_form .formbuilder-checkbox .form-check-input,
#green_crm_form .formbuilder-radio .form-check-input {
  flex-shrink: 0;
  margin-top: .2em;
}

#green_crm_form .formbuilder-checkbox label,
#green_crm_form .formbuilder-radio label {
  margin-bottom: 0;
}




/* HEADING ROW */

.heading-row .heading-main small {
  background: transparent;
  border-radius: 0px;
  padding: 0px;
  text-transform: uppercase;
  color: var(--bs-primary);
}


/* BITRIX24 ЧАТ ТОВЧ — offcanvas нээлттэй үед далдална.
   b24-widget-button z-index 10150 нь offcanvas (1045)-аас өндөр тул жижиг утсан дээр
   цэсний доод «Санал хүсэлт» товчийг халхалдаг. */

body:has(.offcanvas.show) .b24-widget-button-wrapper,
body:has(.offcanvas.show) .b24-widget-button-shadow {
  display: none !important;
}


/* HEADING VAR-3 — МОБАЙЛ ХАМГААЛАЛТ
   extra нь .heading-var-3 h2-т white-space: nowrap өгдөг (ард нь ::after gradient
   зураас гаргахын тулд). Урт монгол гарчиг мобайл дээр хайрцгаасаа таслагдана.
   Тиймээс md-ээс доош гарчгийг мөр таслуулж, зураасыг нуулаа (энгийн heading-row
   шиг харагдана). md+ дээр анхны хувилбар хэвээр. */

@media (max-width: 767.98px) {
  .heading-row.heading-var-3>.heading-main>h2 {
    display: block;
    white-space: normal;
  }

  .heading-row.heading-var-3>.heading-main>h2::after {
    display: none;
  }
}


/* BREADCRUMB  (1990 default бүтэц — суурь стайл extra-д, брэндийн давхарга энд) */

.breadcrumb-item {
  font-size: .75rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .125rem;
}

.breadcrumb-item+.breadcrumb-item::before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  letter-spacing: normal;
}

.breadcrumb-item.active {
  color: var(--bs-warning);
}


/* CARDS V8 — item-action нь текстээс item хоорондын зайтай ижил зайд салж зогсоно
   (items-wrapper дээрх gap-4 / gap-md-6 / gap-lg-8-тай тэнцүү) */

.cards-v2 .item-details>.item-action,
.cards-v3 .item-details>.item-action {
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .cards-v2 .item-details>.item-action,
  .cards-v3 .item-details>.item-action {
    margin-top: 1.5rem;
  }
}

@media (min-width: 992px) {
  .cards-v2 .item-details>.item-action,
  .cards-v3 .item-details>.item-action {
    margin-top: 2rem;
  }
}


/* TEXT SCALE ≥1200 — item-info + rich text (.875rem суурийг бага зэрэг томсгоно) */

/* item-info суурь: бүх жижиг дэлгэцэд .875rem-д тогтооно (зарим блокт item-info нь
   <small> биш <p>/<div> тул суурь 1rem болдгийг жигдэлнэ). ≥1200-д доорх media .95rem. */
.item-info {
  font-size: .875rem;
}

@media (min-width: 1200px) {
  .item-info,
  .typography p,
  .typography ul li,
  .typography ol li {
    font-size: .95rem;
  }
}


/* SOCIAL ICON FIX — extra нь --social-x/tiktok/github-color-ыг зөвхөн :root ба
   [data-bs-theme="dark"]-д тодорхойлдог. Custom property өвлөгддөг тул dark header
   дотор байрлах light offcanvas-д X icon цагаан хэвээр үлдэж алга болдог.
   Тиймээс light дэд модод утгыг нь буцааж тогтооно. */

[data-bs-theme="light"] {
  --social-x-color: #000000;
  --social-tiktok-color: #000000;
  --social-github-color: #181717;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ДАРААЛСАН БЛОКИЙН ЗАЙ ХУРААХ (хэрэглэгч 2026-08-25)
   ───────────────────────────────────────────────────────────────────────────
   Блок бүрийн `.container` нь `py-11 py-md-13` — дээш доош ТЭГШ. Гэвч ижил
   цагаан дэвсгэртэй 2 блок дараалахад зай ДАВХАРДАЖ 96/128px болдог.
   ⇒ Дээд блокийн ДООД зайг л хураана (дараагийн блокийн дээд зай үлдэнэ).

   ЯАГААД ДООД талыг (дараагийнхных нь ДЭЭД талыг биш):
     section-ууд `overflow: hidden`-тэй. Доод блокийн эхний элемент сүүдэртэй
     байвал түүний `padding-top`-ыг 0 болгоход сүүдэр ирмэгээр ТАЙРАГДАНА.

   ⭐ ЗӨВХӨН ДАРААГИЙНХ НЬ ИЖИЛ «ЭНГИЙН ЦАГААН» БЛОК ҮЕД (хэрэглэгч 2026-08-25):
     · `:not(.related-pages-nav)` — ДЭЭД дэд цэс (`_sub-header.blade.php`). ХОЁР
       талаараа онцгой (хэрэглэгч 2026-08-26): ӨӨРИЙНХ нь доод зайг хураахгүй
       (нам зурвас тул шахагдвал блоктой наалдана) БА түүний ӨМНӨХ блокийг ч
       хураахгүй — өөр дэвсгэртэй зурвас.
     · `:not(.related-pages)` — «Бусад холбоосууд» нь ШАРГАЛ градиенттэй
       (`linear-gradient(90deg, rgb(228,223,210)…)`). Өөр өнгө рүү наалдвал
       дээд блокийн контент шаргал зурвастай шууд наалдаж муухай харагдана.
     · `> .container` — дараагийн блок ЗААВАЛ шууд хүү `.container`-тай байх.
       Бүтэн дэвсгэр зурагтай блокууд (`hero-v2`, `features-v2`) ийм container-гүй
       тул энэ шалгуураар автоматаар ХАСАГДАНА — цагаан блок зурган зурвастай
       наалдахаас сэргийлнэ.

   ⚠️ ГУРВАН СОНГОГЧ — section-уудын ХООРОНД өөр элемент орж болно. Бүх хуудсыг
      тоолоход 3 хэв гарсан: шууд (40), `STYLE+DIV` (2), `DIV+SCRIPT` (1).
      `+` нь дундах элементийг алгасдаггүй тул 0/1/2 завсарлагыг тус тусад нь бичив.
      Завсрын элементэд `:not(section)` ЗААВАЛ — эс бөгөөс «нэг section алгасаад
      дараагийнх нь энгийн» тохиолдолд буруу таарч, зурган зурвасын өмнөх блокийг
      хураах байсан (нүүрний `posts-v1` → `features-v2` → `posts-v1`).
   ⚠️ `!important` ЗААВАЛ — `py-11`/`py-md-13` нь Bootstrap утилити тул өөрсдөө
      `!important`-той; үүнгүйгээр дүрэм таарсан ч ХЭРЭГЖДЭГГҮЙ.
   ⚠️ `:has()` — Safari 15.4+ / Chrome 105+. Хуучин браузерт дүрэм үл ажиллаж,
      одоогийн зай хэвээр үлдэнэ (эвдрэхгүй).
   ⚙️ Онцгой блокт зай буцаах бол тухайн блокийн `<style>`-д `!important`-тай өг. */

section:not(.related-pages-nav):has(+ section:not(.related-pages):not(.related-pages-nav) > .container) > .container,
section:not(.related-pages-nav):has(+ :not(section) + section:not(.related-pages):not(.related-pages-nav) > .container) > .container,
section:not(.related-pages-nav):has(+ :not(section) + :not(section) + section:not(.related-pages):not(.related-pages-nav) > .container) > .container {
  padding-bottom: 0 !important;
}

/* ── ШҮҮЛТҮҮРИЙН ЧИП — iOS SAFARI-Д ТЕКСТ АЛГА БОЛОХ (хэрэглэгч 2026-08-28) ────────
   `.item-filter button` (мэдээний ангилал · ажлын байрны хэлтэс) нь өнгөө ЗААГААГҮЙ
   байсан ⇒ `<button>` нь UA-гийн `buttontext` СИСТЕМ өнгийг авдаг. iOS Safari түүнийг
   төхөөрөмжийн БАРААН горимд ЦАГААН болгож шийддэг тул цагаан `bg-body` дээр текст
   бүрмөсөн алга болж байв (идэвхтэй чип нь extra-гийн `.item-filter button.active`-аас
   өнгөтэй тул харагдсаар — иймд ЗӨВХӨН идэвхгүй чипүүд хоосон харагдана).
   Chrome/Firefox нь `ButtonText`-ыг үргэлж бараанаар шийддэг тул тэнд илэрдэггүй.

   ⚠️ `text-body` УТИЛИТИ БОЛОХГҮЙ: тэр нь `!important` тул extra-гийн `.active`
      (цагаан текст, !important-гүй) дүрмийг дарж идэвхтэй чипийг эвдэнэ.
      Энд `!important`-гүй, жин (0,2,0) — `.item-filter button.active` (0,2,1) дийлнэ. */
.item-filter button {
  color: var(--bs-body-color);
}