:root { --font-ui:Tahoma,"Segoe UI",Arial,sans-serif; --font-page-title:"Segoe UI",Tahoma,Arial,sans-serif; --brand-graphite:#2D363B; --brand-primary:#126C78; --brand-primary-hover:#0D5661; --brand-primary-soft:#EDF7F8; --brand-primary-selected:#D7EBEE; --bg-main:#F7F9FC; --surface:#FFFFFF; --border:#E0E6EB; --success:#337251; --success-soft:#E5F4EB; --birsuol-icon-fill:88%; --birsuol-lockup-gap:6px; --birsuol-icon-optical-offset:1px; --bs-primary:var(--brand-primary-soft); --bs-primary-hover:var(--brand-primary-selected); --bs-primary-text:var(--brand-graphite); --bs-accent:var(--brand-primary); --bs-selected:var(--brand-primary-selected); --bs-selected-hover:var(--brand-primary-soft); --bs-selected-border:var(--brand-primary); --bs-hover:var(--brand-primary-soft); --bs-text:var(--brand-graphite); --bs-text-secondary:#66737B; --bs-text-muted:#7A8494; --bs-border:var(--border); --bs-form-border:#D8E0E6; --bs-page-bg:var(--bg-main); --bs-surface:var(--surface); --bs-disabled-bg:#F2F4F6; --bs-disabled-text:#98A2B3; --bs-danger:#B5473C; --bs-danger-light:#FFF4F2; --green:var(--bs-accent); --green-2:var(--bs-accent); --gold:var(--bs-accent); --cream:var(--bs-page-bg); --line:var(--bs-border); --ink:var(--bs-text); --muted:var(--bs-text-secondary); --tertiary:var(--bs-text-muted); --disabled:var(--bs-disabled-text); --white:var(--bs-surface); }
:root { --booking-content-width:600px; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(180deg,var(--bs-page-bg) 0,var(--bs-surface) 360px); font-family:var(--font-ui); font-size:14px; font-weight:400; line-height:1.45; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.booking-header { height:60px; border-bottom:1px solid var(--bs-border); background:rgba(255,255,255,.92); backdrop-filter:blur(12px); position:sticky; top:0; z-index:5; }
.booking-header-inner { display:flex; width:calc(100% - 32px); max-width:var(--booking-content-width); height:100%; margin:0 auto; align-items:center; justify-content:space-between; gap:12px; }
.booking-brand { display:flex; min-width:0; gap:var(--birsuol-lockup-gap); align-items:center; color:inherit; text-decoration:none; line-height:1; }
.booking-brand strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; line-height:1.2; }
.logo { width:38px; height:38px; display:grid; flex:0 0 38px; place-items:center; border-radius:50%; color:#fff; font-weight:600; background:var(--green); overflow:hidden; }
.logo img { display:block; width:100%; height:100%; object-fit:contain; }
.text-button,.back { border:0; background:transparent; color:var(--green-2); padding:8px; }
.booking-header .text-button { flex:0 0 auto; padding:6px 0; color:var(--bs-text-secondary); font-size:13px; font-weight:500; }
.booking-header .text-button:hover { color:var(--bs-accent); }
.booking-main { width:calc(100% - 32px); max-width:var(--booking-content-width); margin:0 auto; padding:20px 0 72px; }
.step { display:none; animation:fade .2s ease; }
.step.active { display:block; }
@keyframes fade { from { opacity:.35; transform:translateY(4px); } }
h1 { margin:4px 0 8px; font-family:var(--font-page-title); font-size:clamp(26px,4vw,28px); font-weight:600; color:var(--bs-text); }
h2 { font-size:18px; margin:28px 0 12px; font-weight:600; }
.booking-section-header { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.booking-section-header h1 { min-width:0; margin:0; }
.booking-section-header .back { flex:0 0 auto; color:var(--bs-text-secondary); font-size:13px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.service-search { display:block; margin-top:8px; }
.service-search input { min-height:42px; padding:9px 12px; }
.eyebrow { margin:0; color:var(--tertiary); text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:500; }
.lead,.muted { color:var(--muted); }
.landing-branch { display:grid; min-height:58px; place-items:center; overflow:hidden; border-radius:18px; background:var(--bs-hover); }
.landing-branch.with-photo { aspect-ratio:16/7; }
.landing-branch > img { width:100%; height:100%; object-fit:cover; }
.branch-fallback { padding:16px; color:var(--muted); font-weight:600; }
.landing-identity { display:flex; align-items:center; gap:var(--birsuol-lockup-gap); margin:14px 0 16px; }
.landing-identity strong,.landing-identity span { display:block; }
.landing-identity strong { font-size:18px; }
.landing-identity div > span { margin-top:2px; color:var(--muted); font-size:14px; }
.landing-branch-photo { width:100%; height:clamp(180px,28vw,260px); margin:0 0 24px; overflow:hidden; border-radius:16px; background:var(--brand-primary-soft); }
.landing-branch-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.landing-branch-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:10px; margin-bottom:14px; }
.landing-branch-card { padding:10px; text-align:left; border:1px solid var(--line); border-radius:14px; color:inherit; background:#fff; }
.landing-branch-card.selected { border-color:var(--bs-selected-border); background:var(--bs-selected); }
.landing-branch-card strong,.landing-branch-card span { display:block; }
.landing-branch-card span { margin-top:3px; color:var(--muted); font-size:12px; }
.landing-branch-card .branch-choice-image { margin-bottom:8px; }
.entry-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.purchase-block { margin-top:24px; }
.purchase-block h2 { margin:0 0 8px; }
.purchase-block > div { display:grid; border-top:1px solid var(--line); }
.purchase-row { display:flex; min-height:46px; align-items:center; justify-content:space-between; padding:8px 2px; border:0; border-bottom:1px solid var(--line); color:var(--green); background:transparent; text-align:left; font:inherit; font-weight:600; }
.entry-card { display:grid; grid-template-columns:28px minmax(0,1fr); min-width:0; min-height:52px; align-items:center; justify-items:start; gap:10px; padding:11px 14px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#fff; text-align:left; box-shadow:0 3px 12px rgba(18,63,53,.035); transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.entry-card:hover { transform:translateY(-1px); border-color:var(--bs-selected-border); background:var(--bs-hover); box-shadow:0 9px 26px rgba(16,24,40,.07); }
.entry-card:focus-visible,button:focus-visible { outline:3px solid rgba(91,159,132,.22); outline-offset:2px; }
.entry-icon { display:grid; width:28px; height:28px; place-items:center; color:var(--green-2); }
.entry-icon svg { display:block; width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.entry-copy { display:flex; min-width:0; flex-direction:column; justify-content:center; }
.entry-card strong { margin-top:0; font-size:15px; font-weight:600; }
.entry-card small { color:var(--muted); font-size:13px; }
.service-list { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:12px; }
.service-card { position:relative; display:grid; width:100%; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:16px; min-width:0; min-height:0; text-align:left; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; padding:12px; color:inherit; box-shadow:0 7px 24px rgba(18,63,53,.055); transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.service-card:hover { transform:translateY(-1px); border-color:var(--bs-selected-border); background:var(--bs-hover); box-shadow:0 10px 28px rgba(16,24,40,.08); }
.service-card:focus-visible { outline:3px solid rgba(91,159,132,.22); outline-offset:2px; }
.service-card.selected { border-color:var(--bs-selected-border); background:var(--bs-selected); box-shadow:0 0 0 2px rgba(91,159,132,.15),0 9px 26px rgba(16,24,40,.07); }
.service-card.selected::after { content:"✓"; position:absolute; top:12px; right:12px; display:grid; width:24px; height:24px; place-items:center; border-radius:50%; color:var(--bs-primary-text); background:var(--bs-primary); font-size:14px; font-weight:700; }
.service-image { position:relative; isolation:isolate; width:100%; max-width:100%; aspect-ratio:3/4; align-self:start; background:#f0f2ed; display:grid; place-items:center; overflow:hidden; border-radius:12px; }
.service-image-backdrop { display:none; }
.service-image > .service-image-main { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
.service-image-fallback { position:relative; z-index:1; }
.service-copy { min-width:0; padding:10px 12px 8px 0; display:flex; flex-direction:column; align-items:flex-start; }
.service-category { color:var(--bs-text-secondary); font-size:13px; font-weight:500; }
.service-title { max-width:calc(100% - 34px); margin:7px 0 9px; font-size:20px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.service-copy p { color:var(--muted); margin:0 0 15px; font-size:14px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.service-meta { width:100%; display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:auto; }
.service-meta b { color:var(--green); font-size:18px; font-weight:600; }
.service-meta span { color:var(--muted); font-size:14px; white-space:nowrap; }
.specialist-entry-list { display:grid; gap:14px; margin-top:12px; }
.specialist-entry-card { display:grid; grid-template-columns:minmax(0,1fr); gap:13px; align-items:start; padding:14px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.specialist-entry-head { display:flex; min-width:0; align-items:center; gap:13px; }
.specialist-entry-head > span:last-child { min-width:0; }
.specialist-entry-head strong,.specialist-entry-head small { display:block; }
.specialist-entry-head strong { overflow-wrap:anywhere; font-size:17px; font-weight:600; }
.specialist-entry-head small { margin-top:3px; color:var(--muted); }
.specialist-entry-photo { display:grid; width:64px; height:64px; flex:0 0 64px; overflow:hidden; place-items:center; border-radius:50%; color:#fff; background:var(--green-2); font-size:22px; }
.specialist-entry-photo img { width:100%; height:100%; object-fit:cover; }
.nearest-slots { display:grid; min-width:0; gap:7px; }
.nearest-slots > small { color:var(--muted); }
.nearest-slots > div { display:flex; min-width:0; flex-wrap:wrap; gap:7px; }
.nearest-slot { min-height:34px; padding:6px 9px; border:1px solid var(--bs-form-border); border-radius:9px; color:var(--bs-accent); background:var(--bs-surface); font-size:12px; }
.nearest-slot:hover { border-color:var(--bs-selected-border); background:var(--bs-hover); }
.nearest-slot-more { flex:1 1 100%; border-color:var(--brand-primary); font-weight:600; }
.compact-slot { display:grid; min-width:72px; gap:1px; text-align:center; }
.compact-slot-date,.compact-slot-time { display:block; }
.compact-slot-date { color:var(--muted); font-size:10px; font-weight:400; }
.compact-slot-time { font-size:13px; font-weight:600; }
.compact-slot[aria-expanded="true"] .compact-slot-date { color:var(--bs-primary-text); }
.nearest-slot.hour-group[aria-expanded="true"] { border-color:var(--bs-selected-border); color:var(--bs-primary-text); background:var(--bs-selected); }
.nearest-slot.minute-slot { min-height:30px; padding:4px 7px; border-color:var(--bs-border); font-size:11px; font-weight:500; }
.nearest-slot.minute-slot.selected { border-color:var(--bs-selected-border); color:var(--bs-primary-text); background:var(--bs-selected); box-shadow:0 0 0 2px rgba(91,159,132,.13); }
.exact-time-label { grid-column:1 / -1; color:var(--bs-text-secondary); font-size:12px; font-weight:500; }
.nearest-slots .exact-time-label { flex:0 0 100%; }
.hour-minute-options { display:flex; width:100%; flex-wrap:wrap; gap:7px; padding-top:2px; }
.hour-minute-options:empty { display:none; }
.slot-loading,.slot-load-error { grid-column:1/-1; display:flex; min-height:34px; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.slot-loading i { width:15px; height:15px; flex:0 0 15px; border:2px solid var(--bs-border); border-top-color:var(--brand-primary); border-radius:50%; animation:slot-spin .8s linear infinite; }
.slot-load-error { color:#8b4f46; }
@keyframes slot-spin { to { transform:rotate(360deg); } }
.time-refinement-dialog { width:min(360px,calc(100vw - 28px)); padding:0; border:0; border-radius:18px; color:var(--bs-text); background:var(--bs-surface); box-shadow:0 24px 70px rgba(16,24,40,.24); }
.time-refinement-dialog::backdrop { background:rgba(15,23,42,.42); }
.time-refinement-shell { padding:18px; }
.time-refinement-shell header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.time-refinement-shell h2,.time-refinement-shell p { margin:0; }
.time-refinement-shell h2 { font-size:20px; }
.time-refinement-shell p { margin-top:5px; color:var(--muted); font-size:13px; }
.time-refinement-shell header button { width:36px; height:36px; padding:0; border:0; border-radius:50%; color:var(--bs-text-secondary); background:var(--bs-hover); font-size:24px; line-height:1; }
.time-refinement-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:16px; }
.time-refinement-options .nearest-slot { min-height:42px; font-size:14px; font-weight:600; }
.time-first-results { display:grid; gap:12px; margin-top:10px; }
.client-calendar { width:min(400px,100%); margin:0 auto; padding:10px 12px 12px; border:1px solid var(--bs-border); border-radius:14px; background:var(--bs-surface); box-shadow:0 3px 12px rgba(18,63,53,.035); }
.client-calendar-heading { display:grid; grid-template-columns:32px minmax(0,1fr) 32px; gap:6px; align-items:center; }
.client-calendar-heading h2 { margin:0; color:var(--bs-text); font-size:17px; font-weight:700; line-height:1.25; text-align:center; }
.client-calendar-heading button { width:32px; height:32px; padding:0; border:0; border-radius:7px; color:var(--green); background:transparent; }
.client-calendar-heading button:hover:not(:disabled) { background:var(--bs-hover); }
.client-calendar-heading button:disabled { color:var(--bs-disabled-text); border-color:var(--bs-border); background:var(--bs-disabled-bg); cursor:not-allowed; }
.client-calendar-weekdays,.client-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.client-calendar-weekdays { margin:10px 0 4px; color:var(--bs-text-secondary); font-size:12px; font-weight:600; line-height:1.2; text-align:center; }
.client-calendar-day { position:relative; display:grid; width:38px; max-width:100%; min-width:0; min-height:38px; justify-self:center; place-content:center; gap:0; padding:2px; border:1px solid transparent; border-radius:10px; color:var(--bs-text); background:transparent; font-size:14px; font-weight:600; line-height:1; }
.client-calendar-day:hover:not(:disabled) { border-color:#C6DBD4; background:var(--bs-hover); }
.client-calendar-day.available { color:#263238; border-color:transparent; background:transparent; }
.client-calendar-day.available:hover { border-color:#C6DBD4; background:var(--bs-hover); }
.client-calendar-day.unavailable { color:var(--bs-text-muted); border-color:transparent; background:var(--bs-disabled-bg); font-weight:500; cursor:not-allowed; }
.client-calendar-day.outside { opacity:.46; }
.client-calendar-day.today { color:#285D49; border-color:#B8D9C5; background:var(--success-soft); box-shadow:none; }
.client-calendar-day.selected { color:#FFF; border-color:var(--brand-primary); background:var(--brand-primary); box-shadow:0 2px 8px rgba(18,108,120,.22); }
.client-calendar-day.selected:hover:not(:disabled) { color:#FFF; border-color:var(--brand-primary-hover); background:var(--brand-primary-hover); box-shadow:0 3px 10px rgba(13,86,97,.28); }
.client-calendar-day.selected.today { color:#FFF; border-color:var(--brand-primary-hover); background:var(--brand-primary-hover); box-shadow:0 2px 8px rgba(13,86,97,.24); }
.client-calendar-day.outside.selected { opacity:.78; }
.client-calendar-time { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.client-calendar-time h2 { margin:0 0 10px; font-size:16px; }
.calendar-hours { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.calendar-hours .nearest-slot { width:100%; }
.client-calendar-time .hour-minute-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:10px; }
.client-calendar-time .hour-minute-options .nearest-slot { width:100%; }
.time-first-day { display:grid; gap:9px; }
.time-first-day h2 { margin:0; font-size:16px; text-transform:capitalize; }
.time-first-day > div { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.combination-list { display:grid; gap:10px; margin-top:22px; }
.parameter-context { width:min(100%,550px); margin:0 auto 14px; padding:12px 14px; border:1px solid var(--bs-border); border-radius:12px; background:var(--bs-hover); }
.parameter-context strong,.parameter-context span { display:block; }
.parameter-context span { margin-top:2px; color:var(--bs-text-secondary); font-size:13px; }
.inline-candidates { margin-top:8px; padding-top:8px; border-top:1px solid var(--bs-border); }
.inline-candidates h2 { margin:0 0 6px; font-size:16px; line-height:1.3; }
.inline-candidates .combination-list { gap:6px; margin-top:0; }
.combination-card { display:grid; width:100%; gap:4px; padding:15px 17px; border:1px solid var(--line); border-radius:13px; color:inherit; background:#fff; text-align:left; }
.combination-card.compact { grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; min-width:0; padding:10px 12px; line-height:1.25; }
.combination-card.compact strong { grid-column:1; grid-row:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; line-height:1.25; }
.combination-card.compact span { grid-column:1/-1; grid-row:2; min-width:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; font-size:14px; line-height:1.25; }
.combination-card.compact small { grid-column:2; grid-row:1; align-self:center; color:var(--bs-text-secondary); white-space:nowrap; font-size:12px; line-height:1.2; text-align:right; }
.combination-card.compact.without-specialist span { grid-column:1; grid-row:1; }
.combination-card.compact.without-specialist small { grid-column:2; grid-row:1; }
.combination-card.selected { border-color:var(--bs-selected-border); background:var(--bs-selected); box-shadow:0 0 0 2px rgba(91,159,132,.13); }
.combination-card:hover { border-color:var(--bs-selected-border); background:var(--bs-hover); }
.combination-card strong { color:var(--green); font-size:16px; }
.combination-card span { font-weight:500; }
.combination-card small { color:var(--muted); }
.selection-summary { margin:14px 0; padding:13px 15px; border-radius:14px; background:var(--bs-hover); line-height:1.45; }
.selection-summary strong,.selection-summary span { display:block; }
.selection-summary span { color:var(--muted); font-size:14px; }
.choice-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.branch-choice-image { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:10px; margin-bottom:10px; }
.choice { padding:16px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:14px; color:inherit; }
.choice.selected { border-color:var(--bs-selected-border); background:var(--bs-selected); box-shadow:0 0 0 2px rgba(91,159,132,.13); }
.choice strong,.choice span { display:block; }
.choice span { color:var(--muted); font-size:13px; margin-top:4px; }
.primary,.secondary { border-radius:12px; min-height:48px; padding:12px 20px; font-weight:600; }
.primary { border:0; color:var(--bs-primary-text); background:var(--bs-primary); }
.primary:hover { background:var(--bs-primary-hover); }
.primary:disabled { color:var(--bs-disabled-text); background:var(--bs-disabled-bg); cursor:not-allowed; opacity:1; }
.secondary { border:1px solid var(--bs-form-border); color:#344054; background:var(--bs-surface); }
.secondary:hover { border-color:var(--bs-disabled-text); background:#f9fafb; }
.wide { width:100%; margin-top:24px; }
.date-navigation { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:10px; align-items:center; margin:22px 0 10px; }
.date-period { margin:0; color:var(--green); font-family:var(--font-ui); font-size:18px; font-weight:600; text-align:center; }
.date-arrow { width:44px; height:44px; padding:0; border:1px solid #b7cdc4; border-radius:50%; background:#fff; color:var(--green); font-size:24px; line-height:1; box-shadow:0 3px 12px rgba(18,63,53,.07); }
.date-arrow:hover:not(:disabled) { border-color:var(--green); background:#eef4f1; }
.date-arrow:focus-visible { outline:3px solid rgba(91,159,132,.22); outline-offset:2px; }
.date-arrow:disabled { color:#aab3af; background:#f1f2f0; border-color:#e2e5e2; cursor:not-allowed; box-shadow:none; opacity:.72; }
.date-strip { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin:0 0 25px; }
.date-button { min-height:74px; border:1px solid var(--line); background:#fff; border-radius:12px; color:inherit; padding:8px 4px; }
.date-button small,.date-button strong { display:block; }
.date-button small { color:var(--muted); margin-bottom:5px; }
.date-button span { display:block; margin-top:5px; font-size:11px; color:var(--green-2); }
.date-button.available { border-color:#b7cdc4; box-shadow:inset 0 -3px 0 #cfe0d9; }
.date-button.unavailable,.date-button.checking { background:#f1f2f0; border-color:#e2e5e2; color:#9ca5a1; cursor:not-allowed; opacity:.78; }
.date-button.unavailable small,.date-button.unavailable span,.date-button.checking small,.date-button.checking span { color:#9ca5a1; }
.date-button.selected { background:var(--green); border-color:var(--green); color:#fff; }
.date-button.selected small,.date-button.selected span { color:#dceae5; }
.time-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; min-height:50px; }
.time-button { min-height:44px; background:#fff; border:1px solid var(--line); border-radius:10px; color:var(--green); font-weight:600; }
.details-form { display:grid; width:100%; gap:12px; max-width:var(--booking-content-width); }
.comment-toggle { order:4; justify-self:start; padding:3px 0; border:0; color:var(--bs-accent); background:transparent; font-weight:600; }
.comment-toggle:hover { color:var(--bs-primary-text); }
#customer-comment-field { order:4; display:none; }
.details-form.comment-expanded #customer-comment-field { display:grid; }
.details-form .consent { order:5; }
.details-form .primary { order:6; }
.details-form .booking-legal { order:7; }
.details-form label:not(.consent) { display:grid; gap:7px; font-weight:600; }
.details-form label small { color:var(--muted); font-weight:400; }
.details-form label .contact-field-error { display:block; margin-top:5px; color:var(--bs-danger); font-size:12px; line-height:1.3; }
.details-form label .contact-field-error[hidden] { display:none; }
.details-form input.field-invalid { border-color:var(--bs-danger); }
input,textarea { width:100%; min-height:48px; border:1px solid var(--bs-form-border); border-radius:11px; padding:12px 14px; color:var(--ink); background:var(--bs-surface); font-size:14px; font-weight:400; }
input::placeholder,textarea::placeholder { color:var(--tertiary); opacity:1; }
textarea { resize:vertical; }
input:focus,textarea:focus { outline:0; border-color:#75b69e; box-shadow:0 0 0 3px rgba(79,145,120,.12); }
.consent { display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:14px; }
.consent input { width:20px; height:20px; min-height:0; flex:0 0 20px; accent-color:var(--bs-accent); }
.booking-legal { display:grid; gap:5px; margin:0; color:var(--muted); font-size:12px; line-height:1.45; text-align:center; }
.booking-legal a { color:var(--green); }
.success { text-align:center; width:100%; max-width:var(--booking-content-width); margin:30px auto; }
.success-mark { width:72px; height:72px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center; color:var(--bs-primary-text); background:var(--bs-primary); font-size:38px; }
.confirmation { text-align:left; padding:22px; margin:24px 0; border:1px solid var(--line); border-radius:16px; background:#fff; line-height:1.65; }
.confirmation strong { color:var(--green); }
.notice { margin-bottom:20px; padding:14px 16px; border-radius:11px; color:var(--bs-danger); background:var(--bs-danger-light); border:1px solid #e2c3c0; }
#manage-cancel { color:var(--bs-danger); }
.loading { grid-column:1/-1; padding:50px; text-align:center; color:var(--muted); }
.loading.compact-empty { padding:20px 12px; }
/* Contact step only: retain the shared booking flow and control states. */
.booking-main:has(#step-details.active) { padding-top:12px; padding-bottom:24px; }
#step-details > .back { padding:4px 0; margin-bottom:2px; }
#step-details > h1 { margin:2px 0 6px; }
#booking-summary { margin:10px 0; padding:10px 15px; line-height:1.35; overflow-wrap:anywhere; }
#booking-form { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 16px; }
#booking-form > * { grid-column:1 / -1; min-width:0; }
#booking-form > .contact-phone-field { grid-column:1; }
#booking-form > #customer-email-field { grid-column:2; }
#booking-form label:not(.consent) { align-content:start; gap:6px; }
#booking-form input:not([type="checkbox"]) { height:40px; min-height:40px; padding:8px 14px; }
#booking-form .contact-email-label { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 6px; }
#booking-form .consent { margin:0; min-height:32px; align-items:center; cursor:pointer; }
#booking-form .primary { height:42px; min-height:42px; margin-top:0; padding:8px 20px; }
/* Keep the contact summary and CTA distinct from the near-white field tint. */
#booking-summary { background:#e3f2ea; }
#booking-form .primary:not(:disabled) { color:#fff; background:#39745f; box-shadow:0 4px 12px rgba(57,116,95,.18); }
#booking-form .primary:not(:disabled):hover { background:#2f654f; }
/* Contact field colors, including Chromium's autofill paint layer. */
#booking-form input:is([name="customer_name"], [name="customer_phone"], [name="customer_email"]) {
  --booking-field-fill:#fff;
  --booking-field-ring:0 0 0 0 transparent;
  background:var(--booking-field-fill);
}
#booking-form input:is([name="customer_name"], [name="customer_phone"], [name="customer_email"]):focus {
  --booking-field-fill:#f1f8f4;
  --booking-field-ring:0 0 0 3px rgba(79,145,120,.12);
  border-color:#5b9f84;
  box-shadow:var(--booking-field-ring);
}
#booking-form input:is([name="customer_name"], [name="customer_phone"], [name="customer_email"]):is(:autofill, :-webkit-autofill, :-webkit-autofill:where(:hover), :-webkit-autofill:where(:focus), :-webkit-autofill:where(:active)) {
  --booking-field-fill:#f1f8f4;
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
  box-shadow:inset 0 0 0 1000px var(--booking-field-fill), var(--booking-field-ring);
}
#booking-form input:is([name="customer_name"], [name="customer_phone"], [name="customer_email"]):is(.field-invalid, :user-invalid) {
  --booking-field-fill:var(--bs-danger-light);
  border-color:var(--bs-danger);
}
#booking-form input:is([name="customer_name"], [name="customer_phone"], [name="customer_email"]):is(.field-invalid, :user-invalid):focus {
  --booking-field-ring:0 0 0 3px rgba(181,71,60,.12);
}
@media (max-width:720px) {
  body.landing-view .booking-header { display:none; }
  body.landing-view .booking-main { padding-top:10px; }
  body.landing-view .platform-footer { margin-top:12px; padding-bottom:12px; }
  #booking-form { grid-template-columns:minmax(0,1fr); gap:11px; }
  #booking-form > .contact-phone-field, #booking-form > #customer-email-field { grid-column:1; }
  #booking-form .contact-email-label { display:flex; flex-wrap:nowrap; align-items:baseline; gap:6px; }
  #booking-form label:not(.consent) { gap:5px; }
  #booking-form input:not([type="checkbox"]) { height:40px; min-height:40px; padding:8px 14px; }
  #booking-form .primary { height:44px; min-height:44px; }
  #booking-form .consent, #booking-form .comment-toggle { min-height:44px; }
  #step-details > .back { min-height:44px; }
  .booking-header { height:56px; }
  .booking-header-inner { width:calc(100% - 40px); gap:8px; }
  .logo { width:36px; height:36px; flex-basis:36px; }
  .booking-brand { gap:var(--birsuol-lockup-gap); }
  .booking-brand strong { font-size:14px; }
  .booking-header .text-button { font-size:13px; font-weight:500; }
  .booking-main { width:calc(100% - 40px); max-width:var(--booking-content-width); padding-top:18px; }
  h1 { color:var(--bs-text); font-size:24px; font-weight:600; line-height:1.18; }
  .booking-section-header { gap:8px; }
  .booking-section-header h1 { flex:1 1 auto; white-space:nowrap; }
  .booking-section-header .back { flex:0 0 auto; padding:4px 0; font-size:13px; font-weight:500; }
  .entry-grid { grid-template-columns:1fr; gap:10px; margin-top:20px; }
  .entry-card { min-height:0; grid-template-columns:32px minmax(0,1fr); gap:2px 10px; padding:12px 15px; }
  .entry-icon { align-self:center; }
  .entry-card strong { margin-top:0; font-size:16px; }
  .service-card { width:100%; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:10px; min-height:0; padding:10px; }
  .service-image { width:100%; max-width:100%; }
  .service-copy { min-width:0; padding:3px 2px 2px 0; }
  .service-category { font-size:11px; }
  .service-title { margin:4px 0 6px; font-size:16px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
  .service-copy p { margin-bottom:8px; font-size:12px; line-height:1.35; -webkit-line-clamp:2; }
  .service-meta { gap:8px; }
  .service-meta b { font-size:15px; }
  .service-meta span { font-size:12px; }
  .service-card.selected::after { top:8px; right:8px; width:20px; height:20px; font-size:12px; }
  .specialist-entry-card { grid-template-columns:1fr; gap:13px; padding:13px; }
  .specialist-entry-photo { width:54px; height:54px; flex-basis:54px; }
  .nearest-slots > div:not(.hour-minute-options) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; padding-bottom:3px; }
  .nearest-slots .nearest-slot-more { grid-column:1/-1; width:100%; }
  .nearest-slots .hour-minute-options { flex-wrap:wrap; overflow:visible; }
  .nearest-slot { min-width:0; }
  .time-first-day > div { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .client-calendar { padding:9px 8px 10px; }
  .client-calendar-weekdays,.client-calendar-grid { gap:2px; }
  .client-calendar-day { width:36px; min-height:36px; border-radius:9px; font-size:14px; }
  .calendar-hours { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .client-calendar-time .hour-minute-options { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .combination-card.compact { gap:2px 8px; padding:8px 10px; }
  .choice-list { grid-template-columns:1fr; }
  .landing-branch-list { grid-template-columns:1fr; }
  .landing-branch-photo { height:clamp(160px,48vw,220px); margin-bottom:20px; border-radius:14px; }
  .date-navigation { grid-template-columns:42px minmax(0,1fr) 42px; gap:7px; }
  .date-period { font-size:19px; }
  .date-arrow { width:42px; height:42px; }
  .date-strip { overflow-x:visible; grid-template-columns:repeat(7,minmax(0,1fr)); padding-bottom:5px; }
  .time-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* BirSuol V2 public flow: shared visual language with the CRM while keeping
   the existing booking state machine and form contract unchanged. */
:root { --booking-content-width:600px; --brand-primary:#26704D; --brand-primary-hover:#1F6042; --brand-primary-soft:#EAF3ED; --brand-primary-selected:#EAF3ED; --bg-main:#F8F9F8; --surface:#FFF; --border:#E1E5E2; --bs-text:#252D29; --bs-text-secondary:#727B75; }
body { color:#252D29; background:#F8F9F8; }
.booking-header { height:56px; border-color:#E1E5E2; background:rgba(255,255,255,.97); }
.booking-main { padding-top:24px; }
.booking-start-intro h1,.booking-section-header h1 { color:#252D29; font-size:24px; line-height:1.2; letter-spacing:-.02em; }
.entry-card,.service-card,.specialist-entry-card,.combination-card,.selection-summary,.client-calendar,.confirmation,.booking-management { border-color:#E1E5E2; border-radius:10px; box-shadow:none; }
.entry-card:hover,.service-card:hover,.specialist-entry-card:hover,.combination-card:hover { transform:none; border-color:#A9C9B7; background:#F8FBF9; box-shadow:none; }
.primary { border-color:#26704D; background:#26704D; box-shadow:none; }
.primary:hover:not(:disabled) { border-color:#1F6042; background:#1F6042; }
.date-button { border-radius:8px; box-shadow:none; }
.date-button.selected { border-color:#26704D; background:#26704D; }
.nearest-slot,.minute-slot { border-radius:7px; }
.platform-attribution img { opacity:.72; }
@media (max-width:720px) {
  .booking-main,.booking-header-inner,.platform-footer { width:calc(100% - 32px); }
  .booking-main { padding-top:18px; }
  .booking-start-intro h1,.booking-section-header h1 { font-size:22px; }
  .entry-grid { gap:8px; }
  .entry-card { min-height:76px; padding:12px; }
  .date-strip { gap:4px; }
  .date-button { min-height:62px; padding:6px 2px; }
}

/* Compact success rhythm on every mobile height; desktop remains unchanged. */
@media (max-width:720px) {
  body.success-view .booking-main { padding-top:18px; padding-bottom:24px; }
  body.success-view .success { margin:0 auto; }
  body.success-view .success-mark { width:58px; height:58px; margin-bottom:10px; font-size:32px; }
  body.success-view .success .eyebrow { margin:0; }
  body.success-view .success h1 { margin:4px 0 14px; }
  body.success-view .confirmation { margin:0 0 14px; padding:14px 16px; line-height:1.45; overflow-wrap:anywhere; }
  body.success-view .booking-management { gap:10px; margin:0 0 14px; padding:14px; }
  body.success-view .booking-management-actions { align-items:center; gap:8px; }
  body.success-view #manage-reschedule { height:42px; min-height:42px; padding:8px 12px; }
  body.success-view #manage-cancel { min-height:42px; padding:8px; }
  body.success-view .late-arrival-rule { margin:0; line-height:1.4; }
  body.success-view #new-booking { height:42px; min-height:42px; margin-top:16px; padding:8px 20px; }
}

.booking-management { display: grid; gap: 12px; margin: 18px 0; padding: 16px; border: 1px solid #d8e8e0; border-radius: 14px; background: #f7fbf9; }
.booking-management p, .late-arrival-rule { margin: 0; color: var(--muted); }
.booking-management-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.booking-management label { display: grid; gap: 6px; text-align: left; }
.booking-management input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit; }
#manage-slots .time-button { display: inline-grid; gap: 2px; margin: 5px; }
#manage-slots .time-button small { font-size: 11px; }
.late-arrival-rule { margin: 14px 0; font-size: 13px; }

/* Demo-ready finishing layer: one calm visual language for the public flow. */
:root { --font-ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --font-page-title: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --booking-content-width: 760px; }
body { background: linear-gradient(180deg, #f7faf8 0, #ffffff 420px); }
.booking-header { border-color: #e7ece9; background: rgba(255,255,255,.94); }
.booking-main { padding-top: 28px; }
.landing-branch { min-height: 76px; border: 1px solid #e0ece5; border-radius: 16px; background: #eef7f2; }
.landing-identity { margin: 16px 0 24px; }
.booking-start-intro { margin: 0 0 16px; }
.booking-start-intro h1 { margin: 3px 0 6px; font-size: 28px; letter-spacing: -.035em; }
.booking-start-intro > p:last-child { max-width: 520px; margin: 0; color: var(--muted); font-size: 15px; }
.entry-grid { align-items: stretch; gap: 12px; margin-top: 0; }
.entry-card { min-height: 132px; padding: 18px 16px; border-radius: 15px; box-shadow: 0 4px 15px rgba(16,24,40,.045); }
.entry-card .entry-icon { align-self: center; }
.entry-card strong { line-height: 1.25; }
.entry-card small { line-height: 1.45; }
.entry-card:hover { border-color: #8ebba6; background: #f4faf6; box-shadow: 0 10px 24px rgba(16,24,40,.08); }
.service-search input { min-height: 46px; border-radius: 12px; }
.service-card { border-radius: 16px; }
.service-copy { padding-top: 12px; }
.service-category { letter-spacing: .01em; }
.service-meta b { color: #23634c; }
.specialist-entry-card,.choice,.combination-card,.selection-summary,.client-calendar { border-color: #e1e9e5; box-shadow: 0 4px 16px rgba(16,24,40,.035); }
.nearest-slot,.time-button { min-height: 40px; border-radius: 10px; }
.date-button { min-height: 78px; border-radius: 12px; }
.date-button.available { background: #fbfefd; }
.date-button.selected { background: #39745f; border-color: #39745f; }
.primary { color: #fff; background: #39745f; box-shadow: 0 4px 12px rgba(57,116,95,.18); }
.primary:hover { background: #2f654f; }
.secondary { border-color: #d9e2dd; color: #344054; }
.secondary:hover { border-color: #a9c8b8; background: #f6faf8; }
.confirmation,.booking-management { border-color: #dbe8e1; box-shadow: 0 8px 24px rgba(16,24,40,.045); }
.confirmation { padding: 24px; }
.success-mark { color: #fff; background: #39745f; box-shadow: 0 8px 22px rgba(57,116,95,.2); }
.loading,.loading.compact-empty { border: 1px dashed #cedbd4; border-radius: 14px; background: #fbfdfc; }
@media (max-width:720px) {
  .booking-main { padding-top: 22px; }
  .landing-branch { min-height: 62px; }
  .landing-identity { margin: 14px 0 20px; }
  .booking-start-intro h1 { font-size: 25px; }
  .booking-start-intro > p:last-child { font-size: 14px; }
  .entry-grid { gap: 10px; }
  .entry-card { min-height: 78px; padding: 13px 15px; }
}

/* Final BirSuol brand layer: teal guides actions; success remains green. */
body { background:linear-gradient(180deg,var(--bg-main) 0,var(--surface) 420px); }
.logo { color:var(--brand-graphite); border:1px solid var(--border); background:#fff; }
.logo img { width:var(--birsuol-icon-fill); height:var(--birsuol-icon-fill); object-fit:contain; transform:translateY(var(--birsuol-icon-optical-offset)); }
.landing-branch { border-color:var(--border); background:var(--brand-primary-soft); }
.entry-card:hover,.service-card:hover { border-color:var(--brand-primary); background:var(--brand-primary-soft); }
.entry-card:focus-visible,.service-card:focus-visible,button:focus-visible { outline-color:rgba(18,108,120,.32); }
.date-button.selected,.primary,#booking-form .primary:not(:disabled) { border-color:var(--brand-primary); background:var(--brand-primary); box-shadow:0 4px 12px rgba(18,108,120,.18); }
.primary:hover,#booking-form .primary:not(:disabled):hover { background:var(--brand-primary-hover); }
#booking-summary { background:var(--brand-primary-soft); }
.date-arrow:hover:not(:disabled) { border-color:var(--brand-primary); background:var(--brand-primary-soft); }
.primary,#booking-form .primary:not(:disabled),.date-button.selected { color:#fff; }
.date-button.selected small,.date-button.selected span { color:rgba(255,255,255,.82); }
.date-arrow { border-color:var(--border); color:var(--brand-primary); box-shadow:0 3px 12px rgba(16,24,40,.07); }
.date-button.available { border-color:var(--border); box-shadow:inset 0 -3px 0 var(--brand-primary-selected); }
.service-image { background:var(--brand-primary-soft); }
.service-image-fallback { width:44%; height:44%; object-fit:contain; }
.booking-management { border-color:var(--border); background:var(--brand-primary-soft); }
.confirmation { border-color:var(--border); }
.success-mark { background:var(--success); box-shadow:0 8px 22px rgba(51,114,81,.2); }
.confirmation strong { color:var(--success); }
.platform-footer { width:calc(100% - 32px); max-width:var(--booking-content-width); margin:20px auto 0; padding:0 0 22px; }
.platform-attribution { display:flex; min-height:30px; align-items:center; justify-content:center; }
.platform-attribution img { display:block; width:96px; height:auto; object-fit:contain; opacity:.8; }
@media (max-width:720px) {
  .platform-footer { width:calc(100% - 40px); padding-bottom:18px; }
  body.success-view .platform-footer { margin:20px auto 0; padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
}

/* Compact landing: branch identity and photo share one calm desktop hero. */
.landing-branch-list { grid-template-columns:minmax(0,1fr); gap:12px; margin-bottom:18px; }
.landing-branch-card { position:relative; width:100%; min-width:0; overflow:hidden; padding:0; border:0; text-align:left; isolation:isolate; }
.landing-branch-card::after { content:""; position:absolute; z-index:2; inset:0; border:1px solid var(--line); border-radius:inherit; pointer-events:none; }
.landing-branch-card.selected { border-color:transparent; }
.landing-branch-card.selected::after { border-color:var(--bs-selected-border); }
.landing-branch-copy { display:flex; min-width:0; flex-direction:column; justify-content:center; padding:24px 26px; }
.landing-branch-copy strong { color:var(--bs-text); font-size:24px; line-height:1.2; letter-spacing:-.02em; }
.landing-branch-copy > span { margin-top:8px; color:var(--bs-text-secondary); font-size:14px; line-height:1.45; }
.landing-branch-card .landing-branch-media { display:block; min-width:0; margin:0; overflow:hidden; background:var(--brand-primary-soft); }
.landing-branch-card .landing-branch-media img { display:block; width:100%; height:100%; margin:0; object-fit:cover; object-position:center; vertical-align:top; transform:translateZ(0); }
.landing-branch-media > strong { display:none; }
.booking-start-intro { margin-bottom:12px; }
.booking-start-intro h1 { font-size:26px; }
.entry-grid { gap:10px; }
.entry-card { min-height:86px; padding:13px 14px; }
.purchase-block { margin-top:18px; }
.purchase-block > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; justify-content:start; border:0; }
.purchase-row { display:flex; min-height:74px; flex-direction:column; align-items:flex-start; gap:3px; padding:11px 13px; border:1px solid var(--line); border-radius:11px; background:#fff; text-align:left; }
.purchase-row:hover { border-color:var(--brand-primary); }
.purchase-row span,.purchase-row small { color:var(--bs-text-secondary); font-size:12px; }
.purchase-row strong { color:var(--bs-text); font-size:15px; }
.purchase-dialog { width:min(520px,calc(100% - 24px)); padding:0; border:0; border-radius:16px; box-shadow:0 24px 70px rgba(21,38,45,.25); }
.purchase-dialog::backdrop { background:rgba(15,31,36,.5); }
.purchase-dialog form { display:grid; gap:14px; padding:22px; }
.purchase-dialog header,.purchase-dialog footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.purchase-dialog header h2,.purchase-dialog header p { margin:0; }
.purchase-dialog header button { border:0; background:transparent; font-size:26px; cursor:pointer; }
.purchase-dialog label { display:grid; gap:6px; font-weight:700; }
.purchase-dialog input { min-height:44px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; font:inherit; }
.purchase-status { min-height:20px; margin:0; color:var(--brand-primary); }
@media (min-width:721px) {
  .landing-branch-card.has-photo { display:grid; height:230px; grid-template-columns:minmax(0,.9fr) minmax(360px,1.35fr); }
  .landing-branch-card:not(.has-photo) { min-height:104px; }
  .landing-branch-media { height:100%; grid-column:2; grid-row:1; border-radius:0 14px 14px 0; }
  .landing-branch-copy { grid-column:1; grid-row:1; }
}
@media (min-width:721px) and (max-width:1050px) {
  .purchase-block > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .landing-branch-list { margin-bottom:10px; }
  .landing-branch-card.has-photo { display:flex; flex-direction:column; }
  .landing-branch-media { position:relative; order:-1; width:100%; aspect-ratio:16/9; border-radius:14px 14px 0 0; }
  .landing-branch-media::after { content:""; position:absolute; inset:42% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.68)); }
  .landing-branch-media strong { position:absolute; z-index:1; right:14px; bottom:12px; left:14px; display:block; color:#fff; font-size:20px; line-height:1.2; text-shadow:0 1px 3px rgba(0,0,0,.35); }
  .landing-branch-copy { padding:10px 14px 12px; }
  .landing-branch-copy strong { font-size:20px; }
  .landing-branch-copy > span { margin-top:5px; font-size:13px; }
  .booking-start-intro { margin-bottom:8px; }
  .booking-start-intro p:last-child { margin-bottom:8px; }
  .entry-grid { margin-top:0; }
  .entry-card { min-height:72px; }
  .purchase-block > div { grid-template-columns:minmax(0,1fr); }
}