/* My Account — pass day-planner (+ account niceties). */

/* ---- planner shell ---- */
.lp-planner{ display:grid; gap:26px; }
.lp-pass{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-panel); padding:26px 26px 24px;
}
.lp-pass-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
.lp-pass-head h3{ font-size:23px; }
.lp-pass-sub{ font:400 13px var(--font-b); color:var(--ink3); margin-top:3px; }
.lp-meter{ text-align:right; min-width:190px; }
.lp-meter .lp-meter-label{ font:600 13.5px var(--font-b); color:var(--ink2); }
.lp-meter .lp-meter-label b{ color:var(--sage-d); font-size:16px; }
.lp-meter-bar{
  height:8px; border-radius:var(--r-pill); background:var(--sage-c1);
  margin-top:7px; overflow:hidden;
}
.lp-meter-bar span{
  display:block; height:100%; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--sage2),var(--sage));
  transition:width .4s ease;
}
.lp-window{ font:500 13px var(--font-b); color:var(--ink3); margin:2px 0 16px; }
.lp-window b{ color:var(--butter-d); }

/* ---- day grid ---- */
.lp-days{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.lp-day{
  position:relative; border-radius:16px; padding:12px 12px 12px;
  border:1.5px dashed var(--line2); background:var(--bg);
  text-align:left; min-height:104px;
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--font-b);
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.lp-day .lp-date{ font:700 12.5px var(--font-b); color:var(--ink2); }
.lp-day .lp-date small{ font-weight:500; color:var(--ink3); }

/* empty + plannable */
button.lp-day{ cursor:pointer; }
button.lp-day:hover{ border-color:var(--sage2); background:var(--sage-c1); transform:translateY(-2px); }
.lp-day .lp-plus{
  margin:auto; font:600 13px var(--font-b); color:var(--sage-d);
  display:inline-flex; align-items:center; gap:6px;
}
.lp-day .lp-plus::before{
  content:"+"; width:26px; height:26px; border-radius:50%;
  background:var(--sage-c1); color:var(--sage-d);
  display:inline-flex; align-items:center; justify-content:center;
  font:700 16px var(--font-b);
}

/* planned */
.lp-day.is-planned{ border-style:solid; border-color:var(--line); background:var(--white); box-shadow:var(--shadow-lift); }
.lp-day .lp-meal{ display:flex; align-items:center; gap:9px; }
.lp-day .lp-meal img{ width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--sage-c2); }
.lp-day .lp-meal b{ font:700 13.5px/1.25 var(--font-b); color:var(--ink); display:block; }
.lp-day .lp-meal small{ font:500 11.5px var(--font-b); color:var(--ink3); display:block; margin-top:1px; }
.lp-day-actions{ display:flex; gap:6px; margin-top:auto; }
.lp-day-actions button{
  font:700 11.5px var(--font-b); border-radius:var(--r-pill);
  padding:6px 12px; border:1.5px solid var(--line2); background:var(--white);
  color:var(--ink2); cursor:pointer; transition:all .14s ease;
}
.lp-day-actions button:hover{ border-color:var(--sage2); color:var(--sage-d); background:var(--sage-c1); }
.lp-day-actions button.lp-skip:hover{ border-color:var(--peach-d); color:var(--peach-d); background:var(--peach-c); }

/* skipped */
.lp-day.is-skipped{ background:var(--cream); border-style:dotted; }
.lp-day.is-skipped .lp-state{ font:italic 500 12.5px var(--font-d); color:var(--ink3); }

/* locked */
.lp-day.is-locked{ opacity:.72; border-style:solid; }
.lp-day.is-locked .lp-lock{
  position:absolute; top:10px; right:10px; font-size:12px;
  filter:grayscale(.2);
}
.lp-day.is-locked .lp-state{ font:600 11.5px var(--font-b); color:var(--butter-d); }

.lp-help{ font:400 13px var(--font-b); color:var(--ink3); }

/* ---- more-days control ---- */
.lp-more{ grid-column:1 / -1; text-align:center; margin-top:4px; }
.lp-more button{
  font:700 13px var(--font-b); color:var(--sage-d);
  background:var(--sage-c1); border:none; border-radius:var(--r-pill);
  padding:10px 20px; cursor:pointer;
}
.lp-more button:hover{ background:var(--sage-c2); }

/* ---- planner dialog reuses .sm-dialog styles from school-meals.css;
       they're duplicated here because that sheet only loads on its page. */
.lp-dialog{
  border:none; border-radius:var(--r-panel); padding:0;
  width:min(540px,calc(100vw - 32px)); max-height:calc(100dvh - 48px);
  background:var(--bg); color:var(--ink);
  box-shadow:0 30px 80px -20px rgba(40,55,35,.45);
}
.lp-dialog::backdrop{ background:rgba(44,58,46,.45); backdrop-filter:blur(3px); }
.lp-dialog-in{ padding:24px 24px 20px; position:relative; }
.lp-dialog .lp-close{
  position:absolute; top:12px; right:12px; width:34px; height:34px;
  border-radius:50%; background:var(--white); border:1px solid var(--line);
  font-size:14px; color:var(--ink2); cursor:pointer;
}
.lp-dialog h3{ font-size:21px; margin-bottom:2px; }
.lp-dlg-sub{ font:italic 400 13.5px var(--font-d); color:var(--ink3); margin-bottom:14px; }
.lp-field{ margin-bottom:14px; }
.lp-label{
  display:block; font:700 11.5px var(--font-b); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink2); margin-bottom:8px;
}
.lp-label small{ font-weight:500; text-transform:none; letter-spacing:0; color:var(--ink3); }
.lp-meal-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
.lp-meal-pick{
  border:1.5px solid var(--line2); border-radius:14px; background:var(--white);
  padding:10px 6px 9px; text-align:center; cursor:pointer; transition:all .14s ease;
}
.lp-meal-pick img{ width:44px; height:44px; border-radius:50%; object-fit:cover; margin:0 auto 6px; background:var(--sage-c2); }
.lp-meal-pick span{ font:600 11.5px/1.25 var(--font-b); color:var(--ink); display:block; }
.lp-meal-pick:hover{ border-color:var(--sage2); }
.lp-meal-pick[aria-pressed="true"]{
  border-color:var(--sage); background:var(--sage-c1); box-shadow:0 6px 14px -8px rgba(92,122,80,.6);
}
.lp-pills{ display:flex; flex-wrap:wrap; gap:7px; }
.lp-pill{
  font:600 12.5px var(--font-b); color:var(--ink);
  background:var(--white); border:1.5px solid var(--line2);
  border-radius:var(--r-pill); padding:8px 13px; cursor:pointer; transition:all .14s ease;
}
.lp-pill:hover{ border-color:var(--sage2); }
.lp-pill[aria-pressed="true"]{ background:var(--sage); border-color:var(--sage); color:var(--cream); }
.lp-dlg-foot{ padding-top:14px; border-top:1px dashed var(--line2); }
.lp-dlg-save{ width:100%; }
.lp-dlg-save:disabled{ background:#CDD6C4; box-shadow:none; cursor:not-allowed; transform:none; }

@media (max-width:560px){
  .lp-pass{ padding:20px 16px 18px; }
  .lp-days{ grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); }
  .lp-meter{ min-width:0; text-align:left; }
}

/* ============================================================
   Wallet hub — bowl-pass bowls, gift credit, school-pass shortcut.
   Each card carries its own accent (--lwac): teal / gold / green.
   ============================================================ */
.lw-intro{ font:400 15px/1.5 var(--font-b); color:var(--ink2); margin:0 0 22px; }
.lw-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:20px; }
.lw-card{
  --lwac:var(--sage);
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-panel);
  padding:26px 24px 24px; box-shadow:0 12px 30px rgba(63,82,54,.06);
  transition:transform .16s ease, box-shadow .16s ease;
}
.lw-card:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(63,82,54,.13); }
.lw-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--lwac); }
.lw-card-bowl{ --lwac:#0E7C7B; }
.lw-card-gift{ --lwac:var(--butter); }
.lw-card-school{ --lwac:var(--sage2); }
.lw-ic{
  width:46px; height:46px; border-radius:14px; margin-bottom:15px;
  display:inline-flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--lwac) 14%, #fff); color:var(--lwac);
}
.lw-ic-svg{ width:24px; height:24px; }
.lw-card-t{ font:700 12px var(--font-b); letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); margin:0 0 8px; }
.lw-big{ display:flex; align-items:baseline; gap:8px; font:600 14px var(--font-b); color:var(--ink2); margin:0 0 8px; }
.lw-big b{ font:600 42px/1 var(--font-d); color:var(--lwac); }
.lw-sub{ font:400 13.5px/1.55 var(--font-b); color:var(--ink2); margin:0 0 20px; }
.lw-empty{ font:400 14px var(--font-b); color:var(--ink3); margin:4px 0 20px; }
.lw-btn{
  align-self:flex-start; margin-top:auto;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--lwac); color:#fff; border:none;
  border-radius:var(--r-pill); padding:11px 18px; font:800 13.5px var(--font-b);
  box-shadow:0 8px 18px color-mix(in srgb, var(--lwac) 26%, transparent);
  transition:transform .15s ease, box-shadow .15s ease;
}
.lw-btn:hover{ transform:translateY(-2px); color:#fff; box-shadow:0 12px 24px color-mix(in srgb, var(--lwac) 36%, transparent); }
.lw-btn-ghost{ background:#fff; color:var(--lwac); border:1.5px solid color-mix(in srgb, var(--lwac) 42%, transparent); box-shadow:none; }
.lw-claim{
  margin-top:12px; display:flex; flex-direction:column; gap:11px;
  background:color-mix(in srgb, var(--butter) 12%, #fff);
  border:1px solid color-mix(in srgb, var(--butter) 32%, transparent);
  border-radius:16px; padding:14px 15px;
}
.lw-claim-t{ font:600 13.5px/1.4 var(--font-b); color:var(--butter-d); }
.lw-claim .lw-btn{ margin-top:0; }
.lw-claim form{ margin:0; }
.lw-blank{ --lwac:var(--sage); text-align:center; padding:34px 12px 30px; }
.lw-blank p{ font:400 15px/1.55 var(--font-b); color:var(--ink2); margin:0 0 18px; }
.lw-blank .lw-btn{ margin-top:0; align-self:center; }