/* reader.css — यह फ़ाइल ../style.css के बाद लोड होती है, इसलिए वहाँ के सभी
   CSS वेरिएबल (--cream, --green-deep, --orange, --font-display, वगैरह)
   यहाँ भी सीधे इस्तेमाल हो सकते हैं — डिज़ाइन बाक़ी साइट जैसा ही रहता है। */

.reader-body{background:var(--cream);}

/* ===== पेज हेडर (किताब का नाम) ===== */
.reader-page-header{
  padding:36px 0 20px 0;
  text-align:center;
  background:linear-gradient(180deg, var(--sage) 0%, var(--cream) 100%);
  border-bottom:1px solid var(--sage-line);
}
.reader-page-header h1{font-size:1.9rem;margin-bottom:6px;}
.reader-subtitle{color:var(--ink-soft);font-size:1rem;margin-bottom:6px;}
.reader-author{font-size:0.9rem;color:var(--brass);font-weight:600;margin:0;}

/* ===== शेल लेआउट ===== */
.reader-shell{
  position:relative;
  display:flex;
  max-width:1180px;
  margin:0 auto;
  padding:20px 16px 10px 16px;
  gap:20px;
}
.reader-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;}

/* ===== TOC पैनल ===== */
.toc-panel{
  position:fixed;
  top:0; left:0; bottom:0;
  width:320px;
  max-width:85vw;
  background:var(--white);
  border-right:1px solid var(--sage-line);
  box-shadow:20px 0 40px rgba(11,27,54,0.15);
  transform:translateX(-105%);
  transition:transform 0.25s ease;
  z-index:300;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
.toc-panel.open{transform:translateX(0);}
.toc-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--sage-line);
  position:sticky;top:0;background:var(--white);
}
.toc-panel-head h2{font-size:1.15rem;margin:0;}
.toc-panel-head button{background:none;border:none;font-size:1.3rem;color:var(--ink-soft);cursor:pointer;}
.toc-list{list-style:none;margin:0;padding:8px 0;}
.toc-list li{border-bottom:1px dashed var(--sage-line);}
.toc-list button{
  width:100%;text-align:right;background:none;border:none;
  padding:14px 20px;font-family:var(--font-body);font-size:0.92rem;
  color:var(--ink);cursor:pointer;line-height:1.5;
  display:flex;justify-content:space-between;gap:10px;
  direction:rtl;
}
.toc-list button:hover, .toc-list button.active{background:var(--sage);color:var(--green-deep-dark);font-weight:600;}
.toc-list .toc-page-no{color:var(--brass);font-weight:600;flex-shrink:0;direction:ltr;}
.toc-backdrop{
  position:fixed;inset:0;background:rgba(11,27,54,0.45);
  z-index:290;display:none;
}
.toc-backdrop.open{display:block;}

/* ===== Resume बैनर ===== */
.resume-banner{
  background:var(--peach);border:1px solid var(--peach-line);border-radius:10px;
  padding:14px 18px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:0.92rem;color:var(--ink);
}
.resume-banner.hidden{display:none;}
.resume-actions{display:flex;gap:10px;flex-wrap:wrap;}
.resume-actions .btn{padding:9px 16px;font-size:0.88rem;}

/* ===== टूलबार ===== */
.reader-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;background:var(--white);border:1px solid var(--sage-line);
  border-radius:10px;padding:10px 14px;
}
.tb-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.tb-btn{
  background:var(--cream-2);border:1px solid var(--sage-line);border-radius:7px;
  padding:8px 12px;font-family:var(--font-body);font-size:0.86rem;font-weight:600;
  color:var(--ink);cursor:pointer;white-space:nowrap;
}
.tb-btn:hover{background:var(--sage);}
.tb-btn.tb-icon{padding:8px 11px;font-size:1rem;line-height:1;}
.page-indicator{display:flex;align-items:center;gap:5px;font-size:0.9rem;color:var(--ink-soft);}
#pageInput{
  width:52px;text-align:center;padding:7px 4px;border:1.5px solid var(--sage-line);
  border-radius:6px;font-family:var(--font-body);font-size:0.9rem;background:var(--cream-2);
}

/* ===== पेज व्यूपोर्ट ===== */
.page-viewport{
  position:relative;
  background:var(--sage);
  border-radius:var(--radius);
  min-height:60vh;
  display:flex;align-items:flex-start;justify-content:center;
  overflow:auto;
  padding:28px 12px;
  user-select:none;
  -webkit-user-select:none;
}
.page-canvas{
  position:relative;
  margin:0 auto;
  transition:transform 0.15s ease;
  transform-origin:top center;
}
.page-canvas img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:4px;
  box-shadow:0 14px 34px rgba(11,27,54,0.22);
  background:var(--white);
  -webkit-user-drag:none;
  user-drag:none;
  pointer-events:none; /* drag/select रोकने के लिए; क्लिक-नेविगेशन अलग बटनों से होता है */
}
.page-canvas.fit-page img{max-height:78vh;width:auto;max-width:100%;}
.page-canvas.fit-width img{width:100%;max-width:720px;}

.page-loading{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:0.9rem;color:var(--ink-soft);display:none;
}
.page-loading.show{display:block;}

.page-nav-zone{
  position:absolute;top:0;bottom:0;width:14%;
  background:transparent;border:none;cursor:pointer;z-index:5;
  opacity:0;
}
.page-nav-zone.left{left:0;}
.page-nav-zone.right{right:0;}

/* ===== प्रगति बार ===== */
.progress-wrap{padding:0 4px;}
.progress-track{
  height:6px;background:var(--sage-line);border-radius:99px;overflow:hidden;
}
.progress-fill{height:100%;background:var(--orange);width:0%;transition:width 0.2s ease;}
.progress-text{font-size:0.8rem;color:var(--ink-soft);margin-top:6px;text-align:center;}

/* ===== फ़ुलस्क्रीन ===== */
.reader-shell:fullscreen, .reader-main:fullscreen{background:var(--cream);padding:16px;}
.reader-shell:fullscreen .page-viewport{min-height:90vh;}

/* ===== फ़ुटनोट ===== */
.reader-footnote{padding:26px 16px 40px 16px;text-align:center;}
.copyright-note{font-size:0.82rem;color:var(--ink-soft);max-width:70ch;margin:0 auto 8px auto;line-height:1.7;}
.no-download-note{font-size:0.78rem;color:var(--brass);font-weight:600;margin:0;}

/* ===== कॉपी/डाउनलोड डिटरेंट्स ===== */
@media print{
  .reader-shell, .reader-toolbar, .page-viewport, .reader-page-header,
  .toc-panel, .resume-banner, .progress-wrap{
    display:none !important;
  }
  body.reader-body::before{
    content:"इस पुस्तक को प्रिंट करने की अनुमति नहीं है — कृपया Bhakarram.com पर ऑनलाइन पढ़ें।";
    display:block;padding:40px;font-size:1.1rem;text-align:center;
  }
}

/* ===== रिस्पॉन्सिव ===== */
@media (max-width:900px){
  .reader-shell{padding:14px 10px 6px 10px;}
  .reader-toolbar{justify-content:center;}
  .tb-group{justify-content:center;}
  .page-viewport{padding:16px 6px;min-height:65vh;}
  .reader-page-header h1{font-size:1.5rem;}
}
@media (max-width:520px){
  .tb-btn{padding:7px 9px;font-size:0.8rem;}
  #goPageBtn{display:none;} /* मोबाइल पर जगह बचाने के लिए — Enter दबाकर भी जा सकते हैं */
  .reader-toolbar{gap:8px;}
}