/* Aiolos — self-service onboarding wizard. Self-contained, responsive,
   professional. Scoped under .arb-ob so it never bleeds into the theme. */

.arb-ob {
	/* BookArrive brand: warm cream neutrals, charcoal panel, coral accent.
	   Deliberately a SINGLE light theme (no OS dark auto-switch) so the
	   signup always matches the cream site regardless of the visitor's
	   system preference — a marketing surface that commits to one look. */
	--ob-bg: #ffffff;
	--ob-ink: #201c18;
	--ob-ink-soft: #6f655a;
	--ob-line: #ece4d7;
	--ob-line-strong: #ddd0bd;
	--ob-accent: #e0503c;
	--ob-accent-deep: #c23f2e;
	--ob-accent-ink: #ffffff;
	--ob-aside-1: #2c2c31;
	--ob-aside-2: #17171a;
	--ob-aside-ink: #f4efe6;
	--ob-aside-soft: #c8c1b6;
	--ob-err: #c6362f;
	--ob-err-bg: #fbeceb;
	--ob-radius: 16px;
	--ob-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-family: var(--ob-font);
	color: var(--ob-ink);
	max-width: 960px;
	margin: 0 auto;
	padding: 16px;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}
.arb-ob *, .arb-ob *::before, .arb-ob *::after { box-sizing: border-box; }

/* ---------- Card ---------- */
.arb-ob-card {
	display: grid;
	grid-template-columns: 320px 1fr;
	background: var(--ob-bg);
	border: 1px solid var(--ob-line);
	border-radius: var(--ob-radius);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15,27,36,.05), 0 24px 60px -30px rgba(15,27,36,.28);
}
.arb-ob-card-done { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }

/* ---------- Aside (perks) ---------- */
.arb-ob-aside {
	background: linear-gradient(160deg, var(--ob-aside-1), var(--ob-aside-2));
	color: var(--ob-aside-ink);
	padding: 34px 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.arb-ob-headline { font-size: 24px; line-height: 1.15; margin: 0; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.arb-ob-subhead { margin: 0; font-size: 14.5px; color: var(--ob-aside-soft); line-height: 1.55; }
.arb-ob-perks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.arb-ob-perks li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ob-aside-ink); line-height: 1.4; }
.arb-ob-check {
	flex: none; width: 20px; height: 20px; border-radius: 50%;
	background: var(--ob-accent); color: var(--ob-accent-ink); font-size: 12px; font-weight: 700;
	display: grid; place-items: center; margin-top: 1px;
}

/* EL | EN language pill (top of the charcoal aside) */
.arb-ob-lang {
	display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; margin-bottom: 2px;
	background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
}
.arb-ob-lang-btn {
	font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1.4;
	color: var(--ob-aside-soft); text-decoration: none; padding: 4px 12px; border-radius: 999px;
	transition: background .15s, color .15s;
}
.arb-ob-lang-btn:hover { color: var(--ob-aside-ink); }
.arb-ob-lang-btn.is-active { background: var(--ob-accent); color: var(--ob-accent-ink); }
/* On the white confirmation card the pill needs light colors. */
.arb-ob-done .arb-ob-lang { background: #f6f1e7; border-color: var(--ob-line); margin-bottom: 14px; }
.arb-ob-done .arb-ob-lang-btn { color: var(--ob-ink-soft); }
.arb-ob-done .arb-ob-lang-btn:hover { color: var(--ob-ink); }
.arb-ob-done .arb-ob-lang-btn.is-active { background: var(--ob-accent); color: var(--ob-accent-ink); }

/* ---------- Form ---------- */
.arb-ob-form { padding: 30px 30px 26px; display: flex; flex-direction: column; }

.arb-ob-steps { list-style: none; display: flex; gap: 8px; margin: 0 0 24px; padding: 0; }
.arb-ob-step { display: flex; align-items: center; gap: 8px; flex: 1; color: var(--ob-ink-soft); font-size: 13px; }
.arb-ob-step-num {
	flex: none; width: 26px; height: 26px; border-radius: 50%;
	border: 1.5px solid var(--ob-line-strong); color: var(--ob-ink-soft);
	display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--ob-bg);
	transition: .2s;
}
.arb-ob-step-label { font-weight: 600; }
.arb-ob-step.is-current .arb-ob-step-num { border-color: var(--ob-accent); color: var(--ob-accent-ink); background: var(--ob-accent); }
.arb-ob-step.is-current { color: var(--ob-ink); }
.arb-ob-step.is-done .arb-ob-step-num { border-color: var(--ob-accent); color: var(--ob-accent); }

.arb-ob-body { display: flex; flex-direction: column; gap: 15px; }
.arb-ob-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.arb-ob-field { display: flex; flex-direction: column; gap: 6px; }
.arb-ob-label { font-size: 13px; font-weight: 600; color: var(--ob-ink); }
.arb-ob-req { color: var(--ob-err); }
.arb-ob-input {
	width: 100%; font: inherit; font-size: 15px; color: var(--ob-ink);
	padding: 11px 13px; border: 1.5px solid var(--ob-line-strong); border-radius: 10px;
	background: var(--ob-bg); transition: border-color .15s, box-shadow .15s;
}
.arb-ob-input:focus { outline: none; border-color: var(--ob-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ob-accent) 22%, transparent); }
.arb-ob-field-err .arb-ob-input { border-color: var(--ob-err); }
.arb-ob-err { margin: 0; font-size: 12.5px; color: var(--ob-err); }
.arb-ob-servererr {
	margin: 16px 0 0; font-size: 13.5px; color: var(--ob-err);
	background: var(--ob-err-bg); border: 1px solid color-mix(in srgb, var(--ob-err) 40%, transparent);
	border-radius: 10px; padding: 10px 13px;
}

/* Honeypot — off-screen, never shown to humans. */
.arb-ob-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Summary + accept ---------- */
.arb-ob-summary { border: 1px solid var(--ob-line); border-radius: 12px; overflow: hidden; }
.arb-ob-sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--ob-line); }
.arb-ob-sum-row:last-child { border-bottom: 0; }
.arb-ob-sum-k { color: var(--ob-ink-soft); }
.arb-ob-sum-v { color: var(--ob-ink); font-weight: 600; text-align: right; word-break: break-word; }
.arb-ob-accept { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ob-ink); cursor: pointer; margin-top: 4px; }
.arb-ob-accept input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--ob-accent); flex: none; }
.arb-ob-accept a { color: var(--ob-accent-deep); }

/* ---------- Actions ---------- */
.arb-ob-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }
.arb-ob-btn {
	font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
	padding: 11px 22px; border-radius: 10px; border: 1.5px solid transparent; transition: .15s;
}
.arb-ob-btn:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }
.arb-ob-btn-primary { background: var(--ob-accent); color: var(--ob-accent-ink); }
.arb-ob-btn-primary:hover { background: var(--ob-accent-deep); }
.arb-ob-btn-primary:disabled { opacity: .6; cursor: default; }
.arb-ob-btn-ghost { background: transparent; color: var(--ob-ink-soft); border-color: var(--ob-line-strong); }
.arb-ob-btn-ghost:hover { color: var(--ob-ink); border-color: var(--ob-ink-soft); }

/* ---------- Done / paywall / notice ---------- */
.arb-ob-done, .arb-ob-paywall, .arb-ob-notice { padding: 40px 34px; text-align: center; }
.arb-ob-done-icon, .arb-ob-lock { font-size: 44px; line-height: 1; margin-bottom: 12px; }
.arb-ob-done h2, .arb-ob-paywall h2, .arb-ob-notice h2 { margin: 0 0 8px; font-size: 22px; font-weight: 800; }
.arb-ob-done p, .arb-ob-paywall p, .arb-ob-notice p { margin: 0 auto 18px; font-size: 15px; color: var(--ob-ink-soft); max-width: 46ch; line-height: 1.55; }
.arb-ob-paywall, .arb-ob-notice {
	background: var(--ob-bg); border: 1px solid var(--ob-line); border-radius: var(--ob-radius);
	max-width: 520px; margin: 0 auto; box-shadow: 0 24px 60px -30px rgba(15,27,36,.28);
}
.arb-ob-paywall-contact a { color: var(--ob-accent-deep); font-weight: 600; }
.arb-ob-notice-error h2 { color: var(--ob-err); }

.arb-ob-loading { padding: 60px; text-align: center; color: var(--ob-ink-soft); }

/* ================================================================
   First-run floor-plan builder (quick setup)
   ================================================================ */
.arb-ob-qs-card { align-items: stretch; }
.arb-ob-qs-aside { gap: 12px; }

/* Live preview inside the charcoal aside */
.arb-ob-qs-pv-note {
	margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--ob-aside-soft);
	display: inline-flex; align-items: center; gap: 7px;
}
.arb-ob-qs-pv-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ob-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ob-accent) 30%, transparent); }
.arb-ob-qs-pv {
	background: rgba(0,0,0,.20); border: 1px solid rgba(255,255,255,.10);
	border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 14px;
	min-height: 180px; overflow: auto;
}
.arb-ob-qs-pv-band { display: flex; flex-direction: column; gap: 7px; }
.arb-ob-qs-pv-area { font-size: 11.5px; font-weight: 700; color: var(--ob-aside-ink); opacity: .8; }
.arb-ob-qs-pv-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.arb-ob-qs-pv-cell {
	width: 40px; height: 26px; flex: none; display: grid; place-items: center;
	background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.30);
	border-radius: 5px; color: var(--ob-aside-ink);
}
.arb-ob-qs-pv-cell--square { width: 28px; height: 28px; }
.arb-ob-qs-pv-cell--round { width: 28px; height: 28px; border-radius: 50%; }
.arb-ob-qs-pv-seats { font-size: 11px; font-weight: 700; }
.arb-ob-qs-pv-more { font-size: 12px; font-weight: 700; color: var(--ob-aside-soft); align-self: center; padding-left: 2px; }

/* Form side */
.arb-ob-qs-form { gap: 0; }
.arb-ob-qs-list { display: flex; flex-direction: column; gap: 14px; }
.arb-ob-qs-group {
	border: 1px solid var(--ob-line); border-radius: 12px; padding: 16px;
	display: flex; flex-direction: column; gap: 14px; position: relative; background: #fff;
}

/* Shape picker */
.arb-ob-qs-shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.arb-ob-qs-shape {
	font: inherit; cursor: pointer; background: var(--ob-bg); border: 1.5px solid var(--ob-line-strong);
	border-radius: 10px; padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px;
	transition: border-color .15s, background .15s, box-shadow .15s;
}
.arb-ob-qs-shape:hover { border-color: var(--ob-ink-soft); }
.arb-ob-qs-shape.is-sel { border-color: var(--ob-accent); background: color-mix(in srgb, var(--ob-accent) 8%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ob-accent) 18%, transparent); }
.arb-ob-qs-shape-label { font-size: 12.5px; font-weight: 600; color: var(--ob-ink); }
.arb-ob-qs-glyph { display: block; border: 2px solid var(--ob-ink-soft); }
.arb-ob-qs-shape.is-sel .arb-ob-qs-glyph { border-color: var(--ob-accent-deep); }
.arb-ob-qs-glyph--rect { width: 30px; height: 18px; border-radius: 4px; }
.arb-ob-qs-glyph--square { width: 22px; height: 22px; border-radius: 4px; }
.arb-ob-qs-glyph--round { width: 22px; height: 22px; border-radius: 50%; }

/* Fields */
.arb-ob-qs-fields { display: grid; grid-template-columns: auto auto 1fr; gap: 12px 16px; align-items: end; }
.arb-ob-qs-field { display: flex; flex-direction: column; gap: 6px; }
.arb-ob-qs-field--area { min-width: 0; }
.arb-ob-qs-flabel { font-size: 12.5px; font-weight: 600; color: var(--ob-ink-soft); }
.arb-ob-qs-input {
	width: 100%; font: inherit; font-size: 14.5px; color: var(--ob-ink);
	padding: 9px 12px; border: 1.5px solid var(--ob-line-strong); border-radius: 9px; background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.arb-ob-qs-input:focus { outline: none; border-color: var(--ob-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ob-accent) 22%, transparent); }

/* Stepper */
.arb-ob-qs-step { display: inline-flex; align-items: center; border: 1.5px solid var(--ob-line-strong); border-radius: 9px; overflow: hidden; }
.arb-ob-qs-stepbtn {
	font: inherit; font-size: 18px; line-height: 1; cursor: pointer; border: 0; background: #fff;
	color: var(--ob-ink); width: 36px; height: 38px; display: grid; place-items: center; transition: background .12s;
}
.arb-ob-qs-stepbtn:hover { background: var(--ob-line); }
.arb-ob-qs-stepval { min-width: 40px; text-align: center; font-size: 15px; font-weight: 700; color: var(--ob-ink); border-left: 1.5px solid var(--ob-line-strong); border-right: 1.5px solid var(--ob-line-strong); height: 38px; display: grid; place-items: center; padding: 0 6px; }

.arb-ob-qs-remove {
	position: absolute; top: 10px; right: 12px; font: inherit; font-size: 12.5px; font-weight: 600;
	background: transparent; border: 0; color: var(--ob-ink-soft); cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.arb-ob-qs-remove:hover { color: var(--ob-err); background: var(--ob-err-bg); }

.arb-ob-qs-add {
	font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 14px;
	background: transparent; border: 1.5px dashed var(--ob-line-strong); color: var(--ob-accent-deep);
	border-radius: 10px; padding: 12px; width: 100%; transition: border-color .15s, background .15s;
}
.arb-ob-qs-add:hover { border-color: var(--ob-accent); background: color-mix(in srgb, var(--ob-accent) 6%, #fff); }

/* Opening hours */
.arb-ob-qs-hours { margin-top: 18px; border: 1px solid var(--ob-line); border-radius: 12px; padding: 14px 16px; background: color-mix(in srgb, var(--ob-accent) 3%, #fff); }
.arb-ob-qs-hours-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.arb-ob-qs-hours-title { font-size: 14px; font-weight: 700; color: var(--ob-ink); }
.arb-ob-qs-hours-note { font-size: 12.5px; color: var(--ob-ink-soft); line-height: 1.45; }
.arb-ob-qs-hours-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.arb-ob-qs-hours-field { display: flex; flex-direction: column; gap: 6px; }
.arb-ob-qs-time { font-variant-numeric: tabular-nums; }

/* Totals + actions */
.arb-ob-qs-totals { display: flex; gap: 12px; margin-top: 18px; }
.arb-ob-qs-total { flex: 1; border: 1px solid var(--ob-line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; background: color-mix(in srgb, var(--ob-accent) 4%, #fff); }
.arb-ob-qs-total-n { font-size: 24px; font-weight: 800; color: var(--ob-ink); letter-spacing: -.01em; }
.arb-ob-qs-total-l { font-size: 12.5px; color: var(--ob-ink-soft); font-weight: 600; }
.arb-ob-qs-actions { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.arb-ob-qs-create { flex: none; }
.arb-ob-qs-skip { font-size: 13.5px; color: var(--ob-ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.arb-ob-qs-skip:hover { color: var(--ob-ink); }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
	.arb-ob-card { grid-template-columns: 1fr; }
	.arb-ob-aside { padding: 26px 22px; }
	.arb-ob-headline { font-size: 21px; }
	.arb-ob-form { padding: 24px 20px 22px; }
	.arb-ob-row { grid-template-columns: 1fr; }
	.arb-ob-step-label { display: none; }
	.arb-ob-step { flex: none; }
	/* Builder: stack fields, let the preview sit above the form. */
	.arb-ob-qs-fields { grid-template-columns: 1fr 1fr; }
	.arb-ob-qs-field--area { grid-column: 1 / -1; }
	.arb-ob-qs-actions { flex-direction: column; align-items: stretch; text-align: center; }
	.arb-ob-qs-create { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { .arb-ob * { transition: none !important; } }