/* =========================================================================
   SAJEKGO — mobile.css
   Extra mobile-only overrides & touch enhancements.
   Linked AFTER style.css. All rules here use max-width or are mobile-only.
   ========================================================================= */

/* ── Safe area padding (notched phones) ─────────────────────────────── */
.header-in {
  padding-inline: max(14px, env(safe-area-inset-left));
}
.bottom-nav {
  padding-left:  env(safe-area-inset-left,  0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ── Tap target minimum size ─────────────────────────────────────────── */
@media (max-width: 991px) {
  .btn, .icon-btn, .nav a, .acct-menu a,
  .bottom-nav a, .chip, .page-item {
    min-height: 44px;
  }
  .bottom-nav a { min-height: 52px; }
  .footer,
  .footer * {
    display: none !important;
  }
  body { padding-bottom: 88px; }
  .header-in {
    flex-wrap: nowrap;
  }
  .header-in .menu-btn {
    order: 3;
    margin-left: 1px;
  }
  .header-in .logo {
    order: 1;
  }
  .header-in .header-actions {
    order: 2;
    margin-left: auto;
    gap: 1px;
  }

  /* Slightly larger form controls on touch devices */
  .input, .select, .textarea { font-size: 16px; /* prevents iOS zoom */ }
}

/* ── Horizontal hero buttons at 480px ───────────────────────────────── */
@media (max-width: 479px) {
  .hero-btns .btn { width: 100%; }
  .auth-wrap {
    min-height: auto;
    align-items: flex-start;
    padding: 12px 0 92px;
  }
  .auth-card {
    padding: 14px 12px;
    border-radius: 18px;
    width: min(100%, 420px);
  }
  .auth-card form {
    display: grid;
    gap: 7px;
  }
  .auth-head { margin-bottom: 14px; }
  .auth-head h1 { font-size: 18px; }
  .auth-head p { font-size: 11px; }
  .auth-card .field { margin-bottom: 0; }
  .auth-card .label {
    margin-bottom: 4px;
    font-size: 12px;
  }
  .auth-card .row {
    flex-direction: column;
    gap: 7px;
  }
  .auth-card .row > .field {
    margin-bottom: 0;
    flex: 0 0 auto !important;
    width: 100%;
    min-width: 0;
  }
  .auth-card .input,
  .auth-card .select,
  .auth-card .textarea {
    padding: 10px 12px;
    min-height: 42px;
  }
  .auth-card .field > .input,
  .auth-card .field > .select,
  .auth-card .field > .textarea {
    display: block;
    width: 100%;
  }
  .auth-card .btn-lg {
    padding: 11px 16px;
    font-size: 13px;
  }
  .auth-foot { margin-top: 10px; padding-top: 10px; font-size: 11px; }
  .hero-nav {
    padding-inline: 4px;
  }
  .hero-nav-btn {
    width: 30px;
    height: 30px;
  }
  .live-chat {
    right: 12px;
    left: auto;
    bottom: calc(104px + env(safe-area-inset-bottom));
    width: auto;
    justify-items: end;
  }
  .live-chat-launch {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    height: 48px;
  }
  .live-chat-launch-icon {
    width: 48px;
    height: 48px;
  }
}

/* ── Account menu icons label abbreviation on tiny screens ──────────── */
@media (max-width: 359px) {
  .acct-menu a span.label-text { display: none; }
  .acct-menu a { gap: 0; padding: 9px 11px; }
}

/* ── Prevent pull-to-refresh jank on drawer open ────────────────────── */
body.drawer-open { overflow: hidden; touch-action: none; }

/* ── Better touch scroll on .scroll-x ───────────────────────────────── */
.scroll-x { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.scroll-x > * { scroll-snap-align: start; }

/* ── Smooth momentum scroll on table wrap ────────────────────────────── */
.table-wrap { -webkit-overflow-scrolling: touch; scroll-snap-type: none; }

/* ── Floating CTA: buy button fixed at bottom on product page (mobile) ─ */
@media (max-width: 991px) {
  .buy-sticky {
    position: fixed; bottom: 64px; left: 0; right: 0; z-index: 50;
    padding: 10px 14px;
    background: rgba(10,10,22,.9);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(0,0,0,.4);
  }
  .buy-sticky .btn { width: 100%; }
}

/* ── Toast position: centered at top on very small screens ───────────── */
@media (max-width: 479px) {
  .toast-host {
    left: 12px; right: 12px; top: 10px;
    align-items: stretch;
  }
  .toast { text-align: center; }
}

/* ── Auth card: remove border-radius on very small screens ───────────── */
@media (max-width: 359px) {
  .auth-card { border-radius: var(--r-lg); padding: 18px 12px; }
}

/* ── Modal: near full-screen on small phones ─────────────────────────── */
@media (max-width: 479px) {
  .modal-mask { padding: 8px; }
  .modal      { max-width: 100%; border-radius: var(--r-lg); }
  .modal-head { padding: 14px 16px; }
  .modal-body { padding: 14px 16px; }
}

/* ── Drawer search field (search hidden in header on mobile) ─────────── */
.drawer-search {
  padding: 10px 14px 4px;
}
.drawer-search .search-wrap {
  display: block;
  max-width: 100%;
}

/* ── Stat tiles: single column on phones narrower than 360px ─────────── */
@media (max-width: 359px) {
  .stats    { grid-template-columns: 1fr; }
  .var-grid { grid-template-columns: 1fr; }
  .g-4      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}