/**
 * GPS LIFE — Docs Knowledge Base Styles v2.9
 * Файл: machic-child/css/docs-styles.css
 *
 * Всі класи/ID відповідають фактичній розмітці в:
 *   - single-docs.php v2.4
 *   - partials/docs-header.php v2.3
 *   - partials/docs-footer.php v2.2
 *   - inc/docs-functions.php v2.6 (render_nav_tree + mobile bottom menu disable)
 *
 * Єдиний breakpoint: 1024px (desktop / mobile).
 * Обгортка #gps-docs для high-specificity (перебиває LiteSpeed Critical CSS).
 *
 * v2.3 (17 Apr 2026):
 *   - Секція 28: приховати Machic mobile-bottom-menu на /docs/
 *   - Секція 28: scrollToTop override для /docs/ (z-index + bottom)
 *   - Секція 28: Share buttons збільшено (34→44 desktop, 40→48 mobile)
 *   - Секція 28: Sidebar CTA шрифти +1px
 *
 * v2.4 (17 Apr 2026) — Phase 2a:
 *   - Секція 21: FLOATING CTA переробка — тонкий рядок ~48px (було 2 рядки ~90px)
 *   - Секція 22: BOTTOM SHEET — close button + primary TG + reorganization
 *   - Секція 24: SPACER на мобільному 90 → 60px (синхронно з новою CTA)
 *   - Секція 28.2: scrollToTop на /docs/ 100 → 70px
 *   - Секція 29: max-width 360px для mobile menu CTAs
 *
 * v2.5 (17 Apr 2026) — Phase 2a+:
 *   - Секція 5: mobile menu services — окантовки (консистентність з bottom sheet)
 *   - Секція 5: mobile menu section-title — uppercase styling
 *   - Секція 22: bottom sheet close button — круглий стиль (явніше виглядає як button)
 *
 * v2.6 (18 Apr 2026) — Phase 2b:
 *   - Секція 5: селектор `> div` → `.docs-mobile-menu__service-text` (семантична чистота)
 *   - Секція 14.1 (нова): стилі для sections dropdown (sibling articles list)
 *
 * v2.9 (22 Apr 2026) — Search Modal finalize:
 *   - Секція 4 переписана під .search-input-wrapper (нативний плагінський selector)
 *   - .docs-mobile-search стилі видалені (елемент більше не рендериться)
 *   - Додано приховування hero-тригера на /docs/ mobile + хедер-тригера на desktop /docs/
 *   - Синхронізація: шапка тепер збігається з реальним станом коду
 */


/* ============================================================
   0. CSS CUSTOM PROPERTIES
   ============================================================ */

#gps-docs {
  --brand: #4667ff;
  --brand-hover: #3553e0;
  --brand-light: rgba(70, 103, 255, 0.08);
  --brand-light-12: rgba(70, 103, 255, 0.12);
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #1d1d1f;
  --text-sec: #6e6e73;
  --text-mut: #86868b;
  --border: #e5e5ea;
  --hero-start: #0a0e27;
  --hero-mid: #1a1f4e;
  --hero-end: #2d1b69;
  --radius-card: 18px;
  --radius-block: 14px;
  --radius-inner: 12px;
  --radius-btn: 10px;
  --radius-item: 8px;
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.06);
  --transition-bounce: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Unified animation tokens для всіх overlay'їв (search, menu, sheet, backdrop).
   Declared на :root — щоб body > .docs-search__backdrop теж бачив (він поза #gps-docs).
   Open — ease-out-quart, довгий м'який хвіст (Apple feel).
   Close — ease-in, швидший (UI відчувається чуйним). */
:root {
  --gps-open:  420ms cubic-bezier(0.22, 1, 0.36, 1);
  --gps-close: 260ms cubic-bezier(0.4, 0, 1, 1);
}


/* ============================================================
   1. RESETS & BASE
   ============================================================ */

#gps-docs {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}
#gps-docs *, #gps-docs *::before, #gps-docs *::after { box-sizing: border-box; }
#gps-docs a { text-decoration: none; color: inherit; }
#gps-docs button { font-family: var(--font); cursor: pointer; }
#gps-docs img { max-width: 100%; height: auto; }


/* ============================================================
   2. UTILITY CLASSES
   ============================================================ */

#gps-docs .desktop-only { display: flex; }
#gps-docs .mobile-only  { display: none; }

@media (max-width: 1023px) {
  #gps-docs .desktop-only { display: none !important; }
  #gps-docs .mobile-only  { display: flex !important; }
}


/* ============================================================
   3. HEADER  (partials/docs-header.php)
   ============================================================ */

#gps-docs .docs-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent; padding: 0 24px;
  transition: transform .3s ease, background .2s, border-color .2s;
}
#gps-docs .docs-header.scrolled {
  background: rgba(255,255,255,.88);
  border-bottom-color: rgba(0,0,0,.08);
}
#gps-docs .docs-header.is-hidden { transform: translateY(-100%); }

#gps-docs .docs-header__inner {
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; gap: 16px;
}

/* Logo */
#gps-docs .docs-header__logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#gps-docs .docs-header__logo-icon { width: 34px; height: 34px; border-radius: 10px; }
#gps-docs .docs-header__logo-full { height: 32px; width: auto; }
#gps-docs .docs-header__logo-divider { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
#gps-docs .docs-header__logo-sub {
  font-size: 13px; color: var(--text-mut); font-weight: 500;
  padding: 6px 10px; margin: -6px -4px; border-radius: 8px;
  transition: color .2s, background-color .2s;
}
#gps-docs .docs-header__logo:hover .docs-header__logo-sub { color: var(--brand); background: rgba(70,103,255,.05); }

/* Logo — компонентно-замкнена логіка видимості icon vs full (v2.6 Phase 2b).
   Власний breakpoint логотипу 359px, незалежний від layout-breakpoint 1024px.
   Утилітарні класи .mobile-only / .desktop-only тут НЕ використовуються —
   щоб уникнути конфліктів при LiteSpeed Critical CSS injection. */
#gps-docs .docs-header__logo-icon { display: none; }
#gps-docs .docs-header__logo-full { display: block; }

@media (max-width: 1023px) {
  /* Мобільний діапазон (360–1023px): повне лого 30px height
     (natural width ≈175px через SVG viewBox 5.833:1). */
  #gps-docs .docs-header__logo-full { height: 30px; }
}

@media (max-width: 359px) {
  /* Вузький смартфон (≤ 359px): ховаємо повне лого, показуємо піктограму.
     План Б: якщо в DevTools побачимо overflow на 360px viewport —
     змінити "max-width: 359px" на "max-width: 380px" одним правилом. */
  #gps-docs .docs-header__logo-full { display: none; }
  #gps-docs .docs-header__logo-icon { display: block; }
}

/* Search desktop wrapper — повні стилі в секції 4.
   Тут лише position для absolute-dropdown. */
#gps-docs .docs-header__search {
  position: relative;
}

/* Nav desktop */
#gps-docs .docs-header__nav { display: flex; align-items: center; gap: 16px; }
#gps-docs .docs-header__nav-link {
  font-size: 14px; color: var(--text-sec); font-weight: 500;
  padding: 8px 12px; margin: -8px -4px; border-radius: 8px;
  transition: color .2s, background-color .2s;
}
#gps-docs .docs-header__nav-link:hover { color: var(--brand); background: rgba(70,103,255,.05); }

/* Services dropdown */
#gps-docs .docs-header__dropdown { position: relative; }
#gps-docs .docs-header__dropdown-trigger {
  font-size: 14px; color: var(--text-sec); font-weight: 500;
  background: none; border: none; cursor: pointer;
  padding: 8px 12px; margin: -8px -4px; border-radius: 8px;
  display: flex; align-items: center; gap: 4px;
  transition: color .2s, background-color .2s;
}
#gps-docs .docs-header__dropdown-trigger:hover { color: var(--brand); background: rgba(70,103,255,.05); }
#gps-docs .docs-header__dropdown-trigger svg { transition: transform .2s; }
#gps-docs .docs-header__dropdown-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
#gps-docs .docs-header__dropdown-menu {
  display: none; position: absolute; top: 100%; right: 0; margin-top: 4px;
  background: #fff; border-radius: 14px; padding: 8px;
  box-shadow: 0 12px 48px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05);
  min-width: 260px; z-index: 110; animation: gps-fadeInUp .2s ease;
}
#gps-docs .docs-header__dropdown-menu.is-open { display: block; }
#gps-docs .docs-header__dropdown-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; transition: background .15s;
}
#gps-docs .docs-header__dropdown-item:hover { background: var(--brand-light); }
#gps-docs .docs-header__dropdown-icon { font-size: 18px; flex-shrink: 0; }
#gps-docs .docs-header__dropdown-label { font-size: 14px; font-weight: 600; color: var(--text); }
#gps-docs .docs-header__dropdown-desc { font-size: 12px; color: var(--text-mut); }

/* Shop button */
#gps-docs .docs-header__shop-btn {
  font-size: 13px; color: #fff; font-weight: 600;
  background: linear-gradient(135deg, #4667ff, #7b61ff);
  padding: 8px 18px; border-radius: 10px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 2px 12px rgba(70,103,255,.3); transition: var(--transition-bounce);
}
#gps-docs .docs-header__shop-btn:hover {
  transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 20px rgba(70,103,255,.4);
}

/* Mobile controls */
#gps-docs .docs-header__mobile-controls { align-items: center; gap: 12px; }
#gps-docs .docs-header__mobile-btn {
  width: 40px; height: 40px; padding: 0; border-radius: 10px; border: none;
  background: rgba(0,0,0,.05); display: flex; align-items: center; justify-content: center;
  color: var(--text-sec); transition: background .2s, color .2s;
}
#gps-docs .docs-header__mobile-btn svg { width: 22px; height: 22px; }
#gps-docs .docs-header__mobile-shop svg { width: 18px; height: 18px; }

#gps-docs #docs-mobile-search-btn svg { width: 22px; height: 22px; }
#gps-docs .docs-header__mobile-btn.is-active { background: rgba(70,103,255,.1); color: var(--brand); }
#gps-docs .docs-header__mobile-shop {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, #4667ff, #7b61ff);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(70,103,255,.3);
}

@media (max-width: 1023px) {
  #gps-docs .docs-header { position: fixed; left: 0; right: 0; padding: 0 16px; }
}


/* ============================================================
   4. SEARCH — GPS LIFE Custom Docs Search (v2.9)

   Стратегія:
   /docs/           → хедер: БЕЗ пошуку на desktop (є hero від BetterDocs)
                      mobile: лупа → fullscreen панель
   /docs/cat/       → хедер: компактний form на desktop
                      mobile: лупа → fullscreen панель
   /docs/article/   → так само як taxonomy
   ============================================================ */

/* Keyframes */
@keyframes gps-spin        { to { transform: rotate(360deg); } }
@keyframes gps-fade-in-up  { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gps-slide-down  { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes gps-fade-in     { from { opacity: 0; } to { opacity: 1; } }
@keyframes gps-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}


/* ── Зовнішній wrapper у хедері ── */

#gps-docs .docs-header__search {
  display: flex;
  align-items: center;
  flex: 0 1 580px;
  max-width: 580px;
  min-width: 220px;
}

/* На /docs/ — ховаємо (є hero) */
body.post-type-archive-docs.gps-docs-page #gps-docs .docs-header__search {
  display: none;
}

/* Mobile: в хедері немає form (є лупа-кнопка) */
@media (max-width: 1023px) {
  #gps-docs .docs-header__search { display: none; }
}


/* ── docs-search (форма) ── */

#gps-docs .docs-search {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Desktop-only: flex-центрування форми у header-обгортці 580×60.
   На mobile form — block, щоб static-dropdown (line 697) отримав
   повну ширину панелі без flex-item sizing. */
@media (min-width: 1024px) {
  #gps-docs .docs-search {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
}

#gps-docs .docs-search__box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  width: 100%;
  min-height: 40px;
  max-height: 40px;
  line-height: 1.2;
  cursor: text;
  background: #fff;
  border: 1.5px solid var(--gps-border, #e5e5ea);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Mobile — max-height 40px не обмежує (box може бути трохи вищим) */
@media (max-width: 1023px) {
  #gps-docs .docs-search--mob .docs-search__box {
    max-height: none;
  }
}

#gps-docs .docs-search.is-open .docs-search__box,
#gps-docs .docs-search__box:focus-within {
  border-color: var(--gps-brand, #4667ff);
  box-shadow: 0 0 0 3px rgba(70, 103, 255, .08);
}

/* SVG search icon — forced 18×18 desktop (SVG helper returns 22×22) */
#gps-docs .docs-search__box > svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  pointer-events: none;
  color: var(--gps-text-mut, #86868b);
  transition: color .15s;
}

#gps-docs .docs-search.is-open .docs-search__box > svg {
  color: var(--gps-brand, #4667ff);
}

#gps-docs .docs-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--gps-text, #1d1d1f);
  -webkit-appearance: none;
}

#gps-docs .docs-search__input::placeholder {
  color: var(--gps-text-mut, #86868b);
  opacity: 1;
}

/* Spinner */
#gps-docs .docs-search__spinner {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--gps-border, #e5e5ea);
  border-top-color: var(--gps-brand, #4667ff);
  animation: gps-spin .6s linear infinite;
  display: none;
}

#gps-docs .docs-search.is-loading .docs-search__spinner { display: block; }

/* Clear button */
#gps-docs .docs-search__clear {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  color: var(--gps-text-mut, #86868b);
  opacity: .6;
  flex-shrink: 0;
}

#gps-docs .docs-search__clear:hover { opacity: 1; }

/* SVG всередині clear-кнопки — форсуємо 18×18 (хелпер віддає 22×22) */
#gps-docs .docs-search__clear > svg {
  width: 18px;
  height: 18px;
}

/* ⌘K badge */
#gps-docs .docs-search__shortcut {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--gps-bg, #f5f7fb);
  border: 1px solid var(--gps-border, #e5e5ea);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--gps-text-mut, #86868b);
  font-weight: 600;
  flex-shrink: 0;
  line-height: 1.2;
  pointer-events: none;
}

#gps-docs .docs-search.is-open .docs-search__shortcut { display: none; }


/* ── Dropdown ── */

#gps-docs .docs-search__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 56px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .04);
  z-index: 115;
  max-height: 70vh;
  overflow-y: auto;
  animation: gps-fade-in-up .15s ease-out;
}

/* Категорія заголовок */
#gps-docs .docs-search__group-header {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gps-text-mut, #86868b);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Рядок результату */
#gps-docs .docs-search__item {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  background: transparent;
  transition: background .1s;
  cursor: pointer;
  margin: 0 6px;
}

#gps-docs .docs-search__item.is-active,
#gps-docs .docs-search__item:hover {
  background: rgba(70, 103, 255, .08);
}

#gps-docs .docs-search__item-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gps-text-mut, #86868b);
}

#gps-docs .docs-search__item.is-active .docs-search__item-icon {
  color: var(--gps-brand, #4667ff);
}

#gps-docs .docs-search__item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gps-text, #1d1d1f);
  line-height: 1.35;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#gps-docs .docs-search__item.is-active .docs-search__item-title {
  color: var(--gps-brand, #4667ff);
}

#gps-docs .docs-search__item-excerpt {
  font-size: 12px;
  color: var(--gps-text-sec, #6e6e73);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#gps-docs .docs-search__item-arrow {
  flex-shrink: 0;
  align-self: center;
  color: var(--gps-brand, #4667ff);
  opacity: .7;
  display: flex;
}

/* "Переглянути всі" footer */
#gps-docs .docs-search__all-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--gps-border, #e5e5ea);
  font-size: 13px;
  font-weight: 600;
  color: var(--gps-brand, #4667ff);
  text-decoration: none;
}

/* highlight <mark> */
#gps-docs .docs-search__dropdown mark {
  background: rgba(70, 103, 255, .08);
  color: var(--gps-brand, #4667ff);
  font-weight: 600;
  padding: 0;
  border-radius: 2px;
}


/* ── Empty state ── */

#gps-docs .docs-search__empty {
  padding: 14px;
}

#gps-docs .docs-search__popular-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gps-text-mut, #86868b);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
}

#gps-docs .docs-search__popular-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#gps-docs .docs-search__popular-tag {
  padding: 6px 12px;
  border-radius: 16px;
  background: var(--gps-bg, #f5f7fb);
  border: 1px solid var(--gps-border, #e5e5ea);
  font-size: 13px;
  color: var(--gps-text-sec, #6e6e73);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}

#gps-docs .docs-search__popular-tag:hover {
  background: rgba(70, 103, 255, .08);
  border-color: var(--gps-brand, #4667ff);
  color: var(--gps-brand, #4667ff);
}

#gps-docs .docs-search__hint {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gps-border, #e5e5ea);
  font-size: 12px;
  color: var(--gps-text-mut, #86868b);
  line-height: 1.6;
}

/* <kbd> стилізація */
#gps-docs .docs-search__hint kbd {
  display: inline-block;
  padding: 1px 5px;
  margin: 0 2px;
  font-size: 10px;
  font-family: inherit;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--gps-border, #e5e5ea);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--gps-text-sec, #6e6e73);
  line-height: 1.2;
}


/* ── No results ── */

#gps-docs .docs-search__no-results {
  padding: 28px 20px;
  text-align: center;
}

#gps-docs .docs-search__no-results-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gps-bg, #f5f7fb);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: var(--gps-text-mut, #86868b);
}

#gps-docs .docs-search__no-results-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gps-text, #1d1d1f);
  margin-bottom: 6px;
}

#gps-docs .docs-search__no-results-text {
  font-size: 13px;
  color: var(--gps-text-sec, #6e6e73);
  margin-bottom: 18px;
  line-height: 1.5;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

#gps-docs .docs-search__tg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4667ff, #7b61ff);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(70, 103, 255, .3);
}


/* ── Skeleton ── */

#gps-docs .docs-search__skeleton {
  padding: 10px;
}

#gps-docs .docs-search__skeleton-line {
  border-radius: 4px;
  background: linear-gradient(90deg, #e5e5ea 0%, #f0f0f3 50%, #e5e5ea 100%);
  background-size: 200% 100%;
  animation: gps-shimmer 1.4s ease-in-out infinite;
}


/* ── Backdrop overlay (desktop) ──
   Backdrop вставляється у <body>, тому НЕ може жити під #gps-docs.
   body > селектор дає достатню специфічність проти LiteSpeed Critical CSS. */

body > .docs-search__backdrop {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 14, 39, 0);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  z-index: 99;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--gps-open),
              background-color var(--gps-open),
              backdrop-filter var(--gps-open),
              -webkit-backdrop-filter var(--gps-open);
}
body > .docs-search__backdrop.is-visible {
  opacity: 1;
  /* Glass morphism: низький tint (.22) + помірний blur (8px) + saturate (160%).
     Контент позаду лишається читабельним — відчуття справжнього скла.
     Inset top highlight — тонкий відблиск зверху, імітація світла на склі. */
  background: rgba(10, 14, 39, .22);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
body > .docs-search__backdrop.is-closing {
  transition: opacity var(--gps-close),
              background-color var(--gps-close),
              backdrop-filter var(--gps-close),
              -webkit-backdrop-filter var(--gps-close);
}


/* ── Mobile fullscreen panel ── */

/* Body scroll lock — overflow:hidden на html+body.
   Браузер сам тримає scroll offset (без position:fixed-хака зі scrollY),
   тож нема iOS-зсуву viewport та fixed-нащадків.
   touch-action: none на html блокує rubber-band на iOS; панель
   та її скролюваний контейнер повертають auto нижче. */
html.docs-search-locked,
body.docs-search-locked {
  overflow: hidden;
  height: 100%;
  touch-action: none;
}

/* Панелі overlay'ів і їх скролюваний контент — повернути тач-жести
   (scroll по списку результатів / списку меню) */
#gps-docs .docs-search-panel,
#gps-docs .docs-search-panel__inner,
#gps-docs .docs-search--mob .docs-search__dropdown,
#gps-docs .docs-mobile-menu {
  touch-action: auto;
}

#gps-docs .docs-search-panel {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  background: var(--gps-bg, #f5f7fb);
  display: flex;
  flex-direction: column;
  /* Composite transition: opacity + translateY(-8px→0).
     Панель «опускається» у фокус зверху. Close — швидша крива. */
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--gps-open), transform var(--gps-open);
}

#gps-docs .docs-search-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#gps-docs .docs-search-panel.is-closing {
  transition: opacity var(--gps-close), transform var(--gps-close);
}

#gps-docs .docs-search-panel__inner {
  padding: 12px;
  background: #fff;
  border-bottom: 1px solid var(--gps-border, #e5e5ea);
}

/* Mobile form — більший padding */
#gps-docs .docs-search--mob .docs-search__box {
  padding: 10px 14px;
}

#gps-docs .docs-search--mob .docs-search__input {
  font-size: 15px;
}

/* Dropdown у мобільній панелі — не absolute, а статичний */
#gps-docs .docs-search--mob .docs-search__dropdown {
  position: static;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  animation: none;
  background: var(--gps-bg, #f5f7fb);
  overflow-y: visible;
}


/* ============================================================
   5. MOBILE MENU PANEL
   ============================================================ */

#gps-docs .docs-mobile-menu {
  position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 99;
  background: rgba(255,255,255,.97); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px); padding: 20px 24px;
  overflow-y: auto;
  /* Composite: opacity + translateY(-8px→0) — симетрично з search-panel */
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--gps-open), transform var(--gps-open);
}

#gps-docs .docs-mobile-menu.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#gps-docs .docs-mobile-menu.is-closing {
  transition: opacity var(--gps-close), transform var(--gps-close);
}

/* Stagger reveal дочірніх секцій — контент «формується» каскадом.
   Анімація спрацьовує тільки на open (клас додається після is-visible). */
#gps-docs .docs-mobile-menu.is-visible .docs-mobile-menu__section {
  animation: gps-rise 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
#gps-docs .docs-mobile-menu.is-visible .docs-mobile-menu__section:nth-child(1) { animation-delay:  30ms; }
#gps-docs .docs-mobile-menu.is-visible .docs-mobile-menu__section:nth-child(2) { animation-delay:  60ms; }
#gps-docs .docs-mobile-menu.is-visible .docs-mobile-menu__section:nth-child(3) { animation-delay:  90ms; }
#gps-docs .docs-mobile-menu.is-visible .docs-mobile-menu__section:nth-child(4) { animation-delay: 120ms; }
#gps-docs .docs-mobile-menu.is-visible .docs-mobile-menu__section:nth-child(5) { animation-delay: 150ms; }
#gps-docs .docs-mobile-menu.is-visible .docs-mobile-menu__section:nth-child(n+6) { animation-delay: 180ms; }

@keyframes gps-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#gps-docs .docs-mobile-menu__section { padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
#gps-docs .docs-mobile-menu__section--border { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
#gps-docs .docs-mobile-menu__section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-mut);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px;
}

/* v2.5: services список — обгортка з gap між items */
#gps-docs .docs-mobile-menu__service + .docs-mobile-menu__service {
  margin-top: 8px;
}

/* v2.5: service item — рамка + radius + padding, симетрично з bottom sheet */
#gps-docs .docs-mobile-menu__service {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-block);
  border: 1px solid var(--border);
  transition: all .15s;
}
#gps-docs .docs-mobile-menu__service:hover,
#gps-docs .docs-mobile-menu__service:active {
  border-color: rgba(70,103,255,.2);
  background: var(--brand-light);
}

#gps-docs .docs-mobile-menu__service-emoji { font-size: 24px; flex-shrink: 0; line-height: 1; }

/* v2.6: текстовий контейнер тепер з класом __service-text */
#gps-docs .docs-mobile-menu__service-text {
  flex: 1;
  min-width: 0;
}

#gps-docs .docs-mobile-menu__service-title { font-size: 15px; font-weight: 600; color: var(--text); }
#gps-docs .docs-mobile-menu__service-desc {
  font-size: 13px;
  color: var(--text-mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#gps-docs .docs-mobile-menu__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 16px; font-weight: 600; padding: 14px; border-radius: 12px; margin-top: 20px;
}
#gps-docs .docs-mobile-menu__cta--shop { color: #fff; background: linear-gradient(135deg, #4667ff, #7b61ff); }
#gps-docs .docs-mobile-menu__cta--tg { color: #fff; background: var(--brand); box-shadow: 0 2px 8px rgba(70,103,255,.3); }
#gps-docs .docs-mobile-menu__link {
  display: block; font-size: 16px; font-weight: 600; color: var(--text);
  padding: 20px 0 14px; margin-top: 20px; border-top: 1px solid var(--border);
}
#gps-docs .docs-mobile-menu__phones { display: flex; flex-direction: column; gap: 8px; }
#gps-docs .docs-mobile-menu__phone { font-size: 15px; font-weight: 500; color: var(--text-sec); padding: 8px 0; display: flex; align-items: center; gap: 8px; }
#gps-docs .docs-mobile-menu__socials { display: flex; gap: 12px; flex-wrap: wrap; }
#gps-docs .docs-mobile-menu__social-pill { font-size: 13px; font-weight: 500; color: var(--text-sec); padding: 6px 14px; border-radius: 8px; background: rgba(0,0,0,.04); }


/* ============================================================
   6. HERO
   ============================================================ */

#gps-docs .docs-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--hero-start) 0%, var(--hero-mid) 40%, var(--hero-end) 100%);
  padding: 32px 24px 44px; text-align: center;
}
#gps-docs .docs-hero__content { max-width: 800px; margin: 0 auto; position: relative; z-index: 2; }
#gps-docs .docs-hero__orb { position: absolute; border-radius: 50%; pointer-events: none; }
#gps-docs .docs-hero__orb--left { width: 400px; height: 400px; background: radial-gradient(circle, rgba(70,103,255,.15), transparent 70%); top: -200px; left: -100px; }
#gps-docs .docs-hero__orb--right { width: 300px; height: 300px; background: radial-gradient(circle, rgba(123,97,255,.1), transparent 70%); bottom: -150px; right: -50px; }
#gps-docs .docs-hero h1 { font-size: 32px; font-weight: 800; color: #fff; margin: 0 0 16px; letter-spacing: -.5px; line-height: 1.25; }
/* Tags row — окремий рядок ВИЩЕ H1 (Stripe/Apple/MDN pattern: context → content → metadata).
   Single tag rule: показуємо тільки primary тег. Атрибутні мітки (Важливо/Оновлення)
   рекомендується виносити у callout-shortcodes на початку статті. */
#gps-docs .docs-hero__tags {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
#gps-docs .docs-hero__tag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  /* color, background, border-color задаються inline-style на основі $tag_color */
}

#gps-docs .docs-hero__meta { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; }
#gps-docs .docs-hero__meta-item { font-size: 12px; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 4px; }
#gps-docs .docs-hero__meta-date { font-size: 12px; color: rgba(255,255,255,.5); }

@media (max-width: 480px) {
  #gps-docs .docs-hero__tag { font-size: 12px; padding: 5px 12px; }
  #gps-docs .docs-hero__tags { margin-bottom: 12px; }
}
#gps-docs .docs-hero__meta-new {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(48, 209, 88, .18);
  color: #5fe49c;
  border: 1px solid rgba(48, 209, 88, .3);
}

@media (max-width: 1023px) {
  #gps-docs .docs-hero { padding: 24px 16px 32px; margin-top: 60px; }
  #gps-docs .docs-hero h1 { font-size: 22px; }
}


/* ============================================================
   7. BREADCRUMBS
   ============================================================ */

#gps-docs .docs-breadcrumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-mut); margin-bottom: 24px; flex-wrap: wrap; }
#gps-docs .docs-breadcrumbs a { color: var(--brand); font-weight: 500; transition: opacity .2s; }
#gps-docs .docs-breadcrumbs a:hover { opacity: .8; }


/* ============================================================
   8. 3-COLUMN LAYOUT
   ============================================================ */

#gps-docs .docs-layout { max-width: 1440px; margin: 0 auto; padding: 24px 24px 48px; }
#gps-docs .docs-grid { display: grid; grid-template-columns: 220px 1fr 200px; gap: 32px; }

@media (max-width: 1023px) {
  #gps-docs .docs-layout { padding: 20px 16px 0; }
  #gps-docs .docs-grid { grid-template-columns: 1fr; gap: 0; }
}


/* ============================================================
   9. LEFT SIDEBAR (desktop)
   ============================================================ */

#gps-docs .docs-sidebar { position: sticky; top: 84px; align-self: start; display: block; }
@media (max-width: 1023px) { #gps-docs .docs-sidebar { display: none !important; } }

/* Shared nav card block */
#gps-docs .docs-nav-card-block { background: #fff; border-radius: var(--radius-inner); border: 1px solid var(--border); padding: 14px 0; margin-bottom: 16px; }
#gps-docs .docs-nav-block-title { font-size: 13px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 6px; padding: 0 14px; }

/* Sidebar articles */
#gps-docs .docs-sidebar__articles { display: flex; flex-direction: column; gap: 0; }
#gps-docs .docs-sidebar__article-link { font-size: 14px; padding: 8px 14px; color: var(--text-sec); font-weight: 400; background: transparent; border-left: 2.5px solid transparent; transition: all .2s; display: block; }
#gps-docs .docs-sidebar__article-link:hover { background: rgba(70,103,255,.05); }
#gps-docs .docs-sidebar__article-link.is-active { color: var(--brand); font-weight: 600; background: var(--brand-light); border-left-color: var(--brand); }

/* Sidebar CTA */
#gps-docs .docs-sidebar__cta { padding: 20px 16px; border-radius: var(--radius-block); background: linear-gradient(135deg, rgba(70,103,255,.06), rgba(123,97,255,.06)); border: 1px solid rgba(70,103,255,.1); text-align: center; }
#gps-docs .docs-sidebar__cta-title { font-size: 13px; font-weight: 650; color: var(--text); margin: 0 0 6px; }
#gps-docs .docs-sidebar__cta-desc { font-size: 12px; color: var(--text-mut); margin: 0 0 12px; line-height: 1.4; }
#gps-docs .docs-sidebar__cta-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--brand); margin-bottom: 12px; }
#gps-docs .docs-sidebar__cta-label { font-size: 11px; color: var(--text-mut); margin-bottom: 6px; }

/* Shared .tg-btn / .svc-btn */
#gps-docs .tg-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 2px 8px rgba(70,103,255,.3); transition: var(--transition-bounce); }
#gps-docs .tg-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 20px rgba(70,103,255,.4); }
#gps-docs .svc-btn { display: flex; align-items: center; gap: 6px; padding: 11px 22px; border-radius: var(--radius-btn); background: var(--bg); color: var(--brand); font-size: 14px; font-weight: 600; border: 1px solid var(--border); transition: var(--transition-bounce); }
#gps-docs .svc-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.08); }


/* ============================================================
   10. NAV TREE (gps_docs_render_nav_tree)
   ============================================================ */

#gps-docs .docs-nav-tree__row { display: flex; align-items: center; justify-content: space-between; padding: 7px 14px; font-size: 13px; cursor: pointer; transition: background .2s; border-left: 2.5px solid transparent; }
#gps-docs .docs-nav-tree__row:hover { background: rgba(70,103,255,.05); }
#gps-docs .docs-nav-tree__link { color: var(--text-mut); font-weight: 400; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gps-docs .docs-nav-tree__item.is-active > .docs-nav-tree__row .docs-nav-tree__link,
#gps-docs .docs-nav-tree__item.is-active > a.docs-nav-tree__row { color: var(--brand); font-weight: 600; }
#gps-docs .docs-nav-tree__item.is-leaf > .docs-nav-tree__row,
#gps-docs .docs-nav-tree__item.is-leaf > a.docs-nav-tree__row { background: var(--brand-light); border-left-color: var(--brand); color: var(--brand); font-weight: 600; }
#gps-docs .docs-nav-tree__row[data-depth="1"] .docs-nav-tree__link,
#gps-docs a.docs-nav-tree__row[data-depth="1"],
#gps-docs .docs-nav-tree__row[data-depth="2"] .docs-nav-tree__link,
#gps-docs a.docs-nav-tree__row[data-depth="2"] { color: var(--text-sec); }
#gps-docs .docs-nav-tree__toggle { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: none; padding: 0; color: var(--text-mut); border-radius: 4px; transition: background .15s; }
#gps-docs .docs-nav-tree__toggle:hover { background: rgba(0,0,0,.05); }
#gps-docs .docs-nav-tree__item.is-active > .docs-nav-tree__row .docs-nav-tree__toggle { color: var(--brand); }
#gps-docs .docs-nav-tree__arrow { transition: transform .2s; }
#gps-docs .docs-nav-tree__item.is-open > .docs-nav-tree__row .docs-nav-tree__arrow { transform: rotate(90deg); }


/* ============================================================
   11. RIGHT STICKY TOC + SHARE (desktop)
   PHP: .docs-toc-aside / .docs-sticky-toc
   ============================================================ */

#gps-docs .docs-toc-aside { position: sticky; top: 84px; align-self: start; display: block; }
@media (max-width: 1023px) { #gps-docs .docs-toc-aside { display: none !important; } }

/* TOC items — JS generates into #docs-toc-list */
#gps-docs .docs-toc-list__item { font-size: 13px; padding: 7px 14px; cursor: pointer; color: var(--text-mut); font-weight: 400; background: transparent; border-left: 2.5px solid transparent; transition: all .15s; display: block; }
#gps-docs .docs-toc-list__item:hover { color: var(--brand); background: rgba(70,103,255,.04); }
#gps-docs .docs-toc-list__item.is-active { color: var(--brand); font-weight: 600; background: var(--brand-light); border-left-color: var(--brand); }
#gps-docs .docs-toc-list__item[data-level="3"] { padding-left: 28px; font-size: 12px; }


/* ============================================================
   12. SHARE BLOCK
   ============================================================ */

/* ── Share block — 3-row minimalist (no title, no divider) ──
   Spacing-driven hierarchy: whitespace відмежовує групи кнопок.
   Rows:
     1. Copy (primary, brand-tinted)
     2. Grid-3 socials (TG / FB / WA)
     3. Native share button (hidden if API unavailable)
   Flex-column container з gap робить весь layout. */
#gps-docs .docs-share--desktop {
  display: flex;
  flex-direction: column;
  gap: 20px;          /* whitespace між рядами = семантичний divider */
  padding: 18px;
}

/* Универсальна форма для copy та native кнопок — однакові пропорції */
#gps-docs .docs-share__copy-btn,
#gps-docs .docs-share__native-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border-radius: var(--radius-item);
  font-size: 14px; font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
#gps-docs .docs-share__copy-btn svg,
#gps-docs .docs-share__native-btn svg {
  width: 18px; height: 18px;
}

/* Copy — primary action, brand-tinted */
#gps-docs .docs-share__copy-btn {
  border: 1px solid transparent;
  background: var(--brand-light);
  color: var(--brand);
}
#gps-docs .docs-share__copy-btn:hover {
  background: var(--brand-light-12);
}
#gps-docs .docs-share__copy-btn:active {
  transform: scale(0.98);
}
#gps-docs .docs-share__copy-btn.is-copied {
  background: rgba(48,209,88,.10);
  color: #30d158;
}

/* Native share — secondary, білий з border */
#gps-docs .docs-share__native-btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-sec);
  font-weight: 500;
}
#gps-docs .docs-share__native-btn:hover {
  border-color: rgba(70,103,255,.3);
  color: var(--brand);
}
#gps-docs .docs-share__native-btn:active {
  transform: scale(0.98);
}

/* Grid-3 — соц-іконки, кнопки стають великими у вузькому sidebar */
#gps-docs .docs-share__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
#gps-docs .docs-share__icon-btn {
  display: flex; align-items: center; justify-content: center;
  height: 54px;
  border-radius: var(--radius-item);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-sec);
  transition: border-color .2s, color .2s, transform .15s;
}
/* Normalize icon sizes — перекриває inline width/height з SVG helper'а */
#gps-docs .docs-share__icon-btn svg {
  width: 22px !important;
  height: 22px !important;
}
#gps-docs .docs-share__icon-btn:hover {
  border-color: rgba(70,103,255,.3);
  color: var(--brand);
}
#gps-docs .docs-share__icon-btn:active {
  transform: scale(0.96);
}

/* ── Mobile — окрема card між article і prev/next ──
   2-button UX: Copy + Native. Фалбек grid-3 якщо API немає.
   Card-style: white bg, border, padding. Центр по horizontal. */
#gps-docs .docs-share--mobile {
  /* .mobile-only дає display:flex — column для card layout */
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-block);
  padding: 20px;
  margin: 40px 0 32px;
}
#gps-docs .docs-share--mobile .docs-share__copy-btn,
#gps-docs .docs-share--mobile .docs-share__native-btn {
  height: 56px;
  font-size: 15px;
}
#gps-docs .docs-share--mobile .docs-share__copy-btn svg,
#gps-docs .docs-share--mobile .docs-share__native-btn svg {
  width: 20px; height: 20px;
}
/* Fallback grid на mobile (показується коли navigator.share відсутня) */
#gps-docs .docs-share--mobile .docs-share__grid--fallback {
  margin-top: 4px;
}
#gps-docs .docs-share--mobile .docs-share__icon-btn {
  height: 56px;
}


/* ============================================================
   13. MOBILE INLINE NAV
   PHP: .docs-mobile-inline-nav #docs-inline-nav
   ============================================================ */

#gps-docs .docs-mobile-inline-nav { margin-bottom: 20px; }
#gps-docs .docs-mobile-sections__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px; background: none; border: none; cursor: pointer; font-family: var(--font); color: var(--text-mut); }
#gps-docs .docs-mobile-sections__toggle svg { display: block; }
#gps-docs .docs-mobile-sections__toggle svg path { stroke: currentColor !important; }
#gps-docs .docs-mobile-sections__left { display: flex; align-items: center; gap: 8px; }
#gps-docs .docs-mobile-sections__right {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(70, 103, 255, .06);
  color: var(--brand);
  transition: background .2s;
  flex-shrink: 0;
}
#gps-docs .docs-mobile-sections__toggle:hover .docs-mobile-sections__right { background: rgba(70, 103, 255, .14); }
#gps-docs .docs-mobile-sections__toggle:active .docs-mobile-sections__right { background: rgba(70, 103, 255, .20); }
#gps-docs .docs-mobile-sections__right svg { width: 14px; height: 14px; transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
#gps-docs .docs-mobile-sections__right svg path { stroke-width: 1.8; }
#gps-docs .docs-mobile-sections__toggle[aria-expanded="true"] .docs-mobile-sections__right svg { transform: rotate(180deg); }
/* Grid-template-rows animation: smooth top-to-bottom expand without magic max-height.
   Border переїхав на toggle (border-bottom) — щоб лінія зникала разом зі згортанням. */
#gps-docs .docs-mobile-sections__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1);
}
#gps-docs .docs-mobile-sections__body > * {
  overflow: hidden;
  min-height: 0;
  padding: 10px 0;
  transition: padding .32s cubic-bezier(.4, 0, .2, 1);
}
#gps-docs .docs-mobile-sections.is-collapsed .docs-mobile-sections__body { grid-template-rows: 0fr; }
#gps-docs .docs-mobile-sections.is-collapsed .docs-mobile-sections__body > * { padding: 0; }
#gps-docs .docs-mobile-sections__toggle { border-bottom: 1px solid var(--border); transition: border-color .25s; }
#gps-docs .docs-mobile-sections.is-collapsed .docs-mobile-sections__toggle { border-bottom-color: transparent; }
#gps-docs .docs-mobile-sections__emoji { font-size: 14px; line-height: 1; display: inline-flex; align-items: center; }
#gps-docs .docs-mobile-sections__emoji img.emoji { width: 14px; height: 14px; vertical-align: middle; margin: 0; }

/* Mobile portrait (<700px): 1 колонка, 2 рядки. !important — перебиває parent-theme
   правило `display: flex`, яке інакше зчіплює children в row. */
@media (max-width: 699px) {
  #gps-docs .docs-mobile-inline-nav { display: block !important; }
}

/* Tablet portrait + landscape phone (≥700px, <1024px): 2 рівноцінні колонки.
   Обидва блоки collapsible (Variant A) — клік працює як на mobile. */
@media (min-width: 700px) and (max-width: 1023px) {
  #gps-docs .docs-mobile-inline-nav { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
}

@media (min-width: 1024px) { #gps-docs .docs-mobile-inline-nav { display: none !important; } }


/* ============================================================
   14. SECONDARY NAV BAR
   PHP: .docs-secondary-bar / __btn / __divider / __panel
   ============================================================ */

#gps-docs .docs-secondary-bar { position: fixed; top: 60px; left: 0; right: 0; z-index: 98; background: rgba(255,255,255,.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(0,0,0,.08); transform: translateY(-120px); transition: transform .3s ease, top .3s ease; }
#gps-docs .docs-secondary-bar.is-visible { transform: translateY(0); }
#gps-docs .docs-header.is-hidden ~ .docs-secondary-bar.is-visible { top: 0; }
#gps-docs .docs-secondary-bar__inner { display: flex; align-items: center; height: 40px; padding: 0 16px; gap: 0; }
#gps-docs .docs-secondary-bar__btn { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: none; background: transparent; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-sec); font-family: var(--font); transition: background .15s, color .15s; }
#gps-docs .docs-secondary-bar__btn.is-active { background: rgba(70,103,255,.08); color: var(--brand); }
#gps-docs .docs-secondary-bar__btn--toc { flex: 1; overflow: hidden; min-width: 0; }
#gps-docs .docs-secondary-bar__divider { width: 1px; height: 20px; background: var(--border); margin: 0 8px; flex-shrink: 0; }
#gps-docs .docs-secondary-bar__toc-label { font-size: 12px; color: var(--text-mut); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gps-docs .docs-secondary-bar__btn--toc.is-active .docs-secondary-bar__toc-label { color: var(--brand); }
#gps-docs .docs-secondary-bar__btn--toc svg { flex-shrink: 0; transition: transform .2s; }
#gps-docs .docs-secondary-bar__btn--toc.is-active svg { transform: rotate(180deg); }
#gps-docs .docs-secondary-bar__panel { padding: 8px 16px 16px; border-top: 1px solid var(--border); max-height: 50vh; overflow-y: auto; animation: gps-fadeInUp .15s ease; }

/* Overlay when dropdown is open — separate div created by JS (v2.3 js).
   ВАЖЛИВО: селектор БЕЗ #gps-docs префіксу, бо JS додає цей div у <body>
   (а не всередину #gps-docs), і нам треба щоб правило працювало.
   Glass morphism — уніфіковано з search backdrop і bottom-sheet overlay. */
body > .docs-secbar-overlay {
  position: fixed; inset: 0; z-index: 97;
  background: rgba(10, 14, 39, 0);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  opacity: 0;
  transition: opacity var(--gps-open),
              background-color var(--gps-open),
              backdrop-filter var(--gps-open),
              -webkit-backdrop-filter var(--gps-open);
}
body > .docs-secbar-overlay.is-visible {
  opacity: 1;
  background: rgba(10, 14, 39, .22);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
body > .docs-secbar-overlay.is-closing {
  transition: opacity var(--gps-close),
              background-color var(--gps-close),
              backdrop-filter var(--gps-close),
              -webkit-backdrop-filter var(--gps-close);
}

@media (min-width: 1024px) { #gps-docs .docs-secondary-bar { display: none; } }


/* ============================================================
   14.1 SECONDARY BAR — SECTIONS PANEL (v2.6)
   PHP (single-docs.php v2.4): sections panel тепер рендерить sibling articles
   (замість повного nav tree) — компактніше і релевантніше контексту статті.

   Структура:
     __title  → назва поточної категорії (uppercase, симетрія з mobile menu section-title)
     __list   → контейнер для посилань
     __link   → окреме посилання на статтю
       .is-active → поточна стаття (brand color + border-left 2.5px)
     __back   → "← Всі розділи" внизу dropdown'а, з розділювачем зверху
   ============================================================ */

#gps-docs .docs-secbar-sections__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
  padding: 0 4px;
  letter-spacing: -.1px;
}

#gps-docs .docs-secbar-sections__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 12px;
}

#gps-docs .docs-secbar-sections__link {
  display: block;
  font-size: 14px;
  padding: 10px 14px;
  color: var(--text-sec);
  font-weight: 400;
  background: transparent;
  border-left: 2.5px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: all .15s;
}
#gps-docs .docs-secbar-sections__link:hover {
  background: rgba(70,103,255,.05);
  color: var(--text);
}
#gps-docs .docs-secbar-sections__link.is-active {
  color: var(--brand);
  font-weight: 600;
  background: var(--brand-light);
  border-left-color: var(--brand);
}

/* v2.7: breadcrumb-ланцюг внизу sections dropdown (замість простого "Всі розділи").
   Показує шлях батьківських категорій з home-іконкою спочатку.
   При >=4 рівнях середина скорочується до "…". */
#gps-docs .docs-secbar-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-mut);
}

#gps-docs .docs-secbar-breadcrumbs__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--brand);
  font-weight: 600;
  transition: color .15s;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#gps-docs .docs-secbar-breadcrumbs__link:hover {
  color: var(--brand-hover);
}

/* Home-іконка — вирівняна по центру з текстом */
#gps-docs .docs-secbar-breadcrumbs__home svg {
  flex-shrink: 0;
}

/* Роздільник › між елементами */
#gps-docs .docs-secbar-breadcrumbs__separator {
  color: var(--text-mut);
  font-size: 14px;
  line-height: 1;
  user-select: none;
}

/* Статичний … коли ланцюг скорочений */
#gps-docs .docs-secbar-breadcrumbs__ellipsis {
  color: var(--text-mut);
  font-weight: 500;
  user-select: none;
  letter-spacing: 1px;
}


/* ============================================================
   15. MAIN CONTENT CARD
   PHP: .docs-article-card #docs-article-content
   ============================================================ */

#gps-docs .docs-article-card { background: #fff; border-radius: var(--radius-card); padding: 40px 44px; box-shadow: var(--shadow-card); border: 1px solid rgba(0,0,0,.04); margin-bottom: 20px; }
@media (max-width: 1023px) { #gps-docs .docs-article-card { padding: 24px; border-radius: 14px; } }

/* Article body (the_content) */
#gps-docs .docs-article-card h2 { font-size: 22px; font-weight: 700; color: var(--text); margin: 36px 0 16px; letter-spacing: -.2px; position: relative; scroll-margin-top: 90px; }
#gps-docs .docs-article-card h2:first-child { margin-top: 0; }
#gps-docs .docs-article-card h3 { font-size: 18px; font-weight: 600; color: var(--text); margin: 28px 0 12px; scroll-margin-top: 90px; }
#gps-docs .docs-article-card p { font-size: 16px; color: var(--text-sec); line-height: 1.7; margin: 0 0 16px; }
#gps-docs .docs-article-card ul, #gps-docs .docs-article-card ol { padding-left: 24px; margin: 0 0 16px; color: var(--text-sec); font-size: 16px; line-height: 1.7; }
#gps-docs .docs-article-card li { margin-bottom: 6px; }
#gps-docs .docs-article-card a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
#gps-docs .docs-article-card a:hover { text-decoration: none; }
#gps-docs .docs-article-card img { border-radius: var(--radius-inner); margin: 16px 0; }
#gps-docs .docs-article-card code { font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 14px; background: rgba(0,0,0,.05); padding: 2px 6px; border-radius: 4px; color: var(--text); }
#gps-docs .docs-article-card pre { background: #1d1d1f; color: #f5f5f7; padding: 20px 24px; border-radius: var(--radius-inner); overflow-x: auto; margin: 16px 0; font-size: 14px; line-height: 1.6; }
#gps-docs .docs-article-card pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
#gps-docs .docs-article-card blockquote { border-left: 3px solid var(--brand); background: var(--brand-light); padding: 16px 20px; border-radius: 0 var(--radius-inner) var(--radius-inner) 0; margin: 16px 0; }
#gps-docs .docs-article-card blockquote p { margin: 0; }
#gps-docs .docs-article-card table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
#gps-docs .docs-article-card th, #gps-docs .docs-article-card td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; }
#gps-docs .docs-article-card th { background: rgba(0,0,0,.03); font-weight: 600; color: var(--text); }

@media (min-width: 1024px) and (max-width: 1200px) {
  #gps-docs .docs-article-card img, #gps-docs .docs-article-card table, #gps-docs .docs-article-card pre { overflow-x: auto; max-width: 100%; }
  #gps-docs .docs-article-card table { display: block; }
}

/* Mobile (<1024): таблиці/картинки/довгі стрічки не повинні випихати layout
   за межі viewport. Таблиці скролляться всередині контейнера, не сторінки. */
@media (max-width: 1023px) {
  #gps-docs .docs-article-card .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #gps-docs .docs-article-card .wp-block-table table { min-width: 100%; width: max-content; }
  #gps-docs .docs-article-card > table { display: block; overflow-x: auto; max-width: 100%; }
  #gps-docs .docs-article-card img,
  #gps-docs .docs-article-card iframe,
  #gps-docs .docs-article-card video { max-width: 100%; height: auto; }
  #gps-docs .docs-article-card { overflow-wrap: anywhere; word-wrap: break-word; }
}

/* Industry-standard overflow containment (Stripe Docs / MDN / Docusaurus pattern).

   1. min-width: 0 на grid-children — фікс canonical CSS gotcha: за замовчуванням
      grid/flex-діти мають min-width: auto і не стискаються нижче intrinsic content
      width. Це справжня причина чому широкі таблиці/embeds "тиснуть" layout.
   2. max-width: 100% на прямих дітей картки — universal constraint без приховування
      контенту. Wide content скролляється всередині (через targeted rules вище),
      а не вилазить.
   3. overflow-x: clip на корені — last-resort safety net. clip ≠ hidden —
      не створює scroll context, не ламає position: sticky у нащадків. */
#gps-docs .docs-grid > * { min-width: 0; }
#gps-docs .docs-article-card > * { max-width: 100%; }
#gps-docs { overflow-x: clip; }

/* Anchor link */
#gps-docs .docs-anchor-link {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 8px; padding: 0;
  border: none; cursor: pointer; vertical-align: middle;
  background: rgba(70, 103, 255, .06);
  color: var(--brand);
  opacity: .6;
  border-radius: 50%;
  font-family: var(--font);
  transition: opacity .2s, background .2s, transform .2s, color .2s;
}
#gps-docs .docs-anchor-link:hover {
  opacity: 1;
  background: rgba(70, 103, 255, .14);
  transform: scale(1.12);
}
#gps-docs .docs-anchor-link:active {
  background: rgba(70, 103, 255, .20);
  transform: scale(1.05);
}
/* Specificity boost (.is-copied.is-copied) + !important — захист від Android Chrome
   sticky :hover/:active, який тримається після touch і перебивав зелену підсвітку. */
#gps-docs .docs-anchor-link.is-copied.is-copied {
  opacity: 1 !important;
  background: rgba(34, 197, 94, .15) !important;
  color: #15803d !important;
  transform: none !important;
}

/* Tooltip — текст з data-tooltip над кнопкою. Desktop hover + post-click force show. */
#gps-docs .docs-anchor-link::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: #1d1d1f;
  color: #fff;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10;
}
#gps-docs .docs-anchor-link::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #1d1d1f;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10;
}
#gps-docs .docs-anchor-link:hover::after,
#gps-docs .docs-anchor-link:hover::before,
#gps-docs .docs-anchor-link.is-copied::after,
#gps-docs .docs-anchor-link.is-copied::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#gps-docs .docs-anchor-link.is-copied::after { background: #15803d; }
#gps-docs .docs-anchor-link.is-copied::before { border-top-color: #15803d; }

/* Mobile: ховаємо весь tooltip (hover + post-click). На iOS/Android є нативний
   system "Copied" indicator — наш дубль зайвий. Зелена підсвітка pill лишається. */
@media (hover: none) {
  #gps-docs .docs-anchor-link::after,
  #gps-docs .docs-anchor-link::before { display: none; }
}


/* ============================================================
   16. FAQ ACCORDION
   ============================================================ */

#gps-docs .docs-faq { margin-top: 40px; }
#gps-docs .docs-faq__title { font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 16px; letter-spacing: -.2px; }
#gps-docs .docs-faq__list { display: flex; flex-direction: column; gap: 8px; }
#gps-docs .docs-faq__item { background: #fff; border-radius: var(--radius-inner); border: 1px solid var(--border); overflow: hidden; transition: all .2s; }
#gps-docs .docs-faq__item:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
#gps-docs .docs-faq__item.is-open { border-color: rgba(70,103,255,.2); }
#gps-docs .docs-faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: none; border: none; text-align: left; gap: 12px; font-family: var(--font); }
#gps-docs .docs-faq__question-text { font-size: 15px; font-weight: 600; color: var(--text); transition: color .2s; }
#gps-docs .docs-faq__item.is-open .docs-faq__question-text { color: var(--brand); }
#gps-docs .docs-faq__question-icon { flex-shrink: 0; transition: transform .3s; color: var(--text-mut); }
#gps-docs .docs-faq__item.is-open .docs-faq__question-icon { transform: rotate(180deg); color: var(--brand); }
#gps-docs .docs-faq__answer { display: none; padding: 0 20px 16px; }
#gps-docs .docs-faq__item.is-open .docs-faq__answer { display: block; }
#gps-docs .docs-faq__answer p { font-size: 14px; color: var(--text-sec); margin: 0; line-height: 1.7; }


/* ============================================================
   17. AUTHOR
   ============================================================ */

#gps-docs .docs-author {
  background: linear-gradient(135deg, rgba(70,103,255,.06), rgba(123,97,255,.04));
  border: 1px solid rgba(70,103,255,.12);
  box-shadow: 0 4px 20px rgba(70,103,255,.06);
  border-radius: var(--radius-block);
  padding: 24px 28px; margin-bottom: 28px;
  display: flex; align-items: center; gap: 20px;
}
#gps-docs .docs-author__avatar,
#gps-docs .docs-author__avatar-fallback {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(70,103,255,.2), 0 2px 8px rgba(70,103,255,.12);
}
#gps-docs .docs-author__avatar { object-fit: cover; }
#gps-docs .docs-author__avatar-fallback {
  background: linear-gradient(135deg, #4667ff, #7b61ff);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 28px; font-weight: 700;
}
#gps-docs .docs-author__label { font-size: 11px; font-weight: 600; color: var(--text-mut); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
#gps-docs .docs-author__name { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
#gps-docs .docs-author__role { font-size: 13px; color: var(--text-sec); }


/* ============================================================
   18. FEEDBACK
   ============================================================ */

#gps-docs .docs-feedback { border-top: 1px solid var(--border); padding-top: 24px; text-align: center; }
#gps-docs .docs-feedback__title { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 12px; }
#gps-docs .docs-feedback__buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#gps-docs .docs-feedback__btn { padding: 10px 24px; border-radius: var(--radius-btn); font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: var(--transition-bounce); font-family: var(--font); }
#gps-docs .docs-feedback__btn--yes { background: rgba(48,209,88,.08); color: #30d158; }
#gps-docs .docs-feedback__btn--no { background: var(--bg); color: var(--text-mut); }
#gps-docs .docs-feedback__btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
#gps-docs .docs-feedback__thanks { font-size: 14px; color: var(--text-sec); margin: 8px 0 0; }
#gps-docs .docs-feedback__result { margin-top: 4px; }
/* CTA-модифікатор поверх .tg-btn — inline-flex щоб стискалась по контенту,
   парент .docs-feedback має text-align:center → центрування "безкоштовне".
   color/text-decoration overrides — побороти .docs-article-card a (рядок 1303),
   яке інакше робить текст brand-color на brand-bg (невидимий). */
#gps-docs .docs-article-card .docs-feedback__cta,
#gps-docs .docs-feedback__cta { display: inline-flex; margin-top: 12px; color: #fff; text-decoration: none; }
#gps-docs .docs-article-card .docs-feedback__cta:hover,
#gps-docs .docs-feedback__cta:hover { color: #fff; text-decoration: none; }
#gps-docs .docs-feedback__error { color: #ff3b30; font-size: 13px; margin: 8px 0 0; }


/* ============================================================
   19. PREV/NEXT NAV   PHP: .docs-nav-cards / .docs-nav-card
   ============================================================ */

#gps-docs .docs-nav-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 32px; }
@media (max-width: 1023px) { #gps-docs .docs-nav-cards { grid-template-columns: 1fr; } }
#gps-docs .docs-nav-card { background: #fff; border-radius: var(--radius-block); padding: 18px 20px; border: 1px solid var(--border); cursor: pointer; transition: var(--transition-bounce); display: block; }
#gps-docs .docs-nav-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
#gps-docs .docs-nav-card--next { text-align: right; }
#gps-docs .docs-nav-card__direction { font-size: 12px; color: var(--text-mut); margin-bottom: 4px; }
#gps-docs .docs-nav-card__title { font-size: 15px; font-weight: 600; color: var(--text); }


/* ============================================================
   20. FINAL CTA   PHP: .docs-cta-final
   ============================================================ */

#gps-docs .docs-cta-final { background: linear-gradient(135deg, rgba(70,103,255,.04), rgba(123,97,255,.04)); border-radius: var(--radius-card); padding: 32px 40px; border: 1px solid rgba(70,103,255,.08); text-align: center; }
@media (max-width: 1023px) { #gps-docs .docs-cta-final { padding: 24px; } }
#gps-docs .docs-cta-final__title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
#gps-docs .docs-cta-final__desc { font-size: 14px; color: var(--text-sec); margin: 0 0 20px; line-height: 1.6; }
#gps-docs .docs-cta-final__buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }


/* ============================================================
   21. FLOATING CTA (mobile) v2.4 — single compact row
   PHP: .docs-floating-cta / .docs-floating-cta__trigger
   ============================================================
   Було 2 рядки (~90px): Telegram button + "Потрібна допомога? Послуги →".
   Стало 1 рядок (~48px): "Не знайшли відповіді? Платні послуги →"
   
   Клік по рядку відкриває docs-bottom-sheet де TG — primary action.
   Стратегія: filter юзерів — хто хоче платно, натискає rows; документація
   залишається найсерішнішим безкоштовним каналом. */

#gps-docs .docs-floating-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 0;
  transform: translateY(100%);
  transition: transform .3s ease;
}
#gps-docs .docs-floating-cta.is-visible { transform: translateY(0); }

/* Button-row trigger — єдиний елемент всередині CTA */
#gps-docs .docs-floating-cta__trigger {
  width: 100%;
  padding: 14px 16px;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-sec);
  text-align: center;
  cursor: pointer;
  transition: background .15s;
  /* мінімальна висота для надійного tap target */
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#gps-docs .docs-floating-cta__trigger:active { background: rgba(0,0,0,.03); }

/* Brand-кольоровий акцент на дії */
#gps-docs .docs-floating-cta__trigger-action {
  color: var(--brand);
  font-weight: 600;
}

@media (min-width: 1024px) { #gps-docs .docs-floating-cta { display: none; } }


/* ============================================================
   22. BOTTOM SHEET v2.4
   PHP: __close / __primary-tg / __emoji / __item-text
   ============================================================
   v2.4 зміни:
   - title "Для замовлення" (було "Платні послуги")
   - Новий close button × (top-right)
   - Primary TG-button зверху (було Services list зверху, TG знизу)
   - Divider "Або виберіть напрям"
   - 5 послуг (додано Trade-in)
   - Нижня TG-кнопка видалена (primary вже зверху)
*/

/* Bottom-sheet overlay — glass morphism, ідентичний пошуковому backdrop
   (rgba(10,14,39,.22) tint + blur 8px + saturate 160% + inset top highlight).
   Animation crescendo: opacity + bg + blur разом фейдяться під --gps-open/close. */
#gps-docs .docs-bottom-sheet-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 14, 39, 0);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--gps-open),
              background-color var(--gps-open),
              backdrop-filter var(--gps-open),
              -webkit-backdrop-filter var(--gps-open);
}
#gps-docs .docs-bottom-sheet-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
  background: rgba(10, 14, 39, .22);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
#gps-docs .docs-bottom-sheet-overlay.is-closing {
  transition: opacity var(--gps-close),
              background-color var(--gps-close),
              backdrop-filter var(--gps-close),
              -webkit-backdrop-filter var(--gps-close);
}

/* Sheet — composite: translateY(24px) + scale(0.96) → (0, 1).
   Transform-origin: bottom center — панель «виростає» з низу. */
#gps-docs .docs-bottom-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 201;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 20px 24px 28px; max-height: 80vh; overflow-y: auto;
  transform-origin: bottom center;
  transform: translateY(24px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--gps-open), transform var(--gps-open);
}
#gps-docs .docs-bottom-sheet.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
#gps-docs .docs-bottom-sheet.is-closing {
  transition: opacity var(--gps-close), transform var(--gps-close);
}

/* Stagger reveal вмісту sheet'а — title, TG-button, divider, items */
#gps-docs .docs-bottom-sheet.is-visible .docs-bottom-sheet__title,
#gps-docs .docs-bottom-sheet.is-visible .docs-bottom-sheet__primary-tg,
#gps-docs .docs-bottom-sheet.is-visible .docs-bottom-sheet__divider,
#gps-docs .docs-bottom-sheet.is-visible .docs-bottom-sheet__item {
  animation: gps-rise 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
#gps-docs .docs-bottom-sheet.is-visible .docs-bottom-sheet__title      { animation-delay:  60ms; }
#gps-docs .docs-bottom-sheet.is-visible .docs-bottom-sheet__primary-tg { animation-delay:  90ms; }
#gps-docs .docs-bottom-sheet.is-visible .docs-bottom-sheet__divider    { animation-delay: 120ms; }
#gps-docs .docs-bottom-sheet.is-visible .docs-bottom-sheet__item:nth-of-type(1) { animation-delay: 140ms; }
#gps-docs .docs-bottom-sheet.is-visible .docs-bottom-sheet__item:nth-of-type(2) { animation-delay: 165ms; }
#gps-docs .docs-bottom-sheet.is-visible .docs-bottom-sheet__item:nth-of-type(3) { animation-delay: 190ms; }
#gps-docs .docs-bottom-sheet.is-visible .docs-bottom-sheet__item:nth-of-type(4) { animation-delay: 215ms; }
#gps-docs .docs-bottom-sheet.is-visible .docs-bottom-sheet__item:nth-of-type(n+5) { animation-delay: 240ms; }
#gps-docs .docs-bottom-sheet__handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto 16px; }

/* Close button v2.5 — круглий (44x44 tap area з видимим колом 32x32).
   Реалізація: зовнішні 44x44 без фону, псевдоелемент ::before 32x32
   з фоном по центру. SVG іконка накладається поверх. */
#gps-docs .docs-bottom-sheet__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-mut);
  cursor: pointer;
  font-family: var(--font);
  transition: color .15s;
  z-index: 2;
}

/* Видиме коло 32×32 через псевдоелемент (не заважає tap area 44×44) */
#gps-docs .docs-bottom-sheet__close::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,.05);
  transform: translate(-50%, -50%);
  transition: background .15s;
  z-index: -1;
}

#gps-docs .docs-bottom-sheet__close:hover,
#gps-docs .docs-bottom-sheet__close:active {
  color: var(--text);
}
#gps-docs .docs-bottom-sheet__close:hover::before,
#gps-docs .docs-bottom-sheet__close:active::before {
  background: rgba(0,0,0,.1);
}

/* SVG всередині кнопки — bulletproof override:
   фіксуємо розмір, display, stroke і fill з !important щоб
   жодне parent-theme правило не зламало X на desktop. */
#gps-docs .docs-bottom-sheet__close svg {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  overflow: visible !important;
}
#gps-docs .docs-bottom-sheet__close svg path {
  stroke: #86868b !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  transition: stroke .15s;
}
#gps-docs .docs-bottom-sheet__close:hover svg path,
#gps-docs .docs-bottom-sheet__close:active svg path {
  stroke: #1d1d1f !important;
}

#gps-docs .docs-bottom-sheet__title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 16px; text-align: center; }

/* Primary TG button — top of sheet, max-width 360px centered */
#gps-docs .docs-bottom-sheet__primary-tg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto 20px;
  padding: 14px;
  border-radius: var(--radius-inner);
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(70,103,255,.3);
  transition: var(--transition-bounce);
}
#gps-docs .docs-bottom-sheet__primary-tg:hover,
#gps-docs .docs-bottom-sheet__primary-tg:active {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(70,103,255,.4);
}

/* Divider between primary TG and services list */
#gps-docs .docs-bottom-sheet__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 11px;
  color: var(--text-mut);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 500;
}
#gps-docs .docs-bottom-sheet__divider::before,
#gps-docs .docs-bottom-sheet__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

#gps-docs .docs-bottom-sheet__list { display: flex; flex-direction: column; gap: 8px; }
#gps-docs .docs-bottom-sheet__item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-block); border: 1px solid var(--border); transition: all .15s; }
#gps-docs .docs-bottom-sheet__item:hover, #gps-docs .docs-bottom-sheet__item:active { border-color: rgba(70,103,255,.2); background: var(--brand-light); }
#gps-docs .docs-bottom-sheet__emoji { font-size: 24px; flex-shrink: 0; line-height: 1; }
#gps-docs .docs-bottom-sheet__item-text { flex: 1; min-width: 0; }
#gps-docs .docs-bottom-sheet__item-title { font-size: 15px; font-weight: 600; color: var(--text); }
#gps-docs .docs-bottom-sheet__item-desc { font-size: 13px; color: var(--text-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ============================================================
   22.0.1 BOTTOM SHEET — DESKTOP MODAL MODE (≥ 1024px)
   ============================================================
   На desktop bottom-sheet рендериться як центрований modal:
   max-width 480px, всі 4 кути закруглені, scale+fade animation
   замість slide-up. Drag-handle ховається (немає swipe). */
@media (min-width: 1024px) {
  #gps-docs .docs-bottom-sheet {
    bottom: auto; left: 50%; top: 50%;
    width: calc(100% - 48px); max-width: 480px;
    max-height: min(80vh, 640px);
    border-radius: 20px;
    transform: translate(-50%, -50%) scale(0.94);
    transform-origin: center center;
    box-shadow: 0 24px 80px rgba(10, 14, 39, .25), 0 8px 24px rgba(10, 14, 39, .12);
  }
  #gps-docs .docs-bottom-sheet.is-visible {
    transform: translate(-50%, -50%) scale(1);
  }
  /* Handle непотрібен на desktop — немає swipe-to-close */
  #gps-docs .docs-bottom-sheet__handle { display: none; }
}


/* ============================================================
   22.0.2 SVC-BTN / SIDEBAR-CTA-LINK — button reset
   ============================================================
   Раніше це були <a>, тепер <button> з [data-open-services].
   Скидаємо browser default styles щоб виглядали ідентично. */
#gps-docs button.svc-btn,
#gps-docs button.docs-sidebar__cta-link {
  font-family: var(--font);
  cursor: pointer;
}
#gps-docs button.docs-sidebar__cta-link {
  background: none; border: none; padding: 0;
}


/* ============================================================
   22.1. REDUCED MOTION — accessibility + power-users
   ============================================================
   Обрізаємо всі durations до 1ms + прибираємо stagger-delays.
   `!important` потрібен, бо токени на :root задають складені values
   з cubic-bezier які інакше winуть через higher specificity. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gps-open:  1ms linear !important;
    --gps-close: 1ms linear !important;
  }
  #gps-docs .docs-mobile-menu.is-visible .docs-mobile-menu__section,
  #gps-docs .docs-bottom-sheet.is-visible .docs-bottom-sheet__title,
  #gps-docs .docs-bottom-sheet.is-visible .docs-bottom-sheet__primary-tg,
  #gps-docs .docs-bottom-sheet.is-visible .docs-bottom-sheet__divider,
  #gps-docs .docs-bottom-sheet.is-visible .docs-bottom-sheet__item {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}


/* ============================================================
   23. FOOTER
   ============================================================ */

#gps-docs .docs-footer { background: linear-gradient(135deg, #0a0e27 0%, #1a1f4e 60%, #2d1b69 100%); }
#gps-docs .docs-footer__inner { max-width: 1440px; margin: 0 auto; padding: 44px 24px; }
@media (max-width: 1023px) { #gps-docs .docs-footer__inner { padding: 32px 16px; } }
#gps-docs .docs-footer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
@media (max-width: 1023px) { #gps-docs .docs-footer__top { flex-direction: column; gap: 20px; } }
#gps-docs .docs-footer__logo { display: inline-flex; align-items: center; gap: 10px; }
#gps-docs .docs-footer__logo-icon { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 15px; }
#gps-docs .docs-footer__logo-text { font-weight: 700; font-size: 20px; color: #fff; }
#gps-docs .docs-footer__socials { display: flex; align-items: flex-start; gap: 16px; }
@media (max-width: 1023px) { #gps-docs .docs-footer__socials { gap: 10px; } }
#gps-docs .docs-footer__social-link { display: flex; flex-direction: column; align-items: center; gap: 5px; }
#gps-docs .docs-footer__social-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .3s; }
@media (max-width: 1023px) { #gps-docs .docs-footer__social-icon { width: 38px; height: 38px; } }
#gps-docs .docs-footer__social-link:hover .docs-footer__social-icon { transform: translateY(-4px) scale(1.05); background: rgba(255,255,255,.18); }
#gps-docs .docs-footer__social-label { font-size: 12px; font-weight: 500; color: #8a9bb5; transition: color .3s; }
@media (max-width: 1023px) { #gps-docs .docs-footer__social-label { font-size: 10px; } }
#gps-docs .docs-footer__social-link:hover .docs-footer__social-label { color: #fff; }
/* <address>-обгортка скидає italic + матчить поточний HTML (.docs-footer__phone, __phone-sep) */
#gps-docs .docs-footer__phones { display: flex; justify-content: flex-end; align-items: center; gap: 14px; flex-wrap: wrap; font-style: normal; }
@media (max-width: 1023px) { #gps-docs .docs-footer__phones { justify-content: center; } }
#gps-docs .docs-footer__phone { font-size: 15px; font-weight: 500; color: #b0bdd0; transition: color .2s; text-decoration: none; }
#gps-docs .docs-footer__phone:hover { color: #fff; }
#gps-docs .docs-footer__phone-sep { color: #5a6a80; }
#gps-docs .docs-footer__bottom { text-align: center; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
#gps-docs .docs-footer__copyright { font-size: 13px; color: rgba(255,255,255,.45); margin: 0 0 6px; }
#gps-docs .docs-footer__disclaimer { font-size: 12px; color: rgba(255,255,255,.3); margin: 0; }


/* ============================================================
   24. SPACER v2.4
   ============================================================
   Висота нижнього spacer-a = приблизна висота docs-floating-cta + gap.
   На мобільному було 90 (під 2-рядкову CTA) → стало 60 (під 48px CTA + 12 gap).
*/

#gps-docs .docs-spacer { height: 48px; background: var(--bg); }
@media (max-width: 1023px) { #gps-docs .docs-spacer { height: 60px; } }


/* ============================================================
   25. ANIMATIONS
   ============================================================ */

@keyframes gps-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gps-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes gps-slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }


/* ============================================================
   26. PRINT STYLES
   ============================================================ */

@media print {
  #gps-docs .docs-header, #gps-docs .docs-footer, #gps-docs .docs-sidebar, #gps-docs .docs-toc-aside,
  #gps-docs .docs-floating-cta, #gps-docs .docs-bottom-sheet, #gps-docs .docs-bottom-sheet-overlay,
  #gps-docs .docs-secondary-bar, #gps-docs .docs-mobile-inline-nav, #gps-docs .docs-mobile-search,
  #gps-docs .docs-mobile-menu, #gps-docs .docs-share--desktop, #gps-docs .docs-share--mobile,
  #gps-docs .docs-sidebar__cta, #gps-docs .docs-cta-final, #gps-docs .docs-feedback,
  #gps-docs .docs-anchor-link { display: none !important; }
  #gps-docs { background: #fff; }
  #gps-docs .docs-grid { grid-template-columns: 1fr; }
  #gps-docs .docs-article-card { box-shadow: none; border: none; padding: 0; border-radius: 0; }
  #gps-docs .docs-hero { background: #333 !important; padding: 20px; }
  #gps-docs .docs-layout { padding: 20px 0; }
}


/* ============================================================
   27. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  #gps-docs *, #gps-docs *::before, #gps-docs *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ============================================================
   28. OVERRIDES ТА ФІКСИ (v2.3 — Phase 1)
   ============================================================ */

/* --- 28.1 Приховати Machic mobile-bottom-menu на /docs/ ---
   Дублює PHP theme_mod filter (inc/docs-functions.php section 13).
   Працює як підстраховка — гарантовано ховає візуально навіть
   якщо PHP filter не вгадає правильну назву опції. */
body.gps-docs-page .mobile-bottom-menu,
body.gps-docs-page .mobile-bottom-menu-wrapper {
  display: none !important;
}


/* --- 28.2 scrollToTop override для /docs/ ---
   Глобальне правило для scrollToTop знаходиться в machic-child/style.css.
   Тут — локальні override для docs-сторінок (над docs-floating-cta ~48px). */
body.gps-docs-page .scrollToTop {
  z-index: 80 !important; /* під меню (99) і secondary-bar (98), над floating-cta (90) */
}

@media (max-width: 1023px) {
  /* v2.4: 70px = 48px CTA + ~22px gap. Було 100px під стару 90px CTA. */
  body.gps-docs-page .scrollToTop {
    bottom: 70px !important;
  }
}


/* --- 28.3 Share buttons — висоти винесено в основні правила (секція 14.1)
   Desktop: 54px, Mobile: 56px — значно більші за Google min 48px, premium feel. */


/* --- 28.4 Sidebar CTA — збільшені шрифти ---
   Краща читабельність на desktop, не впливає на mobile (sidebar прихований). */
#gps-docs .docs-sidebar__cta-title {
  font-size: 14px; /* 13 → 14 */
}

#gps-docs .docs-sidebar__cta-desc {
  font-size: 13px; /* 12 → 13 */
}

#gps-docs .docs-sidebar__cta-label {
  font-size: 12px; /* 11 → 12 */
}


/* ============================================================
   29. MOBILE MENU CTA — UNIFIED MAX-WIDTH (v2.4)
   ============================================================
   Без цього правила на планшеті portrait (768px) або на широкому мобільному
   (414px iPhone Plus) кнопки "Перейти в магазин" і "Написати в Telegram"
   розтягуються на всю ширину контейнера і виглядають гігантськими.
   
   max-width: 360px — класичний "button-sized" розмір. На iPhone SE (320px)
   кнопка автоматично обмежується шириною контейнера (320-48=272px), це ок.
*/

#gps-docs .docs-mobile-menu__cta--shop,
#gps-docs .docs-mobile-menu__cta--tg {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}