/* TamilBookshelf Templates — Gallery
   Brand: Saffron Gold #C9943A · Ink #17120D · Parchment #F3EAD9
   Type: Fraunces (display) + Inter (body) */

:root{
  --ink:#17120D;
  --panel:#221A12;
  --panel-hover:#2A2015;
  --parchment:#F3EAD9;
  --saffron:#C9943A;
  --saffron-soft:rgba(201,148,58,0.14);
  --line:rgba(243,234,217,0.12);
  --dim:rgba(243,234,217,0.62);
  --max:2200px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ink); color:var(--parchment); font-family:'Inter',Arial,sans-serif; line-height:1.6;}
h1,h2,h3,.disp{font-family:'Fraunces',Georgia,serif;}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 40px}

/* Header */
header{position:sticky; top:0; z-index:60; background:rgba(23,18,13,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:5px 40px; max-width:var(--max); margin:0 auto;}
.logo{font-family:'Fraunces',serif; font-size:21px; font-weight:600; display:flex; align-items:center; gap:10px;}
.logo .mark{width:12px; height:12px; background:var(--saffron); border-radius:2px; transform:rotate(45deg);}
.logo small{display:block; font-family:'Inter',sans-serif; font-weight:400; font-size:11px; color:var(--dim); letter-spacing:0.08em; text-transform:uppercase;}
.nav-right{display:flex; align-items:center; gap:22px; font-size:14px; color:var(--dim);}
.nav-right a:hover{color:var(--saffron);}
.count-pill{background:var(--saffron-soft); color:var(--saffron); padding:6px 14px; border-radius:100px; font-size:13px; font-weight:600;}

/* Hero */
.hero{max-width:100%; margin:0 auto; padding:10px 40px 10px; text-align:center;background: linear-gradient(to bottom, rgba(26, 15, 10, .4), var(--ink)), url(https://cdn.tamilbookshelf.in/assets/images/templates-tamilbookshelf.jpg);
    background-size: cover;
    background-position: center;}
.hero .eyebrow{color:var(--saffron); letter-spacing:0.18em; text-transform:uppercase; font-size:12px; margin-bottom:20px; display:inline-block;}
.hero h1{font-size:clamp(38px,6vw,64px); font-weight:500; line-height:1.08; max-width:18ch; margin:0 auto;}
.hero h1 em{font-style:italic; color:var(--saffron);}
.hero p{color:var(--dim); font-size:17px; max-width:52ch; margin:24px auto 0;}
.hero-stats{display:flex; justify-content:center; gap:48px; margin-top:40px; padding-top:32px; border-top:1px solid var(--line);}
.hero-stats div{text-align:center;}
.hero-stats b{font-family:'Fraunces',serif; font-size:28px; color:var(--saffron); display:block; font-weight:600;}
.hero-stats span{font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--dim);}

/* Shell: sidebar + main content */
.shell{display:flex; align-items:flex-start; gap:40px; padding-top:50px; padding-bottom:40px;}
.sidebar{width:250px; flex-shrink:0; position:sticky; top:96px; display:flex; flex-direction:column; gap:22px; max-height:calc(100vh - 116px);}
.sidebar-search input{
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--parchment);
  padding:12px 16px; border-radius:8px; font-size:14px; font-family:inherit;
}
.sidebar-search input:focus{outline:none; border-color:var(--saffron);}
.sidebar-block{display:flex; flex-direction:column; gap:10px; min-height:0; flex:1;}
.sidebar-label{font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--dim); padding:0 4px;}
.sidebar-cats{
  display:flex; flex-direction:column; gap:2px; overflow-y:auto; padding-right:6px; margin-right:-6px;
}
.sidebar-cats::-webkit-scrollbar{width:5px;}
.sidebar-cats::-webkit-scrollbar-track{background:transparent;}
.sidebar-cats::-webkit-scrollbar-thumb{background:var(--line); border-radius:10px;}
.sidebar-cat-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px; font-size:14px; color:var(--dim); border-left:2px solid transparent;
  transition:background .15s ease, color .15s ease;background: #221a12;
}
.sidebar-cat-item:hover{background:var(--panel-hover); color:var(--parchment);}
.sidebar-cat-item.active{background:var(--saffron-soft); color:var(--saffron); font-weight:700; border-left-color:var(--saffron);}
.sidebar-cat-item .count{font-size:12px; opacity:0.65; font-weight:400;}
.sidebar-cat-item.active .count{opacity:1;}

.main-col{flex:1; min-width:0;}
.results-bar{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding:0 2px;}
.results-bar span{font-size:13px; color:var(--dim);}

/* Grid */
.template-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:24px;}
.t-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .2s ease, border-color .2s ease;
}
.t-card:hover{transform:translateY(-4px); border-color:rgba(201,148,58,0.4);}
.t-preview{aspect-ratio:16/10; position:relative; overflow:hidden;}
.t-preview .swatch{position:absolute; inset:0;}
.t-preview .mini-chrome{position:absolute; top:12px; left:14px; right:14px; display:flex; gap:6px;}
.t-preview .mini-chrome span{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.35);}
.t-preview .mini-lines{position:absolute; bottom:16px; left:16px; right:16px; display:flex; flex-direction:column; gap:7px;}
.t-preview .mini-lines .l1{height:10px; width:55%; background:rgba(255,255,255,0.85); border-radius:2px;}
.t-preview .mini-lines .l2{height:6px; width:75%; background:rgba(255,255,255,0.4); border-radius:2px;}
.t-preview .pages-tag{
  position:absolute; top:12px; right:14px; background:rgba(0,0,0,0.35); color:#fff; font-size:11px;
  padding:4px 10px; border-radius:100px; letter-spacing:0.02em; backdrop-filter:blur(4px);
}
.t-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:12px; flex:1;}
.t-meta-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.t-cat{color:var(--saffron); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600;}
.dl-count-btn{
  display:flex; align-items:center; gap:5px; background:var(--ink); border:1px solid var(--line); color:var(--dim);
  font-size:11px; padding:4px 10px; border-radius:100px; cursor:pointer; font-family:inherit; flex-shrink:0;
  transition:border-color .15s ease, color .15s ease;
}
.dl-count-btn:hover{border-color:var(--saffron); color:var(--saffron);}
.dl-count-btn .dl-count-icon{font-size:10px; line-height:1;}
.dl-count-btn .count-num{font-weight:700; font-variant-numeric:tabular-nums;}
.t-body h3{font-size:20px; font-weight:600;}
.t-body p{color:var(--dim); font-size:14px; flex:1;}
.t-actions{display:flex; gap:10px; margin-top:4px;}
.btn-preview{
  flex:1; text-align:center; border:1px solid var(--line); color:var(--parchment); padding:11px; border-radius:8px; font-size:13px; font-weight:600;
}
.btn-preview:hover{border-color:var(--saffron); color:var(--saffron);}
.btn-download{
  flex:1; text-align:center; background:var(--saffron); color:var(--ink); border:none; padding:11px; border-radius:8px; font-size:13px; font-weight:700;
}
.btn-download:hover{background:#e0ac52;}
.btn-download.loading{opacity:0.7; pointer-events:none;}
.btn-download.done{background:#6fae7b; color:#0f1e12;}

.empty-state{grid-column:1/-1; text-align:center; padding:80px 20px; color:var(--dim);}
.empty-state h3{color:var(--parchment); margin-bottom:10px; font-weight:500;}

/* How it works */
.how{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:80px 40px;}
.how .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; max-width:1240px;}
.how-step .num{font-family:'Fraunces',serif; color:var(--saffron); font-size:30px;}
.how-step h3{margin:14px 0 8px; font-size:18px; font-weight:600;}
.how-step p{color:var(--dim); font-size:14px;}

footer{padding:50px 40px 30px; text-align:center;}
footer p{color:var(--dim); font-size:13px;}
footer .brand{color:var(--saffron); font-weight:600;}

/* Ad slots */
.ad-slot{
  margin:0 0 24px; padding:14px; border:1px dashed var(--line); border-radius:10px;
  background:var(--panel); flex-direction:column; align-items:center; gap:8px; min-height:90px; justify-content:center;display: block;
    width: 100%;
    min-width: 250px;
    min-height: 90px;
}
.ad-label{font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--dim);}

/* Download gate (interstitial ad modal shown before each download) */
.dl-gate{
  position:fixed; inset:0; background:rgba(10,7,4,0.72); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:200; padding:20px;
}
.dl-gate.show{display:flex;}
.dl-gate-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:32px;
  max-width:440px; width:100%; text-align:center; position:relative;
}
.dl-gate-close{
  position:absolute; top:14px; right:14px; background:none; border:none; color:var(--dim);
  font-size:16px; cursor:pointer; width:30px; height:30px; border-radius:50%;
}
.dl-gate-close:hover{background:rgba(243,234,217,0.08); color:var(--parchment);}
.dl-gate-card h3{font-family:'Fraunces',serif; font-weight:600; font-size:20px; margin-bottom:8px;}
.dl-gate-card p{color:var(--dim); font-size:14px; margin-bottom:18px;}
.dl-gate-progress{height:6px; background:rgba(243,234,217,0.1); border-radius:100px; overflow:hidden; margin-bottom:20px;}
.dl-gate-progress span{display:block; height:100%; width:0%; background:var(--saffron); transition:width .2s linear;}
.dl-gate-note{font-size:12px; color:var(--dim); margin-top:14px; margin-bottom:0;}

/* Toast */
#toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--panel); border:1px solid var(--saffron); color:var(--parchment);
  padding:14px 24px; border-radius:10px; font-size:14px; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; z-index:100; display:flex; align-items:center; gap:10px;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
#toast .dot{width:8px; height:8px; border-radius:50%; background:var(--saffron);}

/* Customize before download */
.t-customize-link{
  display:block; text-align:center; font-size:12px; color:var(--dim); margin-top:12px;
  padding-top:12px; border-top:1px solid var(--line); cursor:pointer; background:none; border-left:none; border-right:none; border-bottom:none; width:100%; font-family:inherit;
}
.t-customize-link:hover{color:var(--saffron);}

.cz-modal{
  position:fixed; inset:0; background:rgba(10,7,4,0.72); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:210; padding:20px;
}
.cz-modal.show{display:flex;}
.cz-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:32px;
  max-width:560px; width:100%; position:relative; max-height:88vh; display:flex; flex-direction:column;
}
.cz-close{
  position:absolute; top:14px; right:14px; background:none; border:none; color:var(--dim);
  font-size:16px; cursor:pointer; width:30px; height:30px; border-radius:50%;
}
.cz-close:hover{background:rgba(243,234,217,0.08); color:var(--parchment);}
.cz-card h3{font-family:'Fraunces',serif; font-weight:600; font-size:20px; margin-bottom:8px; padding-right:30px;}
.cz-sub{color:var(--dim); font-size:13px; margin-bottom:22px; line-height:1.5;}
.cz-body{overflow-y:auto; display:flex; flex-direction:column; gap:22px; padding-right:8px; margin-right:-8px; min-height:60px;}
.cz-body::-webkit-scrollbar{width:5px;}
.cz-body::-webkit-scrollbar-track{background:transparent;}
.cz-body::-webkit-scrollbar-thumb{background:var(--line); border-radius:10px;}
.cz-group label.cz-label{display:block; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--saffron); margin-bottom:10px; font-weight:600;}
.cz-help{color:var(--dim); font-size:12.5px; line-height:1.5; margin:-4px 0 12px;}
.cz-fieldset{display:flex; flex-direction:column; gap:12px;}
.cz-field-row{display:flex; flex-direction:column; gap:6px;}
.cz-field-row .cz-field-label{font-size:12px; color:var(--dim);}
.cz-field-row input[type="text"]{
  width:100%; background:var(--ink); border:1px solid var(--line); color:var(--parchment);
  padding:11px 14px; border-radius:8px; font-size:14px; font-family:inherit;
}
.cz-field-row input[type="text"]:focus{outline:none; border-color:var(--saffron);}
.cz-group input[type="text"], .cz-group input[type="email"], .cz-group input[type="tel"]{
  width:100%; background:var(--ink); border:1px solid var(--line); color:var(--parchment);
  padding:11px 14px; border-radius:8px; font-size:14px; font-family:inherit;
}
.cz-group input[type="text"]:focus, .cz-group input[type="email"]:focus, .cz-group input[type="tel"]:focus{outline:none; border-color:var(--saffron);}
.cz-colors{display:flex; flex-wrap:wrap; gap:12px;}
.cz-color-item{display:flex; align-items:center; gap:10px; background:var(--ink); border:1px solid var(--line); border-radius:8px; padding:8px 14px 8px 8px;}
.cz-color-item input[type="color"]{width:28px; height:28px; border:none; border-radius:6px; background:none; padding:0; cursor:pointer;}
.cz-color-item span{font-size:13px; color:var(--dim);}
.cz-sections{display:flex; flex-direction:column; gap:2px;}
.cz-section-item{display:flex; align-items:center; gap:12px; padding:10px 4px; font-size:14px; border-bottom:1px solid var(--line); cursor:pointer;}
.cz-section-item:last-child{border-bottom:none;}
.cz-section-item input{width:16px; height:16px; accent-color:var(--saffron); cursor:pointer;}
.cz-actions{display:flex; gap:12px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line);}
.btn-outline-cz{flex:1; border:1px solid var(--line); color:var(--parchment); background:none; padding:13px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer;}
.btn-outline-cz:hover{border-color:var(--saffron); color:var(--saffron);}
.btn-download-cz{flex:2; background:var(--saffron); color:var(--ink); border:none; padding:13px; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer;}
.btn-download-cz:hover{background:#e0ac52;}
.btn-download-cz.loading{opacity:0.7; pointer-events:none;}

@media(max-width:1100px){
  .shell{flex-direction:column;}
  .sidebar{
    width:100%; position:static; max-height:none; flex-direction:row; align-items:center; gap:16px;
  }
  .sidebar-search{flex:0 0 220px;}
  .sidebar-block{flex-direction:row; align-items:center; gap:14px; flex:1; min-width:0;}
  .sidebar-label{white-space:nowrap; padding:0;}
  .sidebar-cats{
    flex-direction:row; overflow-x:auto; overflow-y:visible; gap:8px; padding-bottom:6px; margin-right:0;
  }
  .sidebar-cat-item{white-space:nowrap; border-left:none; border-bottom:2px solid transparent;}
  .sidebar-cat-item.active{border-left:none; border-bottom-color:var(--saffron);}
}
@media(max-width:720px){
  .hero-stats{gap:28px;}
  .sidebar{flex-direction:column; align-items:stretch;}
  .sidebar-block{flex-direction:column; align-items:stretch;}
  .template-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
  .how .wrap{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .template-grid{grid-template-columns:1fr;}
  .nav-right span.count-pill{display:none;}
  .hero-stats{gap:20px;}
  .hero-stats b{font-size:22px;}
  .cz-card{padding:24px 20px; max-height:92vh;}
  .cz-actions{flex-direction:column;}
}