/* ============================================================
   TopCam.kz — Mobile-first UX refinements (2026)
   Аддитивный слой. Грузится после cat-fix.css.
   Чтобы полностью отключить — убрать <link> в header.php.
   Без правок раскладки/разметки: только эргономика, тач и
   прогрессивные улучшения (старые браузеры игнорируют молча).
   ============================================================ */

/* ── 1. Безопасные зоны (чёлки, жестовая полоса iOS/Android) ── */
.wa-float       { bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
.hp-mobile-bar  { padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
.tc-mobile-menu { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

/* ── 2. Тактильный отклик как в приложении ─────────────────── */
a, button, input, textarea, select,
.btn-tc, .btn-tc-outline, .product-card, .hp-contact-card,
.cat-group-link, .hp-seg-cta, .hp-mobile-bar-btn {
  -webkit-tap-highlight-color: transparent;
}
@media (hover: none) and (pointer: coarse) {
  .btn-tc:active, .btn-tc-outline:active,
  .hp-mobile-bar-btn:active, .hp-seg-cta:active {
    transform: scale(.97);
    transition: transform .08s ease;
  }
}

/* ── 3. Удобные тап-зоны (≥44–52px, реко Apple HIG / Material) ── */
@media (max-width: 960px) {
  .tc-burger, .theme-btn {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}
@media (max-width: 768px) {
  .hp-mobile-bar-btn { min-height: 52px; }
}

/* ── 4. Без авто-зума iOS при фокусе: поля ≥16px ───────────── */
/* без !important — заданный inline размер (напр. 18px) сохраняется */
@media (max-width: 768px) {
  input, select, textarea, .form-control, .form-select { font-size: 16px; }
}
/* нативные чекбоксы/радио/прогресс — в цвет бренда */
input, select, textarea, progress { accent-color: var(--tc-accent); }

/* ── 5. Плавная инерция + мягкий snap на гориз. скроллерах ──── */
.hp-mscroll, .reviews-track, .mobile-cats-strip {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.hp-mscroll::-webkit-scrollbar,
.reviews-track::-webkit-scrollbar,
.mobile-cats-strip::-webkit-scrollbar { display: none; }
.hp-mscroll > [class*="col"],
.reviews-track > [class*="col"],
.mobile-cats-strip > * { scroll-snap-align: start; }

/* ── 6. Мобильное меню: не «протягивать» скролл на страницу ── */
.tc-mobile-menu { overscroll-behavior: contain; }

/* ── 7. Прогрессивные мелочи 2026 ──────────────────────────── */
h1, h2, .section-title, .hero-v3-h1 { text-wrap: balance; }
p, .section-sub { text-wrap: pretty; }
::selection { background: rgba(10,157,99,.28); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }