.site-header{height:76px;background:transparent;border:0}
.header-inner{justify-content:center}
.brand{font-size:19px}.brand-mark svg{width:30px;height:30px}.brand-sub{font-size:9px}
.main-content{padding:25px 0 40px;min-height:calc(100vh - 145px)}
.site-footer{height:69px;max-width:560px;font-size:12px;border:0;justify-content:center;gap:30px}
.site-footer a:hover,.site-footer a.active{color:var(--green)}
.home-menu{max-width:470px;margin:clamp(40px,12vh,120px) auto 0;display:grid;gap:18px}
.home-choice{display:flex;align-items:center;gap:22px;background:white;border:1px solid var(--line);border-radius:16px;padding:30px 28px;min-height:108px;transition:border-color .15s,background .15s}
.home-choice:hover{background:#f2f6ee;border-color:#a0b393}
.home-choice h1,.home-choice h2{font-size:23px;font-weight:550;letter-spacing:0}
.home-choice>svg{margin-left:auto;color:#99a78e;width:20px}
.home-choice .service-icon{width:50px;height:50px}
.booking-page{max-width:560px;margin:auto}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#829078;margin-bottom:21px}
.back-link svg{width:15px;height:15px;transform:rotate(180deg)}
.booking-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px;gap:12px}
.booking-heading h1{font-size:26px;letter-spacing:0;font-weight:600}
.booking-heading .price{font-size:22px;white-space:nowrap;font-weight:550}
.booking-heading .price small{font-size:11px;font-weight:400;color:var(--muted);margin-left:5px}
.booking-page .panel{padding:24px}
.booking-page .echo-options{margin-bottom:22px}
.booking-page .echo-options button{font-size:13px;padding:11px 5px}
.booking-page .echo-options small{font-size:11px}
.date-picker{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px}
.booking-page .date-picker{padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.date-picker label{font-size:13px;font-weight:500}
.date-control{display:flex;gap:6px;align-items:center}
.date-control input{font:inherit;color:var(--ink);font-size:13px;border:1px solid var(--line);border-radius:7px;padding:8px 10px;min-height:39px;background:white;max-width:165px}
.day-button{border:1px solid var(--line);border-radius:7px;width:31px;min-height:39px;font-size:20px;line-height:1;background:#fafbf8;color:#7c8c71}
.day-button:disabled{opacity:.3}
.date-label{font-size:13px;font-weight:500}
.date-trigger{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:white;font-size:15px;color:#222;white-space:nowrap}
.date-trigger:disabled{color:#a8ada6}.date-trigger svg{width:17px;height:17px}
#date-dialog{max-width:360px;width:calc(100% - 32px);padding:22px;max-height:calc(100dvh - 32px);overflow-y:auto;text-align:left}
#date-dialog .dialog-heading{margin-bottom:16px}#date-dialog .dialog-heading h2{font-size:19px}
#date-dialog .dialog-close{width:38px;height:38px}
.calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.calendar-heading strong{font-size:16px;font-weight:550;color:#222}
.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.calendar-weekdays{font-size:12px;text-align:center;color:#91958e;margin-bottom:8px}
.calendar-day{min-height:40px;padding:4px 0;font-size:15px;font-variant-numeric:tabular-nums;color:#202020;border:1px solid transparent;border-radius:8px;background:white}
.calendar-day:hover:not(:disabled){background:#f2f4ef}.calendar-day.selected{border-color:#333;background:#f2f4ef;font-weight:650}
.calendar-day:disabled{color:#b9bcb6;background:#fafbf9;cursor:not-allowed}
.calendar-legend{display:flex;justify-content:center;gap:22px;font-size:11px;margin-top:19px;color:#252525}
.calendar-legend span:last-child{color:#a6aaa0}.calendar-empty{font-size:12px;text-align:center;color:#858f7d;margin-top:12px}
.open-times{font-size:12px;color:#7b8b70;line-height:1.8;padding-bottom:19px;border-bottom:1px solid var(--line);margin-bottom:20px}
.open-times span{font-variant-numeric:tabular-nums;display:inline-block;margin-right:10px}
.time-label{font-size:13px;margin-bottom:12px;font-weight:500}
.hour-tabs{display:flex;gap:7px;overflow-x:auto;padding:0 1px 10px;margin-bottom:6px;scrollbar-width:thin}
.hour-tabs button{flex:none;padding:7px 13px;border-radius:6px;font-size:12px;border:1px solid #e6ebdf;background:#fafbf8;color:#7d8b73}
.hour-tabs button.active{color:white;background:var(--green);border-color:var(--green)}
.hour-tabs button:disabled{color:#b4bcac;background:#f6f7f3}
.minute-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.minute-grid .slot{font-size:13px;min-height:43px;padding:10px 2px}
.booking-page .slot-help{font-size:11px;margin-top:12px}
.booking-page .inline-note{font-size:12px;padding:12px 14px;margin:0 0 17px}
.booking-action{border-top:1px solid var(--line);padding-top:18px;margin-top:21px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.booking-action .chosen-time{font-size:12px;color:#87957c}
.booking-action .chosen-time strong{font-size:17px;color:var(--ink);font-weight:500;display:block}
.booking-action button{min-width:128px;padding:11px 17px;font-size:13px}
.booking-rule{font-size:12px;line-height:1.9;color:#829077;padding:16px 4px 0;margin:0}
.booking-rule span{display:block}
.suggested-action{font-size:12px;padding:7px 0;color:var(--green);text-decoration:underline;text-underline-offset:4px}
.booking-empty{text-align:center;padding:25px 8px;color:#88967d;line-height:1.9;font-size:13px}
.booking-empty p{margin:7px 0 10px;font-size:12px;color:#98a18e}
#booking-dialog{text-align:left;max-width:430px;padding:26px}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.dialog-heading h2{font-size:21px}
.dialog-close{width:28px;height:28px;display:grid;place-items:center;color:#8d9782;font-size:23px;border-radius:5px}
.dialog-close:hover{background:#f0f3ea}
.booking-recap{padding:13px 14px;background:#f2f5ed;border-radius:8px;margin-bottom:20px;font-size:12px;color:#76876b;line-height:1.9}
.booking-recap strong{color:var(--ink);font-weight:500;display:block;font-size:14px}
#booking-dialog .primary{margin-top:8px;font-size:13px;padding:12px}
#booking-dialog .field{font-size:13px}
#booking-dialog input,#booking-dialog textarea{font-size:13px}
#booking-dialog .error-message{margin:0;line-height:1.7}
.optional-note summary{font-size:12px;color:#8d987e;cursor:pointer;margin-bottom:7px}
.optional-note textarea{width:100%;border:1px solid var(--line);border-radius:7px;padding:10px;resize:vertical;min-height:65px}
.my-bookings{max-width:700px;margin:auto}.my-bookings .page-title h1{font-size:26px}
@media(max-width:680px){
  .main-content{margin:0 18px;padding:15px 0 30px;min-height:calc(100vh - 145px)}
  .site-footer{margin:0 18px;flex-direction:row;align-items:center;gap:25px;font-size:11px}
  .home-menu{margin-top:70px;gap:16px}.home-choice{padding:27px 24px;gap:18px}.home-choice h1,.home-choice h2{font-size:22px}
  .home-choice .service-icon{margin:0;width:44px;height:44px}.home-choice .service-icon svg{width:27px;height:27px}
  .booking-heading{margin-bottom:18px}.booking-heading h1{font-size:24px}.booking-heading .price{font-size:20px}
  .booking-page .panel{padding:18px}.date-picker{gap:8px}.date-control{gap:5px}.date-control input{max-width:153px;font-size:12px;padding:8px}
  .minute-grid{gap:8px}.minute-grid .slot{font-size:12px}.booking-rule{font-size:11px}.back-link{margin-bottom:16px}
  #booking-dialog{padding:23px}.booking-action{gap:9px}.booking-action button{min-width:115px}
}

/* The public booking flow uses the same narrow canvas on desktop and mobile. */
.booking-page,.home-menu,.my-bookings{max-width:430px}
.my-bookings .booking-item{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:18px}
.my-bookings .booking-item-actions{grid-column:2;display:flex;align-items:flex-start;flex-direction:column;text-align:left;gap:8px}
.my-bookings .booking-cancel-controls{justify-content:flex-start;width:100%;margin-top:0}
.my-bookings .booking-cancel-controls button{min-height:42px}
.main-content{min-height:calc(100dvh - 145px)}
.booking-mode{color:#89977d;font-size:12px;white-space:nowrap}
.range-picker{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin:4px 0 18px}
.range-picker .field{font-size:13px;gap:9px}
.range-picker select{min-height:49px;font-size:16px;padding:11px 10px;background:#fafbf8;color:#36513e}
.range-bill{padding:17px 16px;background:#f0f4e9;border:1px solid #e5ebda;border-radius:10px;min-height:98px}
.bill-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:#6f8062}
.bill-top strong{font-size:25px;font-weight:600;letter-spacing:-.5px;color:#34543e;white-space:nowrap}
.bill-top small{font-size:10px;font-weight:400;margin-left:5px;letter-spacing:0;color:#819175}
.bill-calculation{font-size:12px;color:#839277;margin-top:9px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px}
.bill-calculation span{font-size:10px}
.occurrence-list{margin-top:13px;font-size:11px;color:#839176}
.occurrence-list summary{cursor:pointer;min-height:24px}
.occurrence-list p{line-height:1.9;margin-top:8px;word-break:break-word}
.range-error{font-size:12px;color:#a45645;line-height:1.8;margin-top:14px}
.booking-page .booking-action{margin-top:18px}
.booking-page .chosen-time strong{font-size:16px;font-variant-numeric:tabular-nums}
.date-control input{font-size:16px;max-width:170px;min-height:44px;padding:8px}
.day-button{min-height:44px;width:29px}
.booking-page .echo-options button{min-height:63px}
.booking-page .primary,.booking-page .secondary{min-height:46px}
#booking-dialog{max-height:calc(100dvh - 32px);overflow-y:auto}
#booking-dialog input,#booking-dialog textarea{font-size:16px;min-height:44px}
#booking-dialog .dialog-close{width:38px;height:38px}
.payment-group{border:0;padding:0;margin:0;min-width:0}
.payment-group legend{padding:0;margin-bottom:8px;font-size:12px;font-weight:500}
.payment-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.payment-option{display:flex;align-items:center;gap:9px;min-height:46px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;cursor:pointer}
.payment-option:has(input:checked){border-color:#78915f;background:#f0f5e9;color:#315c47}
#booking-dialog .payment-option input{appearance:none;width:17px;height:17px;min-height:17px;margin:0;flex-shrink:0;border:1.5px solid #b4bfae;border-radius:4px;background:white;display:grid;place-content:center;cursor:pointer}
#booking-dialog .payment-option input:checked{background:var(--green);border-color:var(--green)}
#booking-dialog .payment-option input:checked::after{content:"";width:4px;height:8px;border:solid white;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.payment-summary{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--muted);background:#f4f6f0;border-radius:8px;padding:11px 12px}
.payment-summary strong{font-weight:600;color:var(--ink);font-size:14px}
.payment-summary small{flex-basis:100%;font-size:11px}
.booking-note{white-space:pre-wrap}
.remembered-details{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;margin-top:-5px}
.remembered-details span{flex:1}
.remembered-details .ghost{flex-shrink:0;padding:6px 8px;font-size:11px}
.remembered-details .ghost:disabled{opacity:.45}
.booking-item-actions .booking-payment-amount{font-size:14px}
.my-booking-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.my-booking-heading button{white-space:nowrap}
.booking-visibility{display:flex;flex-wrap:wrap;gap:4px 20px;margin-bottom:10px;font-size:13px}
.booking-visibility label{display:inline-flex;align-items:center;gap:8px;min-height:40px;cursor:pointer}
.booking-visibility input{width:16px;height:16px;margin:0;accent-color:var(--green);cursor:pointer}
.my-booking-help{font-size:12px;color:var(--muted);margin-bottom:18px}
.booking-cancel-controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:8px}
.booking-item-actions .booking-cancel-controls button{margin:0;min-height:38px}
.cancel-booking-hint,.booking-started-note{display:block;font-size:11px;color:var(--muted);flex-basis:100%;text-align:left}
.booking-started-note{margin-top:8px}
.booking-cancel-controls .secondary:disabled{opacity:.45;cursor:not-allowed}
.change-original{display:grid;gap:5px;margin:-8px 0 18px;font-size:12px;color:var(--muted)}
.change-original strong{font-size:14px;font-weight:500;color:var(--ink)}
.change-summary{display:grid;gap:12px;margin:0 0 18px;font-size:13px}
.change-summary>div{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.change-summary span{color:var(--muted);white-space:nowrap}
.change-summary strong{font-weight:500;text-align:right}
.change-summary p{margin:0;font-size:11px;text-align:right}
@media(max-width:680px){.booking-item-actions:has(.booking-cancel-controls),.booking-item-actions:has(.booking-started-note){flex-wrap:wrap;gap:8px}.booking-cancel-controls{flex-basis:100%;justify-content:flex-start}}
.booking-recap{line-height:1.9}
.booking-item h3{flex-wrap:wrap}
.booking-item p{overflow-wrap:anywhere}
.site-footer{padding-bottom:env(safe-area-inset-bottom,0px)}
@media(max-width:680px){
  .main-content{margin-left:16px;margin-right:16px}
  .site-header{height:69px}.main-content{min-height:calc(100dvh - 138px)}
  .booking-page .panel{padding:18px 16px}.booking-heading{margin-bottom:18px}
  .date-picker{flex-wrap:wrap;gap:9px}.date-control{margin-left:auto}.date-control input{font-size:16px;max-width:160px}
  .range-picker{gap:12px}.range-picker select{font-size:16px}
  .booking-page .booking-rule{font-size:11px;padding-top:13px}
  .bill-top{font-size:12px}.bill-top strong{font-size:24px}
  .my-bookings .booking-item{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:16px}
}
@media(max-width:360px){
  .main-content{margin-left:12px;margin-right:12px}.booking-page .panel{padding:16px 13px}
  .date-picker{display:block}.date-control{margin-top:9px;justify-content:space-between}.date-control input{max-width:none;flex:1}
  .date-trigger{flex:1}#date-dialog{padding:18px}.calendar-weekdays,.calendar-days{gap:3px}
  .range-picker{gap:9px}.bill-top{flex-wrap:wrap}.booking-action .chosen-time strong{font-size:15px}
  .booking-action button{min-width:105px}.booking-heading h1{font-size:22px}
}