/* Studio host adapters only. Native widget visuals live in the shared module.
 * Container queries respond to the canvas/preview, not the editor viewport. */
.studio-render--native { container-type: inline-size; min-width: 0; }
.studio-render--native .service-booking-widget { width: 100%; min-width: 0; }
.studio-render--native[data-studio-frame-font-family] > .service-booking-widget { font-family: var(--studio-frame-font) !important; }
.studio-render--native[data-studio-frame-size="uniform"] > .service-booking-widget { font-size: var(--studio-frame-font-size) !important; }
.studio-render--native .service-booking-widget :is(h2,h3,h4) { letter-spacing: normal; text-wrap: wrap; font-family: var(--studio-native-heading-font); }
.studio-render--native .service-booking-widget p { max-width: none; line-height: 1.5; }
.studio-render--native .service-booking-widget .sce-booking-preview { margin-block: 0; border-radius: var(--studio-native-radius); }
.studio-render--native .service-booking-widget .sce-booking-preview { max-width: var(--studio-native-width); }
.studio-render--native .service-booking-widget .sce-booking-preview:not(.sce-booking-preview--calendar) { max-width: min(100%, var(--studio-native-form-width)); }
.studio-render--native .service-booking-widget .sbf-preview-field :is(input:not([type=checkbox]):not([type=radio]),textarea,select) { border-radius: var(--studio-native-input-radius); }
/* service-forms.css follows the shared booking module. Re-state only its
 * customer preview sizes here so native Studio percentage changes preserve
 * the same hierarchy without affecting the Service Form editor itself. */
.studio-render--native .service-booking-widget .sbf-preview { font-size: var(--studio-frame-size-14,14px); }
.studio-render--native .service-booking-widget .sbf-preview h3 { font-size: var(--studio-frame-size-16,16px); }
.studio-render--native .service-booking-widget .sbf-preview p,
.studio-render--native .service-booking-widget .sbf-preview-field > label,
.studio-render--native .service-booking-widget .sbf-preview-radio { font-size: var(--studio-frame-size-12,12px); }
.studio-render--native .service-booking-widget .sbf-preview-field :is(input:not([type=checkbox]):not([type=radio]),textarea),
.studio-render--native .service-booking-widget .sbf-preview .sbf-preview-select .import-data-select__toggle { font-size: var(--studio-frame-size-13,13px); }
.studio-render--native .service-booking-widget .sbf-preview-field > small { font-size: var(--studio-frame-size-11,11px); }
.studio-render--native .service-booking-widget .sbf-preview .sbf-preview-select .import-data-select__menu { font-size: var(--studio-frame-size-12,12px); }
.studio-render--native .service-booking-widget .sce-preview-actions > button { border-radius: var(--studio-native-button-radius); }
.studio-render--native .service-booking-widget .sce-booking-calendar { grid-template-columns: minmax(185px, 28fr) minmax(310px, 44fr) minmax(185px, 24fr); overflow: visible; }
.studio-render--native .service-booking-widget .sce-booking-calendar > * { padding-inline: 18px; padding-block: var(--studio-native-spacing); }
.studio-render--native .service-booking-widget .sce-booking-dates > h3,
.studio-render--native .service-booking-widget .sce-booking-slots > h3 { white-space: normal; height: auto; min-height: 20px; }
.studio-render--native .studio-service-heading > strong { display: block; margin-bottom: 12px; font-size: var(--studio-frame-size-14_4,14.4px); font-weight: 700; }
.studio-render--native .studio-service-heading > h3 { margin-top: 0; }
.studio-render--native .service-booking-widget .studio-service-header > p { margin: 8px 0 14px; }
.studio-render--native .service-booking-widget .studio-service-header > .studio-render__image,
.studio-render--native .service-booking-widget .studio-service-heading > .studio-render__image { height: auto; }
.studio-render--native .service-booking-widget .studio-service-header > .sce-preview-summary { margin-bottom: 20px; }
.studio-render--native .service-booking-widget .sbf-preview-section > p { margin: 0 0 14px; }
.studio-render--native .service-booking-widget .sbf-preview-field .studio-render__error:empty { display: none; }
.studio-render--native [data-studio-section-margins~="top"] { padding-top:var(--studio-section-margin-top) !important; }
.studio-render--native [data-studio-section-margins~="right"] { padding-right:min(var(--studio-section-margin-right),calc((100% - min(var(--studio-section-min-content),100%))/2)) !important; }
.studio-render--native [data-studio-section-margins~="bottom"] { padding-bottom:var(--studio-section-margin-bottom) !important; }
.studio-render--native [data-studio-section-margins~="left"] { padding-left:min(var(--studio-section-margin-left),calc((100% - min(var(--studio-section-min-content),100%))/2)) !important; }
/* Native section shells do not use the generic section body. Promote their
 * owned objects onto an equivalent edge/content grid only while requested. */
.studio-render--native .sce-booking-preview:not(.sce-booking-preview--calendar) { --studio-native-section-host-inline:25px; }
.studio-render--native .studio-service-calendar-section { --studio-section-min-content:300px; container-type:inline-size; }
.studio-render--native .studio-service-calendar-section :is([data-studio-section-surface],[data-studio-off-margin-boundary]) { --studio-section-min-content:120px; }
.studio-render--native .sce-booking-preview:not(.sce-booking-preview--calendar) [data-studio-section-surface][data-studio-section-off-margin] { width:calc(100% + var(--studio-native-section-host-inline) * 2); margin-inline:calc(-1 * var(--studio-native-section-host-inline)); }
.studio-render--native .sce-booking-service > [data-studio-section-surface][data-studio-section-off-margin],
.studio-render--native .sce-booking-dates > .studio-service-booking-heading[data-studio-off-margin-boundary] { --studio-native-section-host-inline:18px; --studio-section-margin-left:var(--studio-native-section-host-inline); --studio-section-margin-right:var(--studio-native-section-host-inline); width:calc(100% + var(--studio-native-section-host-inline) * 2); margin-inline:calc(-1 * var(--studio-native-section-host-inline)); }
.studio-render--native :is([data-studio-section-surface][data-studio-section-off-margin],[data-studio-off-margin-boundary]) { display:grid !important; padding-inline:0 !important; grid-template-columns:[studio-edge-start] min(var(--studio-section-margin-left,var(--studio-native-section-host-inline,0px)),calc((100% - min(var(--studio-section-min-content),100%))/2)) [studio-content-start] minmax(0,1fr) [studio-content-end] min(var(--studio-section-margin-right,var(--studio-native-section-host-inline,0px)),calc((100% - min(var(--studio-section-min-content),100%))/2)) [studio-edge-end]; column-gap:0; align-items:start; }
.studio-render--native :is([data-studio-section-surface][data-studio-section-off-margin],[data-studio-off-margin-boundary]) > *,
.studio-render--native :is([data-studio-section-surface][data-studio-section-off-margin],[data-studio-off-margin-boundary]) > .studio-render__image-flow > *,
.studio-render--native :is([data-studio-section-surface][data-studio-section-off-margin],[data-studio-off-margin-boundary]) > .studio-render__image-flow > .studio-render__image-flow-content > * { grid-column:studio-content-start / studio-content-end; min-width:0; }
.studio-render--native :is([data-studio-section-surface][data-studio-section-off-margin],[data-studio-off-margin-boundary]) :is(.studio-render__image-flow,.studio-render__image-flow-content):has([data-studio-off-margin]) { display:contents !important; }
.studio-render--native :is([data-studio-section-surface][data-studio-section-off-margin],[data-studio-off-margin-boundary]) [data-studio-off-margin] { grid-column:studio-edge-start / studio-edge-end; max-width:none; }
/* Native widget frames have different wrappers from ordinary Studio sections.
 * Open only the ancestry of active Off-margin content and promote its surface
 * so a translated image or text object can cross form/calendar boundaries. */
.studio-render--native .service-booking-widget:has([data-studio-off-margin]),
.studio-render--native .sce-booking-preview:has([data-studio-off-margin]),
.studio-render--native .sce-booking-page-body:has([data-studio-off-margin]),
.studio-render--native :is([data-studio-section-surface],[data-studio-off-margin-boundary]):has([data-studio-off-margin]) { overflow:visible !important; }
.studio-render--native :is([data-studio-section-surface],[data-studio-off-margin-boundary]):has([data-studio-off-margin]) { position:relative; z-index:2; }
/* Native header, form and booking shells bypass the generic section body.
 * Give their direct background image the same real backdrop/layer contract. */
.studio-render--native .service-booking-widget :is(.studio-service-header,.studio-service-heading,.sbf-preview-section,.studio-service-calendar-section).studio-render__section--image-background { position: relative; isolation: isolate; min-height: var(--studio-image-height,280px); overflow: hidden; }
.studio-render--native .service-booking-widget :is(.studio-service-header,.studio-service-heading,.sbf-preview-section,.studio-service-calendar-section).studio-render__section--image-background:has([data-studio-off-margin]) { overflow:visible; }
.studio-render--native .service-booking-widget :is(.studio-service-header,.studio-service-heading,.sbf-preview-section,.studio-service-calendar-section).studio-render__section--image-background > .studio-render__image--background { position: absolute; inset: 0; z-index: 0; width: 100% !important; height: 100% !important; min-width: 100%; min-height: 100%; margin: 0 !important; border-radius: inherit; pointer-events: none; }
.studio-render--native .service-booking-widget :is(.studio-service-header,.studio-service-heading,.sbf-preview-section,.studio-service-calendar-section).studio-render__section--image-background > :not(.studio-render__image--background) { position: relative; z-index: 1; }
/* Native forms normally use flex wrapping. Opt only explicitly broken Studio
 * forms into equivalent two-column tracks; actual service forms stay untouched. */
.studio-render--native .service-booking-widget .sbf-preview-fields:has(> [data-studio-field-break-before="true"]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
.studio-render--native .service-booking-widget .sbf-preview-fields:has(> [data-studio-field-break-before="true"]) > .sbf-preview-field { width: 100%; grid-column: 1 / -1; }
.studio-render--native .service-booking-widget .sbf-preview-fields:has(> [data-studio-field-break-before="true"]) > .sbf-preview-field--half { grid-column: auto; }
.studio-render--native .service-booking-widget .sbf-preview-fields > .sbf-preview-field[data-studio-field-break-before="true"] { grid-column-start: 1; }
.studio-render--native .service-booking-widget .studio-service-status { padding: 10px 0 0; margin: 0; font-size: var(--studio-frame-size-10,10px); color: var(--sce-widget-form-helper); }
.studio-render--native .service-booking-widget .sce-booking-preview--calendar > .studio-service-status { padding: 8px 16px; }
.studio-render--native .service-booking-widget .studio-render__privacy { margin: 10px 0; padding: 0; font-size: var(--studio-frame-size-10,10px); }
.studio-render--native .service-booking-widget .studio-render__review { width: 100%; max-width: none; padding: 0; margin: 0; }
.studio-render--native .service-booking-widget .studio-render__review-group { margin-top: 16px; padding: 12px 0; }
.studio-render--native .service-booking-widget .studio-render__review h2 { font-size: var(--studio-frame-size-18,18px); }
.studio-render--native .service-booking-widget .studio-render__review h3 { font-size: var(--studio-frame-size-14,14px); }
.studio-render--native .service-booking-widget .studio-render__review dl { font-size: var(--studio-frame-size-12,12px); }
.studio-render--native .service-booking-widget .studio-render__review button { color: inherit; text-decoration: underline; }
.studio-render--native .studio-service-sample { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-block: 14px; font-size: var(--studio-frame-size-11,11px); }
.studio-render--native .service-booking-widget .sce-preview-flow { flex-wrap: wrap; }
.studio-render--native .service-booking-widget .sce-booking-availability { max-width: calc(100% - 28px); }
.studio-render--native .service-booking-widget .sce-booking-meeting__note { padding: 5px 10px; }
.studio-render--native.studio-render--editor [data-studio-field] { cursor: pointer; }
.studio-render--native.studio-render--editor [data-studio-field] > :is(input,select,textarea,fieldset,label) { pointer-events: none; }
.studio-render--native.studio-render--editor [data-studio-section].is-selected,
.studio-render--native.studio-render--editor [data-studio-field].is-selected { outline: 2px solid #79acd0; outline-offset: 2px; }
.studio-render--native.studio-render--editor [data-studio-inline]:focus { outline: 1px solid #79acd0; }

/* Clinic Visit Calendar: a spacious monochrome appointment flow inspired by
 * editorial treatment-booking pages while retaining the native calendar. */
.studio-render--native[data-studio-native-widget="clinic-calendar"] {
  padding: clamp(34px,6cqi,88px) clamp(20px,5cqi,72px);
}
.studio-render--native[data-studio-native-widget="clinic-calendar"] .studio-clinic-calendar-intro {
  max-width: 760px;
  margin: 0 auto clamp(34px,5cqi,64px);
  text-align: center;
}
.studio-render--native[data-studio-native-widget="clinic-calendar"] .studio-clinic-calendar-intro h2 {
  margin: 0;
  font-family: var(--studio-native-heading-font);
  font-size: clamp(var(--studio-frame-size-36,36px),5.4cqi,var(--studio-frame-size-64,64px));
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.08;
}
.studio-render--native[data-studio-native-widget="clinic-calendar"] .studio-clinic-calendar-intro p {
  margin: 18px auto 0;
  color: #666;
  font-size: var(--studio-frame-size-14,14px);
}
.studio-render--native[data-studio-native-widget="clinic-calendar"] .service-booking-widget .sce-booking-preview--calendar {
  background: transparent;
}
.studio-render--native[data-studio-native-widget="clinic-calendar"] .service-booking-widget .sce-preview-flow {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 0;
  margin: 0;
  padding: 0 20px;
  background: #fff;
  box-shadow: 0 16px 48px rgba(0,0,0,.08);
}
.studio-render--native[data-studio-native-widget="clinic-calendar"] .service-booking-widget .sce-preview-flow button {
  justify-content: flex-start;
  min-height: 74px;
  padding: 18px 14px;
  border-bottom: 1px solid transparent;
  font-size: var(--studio-frame-size-12,12px);
  font-weight: 600;
  text-align: left;
}
.studio-render--native[data-studio-native-widget="clinic-calendar"] .service-booking-widget .sce-preview-flow button[aria-selected="true"] {
  border-bottom-color: #111;
}
.studio-render--native[data-studio-native-widget="clinic-calendar"] .studio-service-calendar-section {
  padding: 0 20px 24px;
  background: #fff;
  box-shadow: 0 24px 52px rgba(0,0,0,.08);
}
.studio-render--native[data-studio-native-widget="clinic-calendar"] .service-booking-widget .sce-booking-calendar {
  grid-template-columns: minmax(210px,28fr) minmax(330px,44fr) minmax(220px,28fr);
  min-height: 540px;
  border: 0;
}
.studio-render--native[data-studio-native-widget="clinic-calendar"] .service-booking-widget .sce-booking-calendar > * + * {
  border-left-color: #e4e4e4;
}
.studio-render--native[data-studio-native-widget="clinic-calendar"] .service-booking-widget .sce-booking-service > strong,
.studio-render--native[data-studio-native-widget="clinic-calendar"] .service-booking-widget .sce-booking-service h3 {
  color: #111;
}
.studio-render--native[data-studio-native-widget="clinic-calendar"] > .studio-render__section--faq {
  width: min(860px,100%);
  margin: clamp(70px,9cqi,128px) auto 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.studio-render--native[data-studio-native-widget="clinic-calendar"] > .studio-render__section--faq h2 {
  text-align: center;
  font-size: clamp(var(--studio-frame-size-30,30px),4cqi,var(--studio-frame-size-48,48px));
}
.studio-render--native[data-studio-native-widget="clinic-calendar"] > .studio-render__section--faq .studio-render__section-body > p {
  margin-inline: auto;
  text-align: center;
}
.studio-render--native[data-studio-native-widget="clinic-calendar"] > .studio-render__section--faq details {
  border-color: #d7d7d7;
  border-radius: 0;
  background: transparent;
}
@container (max-width: 740px) {
  .studio-render--native .service-booking-widget .sce-booking-calendar { display: grid; grid-template-columns: minmax(0, 1fr); }
  .studio-render--native .service-booking-widget .sce-booking-calendar > * + * { border-left: 0; border-top: .5px solid var(--sce-widget-outline); }
  .studio-render--native .service-booking-widget .sce-booking-calendar > * { padding: 18px; }
  .studio-render--native .service-booking-widget .sce-booking-calendar__month { max-width: 390px; margin-inline: auto; }
  .studio-render--native .service-booking-widget .sce-booking-service h3 { margin-bottom: 12px; }
  .studio-render--native .service-booking-widget .sce-booking-slots__scroll { max-height: 230px; }
  .studio-render--native .service-booking-widget .sce-booking-slots__scrollbar { display: none; }
  .studio-render--native .service-booking-widget .sce-booking-slots__scroll { scrollbar-width: thin; }
  .studio-render--native .service-booking-widget .sce-booking-slots__scroll::-webkit-scrollbar { display: block; width: 6px; }
  .studio-render--native .service-booking-widget .sce-booking-next { margin-top: 12px; }
  .studio-render--native .service-booking-widget .sce-booking-availability { position: relative; top: auto; right: auto; width: auto; max-width: none; margin: 12px; }
  .studio-render--native[data-studio-native-widget="clinic-calendar"] .service-booking-widget .sce-preview-flow { display: flex; overflow-x: auto; }
  .studio-render--native[data-studio-native-widget="clinic-calendar"] .service-booking-widget .sce-preview-flow button { min-width: 150px; }
}
@container (max-width: 440px) {
  .studio-render--native .sce-booking-preview:not(.sce-booking-preview--calendar) { --studio-native-section-host-inline:16px; }
  .studio-render--native .service-booking-widget .sce-booking-preview:not(.sce-booking-preview--calendar) { padding: 16px; }
  .studio-render--native .service-booking-widget .sce-booking-page-body { margin: -20px -16px -16px; padding: 20px 16px 16px; }
  .studio-render--native .service-booking-widget .sce-preview-summary { margin-inline: -16px; padding-inline: 16px; }
  .studio-render--native .service-booking-widget .sbf-preview-field--half { width: 100%; }
  .studio-render--native .service-booking-widget .sbf-preview-fields:has(> [data-studio-field-break-before="true"]) { grid-template-columns: minmax(0, 1fr); }
  .studio-render--native .service-booking-widget .sbf-preview-fields:has(> [data-studio-field-break-before="true"]) > .sbf-preview-field--half { grid-column: 1 / -1; }
  .studio-render--native .service-booking-widget .sce-preview-flow { gap: 7px; font-size: var(--studio-frame-size-11,11px); }
  .studio-render--native .service-booking-widget .sce-preview-flow button { min-height: 36px; }
  .studio-render--native .service-booking-widget .sce-preview-actions > button,
  .studio-render--native .service-booking-widget .sce-booking-next { min-height: 36px; height: auto; font-size: var(--studio-frame-size-11,11px); }
  .studio-render--native .service-booking-widget .sce-booking-calendar__month button { width: min(34px, 10cqi); height: min(34px, 10cqi); }
}
@media (max-width: 540px) {
  .studio-render--native .sce-booking-preview:not(.sce-booking-preview--calendar) { --studio-native-section-host-inline:16px; }
  .studio-render--native .service-booking-widget .sbf-preview-fields:has(> [data-studio-field-break-before="true"]) { grid-template-columns: minmax(0, 1fr); }
  .studio-render--native .service-booking-widget .sbf-preview-fields:has(> [data-studio-field-break-before="true"]) > .sbf-preview-field--half { grid-column: 1 / -1; }
}