.booking-topic-picker{margin-top:24px}
.booking-topic-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.booking-topic-options button{min-width:0;border:1.5px solid #ddd0dd;background:#fff;color:#3a2c3e;cursor:pointer;border-radius:10px;min-height:68px;padding:12px 7px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:19px;transition:background .18s,border-color .18s}
.booking-topic-options button span{font-size:14px;font-weight:800}
.booking-topic-options button.selected{background:#f1e4f5;border-color:#7a4989;color:#542362;box-shadow:inset 0 0 0 1px #7a4989}
.booking-subtopic-panel{margin-top:18px;background:#f9f6f9;border:1px solid #e6dce6;border-radius:12px;padding:19px}
.booking-subtopic-title{font-size:15px;font-weight:800;color:#34253a}
.booking-subtopic-panel>p{color:#6e6170;font-size:13px;line-height:1.7;margin:5px 0 12px}
.booking-subtopic-options{display:grid;grid-template-columns:1fr;gap:8px}
.booking-subtopic-options button{width:100%;border:1px solid #ded3df;background:#fff;color:#342938;border-radius:9px;text-align:left;cursor:pointer;padding:11px 13px;display:flex;align-items:center;gap:12px;min-height:48px}
.booking-subtopic-options button strong{font-size:12px;color:#826289;min-width:25px}
.booking-subtopic-options button span{font-size:14px;line-height:1.5;word-break:keep-all}
.booking-subtopic-options button.selected{background:#efe1f4;border-color:#865492;box-shadow:inset 0 0 0 1px #865492}
.booking-subtopic-options button.selected strong{color:#542362}
.booking-topic-options button:focus-visible,.booking-subtopic-options button:focus-visible{outline:3px solid #bb8fca;outline-offset:2px}
@media(max-width:560px){.booking-topic-options{grid-template-columns:repeat(2,minmax(0,1fr))}.booking-topic-options button{min-height:60px}.booking-subtopic-panel{padding:14px}.booking-subtopic-options button{padding:10px}}


/* Compact reservation step; keeps all options visible without nested scrolling. */
#booking .wizard-body{padding:24px clamp(14px,2vw,28px) 20px}
#booking .wizard-step[data-step="1"] .wizard-head{margin-bottom:15px}
#booking .wizard-step[data-step="1"] .wizard-head h3{margin-bottom:5px}
#booking .wizard-step[data-step="1"] .channel-select{margin-bottom:15px}
#booking .wizard-step[data-step="1"] .channel-options button{min-height:72px;padding:9px 10px;gap:3px}
#booking .wizard-step[data-step="1"] .channel-options button .channel-icon{font-size:21px}
#booking .wizard-step[data-step="1"] .channel-options button b{font-size:15px}
#booking .wizard-step[data-step="1"] .channel-options button small{font-size:11px}
#booking .wizard-step[data-step="1"] .service-title{margin:0 0 8px;font-size:15px}
#booking .wizard-step[data-step="1"] .service-cards{gap:8px;margin-bottom:13px}
#booking .wizard-step[data-step="1"] .service-cards button{min-height:112px;padding:12px 10px;gap:3px}
#booking .wizard-step[data-step="1"] .service-cards button b{font-size:17px;line-height:1.4}
#booking .wizard-step[data-step="1"] .service-cards button span{font-size:20px}
#booking .wizard-step[data-step="1"] .service-cards button em{font-size:11px;line-height:1.4}
#booking .wizard-step[data-step="1"] .booking-topic-picker{margin-top:10px}
#booking .wizard-step[data-step="1"] .booking-topic-options{gap:7px}
#booking .wizard-step[data-step="1"] .booking-topic-options button{min-height:46px;padding:7px 5px;gap:5px;font-size:15px}
#booking .wizard-step[data-step="1"] .booking-topic-options button span{font-size:13px}
#booking .wizard-step[data-step="1"] .booking-subtopic-panel{margin-top:10px;padding:12px 14px}
#booking .wizard-step[data-step="1"] .booking-subtopic-panel>p{margin:3px 0 7px;font-size:12px}
#booking .wizard-step[data-step="1"] .booking-subtopic-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#booking .wizard-step[data-step="1"] .booking-subtopic-options button{min-width:0;min-height:46px;padding:7px 9px;gap:6px;align-items:flex-start}
#booking .wizard-step[data-step="1"] .booking-subtopic-options button strong{min-width:19px;font-size:11px;padding-top:2px}
#booking .wizard-step[data-step="1"] .booking-subtopic-options button span{min-width:0;font-size:12px;line-height:1.5}
@media(max-width:820px){
 #booking .wizard-step[data-step="1"] .service-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 #booking .wizard-step[data-step="1"] .service-cards button{min-width:0;min-height:78px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:9px 4px;gap:2px}
 #booking .wizard-step[data-step="1"] .service-cards button small,#booking .wizard-step[data-step="1"] .service-cards button em{display:none}
 #booking .wizard-step[data-step="1"] .service-cards button b{font-size:14px}
 #booking .wizard-step[data-step="1"] .service-cards button span{font-size:17px}
 #booking .wizard-step[data-step="1"] .service-cards button.recommended:before{right:3px;top:2px;font-size:8px;padding:2px 4px}
}
@media(max-width:560px){
 #booking .wizard-body{padding:17px 12px 16px}
 #booking .wizard-step[data-step="1"] .channel-options button{min-height:64px;flex-direction:row;flex-wrap:wrap;padding:7px 4px;gap:3px}
 #booking .wizard-step[data-step="1"] .channel-options button .channel-icon{font-size:19px}
 #booking .wizard-step[data-step="1"] .channel-options button b{font-size:13px}
 #booking .wizard-step[data-step="1"] .channel-options button small{width:100%;font-size:10px}
 #booking .wizard-step[data-step="1"] .booking-topic-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 #booking .wizard-step[data-step="1"] .booking-topic-options button{min-height:48px;gap:3px;font-size:13px;padding:5px 2px}
 #booking .wizard-step[data-step="1"] .booking-topic-options button span{font-size:11px}
 #booking .wizard-step[data-step="1"] .booking-subtopic-panel{padding:11px 9px}
 #booking .wizard-step[data-step="1"] .booking-subtopic-options{grid-template-columns:1fr;gap:5px}
 #booking .wizard-step[data-step="1"] .booking-subtopic-options button{min-height:40px;padding:6px 8px;align-items:center}
 #booking .wizard-step[data-step="1"] .booking-subtopic-options button strong{padding-top:0}
}

/* Further tighten card groups while retaining readable, 44px+ targets. */
#booking .wizard-step[data-step="1"] .channel-select{margin-bottom:10px}
#booking .wizard-step[data-step="1"] .channel-options button{min-height:58px}
#booking .wizard-step[data-step="1"] .channel-options button small{display:none}
#booking .wizard-step[data-step="1"] .booking-topic-picker{margin-top:5px}
#booking .wizard-step[data-step="1"] .booking-subtopic-panel{padding:9px 12px}
@media(max-width:560px){
 #booking .wizard-step[data-step="1"] .channel-options button{min-height:51px}
 #booking .wizard-step[data-step="1"] .channel-title small{display:none}
 #booking .wizard-step[data-step="1"] .booking-subtopic-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 #booking .wizard-step[data-step="1"] .booking-subtopic-options button{min-height:56px;padding:5px;gap:4px;align-items:flex-start}
 #booking .wizard-step[data-step="1"] .booking-subtopic-options button strong{min-width:17px;font-size:10px;padding-top:2px}
 #booking .wizard-step[data-step="1"] .booking-subtopic-options button span{font-size:11px;line-height:1.38}
}

/* Keep selected appointment time legible on mouse hover/focus. */
#booking .time-btn.selected,
#booking .time-btn.selected:hover:not(:disabled),
#booking .time-btn.selected:focus-visible{
 background:#553b62!important;
 border-color:#553b62!important;
 color:#fff!important;
}
#booking .time-btn.selected b{color:#fff!important}
#booking .time-btn.selected small{color:#e3d7e8!important}

#booking .custom-topic-label,#booking .custom-subtopic-wrap{display:block;color:#57445c;font-size:13px;font-weight:700;line-height:1.6;margin:0 0 12px}
#booking .custom-subtopic-wrap{margin:12px 0 0}
#booking .custom-subtopic-wrap[hidden]{display:none!important}
#booking .custom-topic-label input,#booking .custom-subtopic-wrap input{display:block;box-sizing:border-box;width:100%;min-height:44px;margin-top:6px;border:1px solid #bba8c2;border-radius:7px;background:#fff;color:#302936;font:500 14px/1.5 inherit;padding:10px}
#booking .custom-topic-label input:focus-visible,#booking .custom-subtopic-wrap input:focus-visible{outline:2px solid #9164a1;outline-offset:2px}
#booking .booking-subtopic-options .custom-subtopic-option{border-style:dashed}

/* Reservation details: separate the optional story from contact fields. */
#booking .wizard-step[data-step="3"]>.row{margin-bottom:22px}
#booking .wizard-step[data-step="3"]>.wizard-field{display:grid;gap:8px;margin-top:12px;clear:both}
#booking .wizard-step[data-step="3"]>.wizard-field small{display:block;margin-top:3px;font-size:12px;line-height:1.5}
#booking .wizard-step[data-step="3"] textarea[name="memo"]{display:block;box-sizing:border-box;width:100%;min-height:132px;resize:vertical;line-height:1.65}
#booking .wizard-step[data-step="3"] .booking-agree{margin-top:20px}
#booking [hidden]{display:none!important}
@media(max-width:560px){
 #booking .wizard-step[data-step="3"]>.row{margin-bottom:18px}
 #booking .wizard-step[data-step="3"]>.wizard-field{margin-top:8px}
 #booking .wizard-step[data-step="3"] textarea[name="memo"]{min-height:120px}
}