/* Ziarat & duas: tiles, reader (Book / Text view) and audio player — follows the recitation line by line */
.zsec{margin:0 0 6px}
.zgrp{font-weight:800;font-size:15px;color:var(--muted);margin:18px 2px 8px}
.zcard{display:block;width:100%;text-align:start;background:var(--card);border:1.5px solid var(--edge);border-radius:20px;padding:14px 16px;margin:0 0 10px;box-shadow:var(--shadow);color:inherit;font:inherit}
.zcard .zn{display:flex;align-items:flex-start;gap:8px;font-size:17.5px;font-weight:700;line-height:1.3}
.zcard .zn>span:first-child{flex:1}
.zcard .zs{font-size:14px;color:var(--muted);margin-top:3px;line-height:1.4}
.zcard .zb2{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.zcard .zb2 .btn{padding:8px 12px;font-size:14.5px}
.zbadge{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:800;color:var(--acc-text);border:1.5px solid var(--acc);border-radius:999px;padding:1px 8px;margin-top:2px;white-space:nowrap}
.zbadge svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.zbadge.m{color:var(--muted);border-color:var(--line)}
html[lang=ur] .zcard .zn{font-size:18px;line-height:2}
html[lang=ur] .zcard .zs{font-size:14.5px;line-height:2}
html[lang=ur] .zgrp{font-size:15px}
.zlisten{margin-top:10px}

.zr{position:fixed;inset:0;z-index:40;background:var(--bg);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.zr .zt{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;background:var(--bg);border-bottom:1px solid var(--line)}
.zr .zt .ttl{flex:1;min-width:0;font-weight:700;font-size:16px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html[lang=ur] .zr .zt .ttl{line-height:1.9;font-size:16px}
.zr .vb{flex:none;min-height:42px;min-width:42px;padding:0 10px;border-radius:12px;border:0;background:var(--sunk);color:var(--ink);font:inherit;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.zr .vb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.zr .vb.fs{font-family:Georgia,serif;font-size:17px}
.zr .vb .u{font-family:var(--urdu);font-size:17px;line-height:1;position:relative;top:-2px;font-weight:400}
.zr .back{padding:0 8px}
.zr .back svg{width:22px;height:22px}
.zbody{padding:10px 0 calc(150px + env(safe-area-inset-bottom))}
.zpages{max-width:680px;margin:0 auto}
.zpg{position:relative;margin:0 auto 10px;background:#fff}
.zpg img{display:block;width:100%;height:auto;aspect-ratio:970/1515;background:#fff}
.zpg .pn{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:700;border-radius:8px;padding:2px 7px;direction:ltr}
.zpg .hl{position:absolute;left:3%;right:3%;border-radius:6px;background:rgba(255,100,0,.16);box-shadow:inset 4px 0 0 var(--acc),inset -4px 0 0 var(--acc);pointer-events:none;transform:translateY(-50%);transition:top .45s cubic-bezier(.2,.8,.2,1),height .3s ease}
[data-theme=dark] .zpg img{filter:brightness(.92)}

.ztx{max-width:760px;margin:0 auto;padding:0 12px;--fs:1}
.ztx .th{font-family:var(--urdu);direction:rtl;text-align:center;font-weight:700;color:var(--acc-text);font-size:calc(21px * var(--fs));line-height:2.1;margin:22px 8px 2px}
.ztx .the{text-align:center;font-weight:700;color:var(--acc-text);font-size:calc(15px * var(--fs));line-height:1.4;margin:0 8px 10px;direction:ltr}
.ztx .tp{font-family:var(--urdu);direction:rtl;text-align:right;color:var(--muted);font-size:calc(15.5px * var(--fs));line-height:2.3;padding:4px 10px 12px}
.ztx .tp .e{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;direction:ltr;text-align:left;font-size:calc(14.5px * var(--fs));line-height:1.5}
.ztx .tc{position:relative;border-bottom:1px solid var(--line);padding:20px 10px;transition:background .35s ease,box-shadow .35s ease}
.ztx .tc[data-k]{cursor:pointer}
.ztx .tc .ar{font-family:var(--arab);direction:rtl;text-align:center;font-size:calc(27px * var(--fs));line-height:1.95;color:var(--ink)}
.ztx .tc .ur{font-family:var(--urdu);direction:rtl;text-align:center;font-size:calc(18px * var(--fs));line-height:2.35;color:var(--muted);margin-top:6px}
.ztx .tc .en{direction:ltr;text-align:center;font-size:calc(15.5px * var(--fs));line-height:1.55;color:var(--muted);margin-top:6px}
.ztx .tc.on{background:var(--acc-soft);border-radius:16px;border-bottom-color:transparent;box-shadow:inset 4px 0 0 var(--acc),inset -4px 0 0 var(--acc)}
.ztx .tc.on .ur,.ztx .tc.on .en{color:var(--ink)}
.ztx .tc.nr .ar{opacity:.55}
.ztx .pgn{position:absolute;top:6px;left:10px;font-size:11px;font-weight:600;color:var(--muted);opacity:.7;direction:ltr}
.zr[data-tr=en] .ztx .tc .ur,.zr[data-tr=ur] .ztx .tc .en{display:none}
.zr[data-tr=en] .ztx .tp .u,.zr[data-tr=ur] .ztx .tp .e{display:none}
.zr[data-tr=ur] .ztx .the{display:none}
.ztx .znote{font-size:13.5px;color:var(--muted);text-align:center;margin:18px 10px 0;line-height:1.5}
.ztx .zload{padding:40px 0;text-align:center;color:var(--muted)}
.ztx .src{font-size:12.5px;color:var(--muted);text-align:center;margin:20px 10px 0;direction:ltr;word-break:break-word}

.zap{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--card);border-top:1.5px solid var(--edge);box-shadow:0 -6px 20px rgba(0,0,0,.12);padding:8px 12px calc(8px + env(safe-area-inset-bottom));transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
.zap.off{transform:translateY(110%);opacity:0;pointer-events:none}
.zap>div{max-width:680px;margin:0 auto}
.zap .tr{display:flex;gap:6px;overflow-x:auto;margin-bottom:6px;scrollbar-width:none}
.zap .tr::-webkit-scrollbar{display:none}
.zap .tr button{flex:none;border:1.5px solid var(--edge);background:var(--card);color:var(--muted);border-radius:999px;padding:4px 11px;font:inherit;font-size:13px;font-weight:700}
.zap .tr button.on{border-color:var(--acc);color:var(--ink);background:var(--acc-soft)}
.zap .r1{display:flex;align-items:center;gap:8px}
.zap .pp{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--acc);color:#fff;display:grid;place-items:center}
.zap .pp svg{width:20px;height:20px;fill:currentColor}
.zap .meta{flex:1;min-width:0;line-height:1.25}
.zap .meta b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[lang=ur] .zap .meta b{line-height:1.9;font-size:14px}
.zap .meta span{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.zap .sb{flex:none;min-width:44px;height:40px;border-radius:10px;border:1.5px solid var(--edge);background:var(--card);color:var(--ink);font:inherit;font-weight:700;font-size:13px;padding:0 6px}
.zap .hide{flex:none;width:34px;height:40px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center}
.zap .hide svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2}
.zap input[type=range]{display:block;width:100%;accent-color:var(--acc);height:22px;margin:4px 0 0}
.zap .spd{direction:ltr;display:flex;align-items:center;gap:10px}
.zap .spd .lb{flex:none;font-size:12.5px;font-weight:700;color:var(--muted)}
.zap .spd .sw{flex:1}
.zap .spd input{height:20px;margin:0}
.zap .spd .tk{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;color:var(--muted);margin:-2px 2px 0;direction:ltr}
.zap .spd .tk span.on{color:var(--acc-text)}
.zap .st{font-size:11.5px;color:var(--muted);text-align:center}.zap .st.ok{color:var(--ok)}.zap .st:empty{display:none}
.zfab{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:44;width:54px;height:54px;border-radius:50%;border:0;background:var(--acc);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25);display:grid;place-items:center;transition:transform .25s,opacity .25s}
.zfab.off{transform:scale(.6);opacity:0;pointer-events:none}
.zfab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}
.zfab.playing:after{content:"";position:absolute;right:3px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--ok);border:2px solid var(--card)}
.zoff{margin:4px 0 10px}
@media (prefers-reduced-motion:reduce){.zpg .hl,.zap,.zfab{transition:none}}

/* 22 Oct 2026: reader and player made the same as the Iraq Ziarat app (owner: "all three the same") */
.zr .zt{flex-wrap:wrap;row-gap:6px;padding:calc(env(safe-area-inset-top) + 6px) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
.zr .zt .backbtn{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 10px 0 4px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:700;font-size:16px;margin-inline-end:auto}
.zr .zt .backbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2}
[dir=rtl] .zr .zt .backbtn svg{transform:scaleX(-1)}
.zr .zt .ttl{order:10;flex:1 0 100%;font-size:16px;line-height:1.3;padding:0 2px;-webkit-line-clamp:2}
html[lang=ur] .zr .zt .ttl{line-height:1.75;font-size:17px}
.zr .zt .tgl{border:0;background:var(--sunk)}
.zr .vb{min-height:44px;min-width:44px}
.zap #zBk,.zap #zFw{display:none}
.zap .pp{width:44px;height:44px}
.zap .meta b{font-size:15px}
.zfab{left:14px;right:auto;width:52px;height:52px}
[dir=rtl] .zfab{left:auto;right:14px}
.zfab .ring{position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(var(--acc) calc(var(--p,0)*1%),transparent 0);-webkit-mask:radial-gradient(circle,transparent 27px,#000 28px);mask:radial-gradient(circle,transparent 27px,#000 28px);opacity:.55;pointer-events:none}
.zfab.playing:after{right:2px;top:2px;background:#1f9d55}

/* 22 Oct 2026: Emergency and Show-to-driver sheets */
.hp-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.hp-b{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:16px;border:1.5px solid var(--edge);background:var(--card);font-weight:800;font-size:15.5px;color:var(--ink);box-shadow:var(--shadow)}
.hp-b.em{border-color:#d93025;color:#d93025}
[data-theme=dark] .hp-b.em{color:#ff6b5e;border-color:#ff6b5e}
.hp-b svg.i{width:22px;height:22px}
.hp .zbody{padding:12px 0 calc(40px + env(safe-area-inset-bottom))}
.hp-in{max-width:680px;margin:0 auto;padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left))}
.hp-big{text-align:center}
.hp-k{font-weight:700;color:var(--muted)}
.hp-911{display:block;font-size:64px;font-weight:900;color:#d93025;text-decoration:none;line-height:1.1;margin:4px 0}
[data-theme=dark] .hp-911{color:#ff6b5e}
.hp-s{font-size:14px;color:var(--muted)}
.hp-n{font-size:20px;font-weight:800;margin:2px 0}
.hp-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.hp-btns .btn{text-decoration:none;color:inherit;min-height:46px;justify-content:center;flex:1}
.hp-btns .btn.pri{color:var(--acc-ink)}
.hp-list{padding:4px 0}
.hp-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.hp-row:first-child{border-top:0}
.hp-num{flex:none;min-width:64px;font-size:20px;font-weight:900;color:var(--acc-text);font-variant-numeric:tabular-nums}
.hp-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.hp-txt b{font-size:15.5px}
.hp-txt small{font-size:13px;color:var(--muted)}
.hp-row svg.i{color:var(--acc-text)}
.hp-ed summary{cursor:pointer;font-weight:700;color:var(--acc-text);margin-top:6px}
.hp-ed input{display:block;width:100%;margin:8px 0;padding:12px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:16px}
.hp-pl{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;text-align:start;font:inherit;color:inherit}
.hp-pl b{font-size:16px}
.hp-pl span{font-family:var(--arab);font-size:20px;color:var(--acc-text);text-align:right}
.hp-drv{text-align:center;padding-top:18px}
.hp-ask{font-family:var(--arab);font-size:26px;color:var(--muted)}
.hp-dest{font-family:var(--arab);font-size:46px;line-height:1.5;font-weight:700;margin:14px 0;color:var(--ink)}
.hp-addr{font-family:var(--arab);font-size:26px;line-height:1.6}
.hp-en{font-size:17px;color:var(--muted);margin:10px 0}
.hp-ask2{font-family:var(--arab);font-size:24px;margin:8px 0 16px}
/* per-group offline save */
.zgrp{display:flex;align-items:center;gap:10px}
.zgrp>span{flex:1}
.zgs{flex:none;display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--edge);background:var(--card);color:var(--ink);border-radius:999px;padding:4px 11px;font:inherit;font-size:13px;font-weight:700}
.zgs svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2}
.zgs.ok{border-color:var(--ok);color:var(--ok)}
.zrow{display:flex;align-items:center;gap:10px;width:100%;text-align:start;background:var(--card);border:1.5px solid var(--edge);border-radius:16px;padding:12px 14px;margin:0 0 8px;font:inherit;color:inherit}
.zrow>span:first-child{flex:1;min-width:0;display:flex;flex-direction:column}
.zrow b{font-size:16px;line-height:1.3}
.zrow small{font-size:13px;color:var(--muted)}
html[lang=ur] .zrow b{line-height:1.9}
/* prayer times / weather / schedule cards (same as the Iraq Ziarat app) */
.between{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.muted{color:var(--muted)} .small{font-size:15px}
.between>.muted.small:last-child{white-space:nowrap;flex:none}
.wxrow{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.wxrow>div{background:var(--sunk);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column;min-width:70px}
.wxrow span{font-size:12px;color:var(--muted)}
.wxrow b{font-size:22px}
.wxrow .wxnote{flex:1;background:none;font-size:15px;padding:4px 0;color:var(--ink)}
.ptgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:12px;text-align:center}
.ptgrid div{background:var(--sunk);border-radius:12px;padding:10px 0;min-width:0}
.ptgrid div span{display:block;font-size:11.5px;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.ptgrid div b{display:block;font-size:16px;margin-top:2px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ptgrid div.soft b{color:var(--muted);font-weight:600}
[dir=rtl] .ptgrid div span{font-size:13px;line-height:1.45;white-space:normal;min-height:2.9em;display:flex;align-items:center;justify-content:center}
[dir=rtl] .ptgrid div b{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.sched{border-style:dashed}
.sch{margin-top:8px}
.schr{display:flex;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.schr:first-child{border-top:0}
.schr .t{flex:none;min-width:56px;font-weight:800;color:var(--acc-text);font-variant-numeric:tabular-nums}
/* ---- 22 Oct 2026: the pilgrim's own trip (Iraq-app style), feedback ---- */
.zr.hp{z-index:46}
.tp-rs{display:inline-flex;align-items:center;gap:6px}
.tp-wrap{margin-bottom:6px}
.card.tp{border:1.5px solid var(--acc)}
.tp-name{font-size:24px;font-weight:800;line-height:1.3;margin:2px 0 4px}
.tp-route{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 2px}
.tp-ar{opacity:.6}
.tp-st{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.tp-big{font-size:28px;font-weight:800;line-height:1.3;margin:2px 0 4px}
.tp-ul{margin:6px 0 4px;padding-inline-start:20px}
.tp-ul li{margin:4px 0;line-height:1.5}
.tp-ul li.s{font-weight:700}
.tp-h{font-weight:800;margin:10px 0 2px}
.tp-m{display:inline-flex;vertical-align:middle;color:var(--acc)}
.tp-m .i{width:16px;height:16px}
.tp-dr{margin-top:4px}
.tp-arn{font-family:"Noto Naskh Arabic","Scheherazade New",serif;font-size:21px;font-weight:700;margin:2px 0}
.tp-ho .hp-btns,.tp .hp-btns{margin-top:10px}
.tp-seg{display:flex;flex-direction:column;margin-top:6px}
.tp-all summary{font-weight:800;cursor:pointer}
.tp-day{padding:10px 0;border-top:1px solid var(--line)}
.tp-day:first-of-type{margin-top:8px}
.tp-dh{font-size:14px;opacity:.75}
.tp-foot{text-align:center;margin:6px 0 4px}
.lnk{background:none;border:0;color:inherit;opacity:.6;text-decoration:underline;font:inherit;font-size:14px;cursor:pointer;padding:8px}
.tp-go{display:flex;gap:8px}
.tp-go input{flex:1;min-width:0;font:inherit;font-size:18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:10px 12px;border-radius:12px;border:1.5px solid var(--edge);background:var(--bg);color:var(--ink)}
.schr .t.nt{opacity:.5;text-align:center}
.zfb{text-align:center;margin:22px 0 90px}
.zfb .btn{font-size:14.5px}
.fb-k{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.fb-k .btn.on{background:var(--acc);color:#fff;border-color:var(--acc)}
#fbT{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--edge);background:var(--bg);color:var(--ink);resize:vertical}
.fb-m{margin-top:10px;font-weight:700}
.fbc{text-align:center}