/* DietSetu v4 styles: ratings, banner, referral, badges, food picker, offline, receipts, motion. Uses the same variables as app.css,
   so the owner's brand colours and dark mode apply automatically. Every colour pair below was checked in light AND dark mode. */
:root{--ok:#1E7A45;--ok50:#E3F4E9;--warn:#9A5B00;--warn50:#FFF2DC;--bad:#B3261E;--bad50:#FDE7E5;--star:#0F6B5A;--star50:#DDF5EE}
html[data-theme=dark]{--ok:#8EE0AE;--ok50:#173326;--warn:#FFC777;--warn50:#33270F;--bad:#FF9C92;--bad50:#3A1A1A;--star:#7FE3CE;--star50:#123029}

/* ---------- motion (light, GPU-only, and switched off for people who prefer less motion) ---------- */
@keyframes ds-pop{0%{transform:scale(.96);opacity:0}100%{transform:none;opacity:1}}
@keyframes ds-rise{0%{transform:translateY(8px);opacity:0}100%{transform:none;opacity:1}}
@keyframes ds-shine{0%{background-position:-200% 0}100%{background-position:200% 0}}
.pop{animation:ds-pop .35s var(--ease) both}
main.enter .card,main.enter .tile,main.enter .pkg,main.enter .qa{animation:ds-rise .32s var(--ease) both}
main.enter .card:nth-child(2),main.enter .tile:nth-child(2){animation-delay:.03s} main.enter .card:nth-child(3),main.enter .tile:nth-child(3){animation-delay:.06s}
main.enter .card:nth-child(4),main.enter .tile:nth-child(4){animation-delay:.09s} main.enter .card:nth-child(n+5){animation-delay:.12s}
.btn,.chip,.qa,.tile-main,.minitile,.badgecard,.soc,.promo{transition:transform .15s var(--ease),box-shadow .2s var(--ease),background-color .2s}
.btn:active,.chip:active,.qa:active,.soc:active,.promo:active{transform:scale(.97)}
@media(hover:hover){.qa:hover,.minitile:hover,.badgecard.on:hover,.promo:hover{transform:translateY(-2px);box-shadow:var(--sh)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- ratings ---------- */
.rate{display:inline-flex;align-items:center;gap:.25rem;font-size:.78rem;font-weight:800;padding:.15rem .6rem;border-radius:999px;margin-top:.25rem;line-height:1.5}
.rate-excellent{background:var(--star50);color:var(--star)} .rate-good{background:var(--ok50);color:var(--ok)}
.rate-attention{background:var(--warn50);color:var(--warn)} .rate-bad{background:var(--bad50);color:var(--bad)}
.ratebox{border-radius:var(--r-s);padding:.75rem .9rem;margin-top:.8rem;border:1px solid var(--line);background:var(--surface-2)}
.ratebox.rate-bad{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:var(--bad50)} .ratebox.rate-attention{background:var(--warn50)}
.ratebox p{margin:.35rem 0 0;color:var(--ink)} .ratebox .rate{background:transparent;padding:0;font-size:.95rem}
.ratebox .ico{width:16px;height:16px;vertical-align:-3px}

/* ---------- range picker ---------- */
.rangepick{margin:.4rem 0 .6rem}
.rangepick .chips{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem;-webkit-overflow-scrolling:touch}
.rangepick .chip{flex:none;min-height:40px;padding:0 .9rem;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem}
.rangepick .chip[aria-pressed=true]{background:var(--g700);border-color:var(--g700);color:#fff}
.rangecustom{align-items:flex-end;margin-top:.5rem;flex-wrap:wrap} .rangecustom .field{margin:0;flex:1;min-width:140px}
.hidden{display:none!important}

/* ---------- client home: banner, services, social, reminders, badges, renewal ---------- */
.promo{display:flex;align-items:stretch;gap:0;border-radius:var(--r-l);overflow:hidden;text-decoration:none;color:#fff;margin-bottom:1rem;min-height:120px;
  background:linear-gradient(135deg,var(--g700),var(--g900));box-shadow:var(--sh)}
.promo img{width:38%;max-width:220px;object-fit:cover;flex:none}
.promo-t{display:flex;flex-direction:column;justify-content:center;gap:.3rem;padding:1rem 1.1rem;color:#fff}
.promo-t b{font-size:1.15rem;font-family:var(--display);color:#fff} .promo-t span{color:#E8F5EC} .promo-t .btn{align-self:flex-start;margin-top:.3rem;color:#1b1206}
.svcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin-bottom:1rem}
.svc{display:flex;flex-direction:column;gap:.15rem;padding:.9rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.svc-i{font-size:1.5rem}
.social{display:flex;flex-wrap:wrap;gap:.5rem}
.soc{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 .9rem;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);text-decoration:none;color:var(--ink);font-weight:800}
.soc span[aria-hidden]{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;font-size:.8rem;background:var(--g700)}
.soc-instagram span[aria-hidden]{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)} .soc-facebook span[aria-hidden]{background:#1877F2}
.soc-youtube span[aria-hidden]{background:#E62117} .soc-whatsapp span[aria-hidden]{background:#1FA855} .soc-x span[aria-hidden]{background:#111}
.soc-linkedin span[aria-hidden]{background:#0A66C2} .soc-telegram span[aria-hidden]{background:#229ED9}
html[data-theme=dark] .soc-x span[aria-hidden]{background:#444}
.remstrip{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;text-decoration:none;color:var(--ink)}
.remstrip .chip{padding:.2rem .6rem;border-radius:999px;background:var(--g100);font-size:.85rem;font-weight:700}
.badgestrip{display:block;text-decoration:none;color:var(--ink)} .medals{display:flex;gap:.35rem;margin-top:.4rem;font-size:1.3rem} .medals span{opacity:.35} .medals span.on{opacity:1}
.renew{border:2px solid var(--o500);background:var(--o50)} .renew b{font-size:1.08rem;color:var(--head)}
.badgegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.badgecard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25rem;padding:1rem .7rem;border-radius:var(--r);border:1px dashed var(--line);background:var(--surface);opacity:.7}
.badgecard.on{opacity:1;border-style:solid;border-color:var(--lime-d);background:linear-gradient(180deg,var(--surface),var(--g50))}
.medal{font-size:2rem}

/* ---------- referral ---------- */
.hero-card{background:linear-gradient(135deg,var(--g50),var(--surface));border:1px solid var(--line)}
.refcode{font-family:var(--display);font-size:2.2rem;letter-spacing:.12em;color:var(--head);margin:.2rem 0 .8rem}
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin:1rem 0}
.statgrid .stat{display:flex;gap:.6rem;align-items:center;padding:.8rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.statgrid .big{font-size:1.25rem;font-weight:900;color:var(--head)}

/* ---------- packages: more eye-catching ---------- */
.pkgs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.pkg{position:relative;overflow:hidden;border-radius:var(--r-l)}
.pkg::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--g600),var(--lime))}
.pkg.rec{border:2px solid var(--o500);box-shadow:var(--sh-l);transform:translateY(-2px)}
.pkg.rec::before{background:linear-gradient(90deg,var(--o500),var(--o600),var(--o500));background-size:200% 100%;animation:ds-shine 4s linear infinite}
.pkg .price .now{font-size:2.1rem;font-weight:900;color:var(--head);font-family:var(--display)}
.pkg .incl li::marker{content:"✓  ";color:var(--g600);font-weight:900}

/* ---------- food picker / nutrition ---------- */
.foodpick{margin:.4rem 0}
.foodpick .row{flex-wrap:nowrap} .foodpick input[type=search]{flex:1;min-width:0} .foodpick .grams{width:84px;flex:none}
.foodlist{display:flex;flex-direction:column;gap:.25rem;margin-top:.3rem;max-height:300px;overflow:auto}
.fooditem{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:.55rem .7rem;border-radius:var(--r-s);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.fooditem:hover,.fooditem:focus-visible{border-color:var(--g600);background:var(--g50)}
.foodchips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.4rem 0}
.foodchip{display:inline-flex;align-items:center;gap:.2rem;padding:.15rem .3rem .15rem .6rem;border-radius:999px;background:var(--g100);color:var(--ink);font-size:.85rem;font-weight:700}
.foodchip input{width:58px;min-height:30px;padding:.1rem .3rem;font-size:.85rem}
.nutri{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin:.3rem 0;font-size:.82rem}
.nutri span{padding:.1rem .5rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);font-weight:700}
.nutri .kcal{background:var(--o50);border-color:transparent;color:var(--o700)}
.daytotal{display:flex;flex-direction:column;gap:.2rem;margin-top:.5rem}
.sticky-total{position:sticky;top:calc(var(--top-h) + 6px);z-index:4}
.foodsec summary{cursor:pointer;font-weight:800;padding:.4rem 0;display:flex;align-items:center;gap:.3rem}
.labgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem}

/* ---------- compare slider ---------- */
.cmp-wrap{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;max-height:70vh;background:var(--surface-2);margin:.6rem auto;max-width:520px}
.cmp-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-top{position:absolute;inset:0} .cmp-l,.cmp-r{position:absolute;bottom:.5rem;padding:.15rem .5rem;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:.8rem;font-weight:800}
.cmp-l{left:.5rem} .cmp-r{right:.5rem}
.compare input[type=range]{width:100%;max-width:520px;display:block;margin:0 auto}

/* ---------- owner panels ---------- */
.switchrow{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.switchrow > span:first-child{display:flex;flex-direction:column}
.reorder{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.35rem}
.reorder li{display:flex;align-items:center;gap:.4rem;padding:.45rem .6rem;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface)}
.reorder li.off{opacity:.55} .reorder .grow{flex:1;font-weight:700}
.toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.4rem}
.svcedit{margin-bottom:.4rem} .svcedit input[type=text]{flex:1;min-width:120px} .svcedit .emoji{flex:none;width:56px;min-width:56px;text-align:center}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem} .tbl th,.tbl td{padding:.5rem .55rem;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap} .tbl th{color:var(--muted);font-weight:800}
.exportbar{margin:.2rem 0 1rem}
.listcard .linkitem{text-decoration:none;color:var(--ink);display:flex;justify-content:space-between;align-items:center}
.callnow{gap:.4rem}

/* ---------- files / chat / mobile fixes ---------- */
.filethumb{width:48px;height:48px;object-fit:cover;border-radius:10px;flex:none;border:1px solid var(--line)}
.loadolder{display:block;margin:0 auto .6rem}
/* booking: the confirm bar sits below the slots on phones, so it never covers the dates */
@media(max-width:899px){.bookbar{position:static;box-shadow:var(--sh)}}
/* horizontal tab strips: a soft fade on the right edge shows there is more to swipe */
@media(max-width:899px){
  .segnav,.subtabs,.rangepick .chips,.filters{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:2rem}
  .grid2{grid-template-columns:1fr!important}
  .row.wrap > input,.row.wrap > select{flex:1 1 140px;min-width:0}
  .promo{min-height:110px} .promo img{width:34%}
  .tbl{font-size:.82rem}
}
input,select,textarea{max-width:100%}
html[data-theme=dark] .remstrip .chip,html[data-theme=dark] .foodchip{background:var(--g100);color:var(--ink)}
html[data-theme=dark] .pkg.rec{border-color:var(--o700)}

/* ---------- print (receipts, business report) ---------- */
@media print{
  .tabs,.topbar,.side,nav,.noprint,.offline-bar,.cookie,#toasts{display:none!important}
  body{background:#fff;color:#000} .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
}
/* ---------- on/off switch ---------- */
.switch{position:relative;display:inline-block;width:48px;height:28px;flex:none}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .2s}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s var(--ease)}
.switch input:checked + span{background:var(--g600)} .switch input:checked + span::after{transform:translateX(20px)}
.switch input:focus-visible + span{outline:3px solid var(--o600);outline-offset:2px}