/* One home-service booking frame. Load after the existing native checkout styles. */
.ub-page {
  --ub-blue: var(--platform-primary, #0667ff);
  --ub-blue-dark: var(--platform-primary-dark, #0050cb);
  --ub-ink: var(--platform-ink, #081538);
  --ub-muted: var(--platform-muted, #59677e);
  --ub-soft: var(--platform-soft, #eef6ff);
  --ub-line: var(--platform-line, #dde7f5);
  --ink: var(--ub-ink);
  --ink-soft: var(--ub-muted);
  --ink-faint: var(--ub-muted);
  --navy: var(--ub-ink);
  --paper: #fff;
  --sand: #f7faff;
  --line: var(--ub-line);
  --line-strong: #bdcde3;
  --juno-green: var(--ub-blue);
  --juno-green-dark: var(--ub-blue-dark);
  --juno-green-deep: #0044ad;
  --juno-green-tint: var(--ub-soft);
  --font-display: 'Manrope', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;
  --shadow-green: 0 3px 10px #0667ff14;
  margin: 0;
  background: #fff;
  color: var(--ub-ink);
  font: 400 15px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.ub-page *, .ub-page *::before, .ub-page *::after { box-sizing: border-box; }
.ub-page [hidden] { display: none !important; }
.ub-page:not([data-booking-mode="native"]) #ub-native,
.ub-page:not([data-booking-mode="native"]) #cartBar,
.ub-page:not([data-booking-mode="native"]) #summarySheet,
.ub-page:not([data-booking-mode="native"]) #sheetBackdrop { display: none !important; }
/* A transform alone leaves the closed drawer painted offscreen and tabbable. */
.ub-page #summarySheet:not(.is-open) { visibility: hidden; pointer-events: none; }
.ub-page button, .ub-page input, .ub-page select, .ub-page textarea { font: inherit; }
.ub-page button, .ub-page a, .ub-page input, .ub-page select { -webkit-tap-highlight-color: transparent; }
.ub-page button { cursor: pointer; }
.ub-page button:disabled { cursor: not-allowed; }
.ub-page img { max-width: 100%; }
.ub-page :is(h1,h2,h3,h4) { color: var(--ub-ink); font-family: var(--font-display); letter-spacing: -.035em; }
.ub-page :is(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid #80b1ff; outline-offset: 3px; }
.ub-page :is(button,input,select,textarea) { accent-color: var(--ub-blue); }
.ub-shell { width: min(1080px, calc(100% - 48px)); margin-inline: auto; }
.ub-header { border-bottom: 1px solid var(--ub-line); background: #fff; }
.ub-header > .ub-shell { min-height: 84px; display: flex; align-items: center; gap: 28px; }
.ub-brand { display: inline-flex; flex: 0 0 auto; align-items: center; }
.ub-brand img { display: block; width: 166px; height: auto; }
.ub-header-label { color: var(--ub-muted); font-size: 13px; border-left: 1px solid var(--ub-line); padding-left: 28px; }
.ub-header nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.ub-header nav a, .ub-header nav button { color: var(--ub-ink); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.ub-header nav button { background: transparent; border: 0; padding: 8px 0; }
.ub-header nav a { padding: 8px 0; }
.ub-header nav :is(a,button):hover { color: var(--ub-blue); }
#universal-booking { padding-top: 35px; padding-bottom: 40px; }
.ub-progress { counter-reset: ub-step; list-style: none; padding: 0 0 26px; margin: 0 0 35px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; border-bottom: 1px solid var(--ub-line); }
.ub-progress li { min-width: 0; display: flex; gap: 10px; align-items: center; color: #6a7890; font-size: 12px; font-weight: 500; line-height: 1.35; }
.ub-progress li::before { content: attr(data-ub-stage); width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border: 1px solid #d4deed; background: #fff; border-radius: 50%; color: #6a7890; font-size: 11px; font-weight: 600; }
.ub-progress li.is-current { color: var(--ub-ink); font-weight: 600; }
.ub-progress li.is-current::before { background: var(--ub-blue); border-color: var(--ub-blue); color: #fff; }
.ub-progress li.is-done { color: var(--ub-blue-dark); }
.ub-progress li.is-done::before { content: '✓'; color: var(--ub-blue); border-color: #c6dcff; background: var(--ub-soft); }
.ub-heading { max-width: 740px; margin-bottom: 28px; }
.ub-heading-copy { min-width: 0; overflow-wrap: anywhere; }
.ub-selected-media { display: none; margin: 0; }
[data-booking-mode="overview"] .ub-heading { display: grid; grid-template-columns: minmax(0,1fr) 112px; gap: 24px; align-items: center; max-width: none; }
[data-booking-mode="overview"] .ub-heading .ub-eyebrow { display: none; }
[data-booking-mode="overview"] .ub-selected-media { display: block; }
.ub-selected-media figcaption { overflow-wrap: anywhere; margin-top: 6px; color: var(--ub-muted); font-size: 10px; line-height: 1.4; text-align: center; }
.ub-heading h1 { margin: 0 0 10px; font-size: clamp(30px,3.2vw,40px); line-height: 1.17; font-weight: 750; letter-spacing: -.045em; text-wrap: balance; }
.ub-heading p { max-width: 66ch; margin: 0; color: var(--ub-muted); font-size: 15px; line-height: 1.65; }
#ub-message { padding: 13px 16px; margin: 0 0 22px; border-radius: 8px; border: 1px solid #c8ddfa; color: #204c83; background: var(--ub-soft); font-size: 13px; }
#ub-message:empty { display: none; }
#ub-message.is-error { background: #fff4f2; color: #8b332b; border-color: #f0c9c4; }
.ub-picker-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
#ub-back { display: inline-flex; gap: 7px; align-items: center; border: 0; padding: 10px 0; color: var(--ub-blue); background: transparent; font-size: 13px; font-weight: 600; flex-shrink: 0; }
#ub-back svg { width: 17px; height: 17px; }
#ub-search { width: 100%; max-width: 520px; height: 49px; border: 1px solid #c6d4e7; border-radius: 8px; padding: 12px 15px; background: #fff; color: var(--ub-ink); font-size: 16px; appearance: none; }
#ub-search::placeholder { color: #7b889c; opacity: 1; }
.ub-category-grid, .ub-group-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.ub-category, .ub-group-card { position: relative; min-width: 0; min-height: 136px; display: flex; flex-direction: column; align-items: flex-start; padding: 20px; border: 1px solid var(--ub-line); border-radius: 10px; color: var(--ub-ink); background: #fff; text-align: left; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.ub-category:hover, .ub-group-card:hover, .ub-service-row:hover { background: #f8fbff; border-color: #99bffc; }
.ub-category:focus-visible, .ub-group-card:focus-visible, .ub-service-row:focus-visible { border-color: var(--ub-blue); box-shadow: 0 0 0 1px var(--ub-blue); }
.ub-category-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 13px; border-radius: 9px; color: var(--ub-blue); background: var(--ub-soft); }
.ub-category-icon :is(svg,img) { display: block; width: 33px; height: 33px; object-fit: contain; }
.ub-category > svg, .ub-group-card > svg { width: 36px; height: 36px; color: var(--ub-blue); margin-bottom: 14px; }
:is(.ub-category,.ub-group-card) strong { display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 16px; line-height: 1.3; font-weight: 700; }
:is(.ub-category,.ub-group-card) small { display: block; color: var(--ub-muted); font-size: 12px; line-height: 1.5; }
.ub-group-card { min-height: 112px; }
.ub-service-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.ub-service-row { min-width: 0; width: 100%; display: flex; align-items: center; gap: 15px; padding: 15px; border: 1px solid var(--ub-line); border-radius: 10px; background: #fff; color: var(--ub-ink); text-align: left; transition: border-color .15s, background-color .15s; }
.ub-thumb { display: grid; place-items: center; flex: 0 0 62px; width: 62px; height: 62px; overflow: hidden; border-radius: 8px; background: var(--ub-soft); color: var(--ub-blue); }
.ub-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ub-thumb svg { width: 43px; height: 43px; }
.ub-service-row > span:not(.ub-thumb):not(.ub-row-arrow) { min-width: 0; flex: 1; }
.ub-service-row strong { display: block; margin-bottom: 5px; font-family: var(--font-display); font-size: 15px; line-height: 1.35; font-weight: 700; }
.ub-service-row small { display: block; color: var(--ub-muted); font-size: 12px; line-height: 1.5; }
.ub-row-arrow { flex: 0 0 17px; color: var(--ub-blue); font-size: 20px; }
.ub-row-arrow svg { display: block; width: 17px; height: 17px; }
#ub-empty { padding: 34px 22px; border: 1px dashed #c4d4ea; border-radius: 10px; background: #f8fbff; text-align: center; color: var(--ub-muted); }
.ub-overview-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 30px; align-items: start; }
.ub-overview-grid > * { min-width: 0; }
.ub-problem { border: 1px solid var(--ub-line); border-radius: 12px; overflow: hidden; background: #fff; }
.ub-problem-visual { min-width: 0; aspect-ratio: 1; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #f1f7ff; color: var(--ub-blue); }
.ub-problem-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ub-problem-visual > svg { width: 60%; height: 60%; }
.ub-overview-copy { padding: 20px; border-top: 1px solid var(--ub-line); }
.ub-overview-support > h2 { margin: 4px 0 20px; font-size: 20px; line-height: 1.3; }
.ub-overview-support > .ub-problem { margin-top: 26px; }
.ub-problem > summary { padding: 16px 20px; min-height: 52px; cursor: pointer; color: var(--ub-ink); font-size: 14px; font-weight: 600; }
.ub-problem > summary::marker { color: var(--ub-blue); }
.ub-problem > summary:focus-visible { outline-offset: -4px; }
.ub-overview-copy h2 { margin: 0 0 12px; font-size: 24px; line-height: 1.25; font-weight: 700; }
.ub-overview-copy p { margin: 0 0 16px; font-size: 14px; color: var(--ub-muted); }
.ub-overview-copy h3 { margin: 22px 0 11px; font-size: 16px; font-weight: 700; }
.ub-signs { padding: 0; margin: 0; list-style: none; display: grid; gap: 10px; }
.ub-signs li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.6; color: var(--ub-muted); }
.ub-signs li::before { content: '✓'; position: absolute; left: 0; top: 1px; color: var(--ub-blue); font-weight: 600; }
.ub-plan { padding: 24px; border: 1px solid #d4e5fc; border-radius: 12px; background: var(--ub-soft); }
.ub-eyebrow { margin: 0 0 10px; color: var(--ub-blue-dark); font-size: 11px; font-weight: 600; letter-spacing: .035em; }
.ub-plan h2 { margin: 0 0 6px; font-size: 23px; line-height: 1.25; font-weight: 700; }
.ub-plan > p:not(.ub-eyebrow) { margin: 0 0 20px; font-size: 13px; color: var(--ub-muted); }
.ub-location-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.8fr); gap: 12px; margin-top: 16px; }
.ub-location-field > label { display: block; min-width: 0; color: var(--ub-ink); font-size: 12px; font-weight: 500; }
.ub-location-grid :is(input,select) { display: block; width: 100%; min-height: 48px; height: auto; min-width: 0; margin-top: 8px; padding: 11px 12px; border: 1px solid #b5cbed; border-radius: 8px; background: #fff; color: var(--ub-ink); font-size: 16px; line-height: 1.3; }
.ub-location-grid :is(input,select):disabled { background: #f8fbff; color: #7888a1; opacity: 1; }
#ub-location-status { min-height: 20px; margin: 9px 0 14px; color: var(--ub-muted); font-size: 11px; line-height: 1.5; }
.ub-primary { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 49px; padding: 13px 20px; border: 1px solid var(--ub-blue); border-radius: 8px; background: var(--ub-blue); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none; transition: background-color .15s; }
.ub-primary:hover { background: var(--ub-blue-dark); border-color: var(--ub-blue-dark); }
.ub-primary:disabled { background: #b7ceef; border-color: #b7ceef; color: #344f73; }
.ub-primary svg { width: 18px; height: 18px; flex-shrink: 0; }
#ub-continue { width: 100%; }
#ub-path-note { margin: 12px 0 0; font-size: 12px; line-height: 1.6; }
.ub-note { margin: 13px 0 0; color: var(--ub-muted); font-size: 11px; line-height: 1.6; }
.ub-next-list { list-style: none; counter-reset: ub-next; margin: 0; padding: 0; display: grid; gap: 14px; }
.ub-next-list li { position: relative; min-height: 26px; padding-left: 35px; color: var(--ub-muted); font-size: 12px; line-height: 1.5; }
.ub-next-list li::before { counter-increment: ub-next; content: counter(ub-next); position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #c3d9f9; border-radius: 50%; background: #fff; color: var(--ub-blue); font-size: 10px; font-weight: 600; }
.ub-next-list strong { display: block; margin-bottom: 2px; color: var(--ub-ink); font-size: 12px; }
.ub-flow-banner { display: flex; align-items: center; gap: 15px; padding: 16px 18px; border: 1px solid var(--ub-line); border-radius: 10px; background: #f8fbff; margin: 0 0 8px; }
.ub-flow-banner > :is(img,svg,picture), .ub-flow-banner .ub-thumb { width: 48px; height: 48px; flex: 0 0 48px; object-fit: cover; border-radius: 7px; color: var(--ub-blue); }
.ub-flow-banner picture img { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: 7px; }
.ub-flow-banner > div { min-width: 0; flex: 1; }
.ub-flow-banner small { display: block; margin-bottom: 3px; color: var(--ub-muted); font-size: 11px; }
.ub-flow-banner strong { display: block; color: var(--ub-ink); font-family: var(--font-display); font-size: 16px; line-height: 1.35; font-weight: 700; }
.ub-flow-banner button { padding: 8px 0; border: 0; background: transparent; color: var(--ub-blue); font-size: 12px; font-weight: 500; }
#ub-trade-host { min-width: 0; margin-top: 25px; }
.ub-footer { width: min(1080px,calc(100% - 48px)); margin: 30px auto 0; padding: 24px 0 28px; border-top: 1px solid var(--ub-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; color: var(--ub-muted); font-size: 11px; }
.ub-footer p { margin: 0; }
.ub-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.ub-footer a { color: var(--ub-muted); text-decoration: none; }
.ub-footer a:hover { color: var(--ub-blue); }
/* Native pricing, payment and validation remain owned by the existing checkout. */
.ub-page .book-steps-area { display: none !important; }
.ub-page #ub-native { width: min(1080px,calc(100% - 48px)); margin-inline: auto; grid-template-columns: minmax(0,1fr) 330px; grid-template-areas: 'panel summary' 'nav summary'; gap: 0 28px; padding: 0 0 50px; }
.ub-page[data-booking-mode="native"] #universal-booking { padding-bottom: 24px; }
.ub-page .book-panel { padding: 27px; border: 1px solid var(--ub-line); border-radius: 12px; background: #fff; }
.ub-page .book-aside { position: sticky; top: 22px; }
.ub-page .book-aside .summary { padding: 24px; border: 1px solid var(--ub-line); border-radius: 12px; background: #f8fbff; box-shadow: none; }
.ub-page .step__title { font-size: 24px; line-height: 1.3; font-weight: 700; }
.ub-page .step__sub { font-size: 13px; color: var(--ub-muted); margin-bottom: 25px; }
.ub-page .book-nav { margin-top: 22px; }
.ub-page :is(.btn,.chip,.time-chip,.icon-tile,.pay-tile,.vo) { border-radius: 8px; }
.ub-page :is(.btn--primary,.time-chip.is-active,.chip.is-active,.day-chip.is-active) { background: var(--ub-blue); border-color: var(--ub-blue); color: #fff; }
.ub-page .btn--primary:hover { background: var(--ub-blue-dark); border-color: var(--ub-blue-dark); }
.ub-page :is(.input,.select,.textarea) { max-width: 100%; min-width: 0; background-color: #fff; border-color: #bdcde3; border-radius: 8px; font-size: 16px; }
.ub-page .opt-row__label { font-size: 15px; }
.ub-page .opt-row__hint { font-size: 12px; }
.ub-page .icon-tile { background: #fff; border-color: var(--ub-line); }
.ub-page .icon-tile.is-selected, .ub-page .pay-tile.is-active { background: var(--ub-soft); border-color: var(--ub-blue); }
.ub-page .day-chip { border-radius: 9px; }
.ub-page .day-chip__dot { background: var(--ub-blue); }
.ub-page .day-chip__tag { color: var(--ub-blue-dark); background: var(--ub-soft); }
.ub-page .day-chip.is-active .day-chip__tag { background: #ffffff2b; color: #fff; }
.ub-page .day-chip--amber .day-chip__dot { background: #c98113; }
.ub-page .day-chip--red .day-chip__dot { background: #c34e41; }
.ub-page .vo__input:checked + .vo__box { background: var(--ub-blue); border-color: var(--ub-blue); }
.ub-page .credits-box, .ub-page .freq-note { border-color: #c4d9f7; }
.ub-page .sum-reward__why { color: var(--ub-blue-dark); }
/* A legible total and a separate action share the same compact booking bar. */
.ub-page .cart-bar { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; padding: 12px; border: 1px solid var(--ub-line); border-radius: 16px; background: #fff; color: var(--ub-ink); box-shadow: 0 8px 32px #08153824; }
.ub-page .cart-bar__meta { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; line-height: 1.35; }
.ub-page .cart-bar__caption { display: block; color: var(--ub-muted); font-size: 11px; }
.ub-page #cartMetaText { display: block; font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ub-page .cart-bar__meta small { margin-top: 2px; color: var(--ub-muted); font-size: 10px; }
.ub-page .cart-bar .btn { min-width: 0; min-height: 48px; height: 100%; padding: 12px 10px; white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.35; }
@media (min-width: 881px) { .ub-page .cart-bar { display: none; } }
.ub-page .sheet { border-radius: 16px 16px 0 0; }
.ub-page .terms-note { font-size: 11px; }
.ub-page .terms-note a { color: var(--ub-blue-dark); }
@media (max-width: 880px) {
  .ub-overview-grid { gap: 20px; }
  .ub-plan { padding: 24px; }
  .ub-overview-copy { padding: 23px; }
  .ub-page #ub-native { grid-template-columns: minmax(0,1fr); grid-template-areas: 'panel' 'nav'; padding-bottom: calc(var(--ub-cart-height,96px) + 36px + env(safe-area-inset-bottom,0px)); }
  .ub-page .book-aside { display: none; }
  .ub-page[data-booking-mode="native"] .ub-footer { padding-bottom: calc(var(--ub-cart-height,96px) + 36px + env(safe-area-inset-bottom,0px)); }
}
@media (max-width: 680px) {
  .ub-shell { width: calc(100% - 40px); }
  .ub-header > .ub-shell { min-height: 72px; gap: 8px 16px; flex-wrap: wrap; padding-block: 10px; }
  .ub-brand img { width: 144px; }
  .ub-header-label { display: none; }
  .ub-header nav { gap: 4px 14px; flex-wrap: wrap; max-width: 100%; }
  .ub-header nav :is(a,button) { font-size: 12px; }
  #universal-booking { padding-top: 25px; padding-bottom: 28px; }
  .ub-progress { gap: 12px; margin-bottom: 27px; padding-bottom: 22px; }
  .ub-progress li { flex-direction: column; align-items: flex-start; gap: 7px; font-size: 10px; }
  .ub-progress li::before { width: 25px; height: 25px; flex-basis: 25px; font-size: 10px; }
  .ub-heading { margin-bottom: 24px; }
  .ub-heading h1 { font-size: 31px; line-height: 1.2; }
  .ub-heading p { font-size: 13px; }
  .ub-category-grid, .ub-group-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
  .ub-category, .ub-group-card { padding: 16px; min-height: 132px; }
  .ub-category-icon { width: 39px; height: 39px; margin-bottom: 11px; }
  .ub-category-icon :is(svg,img) { width: 29px; height: 29px; }
  :is(.ub-category,.ub-group-card) strong { font-size: 14px; }
  :is(.ub-category,.ub-group-card) small { font-size: 11px; }
  .ub-service-list { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .ub-service-row { padding: 13px; gap: 12px; }
  .ub-thumb { width: 53px; height: 53px; flex-basis: 53px; }
  .ub-thumb svg { width: 36px; height: 36px; }
  .ub-service-row strong { font-size: 14px; }
  .ub-service-row small { font-size: 11px; }
  .ub-overview-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }

  .ub-overview-copy { padding: 21px; }
  .ub-overview-copy h2 { font-size: 22px; }
  .ub-overview-copy p { font-size: 13px; }
  .ub-plan { padding: 22px; }
  .ub-plan h2 { font-size: 24px; }
  .ub-flow-banner { flex-wrap: wrap; gap: 10px 12px; padding: 14px; }
  .ub-flow-banner > div { flex-basis: calc(100% - 70px); }
  .ub-flow-banner strong { font-size: 15px; }
  .ub-flow-banner button { font-size: 11px; }
  .ub-flow-banner #ub-edit-service { margin-left: 60px; }
  .ub-page #ub-native { width: calc(100% - 40px); }
  .ub-page .book-panel { padding: 21px; }
  .ub-page .step__title { font-size: 22px; }
  .ub-page .step__sub { font-size: 12px; }
  .ub-page .addon-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ub-page .cart-bar { padding-bottom: max(12px,env(safe-area-inset-bottom)); }
  .ub-footer { width: calc(100% - 40px); margin-top: 20px; padding-top: 21px; font-size: 10px; }
}
@media (max-width: 360px) {
  .ub-brand img { width: 126px; }
  .ub-header > .ub-shell { gap: 10px; }
  .ub-header nav { gap: 10px; }
  .ub-header nav :is(a,button) { font-size: 11px; }
  .ub-progress { gap: 8px; }
  .ub-progress li { font-size: 9px; }
  .ub-heading h1 { font-size: 28px; }
  .ub-category, .ub-group-card { padding: 13px; }
  .ub-picker-toolbar { flex-wrap: wrap; gap: 9px; }
  #ub-search { flex-basis: 100%; }
  .ub-service-row { padding: 11px; gap: 10px; }
  .ub-thumb { width: 45px; height: 45px; flex-basis: 45px; }
  .ub-thumb svg { width: 32px; height: 32px; }
  .ub-service-row strong { font-size: 13px; }
  .ub-service-row small { font-size: 10px; }
  .ub-plan, .ub-overview-copy { padding: 18px; }
  .ub-location-grid { grid-template-columns: minmax(0,1fr); }
  .ub-location-grid :is(input,select) { margin-top: 6px; }
  .ub-page .book-panel { padding: 17px; }
  .ub-page .chip-group { gap: 7px; }
  .ub-page .chip { font-size: 12px; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ub-page *, .ub-page *::before, .ub-page *::after { scroll-behavior: auto !important; transition: none !important; }
}
/* Integrated markup polish: focus stays accessible without outlining a static title. */
#ub-title:focus { outline: none; }
.ub-heading .ub-eyebrow { margin: 0 0 10px; color: var(--ub-blue-dark); font-size: 10px; font-weight: 600; letter-spacing: .07em; }
.ub-signs li > span[aria-hidden="true"] { display: none; }
.ub-overview-copy .ub-note, .ub-plan > .ub-note, .ub-plan .ub-note { margin-top: 14px; color: var(--ub-muted); font-size: 11px; line-height: 1.6; }
#ub-service-details { display: inline-flex; margin-top: 16px; color: var(--ub-blue-dark); font-size: 12px; text-decoration: none; }
#ub-service-details:hover { text-decoration: underline; text-underline-offset: 3px; }
.ub-group-card > .ub-thumb { margin-bottom: 13px; width: 64px; height: 52px; flex-basis: 52px; }
:is(.ub-category,.ub-group-card) > .ub-row-arrow { position: absolute; right: 18px; bottom: 16px; }
.ub-category, .ub-group-card { padding-bottom: 32px; }
.ub-flow-banner > .ub-flow-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 19px; }
.ub-page #ub-trade-host .ut-form { padding: 28px; border-radius: 12px; }
.ub-page #ub-trade-host .ut-head { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ub-page #ub-trade-host :is(.ut-step,.ut-actions,.ut-error) { max-width: 760px; margin-inline: auto; }
.ub-page #ub-trade-host :is(.ut-day,.ut-button-primary,.ut-button-secondary,.ut-review,.ut-notice) { border-radius: 8px; }
.ub-page #ub-trade-host .ut-field { font-size: 13px; font-weight: 600; }
@media(max-width:680px) {
  [data-booking-mode="overview"] .ub-heading { grid-template-columns: minmax(0,1fr) 80px; gap: 16px; margin-bottom: 22px; }
  [data-booking-mode="overview"] .ub-heading h1 { font-size: 28px; }
  [data-booking-mode="overview"] .ub-heading p { font-size: 13px; }
  .ub-overview-support > h2 { margin-top: 0; }
  .ub-flow-banner > .ub-flow-actions { flex-basis: 100%; padding-left: 60px; gap: 17px; }
  .ub-flow-banner #ub-edit-service { margin-left: 0; }
  .ub-page #ub-trade-host .ut-form { padding: 22px; }
}
@media(max-width:360px) {
  [data-booking-mode="overview"] .ub-heading { grid-template-columns: minmax(0,1fr) 64px; gap: 14px; }
  [data-booking-mode="overview"] .ub-heading h1 { font-size: 26px; }
  .ub-selected-media figcaption { font-size: 9px; }
  .ub-page #ub-trade-host .ut-form { padding: 17px; }
  .ub-flow-banner > .ub-flow-actions { padding-left: 0; gap: 15px; }
}

/* A landing-page preference is a reminder, never a preselected calendar slot. */
.ub-page .ub-native-preference { margin: 18px 0 24px; padding: 16px 18px; border: 1px solid var(--platform-line,#dde7f5); border-radius: 12px; background: var(--platform-soft,#eef6ff); color: #344b70; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.ub-page .ub-native-preference[hidden] { display: none; }

/* Request continuity: the safe action receives focus when the modal opens. */
.ub-leave-dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--ub-line,#dde7f5);border-radius:18px;padding:30px;color:#081538;background:white;box-shadow:0 24px 90px #08153830}
.ub-leave-dialog::backdrop{background:#08153880;backdrop-filter:blur(3px)}
.ub-leave-dialog h2{font-family:var(--platform-font-display,Manrope),sans-serif;font-size:26px;line-height:1.2;letter-spacing:-.035em;margin:12px 0 18px}
.ub-leave-dialog #ub-leave-copy{font-size:14px;line-height:1.75;color:#59677e;white-space:normal}
.ub-leave-actions{display:grid;gap:10px;margin-top:24px}.ub-leave-actions .ub-primary{margin:0;width:100%;min-height:48px;justify-content:center}
.ub-leave-secondary{border:1px solid #c7d4e8;border-radius:8px;padding:13px 17px;min-height:46px;background:white;color:#334764;font-weight:650;font-size:13px;cursor:pointer}
.ub-leave-dialog button:focus-visible{outline:3px solid #82b0f5;outline-offset:3px}
@media(max-width:480px){.ub-leave-dialog{padding:23px}.ub-leave-dialog h2{font-size:23px}.ub-leave-dialog #ub-leave-copy{font-size:13px}.ub-leave-actions button{font-size:13px}}

/* Informational native toasts must not intercept checkout or drawer controls. */
.ub-page .toast[role="status"] { pointer-events: none; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.ub-page .toast[role="status"].is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
@media (max-width: 880px) {
  .ub-page[data-booking-mode="native"] .toast[role="status"] { bottom: calc(var(--ub-cart-height,96px) + 24px + env(safe-area-inset-bottom,0px)); width: max-content; max-width: calc(100vw - 40px); padding: 12px 16px; font-size: 13px; }
}
.ub-page:has(#summarySheet.is-open) .toast[role="status"] { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .ub-page .toast[role="status"] { transition: none; } }

/* Keep result announcements mounted without moving focus while typing. */
.ub-search-status{margin:0;color:#53627b;font-size:13px;line-height:1.6}
.ub-search-status:not(:empty){margin:14px 0}

/* Consistent recovery and location guidance, without replacing the chosen job. */
.ub-location-field{min-width:0}
.ub-page .ub-field-error{color:#9c3029;font-size:13px;line-height:1.5;margin:8px 0 0;overflow-wrap:anywhere}
.ub-location-grid [aria-invalid=true]{border-color:#bc4941;background:#fffafa}
.ub-page .ub-retry{border:1px solid var(--ub-blue);background:white;color:var(--ub-blue);border-radius:10px;padding:12px 18px;min-height:48px;font:700 14px var(--platform-font-body,Inter),sans-serif;cursor:pointer;margin:0 0 24px}
.ub-page .ub-retry:disabled{opacity:.6;cursor:wait}
.ub-page .ub-retry:focus-visible{outline:3px solid #b4d5ff;outline-offset:3px}
.calendar-recovery{padding:16px;border:1px solid #dde7f5;border-radius:12px;background:#f7faff;white-space:normal;flex:1 1 100%;min-width:0;max-width:100%;box-sizing:border-box}
.calendar-recovery p{margin:0 0 12px;font-size:14px;line-height:1.6}