/* ============================================================
   ZEN BOWL — account.css
   Styles for the customer account page (/account) only. Relies on the design
   system in shared.css (tokens, .site-header, .btn, .form__*, .lang-switch).
   The landing/order pages do NOT load this file.
   ============================================================ */

.account-body { background: var(--off-white); color: var(--charcoal); min-height: 100vh; display: flex; flex-direction: column; }
.account-main { flex: 1 0 auto; padding: calc(var(--header-h) + var(--space-3)) 0 var(--space-5); }
.account-container { max-width: 640px; }

/* Header/footer chrome comes from shared.css §17b. The cart link keeps the
   .page-back look and must never disappear on a phone — the side drawer took
   over the text links an old rule here used to hide. */

.muted { color: var(--charcoal-soft); }
.hint { font-size: .78rem; color: var(--charcoal-soft); margin: .2rem 0 0; }

/* auth card */
.account-card, .account-section, .points-card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: var(--space-3); margin-bottom: var(--space-3);
}
.account-card__title { font-family: var(--font-display); font-size: var(--step-h2); margin: 0 0 var(--space-2); }
.account-tabs { display: flex; gap: .4rem; margin-bottom: var(--space-2); border-bottom: 1px solid var(--beige); }
.account-tab {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .5rem .3rem; margin-bottom: -1px; font: inherit; font-weight: 600;
  color: var(--charcoal-soft); cursor: pointer;
}
.account-tab.is-active { color: var(--maroon); border-bottom-color: var(--maroon); }
.account-form .form__field { margin-bottom: .8rem; }
.account-error { color: var(--maroon); font-size: .88rem; min-height: 1.2em; margin: 0 0 .6rem; }
.account-error:empty { margin: 0; }
.account-msg { font-size: .85rem; margin-left: .5rem; }
.account-msg.is-ok { color: var(--sage-dark); }
.account-msg.is-error { color: var(--maroon); }

/* signed-in header row */
.account-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); }
.account-head .account-card__title { margin: 0; }

/* points hero */
.points-card {
  background: linear-gradient(135deg, var(--sage-light), var(--off-white));
  border: 1px solid var(--sage-light); text-align: center;
}
.points-card__num { font-family: var(--font-display); font-size: clamp(2.6rem, 9vw, 3.6rem); font-weight: 600; color: var(--maroon); line-height: 1; }
.points-card__unit { font-size: 1.1rem; color: var(--sage-dark); font-family: var(--font-body); }
.points-card__rate { margin: .1rem 0 0; font-size: .85rem; color: var(--charcoal-soft); }

/* points boosts (welcome + weekly streak) */
.boosts-card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card);
  border: 1px solid var(--beige); padding: var(--space-3); margin-bottom: var(--space-3);
}
.boosts-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-bottom: .6rem; }
.boosts-card__title { font-family: var(--font-display); font-size: var(--step-h3); }
.boosts-card__total {
  font-weight: 700; color: var(--sage-dark);
  background: var(--sage-light); border-radius: var(--radius-pill); padding: .2rem .7rem; white-space: nowrap;
}
.boosts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.boost { display: flex; align-items: flex-start; gap: .6rem; }
.boost__ic { font-size: 1.15rem; line-height: 1.3; flex: none; }
.boost__meta { color: var(--charcoal-soft); font-size: .85rem; }
.boost__meta--keep { display: block; margin-top: .1rem; }
.boost__bar { display: block; height: 6px; margin-top: .4rem; background: var(--beige); border-radius: 3px; overflow: hidden; max-width: 16rem; }
.boost__bar-fill { display: block; height: 100%; background: var(--maroon); border-radius: 3px; }

/* door to the points shop — the shop itself lives on /rewards (rewards.css) */
.shop-link {
  display: flex; align-items: center; gap: var(--space-2);
  background: linear-gradient(160deg, var(--sage-light), var(--white) 70%);
  border: 1px solid var(--sage-light); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: var(--space-3);
  margin-bottom: var(--space-3); text-decoration: none; color: inherit;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.shop-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.shop-link__ic { font-size: 1.5rem; color: var(--sage-dark); flex: none; }
.shop-link__body { display: grid; gap: .15rem; flex: 1 1 auto; }
.shop-link__title { font-family: var(--font-display); font-size: var(--step-h3); font-weight: 600; color: var(--maroon); }
.shop-link__sub { font-size: .88rem; color: var(--charcoal-soft); }
.shop-link__go { font-size: 1.3rem; color: var(--maroon); flex: none; }

/* sections + collapsibles */
.account-section > h2 { font-family: var(--font-display); font-size: var(--step-h3); margin: 0 0 var(--space-2); }
.account-details > summary { cursor: pointer; font-weight: 600; font-family: var(--font-display); font-size: var(--step-h3); }
.account-details[open] > summary { margin-bottom: var(--space-2); }
.account-details > .account-form { margin-top: var(--space-2); }

/* history rows (orders + points ledger) */
.hist-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--beige); flex-wrap: wrap; }
.hist-row:last-child { border-bottom: 0; }

/* clickable order rows (buttons styled as rows) */
.hist-row--click { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--beige); font: inherit; color: inherit; cursor: pointer; border-radius: 8px; }
.hist-row--click:hover { background: var(--sage-light); }
.hist-row--click:focus-visible { outline: 2px solid var(--sage-dark); outline-offset: 2px; }
.hist-row__chevron { color: var(--charcoal-soft); font-size: 1.1rem; margin-left: .3rem; }

/* single order detail */
.od-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.od-head .account-card__title { margin: 0; font-size: var(--step-h3); }
.od-card { margin-top: .8rem; }
.od-items { list-style: none; margin: var(--space-2) 0; padding: 0; }
.od-item { display: flex; gap: .6rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px dashed var(--beige); }
.od-item:last-child { border-bottom: 0; }
.od-item__q { font-weight: 600; color: var(--sage-dark); white-space: nowrap; }
.od-item__body { flex: 1; }
.od-item__opts { display: block; font-size: .82rem; color: var(--charcoal-soft); }
.od-item__price { font-weight: 600; white-space: nowrap; }
.od-totals { border-top: 1px solid var(--beige); padding-top: .6rem; }
.od-total-row { display: flex; justify-content: space-between; padding: .15rem 0; color: var(--charcoal-soft); }
.od-total-row--total { color: var(--charcoal); font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--beige); margin-top: .3rem; padding-top: .5rem; }
.od-points { font-weight: 600; color: var(--sage-dark); margin: .8rem 0 0; }
.od-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: var(--space-2); }
.hist-row__main { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.hist-row__num { font-weight: 600; }
.hist-row__meta { font-size: .82rem; color: var(--charcoal-soft); white-space: nowrap; }
.hist-row .pos { color: var(--sage-dark); font-weight: 600; }
.hist-row .neg { color: var(--maroon); font-weight: 600; }

/* small tags/badges */
.tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: .12rem .5rem; border-radius: var(--radius-pill); background: var(--beige); color: var(--charcoal-soft); }
.tag--earn { background: var(--sage-light); color: var(--sage-dark); }
.tag--pending { background: var(--maroon-tint); color: var(--maroon); }
.status-new { background: var(--sage-light); color: var(--sage-dark); }
.status-preparing { background: var(--wood-dark); color: #fff; }
.status-fulfilled { background: var(--sage-dark); color: var(--white); }
.status-cancelled { background: var(--beige); color: var(--charcoal-soft); }

.btn--sage { background: var(--sage-dark); color: var(--white); }
.btn--sage:hover { background: var(--charcoal); }  /* darken on hover: --sage fails AA behind white text */

/* ---------- coupon bank ---------- */
.cpn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .7rem; }
.cpn-subhdr { margin: 1rem 0 .4rem; font-weight: 600; color: var(--charcoal-soft); font-size: .9rem; }
.cpn {
  position: relative; background: var(--sage-light); border-radius: var(--radius);
  padding: .8rem .9rem; border-left: 5px solid var(--sage-dark);
}
.cpn--used { background: var(--beige); border-left-color: var(--charcoal-soft); opacity: .8; }
.cpn__reward { font-weight: 700; font-size: 1.15rem; color: var(--sage-dark); }
.cpn--used .cpn__reward { color: var(--charcoal-soft); }
.cpn__label { font-size: .9rem; color: var(--charcoal); margin-top: .1rem; }
.cpn__code {
  display: inline-block; margin-top: .3rem; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .82rem; letter-spacing: .05em; background: var(--white); color: var(--charcoal);
  border-radius: 6px; padding: .1rem .45rem; border: 1px dashed var(--sage);
}
.cpn__meta { font-size: .8rem; color: var(--charcoal-soft); margin-top: .35rem; }
.cpn__badges { margin-top: .5rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.cpn-badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  border-radius: var(--radius-pill); padding: .1rem .5rem; background: var(--white); color: var(--sage-dark);
}
.cpn-badge--auto { background: var(--sage-dark); color: var(--white); }
.cpn-badge--ok { background: var(--sage-dark); color: var(--white); }
.cpn-badge--used { background: var(--maroon-tint); color: var(--maroon); }

/* account header cart link + count badge */
.acct-cart { display: inline-flex; align-items: center; gap: .3rem; }
.acct-cart__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem;
  border-radius: 999px; background: var(--maroon); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 1;
}
.cpn__value { font-size: .9rem; font-weight: 700; color: var(--sage-dark); margin-top: -.05rem; }
.cpn--used .cpn__value { color: var(--charcoal-soft); }

/* Reduced motion: no lift on the shop link. Keep this block LAST in this file. */
@media (prefers-reduced-motion: reduce) {
  .shop-link { transition: none; }
  .shop-link:hover { transform: none; }
}