/* ==========================================================================
   Marbook · shared components (customer, business and admin apps)
   ========================================================================== */

/* ---- Brand ---- */
.brand { direction: ltr; display: inline-flex; align-items: baseline; font-size: 23px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--ink); }
.brand i { width: 7px; height: 7px; margin-inline-start: 2px; border-radius: 50%; background: var(--accent); display: inline-block; }
.brand small { align-self: center; margin-inline-start: 10px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--surface-2); font-size: 11.5px; font-weight: 650; letter-spacing: 0; color: var(--ink-2); }
[dir="rtl"] .brand { letter-spacing: -0.03em; }

/* ---- Buttons ---- */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--ink);
  --btn-hover: var(--surface-3);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5);
  border-radius: var(--r-pill); border: 0;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap;
  transition: background var(--d) var(--ease), transform var(--d-fast) var(--ease), opacity var(--d) var(--ease), box-shadow var(--d) var(--ease);
  user-select: none; -webkit-user-select: none;
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.4; pointer-events: none; }
.btn-primary { --btn-bg: var(--ink); --btn-fg: var(--on-ink); --btn-hover: #26262a; }
.btn-accent { --btn-bg: var(--accent); --btn-fg: #fff; --btn-hover: #f03e20; }
.btn-outline { --btn-bg: var(--surface); --btn-hover: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink-2); --btn-hover: var(--surface-2); padding-inline: var(--s-3); }
.btn-ghost:hover { color: var(--ink); }
.btn-danger { --btn-bg: var(--danger-soft); --btn-fg: var(--danger); --btn-hover: #fbdde3; }
.btn-success { --btn-bg: var(--ok-soft); --btn-fg: var(--ok); --btn-hover: #d6efe0; }
.btn-sm { min-height: 36px; padding: 0 var(--s-4); font-size: 13.5px; }
.btn-xs { min-height: 30px; padding: 0 var(--s-3); font-size: 12.5px; }
.btn-lg { min-height: 54px; padding: 0 var(--s-6); font-size: 16px; }
.btn-block { width: 100%; }
.btn-icon { width: var(--tap); padding: 0; }
.btn-icon.btn-sm { width: 36px; }
.btn-icon.btn-xs { width: 30px; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--btn-fg); border-inline-end-color: transparent; animation: spin 0.7s linear infinite;
}
.link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-3); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color var(--d); }
.link:hover { text-decoration-color: var(--ink); }

/* Round icon button floating over imagery */
.float-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.94); color: var(--ink); box-shadow: var(--shadow-2); transition: transform var(--d-fast) var(--ease), background var(--d); }
.float-btn:hover { background: #fff; }
.float-btn:active { transform: scale(0.92); }

/* ---- Forms ---- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.field .hint { font-size: 12.5px; color: var(--ink-3); }
.field .error { font-size: 12.5px; font-weight: 550; color: var(--danger); animation: rise var(--d) var(--ease-out); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border-radius: 12px; border: 1.5px solid transparent;
  background: var(--surface-2); color: var(--ink);
  font-size: 16px; /* 16px stops iOS from zooming */
  transition: border-color var(--d) var(--ease), background var(--d) var(--ease), box-shadow var(--d) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:hover, .select:hover, .textarea:hover { background: var(--surface-3); }
.input:focus, .select:focus, .textarea:focus { background: var(--surface); border-color: var(--ink); }
.input[readonly] { color: var(--ink-2); }
.textarea { min-height: 104px; resize: vertical; line-height: 1.45; }
.select {
  appearance: none; padding-inline-end: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2385858b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
[dir="rtl"] .select { background-position: left 14px center; }
.field.has-error :is(.input, .select, .textarea, .phone-input) { border-color: var(--danger); background: var(--danger-soft); }
.input-icon { position: relative; display: block; }
.input-icon > .icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.input-icon > .input { padding-inline-start: 44px; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 720px) { .form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .span-2 { grid-column: span 2; } }
.select.sm, .input.sm { min-height: 38px; height: 38px; padding-block: 0; font-size: 14px; border-radius: var(--r-pill); width: auto; }

/* Phone number: country code + number in one field */
.phone-input { display: flex; align-items: stretch; border-radius: 12px; background: var(--surface-2); border: 1.5px solid transparent; transition: border-color var(--d), background var(--d); }
.phone-input:focus-within { background: var(--surface); border-color: var(--ink); }
.phone-input .cc { position: relative; flex: none; display: flex; align-items: center; gap: 4px; padding-inline: 14px 10px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.phone-input .cc::after { content: ""; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2385858b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center; }
.phone-input .cc select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.phone-input .cc:has(select:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 10px; }
.phone-input .sep { width: 1px; margin-block: 12px; background: var(--line-3); }
.phone-input input:focus-visible { outline: none; }
.phone-input input { flex: 1; min-width: 0; min-height: 45px; padding: 0 14px; border: 0; background: transparent; font-size: 16px; direction: ltr; }
[dir="rtl"] .phone-input input { text-align: end; }

/* Toggle switch */
.switch { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--tap); cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { position: relative; width: 46px; height: 28px; flex: none; border-radius: var(--r-pill); background: var(--line-2); transition: background var(--d) var(--ease); }
.switch .track::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 1px rgba(0, 0, 0, 0.06);
  transition: transform 260ms var(--ease-spring);
}
.switch input:checked + .track { background: var(--ink); }
.switch input:checked + .track::after { transform: translateX(18px); }
[dir="rtl"] .switch input:checked + .track::after { transform: translateX(-18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--ink); outline-offset: 2px; }
.switch input:disabled + .track { opacity: 0.4; }
.switch .switch-text { display: flex; flex-direction: column; gap: 2px; }
.switch .switch-text small { color: var(--ink-3); font-size: 13px; line-height: 1.4; }

/* Checkbox row (consents) */
.check { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14px; line-height: 1.45; }
.check input { position: absolute; inset-inline-start: 0; top: 1px; width: 22px; height: 22px; margin: 0; opacity: 0; pointer-events: none; }
.check .box { flex: none; width: 22px; height: 22px; margin-block-start: 1px; border-radius: 7px; border: 1.5px solid var(--line-3); background: var(--surface); display: grid; place-items: center; transition: background var(--d), border-color var(--d); }
.check .box svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3; fill: none; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 220ms var(--ease-out) 40ms; }
.check input:checked + .box { background: var(--ink); border-color: var(--ink); }
.check input:checked + .box svg { stroke-dashoffset: 0; }
.check input:focus-visible + .box { outline: 2px solid var(--ink); outline-offset: 2px; }
.check small { display: block; color: var(--ink-3); font-size: 12.5px; }

/* Selectable pill chips (multi-select) */
.check-chip { position: relative; }
.check-chip input { position: absolute; opacity: 0; }
.check-chip span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px;
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink);
  font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background var(--d), color var(--d);
}
.check-chip span:hover { background: var(--surface-3); }
.check-chip input:checked + span { background: var(--ink); color: var(--on-ink); }
.check-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Large radio cards (account type, delivery method...) */
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.choice-cards label { cursor: pointer; }
.choice-cards input { position: absolute; opacity: 0; }
.choice-cards .opt { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); height: 100%; transition: box-shadow var(--d), background var(--d); }
.choice-cards .opt:hover { background: var(--bg-soft); }
.choice-cards .opt small { color: var(--ink-3); font-size: 12.5px; line-height: 1.35; }
.choice-cards input:checked + .opt { box-shadow: inset 0 0 0 2px var(--ink); }
.choice-cards input:focus-visible + .opt { outline: 2px solid var(--ink); outline-offset: 2px; }
.choice-cards .opt > .icon { color: var(--ink); }

/* Spot illustrations (js/core/illustrations.js) */
.ill { display: block; color: var(--ink); }
.ill .ill-acc { color: var(--accent); }
.ill .ill-soft { color: var(--line-2); }

/* Account type at sign-up: two big cards with an illustration and a round tick */
.account-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.account-types label { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.account-types input { position: absolute; opacity: 0; pointer-events: none; }
.account-types .opt {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; height: 100%;
  padding: 14px 14px 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow var(--d), background var(--d), transform var(--d-fast);
}
.account-types label:hover .opt { background: var(--bg-soft); }
.account-types label:active .opt { transform: scale(0.985); }
.account-types .art {
  display: grid; place-items: center; width: 60px; height: 60px; margin-block-end: 10px;
  border-radius: 18px; background: var(--surface-2); transition: background var(--d);
}
.account-types .art .ill { width: 46px; height: 46px; }
.account-types strong { font-size: 15.5px; line-height: 1.25; letter-spacing: -0.01em; }
.account-types small { color: var(--ink-3); font-size: 12.5px; line-height: 1.35; }
.account-types .tick {
  position: absolute; top: 12px; inset-inline-end: 12px; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-3);
  transition: background var(--d), box-shadow var(--d);
}
.account-types .tick svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 220ms var(--ease-out) 40ms; }
.account-types input:checked + .opt { box-shadow: inset 0 0 0 2px var(--ink); background: var(--surface); }
.account-types input:checked + .opt .art { background: var(--accent-soft); }
.account-types input:checked + .opt .tick { background: var(--ink); box-shadow: none; }
.account-types input:checked + .opt .tick svg { stroke-dashoffset: 0; }
.account-types input:focus-visible + .opt { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 359px) { .account-types { grid-template-columns: 1fr; } }

/* Stepper (party size) */
.stepper { display: inline-flex; align-items: center; gap: var(--s-1); padding: 4px; border-radius: var(--r-pill); background: var(--surface-2); }
.stepper button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow-1); transition: transform var(--d-fast); }
.stepper button:active { transform: scale(0.9); }
.stepper button:disabled { opacity: 0.35; box-shadow: none; }
.stepper output { min-width: 64px; text-align: center; font-size: 26px; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* ---- Cards & surfaces ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); }
.card.elevated { border-color: transparent; box-shadow: var(--shadow-2); }
.card-flat { background: var(--surface-2); border-radius: var(--r-md); padding: var(--s-4); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-4); }
.card-head h3 { font-size: 17px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-4); }
.section-head h2 { font-size: 22px; }

/* ---- Chips & badges ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--surface-2); border: 0;
  font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.chip .icon { width: 15px; height: 15px; }
button.chip, a.chip, label.chip { cursor: pointer; transition: background var(--d), color var(--d), transform var(--d-fast); }
button.chip:hover, a.chip:hover { background: var(--surface-3); }
button.chip:active, a.chip:active { transform: scale(0.96); }
.chip.is-active { background: var(--ink); color: var(--on-ink); }
.chip-accent { background: var(--accent-soft); color: var(--accent-text); }
button.chip-accent:hover, a.chip-accent:hover { background: #ffe2da; }
.chip-outline { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.chip-slot { background: var(--accent-soft); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.chip-slot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse-dot 2.4s var(--ease) infinite; }
a.chip-slot:hover { background: #ffe2da; }

/* Live availability line */
.avail { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.avail::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse-dot 2.4s var(--ease) infinite; }
.avail.is-none { color: var(--ink-3); font-weight: 500; }
.avail.is-none::before { background: var(--ink-4); animation: none; }

.badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 650; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.has-icon::before { display: none; }
.badge-confirmed, .badge-active, .badge-resolved, .badge-sent, .badge-delivered, .badge-read, .badge-approved { color: var(--ok); background: var(--ok-soft); }
.badge-pending, .badge-open, .badge-sending, .badge-in_review { color: var(--warn); background: var(--warn-soft); }
.badge-cancelled, .badge-suspended, .badge-rejected, .badge-no_show, .badge-failed, .badge-undelivered { color: var(--danger); background: var(--danger-soft); }
.badge-completed, .badge-dismissed, .badge-block, .badge-neutral, .badge-deleted { color: var(--ink-2); background: var(--surface-2); }
.badge-manual, .badge-info { color: var(--info); background: var(--info-soft); }

/* ---- Rating ---- */
.rating { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; font-size: 13.5px; color: var(--ink); }
.rating .icon { color: var(--accent); fill: var(--accent); }
.rating .count { color: var(--ink-3); font-weight: 500; }
.rating-pill { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 44px; height: 28px; padding: 0 9px; border-radius: var(--r-pill); background: var(--surface-2); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rating-pill .icon { color: var(--accent); fill: var(--accent); }
.new-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 650; }
.score-big { font-size: 46px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.stars { display: inline-flex; gap: 2px; color: var(--line-3); }
.stars .on { color: var(--accent); }
.stars .on svg { fill: var(--accent); }
.star-input { display: flex; gap: var(--s-2); direction: ltr; justify-content: center; }
.star-input button { color: var(--line-3); padding: 4px; transition: transform 180ms var(--ease-spring), color var(--d); }
.star-input button:hover { transform: scale(1.12); }
.star-input button.on { color: var(--accent); }
.star-input button.on svg { fill: var(--accent); }

/* ---- Avatar ---- */
.avatar {
  --size: 40px;
  width: var(--size); height: var(--size); flex: none; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--surface-2); color: var(--ink-2);
  font-size: calc(var(--size) * 0.38); font-weight: 650; letter-spacing: -0.02em;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
/* No photo: the initials on a light pastel tint chosen from the name (never grey). */
.avatar[data-tint] { --tint-h: 8; background: hsl(var(--tint-h) 78% 93%); color: hsl(var(--tint-h) 44% 34%); }
.avatar[data-tint="1"] { --tint-h: 26; }
.avatar[data-tint="2"] { --tint-h: 44; background: hsl(44 85% 90%); color: hsl(38 60% 30%); }
.avatar[data-tint="3"] { --tint-h: 88; background: hsl(88 55% 90%); color: hsl(95 40% 28%); }
.avatar[data-tint="4"] { --tint-h: 145; background: hsl(145 50% 90%); }
.avatar[data-tint="5"] { --tint-h: 172; background: hsl(172 50% 89%); }
.avatar[data-tint="6"] { --tint-h: 198; }
.avatar[data-tint="7"] { --tint-h: 220; }
.avatar[data-tint="8"] { --tint-h: 245; }
.avatar[data-tint="9"] { --tint-h: 272; }
.avatar[data-tint="10"] { --tint-h: 305; }
.avatar[data-tint="11"] { --tint-h: 335; }
.avatar-lg { --size: 64px; }
.avatar-sm { --size: 32px; }
.avatar-xs { --size: 26px; }

/* ---- Cover art: photo, or a category-tinted placeholder ---- */
.cover-art { --tint: #f1f0ec; --tint-2: #e7e5df; --tint-ink: #5e5b52; position: relative; overflow: hidden; display: grid; place-items: center; background: linear-gradient(var(--angle, 135deg), var(--tint), var(--tint-2)); color: var(--tint-ink); isolation: isolate; }
.cover-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-art .mono { font-size: clamp(48px, 11vw, 88px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; opacity: 0.9; }
.cover-art .rings { position: absolute; inset: -20%; z-index: -1; opacity: 0.55; }
.cover-art .cat-icon { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; opacity: 0.55; }
.cover-art[data-v="1"] { --angle: 200deg; }
.cover-art[data-v="2"] { --angle: 20deg; }
.cover-art[data-v="3"] { --angle: 300deg; }
.cover-art[data-cat="food"] { --tint: #ffeee7; --tint-2: #ffd9cc; --tint-ink: #b23c1c; }
.cover-art[data-cat="beauty"] { --tint: #fcecf3; --tint-2: #f7d6e5; --tint-ink: #9c2f63; }
.cover-art[data-cat="wellness"] { --tint: #e9f5ed; --tint-2: #d2ecdb; --tint-ink: #276b45; }
.cover-art[data-cat="health"] { --tint: #eaf1fc; --tint-2: #d5e3f8; --tint-ink: #2a5596; }
.cover-art.thumb { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.cover-art.thumb .mono { font-size: 22px; }
.cover-art.thumb .cat-icon, .cover-art.thumb .rings { display: none; }

/* ---- Category tiles ---- */
.cat-tile { --tint: var(--surface-2); --tint-ink: var(--ink); width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--tint); color: var(--tint-ink); flex: none; }
.cat-tile[data-cat="food"] { --tint: #ffeee7; --tint-ink: #b23c1c; }
.cat-tile[data-cat="beauty"] { --tint: #fcecf3; --tint-ink: #9c2f63; }
.cat-tile[data-cat="wellness"] { --tint: #e9f5ed; --tint-ink: #276b45; }
.cat-tile[data-cat="health"] { --tint: #eaf1fc; --tint-ink: #2a5596; }

/* ---- Segmented control & tabs ---- */
.segmented { position: relative; display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border-radius: var(--r-pill); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented::-webkit-scrollbar { display: none; }
.segmented button, .segmented a { position: relative; z-index: 1; flex: none; min-height: 34px; padding: 0 14px; border-radius: var(--r-pill); color: var(--ink-2); font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; transition: color var(--d), background var(--d), box-shadow var(--d); }
.segmented button:hover, .segmented a:hover { color: var(--ink); }
.segmented .is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(17, 17, 20, 0.1), 0 1px 1px rgba(17, 17, 20, 0.04); }
.tabs { display: flex; gap: var(--s-5); border-block-end: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button { position: relative; padding: 12px 2px; color: var(--ink-3); font-weight: 600; white-space: nowrap; transition: color var(--d); }
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs .is-active { color: var(--ink); }
.tabs .is-active::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--ink); border-radius: 2px; animation: fade-in var(--d); }

/* ---- Day strip & time slots ---- */
.date-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-block: 2px 8px; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.date-strip::-webkit-scrollbar { display: none; }
.day {
  flex: none; scroll-snap-align: start; width: 58px; padding: 10px 0 10px; border-radius: 16px;
  background: var(--surface-2); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  transition: background var(--d) var(--ease), color var(--d), transform var(--d-fast);
}
.day:hover { background: var(--surface-3); }
.day:active { transform: scale(0.95); }
.day .dow { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.day .dnum { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.day .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-block-start: 3px; }
.day.is-full { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.day.is-full .dnum { color: var(--ink-4); }
.day.is-full .dot { background: transparent; }
.day.is-active { background: var(--ink); color: var(--on-ink); }
.day.is-active .dow { color: rgba(255, 255, 255, 0.65); }
.day.is-active .dot { background: var(--accent); }

.slot-group { margin-block-end: var(--s-5); }
.slot-group h4 { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-block-end: 10px; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.slot {
  min-height: 44px; border-radius: 12px; background: var(--surface-2);
  font-weight: 600; font-size: 15px;
  transition: background var(--d) var(--ease), color var(--d), transform var(--d-fast);
}
.slot:hover { background: var(--surface-3); }
.slot:active { transform: scale(0.95); }
.slot.is-active { background: var(--ink); color: var(--on-ink); }

/* ---- Lists ---- */
.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: var(--s-3); padding: 14px 0; border-block-end: 1px solid var(--line); }
.list-item:last-child { border-block-end: 0; }
.list-item .meta { color: var(--ink-3); font-size: 13px; }
.list-item .title { font-weight: 600; }
.list-item > .icon:first-child { color: var(--ink-2); }
button.list-item { width: 100%; text-align: start; }
a.list-item, button.list-item { transition: opacity var(--d); }
a.list-item:hover .title, button.list-item:hover .title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }

.option-card {
  position: relative; display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: start; padding: 16px;
  border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow var(--d) var(--ease), background var(--d), transform var(--d-fast);
}
.option-card:hover { background: var(--bg-soft); }
.option-card:active { transform: scale(0.99); }
.option-card.is-active { box-shadow: inset 0 0 0 2px var(--ink); }
.option-card .price { font-weight: 650; font-variant-numeric: tabular-nums; }
.option-card .tickmark { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--line-3); display: grid; place-items: center; color: #fff; transition: background var(--d), box-shadow var(--d); }
.option-card.is-active .tickmark { background: var(--ink); box-shadow: none; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.table { font-size: 14px; }
.table th { text-align: start; font-size: 12.5px; color: var(--ink-3); font-weight: 600; padding: 12px 16px; border-block-end: 1px solid var(--line); white-space: nowrap; background: var(--bg-soft); }
.table td { padding: 13px 16px; border-block-end: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-block-end: 0; }
.table tbody tr { transition: background var(--d-fast); }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.clickable:hover { background: var(--bg-soft); }
.table tbody tr.clickable:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 0; background: var(--bg-soft); }
@media (max-width: 719px) {
  .table.responsive thead { display: none; }
  .table.responsive tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; border-block-end: 1px solid var(--line); }
  .table.responsive tr:last-child { border-block-end: 0; }
  .table.responsive td { padding: 0; border: 0; }
  .table.responsive td[data-hide-sm] { display: none; }
  .table.responsive td.primary { grid-column: 1 / -1; }
  .table.responsive td[data-sm-label]::before { content: attr(data-sm-label); margin-inline-end: 6px; color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
}

/* ---- Banners ---- */
.banner { display: flex; gap: var(--s-3); align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); font-size: 14px; line-height: 1.45; }
.banner > .icon { margin-block-start: 1px; color: var(--ink-2); }
.banner-warn { background: var(--warn-soft); color: #5c3a00; }
.banner-warn > .icon { color: var(--warn); }
.banner-danger { background: var(--danger-soft); color: #6d1022; }
.banner-danger > .icon { color: var(--danger); }
.banner-ok { background: var(--ok-soft); color: #0a4d2c; }
.banner-ok > .icon { color: var(--ok); }
.banner-info { background: var(--info-soft); color: #193f99; }
.banner-info > .icon { color: var(--info); }

/* ---- Empty, skeleton, spinner ---- */
.empty { text-align: center; padding: var(--s-12) var(--s-5); color: var(--ink-2); display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.empty .empty-icon { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); margin-block-end: var(--s-1); }
.empty h3 { font-size: 19px; }
.empty p { max-width: 40ch; }
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent); animation: shimmer 1.3s infinite; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--ink); animation: spin 0.75s linear infinite; }
.page-loader { min-height: 50vh; display: grid; place-items: center; }

/* ---- Sheets: bottom sheet on phones, modal or side drawer on larger screens ---- */
.overlay {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(11, 11, 12, 0.36); animation: fade-in 240ms var(--ease) both;
}
.overlay.is-closing { animation: fade-out 220ms var(--ease) both; }
.sheet {
  --sheet-pt: var(--s-8); --sheet-px: var(--gutter);
  position: relative; width: 100%; max-height: 92dvh; overflow: auto; overscroll-behavior: contain;
  background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sheet-pt) var(--sheet-px) calc(var(--s-6) + var(--safe-bottom));
  box-shadow: var(--shadow-3); animation: sheet-in 460ms var(--ease-sheet) both;
}
.overlay.is-closing .sheet { animation: sheet-out 240ms var(--ease) both; }
.sheet::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 5px; background: var(--line-2); z-index: 3; }
/* The head (title + close) stays put while a long sheet scrolls. */
.sheet-head {
  position: sticky; top: calc(-1 * var(--sheet-pt)); z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  margin: calc(-1 * var(--sheet-pt)) calc(-1 * var(--sheet-px)) var(--s-2); padding: var(--sheet-pt) var(--sheet-px) var(--s-3);
  background: var(--surface);
}
.sheet-head h2 { font-size: 22px; }
.sheet-head .btn-icon { margin-block-start: -6px; margin-inline-end: -8px; }
.sheet-actions { display: flex; gap: var(--s-2); justify-content: flex-end; margin-block-start: var(--s-6); flex-wrap: wrap; }
.sheet-actions .btn { flex: 1 1 auto; }
@media (min-width: 720px) {
  .overlay { align-items: center; padding: var(--s-6); }
  .sheet { --sheet-px: var(--s-8); max-width: 540px; border-radius: var(--r-xl); padding: var(--s-8); box-shadow: var(--shadow-pop); animation: pop-in 280ms var(--ease-out) both; }
  .overlay.is-closing .sheet { animation: pop-out 180ms var(--ease) both; }
  .sheet.wide { max-width: 760px; }
  .sheet::before { display: none; }
  .sheet-actions .btn { flex: 0 0 auto; }
}
@media (min-width: 1000px) {
  .overlay.drawer { justify-content: flex-end; align-items: stretch; padding: 0; }
  .overlay.drawer .sheet { max-width: 460px; height: 100dvh; max-height: none; border-radius: 0; animation: drawer-in 380ms var(--ease-sheet) both; }
  .overlay.drawer.is-closing .sheet { animation: drawer-out 220ms var(--ease) both; }
  [dir="rtl"] .overlay.drawer .sheet { animation-name: drawer-in-rtl; }
  [dir="rtl"] .overlay.drawer.is-closing .sheet { animation-name: drawer-out-rtl; }
}

/* ---- Toasts ---- */
.toasts { position: fixed; z-index: 100; top: calc(var(--safe-top) + 12px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(440px, calc(100% - 24px)); pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px;
  border-radius: 16px; background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-pop);
  font-weight: 550; font-size: 14px; line-height: 1.35;
  animation: toast-in 420ms var(--ease-spring) both;
}
.toast .icon { width: 20px; height: 20px; }
.toast.ok .icon { color: #5ee09a; }
.toast.err .icon { color: #ff8a73; }
.toast.leaving { animation: toast-out 220ms var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-14px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px) scale(0.98); } }

/* ---- Success: Apple Pay-style animated tick ---- */
.success-screen {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--gutter);
  background: rgba(255, 255, 255, 0.96); animation: fade-in 200ms var(--ease) both;
}
@supports (backdrop-filter: blur(1px)) { .success-screen { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); } }
.success-screen.is-leaving { animation: fade-out 280ms var(--ease) both; }
.success-screen .inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); text-align: center; }
.success-screen h2 { font-size: 26px; opacity: 0; animation: rise 420ms var(--ease-out) 620ms both; }
.success-screen p { color: var(--ink-2); max-width: 32ch; opacity: 0; animation: rise 420ms var(--ease-out) 700ms both; }
.tick { width: 104px; height: 104px; overflow: visible; }
.tick .ring { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 302; stroke-dashoffset: 302; transform: rotate(-90deg); transform-origin: 52px 52px; animation: tick-ring 520ms var(--ease) forwards; }
.tick .disc { fill: var(--accent); transform-origin: 52px 52px; transform: scale(0); animation: tick-disc 420ms var(--ease-spring) 420ms forwards; }
.tick .mark { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 64; stroke-dashoffset: 64; animation: tick-mark 300ms var(--ease-out) 600ms forwards; }
.tick.is-pending .disc { fill: var(--ink); }
.tick.is-pending .ring { stroke: var(--ink); }
@keyframes tick-ring { to { stroke-dashoffset: 0; } }
@keyframes tick-disc { to { transform: scale(1); } }
@keyframes tick-mark { to { stroke-dashoffset: 0; } }
/* The small, static version used on success pages after the overlay. */
.tick-static { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; }
.tick-static.is-pending { background: var(--ink); }

/* ---- reCAPTCHA ---- */
.grecaptcha-badge { visibility: hidden !important; } /* replaced by the required notice below forms */
.captcha-note { font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }
.captcha-note a { text-decoration: underline; text-underline-offset: 2px; }
.captcha-box:empty { display: none; }
.captcha-box { min-height: 78px; }

/* ---- Language list ---- */
.lang-list { display: grid; gap: 8px; }
.lang-list button { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 18px; border-radius: var(--r-md); background: var(--surface-2); font-weight: 600; font-size: 15.5px; transition: background var(--d); }
.lang-list button:hover { background: var(--surface-3); }
.lang-list button.is-active { background: var(--ink); color: var(--on-ink); }
.lang-list .lang-name { display: inline-flex; align-items: center; gap: 12px; }
.flag { display: block; flex: none; border-radius: 50%; }

/* ---- Misc ---- */
.map-frame { width: 100%; height: 220px; border: 0; border-radius: var(--r-md); background: var(--surface-2); }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content); gap: 12px 16px; font-size: 14.5px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; font-weight: 600; text-align: end; overflow-wrap: break-word; min-width: 0; }
.mono-text { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; overflow-wrap: anywhere; }
.code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.dot-sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); vertical-align: middle; margin-inline: 6px; }

/* Telegram link row (profile, booking confirmation, business, admin) */
.tg-link:not(:last-child) > .list-item { border-block-end: 1px solid var(--line); }
.spinner.sm { width: 18px; height: 18px; border-width: 2px; flex: none; }

/* ---- Badges with an icon (no status dot) ---- */
.badge:has(> .icon)::before { display: none; }

/* ---- Customer risk ---- */
.risk-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 650; white-space: nowrap; color: var(--ink-2); background: var(--surface-2); }
.risk-badge.risk-low { color: var(--ok); background: var(--ok-soft); }
.risk-badge.risk-medium { color: var(--warn); background: var(--warn-soft); }
.risk-badge.risk-high { color: var(--danger); background: var(--danger-soft); }
.risk-dot { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; vertical-align: -4px; margin-inline-start: 6px; }
.risk-dot.risk-medium { color: var(--warn); background: var(--warn-soft); }
.risk-dot.risk-high { color: var(--danger); background: var(--danger-soft); }
.risk-panel { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.risk-panel.risk-medium { box-shadow: inset 0 0 0 1px #f1d9a6; background: #fffaf0; }
.risk-panel.risk-high { box-shadow: inset 0 0 0 1px #f3c4cd; background: #fff7f8; }
.risk-rows { display: grid; gap: 8px; margin-block-start: 10px; }
.risk-rows li { display: grid; grid-template-columns: 128px 1fr; gap: 12px; align-items: center; }
@media (max-width: 520px) { .risk-rows li { grid-template-columns: 1fr; gap: 4px; } }

/* ---- Lists of features with ticks (billing, landing) ---- */
.feature-list { display: grid; gap: 10px; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.feature-list li > .icon { flex: none; margin-block-start: 2px; color: var(--ok); }

/* ---- Step-by-step forms (js/core/wizard.js): one question at a time ---- */
.wizard { --wiz-shift: 18px; max-width: 600px; margin-inline: auto; }
[dir="rtl"] .wizard { --wiz-shift: -18px; }
.wiz-top { display: flex; align-items: center; gap: 12px; margin-block-end: var(--s-4); }
.wiz-back {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background var(--d), transform var(--d-fast), opacity var(--d);
}
.wiz-back:hover { background: var(--surface-2); }
.wiz-back:active { transform: scale(0.92); }
.wiz-back.is-off { opacity: 0; pointer-events: none; }
.wiz-bar { flex: 1; display: flex; gap: 5px; }
.wiz-bar i { position: relative; flex: 1; height: 4px; border-radius: 4px; overflow: hidden; background: var(--surface-3); }
.wiz-bar i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease-out); }
[dir="rtl"] .wiz-bar i::after { transform-origin: right; }
.wiz-bar i:is(.done, .now)::after { transform: scaleX(1); }
.wiz-count { font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wiz-card { padding: 24px 20px 0; border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.wiz-card:has(> .wiz-actions[hidden]) { padding-block-end: 24px; }
.wiz-step { animation: wiz-next 380ms var(--ease-out) both; }
.wiz-step[data-enter="back"] { animation-name: wiz-back; }
@keyframes wiz-next { from { opacity: 0; transform: translateX(var(--wiz-shift)); } }
@keyframes wiz-back { from { opacity: 0; transform: translateX(calc(-1 * var(--wiz-shift))); } }
.wiz-step > h1, .wiz-step > h2 { margin: 4px 0 0; font-size: clamp(25px, 6vw, 32px); line-height: 1.12; letter-spacing: -0.025em; outline: none; }
.wiz-lead { margin: 8px 0 var(--s-6); max-width: 46ch; color: var(--ink-3); font-size: 15.5px; line-height: 1.45; }
.wiz-note { display: flex; align-items: flex-start; gap: 10px; margin-block-start: var(--s-6); padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.wiz-note .icon { flex: none; margin-block-start: 1px; }
.wiz-actions {
  position: sticky; bottom: var(--bar-h, 0px); z-index: 5; display: flex; gap: 10px;
  margin-inline: -20px; padding: 16px 20px 20px; border-end-start-radius: var(--r-xl); border-end-end-radius: var(--r-xl);
  background: linear-gradient(to top, var(--surface) 78%, rgba(255, 255, 255, 0));
}
.wiz-actions .btn-primary { flex: 1; }
.input-xl { min-height: 60px; padding-inline: 18px; border-radius: 16px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.input-xl::placeholder { font-weight: 500; }
@media (min-width: 640px) {
  .wiz-card { padding: 32px 32px 0; }
  .wiz-card:has(> .wiz-actions[hidden]) { padding-block-end: 32px; }
  .wiz-actions { margin-inline: -32px; padding: 20px 32px 28px; }
}
@media (prefers-reduced-motion: reduce) { .wiz-step { animation: none; } }

/* Kinds of business as big tappable cards (onboarding) */
.wiz-types { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .wiz-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wiz-types .type-option > span { min-height: 100px; padding: 14px; gap: 12px; font-size: 15px; border-radius: var(--r-lg); }
.wiz-types .cat-tile { width: 42px; height: 42px; border-radius: 13px; }
.wiz-types .type-option > span { transition: box-shadow var(--d), background var(--d), transform var(--d-fast); }
.wiz-types .type-option:active > span { transform: scale(0.97); }

/* ---- A booking change waiting for an answer ---- */
.change-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--surface-2); }
.change-card.is-ask { background: var(--warn-soft); box-shadow: inset 0 0 0 1px rgba(161, 92, 0, 0.2); }
.change-head { display: flex; align-items: flex-start; gap: 12px; }
.change-head > svg { flex: none; margin-block-start: 2px; color: var(--ink-2); }
.change-card.is-ask .change-head > svg { color: var(--warn); }
.change-head h2 { font-size: 17px; line-height: 1.3; }
.change-head p { color: var(--ink-2); margin-block-start: 2px; }
.change-diff { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); }
.diff-row { display: flex; flex-direction: column; gap: 2px; }
.diff-label { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.diff-values { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 14.5px; }
.diff-values > svg { color: var(--ink-3); flex: none; }
.diff-before { color: var(--ink-3); }
.diff-now { color: var(--ink); }
.diff-values::first-letter, .diff-before::first-letter, .diff-now::first-letter { text-transform: uppercase; }
.before-line { font-size: 14px; }
.before-line s { color: var(--ink-3); }

/* Day picker: the dot under a day shows how full it is (green → red) */
.day .dot[style*="--load-h"] { background: hsl(var(--load-h) 72% 44%); }
.day.is-active .dot[style*="--load-h"] { background: hsl(var(--load-h) 80% 58%); }