/* EIWA · «Карта гостя» (js/pages/loyalty.js). Calm and editorial like the rest of the site:
   hairlines, small caps, light numbers. One pink per screen — the 会員 glyph; section glyphs are grey. */

.lc {
  padding-inline: var(--gutter);
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

/* ---------- logged out ---------- */
.lc-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 27.5rem);
  grid-template-areas: 'head login' 'perks login';
  grid-template-rows: auto 1fr; /* a taller form stretches the last row, the perks stay under the lead */
  column-gap: clamp(2.5rem, 7vw, 8.75rem);
  align-items: start;
  padding-top: clamp(2.5rem, 7vw, 7rem);
}
.lc-intro__head { grid-area: head; }
.lc-intro__jp, .lc-card__jp { display: block; font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1; }
.lc-intro__title {
  margin-top: clamp(.875rem, 1.6vw, 1.375rem);
  font-size: var(--fs-display);
  font-weight: 300;
  letter-spacing: -.015em;
  line-height: 1;
}
.lc-intro__lead {
  max-width: 28ch;
  margin-top: clamp(1.125rem, 2vw, 1.875rem);
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  font-weight: 300;
  line-height: 1.35;
}
.lc-intro__nojs { grid-area: login; font-size: 1.0625rem; }

.lc-perks {
  grid-area: perks;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem);
  margin: clamp(3rem, 6vw, 6rem) 0 0; padding: 0; list-style: none;
}
.lc-perks li { padding-top: .875rem; border-top: 1px solid var(--line); }
.lc-perks__label { font-size: var(--fs-label); color: var(--mute); }
.lc-perks p { margin-top: .375rem; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }

/* the SMS form: a sheet of tracing paper */
.lc-login {
  grid-area: login;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--kalka-border);
}
.lc-form__title { font-size: var(--fs-label); color: var(--ink-2); }
.lc-form__title:focus { outline: none; }
.lc-form__sent { margin-top: .625rem; font-size: 1rem; color: var(--ink-2); }
.lc-form__change { font-size: 1rem; color: var(--ink); }
.lc-form .bk-field { margin-top: 1.25rem; }
.lc-form__code { font-size: 1.75rem; font-weight: 300; letter-spacing: .4em; font-variant-numeric: tabular-nums; }
.lc-form__error:not(:empty) { margin: 1.375rem 0 0; }
.lc-form__submit { width: 100%; min-height: 3.25rem; margin-top: 1.625rem; }
.lc-form__submit[aria-busy='true'] { opacity: .6; cursor: progress; }
.lc-form__note { margin-top: .875rem; font-size: .9375rem; line-height: 1.45; color: var(--mute); }
.lc-form__resend { font-size: .9375rem; color: var(--ink-2); }
.lc-form__resend:disabled { cursor: default; color: var(--mute); }
.lc-form__resend:disabled::after { opacity: .4; }

/* consent: a square box, never a toggle */
.lc-check {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .75rem;
  margin-top: 1.375rem;
  font-size: .9375rem; line-height: 1.45; color: var(--ink-2);
  cursor: pointer;
}
.lc-check input {
  appearance: none; -webkit-appearance: none;
  display: grid; place-items: center;
  width: 1.25rem; height: 1.25rem; margin: 1px 0 0;
  border: 1px solid var(--ink); border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.lc-check input:checked { background: var(--ink); }
.lc-check input:checked::after {
  content: '';
  width: .625rem; height: .3125rem;
  border-left: 1.5px solid var(--paper); border-bottom: 1.5px solid var(--paper);
  transform: translateY(-1px) rotate(-45deg);
}
.lc-check input:focus-visible { outline: 2px solid var(--focus); outline-offset: .1875rem; }

.lc-demo { margin-top: 1.125rem; font-size: var(--fs-label); color: var(--mute); }

/* ---------- loading / error ---------- */
.lc-state { min-height: 40vh; padding-top: clamp(3.5rem, 9vw, 8.75rem); }
.lc-state__text { font-size: clamp(1.25rem, 1.7vw, 1.625rem); font-weight: 300; color: var(--ink-2); } /* 20 px light is not «large»: 4.5:1 */
.lc-state .bk-error:not(:empty) { max-width: 35rem; }

/* ---------- the card ---------- */
.lc-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16.25rem, 23.75rem);
  grid-template-areas: 'head head' 'balance level' 'demo demo';
  column-gap: clamp(2.5rem, 7vw, 8.75rem);
  padding: clamp(2.5rem, 6vw, 6rem) 0 clamp(3rem, 6vw, 6rem);
  border-bottom: 1px solid var(--line);
}
.lc-card__head {
  grid-area: head;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 1.5rem;
  margin-bottom: clamp(2.25rem, 5vw, 4.5rem);
}
.lc-card__jp { grid-column: 1 / -1; }
.lc-card__title {
  margin-top: clamp(.875rem, 1.6vw, 1.375rem);
  font-size: var(--fs-h2);
  font-weight: 300;
  letter-spacing: -.01em;
}
.lc-card__title:focus { outline: none; }
.lc-card__who { grid-column: 1; margin-top: .625rem; font-size: .9375rem; color: var(--ink-2); }
.lc-card__out { grid-column: 2; grid-row: 2 / span 2; align-self: end; font-size: .9375rem; color: var(--ink-2); }
.lc-card > .lc-demo { grid-area: demo; margin-top: 1.75rem; }

.lc-balance { grid-area: balance; }
.lc-balance__label, .lc-level__label { font-size: var(--fs-label); color: var(--mute); }
.lc-balance__total {
  margin-top: .375rem;
  font-size: clamp(4.5rem, 10.5vw, 10.5rem);
  font-weight: 200;
  line-height: .92;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.lc-balance__word { font-size: clamp(1.125rem, 1.6vw, 1.5rem); font-weight: 300; letter-spacing: 0; color: var(--ink-2); }
.lc-balance__split {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 37.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}
.lc-balance__split div { padding: .75rem 1rem 0 0; border-top: 1px solid var(--line); }
.lc-balance__split dt { font-size: var(--fs-label); color: var(--mute); }
.lc-balance__split dd { margin: 2px 0 0; font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 300; font-variant-numeric: tabular-nums; }
.lc-balance__inactive { margin-top: 1.125rem; font-size: .9375rem; color: var(--ink-2); }

.lc-level {
  grid-area: level;
  align-self: end;
  padding-left: clamp(1.5rem, 3vw, 3rem);
  border-left: 1px solid var(--line);
}
.lc-level__name { margin-top: .375rem; font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 300; line-height: 1.2; }
.lc-level__pct { margin-top: .25rem; font-size: 1.0625rem; color: var(--ink-2); }
.lc-level__next { margin-top: 1.375rem; }
.lc-level__track { display: block; height: .1875rem; background: var(--paper-2); overflow: hidden; }
.lc-level__track[hidden] { display: none; }
.lc-level__bar {
  display: block; height: 100%;
  background: var(--ink);
  transform-origin: left; transform: scaleX(0);
  transition: transform .9s var(--ease-out);
}
.lc-level__left { margin-top: .625rem; font-size: .9375rem; line-height: 1.4; color: var(--ink-2); }

/* ---------- sections: label column + body, like «О нас» ---------- */
.lc-sec {
  display: grid;
  grid-template-columns: minmax(7.5rem, 14vw) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.4vw, 3.5rem);
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  border-bottom: 1px solid var(--line);
}
.lc-sec:last-child { border-bottom: 0; }
.lc-sec__label { display: grid; gap: .625rem; justify-items: start; align-content: start; }
.lc-sec__jp { font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1; color: var(--mute-lg); } /* one pink per screen: the card's 会員 */
.lc-sec__title { font-size: var(--fs-label); font-weight: 400; line-height: 1.2; color: var(--mute); }
.lc-sec__body { min-width: 0; max-width: 56.25rem; }
.lc-empty { font-size: 1.0625rem; color: var(--ink-2); }

/* expiry */
.lc-exp { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.lc-exp[hidden] { display: none; }
.lc-exp__row {
  display: grid; grid-template-columns: minmax(8em, 1fr) minmax(0, 1.3fr) auto; align-items: baseline; gap: .25rem 1.5rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--line);
}
.lc-exp__amt { font-size: clamp(1.625rem, 2.4vw, 2.125rem); font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lc-exp__amt small { font-size: .9375rem; color: var(--ink-2); letter-spacing: 0; }
.lc-exp__type { font-size: .9375rem; color: var(--mute); }
.lc-exp__when { text-align: right; font-size: 1.0625rem; color: var(--ink-2); }
.lc-exp__date { display: block; font-size: .9375rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.lc-exp__row.is-soon .lc-exp__when { color: var(--ink); }
/* the section's own divider closes each list */
.lc-exp__row:last-child, .lc-visit:last-child, .lc-ops__row:last-child { border-bottom: 0; }

/* promocode */
.lc-promo { display: flex; align-items: flex-end; gap: 1rem; max-width: 33.75rem; }
.lc-promo__input { flex: 1 1 auto; min-width: 0; font-size: 1.25rem; letter-spacing: .08em; text-transform: uppercase; }
.lc-promo__input::placeholder { text-transform: none; letter-spacing: 0; font-size: 1.0625rem; }
.lc-promo__go { flex: none; }
.lc-promo__go[aria-busy='true'] { opacity: .6; cursor: progress; }
.lc-promo__result { min-height: 1.5em; margin-top: .875rem; font-size: 1rem; color: var(--ink-2); }
.lc-promo__result.is-ok { color: var(--ink); }

/* purchases */
.lc-hist { border-top: 1px solid var(--line); }
.lc-hist[hidden] { display: none; }
.lc-visit { border-bottom: 1px solid var(--line); }
.lc-visit summary {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr) auto 6.5em .75rem;
  align-items: baseline; gap: .375rem 1.25rem;
  padding: 1.125rem 0;
  list-style: none;
  cursor: pointer;
}
.lc-visit summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .lc-visit summary:hover .lc-visit__place { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25rem; } }
.lc-visit__date { font-size: .9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lc-visit__place { font-size: 1.0625rem; }
.lc-visit__pts { font-size: .9375rem; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lc-visit__sum { text-align: right; font-size: 1.0625rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lc-visit__chev {
  width: .5rem; height: .5rem;
  align-self: center;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  transform: translateY(-.1875rem) rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}
.lc-visit[open] .lc-visit__chev { transform: translateY(2px) rotate(-135deg); }
.lc-visit__items { margin: 0; padding: 0 0 1.25rem calc(9.5em + 1.25rem); list-style: none; }
.lc-visit__items li { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; font-size: .9375rem; color: var(--ink-2); }
.lc-visit__qty { color: var(--mute); }
.lc-visit__price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lc-visit__none { padding: 0 0 1.25rem calc(9.5em + 1.25rem); font-size: .9375rem; color: var(--mute); }

/* the site's orders: one row each, the whole row opens the order page */
.lc-orders { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.lc-orders[hidden] { display: none; }
.lc-order { display: flex; align-items: center; gap: 1.25rem; border-bottom: 1px solid var(--line); }
.lc-order__link { flex: 1 1 auto; min-width: 0; }
.lc-order__repeat { flex: none; font-size: .9375rem; } /* «Повторить»: the same dishes into the cart */
.lc-order__link {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr) auto 6.5em .75rem;
  align-items: baseline; gap: .375rem 1.25rem;
  padding: 1.125rem 0;
  min-height: 2.75rem;
}
@media (hover: hover) { .lc-order__link:hover .lc-order__no { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25rem; } }
.lc-order__no { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.lc-order__date { font-size: .9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lc-order__status { font-size: .9375rem; color: var(--ink-2); white-space: nowrap; }
.lc-order__status.is-open { color: var(--ink); }
.lc-order__sum { text-align: right; font-size: 1.0625rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lc-order__chev {
  width: .5rem; height: .5rem;
  align-self: center;
  border-right: 1px solid var(--ink); border-top: 1px solid var(--ink);
  transform: rotate(45deg);
}
.lc-orders__note { margin-top: 1rem; font-size: .9375rem; line-height: 1.5; color: var(--mute); }

.lc-ops { margin-top: clamp(2rem, 4vw, 3.5rem); }
.lc-ops__title { font-size: var(--fs-label); font-weight: 400; color: var(--mute); }
.lc-ops__list { margin: .75rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.lc-ops__row {
  display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; gap: .25rem 1.25rem; align-items: baseline;
  padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem;
}
.lc-ops__date { color: var(--ink-2); }
.lc-ops__amt { font-variant-numeric: tabular-nums; }

/* ---------- tablets and phones ---------- */
@media (max-width: 899px) {
  .lc-intro {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'head' 'login' 'perks';
    padding-top: clamp(2rem, 8vw, 3.5rem);
  }
  .lc-login { margin-top: 2rem; }
  .lc-intro__nojs { margin-top: 1.75rem; }
  .lc-perks { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 2.5rem; }
  .lc-perks li { padding: .875rem 0 1rem; }

  .lc-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'balance' 'level' 'demo'; padding-top: 2rem; }
  .lc-card__head { margin-bottom: 2.25rem; }
  .lc-level { margin-top: 2.25rem; padding: 1.25rem 0 0; border-left: 0; border-top: 1px solid var(--line); }

  .lc-sec { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 2.75rem 0; }
  .lc-sec__label { display: flex; align-items: baseline; gap: .875rem; }
}

@media (max-width: 599px) {
  .lc-login { margin-inline: calc(-1 * var(--gutter)); border-inline: 0; }
  .lc-balance__split div { padding-right: .5rem; }
  .lc-card__out { grid-row: 1; grid-column: 2; align-self: start; }

  .lc-exp__row { grid-template-columns: minmax(0, 1fr) auto; }
  .lc-exp__type { grid-column: 1; grid-row: 2; }
  .lc-exp__when { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

  .lc-visit summary {
    grid-template-columns: minmax(0, 1fr) auto .75rem;
    grid-template-areas: 'date sum chev' 'place pts chev';
    gap: 2px .875rem;
  }
  .lc-visit__date { grid-area: date; }
  .lc-visit__place { grid-area: place; font-size: 1rem; }
  .lc-visit__pts { grid-area: pts; text-align: right; }
  .lc-visit__sum { grid-area: sum; }
  .lc-visit__chev { grid-area: chev; }
  .lc-visit__items, .lc-visit__none { padding-left: 0; }
  .lc-order__link {
    grid-template-columns: minmax(0, 1fr) auto .75rem;
    grid-template-areas: 'no sum chev' 'date status chev';
    gap: 2px .875rem;
  }
  .lc-order__no { grid-area: no; }
  .lc-order__date { grid-area: date; }
  .lc-order__status { grid-area: status; text-align: right; }
  .lc-order__sum { grid-area: sum; }
  .lc-order__chev { grid-area: chev; }
  .lc-ops__row { grid-template-columns: minmax(0, 1fr) auto; }
  .lc-ops__label { grid-column: 1; }
  .lc-ops__amt { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

  .lc-promo { flex-wrap: wrap; }
  .lc-promo__go { width: 100%; }
}

@media (max-width: 379px) {
  /* «накопительные» does not fit a third of 320px: the split becomes three quiet rows */
  .lc-balance__split { grid-template-columns: minmax(0, 1fr); }
  .lc-balance__split div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .625rem 0 .5rem; }
  .lc-balance__split dd { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lc-level__bar { transition: none; }
}