/* Breakroom staff portal — matches admin.getbreakroom.app aesthetic.
   Prior version was brutalist serif on paper; this pass pulls toward the
   Next.js admin's "Owner.com-style neutral canvas + brand-red accents"
   look: Inter sans-serif dominant, subtle hair borders, 10px rounded
   panels, mono eyebrow labels, brand-red reserved for CTAs + hover.
   Palette + primitive class hooks (result-card, plan-btn, active-sub-*,
   enroll-*) unchanged — app.js pins to them. */
:root {
  --red:       #B23A3A;
  --red-deep:  #9A2F2F;
  --ink:       #0A0A0A;
  --paper:     #FAFAFA;
  --hair:      #EAEAEA;
  --hair-soft: rgba(234, 234, 234, 0.6);
  --muted:     #6B7280;
  --muted-soft:#9CA3AF;
  --green:     #059669;
  --gold:      #B8860B;
  --silver:    #8A8A8A;
  --bronze:    #8B5A2B;
  --vip:       #6B1E4D;
  --panel:     #FFFFFF;
  --brand-radius: 10px;
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 20, 20, 0.06);
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-serif: ui-serif, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 var(--font-sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}
.wrap.wide { max-width: 720px; padding: 28px 24px 80px; }

.brand { text-align: center; margin-bottom: 28px; }

.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  background: var(--red);
  color: #fff;
  border-radius: var(--brand-radius);
  font: 700 24px/1 var(--font-serif);
  margin-bottom: 12px;
}

h1 {
  margin: 0 0 6px;
  font: 700 28px/1.15 var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.page-h { margin-bottom: 20px; }

/* Mono eyebrow above section headings — the "01 · Lookup" style admin
   uses on OwnerShell panels. Add via .brand-eyebrow on any preceding
   element (usually a div or span). */
.brand-eyebrow {
  display: block;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.sub { color: var(--muted); margin: 0; font-size: 14px; }

form { display: flex; flex-direction: column; gap: 12px; }

label { display: flex; flex-direction: column; gap: 6px; }
label > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-mono);
}

input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password] {
  font: 500 15px/1.4 var(--font-sans);
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--hair);
  color: var(--ink);
  outline: none;
  border-radius: 8px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
}

.otp-label input {
  font: 700 26px/1 var(--font-mono);
  text-align: center;
  letter-spacing: 0.4em;
  padding: 16px;
}

button, .btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font: 600 14px/1 var(--font-sans);
  padding: 12px 18px;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  margin-top: 4px;
  letter-spacing: 0.01em;
  transition: background 0.12s ease, transform 0.05s ease;
}
button:hover:not(:disabled), .btn:hover { background: var(--red-deep); }
button:disabled { background: var(--hair); color: var(--muted); cursor: not-allowed; }
button:active, .btn:active { transform: translateY(1px); }

.err {
  color: var(--red-deep);
  background: #fff5f5;
  border: 1px solid rgba(178, 58, 58, 0.3);
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 8px;
  margin: 4px 0 0;
}

.fine {
  color: var(--muted);
  font-size: 13px;
  margin-top: 12px;
  text-align: center;
}
.fine a { color: var(--muted); text-decoration: underline; }

/* ----- topbar (dashboard, subscriptions.html) ----- */
/* Was black/red; now white/hair to match admin OwnerShell's chrome. */
.topbar {
  background: var(--panel);
  color: var(--ink);
  border-bottom: 1px solid var(--hair);
}
.topbar-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.logo-sm {
  font: 700 14px/1 var(--font-serif);
  color: var(--red);
  letter-spacing: 0.02em;
}
.who {
  flex: 1;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-mono);
}
.logout-link {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color 0.12s ease, background 0.12s ease;
}
.logout-link:hover { color: var(--red); background: var(--paper); }

.nav-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color 0.12s ease, background 0.12s ease;
}
.nav-link:hover { color: var(--ink); background: var(--paper); }

/* ----- result card (customer lookup result) ----- */
.result-card {
  margin-top: 20px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--brand-radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.result-name {
  font: 700 24px/1.2 var(--font-serif);
  margin: 0 0 4px;
  color: var(--ink);
}
.tier-badge {
  display: inline-block;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  color: #fff;
  vertical-align: middle;
  margin-left: 8px;
  border-radius: 4px;
}
.tier-bronze { background: var(--bronze); }
.tier-silver { background: var(--silver); }
.tier-gold   { background: var(--gold); }
.tier-vip    { background: var(--vip); }

.sub-line {
  font-style: normal;
  color: var(--muted);
  font-size: 13px;
  margin: 4px 0 16px;
  font-family: var(--font-mono);
}

.pts-big {
  font: 700 42px/1 var(--font-mono);
  color: var(--ink);
  display: block;
  margin: 8px 0 4px;
  font-variant-numeric: tabular-nums;
}
.pts-label {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Section separator between customer info and rewards list. */
.rewards-heading {
  margin: 20px 0 4px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--hair);
  padding-top: 16px;
}

.reward-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair-soft);
}
.reward-row:last-child { border-bottom: none; }
.reward-info { flex: 1; }
.reward-name { font: 600 15px/1.2 var(--font-sans); color: var(--ink); }
.reward-cost { font: 500 12px/1 var(--font-mono); color: var(--muted); margin-top: 4px; }
.reward-row button {
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 6px;
}

.empty {
  color: var(--muted);
  font-size: 13px;
  padding: 12px 0;
}

/* Fade-in-out flash banner shown after a successful redemption. */
.flash-ok {
  background: var(--green);
  color: #fff;
  padding: 12px 16px;
  margin-top: 16px;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  animation: flashFade 3s ease-out forwards;
}
@keyframes flashFade {
  0%   { opacity: 0; transform: translateY(-4px); }
  10%  { opacity: 1; transform: translateY(0); }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ----- subscription enrollment ----- */

.plan-picker {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
}
.sub-burn-row { margin: 8px 0 16px; }
.sub-burn-row button {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font: 600 13px/1 var(--font-sans);
  letter-spacing: 0.02em;
  border-radius: 8px;
  cursor: pointer;
}
.sub-burn-row button:disabled { opacity: 0.5; cursor: default; }
.sub-burn-row button:hover:not(:disabled) { background: var(--red); border-color: var(--red); }

.provision-block {
  margin: 12px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--hair);
  background: #fdf9f0;
  border-radius: 8px;
}
.provision-msg {
  font: 500 10px/1 var(--font-mono);
  color: var(--muted);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.provision-row { display: flex; gap: 8px; }
.provision-row input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--hair);
  border-radius: 6px;
  font: 500 13px/1.2 var(--font-sans);
}
.provision-row button {
  padding: 8px 12px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.02em;
  border-radius: 6px;
  cursor: pointer;
}
.provision-row button:disabled { opacity: 0.5; cursor: default; }

.plan-heading {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.plan-loading {
  color: var(--muted);
  font-size: 13px;
  padding: 12px 0;
}
.plan-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.plan-btn {
  padding: 16px 12px;
  border: 1px solid var(--hair);
  background: var(--panel);
  border-radius: var(--brand-radius);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, transform 0.05s, box-shadow 0.15s;
}
.plan-btn:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.plan-btn:active { transform: translateY(1px); }
.plan-price {
  font: 700 24px/1 var(--font-mono);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.plan-name {
  font: 500 12px/1 var(--font-mono);
  color: var(--muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.enroll-panel {
  margin-top: 20px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--brand-radius);
  box-shadow: var(--shadow-sm);
}
.enroll-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 700 16px/1.2 var(--font-serif);
  color: var(--ink);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
.enroll-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
  border-radius: 4px;
  margin: 0;
}
.enroll-close:hover { background: var(--paper); color: var(--ink); }
.enroll-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--hair);
}
.enroll-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 8px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin: 0;
  border-radius: 0;
}
.enroll-tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 600;
}
.enroll-body label { display: block; margin-bottom: 12px; }
.enroll-body label > span {
  display: block;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.enroll-body input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hair);
  border-radius: 6px;
  font: 500 14px/1.4 var(--font-sans);
}
.card-container {
  min-height: 100px;
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: var(--panel);
}
.enroll-body .primary {
  width: 100%;
  padding: 12px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 8px;
  font: 600 14px/1 var(--font-sans);
  cursor: pointer;
}
.enroll-body .primary:disabled {
  background: var(--hair);
  color: var(--muted);
  cursor: not-allowed;
}
.hint {
  font: 500 11px/1.4 var(--font-mono);
  color: var(--muted);
  margin-top: 8px;
  letter-spacing: 0.02em;
}

/* ----- manage subscriptions (subscriptions.html) ----- */

.subs-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.subs-controls label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.subs-controls select {
  padding: 8px 10px;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: var(--panel);
  font: 500 13px/1 var(--font-sans);
}
.subs-list { display: flex; flex-direction: column; gap: 12px; }
.sub-card {
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--brand-radius);
  box-shadow: var(--shadow-sm);
}
.sub-head { display: flex; align-items: center; justify-content: space-between; }
.sub-name { font: 700 16px/1.2 var(--font-serif); }
.sub-meta { font: 500 12px/1 var(--font-mono); color: var(--muted); margin-top: 2px; }
.sub-plan { font: 500 14px/1.2 var(--font-sans); margin-top: 10px; }
.sub-cycle { font: 500 12px/1.2 var(--font-mono); color: var(--muted); margin-top: 4px; }
.sub-status {
  font: 600 10px/1 var(--font-mono);
  padding: 4px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.status-active { background: var(--green); color: #fff; }
.status-invoice_pending { background: var(--gold); color: #fff; }
.status-canceled { background: var(--hair); color: var(--muted); }
.status-paused { background: var(--silver); color: #fff; }
.method-badge {
  font: 500 10px/1 var(--font-mono);
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--paper);
  border: 1px solid var(--hair);
  color: var(--muted);
}
.sub-card .danger {
  margin-top: 12px;
  padding: 8px 14px;
  background: var(--panel);
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.sub-card .danger:hover { background: var(--red); color: #fff; }

/* ----- active subscription section (dashboard lookup) ----- */
/* Highlighted card the receptionist uses to burn a cut. Bordered in ink
   (not brand-red) so it stands out from the surrounding hair-color
   panels without shouting "danger". Matches admin's emphasized StatCard. */

.active-sub-block {
  margin: 20px 0 4px;
  padding: 20px;
  border: 1px solid var(--ink);
  background: var(--panel);
  border-radius: var(--brand-radius);
  box-shadow: var(--shadow-sm);
}
.active-sub-heading {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.active-sub-plan {
  font: 700 20px/1.2 var(--font-serif);
  margin-bottom: 8px;
  color: var(--ink);
}
.active-sub-cuts {
  font: 500 13px/1.2 var(--font-mono);
  color: var(--ink);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.active-sub-cuts-bar {
  height: 6px;
  background: var(--hair);
  margin: 8px 0 10px;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
}
.active-sub-cuts-bar-fill {
  height: 100%;
  background: var(--green);
  border-radius: 999px;
}
.active-sub-cycle {
  font: 500 12px/1.2 var(--font-mono);
  color: var(--muted);
  margin-bottom: 14px;
}
.active-sub-burn {
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: var(--red);
  color: #fff;
  font: 600 14px/1 var(--font-sans);
  letter-spacing: 0.02em;
  border-radius: 8px;
  cursor: pointer;
  margin: 0;
  transition: background 0.12s ease;
}
.active-sub-burn:disabled { background: var(--hair); color: var(--muted); cursor: not-allowed; }
.active-sub-burn:hover:not(:disabled) { background: var(--red-deep); }
.active-sub-burn:active { background: var(--red-deep); }

/* ----- barber picker modal ----- */
/* Matches admin.getbreakroom.app aesthetic: rounded panel on a hair
   border, small mono eyebrow label, divide-y rows with round avatar +
   name + right chevron, brand-red hover accent. */

.barber-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
/* Author display:flex beats the browser's default [hidden]{display:none}
   on specificity ties. Without this the modal stays visible after
   overlay.hidden=true and cancel silently no-ops. */
.barber-picker-overlay[hidden] { display: none; }
.barber-picker-card {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--brand-radius);
  padding: 20px 0 16px;
  max-width: 420px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
}
.barber-picker-head {
  padding: 0 20px 14px;
  border-bottom: 1px solid var(--hair);
  font: 700 18px/1.2 var(--font-serif);
  color: var(--ink);
}
.barber-picker-head::before {
  content: "01";
  display: block;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}
.barber-picker-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}
.barber-picker-list .plan-loading,
.barber-picker-list .empty {
  padding: 16px 20px;
  font: 400 13px/1.4 var(--font-sans);
  color: var(--muted);
}
.barber-picker-list .bp-row {
  margin: 0;
  padding: 12px 20px;
  background: var(--panel);
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--hair-soft);
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  font: 500 15px/1.2 var(--font-sans);
  transition: background 0.12s ease, color 0.12s ease;
}
.barber-picker-list .bp-row:last-child { border-bottom: 0; }
.barber-picker-list .bp-row:hover { background: var(--paper); color: var(--red); }
.barber-picker-list .bp-row:hover .bp-chev { color: var(--red); transform: translateX(2px); }
.barber-picker-list .bp-row:active { background: #f5f2ef; }
.barber-picker-list .bp-avatar-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.barber-picker-list .bp-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--hair);
}
.barber-picker-list .bp-avatar-fallback {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 14px/1 var(--font-sans);
  color: var(--muted);
  background: var(--hair);
}
.barber-picker-list .bp-avatar-img {
  position: absolute;
  inset: 0;
}
.barber-picker-list .bp-img-broken { display: none; }
.barber-picker-list .bp-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barber-picker-list .bp-chev {
  color: var(--muted);
  font-size: 14px;
  transition: color 0.12s ease, transform 0.12s ease;
}
.barber-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--hair);
  padding: 12px 20px 0;
}
.barber-picker-actions .secondary {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 8px 16px;
  font: 600 13px/1 var(--font-sans);
  letter-spacing: 0.02em;
  margin: 0;
}
.barber-picker-actions .secondary:hover { color: var(--red); border-color: var(--red); }

/* ----- tip modal (post-burn gratuity) ----- */
/* Step 02 of the burn flow, so it deliberately reuses the barber
   picker's chrome — same overlay scrim, same panel, same mono eyebrow —
   and reads as the second half of one action rather than a new dialog.
   Injected from app.js rather than dashboard.html, so every class here
   is self-contained. */

.tip-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60; /* above the barber picker — the tip opens on top of it */
  padding: 20px;
}
/* Same specificity fight the barber picker has with [hidden]{display:none}. */
.tip-modal-overlay[hidden] { display: none; }

.tip-modal {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--brand-radius);
  padding: 20px 0 16px;
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
}
.tip-modal-head {
  padding: 0 20px 14px;
  border-bottom: 1px solid var(--hair);
}
.tip-modal-eyebrow {
  display: block;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}
.tip-modal-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.tip-modal-title {
  font: 700 18px/1.2 var(--font-serif);
  color: var(--ink);
}
.tip-modal-close {
  background: none;
  border: 0;
  color: var(--muted-soft);
  font-size: 22px;
  line-height: 1;
  padding: 0 2px;
  margin: 0;
  cursor: pointer;
  transition: color 0.12s ease;
}
.tip-modal-close:hover { color: var(--red); }
.tip-modal-close:disabled { opacity: 0.4; cursor: default; }
/* The card being charged is the one fact the receptionist must be able
   to read back to the customer before confirming, so it sits in the
   header rather than buried next to the confirm button. */
.tip-card-line {
  margin-top: 6px;
  font: 400 12px/1.4 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--muted);
}

.tip-modal-body {
  padding: 16px 20px 0;
  overflow-y: auto;
}

/* Presets wrap to a second line on the narrow front-desk tablet rather
   than shrinking below a comfortable tap target. */
.tip-amount-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tip-amount-btn {
  flex: 1 1 calc(50% - 4px);
  min-width: 96px;
  min-height: 52px;
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--hair);
  border-radius: 8px;
  font: 600 17px/1 var(--font-sans);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.tip-amount-btn:hover {
  background: var(--paper);
  color: var(--red);
  border-color: var(--red);
}
.tip-amount-btn:active { background: #f5f2ef; }
.tip-amount-btn:disabled { opacity: 0.5; cursor: default; }
.tip-amount-custom {
  font: 600 14px/1 var(--font-sans);
  color: var(--muted);
}

.tip-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 0 14px;
}
.tip-custom-row:focus-within { border-color: var(--red); }
.tip-custom-prefix {
  font: 600 20px/1 var(--font-sans);
  color: var(--muted);
}
.tip-custom-input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: 600 20px/1 var(--font-sans);
  color: var(--ink);
}

/* Confirm step — the amount is the largest thing on screen because it
   is the one number the receptionist is accountable for. */
.tip-confirm-amount {
  text-align: center;
  font: 700 38px/1 var(--font-serif);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tip-confirm-detail {
  margin-top: 8px;
  text-align: center;
  font: 400 13px/1.4 var(--font-sans);
  color: var(--muted);
}

.tip-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  border-top: 1px solid var(--hair);
  padding: 12px 0 0;
}
.tip-secondary,
.tip-primary {
  margin: 0;
  min-height: 44px;
  border-radius: 8px;
  padding: 10px 18px;
  font: 600 13px/1 var(--font-sans);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.tip-secondary {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--hair);
}
.tip-secondary:hover { color: var(--red); border-color: var(--red); }
.tip-primary {
  background: var(--red);
  color: #fff;
  border: 1px solid var(--red);
}
.tip-primary:hover { background: var(--red-deep); border-color: var(--red-deep); }
.tip-secondary:disabled,
.tip-primary:disabled { opacity: 0.55; cursor: default; }

/* Declines render inside the modal — the page-level #err banner sits
   behind the scrim where nobody reads it. */
.tip-modal-err {
  margin: 12px 20px 0;
}