/*
 * OpenClaw setup page in Vietnamese. Loads after the Last Table tokens and components, which bring the hero, cards and
 * buttons. This file lays out the numbered day and the order form. Only Last Table variables.
 */

/* The shell's display and mono files are Latin subsets; a Vietnamese page uses faces that carry the whole alphabet. */
:root:lang(vi) {
  --lt-font-display: Georgia, "Noto Serif", "Times New Roman", serif;
  --lt-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans Mono", monospace;
}

.lt-body > .lt-h2:not(:first-child) { margin-top: var(--lt-space-7); }

.oc-flow { list-style: none; margin: var(--lt-space-5) 0; padding: 0; counter-reset: step; }
.oc-flow li {
  position: relative;
  display: grid;
  gap: var(--lt-space-1);
  padding: 0 0 var(--lt-space-5) var(--lt-space-7);
  counter-increment: step;
}
.oc-flow li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-radius-pill);
  background: var(--lt-surface-2);
  font: 600 var(--lt-step--1) / 1 var(--lt-font-mono);
  color: var(--lt-text-1);
}
.oc-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 32px;
  bottom: 4px;
  border-left: 1px solid var(--lt-line);
}
.oc-flow span { color: var(--lt-text-2); }

/* The order form: one column of labelled fields, the package choice on top. */
.oc-order .lt-label { display: block; margin-top: var(--lt-space-4); }
.oc-order .lt-input { width: 100%; box-sizing: border-box; }
.oc-order textarea.lt-input { resize: vertical; min-height: 6rem; }
.oc-packages { margin: 0; padding: 0; border: 0; }
.oc-packages label { display: flex; gap: var(--lt-space-2); align-items: flex-start; margin-top: var(--lt-space-2); }
.oc-packages input, .oc-consent input { width: 24px; height: 24px; margin: 0; flex: none; }
.oc-trap-field { display: none; }
.oc-consent { display: flex; gap: var(--lt-space-2); align-items: flex-start; margin-top: var(--lt-space-4); color: var(--lt-text-2); }
.oc-status { color: var(--lt-text-2); }
.oc-status-error { color: var(--lt-text-1); font-weight: 600; }