/* Slotly interface refinement. Shared presentation only; no API permissions changed. */
:root {
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ui-ink: #24332d;
  --ui-muted: #59675f;
  --ui-line: #dfe6df;
  --ui-surface: #f7f8f5;
  --ui-green: #275b49;
  --ui-radius: 16px;
  --ui-shadow: 0 5px 20px rgb(31 54 40 / 4%);
}
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body[data-interface] { font-family: var(--ui-font); font-size: 15px; line-height: 1.55; --muted: var(--ui-muted); }
[data-interface] h1, [data-interface] h2, [data-interface] h3, [data-interface] .logo,
[data-interface] .stat strong, [data-interface] .empty b, [data-interface] .wordmark {
  font-family: var(--ui-font);
}
[data-interface] input, [data-interface] textarea, [data-interface] select,
[data-interface] button { font-family: inherit; }
[data-interface] :is(input, select, textarea):not([type=checkbox]):not([type=color]):not([type=range]) {
  font-size: 16px; min-height: 48px; border-radius: 10px; border-color: #cbd6cc;
}
[data-interface] :is(button,a,input,select,textarea,summary) { touch-action: manipulation; }
[data-interface] :is(button,a,input,select,textarea,summary):focus-visible {
  outline: 3px solid #366c54; outline-offset: 3px;
}
[data-interface] :is(button,a) { -webkit-tap-highlight-color: transparent; }
[data-interface] :is(button,a)[aria-busy=true] { cursor: progress; }
[data-interface] :is(.btn,.button,.pay-button) { min-height: 46px; border-radius: 10px; font-size: 14px; font-weight: 650; }
[data-interface] :is(.btn.small,.button.small) { min-height: 44px; font-size: 13px; }
[data-interface] :is(.help,.pay-help,.intro-copy) { color: var(--ui-muted); font-size: 13px; line-height: 1.65; }
[data-interface] label { font-size: 14px; line-height: 1.5; }
[data-interface] :is(.error,.message,.notice,.pay-alert,.inline-note) { line-height: 1.65; }
[data-interface] summary { cursor: pointer; }
[data-interface] button:disabled { cursor: not-allowed; }
[data-interface] :is(.icon,.cancel,.linkbtn,.hours-win button,.suggest-chip,.svc-item button) { min-height: 44px; }
[data-interface] .modal-head button { min-width: 44px; min-height: 44px; }
[data-interface] .icon { min-width: 44px; }
[data-interface] [hidden] { display: none !important; }
.ui-icon { display: inline-block; flex: 0 0 22px; vertical-align: middle; }
.ui-skip { position: fixed; left: 14px; top: -80px; z-index: 999; padding: 12px 18px; border-radius: 8px; background: white; color: #275b49; }
.ui-skip:focus { top: 12px; }
.ui-close { width: 44px; height: 44px; border: 1px solid var(--ui-line); border-radius: 12px; background: #fff; color: var(--ui-ink); font-size: 26px; }
.ui-dialog-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.ui-dialog-heading h2 { margin: 3px 0 0; font-size: 23px; }
.ui-dialog-heading .eyebrow { margin: 0; }

/* Business dashboard: stable sidebar on larger displays, task navigation on phones. */
[data-interface=app] .shell { grid-template-columns: 232px minmax(0,1fr); }
[data-interface=app] .app-sidebar { padding: 28px 18px; gap: 25px; }
[data-interface=app] .app-sidebar .logo { font-size: 29px; padding-left: 8px; }
[data-interface=app] .workspace { background: #f8faf6; border-radius: 12px; padding: 12px 10px; }
[data-interface=app] .workspace b { font-size: 14px; overflow-wrap: anywhere; }
[data-interface=app] .avatar { padding: 11px; background: #eaf0e6; color: #3a5948; }
[data-interface=app] .desktop-nav { display: grid; gap: 5px; }
[data-interface=app] .desktop-nav :is(button,a) {
  display: flex; gap: 12px; align-items: center; min-height: 48px; border: 0; border-radius: 10px;
  padding: 12px; background: transparent; color: #53645a; text-decoration: none; font-size: 14px; text-align: left;
}
[data-interface=app] .desktop-nav :is(button,a):hover { background: #f0f4ed; }
[data-interface=app] .desktop-nav button.active { background: #e8f0e4; color: #234f3f; font-weight: 700; }
[data-interface=app] .topbar { height: 80px; padding: 0 32px; }
[data-interface=app] .topbar-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
[data-interface=app] .topbar-title>div { min-width: 0; }
.ui-business-name { display: block; color: var(--ui-muted); font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-interface=app] #sectionTitle { font-size: 17px; }
.ui-mobile-logo { display: none; }
[data-interface=app] main { padding: 30px 32px 48px; width: 100%; max-width: 1360px; }
[data-interface=app] .banner { text-align: left; padding: 9px 32px; font-size: 12px; background: #eef3e9; }
[data-interface=app] h1 { font-size: 30px; letter-spacing: -.8px; line-height: 1.2; }
[data-interface=app] .intro { margin-bottom: 20px; }
[data-interface=app] .intro p { font-size: 14px; line-height: 1.65; }
[data-interface=app] .eyebrow { letter-spacing: 1.3px; font-size: 10px; }
[data-interface=app] .quick { display: flex; gap: 10px; margin-bottom: 22px; }
[data-interface=app] .quick .btn { font-weight: 550; font-size: 13px; }
[data-interface=app] .quick .ui-icon { width: 18px; height: 18px; flex-basis: 18px; }
[data-interface=app] .stats { gap: 12px; margin-bottom: 23px; }
[data-interface=app] .stat { padding: 17px; border-radius: 13px; }
[data-interface=app] .stat strong { font-size: 27px; margin: 7px 0 5px; }
[data-interface=app] .stat small { font-size: 11px; }
[data-interface=app] .stat-top { font-size: 12px; gap: 8px; }
[data-interface=app] .stat-top>span { display: none; }
[data-interface=app] .card { border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
[data-interface=app] .card-head { padding: 19px 20px; }
[data-interface=app] .card-head h2 { font-size: 18px; }
[data-interface=app] .date-nav { gap: 5px; font-size: 13px; }
[data-interface=app] .week { padding: 12px 14px; gap: 4px; }
[data-interface=app] .day { min-width: 0; min-height: 62px; padding: 8px 0; }
[data-interface=app] .day strong { font-size: 17px; margin-top: 3px; }
[data-interface=app] .day.closed { opacity: .72; }
[data-interface=app] .day.active { opacity: 1; }
[data-interface=app] .promo { background: #f1f5ec; border: 1px solid #dfe7d8; padding: 21px; }
.ui-card-heading { display: flex; align-items: center; gap: 10px; }
[data-interface=app] .ui-card-heading h2 { font-size: 17px; margin: 0; line-height: 1.35; }
[data-interface=app] .promo p { font-size: 13px; color: var(--ui-muted); }
[data-interface=app] .mini-link { margin: 15px 0; padding: 12px; font-size: 12px; background: #fff; }
.ui-page-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
[data-interface=app] .ui-page-actions .btn { padding: 10px; font-size: 13px; }
.ui-row-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding-top: 13px; margin-top: 12px; border-top: 1px solid #dce5d5; text-decoration: none; font-size: 13px; font-weight: 600; color: var(--ui-green); }
[data-interface=app] .note { font-size: 13px; padding: 20px; }
[data-interface=app] .note p { margin: 8px 0 16px; }
[data-interface=app] .note b { font-size: 15px; }
[data-interface=app] .row-actions :is(.cancel,.linkbtn) { font-size: 13px; padding: 8px 10px; }
[data-interface=app] .row-actions .tag { font-size: 11px; padding: 6px 9px; }
[data-interface=app] .appt b { font-size: 14px; }
[data-interface=app] .appt p { overflow-wrap: anywhere; }
[data-interface=app] .appt.is-cancelled b { text-decoration-thickness: 1px; }
[data-interface=app] .settings-body { max-width: 830px; }
.ui-settings-section { border: 1px solid #dfe6dc; border-radius: 14px; margin: 14px 0; background: #eef2ec; overflow: clip; transition: background .15s; }
.ui-settings-section:not([open])>summary:active { background: #e5ebe2; }
.ui-settings-section[open] { background: #f4f6f2; }
.ui-settings-section>summary { padding: 16px; display: flex; gap: 12px; justify-content: space-between; align-items: center; list-style: none; min-height: 76px; }
.ui-settings-section>summary::-webkit-details-marker, .ui-payment-setup>summary::-webkit-details-marker { display: none; }
.ui-settings-section>summary strong { display: block; font-size: 15px; font-weight: 650; }
.ui-settings-section>summary small { display: block; color: var(--ui-muted); font-size: 12px; margin-top: 4px; line-height: 1.6; }
.ui-settings-section[open]>summary { border-bottom: 1px solid #dfe6dc; background: #eef2ec; }
.ui-settings-section[open]>summary>.ui-icon { transform: rotate(90deg); }
.ui-settings-content { padding: 3px 18px 19px; }
.ui-connections { max-width: 830px; margin-top: 22px; }
.ui-extra-options { border-top: 1px solid var(--ui-line); margin-top: 20px; }
.ui-extra-options>summary { padding: 15px 0; font-size: 13px; font-weight: 600; min-height: 48px; color: var(--ui-muted); }
.ui-settings-save { min-width: 160px; }
[data-interface=app] .gate { padding: 30px 18px; min-height: 100dvh; }
[data-interface=app] .gate-card { padding: 30px 24px; border-radius: 20px; box-shadow: var(--ui-shadow); }
[data-interface=app] .gate .switch button { min-height: 44px; }
[data-interface=app] .wiz { padding: 28px 24px; }
[data-interface=app] .mobile-nav { display: none; }
.ui-more-dialog { padding: 24px; width: min(480px,calc(100% - 24px)); }
.ui-menu-links { margin: 20px 0; display: grid; gap: 6px; }
.ui-menu-links :is(a,button) { display: flex; align-items: center; gap: 14px; min-height: 76px; text-align: left; text-decoration: none; padding: 12px; border-radius: 12px; background: #f6f8f3; color: var(--ui-ink); border: 0; }
.ui-menu-links :is(a,button)>span { flex: 1; }
.ui-menu-links strong { display: block; font-size: 15px; }
.ui-menu-links small { display: block; color: var(--ui-muted); font-size: 12px; margin-top: 3px; line-height: 1.5; }
.ui-menu-links> :is(a,button)>.ui-icon:first-child { background: #e9f0e3; border-radius: 9px; padding: 9px; box-sizing: content-box; color: #3f634b; }
.ui-menu-account { border-top: 1px solid var(--ui-line); padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ui-menu-account span { min-width: 0; font-size: 12px; overflow-wrap: anywhere; color: var(--ui-muted); }
.ui-menu-signout { min-height: 44px; padding: 10px; color: #914c42; font-weight: 600; background: none; white-space: nowrap; }

/* Customer pages: one decision at a time, with the same typography as the dashboard. */
[data-interface=book] .wrap { max-width: 680px; }
.ui-booking-progress ol { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.ui-booking-progress button { width: 100%; min-height: 64px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; font-size: 12px; color: #5c6a60; background: transparent; padding: 6px 3px; border-radius: 10px; font-weight: 600; }
.ui-progress-number { height: 25px; width: 25px; border-radius: 50%; border: 1px solid #cbd6c7; display: grid; place-items: center; font-size: 12px; }
.ui-booking-progress [aria-current=step] { background: #edf3e8; color: var(--green); }
.ui-booking-progress [aria-current=step] .ui-progress-number { background: var(--green); color: white; border-color: var(--green); }
.ui-booking-progress .is-complete .ui-progress-number { border-color: var(--green); color: var(--green); }
[data-interface=book] .step { letter-spacing: -.35px; font-size: 22px; line-height: 1.3; font-weight: 700; text-transform: none; color: var(--ink); margin-bottom: 20px; }
.ui-step-kicker { display: block; font-size: 10px; letter-spacing: 1.3px; margin-bottom: 8px; color: var(--green); font-weight: 650; }
[data-interface=book] .card { border-radius: 18px; box-shadow: var(--ui-shadow); }
.ui-booking-actions { display: none; }
.ui-flow-ready .ui-booking-actions { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--ui-line); margin-top: 24px; padding-top: 20px; }
.ui-booking-actions>.btn { margin-top: 0 !important; }
.ui-booking-actions .btn.secondary { flex: 0 0 90px; width: auto; }
.ui-booking-summary { background: #eef3e8; color: var(--ink); padding: 12px 15px; border-radius: 11px; font-size: 13px; line-height: 1.6; margin: 0 0 16px; }
.ui-booking-summary strong { display: block; font-weight: 650; }
[data-interface=book] #submitError { margin: 0 0 16px !important; scroll-margin-top: 20px; }
[data-interface=book] .service { min-height: 76px; border-radius: 12px; }
[data-interface=book] .service small { font-size: 13px; color: var(--ui-muted); }
[data-interface=book] .policy { color: var(--ui-muted); font-size: 13px; }
[data-interface=book] .review-row { font-size: 14px; }
[data-interface=book] .review-row span:first-child { font-weight: 500; }
[data-interface=book] .consent { font-size: 13px; line-height: 1.65; }
[data-interface=book] .brand-tabs { margin-bottom: 18px; }
[data-interface=manage] .wrap { max-width: 620px; }
[data-interface=manage] .card { border-radius: 18px; }

/* Business-page editor and payments share the same quiet page structure. */
[data-interface=page-editor] .editor-top, [data-interface=deposits] .pay-top,
[data-interface=payment] .pay-top { background: #fff; }
[data-interface=page-editor] .editor-wrap { max-width: 860px; padding-top: 32px; }
[data-interface=page-editor] h1, [data-interface=deposits] h1 { font-size: 31px; letter-spacing: -.85px; line-height: 1.2; }
[data-interface=page-editor] .editor-heading { margin-bottom: 19px; gap: 20px; }
[data-interface=page-editor] .intro-copy { font-size: 14px; }
[data-interface=page-editor] .draft-note { padding: 14px 16px; margin-bottom: 20px; }
[data-interface=page-editor] .draft-note p { font-size: 13px; }
[data-interface=page-editor] .publication { color: #3e6047; background: #eef3e8; border: 1px solid #dce6d5; border-radius: 10px; padding: 10px 12px; font-size: 12px; margin-top: 0; }
[data-interface=page-editor] .edit-section { border-radius: 14px; margin-bottom: 12px; box-shadow: var(--ui-shadow); }
[data-interface=page-editor] .edit-section>summary { min-height: 84px; padding: 18px 20px; }
[data-interface=page-editor] .edit-section strong { font-size: 15px; }
[data-interface=page-editor] .edit-section summary small { font-size: 12px; color: var(--ui-muted); }
[data-interface=page-editor] .section-content { padding: 23px; }
[data-interface=page-editor] .optional { color: var(--ui-muted); font-size: 12px; }
[data-interface=page-editor] .quiet-info { padding: 15px 0; }
[data-interface=page-editor] .editor-actions { box-shadow: 0 -4px 20px rgb(25 47 33 / 4%); }
.ui-deposit-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--ui-line); background: #f0f4eb; border-radius: 14px; padding: 16px 18px; margin-bottom: 20px; }
.ui-deposit-status strong { font-size: 14px; }
.ui-deposit-status p { font-size: 12px; color: var(--ui-muted); margin: 4px 0 0; }
.ui-payment-setup>summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; min-height: 44px; }
.ui-payment-setup>summary strong { display: block; font-size: 16px; }
.ui-payment-setup>summary small { display: block; font-size: 13px; color: var(--ui-muted); margin-top: 5px; }
.ui-payment-setup[open]>summary>.ui-icon { transform: rotate(90deg); }
.ui-payment-setup-content { padding-top: 18px; }
[data-interface=deposits] .pay-wrap { padding-top: 32px; }
[data-interface=deposits] .pay-card { border-radius: 16px; box-shadow: var(--ui-shadow); }
[data-interface=deposits] .pay-card h2 { font-size: 19px; }
[data-interface=payment] .pay-card { box-shadow: var(--ui-shadow); }

@media (min-width: 701px) {
  [data-interface=app] .app-sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
  [data-interface=app] #app>section { min-width: 0; }
}
@media (max-width: 1100px) and (min-width: 701px) {
  [data-interface=app] .shell { grid-template-columns: 200px minmax(0,1fr); }
  [data-interface=app] .desktop-nav :is(button,a) { font-size: 13px; gap: 9px; }
  [data-interface=app] .topbar { padding-inline: 22px; }
  [data-interface=app] main { padding: 24px 22px 45px; }
}
@media (max-width: 700px) {
  [data-interface=app] .app-sidebar { display: none; }
  [data-interface=app] .shell { display: block; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  [data-interface=app] .topbar { position: sticky; top: 0; z-index: 30; min-height: 74px; height: 74px; padding: 11px 16px; box-shadow: 0 2px 12px rgb(30 52 38 / 3%); }
  [data-interface=app] .topbar>div:first-child { display: flex; }
  [data-interface=app] .topbar .actions { width: auto; flex: none; }
  [data-interface=app] .topbar-title { flex: 1; }
  [data-interface=app] .ui-business-name { max-width: 160px; font-size: 11px; }
  [data-interface=app] #sectionTitle { display: block; font-size: 16px; }
  [data-interface=app] #newBtn { font-size: 12px; padding: 10px 12px; min-height: 44px; gap: 3px; }
  .ui-mobile-logo { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; background: var(--ui-green); color: #e5efcc; border-radius: 11px; }
  .ui-mobile-logo .ui-icon { width: 22px; height: 22px; }
  [data-interface=app] .banner { padding: 9px 16px; font-size: 11px; line-height: 1.5; }
  [data-interface=app] main { padding: 23px 16px 32px; }
  [data-interface=app] h1 { font-size: 26px; letter-spacing: -.7px; }
  [data-interface=app] #overview { display: none; }
  [data-interface=app] #overview.active { display: flex; flex-direction: column; }
  [data-interface=app] #overview>.intro { order: 0; margin-bottom: 16px; }
  [data-interface=app] #overview>.quick { order: 1; }
  [data-interface=app] #overview>.grid { order: 2; display: contents; }
  [data-interface=app] #overview>.grid>.card { order: 2; }
  [data-interface=app] #overview>.stats { order: 3; margin: 18px 0; }
  [data-interface=app] #overview>.grid>.right { order: 4; display: grid; gap: 14px; }
  [data-interface=app] .intro p { font-size: 13px; margin: 7px 0 0; }
  [data-interface=app] .quick { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; margin-bottom: 18px; }
  [data-interface=app] .quick .btn { grid-column: auto; padding: 10px 8px; min-height: 44px; font-size: 12px; gap: 6px; }
  [data-interface=app] .stat { padding: 13px; }
  [data-interface=app] .stat strong { font-size: 23px; }
  [data-interface=app] .stat-top { font-size: 11px; }
  [data-interface=app] .stat small { font-size: 11px; line-height: 1.5; display: block; }
  [data-interface=app] .card-head { padding: 14px 13px; }
  [data-interface=app] .card-head h2 { font-size: 16px; }
  [data-interface=app] .date-nav { gap: 3px; }
  [data-interface=app] #monthLabel { font-size: 12px; padding: 0 3px; }
  [data-interface=app] .week { padding: 10px; }
  [data-interface=app] .day { font-size: 11px; }
  [data-interface=app] .empty { padding: 35px 16px; font-size: 13px; }
  [data-interface=app] .settings-body { padding: 20px 15px; }
  [data-interface=app] .ui-settings-content { padding: 2px 13px 16px; }
  [data-interface=app] .ui-settings-section>summary { padding: 14px 13px; }
  [data-interface=app] .mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 35; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; padding: 7px 10px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-line); background: #fff; box-shadow: 0 -3px 18px rgb(30 52 38 / 5%); }
  [data-interface=app] .mobile-nav button { min-height: 58px; padding: 6px 3px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: transparent; font-size: 11px; color: var(--ui-muted); font-weight: 600; border-radius: 10px; }
  [data-interface=app] .mobile-nav button span { display: block; width: auto; font-size: inherit; }
  [data-interface=app] .mobile-nav button.active { background: #edf3e7; color: var(--ui-green); }
  [data-interface=app] .toast { bottom: calc(91px + env(safe-area-inset-bottom)); font-size: 13px; padding: 13px 16px; }
  [data-interface=app] .ui-more-dialog { margin: auto 0 0; width: 100%; max-width: none; padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); max-height: 92dvh; border-radius: 22px 22px 0 0; }
  [data-interface=app] dialog { padding-bottom: calc(24px + env(safe-area-inset-bottom)); max-height: 92dvh; }
  [data-interface=app] .wiz { padding: 26px 20px; margin: 0; }
  [data-interface=app] .gate.tall { padding: 18px 14px 35px; }
  [data-interface=app] .wiz .logo { margin-bottom: 20px; }
  [data-interface=app] .wiz h1 { font-size: 25px; }
}
@media (max-width: 480px) {
  [data-interface=book] .wrap { padding: 16px 14px 38px; }
  [data-interface=book] .card { padding: 22px 17px; }
  [data-interface=book] .step { font-size: 22px; margin-bottom: 19px; }
  [data-interface=book] .brand { margin: 10px 0 23px; }
  [data-interface=book] .review-row { flex-direction: row; align-items: start; gap: 16px; }
  [data-interface=book] .review-row b { text-align: right; }
  [data-interface=book] .ui-booking-actions { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
  [data-interface=page-editor] .editor-wrap { padding: 25px 16px 150px; }
  [data-interface=page-editor] h1 { font-size: 28px; }
  [data-interface=page-editor] .publication { display: inline-flex; margin-top: 16px; max-width: none; }
  [data-interface=page-editor] .editor-heading { display: block; }
  [data-interface=page-editor] .edit-section>summary { padding: 17px 15px; }
  [data-interface=page-editor] .section-content { padding: 20px 16px; }
  [data-interface=page-editor] .editor-actions button { font-size: 13px; padding: 11px 9px; }
  [data-interface=page-editor] .editor-actions #saveState { font-size: 12px; }
  [data-interface=deposits] .pay-wrap { padding: 26px 16px 40px; }
  .ui-deposit-status { align-items: start; padding: 14px; gap: 10px; }
  .ui-deposit-status .pay-chip { padding: 5px 9px; font-size: 11px; }
  [data-interface=deposits] h1 { font-size: 29px; }
}
@media (max-width: 360px) {
  [data-interface=app] .ui-business-name { max-width: 110px; }
  [data-interface=app] .topbar { padding-inline: 12px; }
  [data-interface=app] .topbar-title { gap: 7px; }
  [data-interface=app] .quick .ui-icon { display: none; }
  [data-interface=app] .date-nav { flex-wrap: wrap; }
  [data-interface=app] .card-head { gap: 10px; }
  [data-interface=app] .hours-day { grid-template-columns: 39px minmax(0,1fr); gap: 8px; }
  [data-interface=app] .hours-win { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
html.ui-modal-open { overflow: hidden; }
/* If the optional step enhancer fails to load, retain the original usable
   long-form booking rather than hiding the only confirmation action. */
.ui-booking-progress { display: none; }
.ui-flow-ready .ui-booking-progress { display: block; }
.ui-booking-actions { display: block; }
.ui-booking-actions :is([data-booking-next],[data-booking-back]) { display: none; }
.ui-flow-ready .ui-booking-actions :is([data-booking-next],[data-booking-back]) { display: inline-flex; }

/* ---------------------------------------------------------------------------
   iPhone Safari fixes, found on a real device (4 Nov 2026).
   1. Date fields: Safari gives input[type=date] its own minimum width and
      ignores width:100%, so the box ran past the right edge of its card.
      Removing the native appearance makes it obey the layout like every
      other field; tapping it still opens the iPhone date wheel.
   2. Safari colours button text system blue unless told otherwise, which
      turned service names and prices blue on the booking page. :where()
      keeps this at zero specificity, so any button that sets its own colour
      (white text on green, for instance) still wins.
--------------------------------------------------------------------------- */
[data-interface] input[type=date] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; max-width: 100%; min-width: 0;
  box-sizing: border-box; background-color: #fff; color: inherit; text-align: left;
}
[data-interface] input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; }
[data-interface] input[type=date]::-webkit-datetime-edit { padding: 0; }
:where([data-interface]) :where(button) { color: inherit; }
.slotly-mark{display:inline-grid;place-items:center;vertical-align:middle;background:#275b49;color:#e7f0c9;border-radius:11px;width:36px;height:36px;margin-right:8px;position:relative;top:-3px}.slotly-mark svg{display:block}
.logo span.slotly-mark{color:#e7f0c9}

/* ---- iPhone status bar (clock, Wi-Fi, battery) ----------------------
   Pages use viewport-fit=cover, so on iPhones content can slide up under
   the status bar. Every page gets a soft frosted strip behind it, and pages
   other than the dashboard are pushed down by the same height. The
   dashboard handles this itself (business-app.css). env() is 0 on
   computers and older phones, so nothing changes there. */
body::before{content:'';position:fixed;inset:0 0 auto 0;height:env(safe-area-inset-top,0px);background:rgba(247,248,245,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:2000;pointer-events:none}
body[data-interface]:not([data-interface=app]){border-top:env(safe-area-inset-top,0px) solid transparent}