/* =====================================================================
   Pran Food — Full Responsive Grid System (v1.4)
   Mobile-first layout framework (user spec, v1.5 — overrides v1.4 numbers):
     Mobile   0-599px : 4-column grid,  margin 16px, gutter 16px
     Tablet 600-904px : 8-column grid,  margin 32px, gutter 24px
     Desktop >=905px  : 12-column grid, gutter 24px, centered container
                        (max-width 1100px, fluid side margins beyond it)
   Repeating grids sit ON the 4/8/12 framework: a normal card spans
   4 framework columns at every size -> 1 per row (mobile),
   2 per row (tablet), 3 per row (desktop). See .grid-12 / span helpers.
   Grid  -> page structure, card lists, footer, dashboard bars
   Flex  -> header/nav, inner alignment, chips, partner row
   Visual identity is unchanged from v1.3 (green #0b6b3a, orange #ff7a1a,
   Bengali font stack, 14px card radius, hero style).
   ===================================================================== */

/* ---------- Base ---------- */
:root{
  --green:#0b6b3a;
  --orange:#ff7a1a;
  --ink:#222;
  --bg:#f4f8f4;
  --line:#ddd;
  --wrap:68.75rem;          /* 1100px max container width (desktop) */
  --margin:16px;            /* framework side margin: 16 mobile / 32 tablet+ */
  --gutter:16px;            /* framework gutter: 16 mobile / 24 tablet+ */
  --gap:16px;               /* component gap = framework gutter */
  --radius:14px;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}  /* zero horizontal scrolling. clip (where supported) is used instead of hidden because overflow:hidden on html/body breaks position:sticky in Chromium — the sticky navbar depends on this. */
body{
  margin:0;
  font-family:"Noto Sans Bengali","Hind Siliguri",sans-serif;
  font-size:clamp(.95rem,.9rem + .3vw,1.05rem);
  background:var(--bg);color:var(--ink);
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;  /* classic flex column: the growing main/shell area keeps the footer at the document bottom — on short or empty pages, that is the viewport bottom; the footer is neither fixed nor sticky */
}
img{max-width:100%}                     /* images never break the layout */
h1{font-size:clamp(1.55rem,5vw,2.3rem);line-height:1.25}
h2{font-size:clamp(1.3rem,3.5vw,1.8rem);line-height:1.3}
h3{font-size:clamp(1.08rem,2.5vw,1.3rem)}
a{word-wrap:break-word}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--margin);width:100%}
main{padding:1.125rem var(--margin) 2.5rem;flex:1 0 auto;width:100%}   /* flex:1 0 auto fills the space above the footer; side padding = framework margin */
.box{background:#fff;border:1px solid var(--line);border-radius:.75rem;padding:1rem;margin:.875rem 0}
.alert{background:#fff3d6;border:1px solid #ffd27a;padding:.625rem;border-radius:.5rem;margin:.75rem 0}
.hello{background:#e8f3e8;padding:.5rem .75rem;border-radius:.5rem;overflow-wrap:break-word}
.preview{border:2px dashed var(--green);padding:.75rem;border-radius:.625rem;background:#fff}

/* ---------- Header + Nav (Flexbox) ---------- */
.top{background:var(--green);color:#fff;position:sticky;top:0;z-index:10}  /* sticky header (kept) */
.top-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.35rem .75rem;padding:.625rem var(--margin)}
.logo{color:#fff;text-decoration:none;font-weight:700;font-size:clamp(1.05rem,4vw,1.3rem);line-height:1.2}
.logo small{display:block;font-size:.75rem;color:#ffd27a}
.nav{display:flex;flex-wrap:wrap;gap:.3rem .65rem;flex-basis:100%}  /* mobile: nav takes its own tidy row(s) under the logo */
.nav a{color:#fff;text-decoration:none;font-size:.95rem;padding:.15rem 0}
.nav a:hover{color:#ffd27a}

/* ---------- Hero ---------- */
.hero{background:var(--green);color:#fff;border-radius:var(--radius);padding:1.125rem;text-align:center}
.hero h1{margin:0 0 .5rem}
.hero-img{width:100%;max-height:17.5rem;object-fit:cover;border-radius:.625rem;margin:.75rem 0}

/* ---------- Buttons ---------- */
.btn{display:inline-block;background:var(--orange);color:#fff;border:0;padding:.625rem 1.125rem;border-radius:.5rem;text-decoration:none;cursor:pointer;font-size:1rem;max-width:100%}
.btn2{background:var(--green)}
.btn:hover{opacity:.9}

/* ---------- Ticker ---------- */
.ticker{background:#fff3d6;border:1px solid #ffd27a;border-radius:.5rem;padding:.625rem;margin:.875rem 0;overflow:hidden;white-space:nowrap;max-width:100%}
.ticker span{display:inline-block;animation:scroll 30s linear infinite}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Cards Grid ---------- */
/* Mobile-first: one column. Columns are added by the min-width rules
   in the Breakpoints section at the bottom of this file. */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.cards>*{grid-column:span 4;min-width:0}   /* card = span 4 -> 1/row mobile, 2/row tablet (of 8), 3/row desktop (of 12) */
.cards>.wide{grid-column:span 4}           /* wide-card hook: becomes span 6 of 12 on desktop (2/row) */
/* Generic 4/8/12 layout grid + span helpers (framework utilities) */
.grid-12{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.grid-12>*{min-width:0}
.span-all{grid-column:1/-1}
.span-4{grid-column:span 4}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;padding:0;min-width:0;display:flex;flex-direction:column;height:100%}
.card img{width:100%;height:9.375rem;object-fit:cover;background:#e8f3e8;display:block}
.card .in{padding:.875rem;display:flex;flex-direction:column;flex:1}
/* v1.8 Item 3c: buy buttons pinned to the card bottom, aligned across a row */
.pkg-btns{margin-top:auto;padding-top:.75rem;display:flex;flex-direction:column;gap:.5rem}
.pkg-btns form{margin:0}
.pkg-btns .btn{width:100%;text-align:center}
/* v1.8 Item 2: owned package highlight + badge */
.card.owned{border:2px solid var(--green);box-shadow:0 4px 18px rgba(11,107,58,.18)}
.own-badge{display:inline-block;background:#e8f5e9;color:var(--green);border:1px solid #81c784;border-radius:1rem;padding:.15rem .7rem;font-weight:700;margin:0 0 .5rem}
.pkg-summary{margin-bottom:.5rem}
.btn[disabled],button[disabled]{opacity:.55;cursor:not-allowed}
.card h3{margin:0 0 .5rem;color:var(--green)}
.card .two{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}

/* ---------- Notice ---------- */
.notice{display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}  /* stacked on mobile, row from 600px */
.notice img{width:7.5rem;height:5rem;object-fit:cover;border-radius:.5rem}

/* ---------- Forms ---------- */
input,select,textarea{width:100%;padding:.625rem;margin:.375rem 0 .75rem;border:1px solid #bbb;border-radius:.5rem;font-size:1rem;min-width:0}
label{font-weight:600}
.toolbar{margin:.375rem 0}
.toolbar button{width:auto;padding:.375rem .625rem;margin:0 .25rem .375rem 0;border:1px solid #bbb;border-radius:.375rem;background:#fff;cursor:pointer;font-size:.875rem}

/* ---------- Tables ---------- */
/* CSS-only small-screen handling (no PHP wrappers needed): below 768px a
   table becomes its own horizontally scrolling block, so a wide table can
   never push the page sideways. Full table layout returns at >=768px. */
table{width:100%;border-collapse:collapse;background:#fff}
th,td{border:1px solid var(--line);padding:.5rem;text-align:left;overflow-wrap:break-word}
@media (max-width:767.98px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;max-width:100%}
  th,td{padding:.4rem .5rem}
}

/* ---------- Deposit / Payment (Flex + Grid) ---------- */
.steps{display:flex;gap:.375rem;flex-wrap:wrap;margin:.625rem 0}
.steps span{background:#e8f3e8;border:1px solid var(--green);border-radius:1.25rem;padding:.25rem .75rem;font-size:.875rem}
.steps span.on{background:var(--green);color:#fff}
/* Payment-method cards (logo + name). The cards are narrow (~130px design),
   so TWO columns already fit a 375px phone with comfortable tap targets:
   each cell is ~164px wide. 3 columns from 600px, 5 from 905px. */
.methods{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin:.75rem 0}
.method-card{display:block;border:2px solid var(--line);border-radius:.75rem;padding:.75rem;text-align:center;cursor:pointer;background:#fff;width:100%;min-width:0}
.method-card:hover{border-color:var(--green)}
.method-card img{height:2.75rem;max-width:100%}
.method-card b{display:block;margin-top:.375rem}
.amt-btns{margin:.5rem 0;display:flex;flex-wrap:wrap;gap:.5rem}
.copybox{border:2px dashed var(--green);border-radius:.75rem;padding:1rem;text-align:center;background:#f4fbf4;margin:.75rem 0;overflow-wrap:break-word}
.copybox .num{font-size:clamp(1.35rem,7vw,1.875rem);font-weight:700;letter-spacing:.06em;color:var(--green);word-break:break-all}
.warn-red{background:#fde8e8;border:1px solid #d32f2f;color:#b71c1c;border-radius:.5rem;padding:.75rem;margin:.75rem 0;font-weight:600}
.note-yellow{background:#fff8e1;border:1px solid #f9a825;border-radius:.5rem;padding:.75rem;margin:.75rem 0}
.pay-head{background:var(--green);color:#fff;border-radius:.75rem;padding:1rem;text-align:center;margin:.75rem 0}
.pay-head .amt{font-size:clamp(1.4rem,6vw,1.75rem);font-weight:700}
.pay-banner{display:flex;align-items:center;gap:.75rem;justify-content:center;margin:.625rem 0;flex-wrap:wrap}
.pay-banner img{height:2.75rem}

/* ---------- Dashboard Graph (CSS bar chart) ---------- */
/* Mobile: each row stacks (label / full-width bar / value) in 1 column. */
.bar-row{display:grid;grid-template-columns:1fr;gap:.25rem .625rem;align-items:center;margin:.5rem 0}
.bar-track{background:#e0e0e0;border-radius:.5rem;height:1.25rem;overflow:hidden;width:100%}
.bar-fill{background:var(--green);height:100%;border-radius:.5rem}
.bar-fill.alt{background:var(--orange)}

/* ---------- Spin wheel ---------- */
.wheel{width:min(16.25rem,78vw);aspect-ratio:1;border-radius:50%;background:conic-gradient(#ff7a1a 0 60deg,#0b6b3a 60deg 120deg,#ffd27a 120deg 180deg,#2a9d5c 180deg 240deg,#ff7a1a 240deg 300deg,#0b6b3a 300deg 360deg);display:flex;align-items:center;justify-content:center;margin:1.25rem auto;font-weight:700;color:#fff;text-align:center;padding:.5rem}

/* ---------- Modal (notice popup) ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:999;display:flex;align-items:center;justify-content:center}
.modal-box{position:relative;background:#fff;max-width:min(92vw,560px);width:min(92vw,560px);max-height:90vh;overflow:auto;border:0;padding:0;border-radius:0}
.modal-body{padding:1.125rem}
.modal-img{width:100%;display:block}
.modal-x{position:absolute;top:.375rem;right:.375rem;background:rgba(0,0,0,.55);color:#fff;border:0;width:1.875rem;height:1.875rem;border-radius:50%;cursor:pointer;z-index:2;padding:0;font-size:1.125rem;line-height:1}

/* ---------- Badges ---------- */
.badge{display:inline-block;background:#ffe0e0;border:1px solid #e57373;color:#b71c1c;border-radius:.75rem;padding:.06rem .5rem;font-size:.75rem}
.badge.ok{background:#e8f5e9;border-color:#81c784;color:#2e7d32}

/* ---------- Footer Grid ---------- */
/* Footer on the framework grid: cols span 4 -> 1 per row (mobile, of 4),
   2 per row (tablet, of 8), 3 per row (desktop, of 12). */
.foot{background:var(--green);color:#fff;padding:1rem 0 0;margin-top:auto;flex:0 0 auto;text-align:left}  /* Classic flex bottom-footer only: margin-top:auto and flex:0 0 auto place it at the document bottom. On short or empty pages the flex column makes that the viewport bottom; it never floats mid-page and is not fixed or sticky. */
.foot a{color:#ffd27a}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);padding-bottom:1rem}
.foot-col{grid-column:span 4;min-width:0}
.foot-col h4{margin:0 0 .625rem;color:#ffd27a;font-size:1.06rem}
.foot-menu{list-style:none;margin:0;padding:0}
.foot-menu li{margin:.375rem 0}
.foot-menu a{text-decoration:none}
.foot-menu a:hover{text-decoration:underline}
.foot-support a{margin-right:.5rem}
.pay-partners{display:flex;flex-wrap:wrap;gap:.625rem}
.pay-partner{display:flex;flex-direction:column;gap:.2rem;font-size:.75rem;min-width:0}
.pay-partner img{height:2.125rem;width:auto;max-width:100%;background:#fff;border-radius:.375rem;padding:.125rem}
.foot-note{font-size:.75rem;opacity:.85}
.foot-bottom{border-top:1px solid rgba(255,255,255,.35);padding:.75rem 0;text-align:center;font-size:.875rem}

/* ---------- Breakpoints (min-width = mobile-first scale-up) ---------- */
/* Tablet 600-904px: 8-column framework grid, margin 32px, gutter 24px */
@media (min-width:600px){
  :root{--margin:32px;--gutter:24px;--gap:24px}
  .nav{flex-basis:auto}                                   /* logo + nav share one bar again */
  .hero{padding:1.75rem}
  .notice{flex-direction:row;align-items:center}
  .cards{grid-template-columns:repeat(8,1fr)}             /* cards still span 4 -> 2 per row */
  .grid-12{grid-template-columns:repeat(8,1fr)}
  .methods{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:repeat(8,1fr)}          /* cols still span 4 -> 2 per row */
  .bar-row{grid-template-columns:9.375rem 1fr 8.125rem}   /* label | bar | value on one line */
}
/* Desktop >=905px: 12-column framework grid, gutter 24px, centered 1100px
   container — side margins scale fluidly beyond the max width. */
@media (min-width:905px){
  .cards{grid-template-columns:repeat(12,1fr)}            /* cards span 4 -> 3 per row */
  .cards>.wide{grid-column:span 6}                        /* wide card: 6 of 12 -> 2 per row */
  .grid-12{grid-template-columns:repeat(12,1fr)}
  .span-3{grid-column:span 3}.span-6{grid-column:span 6}.span-8{grid-column:span 8}
  .methods{grid-template-columns:repeat(5,1fr)}
  .foot-grid{grid-template-columns:repeat(12,1fr)}        /* cols span 4 -> 3 per row */
}

/* ---------- v1.5: Permission toggles (admin/roles) + settings groups ---------- */
.perm-list{display:grid;grid-template-columns:1fr;gap:.5rem;margin:.75rem 0}
.perm-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:#f4fbf4;border:1px solid var(--line);border-radius:.5rem;padding:.55rem .75rem;font-weight:600;cursor:pointer}
.perm-row small{color:#666;font-weight:400}
.switch{position:relative;display:inline-block;width:3rem;height:1.625rem;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .track{position:absolute;inset:0;background:#bbb;border-radius:2rem;transition:.2s}
.switch .track:before{content:"";position:absolute;width:1.25rem;height:1.25rem;left:.1875rem;top:.1875rem;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .track{background:var(--green)}
.switch input:checked + .track:before{transform:translateX(1.375rem)}
.switch input:focus-visible + .track{outline:2px solid var(--orange);outline-offset:2px}
/* v1.5 toggles page: large variant of the same .switch used on roles.php */
.switch.big{width:4rem;height:2.125rem}
.switch.big .track:before{width:1.625rem;height:1.625rem}
.switch input:checked + .track:before{transform:translateX(1.375rem)}
.switch.big input:checked + .track:before{transform:translateX(1.875rem)}
.switch input:disabled + .track{opacity:.75}
.tog-status{font-size:1.05rem}

/* ---------- v1.6: User navbar (Bootstrap-style, plain CSS + vanilla JS) ----------
   All classes are pf- namespaced so nothing here can leak into the admin
   layout (admin keeps the old .top/.nav styles above). Mobile-first:
   below 905px the menu is collapsed behind the hamburger button and the
   dropdowns expand accordion-style inside it; from 905px the menu is a
   horizontal bar with click-to-open dropdown cards. The মাই প্যানেল is a
   dropdown panel anchored to the right of the bar at every size. */
.pf-top{background:var(--green);color:#fff;position:sticky;top:0;z-index:60;box-shadow:0 2px 8px rgba(0,0,0,.16)}
.pf-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .55rem;padding-top:.5rem;padding-bottom:.5rem}
.pf-logo{order:1;color:#fff;text-decoration:none;font-weight:700;font-size:clamp(1.02rem,4vw,1.25rem);line-height:1.15;margin-right:auto}
.pf-logo small{display:block;font-size:.72rem;color:#ffd27a;font-weight:600}
.pf-logo img{max-height:2.75rem;width:auto;display:block}
.pf-acct{order:2;display:flex;align-items:center;gap:.45rem}
.pf-burger{order:3;background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff;border-radius:.45rem;font-size:1.15rem;line-height:1;padding:.42rem .6rem;cursor:pointer;font-family:inherit}
.pf-burger:hover{background:rgba(255,255,255,.12)}
.pf-menu{order:4;flex-basis:100%;display:none;flex-direction:column;gap:.15rem;padding:.35rem 0 .25rem}
.pf-menu.pf-open{display:flex}
.pf-link{color:#fff;text-decoration:none;font-weight:600;padding:.55rem .6rem;border-radius:.45rem}
.pf-link:hover{background:rgba(255,255,255,.12)}
.pf-link.pf-on{background:rgba(255,255,255,.18);color:#ffd27a}
.pf-dd{position:relative}
.pf-dd-btn{display:flex;align-items:center;justify-content:space-between;gap:.4rem;width:100%;background:transparent;border:0;color:#fff;font:inherit;font-weight:600;padding:.55rem .6rem;border-radius:.45rem;cursor:pointer;text-align:left}
.pf-dd-btn:hover{background:rgba(255,255,255,.12)}
.pf-dd-btn.pf-on{color:#ffd27a}
.pf-caret{font-size:.75rem;transition:transform .18s;display:inline-block}
.pf-dd.pf-open .pf-caret,.pf-pwrap.pf-open .pf-caret{transform:rotate(180deg)}
.pf-dd-menu{display:none;flex-direction:column;background:rgba(0,0,0,.16);border-radius:.45rem;margin:.1rem 0 .3rem;padding:.25rem}
.pf-dd.pf-open .pf-dd-menu{display:flex}
.pf-dd-menu a{color:#fff;text-decoration:none;padding:.5rem .7rem;border-radius:.35rem}
.pf-dd-menu a:hover{background:rgba(255,255,255,.14)}
.pf-dd-menu a.pf-on{color:#ffd27a;font-weight:700}
/* Right slot: logged-out auth buttons */
.pf-auth{color:#fff;text-decoration:none;font-weight:600;border:1px solid rgba(255,255,255,.6);padding:.42rem .8rem;border-radius:.5rem;white-space:nowrap}
.pf-auth:hover{background:rgba(255,255,255,.12)}
.pf-auth-reg{background:var(--orange);border-color:var(--orange)}
.pf-auth-reg:hover{background:var(--orange);opacity:.9}
/* v1.9 Batch 3: fixed claim action + compact balance in the sticky user top bar */
.pf-claim-btn{display:inline-flex;align-items:center;background:#ff7a1a;color:#fff;text-decoration:none;font-weight:800;border:1px solid #ffd27a;border-radius:2rem;padding:.48rem .85rem;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.28);line-height:1.15}
.pf-claim-btn:hover{background:#ff8f3d;color:#fff}
.pf-claim-short{display:none}
.pf-panel-balances{background:#e8f3e8;border:1px solid #bcd8c0;border-radius:.55rem;padding:.5rem .65rem;margin:.55rem 0}
.pf-panel-balances .pf-prow{margin:.2rem 0}
/* Right slot: logged-in মাই প্যানেল button + panel */
.pf-pwrap{position:relative}
.pf-user-btn{display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:2rem;padding:.28rem .7rem .28rem .3rem;cursor:pointer;font:inherit}
.pf-user-btn:hover{background:rgba(255,255,255,.2)}
.pf-ava{width:2.1rem;height:2.1rem;border-radius:50%;object-fit:cover;background:#fff;flex:0 0 auto}
.pf-ava-lg{width:3.4rem;height:3.4rem;border-radius:50%;object-fit:cover;background:#e8f3e8;flex:0 0 auto;font-size:1.5rem}
.pf-ava-txt{display:inline-flex;align-items:center;justify-content:center;background:#ffd27a;color:#7a4d00;font-weight:700}
.pf-umeta{display:flex;flex-direction:column;line-height:1.1;text-align:left;min-width:0}
.pf-uname{font-weight:700;max-width:9.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-umeta small{font-size:.68rem;color:#ffd27a;max-width:9.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-panel{display:none;position:absolute;right:0;top:calc(100% + .5rem);width:min(18rem,86vw);background:#fff;color:var(--ink);border-radius:.75rem;box-shadow:0 12px 32px rgba(0,0,0,.28);padding:1rem;z-index:70;text-align:left}
.pf-pwrap.pf-open .pf-panel{display:block}
.pf-phead{display:flex;gap:.7rem;align-items:center;border-bottom:1px solid var(--line);padding-bottom:.7rem;margin-bottom:.6rem;min-width:0}
.pf-pid{display:flex;flex-direction:column;min-width:0}
.pf-pid b{font-size:1.05rem;overflow-wrap:break-word}
.pf-pid span{color:#666;font-size:.9rem}
.pf-prow{margin:.35rem 0;font-size:.95rem}
.pf-panel>a{display:block;color:var(--green);text-decoration:none;font-weight:600;padding:.5rem .4rem;border-radius:.4rem}
.pf-panel>a:hover{background:#e8f3e8}
.pf-panel>a.pf-logout{color:#b71c1c;border-top:1px solid var(--line);margin-top:.35rem;border-radius:0 0 .4rem .4rem}
/* Very small screens: keep the package name visible, but compact the whole
   account cluster and let it wrap inside the sticky bar instead of overflowing. */
@media (max-width:480px){
  .pf-bar{gap:.32rem .4rem}
  .pf-acct{flex:1 1 auto;flex-wrap:wrap;justify-content:flex-end;gap:.32rem;min-width:0}
  .pf-claim-full{display:none}
  .pf-claim-short{display:inline}
  .pf-claim-btn{padding:.42rem .58rem;font-size:.84rem}
  .pf-umeta{display:flex}
  .pf-uname{max-width:4.9rem}
  .pf-umeta small{max-width:4.9rem}
  .pf-user-btn{padding:.28rem .5rem .28rem .3rem}
}
@media (max-width:700px){
  .pf-acct{flex-wrap:wrap;justify-content:flex-end}
  .pf-claim-full{display:none}
  .pf-claim-short{display:inline}
}
/* Desktop >=905px: horizontal bar, floating dropdown cards — and, header v2,
   ONE line: logo + menu + claim button + My Panel never wrap to a second row.
   The menu flexes (and shrinks) in the middle; logo and account cluster are
   fixed-width so the bar stays a single row instead of overflowing. */
@media (min-width:905px){
  .pf-bar{flex-wrap:nowrap;gap:.35rem .5rem}
  .pf-burger{display:none}
  .pf-logo{order:1;margin-right:0;flex:0 0 auto}
  .pf-menu{order:2;display:flex;flex-direction:row;align-items:center;flex:1 1 auto;flex-basis:auto;min-width:0;justify-content:flex-end;gap:.15rem;padding:0}
  .pf-dd:last-child .pf-dd-menu{left:auto;right:0}  /* v15: the rightmost dropdown (রেফার ও বোনাস) now opens leftwards so its card cannot run off the viewport edge */
  .pf-acct{order:3;flex:0 0 auto;flex-wrap:nowrap}
  .pf-link,.pf-dd-btn{padding:.5rem .55rem;white-space:nowrap}
  .pf-claim-btn{padding:.45rem .7rem;font-size:.88rem}
  .pf-uname,.pf-umeta small{max-width:7rem}
  .pf-dd-btn{width:auto;justify-content:flex-start}
  .pf-dd-menu{position:absolute;left:0;top:calc(100% + .35rem);min-width:13.5rem;background:#fff;box-shadow:0 10px 26px rgba(0,0,0,.22);padding:.4rem;margin:0;z-index:70}
  .pf-dd-menu a{color:var(--ink)}
  .pf-dd-menu a:hover{background:#e8f3e8}
  .pf-dd-menu a.pf-on{color:var(--green)}
}

/* ---------- v1.7: Admin interface (left sidebar + right big panel) ----------
   All classes adm- namespaced: user pages are untouched. Structure:
   body.adm-body (flex column, min-height 100vh/100dvh — inherited from body rule)
   > .adm-shell (flex row, flex:1 0 auto) > .adm-sidebar + .adm-main-col
   > footer.foot.adm-foot (classic flex footer from .foot; not fixed or sticky).
   So on short or empty admin pages the footer sits at the viewport bottom,
   and on long pages it ends the page — never floating mid-page. */
.adm-body{background:#eef3ee}
.adm-shell{display:flex;flex:1 0 auto;width:100%;min-height:0;align-items:stretch}
.adm-main-col{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.adm-content{flex:1 0 auto;width:100%}
.adm-guest-main{flex:1 0 auto;width:100%}
/* Sidebar (desktop: sticky column; mobile: fixed off-canvas) */
.adm-sidebar{background:#083d22;color:#eaf5ec;flex:0 0 250px;width:250px;align-self:stretch;max-height:calc(100vh - 2.375rem);position:sticky;top:0;overflow-y:auto;padding:1rem .8rem 1.5rem;display:flex;flex-direction:column;gap:1rem;z-index:90}  /* the cap reserves the one-line admin footer's height, so the sidebar cannot push a short page's shell past the space left for the footer; it still stretches to the shell and scrolls internally */
.adm-brand{display:flex;gap:.6rem;align-items:center;color:#fff;text-decoration:none;font-weight:700;line-height:1.2;padding:.2rem .3rem}
.adm-brand-ico{font-size:1.7rem;line-height:1}
.adm-brand-txt{min-width:0;overflow-wrap:break-word}
.adm-brand-txt small{display:block;font-size:.72rem;color:#ffd27a;font-weight:600;margin-top:.15rem}
.adm-nav{display:flex;flex-direction:column;gap:1rem}
.adm-group{display:flex;flex-direction:column;gap:.15rem}
.adm-group-h{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#9fc7ab;margin:0 .55rem .3rem;font-weight:700}
.adm-item{color:#eaf5ec;text-decoration:none;padding:.55rem .6rem;border-radius:.5rem;font-weight:600;font-size:.97rem}
.adm-item:hover{background:rgba(255,255,255,.12);color:#fff}
.adm-item.adm-on{background:var(--orange);color:#fff}
/* Right-panel top bar */
.adm-topbar{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.7rem;padding:.6rem 1rem;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.adm-burger{display:none;background:var(--green);border:0;color:#fff;border-radius:.45rem;font-size:1.1rem;line-height:1;padding:.45rem .65rem;cursor:pointer;font-family:inherit}
.adm-title{font-size:1.12rem;font-weight:700;color:var(--green);margin-right:auto;min-width:0;overflow-wrap:break-word}
.adm-acct{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.adm-aname{font-weight:700}
.adm-arole{background:#e8f3e8;color:var(--green);border:1px solid #bcd8c0;border-radius:1rem;padding:.08rem .6rem;font-size:.8rem;font-weight:700;white-space:nowrap}
.adm-logout{color:#b71c1c;text-decoration:none;font-weight:700;border:1px solid #e5b4b4;border-radius:.5rem;padding:.35rem .7rem;white-space:nowrap}
.adm-logout:hover{background:#fde8e8}
.adm-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:80}
/* Admin dashboard (v1.7) */
.adm-stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem;min-width:0}
.adm-stat .adm-stat-label{color:#555;font-weight:600;font-size:.95rem}
.adm-stat .adm-stat-num{font-size:clamp(1.35rem,2.5vw,1.7rem);font-weight:800;color:var(--green);margin:.2rem 0;line-height:1.2;overflow-wrap:break-word}
.adm-stat .adm-stat-sub{color:#666;font-size:.88rem}
.adm-stat.neg .adm-stat-num{color:#b71c1c}
.adm-pend{background:#fff8e1;border:1.5px solid #f9a825;border-radius:var(--radius);padding:1rem;margin:.875rem 0}
.adm-pend h3{margin:.1rem 0 .6rem;color:#8d6e00}
.adm-pend-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:#fff;border:1px solid #ffe1a8;border-radius:.6rem;padding:.6rem .8rem;margin:.45rem 0;text-decoration:none;color:var(--ink);font-weight:600}
.adm-pend-row:hover{border-color:#f9a825}
.adm-pend-row .adm-pend-amt{margin-left:auto;color:#555;font-weight:600}
.adm-badge{display:inline-block;background:#d32f2f;color:#fff;border-radius:1rem;min-width:1.7rem;text-align:center;padding:.08rem .5rem;font-weight:800;font-size:.9rem}
.adm-pend-ok{background:#e8f5e9;border:1.5px solid #81c784;border-radius:var(--radius);padding:1rem;margin:.875rem 0;font-weight:700;color:#2e7d32}
/* Mobile <905px: sidebar off-canvas, hamburger visible, content full width */
@media (max-width:904.98px){
  .adm-sidebar{position:fixed;left:0;top:0;bottom:0;height:auto;max-height:none;width:min(270px,82vw);flex:none;transform:translateX(-105%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.3)}
  body.adm-nav-open .adm-sidebar{transform:translateX(0)}
  .adm-burger{display:inline-block}
  .adm-arole{display:none}
}

/* ---------- Pran Food v2: spin wheel, refer earnings, upgrade overview, income detail ---------- */
.pf-spin-box{text-align:center}
.pf-wheel-wrap{position:relative;width:min(340px,86vw);height:min(340px,86vw);margin:1.2rem auto .5rem}
.pf-wheel-pointer{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:2rem;line-height:1;color:#8a6508;z-index:3;text-shadow:0 2px 2px rgba(0,0,0,.3)}
.pf-wheel{position:absolute;inset:0;border-radius:50%;border:10px solid #c9960a;box-shadow:0 0 0 4px #f1c40f,0 10px 30px rgba(0,0,0,.35);overflow:hidden}
.pf-wheel-label{position:absolute;inset:0}
.pf-wheel-label span{display:block;text-align:center;padding-top:15px;font-weight:800;color:#fff;font-size:.92rem;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.65);overflow-wrap:break-word}
.pf-wheel-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9a9a,#c0392b 70%);color:#ffe45e;border:4px solid #f1c40f;font-weight:900;font-size:1.2rem;letter-spacing:.04em;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35);z-index:2;font-family:inherit}
.pf-wheel-hub:disabled{opacity:.65;cursor:not-allowed}
.pf-spin-result{margin-top:1rem}
.pf-spin-hint{color:#555}
/* Refer earnings table: package image + name in one cell */
.pf-ref-pkg{display:flex;align-items:center;gap:.6rem;text-align:left}
.pf-ref-pkg img{width:56px;height:56px;object-fit:cover;border-radius:.5rem;flex:0 0 auto}
@media (max-width:600px){.pf-ref-pkg img{width:44px;height:44px}}
/* Upgrade overview cards + loan alternative */
.pf-up-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.75rem;margin:.9rem 0}
.pf-up-card{border:1px solid var(--line);border-radius:.65rem;padding:.85rem;background:#f4fbf4;text-align:left}
.pf-up-card h4{margin:0 0 .35rem;color:var(--green)}
.pf-up-card p{margin:.25rem 0}
.pf-up-loan{border:1px dashed #e0a800;background:#fff8e6}
.pf-up-terms{margin:.5rem 0}
.pf-up-terms li{margin:.3rem 0}
/* Income chart: per-package paragraph detail rows */
.pf-inc-detail{display:flex;gap:1rem;align-items:flex-start;border:1px solid var(--line);border-radius:.75rem;padding:1rem;margin:.75rem 0;background:#fff;text-align:left}
.pf-inc-detail img{width:130px;height:90px;object-fit:cover;border-radius:.5rem;flex:0 0 auto}
.pf-inc-detail h3{margin:0 0 .35rem}
.pf-inc-detail p{margin:.3rem 0;line-height:1.65}
.pf-inc-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.pf-inc-chip{background:#e8f3e8;color:var(--green);border-radius:1rem;padding:.2rem .7rem;font-weight:700;font-size:.85rem}
@media (max-width:600px){.pf-inc-detail{flex-direction:column}.pf-inc-detail img{width:100%;height:150px}}

/* ---------- Pran Food v2: settings tabs, themes, hero slider ---------- */
.pf-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:.75rem 0}
.pf-tab-btn{background:#fff;border:1px solid var(--line);border-radius:2rem;padding:.5rem 1rem;font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
.pf-tab-btn:hover{border-color:var(--green)}
.pf-tab-btn.pf-tab-on{background:var(--green);color:#fff;border-color:var(--green)}
/* Themes: colour comes from the inline --green/--orange on <body>; these
   rules change shape/spacing/background per theme so a theme is a look,
   not just a colour swap. Admin pages carry no data-theme, so they stay classic. */
body[data-theme="blue"] .hero{background:linear-gradient(135deg,var(--green),#0ea5e9)}
body[data-theme="blue"] .card,body[data-theme="blue"] .box{border-radius:.5rem}
body[data-theme="blue"] .btn{border-radius:.35rem}
body[data-theme="orange"] .btn{border-radius:2rem}
body[data-theme="orange"] .card,body[data-theme="orange"] .box{border-radius:1.25rem}
body[data-theme="orange"] .hero{background:linear-gradient(135deg,var(--green),#f97316)}
body[data-theme="purple"] .btn{border-radius:.25rem}
body[data-theme="purple"] .card{box-shadow:0 8px 24px rgba(91,45,144,.16)}
body[data-theme="purple"] .hero{background:linear-gradient(135deg,var(--green),#9333ea)}
body[data-theme="dark"]{--bg:#111827;--ink:#e5e7eb;--line:#374151}
body[data-theme="dark"] .box,body[data-theme="dark"] .card{background:#1f2937}
body[data-theme="dark"] .hello{background:#1f2937}
body[data-theme="dark"] input,body[data-theme="dark"] select,body[data-theme="dark"] textarea{background:#111827;color:#e5e7eb;border-color:#374151}
body[data-theme="dark"] table{color:#e5e7eb}
body[data-theme="dark"] th{background:#1f2937}
/* Hero slider (index.php): one slide visible, auto-rotates, dots + arrows */
.pf-slider{position:relative;overflow:hidden;border-radius:.625rem;margin:.75rem 0}
.pf-slide{display:none}
.pf-slide.pf-slide-on{display:block}
.pf-slide img{width:100%;max-height:17.5rem;object-fit:cover;border-radius:.625rem;display:block}
.pf-slide-txt{padding:.75rem 0 .25rem;text-align:center}
.pf-slide-txt h3{margin:.25rem 0}
.pf-slide-txt p{margin:.25rem 0}
.pf-slider-dots{display:flex;gap:.4rem;justify-content:center;margin:.5rem 0}
.pf-slider-dot{width:.7rem;height:.7rem;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0}
.pf-slider-dot.pf-dot-on{background:#ffd27a}
.pf-slider-arrow{position:absolute;top:38%;background:rgba(0,0,0,.45);color:#fff;border:0;border-radius:50%;width:2.2rem;height:2.2rem;font-size:1.2rem;cursor:pointer;z-index:2}
.pf-slider-prev{left:.5rem}
.pf-slider-next{right:.5rem}

/* ---------- Pran Food v3: home shortcut buttons (screenshot layout) ---------- */
.pf-home-btns{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem;margin:1.5rem 0}
@media (min-width:600px){.pf-home-btns{grid-template-columns:repeat(4,1fr)}}
.pf-home-btn{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-decoration:none}
.pf-home-circle{width:9.5rem;height:9.5rem;max-width:100%;aspect-ratio:1;border-radius:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;font-size:3rem;color:#fff;box-shadow:none;transition:transform .2s ease}
.pf-home-circle img{width:100%;height:100%;object-fit:cover;border-radius:0}
.pf-home-btn:hover .pf-home-circle,.pf-home-btn:focus-visible .pf-home-circle{transform:translateY(-4px) scale(1.07);box-shadow:none;background:transparent}
.pf-home-name{font-size:1.35rem;font-weight:700;color:#1d4ed8;text-align:center;line-height:1.3}
@media (max-width:480px){.pf-home-circle{width:7rem;height:7rem;font-size:2.2rem}.pf-home-name{font-size:1.1rem}}

/* ---------- Pran Food v4: target-goal detail badge (matches pf-inc-detail) ---------- */
.pf-inc-detail .pf-target-badge{width:130px;height:90px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:2.5rem;background:#e8f3e8;border-radius:.5rem}
@media (max-width:600px){.pf-inc-detail .pf-target-badge{width:100%;height:90px}}

/* ---------- Pran Food v6: dashboard profile card (screenshot layout) ---------- */
.pf-dash-main{display:flex;gap:1rem;align-items:flex-start}
.pf-dash-info{flex:1;min-width:220px}
.pf-dash-ava{width:90px;height:90px;border-radius:50%;object-fit:cover;flex:0 0 auto;font-size:2rem}
.pf-dash-line{margin:.3rem 0;line-height:1.6}
.pf-dash-minibar{display:grid;grid-template-columns:6.5rem 1fr auto;gap:.5rem;align-items:center;margin:.4rem 0}
.pf-dash-pills{display:flex;flex-direction:column;gap:.75rem;flex:0 0 auto}
.pf-dash-pill{background:#2563eb;color:#fff;border-radius:1rem;padding:.75rem 1.25rem;text-align:center;min-width:11rem;font-size:1rem}
.pf-dash-pill b{font-size:1.25rem}
@media (max-width:600px){.pf-dash-main{flex-direction:column}.pf-dash-pills{flex-direction:row;width:100%}.pf-dash-pill{flex:1;min-width:0}}

/* ---------- Pran Food v8: spin prize badge (no-image fallback, like target badge) ---------- */
.pf-inc-detail .pf-prize-badge{width:130px;height:90px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:2.5rem;background:#fff3e0;border-radius:.5rem}
@media (max-width:600px){.pf-inc-detail .pf-prize-badge{width:100%;height:90px}}

/* ---------- Pran Food v10: prize image inside a wheel segment ---------- */
.pf-wheel-label img.pf-wheel-img{width:52px;height:36px;object-fit:cover;border-radius:6px;display:block;margin:3px auto 0;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}

/* ---------- Pran Food v12: packages buy / upgrade tabs ---------- */
.pf-pkg-tabs{display:flex;gap:.5rem;margin:1rem 0 .25rem;flex-wrap:wrap}
.pf-pkg-tab{background:#fff;border:1px solid var(--line);border-radius:.5rem;padding:.625rem 1.25rem;font-size:1rem;font-weight:700;cursor:pointer;color:#333}
.pf-pkg-tab.active{background:var(--orange);border-color:var(--orange);color:#fff}

/* ---------- Pran Food v13: claim page two-column summary ---------- */
.pf-claim-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
@media (max-width:700px){.pf-claim-wrap{grid-template-columns:1fr}}

/* ---------- Pran Food v16: claim button at the right end of the target chips row ---------- */
.pf-inc-chips .pf-inc-claim{margin:0 0 0 auto;align-self:center}