/* OpenDesign variant 6; compact summary styles are shared with the calendar preview. */
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview,section.workspace-day-list) {
 --accent:#8c2038;--ws-red:#bd3942;--bl-brand:#8c2038;
 --booking-canvas:#101014;--booking-surface:#24242c;--booking-band:#2c2c38;
 --booking-input:#1c1c23;--booking-rail:#1b1b22;--booking-line:#464550;--booking-muted:#b9b7c1;--booking-ink:#f2f0f4;
 --booking-frame:#34343e;--booking-divider:#33333d;--booking-field-line:#41414d;--booking-error:#ef9494;
 --booking-total-bg:#29483b;--booking-total-line:#79b895;--booking-total-ink:#d9f3e3;
 --booking-card-header:linear-gradient(112deg,#49182c,#782336);--booking-card-header-line:#9b4055;
 --booking-status-pending:#e7c978;--booking-status-confirmed:#92c2f3;--booking-status-arrived:#86d6ae;--booking-status-noshow:#f1a0a5;--booking-status-cancelled:#c5c9d2;
}
body > dialog#appointment-dialog {
 width:min(1320px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);
 border:1px solid var(--booking-frame);border-radius:22px;background:var(--booking-canvas);color:var(--booking-ink);font:14px/1.5 var(--font);
}
:root[data-theme=light] :is(body > dialog#appointment-dialog,aside.workspace-visit-preview,section.workspace-day-list) {
 --accent:#8c2038;--ws-red:#a62d3d;--bl-brand:#8c2038;
 --booking-canvas:#eeebe6;--booking-surface:#fff;--booking-band:#f7efe8;
 --booking-input:#fffdfa;--booking-rail:#f5f1ec;--booking-line:#cec7c0;--booking-muted:#69646a;--booking-ink:#29272d;
 --booking-frame:#e3ddd7;--booking-divider:#e8e2dc;--booking-field-line:#d7d0c9;--booking-error:#b22d3c;
 --booking-total-bg:#e5f4e9;--booking-total-line:#afd5bb;--booking-total-ink:#285b3c;
 --booking-status-pending:#805c12;--booking-status-confirmed:#235e99;--booking-status-arrived:#246847;--booking-status-noshow:#a03443;--booking-status-cancelled:#566171;
}
body > dialog#appointment-dialog > form {display:flex;flex-direction:column;height:min(820px,calc(100dvh - 34px));max-height:calc(100dvh - 34px);min-height:0;overflow:hidden}
:root[data-theme] body > dialog#appointment-dialog .dialog-header {
 flex:none;display:flex;align-items:center;gap:12px;padding:17px 22px;
 background:radial-gradient(ellipse at 85% 0%,#ef815421,transparent 65%),linear-gradient(112deg,#49182c,#8c2038 54%,#c13338)!important;
 border-bottom:1px solid #b9525c;box-shadow:inset 0 1px 0 #ffffff24;color:#fff;
}
body > dialog#appointment-dialog .booking-header-copy {min-width:0;margin-right:auto}
body > dialog#appointment-dialog .booking-header-copy p {display:flex;gap:9px;align-items:center;margin:0 0 5px;font-size:11px;color:#f5dce2}
body > dialog#appointment-dialog .booking-header-copy p strong {padding-right:9px;border-right:1px solid #ffffff59;color:#fff}
:root[data-theme] body > dialog#appointment-dialog .dialog-header h2 {margin:0!important;color:#fff!important;font:800 24px/1.25 var(--font-heading);letter-spacing:-.6px}
:root[data-theme] body > dialog#appointment-dialog .dialog-header :is(h2,h3,.icon-close) {color:#fff!important}
:root[data-theme] body > dialog#appointment-dialog .dialog-header .icon-close {width:44px;height:44px;flex:0 0 44px;background:#260d1952!important;border:1px solid #ffffff50!important;border-radius:11px;color:#fff!important}
body > dialog#appointment-dialog .booking-window-nav {flex:none;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;padding:8px 18px;background:var(--booking-surface);border-bottom:1px solid var(--booking-line)}
body > dialog#appointment-dialog .booking-window-nav button {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--booking-muted);font:600 12px/1.4 var(--font)}
body > dialog#appointment-dialog .booking-window-nav button:hover {background:var(--booking-input);border-color:var(--booking-line);color:var(--booking-ink)}
body > dialog#appointment-dialog .booking-window-nav button[aria-selected=true] {background:#8c2038;border-color:#8c2038;color:#fff;box-shadow:0 3px 8px #49182c26}
body > dialog#appointment-dialog .booking-step {display:grid;place-items:center;width:21px;height:21px;flex:0 0 21px;border:1px solid var(--booking-line);border-radius:50%;background:var(--booking-input);font-size:10px}
body > dialog#appointment-dialog [aria-selected=true] .booking-step {background:#ffffff21;border-color:#ffffff40}
body > dialog#appointment-dialog .booking-window-nav .required-legend {margin-left:auto;padding:0;background:transparent;color:var(--booking-muted);font-size:11px}
body > dialog#appointment-dialog .booking-columns {container-type:size;display:grid;grid-template-columns:minmax(0,1fr) 300px;flex:1 1 auto;min-height:0;align-items:start;gap:0;padding:0;overflow:auto;background:var(--booking-canvas)}
body > dialog#appointment-dialog .booking-main {display:block;min-width:0;padding:20px}
body > dialog#appointment-dialog .booking-tab-panel {display:grid;gap:12px;min-width:0}
body > dialog#appointment-dialog .booking-tab-panel[hidden] {display:none!important}
body > dialog#appointment-dialog .booking-section-heading h3 {margin:0;font:800 18px/1.4 var(--font-heading);letter-spacing:-.35px;color:var(--booking-ink)}
body > dialog#appointment-dialog .booking-section-heading p {margin:5px 0 0;font-size:12px;color:var(--booking-muted)}
body > dialog#appointment-dialog .booking-step-actions {display:flex;justify-content:flex-end;gap:8px}
body > dialog#appointment-dialog .booking-step-actions button {min-height:42px;font-size:13px}
body > dialog#appointment-dialog :is(.booking-col,.booking-client-card,.appointment-recent-visits,.appointment-payment-panel) {min-width:0;padding:15px;border:1px solid var(--booking-frame);border-radius:14px;background:var(--booking-surface);box-shadow:none}
body > dialog#appointment-dialog .booking-col {display:grid;gap:10px;grid-column:auto}
:root[data-theme] body > dialog#appointment-dialog .booking-col--schedule {grid-template-columns:minmax(0,1fr);background:var(--booking-surface);gap:6px}
body > dialog#appointment-dialog .booking-col--schedule > h3 {grid-column:1/-1;margin:-15px -15px 3px;padding:12px 15px;border:0;border-bottom:1px solid var(--booking-card-header-line);border-radius:13px 13px 0 0;background:var(--booking-card-header);font:650 15px/1.4 var(--font-heading);color:#fff}
:root[data-theme] body > dialog#appointment-dialog .booking-col--services {padding:0;background:transparent!important;border:0;box-shadow:none}
body > dialog#appointment-dialog .booking-col--services > h3 {margin:0;border:0;padding:0;font:650 14px/1.5 var(--font-heading);color:var(--booking-ink)}
body > dialog#appointment-dialog .booking-client-card {display:grid;gap:12px}
body > dialog#appointment-dialog .booking-client-card > h3 {margin:-15px -15px 0;padding:12px 15px;border:0;border-bottom:1px solid var(--booking-card-header-line);border-radius:13px 13px 0 0;background:var(--booking-card-header);font:650 15px/1.4 var(--font-heading);color:#fff}
body > dialog#appointment-dialog .booking-client-card > h3 .req {color:#f3b4bf}
body > dialog#appointment-dialog .booking-client-card .selected-client {padding:13px;background:var(--booking-input);border:1px solid var(--booking-line);border-radius:11px;font-size:15px;line-height:1.5}
body > dialog#appointment-dialog #selected-client-text {overflow-wrap:anywhere;min-width:0}
body > dialog#appointment-dialog .booking-client-card .new-client-block {border-top:1px solid var(--booking-line);padding-top:10px}
body > dialog#appointment-dialog .booking-last-details {min-width:0;border-top:1px solid var(--booking-line);padding-top:10px}
body > dialog#appointment-dialog .booking-last-details:has(> #recent-client-services:empty),
body > dialog#appointment-dialog .loyalty-assignment-slot:empty,
body > dialog#appointment-dialog .loyalty-discount-offer:empty {display:none}
body > dialog#appointment-dialog :is(input,textarea,.bl-select-trigger,.date-display) {background-color:var(--booking-input);border-color:var(--booking-field-line);color:var(--booking-ink)}
body > dialog#appointment-dialog :is(label,.dialog-field-caption) {color:var(--booking-muted)}
body > dialog#appointment-dialog :is(input,textarea,.bl-select-trigger,button,summary):focus-visible {outline:2px solid var(--ws-red);outline-offset:3px}
body > dialog#appointment-dialog .booking-time-main {grid-template-columns:minmax(125px,1fr) minmax(0,2fr);gap:12px}
body > dialog#appointment-dialog #booking-time-summary[hidden] {display:none!important}
body > dialog#appointment-dialog :is(.booking-time-tools summary,.booking-comment summary,.booking-status-note,.appointment-slot-hint,.booking-item-settings>summary,.booking-item-duration-settings>summary) {color:var(--booking-muted)}
body > dialog#appointment-dialog .booking-time-tools {gap:2px 14px}
body > dialog#appointment-dialog .booking-time-options {min-width:0;border-top:1px solid var(--booking-divider);padding-top:4px}
body > dialog#appointment-dialog .booking-time-options > summary {padding:4px 0;font-size:12px;color:var(--booking-muted);cursor:pointer}
body > dialog#appointment-dialog .booking-time-options[open] > summary {margin-bottom:6px}
body > dialog#appointment-dialog .booking-time-options .appointment-slot-hint {margin:0 0 0 8px;font-size:11px;line-height:1.5}
body > dialog#appointment-dialog .booking-time-options .appointment-slot-hint:empty {display:none}
body > dialog#appointment-dialog #appt-status-actions {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0}
body > dialog#appointment-dialog .booking-status-option {justify-content:center;min-height:40px;padding:8px 6px;border:1px solid var(--booking-line);background:var(--booking-surface);color:var(--booking-ink);box-shadow:none;font-size:12px;font-weight:500}
body > dialog#appointment-dialog .booking-status-option[data-status=confirmed] {--status-ink:var(--booking-status-confirmed)}
body > dialog#appointment-dialog .booking-status-option[data-status=arrived] {--status-ink:var(--booking-status-arrived)}
body > dialog#appointment-dialog .booking-status-option[data-status=noshow] {--status-ink:var(--booking-status-noshow)}
body > dialog#appointment-dialog .booking-status-option[data-status=cancelled] {--status-ink:var(--booking-status-cancelled)}
body > dialog#appointment-dialog:has(#status-select option[value=pending]:checked) {--booking-summary-status-ink:var(--booking-status-pending)}
body > dialog#appointment-dialog:has(#status-select option[value=confirmed]:checked) {--booking-summary-status-ink:var(--booking-status-confirmed)}
body > dialog#appointment-dialog:has(#status-select option[value=arrived]:checked) {--booking-summary-status-ink:var(--booking-status-arrived)}
body > dialog#appointment-dialog:has(#status-select option[value=noshow]:checked) {--booking-summary-status-ink:var(--booking-status-noshow)}
body > dialog#appointment-dialog:has(#status-select option[value=cancelled]:checked) {--booking-summary-status-ink:var(--booking-status-cancelled)}
body > dialog#appointment-dialog .booking-status-option:hover {background:var(--booking-input);border-color:var(--booking-muted)}
body > dialog#appointment-dialog .booking-status-option[aria-pressed=true] {background:color-mix(in srgb,var(--status-ink) 18%,var(--booking-surface));border-color:var(--status-ink);color:var(--status-ink);box-shadow:inset 0 0 0 1px var(--status-ink);font-weight:700}
body > dialog#appointment-dialog .booking-status-check {width:12px}
body > dialog#appointment-dialog .booking-status-note {margin:0 0 3px;font-size:12px}
body > dialog#appointment-dialog .booking-service-picker[hidden] {display:none}
body > dialog#appointment-dialog .booking-service-picker {background:var(--booking-surface);border-color:var(--booking-line)}
body > dialog#appointment-dialog .booking-service-picker-head {display:flex;align-items:center;justify-content:space-between;gap:10px}
body > dialog#appointment-dialog #appointment-add-item {min-height:38px;background:var(--booking-surface);border-color:var(--booking-line);color:var(--booking-ink);font-size:12px}
body > dialog#appointment-dialog #appointment-items {counter-reset:booking-service}
:root body > dialog#appointment-dialog #appointment-items .appointment-item {--svc-accent:var(--booking-muted);--svc-head:var(--booking-band);--svc-ink:var(--booking-ink)}
body > dialog#appointment-dialog #appointment-items .appointment-item {display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0 0 12px;padding:0 16px 12px;border:1px solid var(--booking-frame);border-radius:16px;overflow:hidden;background:var(--booking-surface);box-shadow:0 3px 12px #00000008}
body > dialog#appointment-dialog #appointment-items .appointment-item > * {grid-column:1/-1}
:root body > dialog#appointment-dialog #appointment-items .appointment-item-head {display:flex;align-items:center;gap:10px;margin:0 -16px;padding:10px 16px;background:var(--booking-card-header);border-bottom:1px solid var(--booking-card-header-line);border-radius:15px 15px 0 0}
body > dialog#appointment-dialog .booking-item-number {display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#ffffff14;border:1px solid #ffffff35;color:#fff;font-size:11px;font-weight:600}
body > dialog#appointment-dialog #appointment-items .appointment-item-head > strong {flex:1;min-width:0;font:650 16px/1.4 var(--font-heading);color:#fff}
body > dialog#appointment-dialog #appointment-items .appointment-item-head > .service-motion-icon {width:24px;height:24px;flex-basis:24px;background:transparent;border:0;color:#ead7de;box-shadow:none}
body > dialog#appointment-dialog #appointment-items .appointment-item-head > .service-motion-icon svg {width:22px;height:22px}
body > dialog#appointment-dialog #appointment-items .appointment-item-head > button {min-height:32px;margin:0;padding:4px 0 4px 8px;color:#f5dce2;font-size:11px;background:transparent;border-color:transparent}
body > dialog#appointment-dialog .booking-resource-heading {padding:0;border:0;color:var(--booking-muted);font-size:12px}
body > dialog#appointment-dialog .appointment-item:has(.booking-item-settings[open]) .booking-resource-heading {display:none}
body > dialog#appointment-dialog .booking-item-settings {min-width:0;margin:0}
body > dialog#appointment-dialog .booking-item-settings > summary {font-size:12px;padding:0;min-height:28px}
body > dialog#appointment-dialog .booking-item-settings[open] .appointment-item-grid {margin-top:10px}
body > dialog#appointment-dialog .appointment-item-grid {grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
body > dialog#appointment-dialog .appointment-item-grid > .field-label {display:grid;grid-template-rows:18px auto;align-content:start;gap:6px;grid-column:span 3;font-size:11px;line-height:18px}
body > dialog#appointment-dialog .appointment-item-grid .field-label--service {grid-column:span 4;align-self:start}
body > dialog#appointment-dialog .appointment-item-grid .field-label--duration {grid-column:span 2}
body > dialog#appointment-dialog .appointment-item-grid .bl-select-trigger {min-height:42px;height:100%;padding:9px 11px;font-size:13px;border-radius:9px}
body > dialog#appointment-dialog .booking-service-exact-duration {grid-column:1/-1;margin:0;font-size:11px}
body > dialog#appointment-dialog .booking-service-exact-duration > summary {min-height:24px;color:var(--booking-muted)}
body > dialog#appointment-dialog .booking-service-exact-duration > label {display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:320px;margin-top:8px;font-size:12px}
body > dialog#appointment-dialog .booking-service-exact-duration input {width:100px;min-height:38px;margin:0}
body > dialog#appointment-dialog .appointment-item.is-empty .appointment-item-grid > .field-label--resource {display:grid}
body > dialog#appointment-dialog .appointment-item.is-empty .appointment-item-grid > :is(.field-label--duration,.booking-service-exact-duration) {display:none}
body > dialog#appointment-dialog #appointment-items .appt-sessions-field:not(.hidden) {margin:0;padding:8px 0 0;gap:3px 14px;grid-template-columns:minmax(0,1fr) 72px;background:transparent;border:0;border-top:1px solid var(--booking-divider);border-radius:0;color:var(--booking-ink);font-size:13px}
body > dialog#appointment-dialog #appointment-items .appt-sessions-field input {grid-column:2;grid-row:1/3;align-self:center;text-align:center}
body > dialog#appointment-dialog #appointment-items .appt-sessions-field .muted {grid-column:1;grid-row:2}
body > dialog#appointment-dialog #appointment-items .appt-sessions-field .muted {font-size:11px;color:var(--booking-muted)}
body > dialog#appointment-dialog .appointment-item-calc {display:grid;grid-template-columns:minmax(116px,1.1fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1.1fr);align-items:start;gap:10px;padding-top:12px;border-top:1px solid var(--booking-divider)}
body > dialog#appointment-dialog .appointment-item-qty-block {display:grid;grid-column:auto;grid-template-rows:minmax(20px,auto) 40px;align-content:start;gap:5px;min-width:0;padding:0;font-size:13px}
body > dialog#appointment-dialog .appointment-item-qty-block > .appointment-item-calc-label {margin:0;font-size:13px;line-height:1.5;color:var(--booking-muted)}
body > dialog#appointment-dialog .appointment-item-qty-block .appointment-qty {display:grid;grid-template-columns:32px minmax(0,1fr) 32px;gap:0;width:100%;min-width:0;height:40px;box-sizing:border-box;border:1px solid var(--booking-field-line);border-radius:9px;background:var(--booking-input);overflow:hidden}
body > dialog#appointment-dialog .appointment-item-qty-block .appointment-qty :is(input,button) {width:100%;min-width:0;min-height:0;height:38px;padding:0;margin:0;border:0;border-radius:0;background:transparent;color:var(--booking-ink);font:550 16px/1.4 var(--font);text-align:center}
body > dialog#appointment-dialog .appointment-item-qty-block .appointment-qty input {appearance:textfield;-moz-appearance:textfield;box-shadow:none}
body > dialog#appointment-dialog .appointment-qty input::-webkit-inner-spin-button {appearance:none;margin:0}
body > dialog#appointment-dialog .appointment-item-qty-block .appointment-qty button:hover {background:var(--booking-band)}
body > dialog#appointment-dialog .appointment-item-qty-block .appointment-qty :focus-visible {outline-offset:-3px}
body > dialog#appointment-dialog .booking-repeat-settings {width:100%;grid-column:1/-1}
body > dialog#appointment-dialog .booking-repeat-count {display:grid;grid-template-columns:minmax(0,1fr) 80px;align-items:center;gap:12px;margin-top:8px;font-size:13px}
body > dialog#appointment-dialog .booking-repeat-count input {width:100%;min-width:0;min-height:40px;text-align:center}
body > dialog#appointment-dialog .booking-repeat-settings > summary {min-height:24px;font-size:12px;color:var(--booking-muted)}
body > dialog#appointment-dialog .appointment-item-money-field {display:grid;grid-column:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(20px,auto) 40px;align-content:start;gap:5px;min-width:0;padding:0;background:transparent;border:0;--field-ink:var(--booking-ink)}
body > dialog#appointment-dialog .appointment-item-money-field:not(.appointment-item-money-total) {padding:0}
body > dialog#appointment-dialog .appointment-item-money-field:not(.appointment-item-money-total) {background:transparent;border-color:transparent;box-shadow:none}
body > dialog#appointment-dialog .appointment-item-money-field .appointment-item-calc-label {margin:0;font-size:11px;font-weight:500;color:var(--booking-muted)}
body > dialog#appointment-dialog .appointment-item-money-field input {width:100%;min-width:0;box-sizing:border-box;height:40px;min-height:40px;font-size:16px;font-weight:550;color:var(--booking-ink)}
:root[data-theme] body > dialog#appointment-dialog .appointment-item-money-field input {border-color:var(--booking-field-line)}
:root[data-theme] body > dialog#appointment-dialog .appointment-item-money-total {padding:0;background:transparent;border-color:transparent;box-shadow:none;--field-ink:var(--booking-ink)}
:root[data-theme] body > dialog#appointment-dialog .appointment-item-money-total input {border-color:var(--booking-total-line);background:var(--booking-total-bg);color:var(--booking-ink)}
body > dialog#appointment-dialog .appointment-item-money-total input {padding:6px 10px;box-shadow:none;font:700 18px/1.3 var(--font-heading)}
body > dialog#appointment-dialog .booking-item-duration-settings {grid-column:1/-1;grid-row:auto;padding:0;border:0}
body > dialog#appointment-dialog .booking-item-duration-settings .appointment-item-duration-control {grid-template-columns:minmax(0,1fr)}
body > dialog#appointment-dialog .booking-item-duration-settings > summary {font-size:11px;min-height:24px}
:root body > dialog#appointment-dialog .appointment-item-timing {grid-column:1/-1;align-self:start;padding:10px 0 0;background:transparent;color:var(--booking-ink);border:0;border-top:1px solid var(--booking-divider);border-radius:0;font-size:12px;font-weight:500;flex-wrap:wrap}
:root body > dialog#appointment-dialog .service-time-duration {padding:0;background:transparent;border:0;color:var(--booking-muted);font-size:12px;font-weight:500}
body > dialog#appointment-dialog .service-time-range svg {color:var(--booking-muted)}
body > dialog#appointment-dialog .appointment-item-price-hint {grid-column:1/-1!important;color:var(--booking-muted)}
body > dialog#appointment-dialog .booking-summary-client-actions {display:flex;flex-wrap:wrap;gap:3px 12px;margin-top:4px}
body > dialog#appointment-dialog .booking-summary-client-actions > button {text-align:left;white-space:normal}
body > dialog#appointment-dialog #recent-client-services.last-booking-card {margin:0;padding:12px;border-color:var(--booking-line)}
body > dialog#appointment-dialog .appointment-payment-panel {box-shadow:none;margin:0}
body > dialog#appointment-dialog .appointment-payment-summary > div,
body > dialog#appointment-dialog .appointment-payment-plan,
body > dialog#appointment-dialog .appointment-wallet-balance {background:var(--booking-input);border-color:var(--booking-line)}
body > dialog#appointment-dialog .appointment-payment-summary > .payment-remaining {background:var(--booking-band);border-color:var(--booking-line)}
body > dialog#appointment-dialog .appointment-payment-summary .payment-remaining :is(span,strong) {color:var(--booking-ink)}
body > dialog#appointment-dialog .booking-summary {--booking-summary-padding:18px;min-width:0;align-self:stretch;display:flex;flex-direction:column;gap:12px;padding:var(--booking-summary-padding);border-left:1px solid var(--booking-frame);background:var(--booking-rail)}
body > dialog#appointment-dialog .booking-summary-overview {position:sticky;top:12px;z-index:2;display:flex;flex-direction:column;gap:12px;min-height:0;max-height:calc(100cqh - 24px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;background:var(--booking-rail);box-shadow:0 -12px 0 var(--booking-rail),0 0 0 6px var(--booking-rail)}
body > dialog#appointment-dialog .booking-summary-overview > * {flex-shrink:0}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-pin {display:grid;gap:12px;position:static;padding:14px;border:1px solid var(--booking-frame);border-radius:12px;background:linear-gradient(135deg,#8c20380d,transparent),var(--booking-surface);box-shadow:0 3px 10px #00000008}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-heading {display:flex;align-items:center;gap:8px;margin:calc(-1 * var(--booking-summary-padding)) calc(-1 * var(--booking-summary-padding)) 0;padding:13px var(--booking-summary-padding);border-bottom:1px solid var(--booking-card-header-line);background:var(--booking-card-header);color:#fff;font-size:10px;font-weight:600;line-height:16px;text-transform:uppercase;letter-spacing:1.3px}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-heading::before {content:'';width:18px;height:2px;background:#e2a5b6}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-client {display:flex;align-items:center;gap:12px;padding:2px 0 4px;border:0;border-radius:0;background:transparent;color:var(--booking-ink)}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-avatar {flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;border:1px solid color-mix(in srgb,#b43a51 28%,var(--booking-frame));background:color-mix(in srgb,#b43a51 12%,var(--booking-rail));color:var(--booking-ink);font:600 12px var(--font-heading)}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-client > div {min-width:0}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-client h3 {margin:0;color:var(--booking-ink);font:650 17px/1.35 var(--font-heading);letter-spacing:-.3px;overflow-wrap:anywhere}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-client button {min-height:26px;padding:3px 0;background:none;border:0;color:var(--booking-muted);font-size:11px;text-decoration:underline;text-decoration-color:var(--booking-line);text-underline-offset:4px}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) :is(.booking-summary-totals,.booking-summary-services) {padding:0;border:0;border-radius:0;background:transparent}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-visit {display:grid;gap:5px;padding:12px 14px;border:1px solid var(--booking-frame);border-radius:12px;background:var(--booking-surface)}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-visit > span {font-size:12px;color:var(--booking-muted)}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-visit > strong {font:600 23px/1.3 var(--font-heading);letter-spacing:-.5px;color:var(--booking-ink);font-variant-numeric:tabular-nums}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-visit > div {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid var(--booking-divider);margin-top:5px;padding-top:10px;font-size:11px;color:var(--booking-muted)}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-visit :is([data-booking-summary=status],[data-workspace-preview=status]) {--status-ink:var(--booking-summary-status-ink,var(--booking-muted));display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:3px 8px;border:1px solid color-mix(in srgb,var(--status-ink) 45%,var(--booking-frame));border-radius:7px;background:color-mix(in srgb,var(--status-ink) 18%,var(--booking-surface));color:var(--status-ink);font-size:11px;font-weight:600;line-height:1.4}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-visit :is([data-booking-summary=status],[data-workspace-preview=status])::before {content:'';width:5px;height:5px;flex:none;border-radius:50%;background:currentColor}
body > dialog#appointment-dialog .booking-summary-metrics {display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0}
body > dialog#appointment-dialog .booking-summary-metrics > div {display:grid;gap:4px;padding:10px 12px;border:1px solid var(--booking-frame);border-radius:10px;background:var(--booking-surface)}
body > dialog#appointment-dialog .booking-summary-metrics strong {font:600 17px/1.3 var(--font-heading);color:var(--booking-ink)}
body > dialog#appointment-dialog .booking-summary-metrics span {font-size:11px;color:var(--booking-muted)}
body > dialog#appointment-dialog .booking-summary-totals {overflow:hidden}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-cost {display:grid;gap:4px;padding:0;margin:0;border:0;border-radius:0;background:transparent;color:var(--booking-ink)}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-cost span {font-size:11px;color:var(--booking-muted)}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-cost strong {font:650 32px/1.2 var(--font-heading);letter-spacing:-1px;white-space:nowrap;font-variant-numeric:tabular-nums}
body > dialog#appointment-dialog [data-booking-summary=payment] > div {display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;border:0;font-size:11px;color:var(--booking-muted)}
body > dialog#appointment-dialog [data-booking-summary=payment] strong {color:var(--booking-ink);white-space:nowrap}
body > dialog#appointment-dialog .booking-summary-note {margin:4px 0 0;font-size:11px;line-height:1.6;color:var(--booking-muted)}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-payment-link {display:flex;align-items:center;justify-content:space-between;width:100%;min-height:38px;padding:8px 10px;font-size:11px;font-weight:600;border:1px solid color-mix(in srgb,#b43a51 35%,var(--booking-field-line));border-radius:8px;background:color-mix(in srgb,#b43a51 8%,var(--booking-surface));color:var(--booking-ink);box-shadow:none}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-payment-link:hover {background:var(--booking-surface);border-color:var(--booking-muted)}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-services h4 {margin:0 0 10px;font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--booking-muted)}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-services ol {display:grid;gap:8px;list-style:none;counter-reset:summary-service;padding:0;margin:0}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-services li {position:relative;display:grid;gap:3px;padding:10px 10px 10px 38px;border:1px solid var(--booking-frame);border-radius:10px;background:var(--booking-surface);counter-increment:summary-service}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-services li::before {content:counter(summary-service);position:absolute;left:10px;top:10px;display:grid;place-items:center;width:19px;height:19px;border:1px solid var(--booking-line);border-radius:6px;font-size:10px;color:var(--booking-muted)}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-services strong {font-size:12px;font-weight:600;color:var(--booking-ink)}
:is(body > dialog#appointment-dialog,aside.workspace-visit-preview) .booking-summary-services :is(span,small) {font-size:11px;line-height:1.6;color:var(--booking-muted)}
body > dialog#appointment-dialog .dialog-footer {flex:none;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:13px 20px;background:var(--booking-surface);border-top:1px solid var(--booking-divider)}
body > dialog#appointment-dialog .booking-footer-summary {margin-right:auto;display:none;grid-template-columns:auto auto;gap:3px 12px;align-items:baseline}
body > dialog#appointment-dialog .booking-footer-summary > span {font-size:11px;color:var(--booking-muted)}
body > dialog#appointment-dialog .booking-footer-summary strong {font:800 22px/1.3 var(--font-heading);color:var(--booking-ink)}
body > dialog#appointment-dialog .booking-footer-summary small {display:none}
body > dialog#appointment-dialog .dialog-footer .ghost {color:var(--booking-muted)}
body > dialog#appointment-dialog .dialog-footer .appointment-delete-action {margin-right:auto;color:var(--ws-red)}
body > dialog#appointment-dialog :is(.dialog-footer,.booking-step-actions,.appointment-payment-panel) button.primary,
body > dialog#appointment-dialog #add-joint-participant {background:linear-gradient(112deg,#8c2038,#c13338)!important;border-color:#8c2038!important;color:#fff!important;box-shadow:0 4px 12px #49182c26!important}
body > dialog#appointment-dialog #appt-form-backend-error:not(.hidden) {flex:none;margin:0;padding:10px 20px}
body > dialog#appointment-dialog .appointment-items-summary.is-valid {display:none}
:root[data-theme] body > dialog#appointment-dialog :is(input,textarea).is-invalid,
:root[data-theme] body > dialog#appointment-dialog :is(input,textarea)[aria-invalid=true],
:root[data-theme] body > dialog#appointment-dialog .bl-select.is-invalid .bl-select-trigger,
:root[data-theme] body > dialog#appointment-dialog .field-label:has(select.is-invalid) .bl-select-trigger,
:root[data-theme] body > dialog#appointment-dialog .date-field.is-invalid .date-display {border-color:var(--booking-error)}
@media(max-width:1100px) {
 body > dialog#appointment-dialog .booking-columns {grid-template-columns:minmax(0,1fr) 292px}
 body > dialog#appointment-dialog .booking-main {padding:16px}
 body > dialog#appointment-dialog .booking-summary {--booking-summary-padding:16px}
 body > dialog#appointment-dialog .booking-time-main {grid-template-columns:1fr}
 body > dialog#appointment-dialog .booking-time-main > .booking-time-picker {grid-column:1;grid-row:auto}
}
@media(max-width:800px) {
 body > dialog#appointment-dialog {width:calc(100vw - 24px);max-width:calc(100vw - 24px)}
 body > dialog#appointment-dialog .booking-columns {container-type:normal;display:grid;grid-template-columns:minmax(0,1fr)}
 body > dialog#appointment-dialog .booking-main {order:0;width:auto;padding:15px 12px}
 body > dialog#appointment-dialog .booking-summary {border-left:0;border-top:1px solid var(--booking-line)}
 body > dialog#appointment-dialog .booking-summary-overview {position:static;max-height:none;overflow:visible;box-shadow:none}
 body > dialog#appointment-dialog .booking-summary-pin {position:static;box-shadow:none}
 body > dialog#appointment-dialog .booking-window-nav .required-legend {display:none}
 body > dialog#appointment-dialog .booking-window-nav {padding:7px 10px;gap:3px}
 body > dialog#appointment-dialog .booking-window-nav button {flex:1;min-width:0;padding:0 8px}
 body > dialog#appointment-dialog .booking-time-main > .booking-time-picker {grid-template-columns:repeat(3,minmax(0,1fr))}
 body > dialog#appointment-dialog .dialog-header {padding:13px 12px!important;flex-wrap:wrap}
 body > dialog#appointment-dialog .dialog-header #add-joint-participant:not(.hidden) {order:2;flex-basis:100%;font-size:12px}
 body > dialog#appointment-dialog .dialog-footer {display:grid;grid-template-columns:minmax(0,1fr) auto auto;padding:10px 12px;gap:8px}
 body > dialog#appointment-dialog .booking-footer-summary {display:grid;grid-column:1/-1;width:100%;grid-template-columns:1fr auto;margin:0}
 body > dialog#appointment-dialog .booking-footer-summary small {display:none}
 body > dialog#appointment-dialog .dialog-footer button {min-width:0;min-height:42px;padding:7px 8px;font-size:12px;white-space:normal}
 body > dialog#appointment-dialog #cancel-dialog {grid-column:2}
 body > dialog#appointment-dialog .dialog-footer button[type=submit] {grid-column:3}
}
@media(max-height:680px) {
 body > dialog#appointment-dialog .booking-footer-summary {display:grid}
 body > dialog#appointment-dialog .dialog-footer .appointment-delete-action {margin-right:0}
}
@media(max-width:450px) {
 :root[data-theme] body > dialog#appointment-dialog .dialog-header h2 {font-size:21px}
 body > dialog#appointment-dialog .booking-header-copy p {font-size:10px}
 body > dialog#appointment-dialog #appt-status-actions {grid-template-columns:repeat(2,minmax(0,1fr))}
 body > dialog#appointment-dialog .booking-time-picker .bl-select-trigger {padding-inline:7px;font-size:12px}
 body > dialog#appointment-dialog .booking-time-picker > label {grid-template-columns:minmax(0,1fr);font-size:12px}
 body > dialog#appointment-dialog .appointment-item-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 body > dialog#appointment-dialog .appointment-item-grid > .field-label {grid-column:auto}
 body > dialog#appointment-dialog .appointment-item-grid .field-label--service {grid-column:1/-1}
 body > dialog#appointment-dialog .appointment-item-grid .field-label--duration {grid-column:1/-1}
 body > dialog#appointment-dialog .appointment-item-calc {grid-template-columns:repeat(2,minmax(0,1fr))}
 body > dialog#appointment-dialog .appointment-item-money-field {grid-column:auto}
 body > dialog#appointment-dialog .appointment-item-money-total {grid-column:auto}
 body > dialog#appointment-dialog .appointment-item-qty-block {grid-column:auto}
 body > dialog#appointment-dialog .booking-item-duration-settings,
 :root body > dialog#appointment-dialog .appointment-item-timing {grid-column:1/-1}
 body > dialog#appointment-dialog #appointment-items .appointment-item {padding:0 12px 12px;gap:12px}
 :root body > dialog#appointment-dialog #appointment-items .appointment-item-head {gap:8px;margin-inline:-12px;padding:12px}
 body > dialog#appointment-dialog #appointment-items .appointment-item-head > strong {font-size:14px}
 body > dialog#appointment-dialog #appointment-items .appointment-item-head > .service-motion-icon {display:none}
 body > dialog#appointment-dialog #appointment-items .appointment-item-head > button {font-size:11px;padding:4px}
 body > dialog#appointment-dialog .booking-service-picker-head {align-items:start;flex-direction:column}
}