/* বাংলা ডিজিটাল শপ - Minimal UI */
:root{
  /* Light theme: Orange + Yellow + Black */
  --bg:#ffffff;        /* pure white */
  --card:#ffffff;
  --muted:#6b7280;
  --text:#111827;       /* near-black */
  --soft:#ffffff;       /* soft yellow tint */
  --border:rgba(17,24,39,.12);
  --primary:#f97316;    /* orange */
  --primary2:#facc15;   /* yellow */
  --danger:#dc2626;
  --ok:#16a34a;
  --shadow: 0 10px 30px rgba(17,24,39,.10);
}
*{box-sizing:border-box}
html,body{height:100%; background:#ffffff; color:var(--text);}
body{
  margin:0;
  font-family:"Hind Siliguri", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1000px 600px at 12% -10%, rgba(250, 204, 21, .30), transparent 60%),
    radial-gradient(1000px 600px at 90% 0%, rgba(249, 115, 22, .20), transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1100px, 92%); margin:0 auto}
.main{padding:22px 0 50px}

.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
  /* iOS notch / safe-area: prevents "blank" strip above the header on mobile */
  padding-top: env(safe-area-inset-top);
}
.navwrap{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px}
.logo{height:45px; width:auto}
.logo-text{font-weight:700; letter-spacing:.2px}
.navlinks{display:none; gap:14px}
.navlinks a{color:var(--muted); font-weight:500}
.navlinks a:hover{color:var(--text)}
.navright{display:flex; align-items:center; gap:10px}

.cartbtn{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:999px; color:var(--muted)}
.badge{background:rgba(249,115,22,.14); padding:2px 8px; border-radius:999px; color:var(--text); font-size:12px; border:1px solid rgba(249,115,22,.25)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(17,24,39,.03);
  color:var(--text);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  gap:8px;
  font-weight:600;
}
.btn:hover{transform:translateY(-1px); border-color:rgba(249,115,22,.45)}
.btn:active{transform:translateY(0)}
.btn.primary{
  background: linear-gradient(135deg, rgba(249,115,22,.98), rgba(250,204,21,.98));
  border-color:transparent;
  color:#111827;
}
.btn.ghost{background:transparent; color:var(--text)}
.btn.danger{background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.35)}
.btn.small{padding:7px 10px; border-radius:10px; font-size:13px}
.btn.full{width:100%}

.link{color:var(--primary); font-weight:600}
.link:hover{opacity:.9}

.section{margin:26px 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:12px}
h1,h2,h3{margin:0 0 10px}
h1{font-size:28px; line-height:1.18}
h2{font-size:20px}
h3{font-size:17px}
.lead{color:var(--muted); font-size:16px; margin:10px 0 16px}
.muted{color:var(--muted)}
.small{font-size:13px}
.strong{font-weight:700}

.alert{
  padding:10px 12px;
  border-radius:12px;
  margin:10px 0;
  border:1px solid var(--border);
  background:rgba(226,232,240,.06);
}
.alert.success{border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.12)}
.alert.error{border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.12)}

.hero{padding:24px 0}
.hero-grid{display:grid; gap:14px}
.hero h1{font-size:34px}
.grad{background:linear-gradient(135deg, var(--primary), var(--primary2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap}
.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.75));
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow);
}

/* Minimal hero */
.hero-min{padding:18px 0 10px}
.hero-min-inner{display:flex; flex-direction:column; gap:10px;}
.hero-min h1{margin:0}
@media(min-width:720px){
  .hero-min-inner{flex-direction:row; align-items:center; justify-content:space-between}
}
.kpi{display:flex; align-items:baseline; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border)}
.kpi:last-child{border-bottom:0}
.kpi-num{font-size:22px; font-weight:800}
.kpi-label{color:var(--muted); font-weight:600}
.mini-features{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.chip{border:1px solid var(--border); padding:6px 10px; border-radius:999px; color:var(--muted); background:rgba(226,232,240,.04)}

.cats{display:flex; flex-wrap:wrap; gap:8px}
.cat{border:1px solid var(--border); padding:8px 12px; border-radius:999px; background:rgba(226,232,240,.04); color:var(--text)}

.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.88));
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  transition: transform .15s ease, border-color .15s ease;
}
.card:hover{transform:translateY(-2px); border-color:rgba(249,115,22,.35)}
.card-img{aspect-ratio:1/1; object-fit:cover}
.card-body{padding:12px}
.card-title{font-weight:800; font-size:16px; margin-bottom:4px}
.card-desc{color:var(--muted); font-size:13px; min-height:34px}
.card-row{display:flex; align-items:center; gap:8px; margin-top:10px}
.price{font-weight:900}
.strike{text-decoration:line-through; color:rgba(148,163,184,.7); font-size:13px}

.split{display:grid; gap:12px}
.note{
  border:1px solid var(--border);
  background:rgba(226,232,240,.04);
  border-radius:18px;
  padding:14px;
}
.note-title{font-weight:800; margin-bottom:6px}
.note-actions{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}

.card-lite{
  border:1px solid var(--border);
  background:rgba(255,255,255,.85);
  border-radius:18px;
  padding:14px;
  box-shadow: 0 6px 18px rgba(17,24,39,.08);
}
.rich p{margin:8px 0}
.rich ul{margin:8px 0 0 18px}
.rich li{margin:6px 0}

.list{margin:10px 0 0 18px}
.list li{margin:8px 0}

.product-grid{display:grid; gap:14px}
.gallery{
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(226,232,240,.04);
}
.gimg{display:none; width:100%; aspect-ratio: 1 / 1; object-fit:cover}
.gimg.active{display:block}
.thumbs{display:flex; gap:10px; margin-top:10px}
.thumb{border:1px solid var(--border); background:transparent; padding:0; border-radius:14px; overflow:hidden; cursor:pointer; width:64px; height:64px}
.thumb.active{border-color:rgba(249,115,22,.5)}
.thumb img{width:100%; height:100%; object-fit:cover}

.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(249,115,22,.12); border:1px solid rgba(249,115,22,.24); color:var(--text); font-weight:700; font-size:13px}
.pill.status-completed{background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.35)}
.pill.status-pending{background:rgba(234,179,8,.16); border-color:rgba(234,179,8,.35)}
.pill.status-cancelled{background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.35)}
.pill.status-paid{background:rgba(59,130,246,.14); border-color:rgba(59,130,246,.35)}

.order-meta{display:none}
.p-title{margin-top:8px}
.price-box{display:flex; align-items:baseline; gap:10px; margin:12px 0}
.price-big{font-size:30px; font-weight:900}
.save{color:var(--ok); font-weight:800}
.cta{display:grid; gap:10px; margin:10px 0 12px}
.trust{display:grid; gap:8px; margin:12px 0}
.trust-item{border:1px dashed rgba(148,163,184,.25); border-radius:14px; padding:10px; color:var(--muted)}

.info-cards{display:grid; gap:10px; margin:12px 0}
.info-card{display:flex; gap:12px; align-items:flex-start; border:1px solid var(--border); border-radius:16px; padding:12px; background:rgba(255,255,255,.85)}
.info-card .icn{width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:rgba(249,115,22,.12); border:1px solid rgba(249,115,22,.24); font-size:20px}
.info-title{font-weight:900; margin-bottom:2px}
details{border:1px solid var(--border); border-radius:14px; padding:10px; background:rgba(226,232,240,.03); margin:10px 0}
summary{cursor:pointer; font-weight:800}

.sticky-buy{
  position:fixed; left:0; right:0; bottom:0;
  /* Mobile sticky “Buy Now” (glass + orange/yellow/black combo) */
  background:linear-gradient(135deg,
    rgba(17,24,39,.92) 0%,
    rgba(17,24,39,.82) 42%,
    rgba(249,115,22,.22) 78%,
    rgba(251,191,36,.26) 100%
  );
  border-top:1px solid rgba(0,0,0,.35);
  display:flex; gap:10px; padding:9px 10px;
  align-items:center; justify-content:space-between;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:0 -12px 30px rgba(17,24,39,.22);
  transform:translateY(120%);
  transition:transform .32s ease;
  z-index:60;
}
.sticky-buy.show{transform:translateY(0)}
.sb-left{display:flex; flex-direction:column; line-height:1.05}
.sb-price{font-size:20px; font-weight:900; color:#ffffff}
.sb-orig{font-size:13px; color:rgba(255,255,255,.72); text-decoration:line-through; font-weight:800}
.sb-form{margin:0}
.sb-btn{
  border:0; cursor:pointer;
  background:linear-gradient(135deg, rgba(251,191,36,1) 0%, rgba(249,115,22,1) 65%, rgba(251,191,36,1) 100%);
  color:#0b1220;
  font-weight:900;
  font-size:16px;
  padding:10px 14px;
  border-radius:18px;
  min-width:150px;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  border:1px solid rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.05;
  gap:4px;
}
.sb-offer{font-size:12px; font-weight:900; letter-spacing:.3px; text-transform:uppercase; opacity:.95}
.sb-label{font-size:16px; font-weight:900}
.sb-btn:active{transform:translateY(1px)}
.sb-btn:focus{outline:3px solid rgba(251,191,36,.35); outline-offset:2px}
@media(min-width:900px){
  .sticky-buy{display:none}
}
@media(max-width:899px){
  .main{padding-bottom:86px}
}

/* Product page (mobile): remove unwanted empty space around header/content without affecting other pages */
@media(max-width:899px){
  body.tpl-product .topbar .container{width:100%; padding-left:12px; padding-right:12px}
  body.tpl-product main.container.main{width:100%; padding-left:12px; padding-right:12px}
  body.tpl-product .gallery{
    /* edge-to-edge look on mobile to avoid side "blank" areas */
    border-radius:0;
    margin-left:-12px;
    margin-right:-12px;
  }
}

/* WhatsApp button should never overlap the mobile sticky bar */
:root{--sb-height:0px}
@media(max-width:899px){
  html.has-sb .wa-float{bottom:calc(16px + var(--sb-height))}
}

.cart{display:grid; gap:10px}
.cart-row{display:grid; grid-template-columns:64px 1fr auto auto; gap:10px; align-items:center;
  border:1px solid var(--border); border-radius:16px; padding:10px; background:rgba(255,255,255,.85);
}
.cart-img{width:64px; height:64px; border-radius:14px; object-fit:cover}
.cart-title{font-weight:900}
.cart-price{font-weight:900}
.cart-sum{margin-top:12px; border:1px solid var(--border); border-radius:16px; padding:12px; background:rgba(255,255,255,.85)}
.sum-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.sum-total{font-size:20px; font-weight:900}

.checkout{display:grid; gap:12px}
.ty-msg-wrap{display:grid; gap:10px; margin:10px 0 12px}
.ty-msg{border:1px solid rgba(249,115,22,.25); background:rgba(249,115,22,.06); border-radius:16px; padding:12px}
.ty-msg-title{font-weight:900; margin-bottom:4px}
.ty-msg-body{color:var(--text); line-height:1.6}
.field{display:grid; gap:6px; margin:10px 0}
label{color:var(--muted); font-weight:700; font-size:13px}
input,select,textarea{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(17,24,39,.02);
  color:var(--text);
  outline:none;
}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:rgba(249,115,22,.55)}
.grid2{display:grid; gap:10px}
.paybox{display:flex; align-items:center; justify-content:space-between; border:1px solid var(--border); border-radius:16px; padding:12px; margin:12px 0; background:rgba(255,255,255,.85)}
.pay-title{font-weight:900}
.inline{display:flex; align-items:center; gap:10px}
.switch{display:flex; align-items:center; gap:10px}

.mini-list{display:grid; gap:10px; margin:10px 0}
.mini-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--border)}
.mini-row:last-child{border-bottom:0}
.mini-row.total{font-weight:900}

.download-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--border)}
.download-row:last-child{border-bottom:0}

.thanks{display:grid; justify-items:center; text-align:center; gap:8px; margin:6px 0 18px}
.check{
  width:54px; height:54px; border-radius:16px;
  display:grid; place-items:center;
  background:rgba(34,197,94,.15);
  border:1px solid rgba(34,197,94,.35);
  font-weight:900; font-size:26px;
}

.table{display:grid; gap:0}
.trow{display:grid; grid-template-columns: 80px 1fr 160px 140px 140px; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); align-items:center}
.trow.thead{color:var(--muted); font-weight:800; font-size:13px}
.row-actions{display:flex; gap:8px; justify-content:flex-end; align-items:center}
@media(max-width:850px){
  /* Mobile admin: keep Edit/Delete actions visible */
  .trow{grid-template-columns: 60px 1fr; grid-auto-rows:auto}
  .trow.thead{display:none}
  .trow > :nth-child(3), .trow > :nth-child(4){display:none}
  .trow > :nth-child(5){
    display:flex;
    grid-column:1 / -1;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:8px;
    padding-top:6px;
  }
  .order-meta{display:inline-flex; gap:8px; align-items:center}
}
.filters{display:grid; gap:10px}
@media(min-width:850px){
  .filters{grid-template-columns: 180px 1fr 1fr 140px 140px; align-items:end}
}

.admin-nav{display:flex; gap:8px; flex-wrap:wrap}
.kpi-grid{display:grid; gap:12px; grid-template-columns:1fr}
.kcard{border:1px solid var(--border); border-radius:18px; padding:14px; background:rgba(255,255,255,.88)}
.knum{font-size:26px; font-weight:900; margin-top:6px}
.quick{display:grid; gap:10px}
.q{border:1px solid var(--border); border-radius:14px; padding:10px; background:rgba(226,232,240,.03); color:var(--text)}
.q:hover{border-color:rgba(249,115,22,.35)}

.thumbs-admin{flex-wrap:wrap}
.thumbimg{width:58px; height:58px; border-radius:14px; border:1px solid var(--border); object-fit:cover}

.footer{border-top:1px solid var(--border); padding:18px 0; margin-top:26px; background:rgba(255,255,255,.8)}
.footwrap{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}
.foot-title{font-weight:900}

.narrow{width:min(520px, 92%); margin:0 auto}

/* Floating WhatsApp */
.wa-float{position:fixed; left:16px; bottom:16px; z-index:50; width:52px; height:52px; border-radius:999px; display:grid; place-items:center; background:#ffffff; border:1px solid rgba(17,24,39,.12); box-shadow:0 10px 24px rgba(17,24,39,.18)}
@media(max-width:899px){
  .has-sb .wa-float{bottom:calc(16px + var(--sb-height, 0px))}
}
.wa-icn{width:34px; height:34px; border-radius:999px; display:grid; place-items:center; background:rgba(255,255,255,.92); border:1px solid rgba(17,24,39,.12)}
.wa-text{font-weight:900}

@media(min-width:720px){
  .navlinks{display:flex}
  .hero-grid{grid-template-columns: 1.2fr .8fr; align-items:stretch}
  .grid{grid-template-columns: repeat(2, 1fr)}
  .split{grid-template-columns: 1fr 1fr}
  .product-grid{grid-template-columns: 1fr 1fr}
  .checkout{grid-template-columns: 1fr 1fr}
  .kpi-grid{grid-template-columns: repeat(4, 1fr)}
  h1{font-size:34px}
}
@media(min-width:980px){
  .grid{grid-template-columns: repeat(3, 1fr)}
}


/* reveal animation */
/*
  IMPORTANT (Bug fix):
  Never hide page content by default.
  We used to set `.js ... { opacity:0 }` and rely on JS/IntersectionObserver
  to add `.reveal`. If JS fails for any reason (path, browser, plugin, etc.),
  users see "invisible" pages.
*/
.js .card,.js .card-lite,.js .hero-card,.js .kcard,.js .note{
  opacity:1;
  transform:translateY(0);
}
/* Keep a lightweight animation without risking invisibility */
.reveal{transition: opacity .5s ease, transform .5s ease;}

@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(4,1fr)}}

/* WhatsApp floating button (minimal, left) */
.wa-float{position:fixed; left:16px; bottom:16px; z-index:50; width:52px; height:52px; border-radius:999px; display:grid; place-items:center; background:#ffffff; border:1px solid rgba(17,24,39,.12); box-shadow:0 10px 24px rgba(17,24,39,.18)}
.wa-float:hover{transform:translateY(-1px)}
.wa-icn{font-size:22px; line-height:1}
.wa-text{display:none !important}

/* Mobile drawer */
.menu-btn{
  display:none;
  width:42px; height:42px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#ffffff;
  align-items:center; justify-content:center;
  cursor:pointer;
}
@media(max-width:899px){
  .navlinks{display:none}
  .menu-btn{display:flex}
}
.drawer-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  display:none;
  z-index:70;
}
.drawer{
  position:fixed; top:0; bottom:0; left:0;
  width:min(86vw, 320px);
  background:#ffffff;
  border-right:1px solid var(--border);
  transform:translateX(-105%);
  transition:transform .2s ease;
  z-index:71;
  padding:14px;
  display:flex; flex-direction:column; gap:12px;
}
.drawer.open{transform:translateX(0)}
.drawer-overlay.open{display:block}
.drawer .d-head{display:flex; align-items:center; justify-content:space-between}
.drawer .d-close{
  width:40px; height:40px; border-radius:12px;
  border:1px solid var(--border); background:#ffffff; cursor:pointer;
}
.drawer .d-sec{border:1px solid var(--border); border-radius:16px; padding:12px}
.drawer .d-sec .d-title{font-weight:800; margin-bottom:8px}
.drawer a.d-link{display:block; padding:10px 10px; border-radius:12px}
.drawer a.d-link:hover{background:rgba(249,115,22,.08)}

/* Admin download link rows */
.dl-row{display:grid; grid-template-columns:1fr; gap:10px; margin:10px 0}
.dl-row .btn.danger{justify-self:start}
@media(min-width:640px){
  .dl-row{grid-template-columns: 1fr 2fr auto; align-items:center}
}

.dl-actions{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}

.wa-svg{width:28px; height:28px; display:block}
.wa-img{width:28px; height:28px; display:block; object-fit:contain}

/* WhatsApp position option */
.wa-float.wa-right{left:auto; right:16px}
html.has-sb .wa-float.wa-right{right:16px}