/* Shared native booking widget. The host owns behavior and the demo/live boundary.
 * Use .service-booking-widget as an ancestor outside the Service Calendar editor.
 * Load service-forms.css after this module, matching the native editor's order. */
.service-booking-widget, .service-booking-widget * { box-sizing: border-box; }
.service-booking-widget { color: #111; font: var(--studio-frame-size-10,10px)/1.5 "DM Sans", sans-serif; }
.service-booking-widget button, .service-booking-widget input, .service-booking-widget select, .service-booking-widget textarea { font: inherit; color: inherit; }
.service-booking-widget button, .service-booking-widget select { cursor: pointer; }
.service-booking-widget button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 10px; border: 1px solid #aaa; border-radius: 5px; background: #fff; }
.service-booking-widget :focus-visible { outline: 2px solid #5c96b8; outline-offset: 2px; }
.service-booking-widget button:disabled { opacity: .55; cursor: not-allowed; }
.service-booking-widget input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), .service-booking-widget select, .service-booking-widget textarea { width: 100%; min-width: 0; min-height: 37px; border: 1px solid #aaa; border-radius: 7px; background: #fdfdfd; padding: 7px 11px; }
.service-booking-widget textarea { resize: vertical; min-height: 90px; }
.service-booking-widget input[type="checkbox"], .service-booking-widget input[type="radio"] { accent-color: #d9eb9e; width: 16px; height: 16px; flex-shrink: 0; }
.service-booking-widget img { width: 17px; height: 17px; }
.service-booking-widget h2, .service-booking-widget h3, .service-booking-widget h4, .service-booking-widget p { margin: 0; }
.service-booking-widget h3 { font-size: var(--studio-frame-size-17,17px); font-weight: 500; line-height: 1.4; }
.service-booking-widget h4 { font-size: var(--studio-frame-size-15,15px); font-weight: 500; margin: 16px 0 10px; }
.service-booking-widget p { margin: 8px 0 14px; }
.service-booking-widget .sce-link { border: none; padding: 0; background: none; text-decoration: underline; color: #4d7aa3; }
.service-booking-widget .sce-boundary { font-size: var(--studio-frame-size-13,13px); color: #555; background: #f6f6f3; border-left: 3px solid #d2d2c7; padding: 10px 13px; }
.service-booking-widget .sce-help-text { color: #666; font-size: var(--studio-frame-size-12,12px); }
.service-booking-widget [hidden] { display: none !important; }

@media (min-width: 851px) {
  .service-booking-widget button { gap: 3px; padding: 3px 5px; border-radius: 3px; }
  .service-booking-widget img { width: 9px; height: 9px; }
  .service-booking-widget p { margin: 4px 0 7px; }
  .service-booking-widget h3 { font-size: var(--studio-frame-size-10,10px); }
  .service-booking-widget h4 { margin: 8px 0 5px; font-size: var(--studio-frame-size-9,9px); }
  .service-booking-widget input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), .service-booking-widget select, .service-booking-widget textarea { min-height: 19px; padding: 4px 6px; border-radius: 4px; }
  .service-booking-widget .sce-boundary { border-left-width: 2px; padding: 5px 7px; font-size: var(--studio-frame-size-9,9px); line-height: 1.35; }
  .service-booking-widget .sce-help-text { font-size: var(--studio-frame-size-8,8px); }
}
@media (max-width: 850px) {
  .service-booking-widget { font-size: 14px; font-size: var(--studio-frame-size-14,14px); }
}

/* The extra host weight on originally .sce-dialog-specific rules preserves
 * their relative priority after moving this module ahead of editor base styles. */
:is(.sce-dialog, .service-booking-widget) .sce-booking-preview { margin: 16px auto; max-width: 580px; padding: 25px; border: 1px solid var(--sce-widget-outline, #d0d0d0); border-radius: 7px; overflow-wrap: anywhere; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-preview > img { width: auto; height: auto; max-width: 100px; max-height: 100px; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-preview input[type="checkbox"] { accent-color: var(--sce-widget-accent, #eaff9c); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-preview h2 { font-size: var(--studio-frame-size-22,22px); font-weight: 500; margin-block: 12px; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-preview .service-description { margin-bottom: 14px; font-family: inherit; color: inherit; }
:is(.sce-dialog, .service-booking-widget) .sce-preview-summary { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 -25px 20px; padding: 0 25px 18px; border-bottom: 1px solid var(--sce-widget-outline, #ddd); font-size: var(--studio-frame-size-13,13px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-page-body { margin: -20px -25px -25px; padding: 20px 25px 25px; border-radius: 0 0 6px 6px; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-contact-body { background: var(--sce-widget-form-body, #fff); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-confirmation-body { background: var(--sce-widget-confirmation-body, #fff); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-preview .sbf-preview input:not([type="checkbox"]):not([type="radio"]),
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-preview .sbf-preview select,
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-preview .sbf-preview textarea,
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-preview .sbf-preview .sbf-preview-select .import-data-select__toggle,
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-preview .sbf-preview .sbf-preview-select .import-data-select__menu { border: .5px solid var(--sce-widget-outline, #a7a7a7); background: var(--sce-widget-form-field, #fff); color: var(--sce-widget-form-field-text, #171717); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-preview .sbf-preview .sbf-preview-select .import-data-select__menu [role="option"],
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-preview .sbf-preview .sbf-preview-select .import-data-select__menu [role="option"][aria-selected="true"] { background: var(--sce-widget-form-field, #fff); color: var(--sce-widget-form-field-text, #171717); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-preview .sbf-preview .sbf-preview-select .contact-create-multiselect__caret,
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-preview .sbf-preview .sbf-preview-select .contact-create-single-select__check { display: none; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-preview .sbf-preview .sbf-preview-select .import-data-select__toggle::after { content: ""; width: 7px; height: 5px; flex: 0 0 7px; background: currentColor; mask: url("../general, reusable UI assets for pragtical/drop-down arrow.svg") center / contain no-repeat; -webkit-mask: url("../general, reusable UI assets for pragtical/drop-down arrow.svg") center / contain no-repeat; transition: transform 120ms ease; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-preview .sbf-preview .sbf-preview-select.is-open .import-data-select__toggle::after { transform: rotate(180deg); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-preview .sbf-preview .sbf-preview-select .import-data-select__menu [role="option"]::after { content: ""; width: 8px; height: 7px; flex: 0 0 8px; background: currentColor; mask: url("../general, reusable UI assets for pragtical/check.svg") center / contain no-repeat; -webkit-mask: url("../general, reusable UI assets for pragtical/check.svg") center / contain no-repeat; opacity: 0; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-preview .sbf-preview .sbf-preview-select .import-data-select__menu [role="option"][aria-selected="true"]::after { opacity: 1; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-preview .sbf-preview-section > p,
:is(.sce-dialog, .service-booking-widget) .sce-booking-preview .sbf-preview-field > small { color: var(--sce-widget-form-helper, #666a68); }
:is(.sce-dialog, .service-booking-widget) .sce-preview-flow { display: flex; gap: 14px; margin-bottom: 22px; font-size: var(--studio-frame-size-12,12px); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-preview-flow button { padding: 2px 0 5px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; font-size: inherit; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-preview-flow button[aria-selected="true"] { border-bottom-color: var(--sce-widget-step-bar, #789ab2); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-preview-flow button:disabled { color: #888; cursor: default; }
:is(.sce-dialog, .service-booking-widget) .sce-preview-actions { display: flex; align-items: stretch; gap: 5px; margin-top: 16px; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-preview-actions > button { background: var(--sce-widget-secondary, #fff); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-preview-actions > button:last-child,
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-preview-actions > .sce-preview-next { background: var(--sce-widget-accent, #efffa7); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-preview-actions > button,
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-next { height: 21px; min-height: 21px; margin: 0; padding: 0 15px; font-size: var(--studio-frame-size-8_8,8.8px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-confirmation { width: 100%; max-width: none; margin: 0 auto; color: inherit; font-family: inherit; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-confirmation__eyebrow { margin: 0 0 6px; color: inherit; font-size: var(--studio-frame-size-12,12px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-confirmation h2 { margin: 0 0 8px; font-size: var(--studio-frame-size-22,22px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-confirmation > p { line-height: 1.45; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-confirmation__details { margin: 24px -25px; border-block: .5px solid var(--sce-widget-outline, #a7a7a7); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-confirmation__details > div { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 16px; padding: 14px 25px; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-confirmation__details > div + div { border-top: .5px solid var(--sce-widget-outline, #d4d4d4); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-confirmation__details dt { color: inherit; font-size: var(--studio-frame-size-12,12px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-confirmation__details dd { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; font-size: var(--studio-frame-size-13,13px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-confirmation__details dd small { width: 100%; color: inherit; font-size: var(--studio-frame-size-10,10px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-confirmation__details .sce-booking-avatar { width: 20px; height: 20px; flex-basis: 20px; font-size: var(--studio-frame-size-8,8px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-confirmation__directions { display: flex; width: 100%; flex-wrap: wrap; gap: 8px; margin-top: 5px; font-size: var(--studio-frame-size-11,11px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-confirmation__directions a { color: inherit; font: inherit; text-decoration: underline; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-confirmation__preview-note { color: inherit; font-size: var(--studio-frame-size-10,10px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-preview--calendar { width: 100%; max-width: 960px; padding: 0; border: 0; overflow-wrap: normal; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-preview--calendar > .sce-preview-flow { margin-right: 16px; margin-bottom: 8px; margin-left: 16px; padding-top: 14px; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-scene { position: relative; min-height: 525px; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar { display: grid; width: 100%; min-height: 500px; grid-template-columns: 280px 440px minmax(238px, 1fr); border: .5px solid var(--sce-widget-outline, #a7a7a7); background: var(--sce-widget-calendar-background, #fff); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar > * { background: var(--sce-widget-calendar-background, #fff); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar > * { min-width: 0; padding: 28px; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar > * + * { border-left: .5px solid var(--sce-widget-outline, #a7a7a7); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar > .sce-booking-service { padding-inline: 18px; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-service > strong { display: block; margin: 0 0 12px; font-size: var(--studio-frame-size-14_4,14.4px); font-weight: 700; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-service h3 { margin-bottom: 20px; font-size: var(--studio-frame-size-12,12px); font-weight: 400; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-service h4 { margin: 24px 0 10px; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-team-toggle { display: flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; font-size: var(--studio-frame-size-11_2,11.2px); font-weight: 400; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-team-caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .12s ease; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-team-toggle[aria-expanded="false"] .sce-booking-team-caret { transform: translateY(1px) rotate(-135deg); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-team-list[hidden] { display: none; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-duration { display: flex; align-items: center; gap: 5px; font-size: var(--studio-frame-size-11_2,11.2px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-clock { display: block; width: 14.4px; height: 14.4px; flex: 0 0 14.4px; background: currentColor; mask: url("../general, reusable UI assets for pragtical/Clock.svg") center / contain no-repeat; -webkit-mask: url("../general, reusable UI assets for pragtical/Clock.svg") center / contain no-repeat; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-service label { display: flex; gap: 7.2px; align-items: center; margin: 10.4px 0; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-service label > span:last-child { min-width: 0; font-size: var(--studio-frame-size-11_2,11.2px); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-service input[type="checkbox"] { width: 10.4px; height: 10.4px; margin: 0; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-avatar { display: inline-grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; background: #777; color: #fff; font-size: var(--studio-frame-size-10,10px); font-style: normal; font-weight: 600; line-height: 1; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-service label > .sce-booking-avatar { width: 19.2px; height: 19.2px; flex-basis: 19.2px; font-size: var(--studio-frame-size-8,8px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-dates h3,
:is(.sce-dialog, .service-booking-widget) .sce-booking-slots h3 { margin: 0 0 24px; font-size: var(--studio-frame-size-12_8,12.8px); font-weight: 400; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-service > strong,
:is(.sce-dialog, .service-booking-widget) .sce-booking-dates > h3,
:is(.sce-dialog, .service-booking-widget) .sce-booking-slots > h3 { display: flex; height: 20px; align-items: center; line-height: 1; white-space: nowrap; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-dates > header { display: flex; align-items: center; justify-content: center; gap: 17.6px; margin-bottom: 17.6px; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-dates > header strong { font-size: var(--studio-frame-size-11_2,11.2px); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-dates > header button { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; border: 0; background: var(--sce-widget-month-chevron-button, #fff); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-dates > header button:hover:not(:disabled) { background: var(--sce-widget-button-hover, #dcf0fb); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-chevron { display: block; width: 6.4px; height: 6.4px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-dates > header .sce-booking-chevron { color: var(--sce-widget-month-chevron, #171717); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-chevron--previous { transform: rotate(135deg); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-chevron--next { transform: rotate(-45deg); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar__daily { display: grid; min-height: 220px; place-content: center; place-items: center; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar__daily strong { display: grid; width: 84px; height: 84px; margin: 8px; place-items: center; border: 2px solid #111; border-radius: 50%; background: var(--sce-widget-date-circle, #dedede); color: var(--sce-widget-date-text, #171717); font-size: var(--studio-frame-size-26,26px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar__daily small { color: #666; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-calendar__week button { display: flex; min-width: 0; min-height: 78px; padding: 8px 2px; flex-direction: column; border: 1px solid #ddd; border-radius: 30px; background: var(--sce-widget-date-circle, #dedede); color: var(--sce-widget-date-text, #171717); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar__week button.is-selected { border-color: #111; background: var(--sce-widget-accent, #f5fbd8); color: var(--sce-widget-date-text, #171717); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar__week b { color: #555; font-size: var(--studio-frame-size-9,9px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar__week strong { font-size: var(--studio-frame-size-15,15px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar__month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9.6px 6.4px; text-align: center; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar__month b { font-size: var(--studio-frame-size-10_4,10.4px); font-weight: 500; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-calendar__month button { width: 38.4px; height: 38.4px; min-width: 0; min-height: 0; margin: auto; padding: 0; border: 0; border-radius: 50%; background: var(--sce-widget-date-circle, #dedede); color: var(--sce-widget-date-text, #171717); font-size: var(--studio-frame-size-11_2,11.2px); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-calendar__month button.is-selected { border: 1.6px solid #111; background: var(--sce-widget-accent, #f5fbd8); color: var(--sce-widget-date-text, #171717); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-calendar__month button[aria-hidden="true"] { visibility: hidden; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-calendar__month button.is-unavailable,
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-calendar__week button.is-unavailable { opacity: .38; text-decoration: line-through; visibility: visible; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-slots { position: relative; display: flex; flex-direction: column; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-slots__scroll { max-height: 380px; padding-right: 12px; overflow: auto; scrollbar-width: none; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-slots__scroll::-webkit-scrollbar { display: none; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-slots__scrollbar { position: absolute; top: 68px; right: 14px; width: 8px; height: 380px; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-slots__scrollbar .scrollbar-ui__handle { right: 1px; width: 6px; height: 56px; max-width: none; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-slots__scroll > button { display: flex; width: 100%; min-height: 38px; justify-content: space-between; margin-bottom: 8px; padding: 7px 10px; border: .5px solid var(--sce-widget-outline, #a7a7a7); border-radius: 6px; background: var(--sce-widget-time-slot, #fff); color: var(--sce-widget-time-slot-text, #171717); font-size: var(--studio-frame-size-14,14px); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-slots__scroll > button[aria-pressed="true"] { background: var(--sce-widget-selected, #d9edfb); color: var(--sce-widget-time-slot-text, #171717); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-slots__scroll > button > span:first-child { white-space: nowrap; font-size: var(--studio-frame-size-11_2,11.2px); font-weight: 400; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-slot__staff { display: flex; margin-left: 5px; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-slot__staff .sce-booking-avatar { width: 20px; height: 20px; margin-left: -3px; flex-basis: 20px; border: 1px solid #fff; font-size: var(--studio-frame-size-8,8px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-booked-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 3px 2px 6px; border-radius: 10px; background: #d6d6d6; font-size: var(--studio-frame-size-8,8px); line-height: 1.2; white-space: nowrap; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-booked-tag .sce-booking-avatar { width: 16px; height: 16px; flex-basis: 16px; font-size: var(--studio-frame-size-7,7px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-slots__empty { padding: 12px 4px; color: #666; font-size: var(--studio-frame-size-10,10px); line-height: 1.35; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-next { align-self: flex-end; margin-top: auto; background: var(--sce-widget-accent, #efffa7); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-availability { position: absolute; z-index: 5; top: 76px; right: 14px; width: 260px; border: .5px solid var(--sce-widget-outline, #a7a7a7); border-radius: 7px; background: var(--sce-widget-calendar-background, #fff); color: inherit; box-shadow: 0 7px 22px #0002; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-availability > header { display: flex; min-height: 32px; align-items: center; justify-content: space-between; padding: 5px 9px; border-bottom: .5px solid var(--sce-widget-outline, #a7a7a7); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-availability > header strong,
:is(.sce-dialog, .service-booking-widget) .sce-booking-availability > p strong { font-weight: 400; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-availability > header strong,
:is(.sce-dialog, .service-booking-widget) .sce-booking-availability > p { font-size: var(--studio-frame-size-11_2,11.2px); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-availability > header button { width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: inherit; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-availability > p { padding: 0 10px; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-availability__staff-row { display: grid; grid-template-columns: 19.2px minmax(0, 1fr) auto auto; column-gap: 10px; row-gap: 5px; align-items: center; padding: 5px 10px; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-availability__staff-row > .sce-booking-avatar { width: 19.2px; height: 19.2px; flex-basis: 19.2px; font-size: var(--studio-frame-size-8,8px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-availability__staff-row > span:not(.sce-booking-avatar) { font-size: var(--studio-frame-size-11_2,11.2px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-availability em { padding: 2px 6px; border-radius: 10px; background: var(--sce-widget-available, #b8efb0); font-size: var(--studio-frame-size-8,8px); font-style: normal; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-availability > div button { padding: 2px 6px; background: var(--sce-widget-accent, #efffa7); font-size: var(--studio-frame-size-8,8px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-meeting { display: grid; gap: 5px; padding: 7px 10px 10px; font-size: var(--studio-frame-size-10,10px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-meeting label { margin-top: 3px; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-meeting-select { width: 100%; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-meeting-select .import-data-select__toggle { display: flex; width: 100%; min-height: 28px; align-items: center; justify-content: space-between; padding: 4px 8px; border: .5px solid var(--sce-widget-outline, #a7a7a7); border-radius: 6px; background: var(--sce-widget-time-slot, #fff); color: var(--sce-widget-time-slot-text, #171717); font-size: var(--studio-frame-size-10,10px); text-align: left; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-meeting-select .import-data-select__toggle > span { flex: 1; text-align: left; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-meeting-select .contact-create-multiselect__caret { width: 6px; height: 4px; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-meeting-select .import-data-select__menu { max-height: 125px; gap: 1px; padding: 3px; border: .5px solid var(--sce-widget-outline, #a7a7a7); border-radius: 6px; background: var(--sce-widget-time-slot, #fff); color: var(--sce-widget-time-slot-text, #171717); font-size: var(--studio-frame-size-10,10px); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-meeting-select .import-data-select__menu [role="option"],
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-meeting-select .import-data-select__menu [role="option"][aria-selected="true"] { justify-content: space-between; min-height: 23px; padding: 4px 7px; border-radius: 4px; background: var(--sce-widget-time-slot, #fff); color: var(--sce-widget-time-slot-text, #171717); font-size: var(--studio-frame-size-10,10px); text-align: left; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-meeting__address { display: flex; min-height: 28px; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 7px; border: .5px solid var(--sce-widget-outline, #a7a7a7); border-radius: 6px; background: var(--sce-widget-time-slot, #fff); color: var(--sce-widget-time-slot-text, #171717); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-meeting__address img { width: 11px; height: 11px; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-meeting__address--map img { display: none; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-meeting__address--map::after { width: 11px; height: 11px; flex: 0 0 11px; background: currentColor; content: ""; mask: url("../general, reusable UI assets for pragtical/tracking map.svg") center / contain no-repeat; -webkit-mask: url("../general, reusable UI assets for pragtical/tracking map.svg") center / contain no-repeat; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-meeting > .sce-link { justify-self: end; padding: 0; border: 0; background: transparent; font-size: var(--studio-frame-size-8,8px); text-decoration: underline; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-meeting__note { display: flex; gap: 6px; margin-top: 7px !important; font-size: var(--studio-frame-size-8,8px) !important; line-height: 1.35; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-booked-person { display: grid; grid-template-columns: 34px 16px minmax(0, 1fr); gap: 6px; align-items: center; padding: 0 10px; font-size: var(--studio-frame-size-10,10px) !important; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-booked-person .sce-booking-avatar { width: 16px; height: 16px; flex-basis: 16px; font-size: var(--studio-frame-size-7,7px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-availability--booked .sce-booking-meeting { padding-top: 2px; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-availability--booked .sce-booking-cancel { display: block; justify-self: center; margin: 0 auto 10px; padding: 4px 9px; border: .5px solid var(--sce-widget-outline, #a7a7a7); background: var(--sce-widget-secondary, #fff); font-size: var(--studio-frame-size-8,8px); }
:is(.sce-dialog, .service-booking-widget) .sce-booking-preview-note { margin: 0 !important; padding: 5px 16px 0; background: var(--sce-widget-background, #fff); color: inherit; font-size: var(--studio-frame-size-12,12px); }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-preview button:hover:not(:disabled) { background: var(--sce-widget-button-hover, #dcf0fb); }
:is(.sce-dialog, .service-booking-widget) .sce-preview-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
:is(.sce-dialog, .service-booking-widget) .sce-preview-form-grid label { display: block; }
:is(.sce-dialog, .service-booking-widget) .sce-preview-form-grid label[data-width="full"] { grid-column: 1/-1; }
:is(.sce-dialog, .service-booking-widget) .sce-preview-form-grid input,
:is(.sce-dialog, .service-booking-widget) .sce-preview-form-grid textarea,
:is(.sce-dialog, .service-booking-widget) .sce-preview-form-grid select { margin-top: 5px; }
:is(.sce-dialog, .service-booking-widget) .sce-preview-consent { display: flex; gap: 10px; margin-block: 18px; align-items: center; font-size: var(--studio-frame-size-9_68,9.68px); }
:is(.sce-dialog, .service-booking-widget) .sce-preview-consent > span,
:is(.sce-dialog, .service-booking-widget) .sce-preview-consent small { font-size: inherit; line-height: inherit; vertical-align: baseline; }


@media (min-width: 851px) {
  :is(.sce-dialog, .service-booking-widget) .sce-booking-service h3, :is(.sce-dialog, .service-booking-widget) .sce-booking-dates h3, :is(.sce-dialog, .service-booking-widget) .sce-booking-slots h3 { font-size: var(--studio-frame-size-10,10px); }
  :is(.sce-dialog, .service-booking-widget) .sce-booking-service h4 { margin: 8px 0 5px; }
}

@media (max-width: 900px) {
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar { overflow-x: auto; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-preview-note { margin-right: 0 !important; }
}

@media (max-width: 600px) {
:is(.sce-dialog, .service-booking-widget) .sce-booking-preview { padding: 16px; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-page-body { margin: -20px -16px -16px; padding: 20px 16px 16px; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-preview--calendar { padding: 0; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar { display: block; overflow: visible; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar > * + * { border-top: 1px solid #aaa; border-left: 0; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar > * { padding: 14px; }
:is(.sce-dialog, .service-booking-widget) .sce-booking-calendar__month { gap: 4px; }
:is(.sce-dialog, .service-booking-widget):is(.sce-dialog, .service-booking-widget) .sce-booking-calendar__month button { width: 34px; height: 34px; }
:is(.sce-dialog, .service-booking-widget) .sce-preview-form-grid { grid-template-columns: 1fr; }
:is(.sce-dialog, .service-booking-widget) .sce-preview-form-grid label { grid-column: 1 !important; }
}