/* PF Mushaf Reader - v1.3.3 */
:root{--pfm-bg:#f7f1e3;--pfm-panel:#fff;--pfm-accent:#caa76a;--pfm-tile:72px;--pfm-inset-adjust:0px}

.pfm-root{font-family:Tajawal, system-ui, -apple-system, Segoe UI, Arial, sans-serif; color:#1f2937; direction:rtl}
.pfm-root *{box-sizing:border-box}

.pfm-fullscreen{position:fixed; inset:0; z-index:999999; background:var(--pfm-bg); display:flex; flex-direction:column}
.pfm-inline{background:var(--pfm-bg); border-radius:16px; padding:12px}

.pfm-topbar{padding:14px 18px 10px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.pfm-top-left,.pfm-top-right{display:flex; gap:10px; align-items:center}
.pfm-top-center{text-align:center; line-height:1.25; flex:1}
.pfm-sura{font-size:18px; font-weight:900; color:var(--pfm-accent)}
.pfm-sura-btn{background:transparent; border:0; padding:0; cursor:pointer; display:inline-flex; align-items:center; gap:8px}
.pfm-sura-btn:after{content:""; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:7px solid currentColor; opacity:.45; transform:translateY(2px)}
.pfm-meta{font-size:14px; opacity:.92; display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap}
.pfm-meta span{white-space:nowrap}
.pfm-dot{opacity:.55}
.pfm-sep{opacity:.55}

.pfm-iconbtn{width:46px; height:46px; border-radius:999px; border:0; background:rgba(255,255,255,.78); box-shadow:0 12px 24px rgba(0,0,0,.06); cursor:pointer; display:grid; place-items:center; color:#111827}
.pfm-iconbtn:active{transform:translateY(1px)}
.pfm-iconbtn-sm{width:38px; height:38px; font-size:18px}
.pfm-ico{width:20px; height:20px; display:block}
.pfm-is-bookmarked{background:rgba(202,167,106,.18); box-shadow:0 14px 28px rgba(202,167,106,.18)}

.pfm-stage{flex:1; display:flex; align-items:center; justify-content:center; padding:8px 8px 4px; overflow:hidden}

/* NOTE: final width/height are set by JS to "fill height" while keeping aspect ratio */
.pfm-frame{position:relative; width:min(920px, 96vw); height:min(74vh, 980px); max-height:calc(100vh - 180px)}

/* No outer frame: show only the real mushaf page (it already contains its own border) */
.pfm-frame--none{
  width:min(1040px, 98vw);
  height:min(82vh, 1200px);
  max-height:calc(100vh - 170px);
}
.pfm-frame--none .pfm-border,
.pfm-frame--none .pfm-corner{display:none !important}
.pfm-frame--none .pfm-pagewrap{
  inset:0 !important;
  border-radius:0 !important;
}

/* Borders */
.pfm-border,.pfm-corner{position:absolute; pointer-events:none; background-repeat:repeat; background-size:var(--pfm-tile) var(--pfm-tile); image-rendering:auto}

.pfm-top{top:0; left:var(--pfm-tile); right:var(--pfm-tile); height:var(--pfm-tile); background-image:var(--pfm-top); background-repeat:repeat-x}
.pfm-bottom{bottom:0; left:var(--pfm-tile); right:var(--pfm-tile); height:var(--pfm-tile); background-image:var(--pfm-bottom); background-repeat:repeat-x}
.pfm-left{left:0; top:var(--pfm-tile); bottom:var(--pfm-tile); width:var(--pfm-tile); background-image:var(--pfm-left); background-repeat:repeat-y}
.pfm-right{right:0; top:var(--pfm-tile); bottom:var(--pfm-tile); width:var(--pfm-tile); background-image:var(--pfm-right); background-repeat:repeat-y}

.pfm-corner{width:var(--pfm-tile); height:var(--pfm-tile); background-repeat:no-repeat; background-size:var(--pfm-tile) var(--pfm-tile)}
.pfm-tl{top:0; left:0; background-image:var(--pfm-tl)}
.pfm-tr{top:0; right:0; background-image:var(--pfm-tr)}
.pfm-bl{bottom:0; left:0; background-image:var(--pfm-bl)}
.pfm-br{bottom:0; right:0; background-image:var(--pfm-br)}

/* Content */
.pfm-pagewrap{position:absolute; inset:calc(var(--pfm-tile) + var(--pfm-inset-adjust)); border-radius:18px; background:transparent; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:pan-y; user-select:none}

.pfm-page-stack{position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center}

/* Important: keep page image contained even if theme overrides img rules */
.pfm-root img#pfm-page-img,
.pfm-root img#pfm-page-img2{max-width:100% !important; max-height:100% !important; width:auto !important; height:auto !important; display:block !important}

.pfm-page{filter:drop-shadow(0 18px 36px rgba(0,0,0,.10)); will-change:transform, opacity; transition:transform .26s ease, opacity .26s ease}
.pfm-page--b{position:absolute; inset:0; margin:auto; opacity:0}

/* Swipe/tap zones */
.pfm-tapzone{position:absolute; top:0; bottom:0; width:46%; border:0; background:transparent; cursor:pointer}
.pfm-tapzone-prev{right:0}
.pfm-tapzone-next{left:0}

/* Bookmark ribbon mark */
.pfm-bookmark-mark{position:absolute; top:16px; right:14px; width:10px; height:calc(100% - 32px); background:rgba(220,38,38,.92); border-radius:999px; box-shadow:0 14px 26px rgba(0,0,0,.12); opacity:0; transform:translateX(8px); transition:opacity .18s ease, transform .18s ease}
.pfm-bookmark-mark:before{content:""; position:absolute; top:-8px; right:0; width:10px; height:14px; background:rgba(220,38,38,.92); border-radius:999px 999px 2px 2px}
.pfm-bookmark-mark.is-on{opacity:1; transform:translateX(0)}

.pfm-loading{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:900; color:#6b7280; background:rgba(255,255,255,.55); backdrop-filter:blur(3px); border-radius:14px; opacity:0; pointer-events:none; transition:opacity .18s ease}
.pfm-loading.is-on{opacity:1; pointer-events:auto}

.pfm-pill{min-width:54px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:var(--pfm-accent); color:#fff; font-weight:900; border:0; cursor:pointer}
.pfm-pill-sm{min-width:auto; height:40px; padding:0 14px; border-radius:999px; font-weight:900}
.pfm-pill-ghost{background:rgba(0,0,0,.06); color:#111827}
.pfm-pill[data-pfm-action="close"]{background:rgba(202,167,106,.86)}

/* Bottom navigation */
.pfm-nav{padding:10px 14px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.pfm-navbtn{height:48px; padding:0 14px; border-radius:999px; border:0; cursor:pointer; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.78); box-shadow:0 12px 24px rgba(0,0,0,.06); color:#111827; font-weight:900}
.pfm-navbtn-primary{background:var(--pfm-accent); color:#fff}
.pfm-navtxt{font-size:14px}
.pfm-pagepill{height:48px; padding:0 16px; border-radius:999px; border:1px solid rgba(0,0,0,.06); background:rgba(255,255,255,.72); cursor:pointer; display:flex; align-items:center; gap:8px; box-shadow:0 12px 24px rgba(0,0,0,.05)}
.pfm-pagepill-label{opacity:.7; font-weight:900}
.pfm-pagepill-num{min-width:38px; height:34px; border-radius:999px; display:grid; place-items:center; background:rgba(0,0,0,.06); font-weight:900}

/* Drawer overlay */
.pfm-drawer{position:fixed; inset:0; z-index:1000001; pointer-events:none}
.pfm-drawer.is-on{pointer-events:auto}
.pfm-drawer-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.35); opacity:0; transition:opacity .18s ease}
.pfm-drawer.is-on .pfm-drawer-backdrop{opacity:1}

.pfm-drawer-panel{position:absolute; top:0; bottom:0; right:0; width:min(380px, 92vw); background:#fff; box-shadow:-18px 0 50px rgba(0,0,0,.18); transform:translateX(105%); transition:transform .22s ease; display:flex; flex-direction:column}
.pfm-drawer.is-on .pfm-drawer-panel{transform:translateX(0)}

.pfm-drawer-head{padding:14px 14px 10px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(0,0,0,.06)}
.pfm-drawer-title{margin:0; font-size:16px; font-weight:900}

.pfm-drawer-body{padding:14px; overflow:auto; display:flex; flex-direction:column; gap:12px}
.pfm-section-title{font-size:13px; font-weight:900; margin-bottom:8px; color:#111827}

.pfm-goto label{display:block; font-size:13px; font-weight:900; margin-bottom:8px}
.pfm-goto-row{display:flex; gap:10px; align-items:center}
.pfm-goto-row input{flex:1; height:44px; border-radius:12px; border:1px solid rgba(0,0,0,.10); padding:0 12px; font-weight:800; outline:none}

.pfm-search{width:100%; height:44px; border-radius:12px; border:1px solid rgba(0,0,0,.10); padding:0 12px; font-weight:800; outline:none; margin-bottom:10px}

.pfm-surah-list{display:flex; flex-direction:column; gap:8px}
.pfm-surah-item{width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-radius:14px; background:#fff; border:1px solid rgba(0,0,0,.06); cursor:pointer}
.pfm-surah-item:hover{background:rgba(247,241,227,.42)}
.pfm-surah-item.is-active{border-color:rgba(202,167,106,.65); box-shadow:0 10px 18px rgba(202,167,106,.15)}
.pfm-surah-meta{opacity:.7; font-weight:900}

.pfm-row{width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-radius:14px; background:rgba(247,241,227,.55); border:1px solid rgba(202,167,106,.26); cursor:pointer}
.pfm-row-meta{font-weight:900; color:#7a5a22}

.pfm-notes-list{display:flex; flex-direction:column; gap:8px}
.pfm-note-item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; border-radius:12px; background:#fff; border:1px solid rgba(0,0,0,.06); cursor:pointer}
.pfm-note-item small{opacity:.75}

/* Notes modal overlay */
.pfm-modal{position:fixed; inset:0; z-index:1000003; pointer-events:none}
.pfm-modal.is-on{pointer-events:auto}
.pfm-modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .18s ease}
.pfm-modal.is-on .pfm-modal-backdrop{opacity:1}

.pfm-modal-panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.98); width:min(520px, 94vw); background:#fff; border-radius:16px; box-shadow:0 24px 80px rgba(0,0,0,.25); opacity:0; transition:opacity .18s ease, transform .18s ease}
.pfm-modal.is-on .pfm-modal-panel{opacity:1; transform:translate(-50%,-50%) scale(1)}

.pfm-modal-head{padding:14px 14px 10px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(0,0,0,.06)}
.pfm-modal-title{margin:0; font-size:16px; font-weight:900}

.pfm-modal-body{padding:14px}
#pfm-notes-text{width:100%; min-height:140px; resize:vertical; border-radius:14px; border:1px solid rgba(0,0,0,.10); padding:12px; font-weight:700; outline:none}

.pfm-modal-actions{display:flex; gap:10px; padding-top:12px}

/* Toast */
.pfm-toast{position:fixed; left:50%; transform:translateX(-50%); bottom:24px; background:#111827; color:#fff; padding:10px 14px; border-radius:12px; font-weight:900; opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:1000005}
.pfm-toast.is-on{opacity:1}

@media (max-width: 640px){
  .pfm-iconbtn{width:42px; height:42px}
  .pfm-iconbtn-sm{width:36px; height:36px}
  .pfm-sura{font-size:16px}
  .pfm-topbar{padding:12px 12px 8px}
  .pfm-nav{padding:10px 12px 14px}
  .pfm-navtxt{display:none}
}

/* ===============================
   Hotfix v1.3.1
   - Prevent theme styles from turning tap zones into visible panels
   - Ensure icon/buttons are perfectly centered inside their pills/circles
   =============================== */

/* Tap zones must ALWAYS be invisible (some themes style <button> globally) */
.pfm-tapzone{
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  width:46% !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none !important;
  display:block !important;
  z-index:6 !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}
.pfm-tapzone::before,
.pfm-tapzone::after{
  content:none !important;
  display:none !important;
}

/* Center icons/text inside controls even if theme injects paddings/line-heights */
.pfm-iconbtn,
.pfm-navbtn,
.pfm-pill,
.pfm-sura-btn{
  -webkit-appearance:none !important;
  appearance:none !important;
  text-decoration:none !important;
  text-transform:none !important;
  letter-spacing:normal !important;
}

.pfm-iconbtn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  line-height:0 !important;
}
.pfm-iconbtn::before,
.pfm-iconbtn::after{
  content:none !important;
  display:none !important;
}

.pfm-pill{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 14px !important;
  line-height:1 !important;
}
.pfm-navbtn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
}
.pfm-navbtn::before,
.pfm-navbtn::after,
.pfm-pill::before,
.pfm-pill::after,
.pfm-sura-btn::before,
.pfm-sura-btn::after{
  content:none !important;
  display:none !important;
}

.pfm-ico{display:block !important; pointer-events:none !important;}