:root{font-family:Arial,Helvetica,sans-serif;--navy:#17256b;--ink:#1f2533;--muted:#636b79;--line:#e0e3e9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-size:15px;line-height:1.5}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #79a7e8;outline-offset:2px}h1,h2,p{margin:0}.testbar{background:#e7f6eb;color:#1d6538;border-bottom:1px solid #bce2c8;text-align:center;font-size:11px;padding:7px 10px}.shell{max-width:1110px;margin:auto;padding:25px 28px 75px}.bookingHeader{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 0 25px}.bookingHeader h1{font-size:23px;font-weight:700;letter-spacing:-.02em}.brand{font-size:10px;letter-spacing:.08em;font-weight:700;color:#728199}.back{background:none;border:0;color:#253a7d;font-size:12px;font-weight:700;letter-spacing:.02em;padding:12px 0}.steps{display:flex;justify-content:center;gap:18px;color:#8b929d;font-size:11px;letter-spacing:.01em;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:27px}.steps span.active{color:var(--navy);font-weight:700}.steps span:not(:last-child):after{content:'›';color:#aeb5c1;padding-left:19px}.shell h2{font-size:21px;font-weight:700;letter-spacing:-.025em}.sub{margin:5px 0 22px;color:var(--muted);font-size:13px}.list{border:1px solid #e2e5ea}.category{min-height:77px;width:100%;background:white;border:0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:22px 24px;font-weight:700;color:var(--ink)}.category:last-child,.item:last-child{border-bottom:0}.category:hover,.item:hover{background:#fafbfe}.category span:first-child{font-size:15px}.select{background:var(--navy);color:white;border:0;padding:11px 16px;min-width:79px;text-align:center;white-space:nowrap;font-size:11px;font-weight:700}.sectioncaption{font-size:12px;font-weight:700;letter-spacing:.05em;margin:6px 0 13px}.item{width:100%;display:flex;align-items:center;text-align:left;gap:17px;padding:17px 20px;min-height:80px;background:white;border:0;border-bottom:1px solid var(--line);color:var(--ink)}.item.first{min-height:137px}.item img{width:106px;height:106px;object-fit:cover;flex:none;border-radius:2px}.itemText{flex:1;min-width:0}.itemText strong{display:block;font-size:15px;font-weight:700}.itemText .price{display:block;margin-top:5px;font-size:14px}.itemText .desc{color:var(--muted);display:block;font-size:12.5px;margin-top:8px;line-height:1.45;max-width:620px}.panel{border:1px solid var(--line);background:white;box-shadow:0 4px 15px rgba(19,37,80,.035)}.selectedPanel{padding:22px 26px;display:flex;align-items:flex-start;gap:22px;min-height:112px}.selectedPanel img{width:130px;height:100px;object-fit:cover}.selectedText{flex:1;min-width:0}.selectedText strong{display:block;font-size:17px;font-weight:700}.selectedText p{font-size:13px;color:var(--muted);margin-top:8px}.selectedText .price{display:block;margin-top:4px}.editService{border:0;background:white;color:var(--navy);font-size:12px;font-weight:700;white-space:nowrap;padding:5px}.addonHeading{margin-top:27px}.addons{padding:18px 22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 24px}.addon{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:14px}.addon input{margin-top:4px;accent-color:var(--navy);width:17px;height:17px}.addon span{display:block}.addon small{display:block;color:#657082;font-size:12px}.addon.skip{font-weight:700}.calendarPanel{padding:24px 20px;margin-top:29px}.zone{text-align:center;color:#424c5b;font-size:11px;font-weight:700;margin-bottom:17px}.dateControls{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:center;font-size:13px;margin-bottom:15px}.dateControls button{background:white;border:0;color:var(--navy);font-size:12px;font-weight:700;padding:8px}.dateColumns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.dateCol{min-width:0}.dateTop{text-align:center;min-height:80px;padding:8px 2px;color:#394353}.dateTop small{display:block;color:#77808d;font-size:11px;min-height:18px}.dateTop strong{font-size:15px;display:block}.dateTop span{display:block;font-size:12px}.slot{border:1px solid #d2d7e0;background:#fff;width:100%;min-height:49px;margin-bottom:7px;font-weight:700;color:#293044}.slot:not(:disabled):hover{border-color:var(--navy);background:#f5f7ff}.slotHint{text-align:center;margin-top:13px;font-size:12px;color:#6b7482}.informationHeading{margin-top:28px}.finalAppointment{padding:21px 25px}.finalAppointment h3{margin:0 0 4px;font-size:17px}.finalAppointment .appointmentDate{color:var(--muted);margin:3px 0 13px}.priceRow{display:flex;align-items:start;justify-content:space-between;gap:15px;padding:5px 0;font-size:14px}.priceRow strong{white-space:nowrap}.priceRow.total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-weight:700;font-size:17px}.formPanel{padding:24px 27px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}.formPanel label{display:block;font-weight:700;font-size:13px;margin-bottom:15px}.formPanel label em{color:#b53b48;font-style:normal}.formPanel input,.formPanel textarea{display:block;width:100%;background:white;border:1px solid #d2d8e2;min-height:49px;margin-top:7px;padding:12px 13px;border-radius:3px;resize:vertical;font-weight:400;font-size:15px}.formPanel textarea{min-height:95px}.totalBox{border:1px solid #e6e9f0;background:#fafbfe;padding:16px 18px;margin:12px 0 17px}.paymentActions{display:grid;grid-template-columns:1fr 1fr;gap:13px}.primary,.outline{min-height:51px;padding:12px 14px;font-size:12px;font-weight:700;letter-spacing:.02em;border-radius:2px}.primary{background:var(--navy);border:1px solid var(--navy);color:#fff}.outline{background:#fff;border:1px solid var(--navy);color:var(--navy)}.smallNote{font-size:12px;color:#6b7280;margin:12px 0 0}.alert{position:sticky;bottom:14px;margin-top:20px;padding:13px 15px;background:#fff2f0;color:#8d2931;border:1px solid #edc8c5;box-shadow:0 6px 22px #0002}.result{max-width:650px;margin:20px auto;padding:34px 30px;text-align:center}.result h2{margin:10px 0}.result p{color:var(--muted);margin:12px 0}.result .totalBox{text-align:left}.symbol{margin:auto;border-radius:50%;width:58px;height:58px;display:grid;place-items:center;background:#e9edfa;color:var(--navy);font-size:28px;font-weight:700}.symbol.success{background:#e7f5ee;color:#217b51}.wide,.buttonLink{display:block;width:100%;margin-top:12px;text-align:center;text-decoration:none}.buttonLink{padding:14px}.paymentStatus{color:#4a5568}.resultActions{margin-top:18px}@media(max-width:780px){.dateColumns{grid-template-columns:repeat(3,minmax(0,1fr))}.brand{display:none}.bookingHeader{justify-content:flex-start;gap:22px}.bookingHeader h1{margin:auto;font-size:19px}.shell{padding:20px 16px 60px}.dateTop strong{font-size:14px}.calendarPanel{padding:19px 10px}.dateColumns{gap:7px}.addons{grid-template-columns:1fr}}@media(max-width:500px){body{font-size:14px}.shell{padding:12px 12px 65px}.bookingHeader{padding-bottom:18px}.bookingHeader h1{font-size:17px}.steps{gap:8px;font-size:10px}.steps span:not(:last-child):after{padding-left:8px}.category{min-height:68px;padding:16px 15px}.category span:first-child{font-size:13.5px}.item{padding:14px 11px;gap:10px}.item.first{min-height:130px}.item img{width:79px;height:92px}.itemText strong{font-size:13.5px}.itemText .price{font-size:13px}.itemText .desc{font-size:11.5px}.select{padding:10px 9px;min-width:63px;font-size:10px}.selectedPanel{padding:14px 12px;gap:10px}.selectedPanel img{width:84px;height:85px}.selectedText strong{font-size:14px}.selectedText p{font-size:12px}.editService{font-size:11px}.addons{padding:14px 12px}.dateControls{font-size:11px;gap:0}.dateControls button{font-size:11px;padding:7px 3px}.dateTop{min-height:73px}.dateTop strong{font-size:12px}.slot{min-height:43px;font-size:12px}.formPanel{padding:18px 14px}.fields{grid-template-columns:1fr;gap:0}.finalAppointment{padding:17px 14px}.paymentActions{grid-template-columns:1fr}.result{padding:25px 16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.finalHero{display:flex;gap:16px;align-items:flex-start;margin-bottom:13px}.finalHero img{width:112px;height:106px;object-fit:cover}.finalIntro{flex:1;min-width:0}.finalIntro p{color:#667080;font-size:12.5px;margin-top:5px}@media(max-width:500px){.finalHero{gap:10px}.finalHero img{width:78px;height:88px}.finalIntro h3{font-size:14px}.finalIntro p{font-size:11.5px}}

.bookingHeader h1[hidden]{display:none}

/* v1.4.0: Consistent typography matching the service-name text (Arial). */
html,body,button,input,textarea,select,option {font-family:Arial,Helvetica,sans-serif!important;}
/* Normalize emphasis weights but retain size hierarchy for headings and buttons. */
.bookingHeader h1,.shell h2,.category,.category span:first-child,.itemText strong,.selectedText strong,.result h2 {font-weight:700;}

/* Mobile: service photos belong on Step 1; keep Step 2/3 compact. */
@media (max-width:600px) {
 #calendarPage .selectedPanel img, #detailsPage .finalHero img {display:none!important;}
 #calendarPage .selectedPanel{min-height:0;gap:10px;}
 #calendarPage .selectedText{min-width:0;flex:1;}
 #detailsPage .finalHero{display:block;}
 #detailsPage .finalIntro{width:100%;}
}

/* v1.4.6: featured service card */
.popularService{margin:18px 0 22px;border:1px solid #bed7f5;border-radius:6px;background:#f9fcff;overflow:hidden}
.popularService[hidden]{display:none!important}
.popularTop{background:#eff6ff;padding:12px 18px;color:#1b4e9d;font-size:13px}
.popularContent{display:flex;align-items:center;gap:18px;padding:16px 18px}
.popularContent>img{width:135px;height:110px;object-fit:cover;flex-shrink:0;border-radius:4px}
.popularText{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;font-size:15px}
.popularText>strong{font-weight:700;font-size:16px}
.popularPrice{font-size:15px}
.popularText>p{color:var(--muted);font-size:14px;margin:2px 0 0}
.popularBook{background:var(--navy);color:white;border:0;padding:14px 25px;font-weight:700;white-space:nowrap;border-radius:2px}
@media(max-width:600px){.popularContent{flex-wrap:wrap;gap:10px;padding:13px}.popularContent>img{width:85px;height:80px}.popularText{flex:1 1 calc(100% - 110px);font-size:14px}.popularText>strong{font-size:15px}.popularBook{width:100%}}

/* v1.4.7: Step 2-sized typography for featured service on desktop and mobile */
.popularTop{font-size:12px;padding:9px 14px}
.popularContent{gap:12px;padding:12px 14px}
.popularContent>img{width:100px;height:86px}
.popularText{font-size:14px;gap:3px}
.popularText>strong{font-size:15px;line-height:1.35}
.popularPrice{font-size:14px}
.popularText>p{font-size:12.5px;line-height:1.45;margin:3px 0 0}
.popularDesc span{display:block}
.popularBook{font-size:12px;padding:11px 17px}
@media(max-width:600px){
 .popularTop{font-size:11px;padding:8px 12px}
 .popularContent{gap:9px;padding:10px 12px}
 .popularContent>img{width:72px;height:74px}
 .popularText{flex:1 1 calc(100% - 82px);font-size:13px;gap:2px}
 .popularText>strong{font-size:13.5px;line-height:1.3}
 .popularPrice{font-size:13px}
 .popularText>p{font-size:11.5px;line-height:1.35;margin:2px 0 0}
 .popularDesc .popularMore{display:none}
 .popularBook{min-height:40px;padding:9px 12px;font-size:11px}
}

/* v1.4.8: image alongside title; full-width two-line description beneath on mobile */
.popularContent{display:grid;grid-template-columns:100px minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:6px}
.popularContent>img{grid-column:1;grid-row:1 / span 2}
.popularText{grid-column:2;grid-row:1;min-width:0}
.popularContent>.popularDesc{grid-column:2;grid-row:2;font-size:12px;line-height:1.4;color:var(--muted);margin:0}
.popularContent>.popularDesc span{display:block;margin-bottom:4px}
.popularBook{grid-column:3;grid-row:1 / span 2}
@media(max-width:600px){
 .popularContent{display:grid;grid-template-columns:68px minmax(0,1fr);gap:6px 9px;padding:9px 11px}
 .popularContent>img{grid-column:1;grid-row:1;width:68px;height:68px;object-fit:cover}
 .popularText{grid-column:2;grid-row:1;flex:auto;gap:2px}
 .popularText>strong{font-size:13px;line-height:1.28}
 .popularPrice{font-size:12.5px}
 .popularContent>.popularDesc{grid-column:1 / -1;grid-row:2;font-size:10.5px;line-height:1.34;margin:1px 0 2px}
 .popularContent>.popularDesc span{display:block;margin-bottom:4px}
 .popularBook{grid-column:1 / -1;grid-row:3;min-height:36px;padding:8px 12px;font-size:11px;width:100%}
}

/* v1.4.9 confirmation action */
.bookingWhatsapp{margin:16px 0}
.bookingWhatsappLink{display:block;background:#168b55;color:#fff;text-align:center;text-decoration:none;padding:14px 12px;border-radius:6px;font:700 13px Arial,sans-serif;line-height:1.4}
.bookingWhatsappLink:hover{background:#117646}
@media(max-width:600px){.bookingWhatsappLink{padding:13px 8px;font-size:12px}}

/* v1.5.1: static skeleton appears before catalogue request completes. Non-interactive. */
.categoryLoadingRow{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:12px 18px;border:1px solid #e5e9f1;border-bottom:0;background:#fff}
.categoryLoadingRow:last-child{border-bottom:1px solid #e5e9f1}
.loadingBar{display:block;width:45%;max-width:215px;height:12px;border-radius:4px;background:#eef1f6}
.loadingAction{display:block;width:74px;height:28px;border-radius:3px;background:#eef1f6}
@media(max-width:780px){.categoryLoadingRow{min-height:54px;padding:12px 15px}.loadingBar{width:54%}.loadingAction{width:63px}}

.itemText .desc span,.selectedText p span,.finalIntro p span{display:block}.popularDesc span{display:block}

/* v1.5.3: match Featured Popular arrangement throughout service selection.
   Image + service name/price on top, description across the whole card below. */
#itemList .item{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:start;column-gap:12px;row-gap:7px;min-height:0;padding:14px 18px}
#itemList .item.first{min-height:0}
#itemList .serviceCardHeader{display:flex;align-items:center;gap:13px;min-width:0;grid-column:1;grid-row:1}
#itemList .serviceCardHeader img{width:94px;height:83px;object-fit:cover;flex:0 0 auto;border-radius:4px}
#itemList .itemText{flex:1;min-width:0}
#itemList .serviceCardDesc{grid-column:1/-1;grid-row:2;display:block;min-width:0;width:100%;max-width:none;font-size:12.5px;line-height:1.4;color:var(--muted);margin:0;overflow-wrap:anywhere}
#itemList .serviceCardDesc span{display:block}
#itemList .serviceCardSelect{grid-column:2;grid-row:1;align-self:center}
/* Selected-service panel on the calendar page; keep Change Service accessible. */
#calendarPage .selectedPanel{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:8px 12px;align-items:start}
#calendarPage .selectedServiceHeader{display:flex;align-items:center;gap:14px;grid-column:1;grid-row:1;min-width:0}
#calendarPage .selectedServiceHeader img{width:100px;height:82px;object-fit:cover;flex:0 0 auto;border-radius:4px}
#calendarPage .selectedServiceDesc{grid-column:1/-1;grid-row:2;margin:0;color:var(--muted);font-size:12.5px;line-height:1.45;overflow-wrap:anywhere}
#calendarPage .selectedServiceDesc span{display:block}
#calendarPage .editService{grid-column:2;grid-row:1;align-self:center}
@media(max-width:600px){
 #itemList .item{grid-template-columns:minmax(0,1fr);padding:12px 11px;row-gap:8px}
 #itemList .serviceCardHeader{grid-column:1;grid-row:1;gap:10px}
 #itemList .serviceCardHeader img{width:68px;height:68px}
 #itemList .itemText strong{font-size:13.5px;line-height:1.3}
 #itemList .itemText .price{font-size:12.5px;margin-top:3px}
 #itemList .serviceCardDesc{grid-column:1;grid-row:2;font-size:11.5px}
 #itemList .serviceCardSelect{grid-column:1;grid-row:3;justify-self:stretch;min-height:35px;display:grid;place-items:center}
 #calendarPage .selectedPanel{padding:12px;grid-template-columns:minmax(0,1fr) auto;gap:7px}
 #calendarPage .selectedServiceHeader{gap:9px}
 #calendarPage .selectedServiceDesc{font-size:11.5px}
}

/* v1.5.4 — MOBILE ONLY: compact list rows for services with NO image.
   Image cards and Featured Popular remain unchanged. */
@media (max-width:600px){
  #itemList .item.noServiceImage{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:5px;align-items:center;min-height:0;padding:13px 11px;}
  #itemList .item.noServiceImage .serviceCardHeader{grid-column:1;grid-row:1;min-width:0;}
  #itemList .item.noServiceImage .serviceCardSelect{grid-column:2;grid-row:1;justify-self:end;align-self:center;display:grid;place-items:center;width:auto;min-width:67px;min-height:36px;padding:9px 11px;}
  #itemList .item.noServiceImage .serviceCardDesc{grid-column:1/-1;grid-row:2;margin-top:2px;}
}

/* v1.5.6 — mobile-only compact typography near 12px timeslot text.
   Step 2 add-ons and Step 3 summary + customer fields only. */
@media (max-width:600px) {
  #calendarPage .addons { padding:12px 14px; grid-template-columns:1fr; gap:11px; }
  #calendarPage .addon { align-items:flex-start; gap:10px; font-size:12.5px; line-height:1.4; font-weight:500; }
  #calendarPage .addon span { font-size:12.5px; line-height:1.4; }
  #calendarPage .addon small { font-size:12px; line-height:1.35; margin-top:2px; }
  #calendarPage .addon input[type="checkbox"] { width:18px; height:18px; min-width:18px; margin:0; }
  #calendarPage .addon.skip, #calendarPage .addon.skip span { font-size:12.5px; font-weight:700; }

  #detailsPage .finalAppointment { padding:13px 14px; }
  #detailsPage .finalAppointment h3 { font-size:12.5px; line-height:1.4; }
  #detailsPage .finalAppointment .appointmentDate,
  #detailsPage .finalIntro p { font-size:12px; line-height:1.45; }
  #detailsPage .priceRow { font-size:12px; line-height:1.45; }
  #detailsPage .priceRow.total { font-size:12.5px; }
  #detailsPage .formPanel { padding:14px; }
  #detailsPage .formPanel label { font-size:12px; line-height:1.45; }
  #detailsPage .formPanel input,
  #detailsPage .formPanel textarea { font-size:13px; line-height:1.45; }
  #detailsPage .totalBox { font-size:12px; }
}

/* v1.5.7 category-only link */
.categoryAllLink{text-align:center;margin:20px 0 6px}.categoryAllLink button{background:transparent;border:0;color:#173776;text-decoration:underline;cursor:pointer;font:600 13px system-ui,sans-serif;padding:12px 18px}