/*
 * mobile.css v5 - Resimi Mobile Responsiveness
 * v5 adds an iOS + Android hardening layer (bottom of file) that targets
 * the CURRENT live landing markup (.nav/.nav-i, .hero, .bento/.b1-.b7,
 * .stats-g, .plats-g, .ticker, .ftr-*). The older landing rules below
 * (.lp-nav, .bento-grid, .hero-wrap, .trust-bar ...) target a previous
 * build and no longer match anything live; they are kept as harmless
 * no-ops so nothing regresses, with the real fixes in PATCH v5.
 */

/* PANEL (LOGGED-IN) */
@media (max-width: 768px) {
  .hamburger { display: flex !important; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; cursor: pointer; padding: 10px; flex-shrink: 0; }
  .hamburger span { display: block; height: 2px; background: var(--text, #e2e8f0); border-radius: 2px; transition: transform .25s, opacity .25s; width: 100%; }
  body.nav-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  body.nav-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .sidebar { display: flex !important; position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 280px !important; max-width: 85vw !important; transform: translateX(-100%) !important; transition: transform .28s cubic-bezier(.4,0,.2,1) !important; z-index: 300 !important; background: #0f1117 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; border-right: 1px solid rgba(108,99,255,.2) !important; }
  body.nav-open .sidebar { transform: translateX(0) !important; box-shadow: 8px 0 40px rgba(0,0,0,.6) !important; }
  .sidebar-backdrop { display: none !important; position: fixed !important; inset: 0 !important; background: rgba(0,0,0,.65) !important; z-index: 299 !important; }
  body.nav-open .sidebar-backdrop { display: block !important; }
  .topbar { padding: 0 14px !important; height: 56px !important; display: flex !important; align-items: center !important; gap: 10px !important; }
  .topbar-title { flex: 1 !important; font-size: 15px !important; font-weight: 700 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .user-name { display: none !important; }
  .panel-wrap { flex-direction: column; }
  .main-content { margin-left: 0 !important; width: 100% !important; }
  .page-content { padding: 16px 14px !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .stat-card { padding: 16px 14px !important; }
  .stat-val { font-size: 22px !important; }
  .stat-icon { width: 36px !important; height: 36px !important; font-size: 16px !important; margin-bottom: 10px !important; }
  .shortcuts-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; margin-bottom: 16px !important; }
  .shortcut { padding: 14px 10px !important; gap: 6px !important; }
  .shortcut-icon { width: 32px !important; height: 32px !important; font-size: 15px !important; }
  .shortcut-label { font-size: 11.5px !important; }
  .shortcut-sub { display: none !important; }
  .dash-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .quick-order-card { position: static !important; }
  .plat-grid-dash { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .plat-card-dash { padding: 12px 10px !important; }
  .plat-icon-dash { font-size: 20px !important; margin-bottom: 4px !important; }
  .plat-name-dash { font-size: 11.5px !important; }
  .plat-count-dash { display: none !important; }
  .table-wrap, .orders-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .table { min-width: 560px !important; }
  .table th, .table td { padding: 9px 10px !important; font-size: 12px !important; }
  .filter-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; padding-bottom: 4px !important; scrollbar-width: none; }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab { white-space: nowrap !important; padding: 6px 12px !important; font-size: 12px !important; }
  .svc-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .form-control { font-size: 16px !important; }
  .page-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 16px !important; }
  .page-title { font-size: 20px !important; }
  .card-body { padding: 14px !important; }
  .order-layout, .two-col { grid-template-columns: 1fr !important; }
  .welcome-banner { padding: 16px !important; }
  .welcome-title { font-size: 17px !important; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .shortcuts-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .plat-grid-dash { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-val { font-size: 18px !important; }
}

/* LANDING PAGE */
@media (max-width: 768px) {
  .lp-nav { padding: 12px 16px !important; }
  .nav-links .nav-link-a { display: none !important; }
  .nav-links { gap: 8px !important; }
  .lp-hamburger { display: flex !important; flex-direction: column; gap: 5px; width: 38px; height: 38px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; cursor: pointer; padding: 10px; }
  .lp-hamburger span { display: block; height: 2px; background: #e2e8f0; border-radius: 2px; transition: .25s; width: 100%; }
  body.lp-nav-open .lp-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.lp-nav-open .lp-hamburger span:nth-child(2) { opacity: 0; }
  body.lp-nav-open .lp-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .lp-nav-drawer { position: fixed !important; top: 60px !important; left: 0 !important; right: 0 !important; background: rgba(13,15,20,.98) !important; border-bottom: 1px solid rgba(108,99,255,.2) !important; padding: 12px 16px 20px !important; transform: translateY(-110%) !important; transition: transform .28s cubic-bezier(.4,0,.2,1) !important; z-index: 190 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
  body.lp-nav-open .lp-nav-drawer { transform: translateY(0) !important; }
  .lp-nav-drawer a { display: block !important; padding: 12px 16px !important; color: var(--text2, #94a3b8) !important; text-decoration: none !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 500 !important; }
  .lp-nav-drawer .drawer-cta { background: linear-gradient(135deg, #6c63ff, #a855f7) !important; color: #fff !important; text-align: center !important; font-weight: 700 !important; }
  .hero-wrap { padding: 100px 20px 60px !important; }
  .hero-h1 { font-size: clamp(32px, 9vw, 52px) !important; }
  .hero-sub { font-size: 15px !important; margin-bottom: 28px !important; }
  .hero-cta { flex-direction: column !important; align-items: stretch !important; }
  .btn-hero { text-align: center !important; justify-content: center !important; padding: 15px 20px !important; font-size: 15px !important; }
  .trust-bar { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px 8px !important; padding: 20px 16px !important; }
  .trust-stat .n { font-size: 26px !important; }
  .section { padding: 48px 16px !important; }
  .section-title { font-size: 26px !important; }
  .bento-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .span2, .span3, .span4, .span6 { grid-column: span 1 !important; }
  .bento { padding: 20px !important; }
  .how-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .plat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .testi-grid { display: flex !important; overflow-x: auto !important; gap: 12px !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory !important; padding-bottom: 8px !important; scrollbar-width: none; }
  .testi-grid::-webkit-scrollbar { display: none; }
  .testi { flex: 0 0 85vw !important; max-width: 320px !important; scroll-snap-align: start !important; }
  .blog-grid { grid-template-columns: 1fr !important; }
  .cta-wrap { padding: 40px 20px !important; margin: 0 0 30px !important; border-radius: 20px !important; }
  .cta-title { font-size: 26px !important; }
  .cta-badges { gap: 6px !important; }
  .cta-badge { font-size: 11.5px !important; padding: 6px 12px !important; }
  .lp-footer { grid-template-columns: 1fr !important; gap: 28px !important; padding: 32px 20px 24px !important; }
  .lp-footer-bottom { padding: 16px 20px !important; font-size: 12px !important; }
  .welcome-modal { padding: 28px 20px !important; }
  .welcome-credit-amount { font-size: 54px !important; }
}
@media (max-width: 480px) {
  .lp-footer { grid-template-columns: 1fr 1fr !important; }
  .lp-footer-brand { grid-column: 1 / -1; }
  .plat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* AUTH PAGES */
@media (max-width: 480px) {
  .auth-modal { padding: 24px 18px 20px !important; }
  .auth-title { font-size: 20px !important; }
  .social-btns { flex-direction: column !important; }
}

/* GLOBAL */
@media (max-width: 768px) {
  body { padding-bottom: env(safe-area-inset-bottom, 0); }
  .btn, button, .nav-link, .filter-tab { min-height: 40px; }
}

/* ====================================================
   PATCH v3 - hamburger + landing nav fixes
   ==================================================== */

/* Landing page: hide CTA button in topnav on mobile
   (already in the slide-out drawer - no need to crowd the bar) */
@media (max-width: 768px) {
  .nav-links .btn,
  .nav-links .btn-primary,
  .nav-links .btn-sm { display: none !important; }
  /* Hide separator divider too */
  .nav-links > div[style*="width:1px"] { display: none !important; }
  /* Force hamburger visible - belt AND suspenders */
  .lp-hamburger,
  #lp-ham { display: flex !important; }
}

/* Panel: hide hamburger on desktop (it was an unstyled ghost element) */
@media (min-width: 769px) {
  .hamburger { display: none !important; }
}

/* ====================================================
   PATCH v4 - drawer z-index + backdrop + UX improvements
   ==================================================== */

/*
 * The inline CSS in landing.php used `.lp-drawer { display:none; position:fixed; z-index:500 }`
 * but the HTML element is <div id="lp-drawer"> (no class), so those rules never applied.
 * The JS in mobile.js v4 now sets position/z-index inline when opening, which always wins.
 * The rules below act as a belt-and-suspenders safety net.
 */
#lp-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
}

/*
 * Ensure panel transition is in place.
 * The inline style already has this but we reinforce it here.
 */
#lp-panel {
  transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
}

/*
 * Backdrop: start invisible, animate in.
 * mobile.js v4 sets opacity via inline style on open/close.
 */
#lp-backdrop {
  background: rgba(0, 0, 0, .75);
  opacity: 0;
  transition: opacity .3s cubic-bezier(.4,0,.2,1) !important;
}

/* ── Injected close button ── */
.lp-panel-close {
  display: flex;
  align-items: center;
  gap: 7px;
  width: auto;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  color: #8892b0;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  margin-bottom: 22px;
  margin-left: auto;
  transition: background .15s, color .15s;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0;
  line-height: 1;
}
.lp-panel-close i {
  font-size: 15px;
  line-height: 1;
}
.lp-panel-close:hover,
.lp-panel-close:active {
  background: rgba(108, 99, 255, .12);
  color: #eef0ff;
}

/* ── Better panel link tap targets on mobile ── */
@media (max-width: 768px) {
  #lp-panel a {
    min-height: 48px;
  }
  /* Ensure panel goes edge-to-edge on very small screens */
  @media (max-width: 360px) {
    #lp-panel {
      width: 100% !important;
    }
  }
}

/* ====================================================
   PATCH v5 - iOS + Android hardening (current live markup)
   ----------------------------------------------------
   Why this section exists: the landing rules above target
   an older class scheme (.lp-nav, .bento-grid, .hero-wrap,
   .trust-bar ...) that the live page no longer uses, so on
   real iPhones the page fell back to behaviour that desktop
   Chrome never reveals (it won't render below ~500px and
   ignores the mobile viewport meta). These rules target the
   classes the page actually ships today and fix the iOS
   failure modes directly.
   ==================================================== */

/* 1) Kill horizontal scroll / "zoomed-out" page on iOS.
 *    overflow-x:hidden on <body> alone does NOT stop sideways
 *    panning in iOS Safari — the root <html> must clip too.
 *    `clip` is stronger than `hidden` and won't create a
 *    scroll container. */
html { overflow-x: clip; max-width: 100%; }
body { overflow-x: clip; max-width: 100%; }

/* 2) Stop iOS from auto-inflating text (e.g. in landscape). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 3) Remove the grey tap-flash on iOS for a native feel. */
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/* 4) Respect the notch / Dynamic Island / home indicator.
 *    env() resolves to 0 on non-notched and on Android, so
 *    these are safe everywhere. Needs viewport-fit=cover,
 *    which mobile.js injects into the viewport meta. */
@media (max-width: 768px) {
  /* Floating pill nav: push below the status bar / island */
  .nav {
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  }
  /* Comfortable, thumb-friendly tap targets (Apple HIG = 44px) */
  .nav-ham,
  .nav-cta,
  .hero-ctas a,
  .bp,
  .btn,
  button { min-height: 44px; }
  .nav-ham { min-width: 44px; }
}

/* 5) Mobile drawer: cover the FULL dynamic viewport on iOS
 *    (dvh accounts for the collapsing address bar) and keep
 *    the backdrop fixed so it always covers the page. */
#lp-drawer {
  height: 100vh;       /* fallback */
  height: 100dvh;      /* iOS 16+/modern Android: true visible height */
}
#lp-backdrop {
  position: fixed !important;
  inset: 0 !important;
}
#lp-panel {
  /* keep menu items clear of the island and home indicator */
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  padding-right: env(safe-area-inset-right, 0px);
  max-width: 86vw;
}

/* 6) Very small phones (≤360px, e.g. iPhone SE / mini, small
 *    Androids): tighten horizontal padding so nothing clips. */
@media (max-width: 360px) {
  .hero { padding-left: 18px !important; padding-right: 18px !important; }
  .nav-i { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ============================================================
 * PATCH v6 - iOS gradient-text fix (.gt / .st-n)
 * ------------------------------------------------------------
 * The live page uses `background-clip: text` (unprefixed) for its
 * gradient headlines (.gt) and stat numbers (.st-n). Chrome honors
 * the unprefixed form, but iOS Safari requires the -webkit- prefix.
 * Without it, iOS ignores the text-clip and paints the full gradient
 * box (a solid rectangle) while the transparent text-fill makes the
 * letters invisible. Adding the prefixed property restores the
 * clip-to-text rendering on iPhone (iOS 9+) and all Android browsers.
 * ============================================================ */
.gt,
.st-n,
.l2.gt {
  -webkit-background-clip: text !important;
  background-clip: text !important;
}