/* Jinar — booking refresh: step rail with icons and a gliding pill,
   section-coloured treatment tabs, softer chosen states. Pairs with
   /js/booking-motion.js. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── step rail ──────────────────────────────────────────── */
.steps.steps-v2{
  position:relative;isolation:isolate;
  display:inline-flex;flex-wrap:nowrap;gap:4px;
  padding:5px;border-radius:100px;
  background:var(--cream-soft);border:1px solid rgba(31,26,18,.06);
  font-size:11px;letter-spacing:.14em;
}
.steps-v2 li{position:relative;z-index:1;gap:10px;align-items:center;line-height:1;padding:6px 16px 6px 6px;border-radius:100px;transition:color .4s ease}
.steps-v2 > li > span{
  width:30px;height:30px;border:0;background:transparent;color:inherit;
  transition:background .4s ease,color .4s ease;
}
.steps-v2 > li > span svg{width:18px;height:18px;display:block}
.steps-v2 li.on{color:var(--paper)}
.steps-v2 > li.on > span{background:rgba(246,241,230,.16);color:var(--paper)}
.steps-v2 li.done{color:var(--ink)}
.steps-v2 > li.done > span{background:var(--paper);color:var(--caramel)}
.steps.steps-v2 > .steps-mark{
  display:block;height:auto;border:0;margin:0;   /* booking.css styles every span in the rail as a 24px circle */                       /* the dark pill behind the current step */
  position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:100px;
  background:var(--ink);box-shadow:0 8px 22px -10px rgba(31,26,18,.6);
  transition:transform .6s cubic-bezier(.65,0,.35,1),width .6s cubic-bezier(.65,0,.35,1),opacity .4s ease;
}
.steps.steps-v2 > .steps-line{
  display:block;border:0;width:0;                       /* progress: a gold thread under the steps you have done */
  position:absolute;z-index:0;bottom:1px;height:2px;border-radius:2px;background:var(--caramel-soft);
  transition:width .6s cubic-bezier(.65,0,.35,1);
}

/* ── chosen states: one consistent "pressed" look ───────── */
.choice,.mode{transition:border-color .3s ease,background .3s ease,box-shadow .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.choice:hover,.mode:hover{transform:translateY(-2px)}

/* treatment tabs: the section's icon and colour, like the menu */
.cat-tabs button{display:inline-flex;align-items:center;gap:8px;transition:background .35s ease,border-color .35s ease,color .35s ease,transform .3s ease}
.ct-ic{display:inline-grid;place-items:center;width:18px;height:18px;color:var(--c,#A8740F);transition:color .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.ct-ic svg{width:100%;height:100%;display:block}
.cat-tabs button:hover .ct-ic{transform:rotate(-8deg) scale(1.12)}
.cat-tabs button[aria-selected="true"]{background:var(--c,#A8740F);border-color:var(--c,#A8740F);color:#FBF6EA}
.cat-tabs button[aria-selected="true"] .ct-ic{color:#FBF6EA}

/* the list takes the colour of its section */
#catalogue .tr-tag{color:var(--c,var(--label));transition:color .4s ease}
#catalogue .opt-btn{transition:background .3s ease,border-color .3s ease,color .3s ease,transform .25s ease}
#catalogue .opt-btn:hover:not(:disabled):not([aria-pressed="true"]){border-color:var(--c,var(--caramel-soft));transform:translateY(-2px)}
#catalogue .opt-btn[aria-pressed="true"]{background:var(--c,var(--forest));border-color:var(--c,var(--forest))}

/* calendar and times */
.day,.slot{transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease}

/* cart: the total sits on a soft panel */
.cart{transition:box-shadow .4s ease}
.cart-line{transform-origin:top}

/* ── phones: the rail stays visible as five icons;
      the current one widens to show its name ── */
@media (max-width:820px){
  .bk-bar .steps.steps-v2{display:flex;width:100%;justify-content:space-between;gap:2px}
  .steps-v2 li:not(.on){display:flex}
  .steps-v2 li{padding:4px;gap:0}
  .steps-v2 .st-label{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .6s cubic-bezier(.65,0,.35,1),opacity .4s ease,margin .6s ease}
  .steps-v2 li.on{padding:4px 14px 4px 4px}
  .steps-v2 li.on .st-label{max-width:120px;opacity:1;margin-left:8px;color:var(--paper)}
  .steps-v2 > li.on > span{display:grid;width:30px;height:30px;border-radius:50%;background:rgba(246,241,230,.16);color:var(--paper);font-size:0}
  .steps-v2 > li.on > span::after{content:none}
  .steps-v2 > li > span{width:30px;height:30px}
  .steps-v2 > li > span svg{width:17px;height:17px}
  .cat-tabs button{gap:6px}
  .ct-ic{width:16px;height:16px}
}

@media (prefers-reduced-motion:reduce){
  .steps-mark,.steps-line,.steps-v2 .st-label{transition:none !important}
}