/* ============================================================
   TERABOX API - MOBILE STYLESHEET (Mobile App Experience)
   Loaded only on mobile/tablet screens (max-width: 768px)
   Provides an app-like bottom navigation, gesture-friendly
   touch targets and app-style UI.
   ============================================================ */

@media (max-width: 768px) {

  /* ---------- GENERAL TOUCH TARGETS ---------- */
  .btn { padding: 15px 24px; font-size: 15.5px; min-height: 48px; border-radius: 13px; }
  .form-control { padding: 15px 16px; font-size: 16px; min-height: 52px; }
  .container { padding: 0 18px; }

  /* ---------- APP HEADER BAR ---------- */
  .nav-inner { height: 60px; }
  .logo { font-size: 18px; }
  .logo-icon { width: 34px; height: 34px; font-size: 15px; }
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: block; width: 44px; height: 44px; border-radius: 12px; font-size: 22px; }
  .theme-toggle { width: 42px; height: 42px; font-size: 17px; }

  /* ---------- HERO (app-like) ---------- */
  .hero { padding: 116px 0 64px; }
  .hero h1 { font-size: 30px; line-height: 1.18; }
  .hero p.lead { font-size: 16px; }
  .hero-cta .btn { flex: 1; min-width: 0; }
  .hero-stats { gap: 22px; }
  .hero-stat h3 { font-size: 24px; }
  .mockup { transform: none; padding: 16px; }
  .float-card { font-size: 12px; padding: 10px 12px; }
  .float-card.success { top: -14px; right: -4px; }
  .float-card.info { bottom: -14px; left: -4px; }

  /* ---------- SECTIONS ---------- */
  .section { padding: 64px 0; }
  .section-title { font-size: 26px; }
  .features-grid { grid-template-columns: 1fr; gap: 16px; }
  .feature-card { padding: 24px 20px; }
  .feature-icon { width: 50px; height: 50px; font-size: 22px; }

  .providers-grid { grid-template-columns: 1fr; gap: 18px; }
  .provider-card { padding: 26px 22px; }
  .provider-card .p-features { grid-template-columns: 1fr; }

  /* ---------- PRICING (horizontal swipe on mobile) ---------- */
  .pricing-tabs { gap: 8px; }
  .pricing-tab { padding: 11px 18px; font-size: 14px; flex: 1; max-width: 160px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
  .pricing-card { padding: 26px 22px; }

  /* ---------- GUARANTEE ---------- */
  .guarantee { padding: 40px 26px; border-radius: 20px; }
  .guarantee .g-inner { grid-template-columns: 1fr; text-align: center; }
  .guarantee p { margin: 0 auto 22px; }
  .guarantee ul { justify-content: center; flex-direction: column; align-items: flex-start; }
  .guarantee-icon { width: 110px; height: 110px; font-size: 48px; margin: 0 auto; }

  /* ---------- HOW IT WORKS ---------- */
  .steps { grid-template-columns: 1fr 1fr; gap: 26px 16px; margin-top: 40px; }
  .step-num { width: 64px; height: 64px; font-size: 24px; border-radius: 17px; }
  .step p { font-size: 13px; }

  /* ---------- CODE BANNER ---------- */
  .code-banner { padding: 20px; border-radius: 16px; }
  .code-banner pre { font-size: 12px; }
  .copy-btn { top: 12px; right: 12px; }

  /* ---------- FAQ ---------- */
  .faq-grid { grid-template-columns: 1fr; gap: 12px; }
  .faq-q { padding: 17px 18px; font-size: 14.5px; }

  /* ---------- CTA ---------- */
  .cta-band { padding: 48px 26px; border-radius: 20px; }

  /* ---------- FOOTER ---------- */
  .footer { padding-top: 50px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-grid .brand-col { grid-column: 1 / -1; }

  /* ---------- AUTH (full screen app) ---------- */
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .auth-card { padding: 96px 22px 40px; }
  .auth-box { max-width: 100%; }
  .auth-box h1 { font-size: 26px; }

  /* ---------- USER DASHBOARD (app layout) ---------- */
  .dash-wrap { display: flex; flex-direction: column; padding-top: 84px; padding-bottom: 110px; gap: 20px; }
  .dash-side { display: none; } /* hidden - replaced by bottom app nav */
  .dash-head h1 { font-size: 22px; }
  .dash-head p { font-size: 13px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-card { padding: 18px; }
  .stat-card .s-value { font-size: 22px; }
  .panel { padding: 20px; border-radius: 14px; }
  .panel-head h2 { font-size: 16.5px; }
  .key-box { flex-direction: column; align-items: stretch; text-align: center; }
  .key-box code { white-space: normal; word-break: break-all; }

  /* ---------- BOTTOM APP NAVIGATION ---------- */
  .app-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    background: var(--bg-nav); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--border); display: flex; justify-content: space-around;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(0,0,0,.08);
  }
  .app-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 10px; font-weight: 700; color: var(--text-secondary);
    padding: 6px 4px; border-radius: 12px; flex: 1; max-width: 62px; transition: .25s;
  }
  .app-nav a .an-ic { font-size: 20px; transition: transform .25s; }
  .app-nav a.active { color: var(--primary); }
  .app-nav a.active .an-ic { transform: translateY(-3px) scale(1.12); }
  .app-nav a.active { background: var(--primary-light); }
  .app-nav a .an-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); opacity: 0; }
  .app-nav a.active .an-dot { opacity: 1; }

  /* ---------- DOCS (mobile) ---------- */
  .docs-layout { display: block; padding-top: 84px; padding-bottom: 110px; }
  .docs-nav { display: none; }
  .docs-content h1 { font-size: 25px; }
  .docs-content h2 { font-size: 19px; }
  .docs-content table { font-size: 12.5px; display: block; overflow-x: auto; }
  .docs-content pre { font-size: 11.5px; padding: 16px; }
  .endpoint-line code { font-size: 12.5px; }
  .code-tabbar { overflow-x: auto; }
  .code-tabbar button { white-space: nowrap; padding: 10px 14px; }

  /* ---------- MOBILE DOCS TOC ---------- */
  .mobile-docs-menu { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 22px; font-size: 14px; font-weight: 700; color: var(--text-main); width: 100%; min-height: 48px; }

  /* ---------- TABLE RESPONSIVE ---------- */
  .table-wrap { border-radius: 0; border: none; }
  .table th { padding: 11px 12px; }
  .table td { padding: 11px 12px; font-size: 13px; }

  /* ---------- BACK TO TOP ---------- */
  .back-to-top { bottom: 92px; right: 16px; width: 44px; height: 44px; }

  /* ---------- LOADING ---------- */
  .loader { width: 44px; height: 44px; }
}