/* Shankey Booking widget. Dark design that follows the Shankey theme.
   Colours and fonts come from the theme's --sk-* variables; every value below has a fallback,
   so the widget still looks right on a site that does not define them. All rules are scoped
   to #sb-booking-widget so nothing leaks into the rest of the page. */

#sb-booking-widget{
  --sb-bg:var(--sk-bg,#0e0d0b);
  --sb-alt:var(--sk-alt,#12110e);
  --sb-card:var(--sk-card,#1a1813);
  --sb-line:var(--sk-line,#2a261d);
  --sb-line2:var(--sk-line2,#3a3426);
  --sb-text:var(--sk-text,#efe8d8);
  --sb-muted:var(--sk-muted,#b9b19d);
  --sb-dim:var(--sk-dim,#8d856f);
  --sb-gold:var(--sk-gold,#b8964e);
  --sb-gold-hi:var(--sk-gold-hi,#d4b16a);
  --sb-err:#e58a7a;
  --sb-body:var(--sk-font-body,'Instrument Sans',system-ui,sans-serif);
  --sb-head:var(--sk-font-head,'Archivo',system-ui,sans-serif);
  color:var(--sb-text);font-family:var(--sb-body);font-size:16px;line-height:1.5;
  min-height:400px;padding:32px 0 60px;
}
#sb-booking-widget *{box-sizing:border-box}
#sb-booking-widget button{font-family:inherit;color:inherit}
.sb-loading{color:var(--sb-dim);text-align:center;padding:60px 0}
#sb-booking-widget .wrap{max-width:1000px;margin:0 auto;padding:0}

/* Layout: step rail + panel */
#sb-booking-widget .card{position:relative;display:flex;background:var(--sb-alt);border:1px solid var(--sb-line);border-radius:2px;overflow:hidden;min-height:560px}
#sb-booking-widget .rail{width:250px;flex-shrink:0;background:var(--sb-bg);padding:28px 22px;border-right:1px solid var(--sb-line)}
#sb-booking-widget .rail-step{display:flex;gap:12px;align-items:flex-start;padding:11px 4px;color:var(--sb-dim);font-size:15px}
#sb-booking-widget .rail-step .dot{width:24px;height:24px;border-radius:50%;border:1px solid var(--sb-line2);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;margin-top:1px}
#sb-booking-widget .rail-step.done{color:var(--sb-muted)}
#sb-booking-widget .rail-step.done .dot{background:var(--sb-gold);border-color:var(--sb-gold);color:var(--sb-bg);font-weight:700}
#sb-booking-widget .rail-step.active{color:var(--sb-text)}
#sb-booking-widget .rail-step.active .dot{border-color:var(--sb-gold);color:var(--sb-gold-hi);font-weight:700}
#sb-booking-widget .panel{flex:1;min-width:0;padding:34px 38px 24px;display:flex;flex-direction:column}
#sb-booking-widget .panel-body{flex:1}
#sb-booking-widget .panel h2,#sb-booking-widget .confirm h2{font-family:var(--sb-head);font-weight:800;font-stretch:76%;font-size:38px;line-height:1.05;text-transform:uppercase;letter-spacing:.01em;margin:0 0 6px;color:var(--sb-text)}
#sb-booking-widget .panel .sub{color:var(--sb-muted);margin:0 0 24px}

/* Selectable cards: branch, staff, service, slot, calendar day */
#sb-booking-widget .grid,#sb-booking-widget .svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#sb-booking-widget .opt-card,#sb-booking-widget .staff-card,#sb-booking-widget .svc-card,#sb-booking-widget .slot,#sb-booking-widget .cat-pill{background:var(--sb-card);border:1px solid var(--sb-line2);border-radius:2px;color:var(--sb-text);cursor:pointer;transition:border-color .15s}
#sb-booking-widget .opt-card:hover,#sb-booking-widget .staff-card:hover,#sb-booking-widget .svc-card:hover,#sb-booking-widget .slot:hover,#sb-booking-widget .cat-pill:hover{border-color:var(--sb-gold)}
#sb-booking-widget .selected{border-color:var(--sb-gold-hi);box-shadow:0 0 0 1px var(--sb-gold-hi)}
#sb-booking-widget .opt-card{padding:14px;display:flex;gap:12px;align-items:center;text-align:left}
#sb-booking-widget .name,#sb-booking-widget .staff-name{font-weight:600;font-size:16px}
#sb-booking-widget .meta,#sb-booking-widget .staff-meta,#sb-booking-widget .svc-desc,#sb-booking-widget .ci-meta{color:var(--sb-muted);font-size:14px;line-height:1.45}
#sb-booking-widget .img-ph{background:var(--sb-bg);border:1px solid var(--sb-line);display:flex;align-items:center;justify-content:center;color:var(--sb-dim);flex-shrink:0;overflow:hidden}
#sb-booking-widget .img-ph svg{width:36%;height:36%}
#sb-booking-widget .branch-thumb{width:74px;height:56px;border-radius:2px}
#sb-booking-widget .svc-icon{width:42px;height:42px;border-radius:2px}

#sb-booking-widget .cats{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
#sb-booking-widget .cat-pill{border-radius:20px;padding:7px 16px;font-size:14px;color:var(--sb-muted)}
#sb-booking-widget .cat-pill.active{border-color:var(--sb-gold);color:var(--sb-gold-hi)}

#sb-booking-widget .staff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#sb-booking-widget .staff-card{overflow:hidden;text-align:center;padding-bottom:12px}
#sb-booking-widget .staff-photo{width:100%;aspect-ratio:1/1;border:0;border-radius:0}
#sb-booking-widget .staff-name{margin-top:10px;padding:0 6px}
#sb-booking-widget .staff-meta{font-size:13px;margin-top:2px;padding:0 8px}
#sb-booking-widget .staff-notice{font-size:13px;font-weight:700;color:var(--sb-err);margin-top:4px;padding:0 8px}

#sb-booking-widget .svc-cat-group{margin-bottom:24px}
#sb-booking-widget .svc-cat-group:last-child{margin-bottom:0}
#sb-booking-widget .svc-cat-heading{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--sb-gold-hi);margin-bottom:12px}
#sb-booking-widget .svc-card{padding:16px;display:flex;flex-direction:column;gap:8px}
#sb-booking-widget .svc-title{font-weight:700;font-size:17px}
#sb-booking-widget .svc-desc{flex:1}
#sb-booking-widget .svc-foot{display:flex;justify-content:space-between;align-items:center}
#sb-booking-widget .svc-dur{font-size:13px;color:var(--sb-dim)}
#sb-booking-widget .price-tag{border:1px solid var(--sb-gold);color:var(--sb-gold-hi);font-weight:600;font-size:14px;padding:4px 11px;border-radius:2px;white-space:nowrap}

/* Date and time */
#sb-booking-widget .dt-wrap{display:flex;gap:24px}
#sb-booking-widget .cal{flex:1.1}
#sb-booking-widget .slots{flex:.9}
#sb-booking-widget .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
#sb-booking-widget .cal-head button{background:none;border:0;font-size:20px;cursor:pointer;color:var(--sb-muted)}
#sb-booking-widget .cal-head .m{font-weight:600}
#sb-booking-widget .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
#sb-booking-widget .cal-dow{text-align:center;font-size:12px;color:var(--sb-dim);padding-bottom:4px}
#sb-booking-widget .cal-day{text-align:center;padding:9px 0;border-radius:2px;cursor:pointer}
#sb-booking-widget .cal-day.disabled{color:var(--sb-line2);cursor:default}
#sb-booking-widget .cal-day.full{text-decoration:line-through;text-decoration-thickness:1px}
#sb-booking-widget .cal-day:not(.disabled):hover{background:var(--sb-card)}
#sb-booking-widget .cal-day.selected,#sb-booking-widget .slot.selected{background:var(--sb-gold);color:var(--sb-bg);border-color:var(--sb-gold);font-weight:700;box-shadow:none}
#sb-booking-widget .slots-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:320px;overflow-y:auto;padding-right:4px}
#sb-booking-widget .slot{padding:9px 0;text-align:center}
#sb-booking-widget .slot.taken{color:var(--sb-line2);text-decoration:line-through;cursor:default;background:none}

#sb-booking-widget .slot .slot-sub{font-size:12px;color:var(--sb-dim);margin-top:2px;line-height:1.2}
#sb-booking-widget .slot.selected .slot-sub{color:var(--sb-bg)}

/* Cart, summary, confirmation */
#sb-booking-widget .cart-item,#sb-booking-widget .sum-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--sb-line)}
#sb-booking-widget .ci-name{font-weight:600}
#sb-booking-widget .cart-total{display:flex;justify-content:space-between;padding-top:16px;font-weight:700;font-size:18px}
#sb-booking-widget .add-svc{background:none;border:1px solid var(--sb-line2);color:var(--sb-text);padding:8px 14px;border-radius:2px;cursor:pointer}
#sb-booking-widget .add-svc:hover{border-color:var(--sb-gold)}
#sb-booking-widget .sum-row .k,#sb-booking-widget .confirm .bookid{color:var(--sb-muted)}
#sb-booking-widget .sum-row .v{font-weight:600;text-align:right}
#sb-booking-widget .sum-note{border-left:3px solid var(--sb-gold);padding:6px 0 6px 16px;color:var(--sb-muted);font-size:14px;margin-top:16px}
#sb-booking-widget .confirm{text-align:center;padding:40px 10px}
#sb-booking-widget .confirm .ring{width:64px;height:64px;border-radius:50%;border:1px solid var(--sb-gold);color:var(--sb-gold-hi);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:28px}
#sb-booking-widget .confirm .bookid{font-size:14px;margin-bottom:22px}
#sb-booking-widget .confirm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:520px;margin:0 auto}
#sb-booking-widget .confirm-grid .k{font-size:12px;color:var(--sb-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
#sb-booking-widget .confirm-grid .v{font-weight:600}

/* Form fields (the theme's .field and .btn styles apply too; these keep the widget standalone) */
#sb-booking-widget .field{margin-bottom:16px}
#sb-booking-widget .field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
#sb-booking-widget .field input,#sb-booking-widget .field textarea{width:100%;background:var(--sb-card);border:1px solid var(--sb-line2);border-radius:2px;padding:11px 14px;font:inherit;color:var(--sb-text)}
#sb-booking-widget .field textarea{resize:vertical;min-height:80px}
#sb-booking-widget .field input::placeholder,#sb-booking-widget .field textarea::placeholder{color:var(--sb-dim);opacity:1}
#sb-booking-widget .field input:focus,#sb-booking-widget .field textarea:focus{outline:2px solid var(--sb-gold-hi);outline-offset:1px;border-color:var(--sb-gold)}
#sb-booking-widget .field.err input{border-color:var(--sb-err)}
#sb-booking-widget .errmsg{color:var(--sb-err);font-size:13px;margin-top:4px;display:none}
#sb-booking-widget .field.err .errmsg{display:block}
#sb-booking-widget .two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Buttons */
#sb-booking-widget .footer-nav{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:18px;border-top:1px solid var(--sb-line)}
#sb-booking-widget .btn{border:0;border-radius:2px;min-height:48px;padding:0 26px;font-size:16px;font-weight:600;cursor:pointer}
#sb-booking-widget .btn-primary{background:var(--sb-gold);color:var(--sb-bg)}
#sb-booking-widget .btn-primary:hover{background:var(--sb-gold-hi)}
#sb-booking-widget .btn-primary:disabled{background:var(--sb-line);color:var(--sb-dim);cursor:not-allowed}
#sb-booking-widget .btn-ghost{background:none;color:var(--sb-muted)}

@media (max-width:700px){
  #sb-booking-widget{padding:16px 0 40px}
  #sb-booking-widget .card{flex-direction:column;min-height:0}
  #sb-booking-widget .rail{width:100%;display:flex;overflow-x:auto;gap:18px;padding:14px 16px;border-right:0;border-bottom:1px solid var(--sb-line)}
  #sb-booking-widget .rail-step{flex-direction:column;align-items:center;gap:5px;flex-shrink:0;width:56px;padding:0;font-size:12px;text-align:center}
  #sb-booking-widget .rail-step .label{display:none;white-space:nowrap}
  #sb-booking-widget .rail-step.active .label{display:block}
  #sb-booking-widget .panel{padding:22px 18px 18px}
  #sb-booking-widget .panel h2,#sb-booking-widget .confirm h2{font-size:30px}
  #sb-booking-widget .grid,#sb-booking-widget .svc-grid,#sb-booking-widget .two-col,#sb-booking-widget .confirm-grid{grid-template-columns:1fr}
  #sb-booking-widget .staff-grid{grid-template-columns:repeat(2,1fr)}
  #sb-booking-widget .dt-wrap{flex-direction:column}
  #sb-booking-widget .footer-nav{flex-direction:column-reverse;align-items:stretch;gap:10px}
  #sb-booking-widget .footer-nav .btn{width:100%}
}
@media (max-width:420px){
  #sb-booking-widget .staff-grid{gap:10px}
  #sb-booking-widget .opt-card{padding:11px;gap:10px}
  #sb-booking-widget .branch-thumb{width:60px;height:46px}
  #sb-booking-widget .cal-day{padding:7px 0}
  #sb-booking-widget .slots-grid{max-height:260px}
}

/* Only for sites still using Elementor: let the widget span the full screen width on phones,
   because Elementor's wrapper can leave it narrower than the screen. Not used by the Shankey theme. */
@media (max-width:700px){
  .elementor #sb-booking-widget{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
}

#sb-booking-widget .staff-next{margin:6px 8px 0;font-size:12.5px;color:var(--sb-dim);line-height:1.35;min-height:2.7em}
/* While the next step loads, the current one stays put, dimmed, with a thin moving bar along the top */
#sb-booking-widget.sb-busy .card{pointer-events:none}
#sb-booking-widget.sb-busy .rail,#sb-booking-widget.sb-busy .panel{opacity:.45;transition:opacity .15s}
#sb-booking-widget.sb-busy .card::before{content:'';position:absolute;left:0;top:0;height:3px;width:35%;background:var(--sb-gold);z-index:2;animation:sb-slide 1s ease-in-out infinite alternate}
@keyframes sb-slide{from{transform:translateX(0)}to{transform:translateX(185%)}}
@media (prefers-reduced-motion:reduce){#sb-booking-widget.sb-busy .card::before{animation:none;width:100%}}
#sb-booking-widget .staff-next strong{color:var(--sb-gold);font-weight:600}
#sb-booking-widget .top-back{display:inline-block;margin:0 0 14px;padding:6px 0;font-size:13.5px;color:var(--sb-gold);text-decoration:none;cursor:pointer}
#sb-booking-widget .top-back:hover{text-decoration:underline}
#sb-booking-widget .summary-box{margin-top:22px;padding:16px 16px 6px;border:1px solid var(--sb-line2);border-radius:2px}
#sb-booking-widget .summary-title{font-weight:700;font-size:15px;margin-bottom:6px;color:var(--sb-text)}
#sb-booking-widget .summary-policy{margin:10px 0;font-size:12.5px;line-height:1.5;color:var(--sb-dim)}