/* POS sign-in by WhatsApp (reverse OTP). Standalone page: tokens.css only.

   THE POS'S OWN LOOK (owner, 13 Oct 2026): the same face, background, card,
   field, button and link as the booking platform (app.css .card / .field /
   .input / .btn), so signing in does not look like another product. Every
   value is a token; nothing here picks a colour of its own. The WhatsApp
   button is the POS's primary blue with the WhatsApp mark, not WhatsApp's
   green -- the mark already says where it goes. */

* { box-sizing: border-box; }

.pl-body {
  margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-app); font-family: var(--font); font-size: 15px;
  color: var(--text-primary); -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
/* :where() keeps this reset at zero weight, so .pl-btn's own colour and
   weight win (a plain `.pl-body button` outranked them: dark, thin labels). */
:where(.pl-body) :where(button, input) { font: inherit; color: inherit; }

.pl-card {
  width: 100%; max-width: 400px; margin: var(--sp-4); padding: var(--sp-6);
  background: var(--white); border: 1px solid var(--border-soft);
  border-radius: var(--r-xl); box-shadow: var(--shadow-drop);
}

/* the rail's brand: a white-on-blue mark and the product name */
.pl-brand { display: flex; align-items: center; gap: 11px; margin-bottom: var(--sp-5); }
.pl-logo {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: var(--blue-600); color: var(--white); display: grid; place-items: center;
}
.pl-brand-name { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--blue-900); }

.pl-title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 4px; }
.pl-sub { margin: 0 0 var(--sp-4); color: var(--text-muted); font-size: 13px; }
.pl-sub:empty { display: none; }

/* .field > label */
.pl-label {
  display: block; font-size: 11.5px; font-weight: 700; color: var(--text-label);
  text-transform: uppercase; letter-spacing: .04em; margin: var(--sp-4) 0 6px;
}
/* .input -- 16px so a phone does not zoom the page on focus */
.pl-input {
  width: 100%; padding: 11px 12px; border-radius: var(--r-md);
  border: 1px solid var(--border-input); background: var(--white); font-size: 16px;
}
.pl-input:focus { outline: 0; border-color: var(--blue-mid); box-shadow: 0 0 0 3px var(--blue-50); }

/* .btn.primary, full width and tall enough for a thumb */
.pl-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; min-height: 46px; margin-top: var(--sp-4); padding: 10px 14px;
  border-radius: var(--r-md); border: 1px solid var(--blue-600);
  background: var(--blue-600); color: var(--white);
  font-size: 14.5px; font-weight: 700; text-align: center; text-decoration: none;
  cursor: pointer;
}
.pl-btn:hover { background: var(--blue-800); border-color: var(--blue-800); }
.pl-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--blue-100); }
/* .btn -- the plain white button */
.pl-btn.ghost {
  background: var(--white); color: var(--text-secondary); border-color: var(--border-input);
  margin-top: var(--sp-3);
}
.pl-btn.ghost:hover { background: var(--bg-faint); }
/* .btn[disabled]: solid, just muted (never half-opacity) */
.pl-btn[disabled], .pl-btn:disabled {
  background: var(--text-ghost); border-color: var(--text-ghost); color: var(--white); cursor: not-allowed;
}
.pl-wa svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
/* TWO APPS, TWO BUTTONS (team, 13 Oct 2026): WhatsApp Personal is the
   primary; WhatsApp Business the outlined one under it -- the same choice,
   told apart at a glance. */
.pl-wa + .pl-wa { margin-top: var(--sp-2); }
#pl-wab { background: var(--white); color: var(--blue-600); border-color: var(--blue-600); }
#pl-wab:hover { background: var(--blue-50); }

/* the three steps, numbered like the POS's step chips */
.pl-steps {
  list-style: none; counter-reset: pl; margin: var(--sp-2) 0 0; padding: 0;
  font-size: 14px; color: var(--text-secondary);
}
.pl-steps li { counter-increment: pl; display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.pl-steps li::before {
  content: counter(pl); flex: none; width: 24px; height: 24px; border-radius: var(--r-pill);
  background: var(--blue-50); color: var(--blue-800); font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
}

.pl-link { color: var(--blue-600); font-weight: 600; text-decoration: none; }
.pl-link:hover { text-decoration: underline; }
.pl-note { font-size: 13px; color: var(--text-muted); margin: var(--sp-2) 0 0; }
/* the countdown: the page's face with aligned figures (body sets tabular-nums) */
.pl-count { text-align: center; }

/* an error is a panel, as in the POS; nothing shows while it is empty */
.pl-err {
  margin: var(--sp-3) 0 0; padding: 9px 12px; border-radius: var(--r-md);
  background: var(--red-bg); border: 1px solid var(--red-border); color: var(--red-fg);
  font-size: 13px; font-weight: 600;
}
.pl-err:empty { display: none; }

.pl-alt {
  display: block; text-align: center; margin-top: var(--sp-4); font-size: 13px;
  font-weight: 600; color: var(--blue-600); text-decoration: none;
}
.pl-alt:hover { text-decoration: underline; }