/* ============================================================
   mobile.css — eMandirs Mobile v5.0
   Red-line heights from screenshots:
   Nav drawer    → ~38vh (stops after Hanumanji row)
   Guided Pooja  → ~42vh (panel body scrollable inside)
   Music player  → ~40vh (shows ~4 tracks)
   Pooja drawer  → ~40vh (stops at गणेश पूजा header)
   ============================================================ */

@media (max-width: 600px) {

  :root {
    --sb-w:       0px;
    --hdr-h:      48px;
    --mp-h:       46px;
    --tog-h:      50px;
    --altar-h:    148px;
    /* Individual panel max-heights from screenshot red lines */
    --nav-max:    38vh;   /* nav drawer: stops after Hanumanji */
    --gp-max:     42vh;   /* guided pooja panel */
    --mp-max:     40vh;   /* music player expanded */
    --drawer-max: 40vh;   /* pooja icon drawer */
  }

  /* ══ HEADER ══════════════════════════════════════════════ */
  .hdr { padding: 0 6px; height: var(--hdr-h); position: relative; }
  .hdr-temples, .hdr-nav-links, .help-btn { display: none !important; }
  .hdr-l { gap: 4px; z-index: 2; position: relative; align-items: center; display: flex; }
  .hdr-m {
    position: absolute !important;
    left: 50% !important; top: 50% !important;
    transform: translate(-50%,-50%) !important;
    pointer-events: none; z-index: 1; white-space: nowrap;
  }
  .htitle { font-size: .78rem; }
  .hom    { font-size: .85rem !important; }
  .hdr-r  { gap: 4px; z-index: 2; position: relative; align-items: center; display: flex; }
  #langBtn { font-size: .65rem; padding: 3px 6px; }

  /* Mute button */
  #hdrMuteBtn {
    display: flex !important;
    align-items: center; justify-content: center;
    background: rgba(255,215,0,.07) !important;
    border: 1px solid rgba(255,215,0,.18) !important;
    border-radius: 6px !important;
    width: 26px !important; height: 26px !important;
    color: rgba(255,215,0,.7); font-size: .78rem;
    cursor: pointer; flex-shrink: 0; padding: 0 !important;
    transition: all .2s; -webkit-tap-highlight-color: transparent;
  }
  #hdrMuteBtn.muted { color: rgba(255,80,80,.9) !important; border-color: rgba(255,80,80,.3) !important; background: rgba(255,60,60,.08) !important; }
  #hdrVolSlider { display: none !important; }

  /* Streak widget next to hamburger */
  #streakWidget {
    display: flex !important; align-items: center;
    cursor: pointer !important; margin: 0 !important; padding: 0 !important;
  }
  #streakWidget .streak-outer { display: flex; }
  #streakWidget .streak-inner {
    background: rgba(255,215,0,.07) !important;
    border: 1px solid rgba(255,215,0,.18) !important;
    border-radius: 10px !important; padding: 3px 6px !important; gap: 3px !important;
  }
  #streakWidget .streak-num   { font-size: .65rem !important; }
  #streakWidget .streak-lbl   { font-size: .42rem !important; }
  #streakWidget .streak-flame { font-size: .65rem !important; }


  /* ══ MANTRA RING — re-enable on mobile, just smaller ════ */
  .mantra-cv { display: block !important; opacity: .35; }

  /* ══ LAYOUT ══════════════════════════════════════════════ */
  .scene, .deity-zone, .altar-wrap { left: 0 !important; right: 0 !important; }
  .lb { left: 4px !important; }
  .rb { right: 4px !important; }

  /* ── CORE FIX: altar-wrap z-index ABOVE all panels ──
     Panels (z:75 drawer, z:45 music, z:50 gp) all BELOW altar.
     This ensures altar items (diya, agarbatti etc) are always
     clickable and visible, never covered by any panel. */
  /* altar-wrap: absolute don-sides don't affect flex layout */
  .altar-wrap {
    bottom: calc(var(--mp-h) + var(--tog-h)) !important;
    padding-bottom: 0 !important;
    z-index: 90 !important;
    position: fixed !important;
    padding: 0 !important;
  }

  /* FIX: altar items overflow on narrow phones because total item widths (~318px)
     + default gap (12.6px × 5 = 63px) = 381px > viewport.
     Set gap:4px and remove padding so items fit in 342px available. */
  .altar-row {
    gap: 4px !important;
    padding: 4px 2px 0 !important;
  }

  /* FIX: donation boxes — absolute positioned at altar-face level,
     left and right edges. Never pushed off-screen by flex overflow. */
  .don-side {
    position: absolute !important;
    bottom: 20px !important;
    padding-bottom: 0 !important;
    width: 38px !important;
    z-index: 92 !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
  #donLeft  { left:  3px !important; right: auto !important; }
  #donRight { right: 3px !important; left:  auto !important; }
  .don-box       { width: 34px !important; height: 38px !important; }
  .don-top       { height: 10px !important; }
  .don-front     { height: 30px !important; }
  .don-lbl       { font-size: .4rem !important; }
  .don-ico       { font-size: .65rem !important; }
  .don-slot,
  .don-slot-t    { width: 14px !important; }
  .don-s         { right: -4px !important; width: 5px !important; }

  /* Deity zone fills space above altar */
  .deity-zone {
    bottom: calc(var(--altar-h) + var(--mp-h) + var(--tog-h)) !important;
  }

  /* Idol: scale down slightly so lotus base shows above altar */
  .d-img {
    max-height: 88% !important;
    object-position: bottom center !important;
  }

  /* ── GUIDED POOJA TRIGGER: sits ON altar face (mantra line row) ──
     Placed at altar face level = mp-h + tog-h + altar-face-offset
     altar-face is the mantra text row, ~50px from altar bottom
     So bottom = mp-h + tog-h + 18px puts it right on the mantra line */
  #pm-trigger {
    position: fixed !important;
    bottom: calc(var(--mp-h) + var(--tog-h) + 20px) !important;
    left: 6px !important; right: auto !important;
    z-index: 40 !important;  /* BELOW all panels so panels show over it */
  }

  /* ══ GUIDED POOJA PANEL ═════════════════════════════════
     Opens from above music strip.
     Max-height capped so it NEVER covers altar items row.
     Altar items row starts at mp-h+tog-h+altar-h from bottom.
     Panel bottom = mp-h+tog-h. So panel max-height = altar-h - 8px
     to stop just below the altar items. */
  #pm-panel {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    bottom: calc(var(--mp-h) + var(--tog-h)) !important;
    width: 100% !important;
    max-height: calc(var(--altar-h) - 8px) !important;
    background: rgba(4,0,14,.85) !important;
    backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 14px 14px 0 0 !important;
    border-bottom: none !important; overflow: hidden !important;
    display: flex; flex-direction: column;
    z-index: 50 !important;  /* below altar z:80 */
  }
  .pmp-hdr { flex-shrink: 0; }
  .pmp-body {
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    max-height: calc(var(--altar-h) - 56px) !important;
  }
  .pmp-body.pmp-body-open { max-height: calc(var(--altar-h) - 56px) !important; }

  body.pooja-active #mobileDrawerToggle { opacity: 1 !important; pointer-events: auto !important; }
  body.pooja-active #pm-trigger { opacity: 0 !important; pointer-events: none !important; }

  /* ══ JAPA COUNTER: sits ON altar face (mantra line row), right side ══
     Mirrors pm-trigger — both sit on the altar face mantra line */
  #japaCounter {
    position: fixed !important;
    bottom: calc(var(--mp-h) + var(--tog-h) + 20px) !important;
    right: 6px !important; top: auto !important; left: auto !important;
    transform: none !important;
    z-index: 40 !important;  /* BELOW all panels so panels show over it */
    cursor: default !important; touch-action: none !important;
  }
  .japa-inner { padding: 4px 7px !important; }
  .japa-ring  { width: 30px !important; height: 30px !important; }
  .japa-ring svg { width: 30px !important; height: 30px !important; }
  .japa-tap   { width: 30px !important; height: 30px !important; font-size: .85rem !important; }
  .japa-title { font-size: .46rem !important; }
  .japa-label { font-size: .52rem !important; }

  /* ══ MUSIC PLAYER ════════════════════════════════════════
     Collapsed: compact strip at tog-h from bottom.
     Expanded: opens UPWARD, capped so it NEVER covers altar items.
     Max-height when expanded = altar-h - 8px (same as guided pooja panel)
     so it stops below the altar items row. z-index below altar (80). */
  .mplayer {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    bottom: var(--tog-h) !important; width: 100% !important;
    height: var(--mp-h) !important;
    overflow: hidden !important; border-radius: 0 !important;
    border-left: none !important; border-right: none !important; border-bottom: none !important;
    border-top: 1px solid rgba(255,215,0,.14) !important;
    background: rgba(4,0,12,.72) !important;
    backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: none !important;
    z-index: 45 !important;  /* below altar z:80 */
    transition: height .28s ease !important;
  }
  .mplayer.mp-expanded {
    height: auto !important;
    max-height: calc(var(--altar-h) - 8px) !important;
    overflow-y: auto !important;
  }
  .mp-hdr  { padding: 4px 10px !important; min-height: var(--mp-h) !important; cursor: pointer; }
  .mp-trow { display: none !important; }
  .mplayer.mp-expanded .mp-trow { display: flex !important; padding: 2px 9px !important; }
  .mp-body { max-height: 0 !important; overflow: hidden !important; transition: max-height .28s ease !important; }
  .mp-body.mp-open { max-height: calc(var(--altar-h) - 60px) !important; overflow-y: auto !important; }

  /* ══ BOTTOM TOGGLE BAR ════════════════════════════════════ */
  #mobileDrawerToggle {
    display: flex !important; position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important; height: var(--tog-h) !important; z-index: 76;
    align-items: center; justify-content: center; gap: 8px;
    background: rgba(4,0,12,.86) !important;
    backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid rgba(255,215,0,.2) !important;
    border-radius: 0 !important;
    border-left: none !important; border-right: none !important; border-bottom: none !important;
    color: #FFD700; font-size: .82rem; font-family: "Noto Serif Devanagari",serif; font-weight: 700;
    cursor: pointer; letter-spacing: .03em;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    box-shadow: none !important; padding: 0 !important; transition: background .2s !important;
  }
  #mobileDrawerToggle .dt-arrow { font-size: 1rem; transition: transform .3s; display: inline-block; }
  #mobileDrawerToggle.drawer-open .dt-arrow { transform: rotate(180deg); }
  #mobileDrawerToggle:active { background: rgba(30,10,0,.9) !important; }

  /* ══ POOJA ICON DRAWER ════════════════════════════════════
     Opens from toggle bar, slides up.
     Max-height capped at altar-h - 8px so altar items NEVER covered.
     z-index 75 but altar-wrap is z:80, so altar always on top. */
  .sidebar {
    position: fixed !important; top: auto !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important;
    height: auto !important;            /* override temple.css height:60vh */
    max-height: calc(var(--altar-h) - 8px) !important;
    border-right: none !important;
    border-top: 1px solid rgba(255,215,0,.2) !important;
    border-radius: 14px 14px 0 0 !important;
    background: rgba(2,0,8,.52) !important;
    backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 -2px 16px rgba(0,0,0,.3) !important;
    transform: translateY(100%) !important;
    transition: transform .32s cubic-bezier(.34,1.1,.64,1) !important;
    z-index: 75 !important; overflow: hidden !important;
  }
  .sidebar::before {
    content:""; display:block; width:32px; height:3px;
    background:rgba(255,215,0,.28); border-radius:2px; margin:7px auto 2px;
  }
  /* Mobile sidebar logic:
     - Starts hidden (transform:translateY(100%)) via base .sidebar rule above
     - Shows ONLY when body gets drawer-open class (set by mobile.js on toggle tap)
     - sb-closed class used by JS as additional signal, both work */
  .sidebar:not(.sb-closed)  { transform: translateY(0)    !important; }
  .sidebar.sb-closed         { transform: translateY(100%) !important; }
  body:not(.drawer-open) .sidebar { transform: translateY(100%) !important; }
  body.drawer-open .sidebar  { transform: translateY(0)    !important; }
  .sb-scroll {
    width: 100% !important;
    height: auto !important;
    max-height: calc(var(--altar-h) - 24px) !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch; padding: 2px 7px 12px !important;
  }
  .sbt  { font-size: .46rem !important; padding: 2px !important; margin-bottom: 3px !important; }
  .sbg  { grid-template-columns: repeat(5,1fr) !important; gap: 4px !important; }
  .sib  { height: 58px !important; font-size: .43rem !important; border-radius: 10px !important;
          background: rgba(255,215,0,.05) !important; border-color: rgba(255,215,0,.14) !important; }
  .sib:active { background: rgba(255,215,0,.16) !important; }
  .sib.on     { background: rgba(255,215,0,.12) !important; border-color: rgba(255,215,0,.42) !important; }
  .si   { font-size: 1.08rem !important; }

  /* ══ TOAST ════════════════════════════════════════════════ */
  .toast {
    position: fixed !important;
    top: calc(var(--hdr-h) + 8px) !important; left: 50% !important;
    right: auto !important; bottom: auto !important;
    width: auto !important; height: auto !important; inset: auto !important;
    top: calc(var(--hdr-h) + 8px) !important; left: 50% !important;
    transform: translateX(-50%) translateY(-8px) !important;
    font-size: .76rem !important; padding: 7px 16px !important;
    max-width: 70vw !important; white-space: nowrap !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
    border-radius: 20px !important; background: rgba(4,0,12,.92) !important;
    backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
    z-index: 402 !important;
  }
  .toast.show { transform: translateX(-50%) translateY(0) !important; }

  /* Prasad */
  .prasad { width: 86vw !important; max-width: 310px !important; }
  .prasad-in { padding: 16px 18px !important; }

  /* ══ BACKDROP ═════════════════════════════════════════════ */
  #mobileBackdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.18); z-index: 74;
  }
  #mobileBackdrop.visible { display: block; }

  /* ══ MODALS ═══════════════════════════════════════════════ */
  .modal-ov { background: rgba(0,0,0,.65) !important; }
  .modal-box {
    background: rgba(8,0,20,.94) !important;
    backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important;
    max-height: 88vh; overflow-y: auto;
  }

  /* ══ NAV DRAWER — caps at --nav-max ══════════════════════ */
  #mobileNavDrawer {
    display: none; position: fixed;
    top: var(--hdr-h); left: 0; right: 0; z-index: 200;  /* above pm-trigger/japa z:82 */
    background: rgba(4,0,12,.95);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,215,0,.16);
    padding: 10px 12px 14px;
    max-height: var(--nav-max); overflow-y: auto;
    animation: mndSlide .22s ease-out;
  }
  #mobileNavDrawer.nav-open { display: block; }
  @keyframes mndSlide { from{transform:translateY(-100%);opacity:0;} to{transform:translateY(0);opacity:1;} }
  .mnd-section-title {
    font-size: .48rem; color: rgba(255,215,0,.38);
    letter-spacing: .12em; text-transform: uppercase;
    font-family: "Cinzel Decorative",cursive; margin: 8px 0 5px;
  }
  .mnd-section-title:first-child { margin-top: 0; }
  .mnd-pills { display: flex; flex-wrap: wrap; gap: 5px; }
  .mnd-pill {
    display: flex; align-items: center; gap: 4px; text-decoration: none;
    background: rgba(255,215,0,.05); border: 1px solid rgba(255,215,0,.14);
    border-radius: 16px; padding: 5px 10px;
    color: rgba(255,215,0,.62); font-size: .68rem;
    transition: all .15s; -webkit-tap-highlight-color: transparent;
  }
  .mnd-pill:active,.mnd-pill.active { background:rgba(255,215,0,.14); border-color:rgba(255,215,0,.36); color:#FFD700; }
  .mnd-icon { font-size: .86rem; }
  .mnd-divider { height:1px; background:linear-gradient(90deg,transparent,rgba(255,215,0,.14),transparent); margin:8px 0; }

  /* ══ MISC ═════════════════════════════════════════════════ */
  .auto-badge { top: calc(var(--hdr-h) + 4px) !important; font-size: .7rem !important; }
  .pmc-bg,.pmt-overlay { backdrop-filter:blur(14px) !important; -webkit-backdrop-filter:blur(14px) !important; }
  .help-panel { right:4px !important; left:4px !important; width:auto !important; top:calc(var(--hdr-h)+4px) !important; }

  /* ══ ALTAR ITEMS — always interactive above panels ══════════ */
  .al-item    { z-index: 91 !important; pointer-events: auto !important; }
  .altar-row  { z-index: 91 !important; }
  .altar-top  { z-index: 90 !important; }

  /* ══ GUIDED POOJA PANEL — body always interactive ═══════════ */
  .pmp-hdr, .pmp-body, .pmp-pills, .pmp-detail { pointer-events: auto; }

  /* ══ POOJA VIDHI PAGE — prevent horizontal overflow on mobile  */
  .pv-step, .pv-card, .pv-item, .shodash-item, .upchar-item,
  .pv-section, .vidhi-step, .step-card {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
  }
  .page, .content, main, article, section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  img, video, iframe { max-width: 100% !important; }

  /* ══ FLOWER ALTAR ITEM ════════════════════════════════════ */
  #alFlower { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #alFlower:active { transform: scale(.92); }
  @keyframes flowerPulse {
    0%,100% { filter: drop-shadow(0 0 4px rgba(255,105,180,.5)); transform: scale(1); }
    50%      { filter: drop-shadow(0 0 10px rgba(255,105,180,.9)); transform: scale(1.08); }
  }
  #alFlower.flower-glow .al-flower-icon span {
    animation: flowerPulse .3s ease-out 3;
  }

  /* ══ INSTALL PROMPT — centred on god image ════════════════ */
  #pwaInstallBtn {
    /* Override fixed positioning to centre on idol */
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    bottom: calc(var(--altar-h) + var(--mp-h) + var(--tog-h) + 60px) !important;
  }

  /* ══ STOP MUSIC PROMPT ════════════════════════════════════ */
  #stopMusicPrompt {
    bottom: calc(var(--tog-h) + var(--mp-h) + 120px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* Desktop: hide mobile-only elements */
@media (min-width: 601px) {
  #mobileDrawerToggle, #mobileBackdrop, #mobileNavDrawer { display: none !important; }
  #hdrMuteBtn { display: none !important; }
}