/* =============================================================================
   SHUNNO ART CAFE — visitor area
   -----------------------------------------------------------------------------
   Loaded ON TOP of public.css, never instead of it. Everything here assumes the
   --sh-* tokens, .sh-wrap, .sh-band, .sh-btn and the form primitives are
   already defined; this file adds only what the visitor pages need and nothing
   the landing page would want.

   Same rules as public.css: plain CSS, no build step, no Bootstrap. Do not load
   this in the admin panel.
   ============================================================================= */

/* ---------- shared: chips ----------
   Colour names come straight from ReservationStatus::colour() and
   Voucher::displayColour(), so the class is written by the enum rather than by
   a mapping in Blade. Add a case there and it lands here. */
.sh-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.sh-chip--success {
  background: rgba(46, 106, 74, .1);
  border-color: rgba(46, 106, 74, .3);
  color: #2E6A4A
}

.sh-chip--warning {
  background: rgba(154, 105, 26, .1);
  border-color: rgba(154, 105, 26, .3);
  color: #8A5E17
}

.sh-chip--danger {
  background: rgba(150, 56, 46, .1);
  border-color: rgba(150, 56, 46, .3);
  color: #96382E
}

.sh-chip--info,
.sh-chip--primary {
  background: rgba(42, 74, 99, .1);
  border-color: rgba(42, 74, 99, .3);
  color: var(--sh-cyan)
}

/* ---------- shared: flash ---------- */
.sh-flash {
  margin: 0 0 1.5rem;
  padding: .95rem 1.15rem;
  border-radius: var(--sh-r-sm);
  border-left: 3px solid;
  font-size: .95rem;
  line-height: 1.6;
}

.sh-flash--ok {
  background: rgba(46, 106, 74, .08);
  border-color: #2E6A4A;
  color: #24503A
}

.sh-flash--bad {
  background: rgba(150, 56, 46, .08);
  border-color: #96382E;
  color: #7C2E26
}

/* ---------- shared: small button + text button ---------- */
.sh-btn--sm {
  padding: .65rem 1.3rem;
  font-size: .875rem
}

.sh-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--sh-cyan);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .22em;
}

.sh-linkbtn:hover {
  color: var(--sh-cyan-2)
}

.sh-linkbtn[disabled] {
  color: var(--sh-clay);
  cursor: default;
  text-decoration: none
}

.sh-back {
  display: inline-block;
  margin-bottom: 1.25rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--sh-mute);
  text-decoration: none;
}

.sh-back:hover {
  color: var(--sh-ink)
}

/* =============================================================================
   AUTH PAGES
   ============================================================================= */
.sh-authband {
  min-height: 78vh;
  display: flex;
  align-items: center;
}

.sh-auth {
  max-width: 30rem
}

.sh-auth--wide {
  max-width: 34rem
}

.sh-auth .sh-lede {
  margin-bottom: 2rem
}

/* =============================================================================
   FORMS
   -----------------------------------------------------------------------------
   WHY THE FIELDS LOOKED WRONG.

   public.css puts the real field styling — padding, font-size, focus ring —
   under `.sh-modal .form-control`, and only there. The global `.form-control`
   further down that file sets a border and a background and stops: no padding,
   no type scale. So anything outside the reservation dialog fell through to a
   thin, cramped box that matched nothing else on the site, which is exactly
   what the visitor pages were rendering.

   The fix is in public.css, not here: those rules are FORM styling, not MODAL
   styling, and the selector was simply too narrow. Adding `.sh-form` alongside
   `.sh-modal` there gives both the same fields from one definition — see the
   four-line patch in the phase notes. Copying the declarations into this file
   would have worked today and drifted the first time anyone adjusted the modal.

   What stays here is only what is genuinely particular to a standalone form on
   a page, as opposed to one inside a dialog.
   ============================================================================= */
.sh-form {
  margin-bottom: 1.75rem
}

/* Field groups, so labels and help text sit at a consistent rhythm without a
   margin on every element in the markup. */
.sh-form__row {
  margin-bottom: 1.15rem
}

.sh-form__row:last-of-type {
  margin-bottom: 0
}

.sh-form .form-label {
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .35rem;
  color: var(--sh-ink);
}

/* Locked fields — the email address on the account page.
   Muted rather than merely disabled: a greyed-out field that still looks like a
   field invites people to click it and wonder why nothing happens. */
.sh-form .form-control:disabled,
.sh-form .form-control[readonly] {
  background: var(--sh-sand);
  color: var(--sh-mute);
  border-style: dashed;
  cursor: not-allowed;
}

.sh-form__go {
  margin-top: 1.6rem;
  width: 100%;
  justify-content: center;
}

.sh-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sh-mute)
}

.sh-auth__aside,
.sh-auth__staff {
  font-size: .9rem;
  color: var(--sh-mute);
  margin: .5rem 0 0
}

.sh-auth__staff {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sh-line);
  font-size: .82rem;
}

.sh-auth__resend {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.sh-auth__timer {
  font-size: .85rem;
  color: var(--sh-mute)
}

.sh-auth__signout {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sh-line)
}

/* ---------- the code boxes ----------
   A grid rather than flex so the boxes stay equal at every width; on a narrow
   phone six of them plus gaps has to fit inside the gutter, which is what the
   minmax floor is for. */
.sh-otp {
  display: grid;
  grid-template-columns: repeat(var(--sh-otp-count, 6), minmax(0, 3.25rem));
  gap: .5rem;
}

.sh-otp__label {
  grid-column: 1 / -1;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sh-mute);
  margin-bottom: .35rem;
}

.sh-otp__box {
  width: 100%;
  aspect-ratio: 3 / 4;
  text-align: center;
  font-family: var(--sh-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--sh-ink);
  background: #fff;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r-sm);
  padding: 0;
}

.sh-otp__box:focus {
  outline: 0;
  border-color: var(--sh-cyan);
  box-shadow: 0 0 0 3px rgba(42, 74, 99, .15);
}

/* =============================================================================
   THE VISITS PAGE
   ============================================================================= */
.sh-visits__head {
  padding-block: clamp(6rem, 10vw, 8rem) clamp(2.5rem, 5vw, 3.5rem)
}

.sh-visits__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin: .5rem 0 2rem;
}

.sh-stat {
  font-size: .95rem;
  color: var(--sh-mute)
}

.sh-stat strong {
  display: block;
  font-family: var(--sh-display);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--sh-ink);
}

.sh-stat--credit strong {
  color: var(--sh-cyan)
}

.sh-visits__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem
}

/* Sign out sits in the same row as the actions but reads as secondary — it is
   the least likely thing anyone came here to do, and a third solid button would
   compete with "reserve another visit" for the same attention. */
.sh-visits__out {
  margin-left: auto
}

@media (max-width:600px) {
  .sh-visits__out {
    margin-left: 0
  }
}

.sh-visits__h3 {
  font-family: var(--sh-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 400;
  margin: 0;
}

.sh-head--spaced {
  margin-top: clamp(3rem, 6vw, 4.5rem)
}

.sh-empty {
  background: #fff;
  border: 1px dashed var(--sh-line);
  border-radius: var(--sh-r);
  padding: 2.5rem 1.75rem;
  text-align: center;
}

.sh-empty p {
  margin: 0 0 1.25rem;
  color: var(--sh-mute)
}

/* ---------- one visit ---------- */
.sh-visit {
  display: flex;
  gap: 1.5rem;
  background: #fff;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r);
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: box-shadow .25s, border-color .25s;
}

.sh-visit:hover {
  box-shadow: 0 10px 30px var(--sh-glow);
  border-color: var(--sh-clay-2)
}

/* The one visual cue that says "this one is waiting on you". Driven by
   VisitorPortalService::nextStep()['owed'], not by status directly, so the
   rule for what counts lives in one place. */
.sh-visit--owed {
  border-color: var(--sh-cyan);
  box-shadow: 0 8px 24px rgba(42, 74, 99, .12)
}

.sh-visit__when {
  flex: 0 0 4.25rem;
  text-align: center;
  padding-top: .15rem;
  border-right: 1px solid var(--sh-line);
  padding-right: 1rem;
}

.sh-visit__day {
  display: block;
  font-family: var(--sh-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--sh-ink)
}

.sh-visit__month {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sh-cyan);
  margin-top: .2rem;
}

.sh-visit__year {
  display: block;
  font-size: .72rem;
  color: var(--sh-clay)
}

.sh-visit__body {
  flex: 1 1 auto;
  min-width: 0
}

.sh-visit__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .35rem;
}

.sh-visit__title {
  font-family: var(--sh-display);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.3;
}

.sh-visit__meta {
  font-size: .875rem;
  color: var(--sh-mute);
  margin: 0 0 .9rem
}

.sh-visit__ref {
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em
}

.sh-visit__next {
  margin: 0 0 1.1rem;
  font-size: .92rem;
  line-height: 1.6
}

.sh-visit__next strong {
  display: block;
  color: var(--sh-ink)
}

.sh-visit__next span {
  color: var(--sh-mute)
}

.sh-visit__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem
}

.sh-visit__link {
  font-size: .875rem;
  font-weight: 600;
  color: var(--sh-cyan)
}

.sh-visit__money {
  margin-left: auto;
  text-align: right;
  font-family: var(--sh-display);
  font-size: 1.1rem;
  color: var(--sh-ink);
}

.sh-visit__money small {
  display: block;
  font-family: var(--sh-body);
  font-size: .78rem;
  color: var(--sh-mute)
}

@media (max-width:600px) {
  .sh-visit {
    flex-direction: column;
    gap: 1rem
  }

  .sh-visit__when {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid var(--sh-line);
    padding: 0 0 .75rem;
    flex-basis: auto;
  }

  .sh-visit__day {
    font-size: 1.5rem
  }

  .sh-visit__money {
    margin-left: 0;
    text-align: left
  }
}

/* =============================================================================
   VOUCHERS
   ============================================================================= */
.sh-vouchers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}

.sh-voucher {
  background: #fff;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r);
  padding: 1.35rem;
}

.sh-voucher.is-spent {
  background: var(--sh-sand);
  opacity: .8
}

.sh-voucher__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .9rem;
}

.sh-voucher__kind {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sh-mute);
}

/* Monospace and wide tracking because this gets read out at a counter, and the
   code alphabet already excludes I, O, 0 and 1 for the same reason. */
.sh-voucher__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--sh-ink);
  margin: 0 0 .3rem;
  word-break: break-all;
}

.sh-voucher.is-spent .sh-voucher__code {
  text-decoration: line-through;
  color: var(--sh-mute)
}

.sh-voucher__value {
  font-family: var(--sh-display);
  font-size: 1.5rem;
  color: var(--sh-cyan);
  margin: 0 0 .75rem;
}

.sh-voucher__note {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--sh-mute);
  margin: 0
}

.sh-voucher__why {
  display: block;
  margin-top: .3rem;
  color: var(--sh-ink)
}

.sh-voucher__from {
  font-size: .78rem;
  color: var(--sh-clay);
  margin: .75rem 0 0
}

/* =============================================================================
   ONE BOOKING
   ============================================================================= */
.sh-detail__head {
  padding-block: clamp(6rem, 10vw, 8rem) clamp(2.5rem, 5vw, 3.5rem)
}

.sh-detail__when {
  font-size: 1.05rem;
  color: var(--sh-mute);
  margin: 0 0 1rem
}

.sh-detail {
  max-width: 46rem
}

.sh-panel {
  background: #fff;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r);
  padding: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 1.25rem;
}

.sh-panel--owed {
  border-color: var(--sh-cyan);
  box-shadow: 0 8px 24px rgba(42, 74, 99, .12)
}

.sh-panel__title {
  font-family: var(--sh-display);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 .6rem;
}

.sh-panel__sub {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sh-mute);
  margin: 1.75rem 0 .75rem;
}

.sh-panel__body {
  color: var(--sh-mute);
  margin: 0 0 1.25rem
}

.sh-panel__body:last-child {
  margin-bottom: 0
}

/* ---------- key/value rows ---------- */
.sh-kv {
  margin: 0
}

.sh-kv>div {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: .7rem 0;
  border-bottom: 1px solid var(--sh-sand);
}

.sh-kv>div:last-child {
  border-bottom: 0;
  padding-bottom: 0
}

.sh-kv dt {
  flex: 0 0 auto;
  font-size: .875rem;
  color: var(--sh-mute)
}

.sh-kv dd {
  margin: 0;
  text-align: right;
  font-size: .95rem;
  color: var(--sh-ink)
}

.sh-kv--money dd {
  font-variant-numeric: tabular-nums
}

.sh-kv__strong dt,
.sh-kv__strong dd {
  font-weight: 700;
  color: var(--sh-ink)
}

.sh-kv__wide {
  flex-direction: column;
  gap: .3rem
}

.sh-kv__wide dd {
  text-align: left
}

/* ---------- receipts ---------- */
.sh-receipts {
  list-style: none;
  margin: 0;
  padding: 0
}

.sh-receipts a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem .9rem;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r-sm);
  margin-bottom: .5rem;
  text-decoration: none;
  transition: border-color .2s, background .2s;
}

.sh-receipts a:hover {
  border-color: var(--sh-cyan);
  background: rgba(42, 74, 99, .04)
}

.sh-receipts__ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
  color: var(--sh-cyan);
}

.sh-receipts__amt {
  margin-left: auto;
  font-weight: 600;
  color: var(--sh-ink);
  font-variant-numeric: tabular-nums;
}

.sh-receipts__on {
  font-size: .8rem;
  color: var(--sh-mute);
  flex: 0 0 auto
}

.sh-detail__foot {
  font-size: .9rem;
  color: var(--sh-mute);
  margin: 2rem 0 0
}

/* ---------- nav ----------
   NOTE: .sh-nav__me and .sh-nav__out are NOT defined here. The nav renders on
   every public page and this stylesheet only loads on visitor pages, so a rule
   here would leave the sign-out button looking like a bare OS button on the
   landing page. Both live in public.css — see the patch in the phase notes. */