/* Derma Glow booking and cost calculator, v1.0.7
 *
 * Rebuilt after the client said the previous version still looked AI made. It had tried
 * to look like a printed price list: 9 to 11px monospace labels, letter-spaced headings,
 * and treatment rows marked with a "+" that nobody could tell would open. People booking
 * a salon on a phone do not read a price list, they use the patterns they already know.
 *
 * So this follows Fresha and Treatwell, both looked at on a phone before writing it:
 *   - readable text: 16px base, service names 17px, nothing a person reads under 13px
 *   - one sans typeface for everything you read or tap; the brand serif only for the
 *     title and the total, which is how the rest of the site uses it
 *   - a row that opens carries a chevron and says how many options it holds
 *   - anything you can add has a round + that turns into a filled tick
 *   - the total and the button share one bar, pinned to the bottom inside the popup
 *   - the steps say what they are: Treatments, Time, Details
 *
 * Form controls are scoped as `.dgb .x`. The theme styles bare `button` and `input`
 * with attribute and state selectors, and a lone class loses to those.
 */
.dgb{
  --dgb-ink:#1F1A1D; --dgb-body:#4A4146; --dgb-muted:#766B70; --dgb-faint:#A59BA0;
  --dgb-line:#E9E0E3; --dgb-soft:#FAF6F7; --dgb-rose-soft:#F9E4E8;
  --dgb-plum:#3A1B2A; --dgb-plum2:#52263B; --dgb-rose:#B03A52;
  --dgb-sans:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --dgb-serif:'Instrument Serif',Georgia,serif;
  --dgb-r:14px;

  position:relative; background:#fff; color:var(--dgb-ink);
  border:1px solid var(--dgb-line); border-radius:20px;
  box-shadow:0 1px 2px rgba(31,26,29,.04),0 24px 48px -32px rgba(58,27,42,.32);
  font-family:var(--dgb-sans); font-size:16px; line-height:1.5; letter-spacing:normal;
  text-align:left; overflow:hidden; -webkit-font-smoothing:antialiased;
}
.dgb *,.dgb *::before,.dgb *::after{box-sizing:border-box}
/* flex and grid rules below beat the browser's own [hidden]{display:none} */
.dgb [hidden],.dgb[hidden],.dgb-launcher[hidden],.dgb-modal[hidden],.dgb-float[hidden]{display:none!important} /* dgb-hidden-guard */
/* one property only: anything else here would outrank every button class below */
.dgb button{font-family:inherit;cursor:pointer}
.dgb-ic{flex:none;display:block}

/* ------------------------------------------------------------------ header */
.dgb .dgb-head{padding:26px 24px 0}
.dgb .dgb-title{margin:0;font-family:var(--dgb-serif);font-weight:400;font-size:clamp(28px,6vw,34px);
  line-height:1.1;letter-spacing:normal;text-transform:none;color:var(--dgb-ink)}
.dgb .dgb-intro{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--dgb-body);max-width:52ch}

/* 1 Treatments — 2 Time — 3 Details */
.dgb .dgb-steps{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.dgb .dgb-step{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:500;
  color:var(--dgb-muted);white-space:nowrap}
.dgb .dgb-step+.dgb-step::before{content:"";flex:none;width:20px;height:1.5px;background:var(--dgb-line)}
.dgb .dgb-step-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--dgb-line);background:#fff;font-size:13px;font-weight:600;color:var(--dgb-muted)}
.dgb .dgb-step.is-on{color:var(--dgb-ink);font-weight:600}
.dgb .dgb-step.is-on .dgb-step-n{background:var(--dgb-plum);border-color:var(--dgb-plum);color:#fff}
.dgb .dgb-step.is-done .dgb-step-n{background:var(--dgb-rose-soft);border-color:var(--dgb-rose-soft);color:var(--dgb-rose)}

/* ------------------------------------------------------------------- panes */
.dgb .dgb-pane{display:none;padding:22px 24px 6px}
.dgb .dgb-pane.is-on{display:block;animation:dgbIn .25s ease}
@keyframes dgbIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* two sides as a segmented control, the way booking apps switch a whole menu */
.dgb .dgb-sides{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0;
  background:var(--dgb-soft);border:1px solid var(--dgb-line);border-radius:999px}
.dgb .dgb-side{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;margin:0;
  padding:8px 12px;border:0;border-radius:999px;background:transparent;box-shadow:none;
  font-size:15px;font-weight:600;line-height:1.2;letter-spacing:normal;text-transform:none;
  color:var(--dgb-body);transition:background .2s,color .2s,box-shadow .2s}
.dgb .dgb-side.is-on{background:#fff;color:var(--dgb-ink);
  box-shadow:0 1px 3px rgba(31,26,29,.12),0 0 0 1px var(--dgb-line)}
.dgb .dgb-side.is-on .dgb-ic{color:var(--dgb-rose)}

/* search */
.dgb .dgb-search{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:0 14px;min-height:52px;
  background:#fff;border:1px solid var(--dgb-line);border-radius:var(--dgb-r);color:var(--dgb-muted);
  transition:border-color .2s,box-shadow .2s}
.dgb .dgb-search:focus-within{border-color:var(--dgb-rose);box-shadow:0 0 0 3px var(--dgb-rose-soft)}
.dgb .dgb-q{flex:1;min-width:0;height:auto;margin:0;padding:13px 0;border:0;border-radius:0;background:none;
  box-shadow:none;font-family:var(--dgb-sans);font-size:16px;color:var(--dgb-ink)}
.dgb .dgb-q::placeholder{color:var(--dgb-faint)}
.dgb .dgb-q:focus{outline:none;box-shadow:none}

/* ---------------------------------------------------------- treatment list */
.dgb .dgb-groups{margin:2px 0 0}
.dgb .dgb-group{margin-top:20px}
.dgb .dgb-group-name{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--dgb-muted)}
.dgb .dgb-grid{background:#fff;border:1px solid var(--dgb-line);border-radius:var(--dgb-r);overflow:hidden}
.dgb .dgb-card{border-top:1px solid var(--dgb-line)}
.dgb .dgb-card:first-child{border-top:0}

.dgb .dgb-card-head{display:flex;align-items:center;gap:12px;width:100%;min-height:70px;margin:0;
  padding:12px 14px 12px 16px;border:0;border-radius:0;background:#fff;box-shadow:none;
  text-align:left;color:inherit;transition:background .2s}
@media (hover:hover){.dgb .dgb-card-head:hover{background:var(--dgb-soft)}}
.dgb .dgb-card.is-open .dgb-card-head{background:var(--dgb-soft)}
.dgb-card-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dgb-card-name{font-size:17px;font-weight:600;line-height:1.3;color:var(--dgb-ink)}
.dgb-card-sub{font-size:14px;line-height:1.35;color:var(--dgb-muted)}
.dgb-card-sub b{font-weight:600;color:var(--dgb-rose)}
.dgb-card-from{flex:none;text-align:right;font-size:15px;font-weight:600;line-height:1.25;
  color:var(--dgb-ink);white-space:nowrap}
.dgb-card-from small{display:block;font-size:13px;font-weight:400;color:var(--dgb-muted)}

.dgb-card-ctl{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%}
.dgb-chev-wrap{background:var(--dgb-soft);border:1px solid var(--dgb-line);color:var(--dgb-ink);
  transition:transform .25s,background .2s,color .2s}
.dgb-card.is-open .dgb-chev-wrap{transform:rotate(180deg);background:var(--dgb-rose-soft);
  border-color:var(--dgb-rose-soft);color:var(--dgb-rose)}

/* the add control: an outlined + that fills and turns into a tick */
.dgb-add{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--dgb-plum);background:#fff;color:var(--dgb-plum);
  transition:background .2s,color .2s,transform .15s}
.dgb-add.is-on{background:var(--dgb-plum);color:#fff}

.dgb .dgb-opts{padding:2px 14px 8px 16px;background:var(--dgb-soft);border-top:1px solid var(--dgb-line)}
.dgb .dgb-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;margin:0;padding:8px 0;
  border:0;border-top:1px solid var(--dgb-line);border-radius:0;background:none;box-shadow:none;
  text-align:left;color:var(--dgb-ink)}
.dgb .dgb-opt:first-child{border-top:0}
.dgb-opt-name{flex:1;min-width:0;font-size:16px;line-height:1.35}
.dgb-opt-price{flex:none;font-size:15px;font-weight:600;white-space:nowrap}
.dgb-opt-price em{font-style:normal;font-weight:400;font-size:14px;color:var(--dgb-muted)}
.dgb .dgb-opt.is-on .dgb-opt-name{font-weight:600}
@media (hover:hover){
  .dgb .dgb-opt:hover .dgb-add:not(.is-on),
  .dgb .dgb-card-head:hover .dgb-add:not(.is-on){background:var(--dgb-rose-soft)}
}
.dgb .dgb-opt:active .dgb-add,.dgb .dgb-card-head:active .dgb-add{transform:scale(.9)}

.dgb .dgb-empty{margin:16px 0 0;font-size:15px;color:var(--dgb-body)}
.dgb .dgb-empty a{color:var(--dgb-rose);font-weight:600}

/* -------------------------------------------------------------------- time */
.dgb .dgb-when-label,.dgb .dgb-slots-label{margin:0;font-size:16px;font-weight:600;color:var(--dgb-ink)}
.dgb .dgb-when-label{margin-bottom:10px}
.dgb .dgb-days{display:flex;gap:8px;overflow-x:auto;margin:0 -2px;padding:2px 2px 16px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.dgb .dgb-days::-webkit-scrollbar{display:none}
.dgb .dgb-day{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  width:64px;min-height:78px;margin:0;padding:6px 0;border:1px solid var(--dgb-line);border-radius:var(--dgb-r);
  background:#fff;box-shadow:none;color:var(--dgb-ink);scroll-snap-align:start;
  transition:border-color .2s,background .2s,color .2s}
@media (hover:hover){.dgb .dgb-day:hover:not(.is-on){border-color:var(--dgb-ink)}}
.dgb-dow,.dgb-dmon{font-size:13px;line-height:1.3;color:var(--dgb-muted)}
.dgb-dnum{font-size:21px;font-weight:600;line-height:1.15}
.dgb .dgb-day.is-on{background:var(--dgb-plum);border-color:var(--dgb-plum);color:#fff}
.dgb .dgb-day.is-on .dgb-dow,.dgb .dgb-day.is-on .dgb-dmon{color:rgba(255,255,255,.82)}

.dgb .dgb-slots-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:4px 0 12px}
.dgb .dgb-slots-note{font-size:14px;color:var(--dgb-muted)}
.dgb .dgb-slots{display:block}
.dgb .dgb-slot-group+.dgb-slot-group{margin-top:16px}
.dgb .dgb-slot-group-name{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--dgb-muted)}
.dgb .dgb-slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px}
.dgb .dgb-slot{min-height:50px;margin:0;padding:10px 6px;border:1px solid var(--dgb-line);border-radius:12px;
  background:#fff;box-shadow:none;font-size:15px;font-weight:500;line-height:1.2;color:var(--dgb-ink);
  transition:border-color .2s,background .2s,color .2s}
@media (hover:hover){.dgb .dgb-slot:hover:not(:disabled):not(.is-on){border-color:var(--dgb-ink)}}
.dgb .dgb-slot.is-on{background:var(--dgb-plum);border-color:var(--dgb-plum);color:#fff}
.dgb .dgb-slot.is-gone,.dgb .dgb-slot:disabled{background:var(--dgb-soft);color:var(--dgb-faint);
  text-decoration:line-through;cursor:not-allowed}
.dgb .dgb-loading,.dgb .dgb-noslots{margin:0;padding:12px 0;font-size:15px;color:var(--dgb-muted)}

/* ----------------------------------------------------------------- details */
.dgb .dgb-fields{display:grid;gap:16px}
.dgb .dgb-field{display:flex;flex-direction:column;gap:6px;margin:0}
.dgb .dgb-field>span{font-size:14px;font-weight:600;line-height:1.3;color:var(--dgb-ink)}
.dgb .dgb-field>span em{font-style:normal;font-weight:400;color:var(--dgb-muted)}
.dgb .dgb-field input,.dgb .dgb-field textarea{width:100%;min-height:52px;height:auto;margin:0;
  padding:13px 14px;border:1px solid var(--dgb-line);border-radius:12px;background:#fff;box-shadow:none;
  font-family:var(--dgb-sans);font-size:16px;line-height:1.35;color:var(--dgb-ink);
  -webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.dgb .dgb-field textarea{min-height:90px;resize:vertical}
.dgb .dgb-field input:focus,.dgb .dgb-field textarea:focus{outline:none;border-color:var(--dgb-rose);
  box-shadow:0 0 0 3px var(--dgb-rose-soft)}
.dgb .dgb-field input::placeholder,.dgb .dgb-field textarea::placeholder{color:var(--dgb-faint);opacity:1}
.dgb .dgb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dgb .dgb-privacy{display:flex;gap:8px;align-items:flex-start;margin:16px 0 0;font-size:14px;
  line-height:1.5;color:var(--dgb-muted)}
.dgb .dgb-privacy .dgb-ic{color:var(--dgb-rose);margin-top:2px}

/* ------------------------------------------------------- what you picked */
.dgb .dgb-chips{display:flex;flex-wrap:wrap;gap:8px;padding:16px 24px 0}
.dgb .dgb-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-height:38px;
  padding:6px 6px 6px 14px;border:1px solid var(--dgb-line);border-radius:999px;background:var(--dgb-soft);
  font-size:14px;line-height:1.3;color:var(--dgb-ink)}
.dgb .dgb-chip button{display:grid;place-items:center;flex:none;width:28px;height:28px;margin:0;padding:0;
  border:0;border-radius:50%;background:transparent;box-shadow:none;font-size:19px;line-height:1;color:var(--dgb-muted)}
@media (hover:hover){.dgb .dgb-chip button:hover{background:#fff;color:var(--dgb-ink)}}

/* ---------------------------------------------------------------- the bar */
.dgb .dgb-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:16px;padding:16px 24px;border-top:1px solid var(--dgb-line);background:#fff}
.dgb .dgb-total{display:flex;flex-direction:column;gap:1px;min-width:0}
.dgb .dgb-total-label{font-size:14px;line-height:1.3;color:var(--dgb-muted)}
.dgb .dgb-total-val{font-family:var(--dgb-serif);font-weight:400;font-size:28px;line-height:1.1;
  color:var(--dgb-faint)}
.dgb .dgb-total-val.has{color:var(--dgb-ink)}
.dgb .dgb-total-note{font-size:13px;line-height:1.35;color:var(--dgb-muted)}
.dgb .dgb-actions{display:flex;gap:10px;align-items:center;flex:none;margin-left:auto}

.dgb .dgb-btn,.dgb-btn.dgb-open{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;margin:0;padding:14px 26px;border:1.5px solid var(--dgb-line,#E9E0E3);border-radius:999px;
  background:#fff;box-shadow:none;font-family:Archivo,system-ui,sans-serif;font-size:16px;font-weight:600;
  line-height:1;letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;
  color:var(--dgb-ink,#1F1A1D);transition:background .2s,border-color .2s,color .2s,transform .15s}
@media (hover:hover){.dgb .dgb-btn:hover{border-color:var(--dgb-ink);color:var(--dgb-ink)}}
.dgb .dgb-btn:active{transform:scale(.98)}
.dgb .dgb-solid,.dgb-btn.dgb-solid.dgb-open{background:#3A1B2A;border-color:#3A1B2A;color:#fff}
@media (hover:hover){.dgb .dgb-solid:hover{background:var(--dgb-plum2);border-color:var(--dgb-plum2);color:#fff}}
.dgb .dgb-btn:disabled,.dgb .dgb-btn:disabled:hover{cursor:not-allowed;transform:none;
  background:#EFE8EA;border-color:#EFE8EA;color:#8A7F84}
.dgb .dgb-back svg{flex:none}
.dgb .dgb-error{margin:0;padding:12px 24px 16px;font-size:15px;font-weight:500;color:#A12A45}

/* ------------------------------------------------------------ confirmation */
.dgb .dgb-done{padding:38px 24px 30px}
.dgb .dgb-done-mark{display:grid;place-items:center;width:64px;height:64px;margin-bottom:16px;
  border-radius:50%;background:var(--dgb-rose-soft);color:var(--dgb-rose);
  animation:dgbPop .45s cubic-bezier(.2,1.3,.4,1)}
@keyframes dgbPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.dgb .dgb-done h3{margin:0;font-family:var(--dgb-serif);font-weight:400;font-size:clamp(28px,6vw,34px);
  line-height:1.1;letter-spacing:normal;color:var(--dgb-ink)}
.dgb .dgb-done-when{margin:8px 0 0;font-size:17px;font-weight:600;color:var(--dgb-ink)}
.dgb .dgb-done-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 0}
.dgb .dgb-done-meta div{padding:12px 14px;border:1px solid var(--dgb-line);border-radius:12px;background:var(--dgb-soft)}
.dgb .dgb-done-meta dt{font-size:13px;color:var(--dgb-muted)}
.dgb .dgb-done-meta dd{margin:2px 0 0;font-size:17px;font-weight:600;color:var(--dgb-ink)}
.dgb .dgb-done-note{margin:18px 0 0;max-width:52ch;font-size:15px;line-height:1.55;color:var(--dgb-body)}
.dgb .dgb-done-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.dgb .dgb-done-wa{background:#1E9E57;border-color:#1E9E57;color:#fff}
@media (hover:hover){.dgb .dgb-done-wa:hover{background:#17864A;border-color:#17864A;color:#fff}}

/* -------------------------------------------------------- launcher + popup */
.dgb-launcher{position:fixed;right:16px;bottom:84px;z-index:9998;opacity:0;transform:translateY(10px);
  transition:opacity .35s,transform .35s;pointer-events:none}
.dgb-launcher.is-in{opacity:1;transform:none;pointer-events:auto}
.dgb-launcher .dgb-fab{display:inline-flex;align-items:center;gap:8px;min-height:52px;margin:0;
  padding:12px 22px 12px 18px;border:0;border-radius:999px;background:#3A1B2A;color:#fff;
  font-family:Archivo,system-ui,sans-serif;font-size:16px;font-weight:600;letter-spacing:normal;
  text-transform:none;box-shadow:0 14px 30px -12px rgba(58,27,42,.6);cursor:pointer;transition:transform .2s}
@media (hover:hover){.dgb-launcher .dgb-fab:hover{transform:translateY(-2px)}}

.dgb-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center}
.dgb-modal-back{position:absolute;inset:0;background:rgba(24,16,20,.55);animation:dgbFade .25s ease}
@keyframes dgbFade{from{opacity:0}to{opacity:1}}
.dgb-modal-box{position:relative;width:100%;max-width:620px;max-height:94vh;max-height:94dvh;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#fff;border-radius:20px 20px 0 0;
  animation:dgbUp .3s cubic-bezier(.2,.8,.3,1)}
@keyframes dgbUp{from{transform:translateY(36px);opacity:0}to{transform:none;opacity:1}}
.dgb-modal .dgb-close{position:absolute;right:14px;top:14px;z-index:4;display:grid;place-items:center;
  width:42px;height:42px;margin:0;padding:0;border:1px solid #E9E0E3;border-radius:50%;background:#fff;
  box-shadow:none;color:#1F1A1D;cursor:pointer}
/* inside the popup the sheet is the card, and it is the only thing that scrolls, so the
   bar with the total and Continue can stay on screen */
.dgb-modal .dgb{border:0;border-radius:0;box-shadow:none;overflow:visible}
.dgb-modal .dgb .dgb-head{padding-right:70px}
.dgb-modal .dgb .dgb-bar{position:sticky;bottom:0;z-index:3;box-shadow:0 -12px 24px -20px rgba(31,26,29,.4)}
body.dgb-locked{overflow:hidden}

/* ---------------------------------------------------- floating bar, inline forms
   On a page the widget cannot pin its own bar: the theme gives <body> overflow-x:hidden,
   which makes body the sticky container and stops sticky working at all. So once the
   visitor has picked something and the widget's own bar is off screen, a copy of it sits
   at the bottom of the viewport, the way Fresha keeps "Book now" in reach. */
.dgb-float{position:fixed;left:0;right:0;bottom:0;z-index:9990;padding:10px 16px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #E9E0E3;
  box-shadow:0 -12px 28px -18px rgba(31,26,29,.35);font-family:Archivo,system-ui,sans-serif;
  animation:dgbFloat .25s ease}
@keyframes dgbFloat{from{transform:translateY(100%)}to{transform:none}}
.dgb-float-in{display:flex;align-items:center;gap:12px;max-width:620px;margin:0 auto}
.dgb-float-total{display:flex;flex-direction:column;min-width:0;flex:0 1 auto}
.dgb-float-label{font-size:14px;line-height:1.3;color:#766B70;white-space:nowrap}
.dgb-float-val{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:24px;line-height:1.1;
  color:#1F1A1D;white-space:nowrap}
.dgb-float .dgb-float-btn{flex:1 1 auto;min-height:52px;margin:0;padding:14px 20px;border:0;border-radius:999px;
  background:#3A1B2A;color:#fff;box-shadow:none;font-family:Archivo,system-ui,sans-serif;font-size:16px;
  font-weight:600;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;cursor:pointer}
.dgb-float .dgb-float-btn:disabled{background:#EFE8EA;color:#8A7F84;cursor:not-allowed}
body.dgb-float-on .dgb-launcher{opacity:0;pointer-events:none}

/* ------------------------------------------------------------ wider screens */
@media (min-width:700px){
  .dgb .dgb-head{padding:30px 32px 0}
  .dgb .dgb-pane{padding:24px 32px 6px}
  .dgb .dgb-chips{padding:16px 32px 0}
  .dgb .dgb-bar{padding:18px 32px}
  .dgb .dgb-error{padding-left:32px;padding-right:32px}
  .dgb .dgb-done{padding:46px 32px 36px}
  .dgb .dgb-fields{grid-template-columns:1fr 1fr;gap:18px 20px}
  .dgb .dgb-field--wide{grid-column:1/-1}
  .dgb-modal{align-items:center;padding:24px}
  .dgb-modal-box{max-height:90vh;border-radius:20px}
  .dgb-launcher{right:24px;bottom:24px}
  .dgb-float{left:50%;right:auto;bottom:18px;width:min(620px,calc(100% - 48px));transform:translateX(-50%);
    padding:12px 12px 12px 22px;border:1px solid #E9E0E3;border-radius:999px}
  @keyframes dgbFloat{from{opacity:0}to{opacity:1}}
  .dgb-float .dgb-float-btn{flex:0 0 auto;padding:14px 28px}
  .dgb-float-in{justify-content:space-between}
}

/* -------------------------------------------------------------------- phones */
@media (max-width:620px){
  .dgb{border-radius:16px}
  .dgb .dgb-head{padding:22px 18px 0}
  .dgb .dgb-pane{padding:18px 18px 4px}
  .dgb .dgb-chips{padding:14px 18px 0}
  .dgb .dgb-bar{gap:12px;padding:12px 18px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .dgb .dgb-error{padding-left:18px;padding-right:18px}
  .dgb .dgb-done{padding:32px 18px 26px}

  .dgb .dgb-steps{gap:6px}
  .dgb .dgb-step{gap:6px;font-size:13.5px}
  .dgb .dgb-step+.dgb-step::before{width:12px}

  .dgb .dgb-side{font-size:14.5px;gap:6px;padding:8px 6px}
  .dgb .dgb-card-head{gap:10px;padding:12px 12px 12px 14px}
  .dgb-card-name{font-size:16.5px}
  .dgb .dgb-opts{padding:2px 12px 6px 14px}
  .dgb .dgb-slot-grid{grid-template-columns:repeat(3,1fr)}

  /* Total on the left, buttons on the right while they fit. On the details step Back and
     "Confirm booking" left the total so little room that "2 treatments PKR 4,500" broke
     over four lines, so the total never wraps and the buttons take the next line instead,
     with the main button stretching to fill it. */
  .dgb .dgb-bar{flex-wrap:wrap}
  .dgb .dgb-total{flex:0 1 auto}
  .dgb .dgb-total-label,.dgb .dgb-total-val{white-space:nowrap}
  .dgb .dgb-total-val{font-size:24px}
  .dgb .dgb-actions{flex:1 0 auto;margin-left:0;justify-content:flex-end}
  .dgb .dgb-actions .dgb-solid{flex:1 1 auto}
  .dgb .dgb-btn{padding:14px 20px}
  .dgb .dgb-back{width:52px;padding:0}
  .dgb .dgb-back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dgb .dgb-done-meta{grid-template-columns:1fr}
  .dgb .dgb-done-actions .dgb-btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .dgb *,.dgb-modal *{animation:none!important;transition:none!important}
}

/* a treatment picked from a service page arrives without an option; it has to be chosen
   before the booking can go, so the row says so rather than looking finished */
.dgb .dgb-card.needs-opt{background:var(--dgb-soft)}
.dgb .dgb-card.needs-opt .dgb-card-head{box-shadow:inset 3px 0 0 var(--dgb-rose,#B03A52)}
.dgb .dgb-card.needs-opt .dgb-card-sub b{color:var(--dgb-rose,#B03A52)}