/* ==========================================================================
   KL Reader v3 — Chapter-per-page styles
   ========================================================================== */

/* ---- Themes ---- */
.klrp-reader--dark   { --reader-bg:#111113; --reader-text:#d8d8d4; --reader-heading:#f5f5f0; --reader-link:#e8a838; --reader-muted:#777; --reader-surface:#1a1a1e; --reader-border:rgba(255,255,255,0.07); }
.klrp-reader--sepia  { --reader-bg:#f4ecd8; --reader-text:#433422; --reader-heading:#2c1f10; --reader-link:#8b6914; --reader-muted:#7a6b50; --reader-surface:#ede4d0; --reader-border:rgba(0,0,0,0.08); }
.klrp-reader--light  { --reader-bg:#fafafa; --reader-text:#2d2d2d; --reader-heading:#111; --reader-link:#b87a15; --reader-muted:#888; --reader-surface:#f0f0f0; --reader-border:rgba(0,0,0,0.08); }

.klrp-reader { background:var(--reader-bg); color:var(--reader-text); min-height:100vh; padding-bottom:60px; transition:background .3s,color .3s; }
.klrp-reader a { color:var(--reader-link); }

/* ---- Badge ---- */
.klrp-badge-free { background:#00a32a; color:#111; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:700; }

/* ---- Book header (overview page) ---- */
.klrp-reader__header { text-align:center; padding:50px 0 32px; max-width:680px; margin:0 auto; }
.klrp-reader__title { font-size:clamp(1.5rem,4vw,2.4rem); font-weight:800; color:var(--reader-heading); line-height:1.2; margin:0 0 8px; }
.klrp-reader__author { font-size:1.1rem; color:var(--reader-muted); margin:0 0 12px; }
.klrp-reader__meta { font-size:.82rem; color:var(--reader-muted); display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.klrp-reader__shelf-actions { display:flex; gap:8px; justify-content:center; }

/* ---- Chapter header (reader page) ---- */
.klrp-reader__chapter-header { text-align:center; padding:40px 0 32px; max-width:680px; margin:0 auto; border-bottom:1px solid var(--reader-border); margin-bottom:32px; }
.klrp-reader__chapter-label { font-size:12px; color:var(--reader-link); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.klrp-reader__chapter-title { font-size:clamp(1.3rem,3vw,2rem); font-weight:800; color:var(--reader-heading); line-height:1.25; margin:8px 0; }
.klrp-reader__chapter-meta { font-size:.82rem; color:var(--reader-muted); }

/* ---- Content area ---- */
.klrp-reader__content { font-family:'Georgia','Times New Roman',serif; line-height:1.8; max-width:680px; margin:0 auto; }
.klrp-reader__content p { margin-bottom:1.2em; text-align:justify; hyphens:auto; }
.klrp-reader__content h2,.klrp-reader__content h3 { color:var(--reader-heading); margin:2em 0 .8em; font-family:var(--kl-font-display,-apple-system,sans-serif); }
.klrp-reader__content h2 { font-size:1.5em; }
.klrp-reader__content h3 { font-size:1.2em; }
.klrp-reader__content blockquote { border-left:3px solid var(--reader-link); padding:4px 0 4px 20px; margin:1.5em 0; font-style:italic; color:var(--reader-muted); }
.klrp-reader__content img { max-width:100%; height:auto; border-radius:8px; margin:1em 0; }
.klrp-reader__content hr { border:none; border-top:1px solid var(--reader-border); margin:2em 0; }

/* ---- CTA ---- */
.klrp-reader__cta { background:var(--reader-surface); border:1px solid var(--reader-border); border-radius:16px; padding:28px; margin:40px auto; text-align:center; max-width:560px; }
.klrp-reader__cta h2 { color:var(--reader-heading); margin:0 0 8px; font-size:1.3em; }
.klrp-reader__cta p { color:var(--reader-muted); max-width:400px; margin:0 auto; font-size:.88em; }

/* ==========================================================================
   Table of Contents
   ========================================================================== */
.klrp-toc { max-width:680px; margin:32px auto; }
.klrp-toc__title { font-size:1.1rem; font-weight:700; color:var(--reader-heading); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--reader-border); }
.klrp-toc__list { display:flex; flex-direction:column; gap:2px; }
.klrp-toc__item { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:10px; text-decoration:none; color:var(--reader-text); transition:background .15s; }
.klrp-toc__item:hover { background:var(--reader-surface); }
.klrp-toc__item.current { background:rgba(232,168,56,.08); border:1px solid rgba(232,168,56,.2); }
.klrp-toc__item.read { opacity:.65; }
.klrp-toc__num { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--reader-surface); font-size:12px; font-weight:700; color:var(--reader-muted); flex-shrink:0; }
.klrp-toc__item.current .klrp-toc__num { background:var(--reader-link); color:#111; }
.klrp-toc__item.read .klrp-toc__num { background:var(--reader-link); color:#111; opacity:.5; }
.klrp-toc__label { flex:1; min-width:0; }
.klrp-toc__ch-title { display:block; font-size:14px; font-weight:600; color:var(--reader-heading); }
.klrp-toc__ch-meta { display:block; font-size:12px; color:var(--reader-muted); margin-top:2px; }
.klrp-toc__check { font-size:14px; flex-shrink:0; }

/* ==========================================================================
   Chapter Navigation (prev/next)
   ========================================================================== */
.klrp-chapter-nav { display:flex; align-items:stretch; justify-content:space-between; gap:12px; max-width:680px; margin:40px auto; padding-top:32px; border-top:1px solid var(--reader-border); }
.klrp-chapter-nav__btn { display:flex; flex-direction:column; gap:4px; padding:16px; border-radius:12px; background:var(--reader-surface); text-decoration:none; transition:border-color .15s; border:1px solid var(--reader-border); flex:1; max-width:48%; }
.klrp-chapter-nav__btn:hover { border-color:var(--reader-link); }
.klrp-chapter-nav__prev { text-align:left; }
.klrp-chapter-nav__next { text-align:right; }
.klrp-chapter-nav__arrow { font-size:13px; font-weight:600; color:var(--reader-link); }
.klrp-chapter-nav__label { font-size:12px; color:var(--reader-muted); line-height:1.3; }
.klrp-chapter-nav__toc { display:flex; align-items:center; padding:0 12px; font-size:12px; color:var(--reader-muted); text-decoration:none; border:1px solid var(--reader-border); border-radius:8px; white-space:nowrap; }
.klrp-chapter-nav__toc:hover { border-color:var(--reader-link); color:var(--reader-link); }
.klrp-chapter-nav__complete { background:rgba(0,163,42,.08); border-color:rgba(0,163,42,.2); }
.klrp-chapter-nav__complete .klrp-chapter-nav__arrow { color:#00a32a; }

/* ==========================================================================
   Progress bar
   ========================================================================== */
.klrp-progress-bar { position:fixed; top:0; left:0; right:0; height:3px; background:rgba(128,128,128,.12); z-index:10010; }
.klrp-progress-bar__fill { height:100%; background:var(--reader-link,#e8a838); border-radius:0 2px 2px 0; transition:width .3s; }

/* ==========================================================================
   Toolbar
   ========================================================================== */
.klrp-toolbar { position:sticky; top:3px; z-index:9998; display:flex; align-items:center; justify-content:space-between; padding:6px 12px; background:var(--reader-surface,#1a1a1e); border-bottom:1px solid var(--reader-border); backdrop-filter:blur(16px); gap:8px; }
.klrp-toolbar__left,.klrp-toolbar__center,.klrp-toolbar__right { display:flex; align-items:center; gap:6px; }
.klrp-toolbar__btn { display:flex; align-items:center; gap:2px; background:none; border:1px solid var(--reader-border); color:var(--reader-text); padding:5px 7px; border-radius:6px; cursor:pointer; font-size:12px; text-decoration:none; transition:border-color .15s; white-space:nowrap; }
.klrp-toolbar__btn:hover,.klrp-toolbar__btn.active { border-color:var(--reader-link); color:var(--reader-link); }
.klrp-toolbar__chapter-name { font-size:13px; font-weight:600; color:var(--reader-heading); }
.klrp-toolbar__progress-text { font-size:13px; font-weight:700; color:var(--reader-link); }
.klrp-toolbar__time-left { font-size:12px; color:var(--reader-muted); }

@media (max-width:640px) {
  .klrp-toolbar__time-left { display:none; }
  .klrp-toolbar { padding:6px 8px; }
  .klrp-chapter-nav { flex-direction:column; }
  .klrp-chapter-nav__btn { max-width:100%; }
  .klrp-chapter-nav__toc { justify-content:center; padding:12px; }
}

/* ==========================================================================
   Theme picker
   ========================================================================== */
.klrp-theme-picker { position:fixed; top:48px; right:20px; z-index:10002; background:var(--reader-surface,#1a1a1e); border:1px solid var(--reader-border); border-radius:12px; padding:14px; box-shadow:0 8px 32px rgba(0,0,0,.4); min-width:200px; }
.klrp-theme-option { display:block; width:100%; padding:8px 14px; border:1px solid transparent; border-radius:6px; cursor:pointer; font-size:13px; text-align:left; margin-bottom:4px; }
.klrp-theme-option.active { border-color:var(--reader-link); }
.klrp-theme-option--dark { background:#111113; color:#f5f5f0; }
.klrp-theme-option--sepia { background:#f4ecd8; color:#433422; }
.klrp-theme-option--light { background:#fff; color:#333; border-color:#ddd; }
.klrp-font-option,.klrp-lh-option { padding:4px 10px; border:1px solid var(--reader-border); border-radius:4px; background:none; color:var(--reader-text); cursor:pointer; font-size:11px; }
.klrp-font-option:hover,.klrp-lh-option:hover,.klrp-font-option.active,.klrp-lh-option.active { border-color:var(--reader-link); color:var(--reader-link); }

/* ==========================================================================
   Cross-sell
   ========================================================================== */
.klrp-crosssell-banner { background:var(--reader-surface); border:1px solid var(--reader-border); border-radius:12px; padding:16px; max-width:680px; margin:32px auto; }
.klrp-crosssell-banner__label { font-size:12px; font-weight:600; color:var(--reader-link); margin-bottom:10px; }
.klrp-crosssell-banner__scroll { display:flex; gap:14px; overflow-x:auto; padding-bottom:4px; }
.klrp-crosssell-item { flex-shrink:0; width:80px; text-align:center; text-decoration:none; }
.klrp-crosssell-item__title { display:block; font-size:11px; color:var(--reader-text); margin-top:6px; line-height:1.3; }
.klrp-crosssell-item__price { display:block; font-size:11px; color:var(--reader-link); font-weight:700; margin-top:2px; }

/* ==========================================================================
   Focus mode
   ========================================================================== */
.klrp-focus-mode .kl-header,.klrp-focus-mode .kl-footer,.klrp-focus-mode .kl-bottom-nav,
.klrp-focus-mode .kl-whatsapp-btn,.klrp-focus-mode .kl-breadcrumbs,
.klrp-focus-mode .klrp-crosssell-banner,.klrp-focus-mode .kl-share-bar,
.klrp-focus-mode .klrp-reader__shelf-actions,.klrp-focus-mode .klrp-reader__cta { display:none !important; }
.klrp-focus-mode .klrp-toolbar { background:transparent; border-bottom-color:transparent; }
.klrp-focus-mode .klrp-toolbar__btn { opacity:.3; }
.klrp-focus-mode .klrp-toolbar:hover .klrp-toolbar__btn { opacity:1; }

/* ==========================================================================
   Toast
   ========================================================================== */
.klrp-toast { position:fixed; bottom:80px; right:20px; z-index:10005; padding:10px 18px; border-radius:10px; font-size:13px; font-weight:500; background:var(--reader-surface,#1a1a1e); color:var(--reader-text,#e0e0dc); border:1px solid var(--reader-border); box-shadow:0 4px 16px rgba(0,0,0,.3); opacity:0; transform:translateY(10px); transition:all .3s; pointer-events:none; }
.klrp-toast.visible { opacity:1; transform:translateY(0); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:768px) {
  .klrp-reader__header { padding:32px 16px 24px; }
  .klrp-reader__chapter-header { padding:24px 16px; }
  .klrp-reader__content { padding:0 16px; }
  .klrp-reader__cta { margin:24px 16px; padding:20px 16px; }
  .klrp-toc { margin:20px 16px; }
  .klrp-chapter-nav { margin:24px 16px; }
  .klrp-theme-picker { right:8px; left:8px; min-width:auto; }
}