/* Shared mobile UX polish for marketing site + user panel */

:root {
  --ux-nav-height: 64px;
  --ux-sticky-offset: 64px;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  max-width: 100vw;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

body.ux-nav-open,
body.product-menu-open {
  overflow: hidden;
  touch-action: none;
}

/* Prevent iOS input zoom */
@media (max-width: 768px) {
  input,
  select,
  textarea,
  button {
    font-size: max(16px, 1em);
  }
}

/* Sticky site headers */
.nav-shell,
.checkout-header,
.co-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 120;
  width: 100%;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(139, 21, 56, 0.08);
}

.nav-shell.nav-is-scrolled,
.checkout-header.nav-is-scrolled,
.co-header.nav-is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 28px -18px rgba(61, 8, 24, 0.28);
}

/* Marketing navigation */
.nav-shell {
  width: 100%;
  max-width: 100vw;
}

.nav-shell > .mx-auto {
  min-height: 56px;
}

.nav-menu-btn,
#menuBtn {
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  touch-action: manipulation;
}

@media (max-width: 1023.98px) {
  .nav-desktop-links,
  .nav-desktop-actions {
    display: none !important;
  }

  .nav-menu-btn,
  #menuBtn {
    display: grid !important;
  }

  #mobileMenu {
    display: block;
  }
}

@media (min-width: 1024px) {
  .nav-desktop-links,
  .nav-desktop-actions {
    display: flex !important;
  }

  .nav-menu-btn,
  #menuBtn {
    display: none !important;
  }

  #mobileMenu:not(.is-open) {
    max-height: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 380px) {
  .nav-brand-text {
    max-width: 7.5rem;
  }
}

#mobileMenu a {
  min-height: 44px;
  touch-action: manipulation;
}

#mobileMenu.is-open {
  max-height: min(78vh, 640px) !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-shell {
  padding-top: max(0.35rem, env(safe-area-inset-top));
}

.footer-shell {
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

/* Marketing content breathing room above floating support */
body[data-marketing-nav-menu="shared"] main,
body:not(.dashboard-user-body) > main,
.marketing-page main {
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

/* Site-wide mobile layout */
@media (max-width: 767px) {
  .container,
  .checkout-container,
  .co-shell,
  .co-main {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  .section-title,
  .hero-title,
  .page-title {
    font-size: clamp(1.55rem, 7vw, 2.2rem) !important;
    line-height: 1.12 !important;
  }

  .footer-shell .mx-auto.grid {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }

  .footer-shell .md\:col-span-2 {
    grid-column: auto !important;
  }

  .footer-shell .border-t .mx-auto.flex {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.65rem !important;
  }

  .board-grid,
  #boardGrid,
  #historyGrid,
  #relatedMarketsGrid,
  #supportingLinksGrid,
  #faqGrid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.85rem !important;
  }

  .filter-bar,
  .board-actions-shell.filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .filter-tabs,
  .filter-scroller {
    width: 100% !important;
  }

  .search-wrap,
  .search-row {
    width: 100% !important;
    max-width: none !important;
  }

  .hero-live {
    padding-top: 2rem !important;
    padding-bottom: 1.75rem !important;
  }

  .hero-live-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .board-actions-shell {
    top: var(--ux-sticky-offset, var(--board-actions-top, 4.75rem)) !important;
  }

  .scroll-top-button,
  .support-widget-container {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .board-grid,
  #boardGrid,
  #historyGrid,
  #relatedMarketsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

@media (min-width: 1024px) {
  .board-grid,
  #boardGrid,
  #historyGrid,
  #relatedMarketsGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
  }
}

/* Floating support widget */
.support-widget-container {
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
}

.support-fab-wrapper,
.support-fab {
  touch-action: manipulation;
}

@media (max-width: 640px) {
  .support-status-pill {
    display: none;
  }

  .support-card {
    width: min(320px, calc(100vw - 24px));
    max-height: min(70vh, 520px);
    overflow: auto;
  }

  .support-option {
    min-height: 52px;
  }
}

/* Product/auth shell */
.product-menu-btn,
.checkout-header a,
.product-nav-links a,
.co-nav a {
  touch-action: manipulation;
}

@media (max-width: 640px) {
  .checkout-header-inner,
  .co-header-inner {
    min-height: 64px;
    padding-inline: 14px;
  }

  .auth-shell {
    padding-inline: 14px;
  }

  .auth-form-card {
    border-radius: 18px;
  }
}

/* User dashboard */
.dashboard-user-body {
  -webkit-tap-highlight-color: transparent;
}

.dashboard-user-body main {
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

@media (max-width: 1023px) {
  .dashboard-user-body #sidebar.admin-command-sidebar {
    width: min(15rem, 86vw);
    padding-top: env(safe-area-inset-top);
  }

  .dashboard-user-body main header .hidden.xl\:flex {
    display: none !important;
  }

  .dashboard-user-body main header .hidden.md\:flex {
    display: none !important;
  }

  .dashboard-user-body main header .order-3 {
    order: 3;
    width: 100%;
  }

  .dashboard-user-body main header .order-2 {
    margin-left: 0;
  }

  .dashboard-user-body #mobileSideToggle {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  .dashboard-user-body .admin-sidebar-link {
    min-height: 44px;
    touch-action: manipulation;
  }

  .dashboard-user-body main > div.max-w-\[1920px\] {
    padding-inline: 12px;
  }
}

@media (max-width: 767px) {
  .dashboard-user-body main header h1 {
    font-size: 1.05rem !important;
  }

  .dashboard-user-body main header .hidden.sm\:flex {
    display: none !important;
  }

  .dashboard-user-body .page-hero {
    padding: 18px 16px;
    border-radius: 18px;
  }

  .dashboard-user-body .page-grid {
    gap: 14px;
  }

  .dashboard-user-body .page-grid section,
  .dashboard-user-body .page-grid .overflow-x-auto,
  .dashboard-user-body .user-chat-layout,
  .dashboard-user-body .billing-page,
  .dashboard-user-body .plans-page {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-user-body .dashboard-notifications-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: auto;
    max-height: min(60vh, 420px);
  }

  .dashboard-user-body .user-modal-card {
    width: min(100%, calc(100vw - 24px));
    margin-inline: 12px;
    max-height: calc(100vh - 32px);
    overflow: auto;
  }
}

/* Live chat + support layouts */
@media (max-width: 960px) {
  .user-chat-layout {
    grid-template-columns: 1fr;
  }

  .user-chat-sidebar {
    border-right: none;
    border-bottom: 1px solid #f1e3e6;
  }

  .user-chat-list {
    max-height: 220px;
  }

  .user-support-secondary-grid {
    grid-template-columns: 1fr;
  }

  .user-chat-compose {
    grid-template-columns: 1fr;
  }

  .user-chat-page-head {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Auth pages */
.auth-modern-body,
.auth-redesign-body {
  overflow-x: clip;
}

.auth-modern-body .auth-page-shell,
.auth-redesign-body .auth-page-shell {
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
}

.auth-modern-body #mobileMenu.is-open,
.auth-redesign-body #mobileMenu.is-open {
  position: relative;
  z-index: 121;
}

@media (max-width: 1023.98px) {
  .auth-modern-body .auth-page-stage {
    overflow: visible;
  }

  .auth-modern-body .auth-modern-panel-top {
    justify-content: center;
    text-align: center;
  }

  .auth-modern-body .footer-shell .mx-auto.grid,
  .auth-redesign-body .footer-shell .mx-auto.grid {
    grid-template-columns: 1fr !important;
    gap: 1.75rem;
  }

  .auth-modern-body .footer-shell .md\:col-span-2,
  .auth-redesign-body .footer-shell .md\:col-span-2 {
    grid-column: auto !important;
  }
}

@media (max-width: 640px) {
  .auth-modern-body .auth-modern-banner {
    padding: 22px 16px 20px;
  }

  .auth-modern-body .auth-banner-title {
    font-size: 1.65rem;
  }

  .auth-modern-body .auth-modern-panel {
    padding: 22px 16px 32px;
  }

  .auth-modern-body .auth-modern-form-wrap {
    padding: 20px 16px;
    border-radius: 20px;
  }

  .auth-modern-body .float-orb {
    opacity: 0.24;
    filter: blur(36px);
  }
}

/* Checkout */
@media (max-width: 640px) {
  .co-page .co-main,
  .co-page .co-shell {
    padding-inline: 12px;
  }

  .co-page .co-grid {
    gap: 14px;
  }

  .co-page .co-side,
  .co-page .co-main-card {
    border-radius: 18px;
  }
}

/* Utility: horizontal scroll regions generated in dashboard */
.ux-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.ux-scroll-x > table {
  min-width: 640px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .support-fab-wrapper:hover .support-fab,
  .support-option:hover {
    transform: none;
  }
}