/* DAB13 Mobile UX Patch v6.6.1
   Additive mobile-only overrides. Desktop (>= 769px) remains unchanged. */

@media (max-width: 768px) {
  :root {
    --mobile-gutter-v661: clamp(12px, 4vw, 18px);
    --mobile-header-h-v661: 64px;
    --mobile-bottom-safe-v661: env(safe-area-inset-bottom, 0px);
  }

  html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    scroll-padding-top: 76px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
    font-size: 15px;
  }

  *, *::before, *::after { box-sizing: border-box; }
  img, video, canvas, svg { max-width: 100%; height: auto; }
  button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  button, .button, .public-menu-button, .app-bottom-nav a { touch-action: manipulation; }

  /* Prevent iOS form zoom + make tap targets sane. */
  input, select, textarea,
  .commerce-search input, .commerce-search select,
  .proxy-filters input, .proxy-filters select,
  .business-requisites-grid input, .business-requisites-grid select,
  .builder-options input, .builder-options select, .builder-options textarea,
  .stars-buy-card input, .crypto-pay-status input {
    font-size: 16px !important;
    max-width: 100% !important;
  }
  input, select, button, .button { min-height: 44px; }
  textarea { min-height: 112px; }

  /* Header / public navigation. */
  .site-header {
    height: var(--mobile-header-h-v661) !important;
    padding-left: max(var(--mobile-gutter-v661), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--mobile-gutter-v661), env(safe-area-inset-right, 0px)) !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 6px !important;
  }
  .site-header .brand { min-width: 0; overflow: hidden; }
  .site-header .brand b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header-actions { min-width: 0; gap: 5px !important; }
  .language-select { width: 64px !important; min-width: 0 !important; }
  #headerApp { white-space: nowrap; }
  .public-menu-button { width: 42px !important; min-width: 42px; height: 42px !important; }

  .public-mobile-menu {
    top: var(--mobile-header-h-v661) !important;
    left: 0 !important;
    right: 0 !important;
    max-height: calc(100dvh - var(--mobile-header-h-v661)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 10px var(--mobile-gutter-v661) calc(18px + var(--mobile-bottom-safe-v661)) !important;
  }
  .public-mobile-menu a { min-height: 54px; }
  body.mobile-menu-open { overflow: hidden !important; touch-action: none; }
  body.mobile-menu-open .public-mobile-menu { touch-action: pan-y; }

  /* FIX: v6.6 had a late rule that reduced home-focus top padding to 16px. */
  .home-focus {
    min-height: auto !important;
    padding: calc(var(--mobile-header-h-v661) + 20px) var(--mobile-gutter-v661) 34px !important;
  }
  .home-focus-stage { width: 100% !important; min-width: 0; }
  .home-focus-eyebrow { margin-bottom: 0 !important; text-align: center; }
  .home-under-head {
    width: 100% !important;
    justify-content: center !important;
    gap: 7px !important;
    margin: 8px auto 12px !important;
  }
  .home-under-head > b, .home-under-head > a { font-size: 10.5px !important; }

  .home-compass, .product-compass {
    width: 100% !important;
    min-height: 292px !important;
    margin-top: 0 !important;
  }
  .product-head-wrap {
    width: clamp(190px, 58vw, 236px) !important;
    height: clamp(190px, 58vw, 236px) !important;
  }
  .compass-orbit.orbit-one { width: clamp(224px, 68vw, 278px) !important; height: clamp(224px, 68vw, 278px) !important; }
  .compass-orbit.orbit-two { width: clamp(256px, 78vw, 318px) !important; height: clamp(256px, 78vw, 318px) !important; }
  .mobile-product-menu {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .mobile-product-menu a {
    min-height: 66px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
  }
  .mobile-product-menu span { min-width: 0; overflow-wrap: anywhere; }

  /* Generic public layout. */
  .public-section {
    padding-left: var(--mobile-gutter-v661) !important;
    padding-right: var(--mobile-gutter-v661) !important;
  }
  .section-heading { max-width: 100% !important; }
  .section-heading h2 {
    font-size: clamp(34px, 10.5vw, 48px) !important;
    line-height: .98 !important;
    overflow-wrap: anywhere;
  }
  .section-heading > p { max-width: 100%; }

  .product-page-hero, .commerce-hero, .business-ai-hero, .referral-hero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: var(--mobile-gutter-v661) !important;
    padding-right: var(--mobile-gutter-v661) !important;
  }
  .product-page-hero, .commerce-hero {
    padding-top: calc(var(--mobile-header-h-v661) + 24px) !important;
  }
  .product-page-copy h1, .commerce-hero h1, .business-ai-hero h1, .referral-heading h1 {
    font-size: clamp(39px, 12vw, 54px) !important;
    line-height: .96 !important;
    overflow-wrap: anywhere;
  }
  .product-page-copy p, .commerce-hero p, .business-ai-hero p { font-size: 14.5px !important; line-height: 1.55 !important; }
  .hero-actions { width: 100%; }
  .product-page-copy .hero-actions, .home-hero .hero-actions {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .hero-actions > *, .product-cta .button { width: 100% !important; }

  .product-page-visual { min-height: 245px !important; }
  .product-page-visual img { width: min(220px, 64vw) !important; }
  .visual-orbit { width: min(250px, 74vw) !important; }
  .visual-label { right: 6% !important; bottom: 4% !important; }

  /* All dense grids become comfortable single-column flows. */
  .product-showcase, .vpn-price-grid, .steps-grid,
  .feature-product-grid, .feature-product-grid.three,
  .ai-pack-grid, .instruction-grid.four,
  .esim-plan-grid, .proxy-grid, .proxy-usecase-grid,
  .proxy-wizard, .proxy-guide-basics,
  .card-account-grid, .card-help-grid,
  .prepaid-card-grid, .business-requisites-grid,
  .agent-builder-grid, .builder-options,
  .stars-buy-card, .payment-method-grid,
  .partner-active, .ref-terms,
  .grid-2, .grid-3, .form-grid, .modal-form {
    grid-template-columns: 1fr !important;
  }

  .product-tile, .vpn-plan, .ai-pack-card,
  .feature-product-grid article, .steps-grid article,
  .agent-builder-card > div, .stars-buy-card,
  .crypto-payment-card, .commerce-card-visual,
  .card-auto-offer, .prepaid-card, .proxy-wizard {
    padding: 18px !important;
    border-radius: 16px !important;
  }

  /* Business AI: visual first but compact, summary non-sticky on phone. */
  .business-ai-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding-top: calc(var(--mobile-header-h-v661) + 22px) !important;
    gap: 18px !important;
    text-align: center;
  }
  .business-ai-visual { order: -1; }
  .business-ai-visual img { width: min(220px, 62vw) !important; }
  .business-ai-visual b { font-size: 30px !important; right: 8% !important; }
  .business-ai-facts { justify-content: center; }
  .builder-summary {
    position: static !important;
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }
  .builder-summary .button { width: 100% !important; }
  .agent-builder-card ul { min-height: 0 !important; }

  /* eSIM / Proxy / Cards / Stars. */
  .commerce-search, .proxy-filters, .esim-package-filters, .admin-order-filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100%;
  }
  .esim-popular {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .esim-popular::-webkit-scrollbar { display: none; }
  .country-chip { flex: 0 0 auto !important; scroll-snap-align: start; }
  .proxy-checkout-bar, .ready-card-bridge, .card-live-head, .proxy-account-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .copy-field { grid-template-columns: minmax(0,1fr) auto !important; }
  .copy-field input, .secret-box code { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
  .crypto-amount { font-size: clamp(30px, 9vw, 42px) !important; overflow-wrap: anywhere; }
  .stars-quote { grid-column: 1 !important; display: grid !important; gap: 4px !important; }
  .stars-quote b { font-size: 28px !important; }
  .stars-buy-card > button, .stars-buy-card > p { grid-column: 1 !important; }

  /* Referral stage: cards shouldn't overlap mascot on narrow devices. */
  .referral-stage {
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 6px 0 0 !important;
  }
  .ref-mascot { position: relative !important; width: min(230px, 64vw) !important; margin: 0 auto; }
  .ref-orbit { display: none !important; }
  .ref-choice {
    position: static !important;
    width: 100% !important;
    min-height: 76px !important;
    transform: none !important;
  }
  .ref-hand { display: none !important; }

  /* Cabinet / application. */
  .app-main {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--mobile-gutter-v661) !important;
    padding-right: var(--mobile-gutter-v661) !important;
    padding-bottom: calc(86px + var(--mobile-bottom-safe-v661)) !important;
  }
  .app-topbar { min-width: 0; }
  .app-topbar h1 { overflow-wrap: anywhere; }
  .app-card, .studio-layout, .chat-layout, .result-stage, .page-head { min-width: 0 !important; max-width: 100% !important; }
  .app-card { overflow: hidden; }
  .stat-grid, .quick-grid, .asset-grid, .entity-grid, .vpn-tariffs { grid-template-columns: 1fr !important; }
  .app-bottom-nav {
    height: calc(66px + var(--mobile-bottom-safe-v661)) !important;
    padding-bottom: var(--mobile-bottom-safe-v661) !important;
  }
  .app-bottom-nav a { min-width: 0; }
  .app-bottom-nav a span { line-height: 1; }
  .chat-messages { min-height: 280px !important; max-height: 52dvh; }
  .message { max-width: 96% !important; overflow-wrap: anywhere; }
  .result-stage, .result-placeholder { min-height: 250px !important; }

  /* Modals: always fit viewport and remain scrollable. */
  .modal, .commerce-modal {
    padding: max(10px, env(safe-area-inset-top, 0px)) var(--mobile-gutter-v661) max(10px, env(safe-area-inset-bottom, 0px)) !important;
  }
  .modal-card, .commerce-modal-card, .public-auth-dialog {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 18px !important;
    padding: 18px !important;
  }

  /* Admin: don't let wide data break the viewport. */
  .admin-portal-shell, .admin-commerce-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--mobile-gutter-v661) !important;
    padding-right: var(--mobile-gutter-v661) !important;
  }
  .admin-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tabs button { flex: 0 0 auto; white-space: nowrap; }
  .admin-summary, .admin-summary#adminPortalMetrics { grid-template-columns: 1fr !important; }
  .admin-order-row, .commerce-account-card { min-width: 0; }
  .admin-order-row .result-tools, .card-live-card .result-tools, .proxy-checkout-bar .result-tools {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  .admin-order-row .result-tools .button,
  .card-live-card .result-tools .button,
  .proxy-checkout-bar .result-tools .button { width: 100% !important; }
  table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Sticky public CTA: safe area aware. */
  .mobile-sticky-vpn {
    left: var(--mobile-gutter-v661) !important;
    right: var(--mobile-gutter-v661) !important;
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    max-width: calc(100vw - (var(--mobile-gutter-v661) * 2));
  }
  .site-footer { padding-bottom: calc(94px + var(--mobile-bottom-safe-v661)) !important; }
}

@media (max-width: 430px) {
  :root { --mobile-gutter-v661: 11px; }
  .site-header .brand b { font-size: 17px !important; }
  .language-select { width: 58px !important; }
  #headerApp { width: 42px !important; min-width: 42px !important; font-size: 0 !important; padding: 0 !important; }
  #headerApp::after { content: "ЛК"; font-size: 11px; font-weight: 900; }
  .home-focus { padding-top: calc(var(--mobile-header-h-v661) + 14px) !important; }
  .home-compass, .product-compass { min-height: 270px !important; }
  .product-head-wrap { width: 188px !important; height: 188px !important; }
  .compass-orbit.orbit-one { width: 218px !important; height: 218px !important; }
  .compass-orbit.orbit-two { width: 250px !important; height: 250px !important; }
  .product-page-copy h1, .commerce-hero h1, .business-ai-hero h1, .referral-heading h1 { font-size: clamp(37px, 11.5vw, 47px) !important; }
  .section-heading h2 { font-size: clamp(32px, 10vw, 42px) !important; }
  .mobile-product-menu a { min-height: 62px !important; }
  .mobile-sticky-vpn > strong { padding: 9px 10px !important; }
}

@media (max-width: 360px) {
  :root { --mobile-gutter-v661: 9px; }
  .site-header { gap: 4px !important; }
  .language-select { width: 54px !important; }
  #headerApp { width: 38px !important; min-width: 38px !important; }
  .public-menu-button { width: 38px !important; min-width: 38px !important; }
  .site-header .brand b { font-size: 16px !important; }
  .site-header .brand-mark { font-size: 15px !important; }
  .home-under-head { gap: 5px !important; }
  .home-under-head > b, .home-under-head > a { font-size: 9.5px !important; }
}

@media (max-width: 768px) and (orientation: landscape) and (max-height: 520px) {
  .home-focus, .product-page-hero, .commerce-hero, .business-ai-hero { padding-top: 76px !important; }
  .product-page-visual, .home-compass, .product-compass { min-height: 210px !important; }
  .public-mobile-menu { max-height: calc(100dvh - 64px) !important; }
}