/* Sign-up wizard (/start) and the business-type tiles on the landing page. Design tokens from app.css only;
   logical properties only (RTL). */
@layer components {

/* ---------------------------------------------------------------- business tiles */
.biz-picker { display: grid; gap: 14px; }
.biz-title { font-size: clamp(1.35rem, 4.2vw, 1.9rem); margin: 0; letter-spacing: -.02em; }
.biz-sub { margin: -6px 0 0; }
.biz-search-wrap { position: relative; display: flex; align-items: center; }
.biz-search-wrap > svg { position: absolute; inset-inline-start: 14px; color: var(--muted); pointer-events: none; }
.biz-search { padding-inline-start: 42px; min-height: 48px; border-radius: 14px; }
.biz-groups { gap: 6px; }
.biz-groups .btn { min-height: 34px; border-radius: 999px; }
.biz-groups .btn[aria-pressed="true"] { border-color: var(--brand); color: var(--brand-text); background: var(--brand-soft); }
.biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.biz-grid > [role="listitem"] { display: contents; }
.biz-none { grid-column: 1 / -1; margin: 0; }
.biz-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 104px; padding: 14px; text-align: start; cursor: pointer;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); font: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; }
.biz-tile:hover { border-color: var(--brand-line); transform: translateY(-1px); box-shadow: 0 12px 30px -18px var(--brand-glow); }
.biz-tile[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.biz-tile.other { border-style: dashed; background: transparent; }
.biz-emoji { font-size: 1.8rem; line-height: 1; }
.biz-name { display: grid; gap: 2px; font-weight: 600; font-size: .95rem; line-height: 1.35; }
@media (max-width: 420px) { .biz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .biz-tile { min-height: 92px; } }
/* phones: the groups in one swipeable row, so the tiles stay near the top */
@media (max-width: 600px) {
  .biz-groups { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px; }
  .biz-groups .btn { flex: none; }
  .land-hero .lead { display: none; }
  .land-picker { padding: 16px; }
}

/* landing page: the tiles are the first thing */
.land-hero { padding: 34px 0 10px; text-align: center; }
.land-hero .lead { color: var(--muted); max-width: 620px; margin: 10px auto 0; }
.land-picker { max-width: 980px; margin: 18px auto 0; padding: 22px; }

/* ---------------------------------------------------------------- wizard layout */
.wiz { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); padding-block: 22px 96px; align-items: start; }
@media (min-width: 980px) { .wiz { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } .wiz-toggle { display: none !important; } }
.wiz-left { display: grid; gap: 14px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.wiz-left > * { min-width: 0; }
.wiz-right { min-width: 0; align-self: stretch; } /* full row height, so the preview can stay in view */
.wiz-sticky { position: sticky; top: 84px; display: grid; gap: 10px; }
.wiz-card { padding: 20px; }
.wiz-card h2 { font-size: 1.2rem; }
.wiz-card h2:focus, .wiz-card h1:focus { outline: none; }
.wiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
@media (max-width: 979px) {
  body[data-view="setup"] .wiz-right { display: none; }
  body[data-view="preview"] .wiz-left { display: none; }
}
.wiz-toggle { position: fixed; inset-block-end: 16px; inset-inline-end: 16px; z-index: 30; border-radius: 999px; box-shadow: 0 12px 30px -10px var(--brand-glow); }

/* steps */
.wiz-steps ol { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.wiz-steps li { flex: 0 1 auto; min-width: 0; }
.wiz-steps li:has(.on) { flex: 1 0 auto; }
.wiz-steps button { display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted);
  font: inherit; font-size: .8rem; cursor: pointer; white-space: nowrap; min-height: 36px; }
.wiz-steps button:hover { color: var(--text); background: var(--surface-2); }
.wiz-steps .n { display: inline-grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; border: 1px solid var(--border-strong); font-family: var(--mono); font-size: .72rem; flex: none; }
.wiz-steps .on { color: var(--text); font-weight: 600; }
.wiz-steps .on .n { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); box-shadow: 0 0 12px var(--brand-glow); }
.wiz-steps .done .n { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-text); }
/* calm: numbers, and the name of the current step only (the others keep their name for screen readers) */
.wiz-steps button:not(.on) .l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* services */
.svc-edit { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.svc-edit > input[type="checkbox"] { margin-top: 12px; inline-size: 18px; block-size: 18px; flex: none; }
.svc-edit.off { opacity: .55; }
.svc-edit-main { display: grid; gap: 8px; flex: 1; min-width: 0; }
.svc-edit-main > input { font-weight: 600; }
.svc-edit-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.mini { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .82rem; color: var(--muted); }
.mini input { inline-size: 84px; min-height: 36px; padding-block: 4px; }
@media (max-width: 420px) { .mini input { inline-size: 68px; } .svc-edit { gap: 10px; padding: 10px; } }
.mini input[type="time"] { inline-size: 120px; }
.mini-check { font-size: .82rem; align-items: center; }
.svc-edit-meta .btn { margin-inline-start: auto; }

/* team */
.stepper { display: inline-flex; align-items: center; gap: 12px; padding: 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.stepper output { min-inline-size: 2.4ch; text-align: center; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper .btn { font-size: 1.3rem; }
.seg.wrap { flex-wrap: wrap; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.member { display: flex; gap: 10px; align-items: center; }
.member > input { flex: 1; min-width: 0; }
.member-svcs { position: relative; }
.member-svcs > summary { list-style: none; white-space: nowrap; }
.member-svcs > summary::-webkit-details-marker { display: none; }
.member-pop { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 10; display: grid; gap: 8px; min-inline-size: 220px; padding: 12px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow); }

/* booking form */
.q-edit { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.q-add > summary { list-style: none; display: inline-flex; }
.q-add > summary::-webkit-details-marker { display: none; }

/* extras */
.extras { display: grid; gap: 16px; }
.extra h3 { margin-bottom: 4px; font-size: .95rem; }
.extra p { margin-bottom: 8px; }

/* chat */
.wiz-chat { display: grid; gap: 10px; padding: 16px; }
.wiz-log { max-height: 300px; min-height: 80px; }
.wiz-send { display: flex; gap: 8px; align-items: flex-end; }
.wiz-send textarea { flex: 1; min-height: 44px; max-height: 140px; resize: vertical; }
.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing span { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--muted); animation: wiz-dot 1s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes wiz-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* preview: the booking page in a small browser frame */
.pv-frame { border: 1px solid var(--border-strong); border-radius: var(--r-xl); background: var(--bg-elev); overflow: hidden; box-shadow: var(--shadow); }
.pv-bar { display: flex; gap: 6px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.pv-bar > span:not(.pv-url) { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--surface-3); }
.pv-url { margin-inline-start: 8px; font-family: var(--mono); font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-body { padding: 18px; display: grid; gap: 14px; }
.pv-head { display: flex; gap: 12px; align-items: center; }
.pv-logo { inline-size: 44px; block-size: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.4rem; background: var(--brand-soft); border: 1px solid var(--brand-line); flex: none; }
.pv-name { font-weight: 700; font-size: 1.1rem; }
.pv-h { margin: 0; font-size: 1rem; }
.pv-list { border-radius: var(--r-md); }
.pv-svc { cursor: default; padding: 12px; }
.pv-cat { display: grid; gap: 8px; }
.pv-cat + .pv-cat { margin-top: 10px; }
.pv-block { display: grid; gap: 8px; }
.pv-person { gap: 8px; padding-inline-start: 4px; }
.pv-person .face { inline-size: 22px; block-size: 22px; font-size: .68rem; }
.pv-days { gap: 4px; }
.pv-day { padding: 3px 9px; border-radius: 999px; font-size: .76rem; color: var(--muted); border: 1px solid var(--border); }
.pv-day.on { color: var(--text); border-color: var(--brand-line); background: var(--brand-soft); }
.pv-q { margin: 0; }
.pv-q input, .pv-q select, .pv-q textarea { pointer-events: none; }
.pv-rules { margin: 0; }

/* changes the assistant (or a click) just made */
.flash { animation: wiz-flash 1.6s var(--ease); }
@keyframes wiz-flash { 0% { box-shadow: 0 0 0 2px var(--brand), 0 0 24px var(--brand-glow); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .flash, .typing span, .biz-tile { animation: none; transition: none; } }

/* ================================================================ v3: split screen, one question at a time */
.wiz { gap: 0; padding-block: 0; min-block-size: calc(100dvh - 65px); }
.wiz-left { align-content: start; gap: var(--space-5); padding-block: var(--space-8) var(--space-10); padding-inline-end: 0; }
@media (min-width: 980px) {
  .wiz.container.wide { max-inline-size: none; padding-inline: 0; grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr); }
  .wiz-left { padding-inline: max(var(--space-8), calc((100vw - 1280px) / 2 + var(--space-8))) var(--space-9); max-inline-size: 760px; justify-self: end; inline-size: 100%; }
  .wiz-right { background: linear-gradient(160deg, var(--brand-soft), transparent 55%), var(--surface-2); border-inline-start: 1px solid var(--border); }
  .wiz-sticky { top: 65px; min-block-size: calc(100dvh - 65px); align-content: center; justify-items: center; padding: var(--space-8); }
}
@media (max-width: 979px) { .wiz-right { padding-block: var(--space-6); } .wiz-sticky { justify-items: center; } }
.wiz-card.wiz-step { padding: 0; background: none; border: 0; box-shadow: none; display: grid; gap: var(--space-4); }
.wiz-step > h1, .wiz-step > h2, .wiz-step .biz-title { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -.03em; line-height: 1.1; margin: 0; }
html[lang="ar"] .wiz-step > h1, html[lang="ar"] .wiz-step > h2, html[lang="ar"] .wiz-step .biz-title { letter-spacing: 0; line-height: 1.35; }
.wiz-step > h1 + p, .wiz-step > h2 + p, .wiz-step .biz-sub { font-size: 1.02rem; color: var(--muted); margin: 0; }
.wiz-progress { display: grid; gap: var(--space-3); }
.wiz-steps ol { gap: 6px; }
.wiz-steps li, .wiz-steps li:has(.on) { flex: 1 1 0; }
.wiz-steps button { position: relative; min-height: 24px; padding: 0; justify-content: center; }
.wiz-steps button::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; block-size: 4px; margin-block-start: -2px; border-radius: 2px; background: var(--border-strong); transition: background var(--dur-slow) var(--ease); }
.wiz-steps button.done::before { background: var(--brand-line); }
.wiz-steps button.on::before { background: var(--brand); }
.wiz-steps button:hover { background: transparent; }
.wiz-steps button:hover::before { background: var(--brand-line); }
.wiz-steps .n, .wiz-steps .l, .wiz-steps button:not(.on) .l { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wiz-toggle { inset-block-end: calc(84px + env(safe-area-inset-bottom)); }
.wiz-nav { position: sticky; inset-block-end: 0; z-index: var(--z-raised); padding-block: var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent); }

/* big, friendly choice cards */
.biz-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-3); }
.biz-tile { min-height: 124px; padding: var(--space-4); gap: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs); position: relative; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease); }
.biz-tile:hover { border-color: var(--brand-line); transform: translateY(-2px); box-shadow: var(--shadow); }
.biz-tile:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.biz-emoji { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 14px; background: var(--surface-2); font-size: 1.6rem; }
.biz-name { font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.biz-tile[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow); }
.biz-tile[aria-pressed="true"]::after { content: ""; position: absolute; inset-block-start: 12px; inset-inline-end: 12px; inline-size: 22px; block-size: 22px; border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.biz-tile.other { background: transparent; box-shadow: none; }
.biz-search { min-height: 52px; border-radius: var(--r-lg); font-size: 1.02rem; }
.biz-groups .btn { min-height: 36px; box-shadow: none; }
@media (max-width: 420px) { .biz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .biz-tile { min-height: 108px; padding: var(--space-3); } .biz-emoji { inline-size: 42px; block-size: 42px; font-size: 1.4rem; } }

/* services, team, questions: selection cards */
.svc-edit, .q-edit { background: var(--surface); border-color: var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); padding: var(--space-3) var(--space-4); transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.svc-edit:has(> input:checked) { border-color: var(--brand-line); box-shadow: 0 0 0 1px var(--brand-soft), var(--shadow-xs); }
.svc-edit.off { opacity: .6; box-shadow: none; background: transparent; }
.stepper { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }

/* the assistant: a calm panel, not another form */
.wiz-chat.card { background: var(--surface-2); border-color: transparent; box-shadow: none; }
.wiz-chat .bubble { background: var(--surface); }

/* the preview: the booking page on a phone */
.pv-frame.pv-phone { --bezel: var(--text); inline-size: min(360px, 100%); border-radius: 46px; border: 10px solid var(--bezel); outline: 1px solid var(--border-strong); background: var(--bg); box-shadow: var(--elev-3); position: relative; }
.pv-phone .pv-bar { justify-content: center; flex-direction: column; gap: 6px; padding: 10px 14px 8px; background: var(--bg); border-block-end: 1px solid var(--border); }
:root[data-theme="dark"] .pv-frame.pv-phone { --bezel: var(--surface-3); }
.pv-phone .pv-bar > span:not(.pv-url) { inline-size: 92px; block-size: 24px; border-radius: 14px; background: var(--bezel); }
.pv-phone .pv-url { margin: 0; padding: 3px 10px; border-radius: var(--radius-full); background: var(--surface-2); font-family: var(--font); font-size: .7rem; max-inline-size: 90%; }
.pv-phone .pv-body { max-block-size: min(640px, calc(100dvh - 220px)); overflow: auto; scrollbar-width: none; }
.pv-phone .pv-body::-webkit-scrollbar { display: none; }
.pv-phone .pv-logo { background: var(--brand); color: var(--brand-ink); border: 0; }
.pv-phone .pv-svc { background: var(--surface); }

/* landing */
.land-hero { padding-block: var(--space-10) var(--space-4); }
.land-title { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); margin: 0 auto; max-inline-size: 20ch; letter-spacing: -.035em; line-height: 1.05; }
html[lang="ar"] .land-title { letter-spacing: 0; line-height: 1.3; }
.land-hero .lead { font-size: 1.1rem; }
.land-picker.card { max-inline-size: 1040px; padding: var(--space-7); box-shadow: var(--elev-2); }
.features .feature { padding: var(--space-4) 0; border-block-start: 1px solid var(--border); }
} /* end of @layer components */