.service-choice-grid{gap:6px}
.service-choice{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:start;min-height:50px;gap:8px;padding:8px 9px;border-radius:8px}
.service-choice input{width:16px;height:16px;margin:2px 0 0}
.service-choice b{overflow-wrap:anywhere;font-size:13px;line-height:1.25}
.service-choice small{font-size:11px;line-height:1.3}
.booking-contact{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.booking-contact a{padding:4px 8px;border-radius:6px;color:var(--blue);background:#eaf2fc;font-size:11px;font-weight:600}
.booking-assignment{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;color:var(--muted);font-size:11px;font-weight:600}
.booking-assignment .select{width:auto;min-width:170px;padding:6px 8px;font-size:12px}
.panel-link{margin-left:auto}
.booking-manager-head{align-items:flex-end}
.booking-manager-head>div:first-child{margin-right:auto}
.booking-manager-head p{margin:3px 0 0}
.booking-date-tools{display:flex;align-items:flex-end;gap:7px}
.booking-date-tools label span{display:block;margin-bottom:3px;color:var(--muted);font-size:11px}
.booking-date-tools .input{width:155px;padding:6px 8px}
.booking-filters{display:flex;gap:6px;padding:10px 16px;border-bottom:1px solid var(--soft);overflow-x:auto}
.booking-filters .button{flex:0 0 auto}
.public-page[data-public-booking]{box-sizing:border-box;padding:clamp(16px,4vw,48px);background:var(--public-background)}
.public-page[data-public-booking]>.public-card{width:min(720px,100%);overflow:hidden;border:1px solid color-mix(in srgb,var(--public-text) 12%,transparent);border-radius:16px;box-shadow:0 22px 60px color-mix(in srgb,var(--public-text) 14%,transparent)}
.about-section-grid,.public-review-grid{grid-template-columns:1fr}
.reviews-section-heading{align-items:flex-start;flex-direction:column}
.review-summary{justify-content:flex-start;text-align:left}
.about-sections-editor-head{align-items:stretch;flex-direction:column}
.about-sections-editor-head .button{width:100%}
.review-editor-row{grid-template-columns:1fr}
.review-editor-row .review-rating-picker{grid-column:1;grid-row:auto}
.branding-grid{grid-template-columns:minmax(310px,.72fr) minmax(460px,1.28fr)}
.branding-preview-body{padding:14px;background:#e9edf4}
.branding-device{overflow:hidden;border:1px solid #cbd4e1;border-radius:14px;background:#fff;box-shadow:0 18px 40px #152a5e14}
.branding-device-bar{display:flex;align-items:center;gap:5px;height:32px;padding:0 10px;background:#f7f8fb;border-bottom:1px solid var(--line)}
.branding-device-bar span{width:7px;height:7px;border-radius:50%;background:#c6cfdb}
.branding-device-bar b{margin-left:5px;color:var(--muted);font-size:10px;font-weight:500}
.branding-booking-page{min-height:0;padding:13px;background:var(--public-background)}
.branding-booking-page .preview-public-card{width:100%;overflow:hidden;border:1px solid color-mix(in srgb,var(--public-text) 12%,transparent);border-radius:10px;background:var(--public-surface)}
.preview-public-hero{position:relative;overflow:hidden;min-height:126px}
.preview-public-hero .mini-banner{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.preview-public-hero .public-identity{position:relative;z-index:1}
.branding-booking-page .public-hero{padding:22px 20px}
.branding-booking-page [data-mini-logo]{display:block;width:52px;height:52px;padding:4px;border-radius:10px;background:#fff;object-fit:contain}
.branding-booking-page .public-hero .logo-letter{width:48px;height:48px;margin:0;flex:none}
.branding-booking-page .public-hero h1{font-size:23px}
.branding-booking-page .public-body{padding:20px}
.branding-booking-page .booking-intro h2{font-size:21px}
.branding-booking-page .field{margin-bottom:11px}
.branding-booking-page .field>span{font-size:11px}
.branding-booking-page .field input,.branding-booking-page .field select,.branding-booking-page .field textarea{min-height:38px;padding:7px 9px;font-size:12px;opacity:1}
.branding-booking-page .slot-button{padding:7px 4px;font-size:11px;opacity:1}
.branding-booking-page .mini-preview-button{margin-top:3px}
.branding-booking-page.hero-minimal .mini-banner{display:none}
@media(max-width:900px){.branding-grid{grid-template-columns:1fr}.branding-preview{order:-1}}
@media(max-width:640px){
  .grid.two,.grid.two>* ,.panel,.panel-body{min-width:0}
  .public-page[data-public-booking]{padding:12px}
  .public-page[data-public-booking]>.public-card{border-radius:12px}
  .topbar-inner{padding:10px 12px}
  .topbar-inner .brand img{width:31px;height:31px}
  .topbar-inner .brand small{display:none}
  .top-signout{margin-left:auto}
  .tabs{padding:0 8px;scroll-snap-type:x proximity}
  .tabs a{padding:8px 10px 10px;scroll-snap-align:start}
  .page{padding:20px 12px 82px}
  .head{margin-bottom:17px}
  .head h1{font-size:29px}
  .head p{font-size:13px}
  .grid.stats{gap:7px;margin-bottom:12px}
  .stat{padding:12px}
  .stat b{font-size:24px}
  .stat em{min-height:17px}
  .panel-head{padding:12px}
  .panel-link{width:100%;margin-left:0}
  .booking-manager-head{align-items:stretch}
  .booking-manager-head>div:first-child{width:100%;margin:0}
  .booking-date-tools{width:100%}
  .booking-date-tools label{min-width:0;flex:1}
  .booking-date-tools .input{width:100%;min-height:40px}
  .booking-date-tools .button{min-height:40px}
  .booking-filters{position:sticky;top:91px;z-index:8;padding:9px 12px;background:#fff}
  .book{padding-left:0}
  .book:before,.slot-row:before{display:none}
  .slot-time{position:static;display:flex;align-items:center;gap:8px;width:auto;margin-bottom:5px;text-align:left;font-weight:600}
  .slot-time small{font-weight:400}
  .book-card{flex-direction:column;padding:11px 12px}
  .book-card .actions{width:100%}
  .book-card .actions .button{min-height:40px;flex:1}
  .branding-preview-body{padding:8px}
  .branding-booking-page{padding:8px}
  .branding-booking-page .booking-form-grid{grid-template-columns:1fr}
  .branding-booking-page .booking-form-grid .field{grid-column:1}
  .branding-booking-page .public-body{padding:16px}
  .branding-booking-page .public-identity{align-items:flex-start;text-align:left}
  .staff-row .actions .icon-button{width:40px;height:40px;background:var(--soft)}
  .staff-booking-filters{width:100%;margin-left:0!important;overflow-x:auto}
  .availability-panel-head{align-items:stretch;flex-direction:column}
  .availability-slot-controls{width:100%;margin-left:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(92px,.65fr);gap:7px;align-items:center}
  .availability-slot-controls .select,.availability-slot-controls .input{width:100%!important;min-width:0}
  .availability-grid .day{grid-template-columns:minmax(60px,84px) 30px minmax(0,1fr);gap:6px;min-width:0;width:100%;box-sizing:border-box}
  .availability-grid .day>b,.availability-grid .hours{min-width:0}
  .availability-grid .hours{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:4px;justify-content:stretch;font-size:11px}
  .availability-grid .hours .input{width:100%;min-width:0;max-width:100%;box-sizing:border-box;padding-inline:4px;text-align:center;font-size:11px}
}
.availability-slot-controls{display:flex;align-items:center;gap:8px;min-width:0}
.availability-slot-controls .select{min-width:190px}
.availability-slot-controls .input{width:112px;min-width:0}
.staff-role-badge,.staff-alert-summary{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.staff-role-badge{color:var(--blue);font-weight:700}
.staff-reminder-note{margin-bottom:12px}
.staff-hours-modal{width:min(620px,100%)}
.staff-days .day{grid-template-columns:minmax(72px,110px) auto minmax(0,1fr);gap:8px;min-width:0;align-items:center}
.staff-days .day>b{min-width:0;overflow-wrap:anywhere}
.staff-days .day>.check-line{margin:0;white-space:nowrap}
.staff-days .day.business-closed{background:#f5f7fb;border-color:#d7deea}
.staff-days .day.business-closed .check-line{color:var(--muted)}
.staff-days .day.business-closed input:disabled{cursor:not-allowed}
.staff-days .hours{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:7px;min-width:0}
.staff-days .hours .input{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.staff-days .day.off .hours{display:block}
@media (max-width: 640px) {
  .staff-hours-modal{width:100%}
  .staff-days .day{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center}
  .staff-days .day>.hours{grid-column:1/-1;width:100%}
  .hero-actions, .install-guide-action {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .button, .install-guide-action .button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .availability-grid .day{grid-template-columns:64px 32px minmax(0,1fr);gap:6px;align-items:start}
  .availability-grid .day>b{overflow-wrap:anywhere}
  .availability-grid .hours{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:5px;align-items:center}
  .availability-grid .hours .input{width:100%;min-width:0;padding-inline:5px}
  .availability-grid .day.off .hours{display:block}
  .landing-nav { padding-inline: 14px; }
  .landing-nav-right { gap: 10px; }
  .landing-nav-right .button { display: none; }
  .landing-link { white-space: nowrap; }
}
.branding-booking-page .public-booking-step,
.branding-booking-page .branding-preview-dates,
.branding-booking-page .public-date-button{min-width:0;max-width:100%;box-sizing:border-box}
.branding-booking-page .public-booking-step>*,
.branding-booking-page .branding-preview-dates>*{min-width:0;max-width:100%}
.branding-booking-page .public-booking-step{width:100%;padding:18px 14px}
.branding-booking-page .branding-preview-dates{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
.branding-booking-page .public-date-button{width:100%;padding:7px 3px;font-size:11px;line-height:1.2;white-space:normal;overflow:hidden;overflow-wrap:anywhere;word-break:break-word}
.branding-booking-page .public-date-button b{display:block;max-width:100%;overflow:hidden;overflow-wrap:anywhere;word-break:break-word}
.availability-grid .day{grid-template-columns:minmax(0,110px) 38px minmax(0,1fr);min-width:0;width:100%;box-sizing:border-box}
.availability-grid .day>b,.availability-grid .hours{min-width:0}
.availability-grid .hours{justify-content:center;min-width:0}
.availability-grid .hours .input{max-width:100%;min-width:0;box-sizing:border-box}
@media (max-width: 640px) {
  .branding-booking-page .public-booking-step{padding:16px 10px}
  .branding-booking-page .public-date-button{padding-inline:2px;font-size:10px}
  .availability-slot-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(92px,.65fr);gap:7px}
  .availability-slot-controls .select{min-width:0}
  .availability-slot-controls .input{width:100%}
  .availability-grid .day{grid-template-columns:minmax(54px,72px) 28px minmax(0,1fr);gap:6px}
  .availability-grid .hours{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:3px;justify-content:stretch;font-size:11px}
  .availability-grid .hours .input{width:100%;padding-inline:3px;text-align:center;font-size:11px}
}
.booking-target{border-radius:12px;box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 24%,transparent);animation:booking-target-pulse 1.8s ease-out}
@keyframes booking-target-pulse{0%{box-shadow:0 0 0 5px color-mix(in srgb,var(--blue) 35%,transparent)}100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 24%,transparent)}}
