/* =====================================================================
   Xicorta Public Site Mobile V2 — точечные правки поверх xicorta_mobile_v1.css
   Подключить ПОСЛЕ xicorta_mobile_v1.css в base.html
   ===================================================================== */

/* ------------------------------------------------------------------
   1. NAV — высота и lang switch
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .x-nav {
    height: var(--x-mobile-nav-h) !important; /* 64px, не 92px */
  }
  .x-nav__inner {
    padding: 0 !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  /* Lang switch в десктоп-версии убираем, он уже в мобильном меню */
  .x-lang-switch {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
   2. HERO СЕКЦИИ — убираем горизонтальное переполнение
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  /* Главная hero */
  .x-hero,
  .x-hero--home {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .x-title {
    font-size: clamp(34px, 9.5vw, 48px) !important;
  }
  .x-lead {
    font-size: 15px !important;
    margin-top: 16px !important;
  }
  .x-hero__actions {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .x-hero__actions .x-btn {
    width: 100% !important;
  }
  /* Метрики hero - 3 в ряд остаются, только меньше */
  .x-hero-metrics {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    margin-top: 28px !important;
  }
  .x-metric-mini strong {
    font-size: 22px !important;
  }
}

@media (max-width: 520px) {
  .x-hero-metrics {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .x-metric-mini {
    border-left: 0 !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    padding-top: 12px !important;
  }
  .x-metric-mini:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ------------------------------------------------------------------
   3. DASH-MOCK — скрываем на мобиле чтобы не ломал layout
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .dash-mock,
  .dash-mock--featured {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
   4. SOLUTIONS / CARDS — сетки
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .solutions--visual {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .solution-card--visual {
    min-height: 480px !important;
  }
}

@media (max-width: 600px) {
  .solutions--visual {
    grid-template-columns: 1fr !important;
  }
  .solution-card--visual {
    min-height: 420px !important;
  }
}

/* ------------------------------------------------------------------
   5. REASONS / WHY — 3 в ряд на планшете, 2 на мобиле
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .reasons--large {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
  }
  .reasons--large .reason {
    padding: 20px 18px !important;
    min-height: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, .08) !important;
    border-top: 0 !important;
  }
  .reasons--large .reason:nth-child(3n+1) {
    border-left: 0 !important;
  }
}

@media (max-width: 600px) {
  .reasons--large {
    grid-template-columns: 1fr !important;
  }
  .reasons--large .reason {
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    padding: 18px 16px !important;
    display: grid !important;
    grid-template-columns: 48px 1fr !important;
    column-gap: 14px !important;
    align-items: center !important;
    text-align: left !important;
  }
  .reasons--large .reason:first-child {
    border-top: 0 !important;
  }
  .reasons--large .reason__icon {
    grid-row: 1 / 3 !important;
    margin: 0 !important;
  }
  .reasons--large .reason h3 {
    margin: 0 !important;
  }
  .reasons--large .reason p {
    margin-top: 3px !important;
  }
}

/* ------------------------------------------------------------------
   6. TRUST BANNER — мобиль
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .trust-banner,
  .trust-banner--brand {
    grid-template-columns: 1fr !important;
    padding: 30px 24px !important;
    min-height: 0 !important;
  }
  .trust-metrics {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin-top: 24px !important;
  }
  .trust-metric strong {
    font-size: 32px !important;
  }
  .trust-logo-large img {
    width: 200px !important;
  }
}

@media (max-width: 520px) {
  .trust-metrics {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
}

/* ------------------------------------------------------------------
   7. CTA WIDE — мобиль
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .cta-wide,
  .cta-wide--large {
    display: block !important;
    padding: 28px 24px !important;
    border-radius: 18px !important;
    text-align: left !important;
  }
  .cta-wide h2,
  .cta-wide--large h2 {
    font-size: clamp(26px, 7vw, 36px) !important;
    margin-bottom: 12px !important;
  }
  .cta-wide p {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }
  .cta-wide .x-btn,
  .cta-wide--large .x-btn {
    width: 100% !important;
    margin-top: 18px !important;
  }
}

/* ------------------------------------------------------------------
   8. PRICING — карточки тарифов
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .pricing-pro-grid,
  .pricing-mini--five {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    padding-top: 16px !important;
  }
  .pricing-pro-card {
    min-height: 0 !important;
  }
  .pricing-pro-card--featured {
    transform: none !important;
  }
}

@media (max-width: 600px) {
  .pricing-pro-grid,
  .pricing-mini--five {
    grid-template-columns: 1fr !important;
  }
  .billing-switch {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .billing-switch button {
    width: 100% !important;
  }
}

/* Lifetime offer — мобиль */
@media (max-width: 1023px) {
  .lifetime-offer {
    grid-template-columns: 1fr !important;
    padding: 24px !important;
    gap: 20px !important;
  }
  .lifetime-price-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .lifetime-compact {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .lifetime-compact span {
    border-left: 0 !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    padding-top: 8px !important;
  }
}

@media (max-width: 520px) {
  .lifetime-price-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .lifetime-compact {
    grid-template-columns: 1fr !important;
  }
}

/* ------------------------------------------------------------------
   9. МОДУЛИ — сетка
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .modules-grid--premium,
  .x-mod-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .x-mod-card {
    min-height: 0 !important;
  }
  .x-mod-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .x-mod-hero__preview {
    transform: none !important;
  }
  .x-mod-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .x-mod-filter {
    flex-wrap: wrap !important;
    width: auto !important;
    justify-content: flex-start !important;
    padding: 8px !important;
  }
  .x-mod-filter button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 12px 10px !important;
  }
}

@media (max-width: 600px) {
  .modules-grid--premium,
  .x-mod-grid {
    grid-template-columns: 1fr !important;
  }
  .x-mod-stats {
    grid-template-columns: 1fr !important;
  }
  .x-mod-stats div + div::before {
    display: none !important;
  }
  .module-stats--premium {
    grid-template-columns: 1fr !important;
  }
  .module-stats--premium .module-stat {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  }
}

/* ------------------------------------------------------------------
   10. СТРАНИЦЫ ПЛАНОВ — hero и calculator
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .plan-hero-card,
  .enterprise-hero {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .plan-hero-card h1,
  .enterprise-hero h1 {
    font-size: clamp(34px, 9vw, 48px) !important;
  }
  .plan-hero-card > div:first-child {
    padding: 28px !important;
  }
  .plan-summary-card {
    padding: 24px !important;
  }
  .plan-summary-card strong {
    font-size: 42px !important;
  }
  .plan-calculator,
  .enterprise-config {
    grid-template-columns: 1fr !important;
  }
  .plan-calc-total,
  .enterprise-estimate {
    position: relative !important;
    top: auto !important;
  }
  .calc-periods {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .plan-results-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .plan-section-grid {
    grid-template-columns: 1fr !important;
  }
  .plan-compare-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .calc-periods,
  .gps-options,
  .addon-list,
  .plan-flow-notes {
    grid-template-columns: 1fr !important;
  }
  .plan-results-grid {
    grid-template-columns: 1fr !important;
  }
  .plan-compare-grid {
    grid-template-columns: 1fr !important;
  }
  .enterprise-grid-inputs {
    grid-template-columns: 1fr !important;
  }
  .enterprise-mini-list {
    grid-template-columns: 1fr !important;
  }
  .contact-methods {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .enterprise-periods {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ------------------------------------------------------------------
   11. FOOTER — мобиль
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .x-footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
}

@media (max-width: 600px) {
  .x-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  .x-footer__bottom {
    display: grid !important;
    gap: 8px !important;
    padding-bottom: calc(22px + env(safe-area-inset-bottom)) !important;
  }
}

/* ------------------------------------------------------------------
   12. ОБЩИЕ ПРАВКИ
   ------------------------------------------------------------------ */

/* Контейнер — нормальные поля на мобиле */
@media (max-width: 1023px) {
  .x-container {
    width: min(100% - 32px, 720px) !important;
  }
}
@media (max-width: 520px) {
  .x-container {
    width: min(100% - 28px, 520px) !important;
  }
}

/* Секции — меньше padding */
@media (max-width: 1023px) {
  .x-section {
    padding: 40px 0 !important;
  }
  .x-section--hero {
    padding: 32px 0 24px !important;
  }
  .section-heading h2,
  .x-section-title {
    font-size: clamp(26px, 7vw, 36px) !important;
  }
  .section-heading--large h2 {
    font-size: clamp(28px, 7.5vw, 42px) !important;
  }
}

/* Pricing hero */
@media (max-width: 1023px) {
  .pricing-hero-premium {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .pricing-hero-premium h1 {
    font-size: clamp(32px, 9vw, 46px) !important;
  }
  .pricing-hero-points {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 600px) {
  .pricing-hero-points {
    grid-template-columns: 1fr !important;
  }
}

/* Integration strip */
@media (max-width: 1023px) {
  .integration-strip {
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 20px !important;
  }
  .integration-strip strong {
    max-width: none !important;
    width: 100% !important;
  }
}

/* Stat strip */
@media (max-width: 1023px) {
  .stat-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    padding: 18px 20px !important;
  }
}
@media (max-width: 600px) {
  .stat-strip {
    grid-template-columns: 1fr !important;
  }
}

/* Simple / contact pages */
@media (max-width: 768px) {
  .contact-cards {
    grid-template-columns: 1fr !important;
  }
  .simple-card {
    padding: 22px !important;
    border-radius: 16px !important;
  }
}

/* Таблицы на мобиле */
@media (max-width: 768px) {
  .compare-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -4px !important;
  }
  .compare-table {
    min-width: 680px !important;
  }
}

/* ------------------------------------------------------------------
   13. AUTH СТРАНИЦЫ — login, register
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .x-auth-card,
  .auth-card {
    padding: 28px 20px !important;
    border-radius: 18px !important;
    margin: 20px auto !important;
  }
  .x-auth-card h1,
  .auth-card h1 {
    font-size: 26px !important;
  }
}

/* ------------------------------------------------------------------
   14. OVERFLOW PROTECTION — глобально
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  html, body.x-body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  /* Элементы которые могут выйти за край */
  .dash-mock--featured {
    display: none !important;
  }
  .x-mod-hero__preview {
    transform: none !important;
    -webkit-transform: none !important;
  }
  /* Perspective-эффекты убираем на мобиле */
  .x-mod-hero__preview:hover {
    transform: none !important;
    -webkit-transform: none !important;
  }
}

/* ------------------------------------------------------------------
   15. TOUCH UX
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  /* Карточки не поднимаются при hover (на тач нет hover) */
  .solution-card--visual:hover,
  .x-mod-card:hover,
  .module-card--premium:hover,
  .pricing-pro-card:hover,
  .reasons--large .reason:hover,
  .trust-metric:hover {
    transform: none !important;
  }

  /* Кнопки — крупнее тач-зона */
  .x-btn {
    min-height: 50px !important;
  }

  /* Скролл по горизонтали для фильтров */
  .x-mod-filter {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }
  .x-mod-filter::-webkit-scrollbar {
    display: none;
  }
  .x-mod-filter button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  .billing-switch {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    padding-bottom: 4px !important;
  }
  .billing-switch::-webkit-scrollbar {
    display: none;
  }
  .billing-switch button {
    flex: 0 0 auto !important;
  }
}

/* ------------------------------------------------------------------
   16. AUTH СТРАНИЦЫ — login, register, forgot
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .x-auth-shell {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    min-height: 0 !important;
    padding: 28px 0 !important;
  }
  .x-auth-copy h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
    margin: 12px 0 8px !important;
  }
  .x-auth-benefits {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .x-auth-card {
    padding: 28px 24px !important;
    border-radius: 18px !important;
  }
}
@media (max-width: 520px) {
  .x-auth-page { padding: 20px 0 40px !important; }
  .x-auth-benefits { grid-template-columns: 1fr !important; }
  .x-auth-card { padding: 22px 18px !important; }
  .x-demo-main-btn { font-size: 17px !important; min-height: 58px !important; }
  .x-auth-head h2 { font-size: 22px !important; }
}

/* ------------------------------------------------------------------
   17. DEMO СТРАНИЦА
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .x-demo-shell { grid-template-columns: 1fr !important; gap: 16px !important; }
  .x-demo-card--access, .x-demo-card--preview {
    border-radius: 18px !important; padding: 26px 22px !important;
    border-left: 1px solid rgba(70,125,255,.35) !important;
  }
  .x-demo-card h1 { font-size: clamp(28px, 8vw, 38px) !important; }
  .x-demo-limits { grid-template-columns: repeat(3,1fr) !important; }
  .x-demo-info { flex-direction: column !important; gap: 12px !important; }
}
@media (max-width: 520px) {
  .x-demo-limits { grid-template-columns: 1fr !important; }
  .x-demo-limits div {
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    min-height: 72px !important;
  }
  .x-demo-limits div:first-child { border-top: 0 !important; }
  .x-demo-value-grid { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------------
   18. PRICING DETAIL — segment tabs
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .pricing-segment-tabs__buttons {
    flex-wrap: wrap !important;
    border-radius: 16px !important;
  }
  .pricing-segment-tabs button {
    flex: 1 1 40% !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
}

/* ------------------------------------------------------------------
   19. SOLUTIONS GRID
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .x-solution-grid { grid-template-columns: repeat(2,1fr) !important; gap: 16px !important; }
  .x-solution-card img { height: 200px !important; }
  .x-solution-card h3 { font-size: 24px !important; margin: 18px 18px 8px !important; }
}
@media (max-width: 600px) {
  .x-solution-grid { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------------
   20. MODULE DETAIL
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .x-module-detail-hero { grid-template-columns: 1fr !important; padding: 24px !important; border-radius: 20px !important; }
  .x-module-detail-hero h1 { font-size: clamp(30px, 8vw, 48px) !important; }
  .x-module-detail-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .x-detail-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
}
@media (max-width: 520px) {
  .x-module-detail-actions { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------------
   21. CHECKOUT DIFF
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .checkout-diff-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .checkout-plan-guard { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* ------------------------------------------------------------------
   22. TYPOGRAPHY GLOBAL
   ------------------------------------------------------------------ */
@media (max-width: 520px) {
  .x-title, .x-title--pricing { font-size: clamp(30px, 9.5vw, 40px) !important; line-height: 1.05 !important; }
  .section-heading h2 { font-size: clamp(24px, 7.5vw, 32px) !important; }
  .x-lead { font-size: 14px !important; line-height: 1.65 !important; }
}

/* ------------------------------------------------------------------
   23. SAFE AREA — iPhone notch
   ------------------------------------------------------------------ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 1023px) {
    .x-footer__bottom {
      padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    }
    .x-mobile-menu {
      padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ------------------------------------------------------------------
   FIX-1: contact-grid — брейкпоинт 768px вместо 980px
   Правая колонка minmax(380px,520px) — давит на 360–767px экранах
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .contact-panel {
    padding: 22px !important;
    border-radius: 14px !important;
  }
}

/* ------------------------------------------------------------------
   FIX-2: pricing_detail hero (.pd-hero) — 1024px уже есть в inline,
   но нужен правильный стек на 767px и ниже
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .pd-hero {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 14px 0 0 !important;
  }
  .pd-panel {
    position: static !important;
    margin-top: 0 !important;
  }
  .pd-w {
    padding: 0 16px !important;
  }
  .pd-hcta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .pd-hcta .pd-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ------------------------------------------------------------------
   FIX-3: hero metrics conflict — v1.css ставит 1fr, v2.css ставит repeat(3,1fr)
   Решение: на 1023px оставляем 3 колонки только для НЕ-product-hero метрик.
   Для product-hero (.x-product-hero-copy) v1.css уже делает 1fr — не перебиваем.
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .x-hero-metrics:not(.x-product-hero-copy .x-hero-metrics) {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 520px) {
  .x-hero-metrics {
    grid-template-columns: 1fr !important;
  }
}

/* ------------------------------------------------------------------
   FIX-5: xent-sidebar на мобиле — при display:block sidebar
   рендерится в полный экран сверху. Добавляем горизонтальный скролл
   для nav и компактный вид sidebar до появления togglera.
   ------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .xp-sidebar {
    position: static !important;
    height: auto !important;
    max-height: none !important;
  }
  .xp-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    scrollbar-width: none !important;
    padding-bottom: 6px !important;
  }
  .xp-nav::-webkit-scrollbar { display: none; }
  .xp-nav__label { display: none !important; }
  .xp-nav__link {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }
  .xp-nav__link:hover {
    transform: none !important;
  }
  .xp-sidebar__brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 4px !important;
    margin-bottom: 0 !important;
  }
  .xp-sidebar__status {
    margin-top: 0 !important;
  }
  .xp-sidebar__foot {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
   FIX-6: billing-switch — fade-out справа чтобы видно что скроллится
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .billing-switch-wrap,
  .billing-switch.billing-switch--pricing {
    position: relative !important;
  }
  .billing-switch.billing-switch--pricing::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 48px !important;
    background: linear-gradient(to right, transparent, rgba(5, 9, 20, 0.85)) !important;
    pointer-events: none !important;
    border-radius: 0 12px 12px 0 !important;
  }
}

/* ------------------------------------------------------------------
   FIX-7: нативный select — appearance:none + стрелка
   ------------------------------------------------------------------ */
select.field,
.field--select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b98ad' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}

/* ------------------------------------------------------------------
   FIX-8: textarea resize + max-height
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .contact-form textarea.field,
  textarea.field {
    resize: vertical !important;
    max-height: 240px !important;
    min-height: 120px !important;
    rows: 5 !important;
  }
}

/* ------------------------------------------------------------------
   FIX-9: стрелка в мобильном меню — заменяем Unicode → CSS chevron
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .x-mobile-menu__links a::after {
    content: "" !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 2px solid #3a8dff !important;
    border-top: 2px solid #3a8dff !important;
    transform: rotate(45deg) !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
}

/* ------------------------------------------------------------------
   FIX-10: touch-action:manipulation — убираем 300ms задержку
   ------------------------------------------------------------------ */
.x-btn,
.x-mobile-nav-toggle,
.x-mobile-menu__links a,
.x-mobile-menu__actions a,
.x-mobile-menu__actions button,
.x-mobile-menu__head button,
.billing-switch button,
.x-module-filter button,
.x-mod-filter button,
.calc-periods button {
  touch-action: manipulation !important;
}

/* ------------------------------------------------------------------
   FIX-11: бургер → крестик анимация при открытом меню
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  body.x-mobile-menu-open .x-mobile-nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  body.x-mobile-menu-open .x-mobile-nav-toggle span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  body.x-mobile-menu-open .x-mobile-nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }
  .x-mobile-nav-toggle span {
    transition: transform 0.22s ease, opacity 0.18s ease !important;
  }
}

/* ------------------------------------------------------------------
   FIX-12 (corrected): cookie banner на мобиле — .x-cookie-banner__body
   остаётся display:grid с grid-template-columns:minmax(0,1fr) auto.
   Колонка actions (auto) с тремя nowrap-кнопками раздувается, колонка
   с текстом сжимается почти до 0 → текст рвётся по одному слову на строку.
   Решение: grid-template-columns:1fr — единая колонка, текст сверху,
   кнопки снизу в 2x2 сетке.
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .x-cookie-banner {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
  }
  .x-cookie-banner__body {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "copy" "actions" !important;
    gap: 14px !important;
    padding: 18px !important;
  }
  .x-cookie-banner__copy {
    grid-area: copy !important;
    max-width: none !important;
  }
  .x-cookie-banner__actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .x-cookie-banner__actions .x-cookie-action {
    flex: initial !important;
    width: 100% !important;
    white-space: normal !important;
  }
  .x-cookie-action--settings {
    grid-column: 1 / -1 !important;
  }
}

/* ------------------------------------------------------------------
   FIX-14: cache-bust — версия файла обновлена в base.html
   ------------------------------------------------------------------ */