/* ============================================
   onboard.css — First-run restaurant setup
   The very first screen a new customer sees, so it's deliberately
   calmer and roomier than the working screens inside the app.
   ============================================ */

.onboard-screen {
  min-height: 100vh;
  max-width: 460px;
  margin: 0 auto;
  padding: 40px 20px 60px;
  text-align: center;
}

.onboard-logo {
  height: 34px;
  width: auto;
}

.onboard-tagline {
  color: var(--text-dim);
  font-size: 0.82rem;
  margin: 10px 0 30px;
}

.onboard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: left;
  box-shadow: var(--shadow-md);
}

.onboard-card h1 {
  color: var(--amber);
  font-size: 1.35rem;
  margin-bottom: 6px;
}

.onboard-sub {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 22px;
  line-height: 1.6;
}

.onboard-card label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 16px 0 6px;
}

.onboard-card input {
  width: 100%;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
  box-sizing: border-box;
}

.field-note {
  color: var(--text-dim);
  font-size: 0.73rem;
  margin-top: 6px;
  line-height: 1.5;
}

.onboard-error {
  color: var(--rust);
  font-size: 0.82rem;
  margin-top: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.onboard-card button {
  width: 100%;
  margin-top: 24px;
  padding: 14px;
  background: var(--amber);
  color: #141414;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}

.onboard-link {
  display: block;
  text-align: center;
  margin-top: 18px;
  color: var(--text-dim);
  font-size: 0.8rem;
  text-decoration: none;
}

/* ---------- Success ---------- */
.onboard-card.success {
  border-color: var(--success);
}

.onboard-tick {
  font-size: 2.6rem;
  text-align: center;
  margin-bottom: 10px;
}

.onboard-card.success h1 {
  text-align: center;
}

.onboard-card.success .onboard-sub {
  text-align: center;
}

/* Credentials are shown once and can't be recovered, so they're set apart
   from the surrounding text and made easy to copy down. */
.credential-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 16px;
  margin-bottom: 9px;
}

.credential-label {
  color: var(--text-dim);
  font-size: 0.76rem;
}

.credential-value {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: 1rem;
  color: var(--amber);
  word-break: break-all;
  text-align: right;
}

.next-steps {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.next-steps-title {
  color: var(--text);
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 12px;
}

.next-steps ol {
  margin-left: 18px;
}

.next-steps li {
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.65;
  margin-bottom: 9px;
}

.next-steps strong {
  color: var(--text);
}

/* ============================================
   Multi-step wizard additions
   ============================================ */

.ob-progress {
  height: 4px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}

.ob-progress-bar {
  height: 100%;
  background: var(--amber);
  width: 20%;
  transition: width 0.3s var(--ease);
}

.ob-step-label {
  color: var(--text-dim);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 22px;
}

.ob-step h1 {
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

/* ---------- Rooms yes/no cards ---------- */
.ob-choice-row {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.ob-choice-row .ob-choice {
  /* Explicitly reset every property the page's generic ".onboard-card
     button" rule also sets (width, margin-top, padding, background,
     border, border-radius) — that rule has higher specificity than a
     single class alone (.ob-choice), so without this compound selector
     and these resets, its amber background and border:none silently won
     for the parts .ob-choice didn't re-declare here too. That's exactly
     why both Yes/No cards showed amber by default instead of only the
     selected one. */
  width: auto;
  margin-top: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 14px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
}

.ob-choice-row .ob-choice.active {
  border-color: var(--amber);
  background: rgba(245, 214, 19, 0.07);
}

.ob-choice-title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
}

.ob-choice.active .ob-choice-title { color: var(--amber); }

.ob-choice-sub {
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.4;
}

/* ---------- Review ---------- */
.ob-review {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px 16px;
  margin-top: 6px;
}

.ob-review-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.87rem;
}

.ob-review-row:last-child { border-bottom: none; }

.ob-review-row span:first-child { color: var(--text-dim); }
.ob-review-row span:last-child { font-weight: 700; text-align: right; }

/* ---------- Nav buttons ---------- */
.ob-nav {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.ob-nav .ob-back {
  width: auto;
  flex: 0 0 auto;
  margin-top: 0;
  padding: 14px 20px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.ob-nav .ob-next {
  flex: 1;
  margin-top: 0;
}

/* ============================================================
   Creating the account — the O spins, then completes into ORDO

   Appended after .onboard-card on purpose: this shares that class for
   its box (background, border, shadow), and CSS resolves equal-specificity
   rules by source order, so these overrides win without needing extra
   specificity tricks — the same trap that caused the earlier button bug.
   ============================================================ */

.ob-loading {
  text-align: center;
  padding: 46px 24px 42px;
}

.ob-loading-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: 14px;
}

/* Both O's occupy the exact same box, stacked, so the spin appears to
   simply slow down and settle in place rather than one glyph vanishing
   and an unrelated one appearing elsewhere. */
.ob-loading-o-slot {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 50px;
}

.ob-loading-o-spin,
.ob-loading-o-static {
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1;
  color: var(--amber);
}

.ob-loading-o-spin {
  opacity: 1;
  transition: opacity 0.5s var(--ease);
  animation: obSpin 0.85s linear infinite;
}

.ob-loading-o-static {
  opacity: 0;
  transition: opacity 0.5s var(--ease) 0.15s;
}

/* JS adds .done once the account is genuinely ready — see onboard.js */
.ob-loading.done .ob-loading-o-spin { opacity: 0; }
.ob-loading.done .ob-loading-o-static { opacity: 1; }

@keyframes obSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.ob-loading-rdo {
  font-family: 'Poppins', sans-serif;
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.5s var(--ease) 0.2s, transform 0.5s var(--ease) 0.2s;
}

.ob-loading.done .ob-loading-rdo {
  opacity: 1;
  transform: translateX(0);
}

.ob-loading-text {
  color: var(--text-dim);
  font-size: 0.86rem;
  margin-top: 4px;
}