/* =====================================================================
   FILE: assets/css/app.css — mobile app-style UX layer.
   Everything below applies ONLY on small screens (<=820px).
   Desktop rendering is completely untouched.
   ===================================================================== */
@media (max-width: 820px) {

  /* --- kill page-level horizontal scroll (carousel bleed, etc.) ---
     `clip` keeps position:sticky working, unlike `hidden`. */
  html, body { overflow-x: hidden; overflow-x: clip; }

  /* --- room for the tab bar, incl. notched phones --- */
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  body.app-locked { overflow: hidden; }

  /* --- slim app bar: brand + actions, no hamburger menu --- */
  .main-navbar {
    padding-top: calc(.55rem + env(safe-area-inset-top, 0px));
    padding-bottom: .55rem;
    box-shadow: 0 1px 12px rgba(30, 27, 75, .10);
  }
  .main-navbar #mainNav,
  .main-navbar .navbar-toggler { display: none !important; }
  .main-navbar .container { flex-wrap: nowrap; }
  .main-navbar .navbar-brand { font-size: 1.15rem; margin-inline-end: auto; }
  #app-search-btn, #app-theme-toggle {
    width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; font-size: 1.05rem;
  }

  /* --- bottom tab bar --- */
  #app-tabbar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 1040;
    display: flex; align-items: stretch;
    background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-top: 1px solid var(--bs-border-color);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  #app-tabbar a, #app-tabbar button {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; min-height: 54px; padding: 4px 2px;
    color: var(--bs-secondary-color); background: none; border: 0;
    font-size: 11px; font-weight: 600; line-height: 1.15; text-decoration: none;
    border-radius: 14px; -webkit-tap-highlight-color: transparent;
  }
  #app-tabbar a:active, #app-tabbar button:active { transform: scale(.96); }
  #app-tabbar i { font-size: 22px; line-height: 1; padding: 3px 16px; border-radius: 999px;
    transition: background-color .18s ease, color .18s ease; }
  #app-tabbar [aria-current="page"] { color: var(--bs-primary); }
  #app-tabbar [aria-current="page"] i {
    background: color-mix(in srgb, var(--bs-primary) 15%, transparent);
    color: var(--bs-primary);
  }

  /* --- "More" bottom sheet --- */
  #app-sheet-backdrop {
    position: fixed; inset: 0; z-index: 1050; background: rgba(10, 8, 30, .5);
    opacity: 0; transition: opacity .25s ease;
  }
  #app-sheet-backdrop[hidden] { display: none; }
  #app-sheet-backdrop.show { opacity: 1; }
  #app-more-sheet {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 1051;
    background: var(--bs-body-bg); color: var(--bs-body-color);
    border-radius: 22px 22px 0 0; box-shadow: 0 -10px 34px rgba(0, 0, 0, .22);
    max-height: 84dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    transform: translateY(102%); transition: transform .3s cubic-bezier(.32, .72, .35, 1);
  }
  #app-more-sheet[hidden] { display: none; }
  #app-more-sheet.open { transform: none; }
  .app-sheet-handle {
    width: 44px; height: 5px; border-radius: 999px; margin: 2px auto 10px;
    background: var(--bs-border-color);
  }
  .app-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 2px 10px; font-size: 1.05rem;
  }
  #app-more-close {
    width: 36px; height: 36px; border-radius: 999px; border: 0;
    background: var(--bs-tertiary-bg); color: var(--bs-body-color); font-size: 1rem;
  }
  .app-sheet-links { display: flex; flex-direction: column; }
  .app-sheet-links a {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 4px; color: var(--bs-body-color); text-decoration: none;
    font-weight: 600; font-size: 1rem; border-top: 1px solid var(--bs-border-color);
    min-height: 52px;
  }
  .app-sheet-links a > i:first-child {
    width: 40px; height: 40px; flex: none; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    color: var(--bs-primary);
  }
  .app-sheet-links a > i:last-child { margin-inline-start: auto; color: var(--bs-secondary-color); }

  /* --- full-screen search --- */
  #app-search-overlay {
    position: fixed; inset: 0; z-index: 1060; background: var(--bs-body-bg);
    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px;
  }
  #app-search-overlay[hidden] { display: none; }
  #app-search-overlay form { display: flex; gap: 8px; align-items: center; }
  #app-search-overlay input[type="search"] {
    flex: 1; height: 52px; border-radius: 16px; font-size: 1.05rem;
    border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg);
    color: var(--bs-body-color); padding: 0 16px; outline: none;
  }
  #app-search-overlay input[type="search"]:focus { border-color: var(--bs-primary); }
  #app-search-overlay button {
    width: 52px; height: 52px; flex: none; border-radius: 16px; border: 0;
    background: var(--bs-primary); color: #fff; font-size: 1.2rem;
    display: inline-flex; align-items: center; justify-content: center;
  }
  #app-search-overlay #app-search-close { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }

  /* --- home sections become swipeable carousels --- */
  main section:has(> .container > .d-flex > .section-title) .row.g-4 {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-inline: -14px; padding: 4px 14px 12px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  main section:has(> .container > .d-flex > .section-title) .row.g-4::-webkit-scrollbar { display: none; }
  /* book cards: compact, ~2 per view */
  main section:has(> .container > .d-flex > .section-title) .row.g-4 > [class*="col-"]:has(.book3d-wrap) {
    flex: 0 0 auto; width: 46%; max-width: 210px; scroll-snap-align: start;
    padding-inline: 0; /* Bootstrap gutters were eating the cover width */
  }
  /* post & product cards: wider, ~1.4 per view */
  main section:has(> .container > .d-flex > .section-title) .row.g-4 > [class*="col-"]:not(:has(.book3d-wrap)) {
    flex: 0 0 auto; width: 72%; max-width: 300px; scroll-snap-align: start;
  }
  /* tighter text only on the small book cards */
  main section:has(> .container > .d-flex > .section-title) .row.g-4 > [class*="col-"]:has(.book3d-wrap) .card-body { padding: 0.5rem 0.35rem; }
  main section:has(> .container > .d-flex > .section-title) .row.g-4 > [class*="col-"]:has(.book3d-wrap) .card-title { font-size: 0.8rem; line-height: 1.35; }
  main section:has(> .container > .d-flex > .section-title) .row.g-4 > [class*="col-"]:has(.book3d-wrap) .card-body small { font-size: 0.68rem; }


  /* --- mobile: flat full covers. The 3D tilt + spine overlap crops
         cover edges on small cards; desktop keeps the 3D look --- */
  .book3d, [dir="rtl"] .book3d,
  .book3d-wrap:hover .book3d, [dir="rtl"] .book3d-wrap:hover .book3d,
  .book3d-large .book3d, [dir="rtl"] .book3d-large .book3d,
  .book3d-wrap.book3d-large:hover .book3d, [dir="rtl"] .book3d-wrap.book3d-large:hover .book3d {
    transform: none;
  }
  .book3d::before, .book3d::after, .book3d-wrap::after { display: none; }
  .book3d-wrap, .book3d-wrap.book3d-large { padding: 10px 10px 4px; perspective: none; }
  .book3d img, [dir="rtl"] .book3d img { border-radius: 8px; }

  /* equal-height cover boxes, full art letterboxed: style.css forces
     .home-card .book-cover to 260px + object-fit:cover (cropping); instead
     every book gets a uniform 3:4 box with the whole cover fitted inside */
  main .home-card:has(.book3d-wrap) .book3d {
    aspect-ratio: 3 / 4;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; border-radius: 8px; background: #f4f2fb;
  }
  main .home-card:has(.book3d-wrap) .book-cover {
    width: 100%; height: 100%; object-fit: contain;
  }
  main section:has(> .container > .d-flex > .section-title) .home-card {
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 4px 16px rgba(30, 27, 75, .10);
  }

  /* --- compact hero --- */
  .hero { padding: 1.75rem 0 2rem; }
  .hero-title { font-size: 1.85rem; line-height: 1.25; }
  .hero-subtitle { font-size: 1rem; }
  .hero .btn-lg { width: 100%; margin-bottom: .4rem; }

  /* --- section titles + cards --- */
  .section-title { font-size: 1.25rem; }
  .card { border-radius: 18px; }

  /* --- slim footer (tab bar replaces nav) --- */
  .site-footer .container > .row.gy-4 { display: none; }
  .site-footer .container { padding-top: 1.25rem !important; padding-bottom: .75rem !important; }

  /* --- floating elements clear the tab bar --- */
  .back-to-top { bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
  #pwa-install-banner { bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
  .onesignal-bell-launcher, #onesignal-bell-container {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* --- exchange board: sticky view toggle --- */
  .btn-group[aria-label="View"] { position: sticky; top: 64px; z-index: 20; }

  /* --- forms: comfortable touch targets --- */
  .form-control, .form-select { min-height: 48px; border-radius: 14px; }
  .btn { border-radius: 14px; }
}