/*
Theme Name: Dainik E-Paper
Theme URI: https://example.com/
Author: BD Soft INC
Description: Interactive Bangla newspaper / e-paper WordPress theme with clickable news clipping areas.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dainik-epaper
*/
:root{
  --green:#078f46;--green-dark:#056b35;--red:#d71920;--ink:#17191b;--muted:#6c7379;
  --paper:#fff;--soft:#f3f5f6;--line:#dfe4e7;--viewer:#20272d;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Noto Sans Bengali","SolaimanLipi","Nirmala UI",Arial,sans-serif;background:#f4f6f7;color:var(--ink)}
a{color:inherit;text-decoration:none}
.container{width:min(1440px,94%);margin:auto}
.topbar{background:#f7f8f8;border-bottom:1px solid var(--line);font-size:13px}
.topbar .container{display:flex;justify-content:space-between;gap:20px;padding:9px 0}
.brandbar{background:#fff}
.brandbar .container{display:flex;align-items:center;justify-content:space-between;padding:18px 0 14px}
.brand{font-family:Georgia,"Noto Serif Bengali",serif;font-weight:800;font-size:48px;letter-spacing:-2px}
.tagline{font-size:12px;color:#666;margin-top:-4px}
.brand-ad{width:330px;height:68px;border-radius:6px;background:linear-gradient(90deg,#eef7f1,#fff);display:flex;align-items:center;justify-content:center;color:var(--green-dark);font-weight:700}
.nav{background:#fff;border-bottom:1px solid var(--line);border-top:1px solid #f0f0f0}
.nav .container{display:flex;gap:27px;overflow:auto;white-space:nowrap}
.nav a{padding:13px 2px;font-size:16px}
.nav a:hover,.nav a.active{color:var(--green);border-bottom:3px solid var(--green)}
.ep-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 0 16px}
.ep-head h1{margin:0;color:var(--green);font-size:29px}
.controls{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border:1px solid var(--line);background:#fff;border-radius:8px;font-weight:700;cursor:pointer}
.btn.green{background:var(--green);color:#fff;border-color:var(--green)}
.btn.red{background:var(--red);color:#fff;border-color:var(--red)}
.viewer{background:var(--viewer);border-radius:9px;box-shadow:0 8px 30px rgba(0,0,0,.16);overflow:hidden}
.stage{position:relative;min-height:650px;display:flex;align-items:center;justify-content:center;padding:18px 68px}
.paper-wrap{position:relative;max-width:850px;width:100%;line-height:0;box-shadow:0 3px 22px rgba(0,0,0,.35);background:#fff}
.paper-wrap img{width:100%;height:auto;display:block}
.clip{position:absolute;border:2px solid transparent;cursor:pointer;transition:.15s;background:rgba(7,143,70,.02)}
.clip:hover,.clip:focus{border-color:var(--green);background:rgba(7,143,70,.10);box-shadow:0 0 0 2px rgba(255,255,255,.7) inset}
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid #55616a;background:#2c353c;color:#fff;font-size:28px;display:grid;place-items:center;cursor:pointer}
.nav-arrow.prev{left:16px}.nav-arrow.next{right:16px}
.thumbs{display:flex;gap:12px;overflow:auto;padding:14px 20px 18px;background:#192026;border-top:1px solid #39434a}
.thumb{min-width:92px;width:92px;color:#dbe0e3;text-align:center;font-size:12px}
.thumb img{width:92px;height:120px;object-fit:cover;background:#fff;border:2px solid transparent;border-radius:4px}
.thumb.active img{border-color:#20ad63}
.thumb span{display:block;padding-top:6px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.68);z-index:9999;display:none;padding:28px}
.modal.open{display:flex;align-items:center;justify-content:center}
.modal-card{background:#fff;border-radius:12px;width:min(900px,100%);max-height:90vh;overflow:auto;padding:28px;position:relative}
.modal-close{position:absolute;right:16px;top:10px;border:0;background:none;font-size:32px;cursor:pointer}
.modal-card h2{font-size:32px;margin:0 35px 10px 0}
.modal-meta{color:var(--muted);font-size:14px;margin-bottom:18px}
.modal-card img{max-width:100%;height:auto;border-radius:6px;margin-bottom:18px}
.modal-content{font-size:18px;line-height:1.9}
.footer{margin-top:40px;background:#15191c;color:#d7dde0;padding:35px 0}
.notice{padding:25px;background:#fff;border:1px dashed #ccd3d7;border-radius:8px}
@media(max-width:800px){
  .brand{font-size:35px}.brand-ad{display:none}.topbar .container{font-size:11px}
  .ep-head{align-items:flex-start;flex-direction:column}.stage{padding:12px 48px;min-height:420px}
  .modal{padding:10px}.modal-card{padding:20px}.modal-card h2{font-size:24px}
}