/* =====================================================================
   مكتبة الفجر — mobile "app shell" layer (≤ 820px)
   Loaded after site.css on every page. Desktop is untouched except the
   contrast fixes in the first block (they were unreadable everywhere).
   ===================================================================== */

/* ---------- global contrast fixes (maroon-on-maroon text) ---------- */
.ad-btn{color:var(--on-accent)}
.hslide h2 .hl{color:#f0aab6}
.hp-go{color:#f6c9d1}
.tabbar{display:none}

@media (max-width:820px){
  :root{--tabbar-h:64px;--head-h:112px}
  html{scroll-padding-top:calc(var(--head-h) + 8px)}
  section[id],[id^="cat-"]{scroll-margin-top:calc(var(--head-h) + 8px)}
  body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    -webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;font-size:15px}
  .wrap{padding-inline:16px}

  /* native-feel press feedback instead of hover lifts */
  a,button{-webkit-touch-callout:none}
  .btn:active,.pc-add:active,.tab:active,.icon-btn:active,.tool:active,.catcard:active,
  .pcard:active,.mtile:active,.btile:active,.pubcard:active,.hero-promo:active{transform:scale(.97)!important;transition:transform .08s}
  .btn:hover,.btn-gold:hover,.btn-primary:hover,.pf-ad:hover,.hero-promo:hover{transform:none;box-shadow:var(--shadow)}
  input,select,textarea{font-size:16px!important} /* stops iOS zoom-on-focus */

  /* ---------- app bar ---------- */
  .ubar{display:none}
  .head{padding-top:env(safe-area-inset-top);box-shadow:none;border-bottom:1px solid var(--line)}
  .head-in{height:auto;flex-wrap:wrap;gap:8px 10px;padding-block:8px 10px}
  .brand{gap:9px}
  .logo-mark{width:38px;height:38px;border-radius:11px;padding:4px}
  .brand .name{font-size:1.12rem}
  .brand .name small{display:none}
  .tools{gap:2px}
  .tool{height:42px;width:42px;padding:0;justify-content:center;border-radius:12px}
  .tool>svg{width:22px;height:22px}
  .tool.acct,.cart-btn,.burger{display:none!important}
  .tool.hide-sm{display:inline-flex}
  .tbadge{top:3px;inset-inline-end:3px}
  .search{display:flex!important;order:3;flex:1 1 100%;max-width:none;height:44px;border-radius:14px;
    border:0;background:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
  .search:focus-within{box-shadow:inset 0 0 0 1.5px var(--brand)}
  .search-cat{display:none}
  .search input{padding:0 14px;font-size:16px}
  .search-go{width:44px;border-radius:12px;margin:3px;background:var(--brand);color:#fff}
  .search-go svg{width:18px;height:18px}

  /* category chips under the app bar (scrolls away, not sticky) */
  .mega{display:block!important;position:static;border-bottom:0;background:transparent}
  .mega-in{height:auto;padding-block:10px 2px;gap:8px;padding-inline:0}
  .mega-dd{display:none}
  .mega-links{padding-inline:16px;gap:8px;order:2}
  .mega-links a{padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);
    font-size:.82rem;opacity:1;box-shadow:0 1px 2px rgba(12,16,70,.05)}
  .mega-links a::after{display:none}
  .mega-hot{order:1;height:36px;padding:0 14px;border-radius:999px;font-size:.82rem;margin-inline-start:16px}

  /* ---------- hero ---------- */
  .hero{padding:12px 0 6px}
  .hero-layout{gap:10px}
  .hero-car{border-radius:20px}
  .hslide{padding:26px 20px 40px;min-height:230px}
  .hslide .hs-copy{padding:0}
  .hslide .hs-tag{font-size:.72rem;padding:4px 12px;margin-bottom:10px}
  .hslide h2{font-size:1.5rem;margin-bottom:8px}
  .hslide p{font-size:.86rem;line-height:1.7;margin:0 auto 16px}
  .hslide .btn{padding:10px 18px;font-size:.88rem;border-radius:12px}
  .hero-dots{bottom:14px}
  .hero-side{grid-template-columns:1fr 1fr!important;grid-template-rows:none;gap:10px}
  .hero-promo{min-height:104px;border-radius:16px}
  .hp-in{padding:12px 13px;gap:4px}
  .hp-tag{font-size:.62rem;padding:2px 8px}
  .hp-in b{font-size:.92rem}
  .hp-go{font-size:.74rem}

  /* ---------- trust strip: compact 2×2 ---------- */
  .features{padding:6px 0 8px}
  .feat-grid{grid-template-columns:1fr 1fr!important;gap:8px}
  .feat{padding:10px 11px;gap:9px;border-radius:14px;box-shadow:none}
  .feat i{width:34px;height:34px;border-radius:10px}
  .feat i svg{width:18px;height:18px}
  .feat b{font-size:.8rem;line-height:1.3}
  .feat span{font-size:.68rem;line-height:1.4;display:block}

  /* ---------- section headers ---------- */
  .prow{padding:16px 0}
  .prow-head{align-items:center;margin-bottom:12px;gap:10px}
  .prow-head>div{min-width:0}
  .prow-head h2{font-size:1.14rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .eyebrow{font-size:.64rem;letter-spacing:.06em}
  .viewall{font-size:.8rem;white-space:nowrap;flex:0 0 auto;padding:6px 12px;border-radius:999px;
    background:color-mix(in srgb,var(--brand) 8%,transparent)}
  .viewall svg{width:14px;height:14px}
  .sec-head{margin-bottom:16px}
  .sec-head h2{font-size:1.3rem}
  .sec-sub{font-size:.82rem}
  .sec-head .rule{margin-top:10px;width:44px}

  /* ---------- horizontal rails: full-bleed swipe, peek next card ---------- */
  .prow-scroll{grid-auto-columns:42%;gap:10px;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;
    padding-bottom:6px}
  .mosaic{grid-template-rows:repeat(2,128px);grid-auto-columns:128px;gap:8px}

  /* ---------- product card (compact) ---------- */
  .pcard{border-radius:14px;box-shadow:0 1px 2px rgba(12,16,70,.06)}
  .pc-cover{padding:12px 12px 8px}
  .pc-cover .cover{max-width:112px}
  .badge{top:8px;inset-inline-start:8px;font-size:.62rem;padding:2px 8px}
  .pc-actions{display:none}
  .pc-body{padding:8px 10px 10px}
  .pc-cat{font-size:.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pc-title{font-size:.86rem;margin:2px 0 0;line-height:1.4}
  .pc-author{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pc-foot{padding-top:6px;gap:6px;align-items:center}
  .pc-price .now{font-size:.9rem}
  .pc-price s{font-size:.66rem}
  .pc-add{width:34px;height:34px;border-radius:10px}
  .pc-add svg{width:16px;height:16px}

  /* ---------- featured publisher ---------- */
  .pubfeat{padding:14px 0}
  .pf-grid{gap:12px}
  .pf-ad{min-height:0;border-radius:18px}
  .pf-ad-in{padding:18px;gap:6px;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px}
  .pf-logo{width:48px;height:48px;border-radius:12px;margin:0;grid-row:span 2}
  .pf-ad .ad-tag{justify-self:start;font-size:.64rem;padding:2px 9px}
  .pf-ad h3{font-size:1.05rem}
  .pf-ad p{grid-column:1/-1;font-size:.8rem;line-height:1.7;margin-top:4px}
  .ad-btn{grid-column:1/-1;justify-self:start;padding:9px 16px;font-size:.82rem;margin-top:4px}
  .pf-books{display:grid;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:42%;grid-auto-rows:auto;
    overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;gap:10px;margin-inline:-16px;padding:0 16px 6px;
    scroll-padding-inline:16px;overscroll-behavior-x:contain}
  .pf-books::-webkit-scrollbar{display:none}
  .pf-books .pc-cover .cover{width:100%;max-width:112px}
  .pf-books .pc-add{width:34px;height:34px}

  /* ---------- category tiles (app-style 3-up, icon on top) ---------- */
  .cats{padding:28px 0}
  .cats::before{opacity:.3}
  .catgrid{grid-template-columns:repeat(3,1fr)!important;gap:8px}
  .catcard.cc-img,.catcard.cc-more{gap:7px;padding:7px 7px 9px;border-radius:16px;box-shadow:none}
  .cc-pic{border-radius:11px}
  .cc-name{font-size:.76rem;min-height:2.7em}
  .cc-more-n{font-size:1.3rem}
  .cc-more .cc-name svg{width:13px;height:13px}
  /* collapsed: 3×3 on phones (8 tiles + more) */
  .catgrid:not(.all) .cc-img:nth-child(n+9){display:none}

  /* ---------- publishers ---------- */
  .pubs{padding:24px 0}
  .pub-grid{grid-template-columns:1fr 1fr!important;gap:8px}
  .pubcard{padding:10px;gap:10px;border-radius:14px;box-shadow:none}
  .pub-logo{width:42px;height:42px;border-radius:12px}
  .pub-name{font-size:.82rem}
  .pubcard.feat .pub-name{font-size:.95rem}
  .pub-stats{font-size:.68rem}
  .pub-books svg{display:none}
  .pub-go{display:none}
  .pm-plus{font-size:1.4rem}

  /* ---------- newsletter ---------- */
  .news{padding:8px 0 20px}
  .news-in{padding:24px 18px;border-radius:18px}
  .news-in h2{font-size:1.15rem}
  .news-in p{font-size:.84rem;margin:6px auto 14px}
  .news-form{gap:8px}
  .news-form input{height:46px;min-width:0}
  .news-form .btn{padding:0 18px;height:46px}

  /* ---------- footer: compact ---------- */
  .foot{padding-top:28px}
  .foot-grid{grid-template-columns:1fr 1fr!important;gap:22px 16px;padding-bottom:22px}
  .foot-grid>div:first-child,.foot-grid>div:last-child{grid-column:1/-1}
  .foot h4{font-size:.92rem;margin-bottom:10px}
  .foot ul{gap:8px}
  .foot ul a,.foot .fcontact li{font-size:.82rem}
  .foot .fcontact{margin-top:14px}
  .foot .fcontact li{margin-bottom:6px}
  .foot-pay{padding:16px 0;gap:14px}
  .foot .fp-logos li{height:34px;min-width:48px;padding:4px 8px}
  .fp-logos img{height:20px}
  .copy{padding:14px 0}

  /* ---------- side menu: app sheet + settings ---------- */
  .mnav-panel{width:min(330px,88vw);padding:calc(14px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom))}
  .mnav-links a{padding:13px 6px;font-size:.92rem}
  .mnav-set{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
  .mnav-set-t{font-size:.72rem;font-weight:800;color:var(--ink-soft);letter-spacing:.04em}
  .mnav-set-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .mnav-set .ubar-dd{position:static;flex:1 1 100%}
  .mnav-set .ubar-btn{width:100%;height:42px;justify-content:flex-start;background:var(--muted);border:1px solid var(--line);color:var(--ink);font-size:.86rem;border-radius:12px;padding:0 12px}
  .mnav-set .ubar-btn .caret{margin-inline-start:auto}
  .mnav-set .ubar-menu{position:static;width:100%;margin-top:6px;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none}
  .mnav-set .ubar-dd.open .ubar-menu{display:block}
  .mnav-set .lng{border-color:var(--line);flex:1}
  .mnav-set .lng button{flex:1;justify-content:center;color:var(--ink);height:40px;font-size:.84rem}
  .mnav-set .lng button.on{color:#fff}
  .mnav-set .ttog{width:42px;height:42px;color:var(--ink);border-color:var(--line);border-radius:12px;background:var(--muted)}

  /* ---------- cart drawer → bottom sheet ---------- */
  .drawer{top:auto;bottom:0;left:0;right:0;width:100%;height:auto;max-height:86vh;max-height:86dvh;
    border-radius:22px 22px 0 0;transform:translateY(105%);transition:transform .38s cubic-bezier(.22,1,.36,1);
    padding-bottom:env(safe-area-inset-bottom)}
  .drawer.open{transform:translateY(0)}
  .drawer::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--line-strong)}
  .drawer-h{padding:22px 18px 12px}
  .drawer-h h3{font-size:1.1rem}
  .drawer-body{padding:14px 16px;min-height:160px}
  .drawer-f{padding:14px 16px}

  /* ---------- toast / back-to-top above the tab bar ---------- */
  .toast{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);font-size:.86rem;padding:11px 18px}
  .totop{display:none}
  body.menu-open .toast{bottom:auto;top:calc(env(safe-area-inset-top) + 14px)}

  /* ---------- bottom tab bar ---------- */
  .tabbar{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:55;
    height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:color-mix(in srgb,var(--surface) 92%,transparent);
    -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
    border-top:1px solid var(--line);box-shadow:0 -6px 20px -14px rgba(12,16,70,.35)}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:var(--ink-soft);font-size:.66rem;font-weight:700;position:relative;transition:color .2s}
  .tab svg{width:23px;height:23px;transition:transform .2s}
  .tab.on{color:var(--brand)}
  :root[data-theme="dark"] .tab.on{color:var(--brand-2)}
  .tab.on::before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--brand)}
  .tab .tb-ic{position:relative;display:grid;place-items:center}
  .tab .tb-badge{position:absolute;top:-5px;inset-inline-end:-9px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
    background:var(--sale);color:#fff;font-size:.6rem;font-weight:800;display:grid;place-items:center;
    box-shadow:0 0 0 2px var(--surface);transform:scale(0);transition:transform .25s}
  .tab .tb-badge.show{transform:scale(1)}
  .tab .tb-badge.bump{animation:tbBump .4s ease}
  @keyframes tbBump{40%{transform:scale(1.35)}}

  /* ---------- book page ---------- */
  .book-page{padding:12px 0 24px}
  .crumb{font-size:.74rem;margin-bottom:12px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
  .crumb span{overflow:hidden;text-overflow:ellipsis}
  .bd-gallery{max-width:none!important}
  .bd-cover{padding:22px;border-radius:20px}
  .bd-view .cover{width:180px}
  .bd-thumbs{justify-content:center;gap:8px;margin-top:10px}
  .bd-thumb{width:58px;height:76px;padding:4px;border-radius:10px}
  .bd-info h1{font-size:1.35rem!important}
  .bd-author{font-size:.84rem}
  .bd-now{font-size:1.5rem}
  .bd-short{font-size:.9rem;line-height:1.85}
  .bd-buy{display:grid;grid-template-columns:auto 1fr 48px;gap:10px}
  .bd-buy .btn{justify-content:center;height:48px;padding:0 14px}
  .bd-buy #bdAdd{grid-column:2/4}
  .bd-buy #bdBuy{grid-column:1/3}
  .bd-qty{height:48px}
  .bd-wish{width:48px;height:48px}
  .bd-tabs{margin-top:26px}
  .bd-tabnav button{padding:10px 16px;font-size:.9rem}
  .bd-pane{font-size:.9rem}
  .bd-related{margin-top:22px;padding-top:20px!important}
}

@media (max-width:360px){
  .prow-scroll,.pf-books{grid-auto-columns:46%}
  .hp-in b{font-size:.84rem}
}

/* ---------- featured publisher (Waha) on phones ---------- */
@media (max-width:820px){
  .waha{padding:14px 0}
  .waha-box{border-radius:18px;padding:16px 16px 18px}
  .waha-head{gap:10px;margin-bottom:14px}
  .waha-logo{width:42px;height:42px;border-radius:12px}
  .waha-tt h2{font-size:1.08rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .waha-eyebrow{font-size:.64rem}
  .waha-all{font-size:.78rem}
  .waha-books{grid-auto-columns:112px;gap:10px;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .wb-t{font-size:.8rem}
  .wb-p{font-size:.82rem}
}