/* ============================================================
   ELOSTORE Marketplace · Mobile adaptation
   Подключается ПОСЛЕ _theme.css и inline-стилей страниц.
   v=1
   ============================================================ */

/* ── Глобально: убираем горизонтальный скролл и фиксим зум на iOS ── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
img, svg, video, iframe { max-width: 100%; height: auto; }

/* iOS: input/textarea не должны зумить страницу при фокусе → 16px минимум */
@media (max-width: 768px) {
  input, textarea, select, button {
    font-size: 16px !important;
  }
  /* keep mono numerics unchanged where they were already 16+ */
  .mp-input, .mp-select, .nb-stepper__input, .nb-textarea {
    font-size: 16px !important;
  }
}

/* ============================================================
   Универсальные фиксы — медиа 768
   ============================================================ */
@media (max-width: 768px) {

  /* ── HEADER ── */
  .mp-hdr {
    padding: 12px 16px !important;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
  }
  .mp-brand { font-size: 16px; flex: 0 0 auto; }
  /* На мобильном прячем горизонтальный nav */
  .mp-nav { display: none !important; }
  /* Бургер */
  .mp-burger {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .mp-burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ink, #0a0f1d);
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
  }
  .mp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  .mp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

  /* Полноэкранное меню */
  .mp-mmenu {
    position: fixed;
    inset: 0;
    background: var(--bg, #fff);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    animation: mp-mmenu-in .2s ease-out;
  }
  @keyframes mp-mmenu-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .mp-mmenu[hidden] { display: none !important; }
  .mp-mmenu__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-2, #eef0f4);
  }
  .mp-mmenu__close {
    background: transparent; border: 0; cursor: pointer;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font: 400 32px/1 'Manrope', sans-serif;
    color: var(--ink, #0a0f1d);
  }
  .mp-mmenu__nav {
    display: flex !important;
    flex-direction: column !important;
    padding: 16px 0;
    gap: 0 !important;
    overflow: visible !important;
  }
  .mp-mmenu__nav a {
    display: flex !important;
    align-items: center;
    padding: 16px 24px;
    font: 600 17px/1.3 'Manrope', sans-serif;
    color: var(--ink, #0a0f1d);
    border-bottom: 1px solid var(--line-2, #f1f3f7);
    min-height: 56px;
    text-decoration: none;
    white-space: normal !important;
  }
  .mp-mmenu__nav a:active { background: var(--bg-soft, #f5f7fa); }
  .mp-mmenu__nav a.is-active { color: var(--accent, #10b981); }
  .mp-mmenu__nav .mp-nav__cta {
    margin: 16px 24px 0;
    padding: 14px 18px !important;
    border-radius: 10px;
    background: var(--accent, #10b981);
    color: #fff !important;
    border-bottom: 0;
    justify-content: center;
  }
  .mp-mmenu__nav .mp-nav__logout {
    margin-top: 8px;
    color: var(--danger, #ef4444) !important;
  }
  .mp-mmenu__nav .mp-nav__bell-dot {
    margin-left: 8px;
    background: var(--accent, #10b981);
    color: #fff;
    font: 700 11px/1 'JetBrains Mono', monospace;
    padding: 3px 7px;
    border-radius: 10px;
  }
  /* Блокируем скролл body когда меню открыто */
  body.mp-mmenu-open { overflow: hidden; }

  /* ── SHELL общая обёртка ── */
  .mp-shell { padding: 0 16px !important; margin: 20px auto 60px !important; }
  .bd-shell, .ld-shell, .ch-shell, .nb-shell, .au-shell {
    padding: 0 16px !important;
    margin-top: 16px !important;
    margin-bottom: 60px !important;
  }
  .mp-card { padding: 18px 16px !important; border-radius: 12px !important; }

  /* ── Заголовки ── */
  .mp-h1 { font-size: 22px !important; line-height: 1.2 !important; }
  .mp-h2 { font-size: 17px !important; }
  .mp-sub { font-size: 14px !important; }

  /* ── Универсальные grid-row → 1 колонка ── */
  .mp-row, .mp-row-3 { grid-template-columns: 1fr !important; }

  /* ── Кнопки: touch-friendly ── */
  .mp-btn { min-height: 44px; padding: 12px 16px !important; }
  .mp-btn--big { padding: 14px 18px !important; font-size: 15px !important; }

  /* ── Forms: full-width inputs ── */
  .mp-input, .mp-select { width: 100%; padding: 12px 14px !important; }

  /* ============================================================
     INDEX (landing)
     ============================================================ */
  .lh { padding: 48px 16px 36px !important; }
  .lh__title {
    font-size: clamp(26px, 8vw, 36px) !important;
    line-height: 1.1 !important;
  }
  .lh__lead { font-size: 15px !important; line-height: 1.55 !important; padding: 0 4px; }
  .lh__cta { flex-direction: column; gap: 10px !important; }
  .lh__cta-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px 18px !important;
  }
  .lh__cta-card strong { font-size: 16px !important; }
  .lh__cta-card .lh__cta-sub { font-size: 12px !important; }

  .ls { grid-template-columns: repeat(2, 1fr) !important; margin-top: 36px !important; }
  .ls__cell { padding: 18px 12px !important; }
  .ls__val { font-size: 22px !important; }

  .sec { margin: 48px auto !important; padding: 0 16px !important; }
  .sec__title { font-size: 24px !important; line-height: 1.2 !important; }
  .sec__sub { font-size: 14px !important; }

  .lw { grid-template-columns: 1fr !important; gap: 10px !important; }
  .lw__step { padding: 18px 16px !important; }
  .lw__title { font-size: 16px !important; }

  .lr { grid-template-columns: 1fr !important; gap: 14px !important; }
  .lr__card { padding: 22px 18px !important; }
  .lr__title { font-size: 20px !important; line-height: 1.2 !important; }
  .lr__list li { font-size: 13px !important; }

  .lf { grid-template-columns: 1fr !important; gap: 10px !important; }
  .lf__tile { padding: 18px 16px !important; }

  .lt { grid-template-columns: 1fr !important; gap: 12px !important; }
  .lt__card { padding: 22px 18px !important; }
  .lt__price-main { font-size: 30px !important; }
  .lt__cta { padding: 14px !important; min-height: 48px; }

  .lq { padding: 0 !important; }
  .lq__item summary { padding: 14px 16px !important; font-size: 14px !important; }
  .lq__item summary::after { font-size: 22px !important; }
  .lq__body { padding: 14px 16px !important; font-size: 13.5px !important; line-height: 1.6 !important; }

  .lc {
    margin: 48px auto 60px !important;
    padding: 36px 18px !important;
    border-radius: 8px !important;
  }
  .lc__title { font-size: 24px !important; }
  .lc__sub { font-size: 14px !important; }

  /* ============================================================
     BOARD
     ============================================================ */
  .bd-head { gap: 10px !important; padding-bottom: 14px !important; }
  .bd-head__title { font-size: 22px !important; }
  .bd-head__sub { font-size: 13px !important; }
  .bd-head__counter { font-size: 11px !important; padding: 6px 10px !important; }

  .bd-bar {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .bd-bar__price {
    flex-wrap: wrap;
    font-size: 11px !important;
  }
  .bd-bar__price input { width: 80px; min-height: 40px; }
  .bd-bar__filters { gap: 6px !important; margin-bottom: 14px !important; overflow-x: auto; flex-wrap: wrap; }
  .bd-chip { padding: 8px 12px !important; font-size: 11px !important; min-height: 36px; }

  .bd-row__inner { padding: 14px 16px !important; gap: 12px !important; grid-template-columns: 1fr !important; }
  .bd-row__title { font-size: 17px !important; line-height: 1.25 !important; }
  .bd-row__desc { font-size: 13px !important; }
  .bd-row__price { font-size: 22px !important; }
  .bd-row__cta { width: 100%; min-height: 44px; padding: 12px 18px !important; }
  .bd-row__side {
    align-items: flex-start !important;
    text-align: left !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .bd-modal { padding: 12px !important; }
  .bd-modal__card { padding: 20px 18px !important; max-height: 92vh !important; }

  /* ============================================================
     LISTING (detail)
     ============================================================ */
  .ld-hero {
    padding: 18px 16px !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .ld-hero__title { font-size: 22px !important; line-height: 1.2 !important; }
  .ld-hero__price { text-align: left !important; font-size: 26px !important; }
  .ld-hero__price small,
  .ld-hero__hint { text-align: left !important; }

  .ld-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .ld-stat { padding: 12px 14px !important; }
  .ld-stat__val { font-size: 16px !important; }

  .ld-actions { padding: 12px 14px !important; }
  .ld-actions__btns { width: 100%; }
  .ld-actions__btns .mp-btn { flex: 1 1 auto; }

  .ld-offer { padding: 14px 14px !important; }
  .ld-offer__head { gap: 10px !important; flex-wrap: wrap; }
  .ld-offer__price { font-size: 19px !important; }
  .ld-offer__name { font-size: 14px !important; }
  .ld-offer__btns { width: 100%; }
  .ld-offer__btns .mp-btn { flex: 1 1 auto; }

  .ld-deal { padding: 14px !important; }
  .ld-deal__head { display: block !important; }
  .ld-deal__price { text-align: left !important; margin-top: 10px !important; font-size: 22px !important; }
  .ld-deal__steps { grid-template-columns: 1fr !important; }
  .ld-deal__title { font-size: 18px !important; }

  .ld-confirm__card { padding: 18px !important; }

  /* ============================================================
     NEW (calculator / wizard)
     ============================================================ */
  body:has(.nb-shell) { padding-bottom: 200px !important; }
  .nb-shell { padding: 0 16px !important; }
  .nb-section { margin-bottom: 22px !important; }
  .nb-section__title { font-size: 15px !important; }
  .nb-tiles { grid-template-columns: 1fr !important; gap: 8px !important; }
  .nb-tile { padding: 14px 14px !important; }
  .nb-tile__title { font-size: 15px !important; }
  .nb-tile__sub { font-size: 12px !important; }

  .nb-stepper__btn { width: 52px !important; font-size: 24px !important; min-height: 50px; }
  .nb-stepper__input { font-size: 18px !important; padding: 14px 0 !important; }
  .nb-range { grid-template-columns: 1fr !important; gap: 10px !important; }
  .nb-range__arrow { transform: rotate(90deg); padding: 4px 0 !important; }

  .nb-pills { gap: 6px !important; }
  .nb-pill { padding: 10px 14px !important; font-size: 13px !important; min-height: 40px; }

  .nb-textarea { min-height: 96px !important; padding: 12px 14px !important; }

  .nb-bar { padding: 12px 16px !important; }
  .nb-bar__inner { grid-template-columns: 1fr !important; gap: 10px !important; text-align: left !important; }
  .nb-bar__value { font-size: 22px !important; }
  .nb-bar__btn { width: 100% !important; min-height: 48px; padding: 14px !important; font-size: 15px !important; }

  /* ============================================================
     ME (cabinet)
     ============================================================ */
  .me-hero { padding: 18px 18px !important; }
  .me-hero__title { font-size: 20px !important; }
  .me-hero__sub { font-size: 13px !important; }

  .me-section-title { font-size: 16px !important; margin: 24px 0 12px !important; }

  .me-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .me-grid--3 { grid-template-columns: 1fr 1fr !important; }
  .me-stat { padding: 12px 14px !important; }
  .me-stat__val { font-size: 18px !important; }

  .me-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 14px 14px !important;
  }
  .me-row__meta { text-align: left !important; }
  .me-row__title { font-size: 14px !important; }
  .me-row__price { font-size: 15px !important; }

  .me-steps { grid-template-columns: 1fr !important; }

  .me-fin { grid-template-columns: 1fr !important; padding: 18px 18px !important; gap: 14px !important; }
  .me-fin__val { font-size: 26px !important; }
  .me-fin__actions { min-width: 0 !important; }

  .me-plans { grid-template-columns: 1fr !important; gap: 10px !important; }
  .me-plan { padding: 18px 16px !important; }
  .me-plan__price { font-size: 22px !important; }

  .me-topup-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ============================================================
     CHAT — mobile: вертикальный стек (список сверху, диалог снизу)
     ============================================================ */
  .ch-shell { padding: 0 !important; margin: 0 !important; }
  .ch-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .ch-side {
    border-right: 0 !important;
    border-bottom: 6px solid var(--bg-2, #f5f7fa) !important;
  }
  .ch-main {
    display: flex !important;
    min-height: 0 !important;
  }
  /* Если диалог не открыт — показать заглушку */
  .ch-main:empty::before {
    content: "Выберите диалог из списка выше";
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    width: 100%;
    color: var(--ink-4, #94a3b8);
    font: 500 13px/1.5 'Manrope', sans-serif;
    padding: 24px 18px;
    text-align: center;
  }

  .ch-side__head { padding: 14px 16px !important; }
  .ch-item { padding: 12px 16px !important; min-height: 60px; }

  .ch-main__head {
    padding: 12px 14px !important;
    gap: 10px !important;
    flex-wrap: wrap;
  }
  .ch-main__name { font-size: 14px !important; }
  .ch-main__meta { font-size: 11px !important; }
  .ch-main__head .mp-btn--ghost {
    margin-left: auto !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    min-height: 36px;
  }

  .ch-msg { max-width: 86% !important; }
  .ch-msg__bubble { font-size: 14px !important; padding: 10px 12px !important; }

  .ch-msg-list {
    padding: 14px 14px !important;
    max-height: 60vh !important;
    min-height: 240px;
    overflow-y: auto;
  }
  .ch-form { padding: 10px 12px !important; gap: 6px !important; }
  .ch-form input { padding: 12px 14px !important; }
  .ch-form button { min-height: 44px; padding: 0 18px !important; }

  /* ============================================================
     SUPPORT
     ============================================================ */
  .sup-hero { padding: 20px 18px !important; grid-template-columns: 1fr !important; gap: 16px !important; }
  .sup-hero__title { font-size: 22px !important; line-height: 1.2 !important; }
  .sup-hero__lead { font-size: 14px !important; }
  .sup-hero__stats { grid-template-columns: 1fr 1fr !important; }
  .sup-stat__val { font-size: 18px !important; }

  .sup-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

  .sup-priorities { grid-template-columns: 1fr !important; }
  .sup-prio { padding: 12px 14px !important; min-height: 56px; }

  .sup-ch { padding: 12px 14px !important; }
  .sup-ch__icon { width: 38px !important; height: 38px !important; font-size: 16px !important; }
  .sup-ch__desc { white-space: normal !important; }

  .sup-faq__sum { padding: 12px 14px !important; font-size: 14px !important; }
  .sup-faq__body { padding: 0 14px 14px !important; font-size: 13.5px !important; }

  /* ============================================================
     SIGNUP / AUTH
     ============================================================ */
  .au-shell { margin: 16px auto 50px !important; padding: 0 14px !important; }
  .au-card { padding: 22px 18px !important; border-radius: 12px !important; }
  .au-mode__btn { padding: 12px 8px !important; font-size: 11px !important; }
  .au-tabs { padding: 3px !important; }
  .au-tab { padding: 10px 8px !important; font-size: 13px !important; min-height: 40px; }
  .au-row { grid-template-columns: 1fr !important; }
  .au-title { font-size: 20px !important; line-height: 1.2 !important; }
  .au-sub { font-size: 13px !important; }
  .au-consent { padding: 11px 12px !important; }
  .au-consent-text { font-size: 12.5px !important; line-height: 1.5 !important; }
  .au-deposit-text { font-size: 12.5px !important; }

  /* ============================================================
     LEGAL DOCS (offer / privacy / refund)
     ============================================================ */
  .lg-head { padding: 20px 18px !important; }
  .lg-head h1 { font-size: 22px !important; line-height: 1.2 !important; }
  .lg-head p { font-size: 14px !important; }
  .lg-head__meta { font-size: 11px !important; gap: 10px !important; }

  .lg-content { padding: 22px 18px !important; }
  .lg-content h2 { font-size: 17px !important; margin: 22px 0 8px !important; }
  .lg-content h3 { font-size: 14.5px !important; }
  .lg-content p,
  .lg-content ul,
  .lg-content ol,
  .lg-content li { font-size: 14px !important; line-height: 1.6 !important; }
  .lg-content ul, .lg-content ol { padding-left: 20px !important; }

  .lg-toc { padding: 12px 14px !important; }
  .lg-toc ol { columns: 1 !important; padding-left: 18px !important; font-size: 13px !important; }
  .lg-callout, .lg-note { padding: 12px 14px !important; font-size: 13px !important; }

  /* ============================================================
     FOOTER
     ============================================================ */
  .mp-footer {
    padding: 28px 20px 22px !important;
    margin-top: 0 !important;
    border-top: 1px solid var(--line-2, #eef0f4);
    background: var(--bg-soft, #f7f9fc);
  }
  .mp-footer__inner {
    flex-direction: column !important;
    gap: 22px !important;
    align-items: stretch !important;
    padding: 0 !important;
  }
  .mp-footer__brand {
    max-width: 100% !important;
  }
  .mp-footer__brand strong {
    font-size: 18px !important;
  }
  .mp-footer__brand p {
    margin-top: 8px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: var(--ink-3, #6b7785) !important;
  }
  .mp-footer__col {
    width: 100% !important;
    gap: 6px !important;
    border-top: 1px solid var(--line-2, #eef0f4);
    padding-top: 16px !important;
  }
  .mp-footer__title {
    font-size: 11px !important;
    letter-spacing: .12em !important;
    margin-bottom: 4px !important;
  }
  .mp-footer__col a {
    padding: 8px 0 !important;
    font-size: 14.5px !important;
    color: var(--ink, #0a0f1d) !important;
    min-height: 38px;
    display: flex;
    align-items: center;
  }
  .mp-footer__bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 6px !important;
    margin-top: 18px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--line-2, #eef0f4);
    font-size: 12px !important;
    color: var(--ink-4, #94a3b8) !important;
  }
  .mp-footer__bottom-meta { font-style: normal !important; }

  /* Common modal/overlay friendliness */
  .ld-toast { left: 12px !important; right: 12px !important; bottom: 12px !important; max-width: none !important; }
}

/* ============================================================
   Очень маленькие телефоны (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  .mp-hdr { padding: 10px 14px !important; }
  .mp-brand { font-size: 15px; }

  .lh { padding: 36px 14px 28px !important; }
  .lh__title { font-size: clamp(24px, 8.5vw, 32px) !important; }
  .lh__lead { font-size: 14px !important; }

  .sec__title { font-size: 22px !important; }
  .lc__title { font-size: 22px !important; }

  .bd-head__title { font-size: 20px !important; }
  .bd-row__title { font-size: 16px !important; }
  .bd-row__price { font-size: 20px !important; }

  .ld-hero__title { font-size: 20px !important; }
  .ld-hero__price { font-size: 22px !important; }

  .me-grid { grid-template-columns: 1fr !important; }
  .me-grid--3 { grid-template-columns: 1fr !important; }

  .nb-stepper__btn { width: 46px !important; }
  .nb-stepper__input { font-size: 17px !important; }
  .nb-bar__btn { font-size: 14px !important; }

  .au-card { padding: 20px 16px !important; }
  .au-title { font-size: 18px !important; }

  .lg-content { padding: 18px 14px !important; }
  .lg-head { padding: 18px 14px !important; }
  .lg-head h1 { font-size: 20px !important; }

  .sup-hero__title { font-size: 20px !important; }
  .sup-hero__stats { grid-template-columns: 1fr !important; }
}

/* Burger hidden on desktop */
.mp-burger { display: none; }