/* Loyalty card (pages/loyalty.js). Every rule starts .stp-loyalty-.
   Colours from the studio's variables only; the card itself wears the
   shop's own (shared/loyalty-card.css). */
.stp-loyalty-group { margin-top: 0; padding: 22px; }
.stp-loyalty-group h2 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.stp-loyalty-wait { width: 48px; height: 48px; margin: 12vh auto; border-radius: 50%; border: 5px solid var(--line); border-top-color: var(--green); animation: stp-loyalty-spin .9s linear infinite; }
@keyframes stp-loyalty-spin { to { transform: rotate(360deg); } }

/* The top: the name, whether it is on, and the one button used every day. */
.stp-loyalty-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.stp-loyalty-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stp-loyalty-pill { font-size: 13px; font-weight: 800; padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.stp-loyalty-pill.on { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.stp-loyalty-onoff { min-height: 44px; gap: 12px; }
.stp-loyalty-onoff b { font-size: 15px; }
.stp-loyalty-group .st-btn.stp-loyalty-scan { justify-self: stretch; min-height: 76px; font-size: 22px; border-radius: 18px; }
.stp-loyalty-scan .stp-scan-icon { width: 28px; height: 28px; margin-right: 12px; }
.stp-loyalty-lead { margin: 0; font-size: 17px; line-height: 1.45; }

.stp-loyalty-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stp-loyalty-how li { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; line-height: 1.4; }
.stp-loyalty-how li > b { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--green); font-size: 14px; }
.stp-loyalty-how.small { grid-template-columns: 1fr 1fr; }

/* A set of buttons: every one the same width and height. */
.stp-loyalty-pair, .stp-loyalty-acts { display: grid; gap: 10px; }
.stp-loyalty-pair { grid-template-columns: 1fr 1fr; }
.stp-loyalty-acts.one { grid-template-columns: minmax(0, 340px); }
.stp-loyalty-acts.two { grid-template-columns: 1fr 1fr; }
.stp-loyalty-acts.stack { grid-template-columns: 1fr; }
.st-group .stp-loyalty-pair .st-btn, .stp-loyalty-acts .st-btn { justify-self: stretch; width: 100%; padding: 0 14px; font-size: 16px; }
.stp-loyalty-pair .stp-scan-icon, .stp-loyalty-acts .stp-scan-icon { margin-right: 10px; }

.stp-loyalty-tvs { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.stp-loyalty-tvs-said { display: flex; align-items: center; gap: 10px; color: var(--text); }
.stp-loyalty-tvs-said .stp-scan-icon { color: var(--muted); }
.st-group .stp-loyalty-tvs .st-btn { justify-self: auto; min-width: 170px; }

/* The numbers: three the same size. */
.stp-loyalty-stat { display: grid; gap: 4px; padding: 18px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); text-align: center; }
.stp-loyalty-stat b { font-size: 34px; line-height: 1.1; }
.stp-loyalty-stat span { color: var(--muted); font-size: 14px; font-weight: 700; }

/* A drawing waiting to be looked at. */
.stp-loyalty-notice { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--gold); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.stp-loyalty-notice .stp-scan-icon { color: var(--gold); width: 28px; height: 28px; }
.stp-loyalty-notice span { display: grid; gap: 2px; }
.stp-loyalty-notice i { font-style: normal; color: var(--muted); font-size: 14px; }

/* Everything else: cards of one size that open a window each. */
.stp-loyalty-tiles { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; }
.stp-loyalty-tile { min-height: 150px; align-content: start; gap: 6px; }
.stp-loyalty-tile b { font-size: 17px; }
.stp-loyalty-tile-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--green) !important; margin-bottom: 6px; }

/* The set-up: the questions beside the card they make. */
.stp-loyalty-setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 24px; align-items: start; }
.stp-loyalty-form { display: grid; gap: 4px; }
.stp-loyalty-form .st-q select { width: 100%; }
.stp-loyalty-form .st-error:empty { display: none; }
.stp-loyalty-save { margin-top: 14px; width: 100%; max-width: 340px; }
.stp-loyalty-preview { position: sticky; top: 0; display: grid; gap: 8px; }
.stp-loyalty-preview .st-label { margin: 0; }
.stp-loyalty-preview .lc-card, .stp-loyalty-art-card .lc-card { max-width: 380px; margin: 0; }

/* Which screens show the code. */
.stp-loyalty-tvlook { width: min(340px, 100%); aspect-ratio: 16 / 9; margin: 0 auto; border-radius: 10px; overflow: hidden; background: var(--surface); display: grid; grid-template-rows: 1fr 22%; box-shadow: 0 0 0 6px #05080f; }
.stp-loyalty-tvlook-board { display: grid; place-items: center; color: var(--muted); font-size: 14px; }
.stp-loyalty-tvlook-strip { background: #05080f; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 0 10px; font-size: 11px; }
.stp-loyalty-tvlook-strip i { height: 80%; aspect-ratio: 1; background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0 / 25% 25%; border: 2px solid #fff; border-radius: 3px; }
.stp-loyalty-tvlist { display: grid; padding: 4px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.stp-loyalty-tvlist .st-toggle + .st-toggle { border-top: 1px solid var(--line); }

/* The card's picture. */
.stp-loyalty-art { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.stp-loyalty-art-card { display: grid; gap: 8px; }
.stp-loyalty-art-side { display: grid; gap: 10px; align-content: start; }
.stp-loyalty-art-side p, .stp-loyalty-art-side h3 { margin: 0; }
.stp-loyalty-art-side h3 { margin-top: 8px; font-size: 18px; }
.stp-loyalty-art-side .st-label { margin: 8px 0 0; }
.stp-loyalty-drawing { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 12px 0; }
.stp-loyalty-drawing > b { font-size: 20px; }
.stp-loyalty-drawing-words { margin: 0; font-size: 17px; font-weight: 700; }
.stp-loyalty-ring { width: 150px; height: 150px; }
.stp-loyalty-ring-track { stroke: var(--line); }
.stp-loyalty-ring-arc { stroke: var(--green); stroke-linecap: round; transition: stroke-dashoffset .9s ease; }
.stp-loyalty-ring-pct { fill: var(--text); font-weight: 800; font-family: inherit; }

/* The card for the counter. */
.stp-loyalty-show { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: center; }
.stp-loyalty-qr { background: #fff; border-radius: 16px; padding: 10px; }
.stp-loyalty-qr svg { display: block; width: 100%; height: auto; }
.stp-loyalty-show-words { display: grid; gap: 8px; }
.stp-loyalty-show-words .st-label { margin: 0; }
.stp-loyalty-join { margin: 0; font-size: 18px; font-weight: 700; word-break: break-all; }

/* Staff and more. */
.stp-loyalty-more { display: grid; gap: 8px; padding: 16px 0; border-top: 1px solid var(--line); }
.stp-loyalty-more:first-child { border-top: 0; padding-top: 0; }
.stp-loyalty-more h3, .stp-loyalty-more p { margin: 0; }
.stp-loyalty-more h3 { font-size: 18px; }
.stp-loyalty-danger { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--red); background: var(--surface-2); }
.stp-loyalty-danger p { margin: 0 0 6px; }
.stp-loyalty-danger ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.stp-loyalty-ask { margin: 0; font-size: 17px; line-height: 1.45; }

@media (max-width: 900px) {
  .stp-loyalty-setup, .stp-loyalty-art { grid-template-columns: 1fr; }
  .stp-loyalty-preview { position: static; }
  .stp-loyalty-tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .stp-loyalty-group { padding: 18px 16px; }
  .stp-loyalty-how, .stp-loyalty-how.small { grid-template-columns: 1fr; }
  .stp-loyalty-pair, .stp-loyalty-acts.two { grid-template-columns: 1fr; }
  .stp-loyalty-acts.one { grid-template-columns: 1fr; }
  .stp-loyalty-tiles { grid-template-columns: 1fr; }
  .stp-loyalty-tile { min-height: 0; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .stp-loyalty-tile-icon { grid-row: span 2; margin: 0; }
  .stp-loyalty-stat { padding: 14px 8px; }
  .stp-loyalty-stat b { font-size: 26px; }
  .stp-loyalty-show { grid-template-columns: 1fr; justify-items: center; }
  .stp-loyalty-qr { width: 200px; }
  .stp-loyalty-tvs .st-btn { width: 100%; }
}
/* Three numbers stay three across, even on a phone. */
@media (max-width: 760px) { .st-grid-3.stp-loyalty-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stp-loyalty-boards { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.stp-loyalty-boards li { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.stp-loyalty-locked { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--gold, #f5c21b); }