/* RehanBooks — mobile & iPhone refinements (loaded on every page, after inline CSS) */

/* iOS: stop auto text inflation, kill tap flash, no sideways scroll */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
*{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
body{ overflow-x:hidden; max-width:100%; }
img,video{ max-width:100%; height:auto; }

/* Notch / safe-area padding on sticky headers */
.topbar, .top{
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}

@media (max-width:560px){
  /* inputs at >=16px so iOS Safari never zooms the page on focus */
  input, select, textarea{ font-size:16px !important; }

  /* ---- headers ---- */
  .topbar{ height:auto; min-height:58px; padding-top:10px; padding-bottom:10px; gap:10px; flex-wrap:wrap; }
  .top{ height:auto; min-height:56px; gap:10px 12px; flex-wrap:wrap;
        padding-top:calc(9px + env(safe-area-inset-top)); padding-bottom:9px; }
  .brand{ font-size:18px !important; gap:8px; }
  .brand .ic{ width:24px !important; height:24px !important; }
  .topright{ gap:14px !important; }
  .tright{ gap:12px !important; margin-left:auto; }
  .tright .tl span, .topright .tl span{ display:inline; }

  /* ---- generic app content ---- */
  .main{ padding:18px 14px 34px !important; }
  .head{ flex-direction:column; align-items:flex-start; gap:12px; }
  .head h1{ font-size:24px !important; }
  .toolbar{ flex-direction:column; align-items:stretch; }
  .search{ max-width:none !important; }
  .grid{ grid-template-columns:1fr !important; }
  .btn{ padding:12px 18px; }

  /* ---- bottom-sheet style modals ---- */
  .modal-wrap{ padding:0 !important; align-items:flex-end !important; }
  .modal-card{
    max-width:none !important; width:100% !important;
    border-radius:20px 20px 0 0 !important; max-height:92vh; overflow-y:auto;
    padding:24px 18px calc(22px + env(safe-area-inset-bottom)) !important;
    -webkit-overflow-scrolling:touch;
  }

  /* ---- reader (public book page) ---- */
  .wrap{ padding:16px 14px calc(40px + env(safe-area-inset-bottom)) !important; gap:18px !important; }
  .reading{ padding:20px 16px !important; border-radius:14px; }
  .reading h1{ font-size:23px !important; }
  .prose{ font-size:17px !important; line-height:1.8; }
  .prose p{ text-align:left !important; }              /* justify looks broken on narrow screens */
  .player{ flex-wrap:wrap; padding:14px !important; gap:12px; }
  .player .pbtn{ width:48px !important; height:48px !important; }
  .player .pinfo{ order:3; flex-basis:100%; }
  .rnav{ grid-template-columns:1fr !important; gap:10px !important; }
  .rnav .l,.rnav .c,.rnav .r{ text-align:center !important; }
  .rbtn{ width:100%; justify-content:center; }
  .side .cover{ height:170px !important; }
  .rcard{ padding:18px !important; }

  /* ---- landing ---- */
  .topbar .wrap{ height:auto !important; flex-wrap:wrap; row-gap:8px; padding-top:10px; padding-bottom:10px; }
  .tnav{ gap:14px !important; font-size:14px; align-items:center; }
  .navbtn{ padding:9px 18px !important; font-size:14px !important; border-radius:11px; box-shadow:0 6px 14px rgba(79,70,229,.28) !important; }
  .hero{ text-align:center; }
  .hero h1{ font-size:30px !important; line-height:1.15; }
  .steps{ grid-template-columns:1fr !important; }

  /* ---- auth / settings cards ---- */
  .card{ margin-left:14px !important; margin-right:14px !important; max-width:none !important; padding:24px 18px !important; }
}

/* Very small phones (iPhone SE / mini) */
@media (max-width:380px){
  .brand{ font-size:16px !important; }
  .reading h1, .head h1{ font-size:21px !important; }
  .loginb{ padding:8px 14px !important; }
}