/* Customer dashboard (Monthly client + Cash / EasyPaisa). Loaded after Dashboard.css. */
.page { max-width: 720px; }
.ur { display:block; font-family:"Noto Nastaliq Urdu", serif; font-size:.78rem; font-weight:400; line-height:1.9;
  direction:rtl; text-align:left; unicode-bidi:plaintext; opacity:.75; letter-spacing:0; text-transform:none; }

/* Pay card */
.pay { border-radius:20px; overflow:hidden; margin-bottom:14px; border:1px solid var(--gold-dark);
  box-shadow:0 10px 26px rgba(15,44,28,.22); }
.pay-top { padding:22px 22px 18px; color:#fff;
  background: radial-gradient(circle at 100% 0%, rgba(236,210,139,.22), transparent 45%),
              linear-gradient(135deg, var(--green), var(--green-dark)); }
.pay-label { margin:0; font-size:.95rem; font-weight:500; color:var(--gold-light); }
.pay-label .ur { color:var(--gold-light); }
.pay-amount { margin:6px 0 4px; font-size:2.6rem; font-weight:700; line-height:1.1; }
.pay-for { margin:0; font-size:.95rem; color:rgba(255,255,255,.85); }
.pay-due { display:inline-block; margin-top:12px; padding:5px 14px; border-radius:999px; font-size:.85rem; font-weight:600;
  background:var(--gold-light); color:var(--green-deep); }
.pay-how { padding:16px 22px 16px; background:#fff; }
.ep { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; background:var(--gold-tint); border:1px solid var(--line); }
.ep-text { flex:1; min-width:0; }
.ep-logo { flex-shrink:0; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:#3bb54a; color:#fff; font-weight:700; font-size:.8rem; }
.ep-num { margin:0; font-size:1.3rem; font-weight:700; letter-spacing:.04em; color:var(--green-deep); }
.ep-name { margin:0; font-size:.82rem; color:var(--muted); }
.btn-copy { flex-shrink:0; min-height:40px; padding:6px 14px; border-radius:12px; font-size:.88rem; font-weight:600;
  background:#fff; border:1.5px solid var(--green); color:var(--green); }
.all-paid { padding:26px 22px; color:#fff; background:linear-gradient(135deg, var(--green), var(--green-dark)); }
.all-paid p { margin:0; }
.all-paid p:only-child { font-size:1.6rem; font-weight:700; }

.month-note { display:flex; align-items:center; gap:12px; margin-bottom:26px; padding:14px 16px; border-radius:16px;
  background:#fff; border:1px solid var(--line); }
.month-note p { margin:0; font-size:.92rem; color:var(--ink); }
.month-note small { display:block; color:var(--muted); font-size:.8rem; }

/* Simple lists */
.box { background:#fff; border:1px solid var(--line); border-radius:18px; margin-bottom:22px; overflow:hidden;
  box-shadow:0 4px 14px rgba(32,85,55,.06); }
.box-title { margin:0; padding:14px 18px; font-family:"Cinzel", serif; font-size:1.05rem; font-weight:600; color:var(--green);
  background:var(--gold-tint); border-bottom:1px solid var(--line); }
.box-title .ur { font-family:"Noto Nastaliq Urdu", serif; color:var(--gold-dark); }
.list { list-style:none; margin:0; padding:0; }
.list li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid #f0ead9; }
.list li:last-child { border-bottom:0; }
.li-main { font-weight:600; color:var(--ink); }
.li-sub { display:block; font-size:.82rem; color:var(--muted); font-weight:400; }
.li-amt { font-weight:600; color:var(--green); white-space:nowrap; text-align:right; }
.tag { display:inline-block; margin-top:3px; padding:2px 10px; border-radius:999px; font-size:.75rem; font-weight:600; }
.tag-ok { background:var(--green-tint); color:var(--green); }
.tag-due { background:var(--red-tint); color:var(--red); }
.tag-run { background:var(--gold-tint); color:var(--gold-dark); }
.tick { color:#2f7a4d; }
details > summary { list-style:none; cursor:pointer; padding:13px 18px; text-align:center; font-size:.88rem; font-weight:600;
  color:var(--green); border-top:1px solid var(--line); background:#fbf9f3; }
details > summary::-webkit-details-marker { display:none; }
details[open] > summary .more { display:none; }
details:not([open]) > summary .less { display:none; }
.group-head { padding:10px 18px 6px; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-dark); background:#fbf9f3; }
.empty { padding:16px 18px; color:var(--muted); font-size:.9rem; }

.list-head { display:flex; justify-content:space-between; padding:8px 18px; font-size:.7rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid #f0ead9; }
.amt-bill { color:var(--ink); }
.li-month { cursor:pointer; transition:background .15s ease; }
.li-month:hover, .li-month:focus-visible { background:var(--green-tint); outline:none; }
.li-main { flex:1; min-width:0; }
.chev { flex-shrink:0; margin-left:-4px; font-size:1.5rem; line-height:1; color:var(--gold); }

/* Month drawer */
.backdrop { position:fixed; inset:0; z-index:100; background:rgba(15,44,28,.45); opacity:0; pointer-events:none; transition:opacity .25s ease; }
.backdrop.open { opacity:1; pointer-events:auto; }
.drawer { position:fixed; top:0; right:0; bottom:0; z-index:101; width:min(440px, 100vw); display:flex; flex-direction:column;
  background:var(--ivory); box-shadow:-12px 0 30px rgba(15,44,28,.25); transform:translateX(100%); transition:transform .28s ease, visibility 0s .28s; visibility:hidden; }
.drawer.open { transform:none; visibility:visible; transition:transform .28s ease; }   /* hidden when closed, so its shadow can't show at the edge */
.dr-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 18px 16px; color:#fff;
  background:linear-gradient(135deg, var(--green), var(--green-dark)); border-bottom:3px solid var(--gold); }
.dr-title { margin:0; font-family:"Cinzel", serif; font-size:1.35rem; font-weight:700; color:var(--gold-light); }
.dr-head .tag { margin-top:6px; }
.dr-close { flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--gold); background:transparent;
  color:var(--gold-light); font-size:1.2rem; line-height:1; }
.dr-body { flex:1; overflow-y:auto; padding:16px; }
.dr-tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:16px; }
.dr-tile { padding:12px; border-radius:14px; background:#fff; border:1px solid var(--line); }
.dr-tile span { display:block; font-size:.68rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.dr-tile b { font-size:1.05rem; color:var(--green); white-space:nowrap; }
.dr-note { margin:0 0 16px; padding:10px 14px; border-radius:12px; font-size:.85rem; background:var(--gold-tint); color:var(--gold-dark); }
.dr-sec { margin:0 0 8px; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-dark); }
.dr-box { margin-bottom:16px; border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--line); }
.dr-row { display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:10px; padding:11px 14px;
  border-bottom:1px solid #f0ead9; font-size:.9rem; }
.dr-row:last-child { border-bottom:0; }
.dr-row.hd { padding:8px 14px; font-size:.66rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); background:#fbf9f3; }
.dr-row .c { text-align:center; min-width:42px; }
.dr-row .r { text-align:right; min-width:62px; font-weight:600; color:var(--green); }
.dr-row small { display:block; color:var(--muted); font-size:.75rem; }
.dr-row.total { font-weight:700; background:var(--green-tint); color:var(--green); }
.dr-pay { display:flex; justify-content:space-between; padding:11px 14px; border-bottom:1px solid #f0ead9; font-size:.9rem; }
.dr-pay:last-child { border-bottom:0; }
.dr-pay b { color:#2f7a4d; }
.dr-empty { padding:14px; color:var(--muted); font-size:.88rem; }
body.no-scroll { overflow:hidden; }
@media (prefers-reduced-motion: reduce) { .drawer, .backdrop { transition:none; } }
/* Pay card situations */
.pay-unpaid { margin:10px 0 0; padding:0; list-style:none; font-size:.9rem; color:rgba(255,255,255,.9); }
.pay-unpaid li { display:flex; justify-content:space-between; padding:4px 0; border-top:1px dashed rgba(236,210,139,.3); }
.pay-unpaid li:first-child { border-top:0; }
.pay-due.late { background:#ffe1dc; color:#8a2416; }
.all-paid .pay-label { margin-bottom:6px; }
.state-big { margin:4px 0 6px; font-size:1.7rem; font-weight:700; line-height:1.2; color:#fff; }
.state-good { color:#b8e6c4; }
.state-small { margin-top:10px; padding-top:10px; font-size:.85rem; border-top:1px dashed rgba(236,210,139,.35); }
@media (max-width:768px) { .pay-amount { font-size:2.3rem; } .pay-top, .pay-how { padding-left:18px; padding-right:18px; } }

.usage .bottle-chart { border-bottom:0; padding-top:16px; }
.usage .bar-value { visibility:visible; position:relative; z-index:2; padding:0 4px; border-radius:4px; background:#fff; }
.usage .bar-col.now .bar { background:repeating-linear-gradient(135deg, #a9cdb5 0 5px, #c6dfcd 5px 10px);
  border:1.5px dashed #2f7a4d; border-bottom:0; }
.usage .bar-col.now .bar-value { color:var(--muted); }
.usage .bar-col.now .bar-label { color:var(--green); font-weight:600; }
.usage .chart-head { margin-bottom:10px; }
.usage .bar-tip { display:none; }
.key-now { display:inline-block; width:12px; height:12px; border-radius:3px; border:1.5px dashed #2f7a4d;
  background:repeating-linear-gradient(135deg, #a9cdb5 0 3px, #c6dfcd 3px 6px); vertical-align:-1px; }

/* Monthly: the last payment, above the month rows */
.last-pay { display:flex; gap:10px; align-items:center; margin:0; padding:11px 18px; font-size:.9rem; color:var(--ink);
  background:var(--green-tint); border-bottom:1px solid #dfe9e1; }
.last-pay b { color:var(--green); }
/* "Tap a month" in the list header */
.list-head .tap-now { font-size:.8rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--green); }
.chev { width:28px; height:28px; margin-left:2px; border-radius:50%; display:grid; place-items:center;
  font-size:1.25rem; line-height:1; padding-bottom:2px; color:var(--green-deep); background:var(--gold-tint); border:1px solid var(--gold-light); }
.li-month:hover .chev, .li-month:focus-visible .chev { background:var(--gold); color:#fff; }
.box > .list > .li-month:first-child .chev { animation:tapPulse 1.6s ease-out .6s 3; }
@keyframes tapPulse {
  0% { box-shadow:0 0 0 0 rgba(201,162,74,.65); }
  70% { box-shadow:0 0 0 10px rgba(201,162,74,0); }
  100% { box-shadow:0 0 0 0 rgba(201,162,74,0); }
}
@media (prefers-reduced-motion: reduce) { .box > .list > .li-month:first-child .chev { animation:none; } }

.ep-holder { color:var(--ink); font-weight:600; }

.btn-pay-now { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:12px; padding:14px;
  border:0; border-radius:14px; font-size:1.05rem; font-weight:700; text-decoration:none; color:#fff;
  background:#1e7e34; box-shadow:0 6px 16px rgba(30,126,52,.3); }
.btn-pay-now:hover, .btn-pay-now:focus { color:#fff; background:#186a2b; }
.btn-pay-now:focus-visible { outline:3px solid var(--green-deep); outline-offset:2px; }
.btn-pay-now .go { font-size:1.05em; line-height:1; }
.toast { position:fixed; left:50%; bottom:22px; z-index:130; max-width:calc(100vw - 32px); padding:12px 16px; border-radius:12px;
  font-size:.88rem; font-weight:500; color:#fff; background:var(--green-deep); box-shadow:0 8px 22px rgba(0,0,0,.25);
  transform:translate(-50%, 20px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.toast.show { transform:translate(-50%, 0); opacity:1; }
@media (prefers-reduced-motion: reduce) { .toast { transition:none; } }

/* ---------- Cash / EasyPaisa extras ---------- */
.pay { margin-bottom:24px; }
.pay-or { margin:8px 0 0; text-align:center; font-size:.85rem; color:var(--muted); }
.dr-row.cash { grid-template-columns:1fr auto auto; }
.dr-row .tag { margin:0; justify-self:end; }
.dr-row .amt { display:block; font-weight:600; color:var(--green); text-align:right; }
.how { font-size:.75rem; color:var(--muted); }
.month-note .dot { flex-shrink:0; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--green-tint); font-size:1.2rem; }

/* Keep the Invite & Earn button out of the way of the month panel and messages */
body.no-scroll .invite-float { display:none; }
.toast { bottom:96px; z-index:10000; }

/* Phones with large text: let the amount column wrap so the › button always fits */
.list li { gap:10px; }
.li-amt { white-space:normal; min-width:0; flex-shrink:1; }
.list .li-main { min-width:6.5em; }
.chev { flex-shrink:0; }


/* ---------- Invite & Earn ---------- */
.invite { scroll-margin-top:16px; }
.invite.flash { animation:inviteFlash 1.4s ease-out; }
@keyframes inviteFlash { 0%, 30% { box-shadow:0 0 0 4px var(--gold); } 100% { box-shadow:0 4px 14px rgba(32,85,55,.06); } }
.inv-body { padding:18px; }
.inv-head { margin:0; font-size:1.12rem; font-weight:700; line-height:1.3; color:var(--ink); }
.inv-head b { color:#fff; background:var(--green); padding:0 6px; border-radius:6px; }
.inv-get { margin:6px 0 0; font-size:.9rem; line-height:1.45; color:var(--muted); }
.inv-get b { color:var(--green); }
.inv-worth { display:inline-block; padding:1px 9px; border-radius:999px; font-size:.82em; font-weight:700; white-space:nowrap;
  vertical-align:1px; background:var(--gold-tint); color:var(--gold-dark); border:1px solid var(--gold); }
.inv-earned { margin:6px 0 0; font-size:.88rem; color:var(--ink); }
.inv-earned b { color:var(--green); }
.btn-wa { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:14px; padding:14px;
  border-radius:14px; font-size:1.05rem; font-weight:700; text-decoration:none; color:#fff; background:#1e7e34;
  box-shadow:0 6px 16px rgba(30,126,52,.3); }
.btn-wa:hover, .btn-wa:focus { color:#fff; background:#186a2b; }
.btn-wa:focus-visible { outline:3px solid var(--green-deep); outline-offset:2px; }
.inv-code { margin:8px 0 0; text-align:center; font-size:.85rem; color:var(--muted); }
.inv-code b { color:var(--ink); letter-spacing:.08em; }
.inv-more-body { padding:4px 18px 16px; background:#fbf9f3; }
.inv-steps { margin:12px 0 0; padding:0; list-style:none; counter-reset:step; display:grid; gap:8px; }
.inv-steps li { counter-increment:step; display:flex; gap:10px; align-items:center; font-size:.88rem; color:var(--ink); }
.inv-steps li::before { content:counter(step); flex-shrink:0; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:.75rem; font-weight:700; color:var(--green-deep); background:var(--gold-light); }
.inv-steps li > span { min-width:0; }
.invite .list { margin:12px -18px -16px; border-top:1px solid var(--line); background:#fff; }
.invite .list .tag { flex-shrink:0; margin:0; }

.invite-float { position:fixed; right:16px; bottom:20px; z-index:9999; display:flex; align-items:center; gap:8px;
  padding:11px 18px 11px 14px; border-radius:999px; font-size:.92rem; font-weight:600; text-decoration:none; white-space:nowrap;
  color:var(--green-deep); background:linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  border:2px solid var(--green); box-shadow:0 6px 18px rgba(15,44,28,.35); transition:opacity .2s ease, transform .2s ease; }
.invite-float span { font-size:1.15rem; line-height:1; }
.invite-float:hover, .invite-float:focus { color:var(--green-deep); }
.invite-float:focus-visible { outline:3px solid var(--green-deep); outline-offset:2px; }
.invite-float.away { opacity:0; transform:translateY(12px); pointer-events:none; }
/* First visit: only the welcome tour (tour.js sets data-first-visit) */
[data-first-visit] .invite-float, [data-first-visit] .push-card { display:none !important; }
@media (prefers-reduced-motion: reduce) { .invite.flash { animation:none; } .invite-float { transition:none; } }

/* ---------- Invite: the 3D gift box ----------
   A real 3D box (CSS cube) that sways; while the card is on screen (.play, dashboard.js) the lid lifts and
   3 water bottles pop out = the 3 free bottles. It tilts with the phone (Android) or the mouse (--tx / --ty). */
.inv-hero { display:flex; gap:14px; align-items:center; }
.inv-copy { flex:1; min-width:0; }
.gift3d { --s:56px; --tx:0deg; --ty:0deg; position:relative; flex-shrink:0; width:104px; height:120px; margin-top:4px; perspective:460px; cursor:pointer;
  -webkit-tap-highlight-color:transparent; }
.gift-tilt, .gift-scene, .gift-box, .gift-lid { transform-style:preserve-3d; }
.gift-tilt { position:absolute; left:calc(50% - var(--s) / 2); bottom:20px; width:var(--s); height:var(--s);
  transform:rotateX(var(--tx)) rotateY(var(--ty)); transition:transform .25s ease-out; }
.gift-scene { position:absolute; inset:0; transform:rotateX(-18deg) rotateY(-32deg); }
.gift3d.play .gift-scene { animation:giftSway 5s ease-in-out infinite alternate; }
@keyframes giftSway { from { transform:rotateX(-18deg) rotateY(-40deg); } to { transform:rotateX(-14deg) rotateY(-22deg); } }
.gift-box { position:absolute; inset:0; }
.gift-box i, .gift-lid i { position:absolute; display:block; backface-visibility:hidden; }
/* Box sides: green with a gold ribbon down the middle */
.gift-box i { inset:0; background:linear-gradient(90deg, transparent 41%, #e8c66a 41%, #c9a24a 59%, transparent 59%),
  linear-gradient(160deg, #2f8a55, #1a5a36 70%, #134429); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
.gift-box .f-front { transform:translateZ(calc(var(--s) / 2)); }
.gift-box .f-back { transform:rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.gift-box .f-right { transform:rotateY(90deg) translateZ(calc(var(--s) / 2)); filter:brightness(.78); }
.gift-box .f-left { transform:rotateY(-90deg) translateZ(calc(var(--s) / 2)); filter:brightness(.78); }
.gift-box .f-bottom { transform:rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.gift-box .f-inside { background:#0d3320; transform:rotateX(90deg) translateZ(calc(var(--s) / 2 - 2px)); backface-visibility:visible; }
/* Lid: a little wider than the box, 13px high */
.gift-lid { --l:calc(var(--s) + 8px); --h:13px; position:absolute; left:-4px; top:calc(var(--h) * -1); width:var(--l); height:var(--h);
  transform-origin:0 100% 0; }
.gift-lid i { left:0; top:0; width:var(--l); height:var(--h);
  background:linear-gradient(90deg, transparent 42%, #f0d27a 42%, #c9a24a 58%, transparent 58%), linear-gradient(180deg, #34975d, #1d6a40); }
.gift-lid .l-front { transform:translateZ(calc(var(--l) / 2)); }
.gift-lid .l-back { transform:rotateY(180deg) translateZ(calc(var(--l) / 2)); }
.gift-lid .l-right { transform:rotateY(90deg) translateZ(calc(var(--l) / 2)); filter:brightness(.8); }
.gift-lid .l-left { transform:rotateY(-90deg) translateZ(calc(var(--l) / 2)); filter:brightness(.8); }
.gift-lid .l-top { height:var(--l); top:calc((var(--h) - var(--l)) / 2); transform:rotateX(90deg) translateZ(calc(var(--h) / 2));
  background:linear-gradient(90deg, transparent 42%, #f0d27a 42%, #c9a24a 58%, transparent 58%),
             linear-gradient(0deg, transparent 42%, #f0d27a 42%, #c9a24a 58%, transparent 58%), linear-gradient(135deg, #3aa366, #1d6a40); }
/* Bow: two gold loops standing on the lid */
.gift-lid .bow { top:-9px; width:14px; height:10px; border:3px solid #e8c66a; border-radius:50%; background:none;
  backface-visibility:visible; box-shadow:inset 0 0 0 1px rgba(150,110,30,.35); }
.gift-lid .bow-a { left:calc(var(--l) / 2 - 14px); transform:rotate(-24deg); }
.gift-lid .bow-b { left:calc(var(--l) / 2); transform:rotate(24deg); }
.gift-shadow { position:absolute; left:50%; bottom:12px; width:78px; height:14px; margin-left:-39px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(15,44,28,.32), transparent); }
/* The 3 bottles that pop out (flat, in front of the box) */
.gift-pop { position:absolute; left:0; right:0; bottom:56px; height:56px; z-index:2; pointer-events:none; }
.pop-b { position:absolute; left:50%; bottom:0; width:20px; height:33px; margin-left:-10px; opacity:0;
  filter:drop-shadow(0 3px 3px rgba(15,44,28,.25)); }
.spark { position:absolute; width:6px; height:6px; border-radius:50%; background:#f0d27a; opacity:0; box-shadow:0 0 6px #f0d27a; }
.spark.s1 { left:18%; top:30%; } .spark.s2 { right:16%; top:18%; } .spark.s3 { left:50%; top:-4%; }

/* Opening, every 5 s while the card is on screen. Only transform and opacity move, so the phone's
   graphics chip does the work and nothing on the page has to be laid out again. */
.gift3d.play .gift-lid { animation:lidOpen 5s ease-in-out infinite; }
.gift3d.play .pop-b { animation:popUp 5s ease-in-out infinite; }
.gift3d.play .b1 { --x:-26px; --r:-16deg; }
.gift3d.play .b2 { --x:0px; --r:0deg; animation-delay:.08s; }
.gift3d.play .b3 { --x:26px; --r:16deg; animation-delay:.16s; }
.gift3d.play .spark { animation:spark 5s ease-out infinite; }
.gift3d.play .s2 { animation-delay:.15s; } .gift3d.play .s3 { animation-delay:.3s; }
@keyframes lidOpen {
  0%, 18% { transform:none; }
  30%, 70% { transform:translateY(-14px) translateX(-8px) rotateZ(-20deg); }
  82%, 100% { transform:none; }
}
@keyframes popUp {
  0%, 22% { opacity:0; transform:translate(0, 26px) scale(.4) rotate(0); }
  36% { opacity:1; transform:translate(var(--x), -8px) scale(1.08) rotate(var(--r)); }
  42%, 68% { opacity:1; transform:translate(var(--x), -2px) scale(1) rotate(var(--r)); }
  80%, 100% { opacity:0; transform:translate(0, 26px) scale(.4) rotate(0); }
}
@keyframes spark { 0%, 32% { opacity:0; transform:scale(.2); } 40% { opacity:1; transform:scale(1.2); } 55%, 100% { opacity:0; transform:scale(.4); } }

/* Goal: N friends = a whole month free */
.inv-goal { display:flex; align-items:center; gap:10px; margin-top:14px; padding:9px 12px; border-radius:12px; font-size:.85rem;
  color:var(--ink); background:var(--gold-tint); border:1px solid var(--line); }
.inv-goal b { color:var(--green); }
.goal-dots { display:flex; gap:3px; flex-shrink:0; }
.goal-dots i { width:8px; height:14px; border-radius:3px 3px 2px 2px; border:1.5px solid #8fbfdc; background:#fff; }
.goal-dots i.on { background:linear-gradient(90deg, #5fb3e6, #d9f1ff 45%, #3a95d1); border-color:#2f86c0; }
.inv-tip { margin:8px 0 0; text-align:center; font-size:.8rem; color:var(--muted); }

/* A light sweeping across the WhatsApp button now and then */
.invite .btn-wa { position:relative; overflow:hidden; }
.invite .btn-wa::after { content:""; position:absolute; top:0; bottom:0; left:0; width:40%; pointer-events:none;
  transform:translateX(-150%) skewX(-20deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent); }
.invite.play .btn-wa::after { animation:btnShine 4s ease-in-out 1.5s infinite; }
@keyframes btnShine { 0%, 65% { transform:translateX(-150%) skewX(-20deg); } 100% { transform:translateX(325%) skewX(-20deg); } }

@media (prefers-reduced-motion: reduce) {
  .gift-scene, .invite .btn-wa::after { animation:none; }
  .gift3d .gift-lid, .gift3d.play .gift-lid { animation:none; transform:translateY(-14px) translateX(-8px) rotateZ(-20deg); }
  .gift3d .pop-b, .gift3d.play .pop-b { animation:none; opacity:1; transform:translate(var(--x), -2px) rotate(var(--r)); }
  .gift3d .b1 { --x:-26px; --r:-16deg; } .gift3d .b3 { --x:26px; --r:16deg; } .gift3d .b2 { --x:0px; --r:0deg; }
  .gift-tilt { transition:none; }
}
.invite .btn-wa .ur:empty { display:none; }
.wa-bubble { margin:12px 0 0; padding:10px 12px; border-radius:4px 12px 12px 12px; white-space:pre-wrap; overflow-wrap:anywhere;
  font-size:.85rem; line-height:1.5; color:#111b21; background:#d9fdd3; box-shadow:0 1px 1px rgba(0,0,0,.1); }

/* Welcome tour (src/public/Js/tour.js) */
.btn-help { flex-shrink:0; width:36px; height:36px; padding:0; border-radius:50%; border:1.5px solid var(--gold);
  color:var(--gold-light); background:transparent; font-weight:600; font-size:1.05rem; line-height:1; }
.btn-help:hover, .btn-help:focus-visible { color:var(--green-deep); background:var(--gold-light); }
.tour-layer { position:fixed; inset:0; z-index:20000; }
.tour-hole { position:absolute; z-index:20001; border-radius:16px; pointer-events:none;
  box-shadow:0 0 0 3px var(--gold-light), 0 0 0 9999px rgba(15,44,28,.72); transition:all .3s ease; }
.tour-bubble { position:absolute; z-index:20002; padding:16px 16px 12px; border-radius:16px; color:var(--ink); background:#fff;
  border-top:4px solid var(--gold); box-shadow:0 12px 32px rgba(15,44,28,.35); transition:top .3s ease, left .3s ease; }
.tour-count { margin:0 0 2px; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-dark); }
.tour-title { margin:0 0 6px; font-family:"Poppins", sans-serif; font-size:1.05rem; font-weight:600; color:var(--green); }
.tour-text { margin:0; font-size:.92rem; line-height:1.5; }
.tour-ur { margin:6px 0 0; font-family:"Noto Nastaliq Urdu", serif; font-size:.8rem; line-height:2; color:var(--muted); text-align:right; }
.tour-btns { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
.tour-nav { display:flex; gap:8px; }
.tour-btns button { min-height:44px; border-radius:999px; font-weight:600; font-size:.92rem; }
.tour-skip { padding:0 6px; border:0; color:var(--muted); background:none; }
.tour-back { width:44px; border:1.5px solid var(--line); color:var(--green); background:#fff; font-size:1.3rem; line-height:1; }
.tour-next { padding:0 22px; border:0; color:#fff; background:var(--green); }
.tour-next:focus-visible, .tour-back:focus-visible, .tour-skip:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
body.tour-on .invite-float { display:none; }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-bubble { transition:none; } }

/* ---------- "Not right?" / "Paid but not showing?" (disputes, src/disputes.js) ---------- */
.told [hidden], .dispute [hidden] { display:none !important; }
/* What the customer told us, at the top of the khata */
.told { list-style:none; margin:0; padding:0; border-bottom:1px solid var(--line); }
.told li { display:flex; align-items:flex-start; gap:10px; padding:10px 18px; font-size:.86rem; color:var(--ink);
  background:var(--gold-tint); border-top:1px solid #f0e4c0; }
.told li:first-child { border-top:0; }
.told li.told-fixed, .told li.told-checked { background:var(--green-tint); border-top-color:#dfe9e1; }
.told-icon { flex-shrink:0; line-height:1.5; }
.told-main { flex:1; min-width:0; }
.told-reply { display:block; margin-top:4px; color:var(--green-deep); }
.told .tag { flex-shrink:0; margin:0; }

/* In the month panel */
.dr-hint { margin:-2px 0 8px; font-size:.8rem; color:var(--muted); }
.dr-hint b { color:var(--red); font-weight:600; }
.dr-hint .ur { font-size:.72rem; }
.dr-wrong { display:block; margin-top:4px; padding:2px 10px; border-radius:999px; font-size:.74rem; font-weight:600; line-height:1.6;
  color:var(--red); background:#fff; border:1px solid #e2a79f; }
.dr-wrong:hover, .dr-wrong:focus-visible { color:#fff; background:var(--red); outline:none; }
.dr-told { display:block; margin-top:4px; font-size:.74rem; font-weight:600; color:var(--gold-dark); }
.dr-paid { display:block; padding:0; border:0; background:none; font-size:.85rem; color:var(--muted); text-align:left; }
.dr-paid { margin:-6px 0 12px 2px; }
.dr-paid b { color:var(--red); font-weight:600; text-decoration:underline; }

/* The "Tell us" panel */
.dp-wait { margin:0 0 12px; padding:8px 12px; border-radius:10px; font-size:.82rem; color:var(--ink); background:var(--gold-tint); }
.dp-backdrop { z-index:102; }
.drawer.dispute { z-index:103; }
.dp-ur { display:block; margin-top:2px; font-family:"Noto Nastaliq Urdu", serif; font-size:.8rem; line-height:1.9; color:var(--gold-light); opacity:.85; }
#dpForm { margin:0; }
.dp-day { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding:14px; border-radius:14px; background:#fff; border:1px solid var(--line); }
.dp-day-icon { flex-shrink:0; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:1.2rem; background:var(--green-tint); }
.dp-day b { display:block; font-size:1.05rem; color:var(--ink); }
.dp-day span { font-size:.88rem; color:var(--muted); }
.dp-q { margin:0 0 8px; font-size:.98rem; font-weight:600; color:var(--ink); }
.dp-q .ur { font-size:.76rem; color:var(--muted); }
.dp-opt { font-size:.8rem; font-weight:400; color:var(--muted); }
.dp-step { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:12px; }
.dp-step button { width:56px; height:56px; border-radius:50%; font-size:1.8rem; line-height:1; color:var(--green);
  background:#fff; border:2px solid var(--green); }
.dp-step button:active { background:var(--green-tint); }
.dp-step input { width:86px; height:64px; text-align:center; font-size:2rem; font-weight:700; color:var(--ink);
  border-radius:14px; border:1.5px solid var(--line); background:#fff; -moz-appearance:textfield; }
.dp-step input::-webkit-inner-spin-button, .dp-step input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.dp-none { display:block; width:100%; margin-bottom:18px; padding:10px; border-radius:14px; font-weight:600; font-size:.92rem;
  color:var(--red); background:var(--red-tint); border:1.5px solid #f1cfc9; }
.dp-none .ur { text-align:center; font-size:.74rem; }
.dp-input { display:block; width:100%; min-height:48px; margin-bottom:16px; padding:10px 12px; border-radius:12px; font:inherit; font-size:1rem;
  color:var(--ink); background:#fff; border:1.5px solid var(--line); }
.dp-input:focus, .dp-step input:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(32,85,55,.15); }
textarea.dp-input { min-height:64px; resize:vertical; }
.dp-rs { display:flex; align-items:center; gap:8px; max-width:240px; }
.dp-rs span { margin-bottom:16px; font-weight:600; color:var(--muted); }
.dp-pick { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.dp-pick button, .dp-pick label { display:flex; align-items:center; gap:8px; min-height:46px; padding:8px 16px; border-radius:12px; cursor:pointer;
  font-size:.95rem; font-weight:500; color:var(--ink); background:#fff; border:1.5px solid var(--line); }
.dp-pick input { accent-color:var(--green); }
.dp-pick button.on, .dp-pick label:has(input:checked) { border-color:var(--green); background:var(--green-tint); color:var(--green-deep); font-weight:600; }
.dp-date { margin-top:-8px; }
.dp-error { margin:0 0 10px; font-size:.88rem; font-weight:600; color:var(--red); }
.dp-error:empty { display:none; }
.btn-dp-send { display:block; width:100%; min-height:54px; border:0; border-radius:14px; font-size:1.1rem; font-weight:700;
  color:#fff; background:var(--green); box-shadow:0 6px 16px rgba(32,85,55,.28); }
.btn-dp-send:disabled { opacity:.7; }
.btn-dp-send:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.dp-foot { margin:10px 0 0; font-size:.8rem; text-align:center; color:var(--muted); }
.dp-done { padding:10px 4px; text-align:center; }
.dp-tick { width:64px; height:64px; margin:6px auto 10px; border-radius:50%; display:grid; place-items:center; font-size:2rem;
  font-weight:700; color:#fff; background:var(--green); }
.dp-done-head { margin:0 0 8px; font-family:"Cinzel", serif; font-size:1.4rem; font-weight:700; color:var(--green); }
.dp-done-text { margin:0 0 12px; font-size:.92rem; color:var(--ink); }
.dp-done-text .ur { text-align:center; color:var(--muted); }
.dp-wa-why { margin:18px 0 0; font-size:.85rem; color:var(--muted); }
.dp-done .btn-wa { margin-top:8px; }
.btn-dp-close { display:block; width:100%; min-height:48px; margin-top:12px; border-radius:14px; font-weight:600;
  color:var(--green); background:#fff; border:1.5px solid var(--green); }
.tour-chip { display:inline-block; margin:0 2px; cursor:pointer; vertical-align:baseline; }
.tour-show { display:block; width:100%; min-height:44px; margin-top:10px; border-radius:12px; font-weight:600; font-size:.92rem;
  color:var(--green); background:var(--green-tint); border:1.5px solid var(--green); }
.tour-show:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.dp-head-btns { display:flex; gap:8px; flex-shrink:0; }
.dp-head-btns .btn-help { width:38px; height:38px; }

/* ---------- "Turn on notifications" card (only inside the MY AABETAHURA app) ---------- */
.push-card { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding:12px 12px 12px 14px; border-radius:16px;
  background:var(--green-deep); color:#fff; box-shadow:0 6px 18px rgba(15,44,28,.18); }
.push-card[hidden] { display:none; }
.push-bell { flex-shrink:0; font-size:1.5rem; line-height:1; }
.push-card p { flex:1; min-width:0; margin:0; font-size:.86rem; line-height:1.35; }
.push-on { flex-shrink:0; min-height:40px; padding:8px 14px; border:0; border-radius:12px; font:inherit; font-size:.86rem; font-weight:600;
  color:var(--green-deep); background:var(--gold-light); cursor:pointer; }
.push-x { flex-shrink:0; width:32px; height:32px; margin-left:-4px; padding:0; border:0; border-radius:50%; font-size:1.3rem; line-height:1;
  color:rgba(255,255,255,.7); background:transparent; cursor:pointer; }
.push-on:focus-visible, .push-x:focus-visible { outline:3px solid var(--gold-light); outline-offset:2px; }

/* Guest preview (/preview): "Sample account" bar under the header, with a Monthly / Cash switch */
.guest-bar { max-width:720px; margin:14px auto 0; padding:12px 14px; border-radius:14px; font-size:.86rem; line-height:1.5;
  background:var(--gold-tint); border:1px dashed var(--gold-dark); color:var(--ink); }
.guest-bar p { margin:0; }
.guest-bar p b { display:block; color:var(--green); }
.guest-bar p a { font-weight:600; color:var(--green); }
.guest-switch { display:flex; gap:6px; margin-top:10px; padding:3px; border-radius:999px; background:#fff; border:1px solid var(--line); }
.guest-switch a { flex:1; padding:7px 8px; border-radius:999px; text-align:center; font-weight:500; text-decoration:none; color:var(--muted); }
.guest-switch a.on { color:#fff; background:var(--green); }
.guest-switch a:focus-visible { outline:3px solid var(--gold); outline-offset:1px; }
@media (max-width:760px) { .guest-bar { margin:12px 16px 0; } }
a.btn-logout { text-decoration:none; }
/* Sample account: "Request an account" (button in the bar, card at the bottom, panel = the "Tell us" panel's look) */
.guest-request { display:block; width:100%; margin-top:10px; padding:9px 12px; border-radius:12px; font:inherit; font-size:.88rem;
  text-align:center; color:var(--green-deep); background:var(--gold-light); border:1px solid var(--gold-dark); cursor:pointer; }
.guest-request:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.guest-cta { padding:20px 18px; text-align:center; }
.guest-cta p { margin:0 0 14px; font-size:.92rem; color:var(--ink); }
.guest-cta .guest-cta-head { margin-bottom:8px; font-family:"Cinzel", serif; font-size:1.2rem; font-weight:700; color:var(--green); }
.guest-cta-head .ur { text-align:center; font-size:.8rem; color:var(--gold-dark); }
.dispute label.dp-q { display:block; }
.rq-err { margin-top:-10px; }
.rq-pick label { flex:1 1 auto; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }