/* ===================================================================
   JadwaAI — STANDALONE MOBILE STYLESHEET (phones only, ≤600px)
   -------------------------------------------------------------------
   Loaded with  <link media="(max-width:600px)">  AND wrapped in an
   @media block below — double-guarded so it can NEVER affect desktop.
   Desktop layout lives entirely in style.css and is untouched.
   Loads AFTER style.css, so these rules win on phones by source order.
   Scope: landing/home page + the logged-in dashboard.
   =================================================================== */
@media (max-width: 600px) {

  /* ---------- 1. performance + compatibility fixes ----------
     These three were the real source of "laggy / glitchy" on phones. */

  /* Kill the GPU-heavy blur on the header (huge scroll-jank win). */
  .topbar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--navy) !important;
  }

  /* Stop the infinite box-shadow animation on the idea box — it forced a
     repaint every frame, draining battery and stuttering scroll. */
  .hero-idea { animation: none !important; }

  /* No sideways jiggle / phantom horizontal scroll. */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* Snappier view transitions (transform+opacity only = GPU compositor). */
  .view { animation-duration: .22s; }

  /* Smooth momentum scroll inside the app-shell scroller. */
  body.shell-mode .app-main {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* ---------- 2. topbar ---------- */
  .topbar .wrap { height: 56px; gap: 8px; padding: 0 14px; }
  .brand { font-size: 18px; gap: 8px; }
  .brand .mark { width: 32px; height: 32px; border-radius: 9px; }
  .topbar .btn-sm { padding: 8px 12px; font-size: 12.5px; border-radius: 11px; }
  /* the small "تواصل" guest button is nice-to-have, not essential on a phone */
  .topbar [data-go="contact"].btn-sm { display: none; }

  /* ---------- 3. landing — hero ---------- */
  .hero {
    padding: 30px 0 64px;
    background: radial-gradient(900px 480px at 80% -20%, #27517c 0%, var(--navy2) 45%, var(--navy) 100%);
  }
  .hero-focus {
    min-height: calc(100svh - 56px - env(safe-area-inset-top, 0px));
    padding: 22px 0 54px;
  }
  .hero-focus .wrap { gap: 0; }

  .eyebrow {
    font-size: 12px; padding: 5px 13px; line-height: 1.5;
  }
  .hero h1, .hero-focus h1 {
    font-size: 28px !important;
    line-height: 1.45;
    margin: 16px 0 10px;
    letter-spacing: -.2px;
  }
  .hero p.lead {
    font-size: 14.5px !important;
    color: #c2d3e6;
    margin: 0 auto 4px;
    max-width: 100%;
  }

  /* idea box — the funnel entry point, now a calm premium card */
  .hero-idea {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 22px;
    padding: 14px;
    border-radius: 20px;
    box-shadow: 0 14px 38px rgba(0,0,0,.42), 0 0 0 3px rgba(231,199,94,.30);
  }
  .hero-idea textarea {
    min-height: 70px;
    font-size: 16px !important;
    line-height: 1.7;
    padding: 6px 8px;
  }
  .hero-idea .btn {
    width: 100%;
    align-self: stretch;
    padding: 14px 20px;
    font-size: 16px;
    border-radius: 14px;
  }

  .hero-trust {
    margin-top: 16px;
    font-size: 12px;
    line-height: 2;
    color: #a9bdd2;
    max-width: 300px;
  }
  .hero-offer { margin-top: 12px; font-size: 12.5px; }
  /* contact button — hidden in the mobile header, surfaced here in the hero
     between the CTA/trust line and the "اعرف المزيد ↓" hint. */
  .hero-contact {
    display: inline-flex !important;
    margin-top: 16px;
    font-size: 14px;
    padding: 11px 24px;
    border-radius: 13px;
  }
  .scroll-hint { margin-top: 18px; font-size: 13px; }

  /* ---------- 4. landing — sections ---------- */
  .sec-pad { padding: 40px 0 !important; }
  .sec-title { font-size: 23px; line-height: 1.5; }
  .sec-sub { font-size: 14px; margin: 8px auto 26px; padding: 0 4px; }

  /* steps — clean stacked cards with breathing room for the number badge */
  .steps { grid-template-columns: 1fr; gap: 22px; margin-top: 34px !important; }
  .step { padding: 18px 18px 16px; border-radius: 16px; }
  .step:before { width: 32px; height: 32px; top: -16px; right: 16px; font-size: 15px; }
  .step h4 { font-size: 16px; margin: 2px 0 4px; }
  .step p { font-size: 14px; }

  /* features — single column, comfortable */
  .feat-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 28px !important; }
  .feat { padding: 20px 18px; border-radius: 16px; }
  .feat .ic { width: 46px; height: 46px; border-radius: 13px; font-size: 22px; margin-bottom: 12px; }
  .feat h3 { font-size: 16.5px; }
  .feat p { font-size: 14px; }

  /* pricing — single column, the "hot" plan stands out */
  .plans { grid-template-columns: 1fr !important; gap: 16px; max-width: 100% !important; margin-top: 28px !important; }
  .plan { padding: 24px 22px; border-radius: 18px; }
  .plan.hot { transform: none; }
  .plan .price { font-size: 34px; }
  .plan li { font-size: 14.5px; }

  /* faq */
  .faq details { padding: 15px 18px; border-radius: 13px; }
  .faq summary { font-size: 15px; }
  .faq .a { font-size: 14px; }

  /* footer — stacked, centered, generous spacing above the screen edge */
  footer.site { padding: 30px 0 calc(34px + var(--safe-b)); text-align: center; }
  footer.site .wrap { flex-direction: column; gap: 14px; }
  footer.site .wrap > div:last-child { justify-content: center; }

  /* ---------- 5. dashboard — shared ---------- */
  /* page header: stack title + subtitle; the in-page "new study" button is
     redundant on a phone because the bottom-nav already has a ✦ CTA. */
  .page-head { flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 18px; }
  .page-head h2 { font-size: 22px; }
  .page-head .sub { font-size: 13.5px; }
  /* Hide ONLY home's "new study" CTA (bottom nav already has ✦ جديدة).
     Scoped to data-go="wizard" so back/nav buttons on other pages
     (terms, blog editor, admin sub-pages) stay visible on mobile. */
  .page-head > .btn[data-go="wizard"] { display: none; }

  /* studies list → single column, bigger tap target, calmer card */
  .study-list { grid-template-columns: 1fr !important; gap: 12px; }
  .study-card { padding: 16px 18px; border-radius: 15px; }
  .study-card:active { transform: scale(.99); border-color: #c8d4e2; }
  .study-card h3 { font-size: 16px; margin: 10px 0 4px; }
  .study-card .meta { font-size: 12px; line-height: 1.7; }
  .study-card .btn-sm { flex: 1 1 auto; }

  .empty { padding: 44px 22px; border-radius: 18px; }
  .empty .big { font-size: 42px; }
  .empty h3 { font-size: 18px; }

  /* ---------- 6. dashboard — account ---------- */
  /* name card spans full width; credits + previews sit as two tiles below */
  .acc-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .acc-grid .stat-card:first-child { grid-column: 1 / -1; }
  .stat-card { padding: 16px 18px; border-radius: 15px; }
  .stat-card .v { font-size: 21px; }
  .stat-card .k { font-size: 12.5px; }

  /* purchases table stays horizontally scrollable; account actions stack full */
  .table-card { border-radius: 15px; }
  .account-actions, .page-head + .acc-grid ~ div[style*="display:flex"] { gap: 10px; }
  .acc-grid ~ div[style*="display:flex"] .btn,
  .acc-grid ~ div[style*="display:flex"] a.btn { flex: 1 1 100%; }

  /* ---------- 6b. support console (admin) ---------- */
  /* The search-result studies/payments tables are wide 6-column tables with
     nowrap cells, rendered raw inside .sv-sec (no scroll wrapper like
     .table-card has). On a phone they overflowed the viewport and shoved the
     whole page sideways. Make each table its own horizontal scroller so it
     stays inside its card instead of breaking the layout. */
  #supResults table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  #supResults th, #supResults td { white-space: nowrap; }
  #supResults .sv-sec { padding: 18px 16px; }
  /* action buttons inside result rows shouldn't stretch full-width */
  #supResults .btn-sm { flex: 0 0 auto; }

  /* ---------- 6c. study header (fix gauge/title overlap) ----------
     The score gauge + label were position:absolute with the title pushed
     down by a fixed margin-top:96px to clear them — which fails when the
     title or label is long (they collide). On a phone, let the gauge flow
     as a normal centered block ABOVE the title so overlap is impossible. */
  .sv-head { text-align: center; padding: 24px 20px; }
  .sv-score {
    position: static;
    transform: none;
    top: auto; right: auto; left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 14px;
  }
  .sv-head h2 { margin-top: 0; max-width: 100%; font-size: 20px; line-height: 1.5; }
  .sv-head .sub { margin-top: 6px; }
  .sv-meta { justify-content: center; }
  .auth-wrap { margin: 22px auto; padding: 0 16px; }
  .card { padding: 22px 18px; border-radius: 18px; }
  .card h2 { font-size: 21px; }

  /* ---------- 8. bottom nav — refined ---------- */
  .bottom-nav {
    padding: 7px 8px calc(7px + var(--safe-b));
    gap: 4px;
    box-shadow: 0 -6px 22px rgba(14,34,56,.10);
  }
  .bn-item { padding: 7px 2px; gap: 4px; font-size: 11px; border-radius: 13px; }
  .bn-item .i { font-size: 21px; }
  .bn-item.active { background: #f5eeda; color: var(--navy); }
  .bn-item.cta {
    margin-top: -22px;
    padding: 12px 16px;
    border-radius: 18px;
    box-shadow: 0 10px 22px rgba(201,162,39,.50);
  }
  .bn-item.cta .i { font-size: 20px; }

  /* ---------- 9. generating screen (polish, no heavy animation change) ---- */
  .genscreen { margin: 28px auto; }
  .gen-orb { width: 110px; height: 110px; }
  .gen-orb:after { font-size: 42px; }
  .genscreen h2 { font-size: 20px; }

}