/* The session booking (sessionform.py, session-book.js). Same tokens as class-apply.css. */
.hpsb{--s-navy:var(--navy,#2f5d34);--s-beige:var(--beige,#e7f1f7);--s-hair:var(--hair,#c6d6e4);
  --s-mute:var(--navy-mute,rgba(47,93,52,.62));color:var(--s-navy);max-width:640px;margin:0 auto;text-align:left;box-sizing:border-box;scroll-margin-top:80px}
.hpsb *{box-sizing:border-box}
.hpp-popup{display:none!important}   /* no "upcoming classes" pop-up over a booking in progress (as class-apply.css) */
.hpsb-status{font-size:14px;color:var(--s-mute);padding:18px 0;text-align:center}
.hpsb-spin{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:2px solid var(--s-hair);
  border-top-color:var(--s-navy);border-radius:50%;animation:hpsb-r .8s linear infinite}
@keyframes hpsb-r{to{transform:rotate(360deg)}}
.hpsb-steps{display:flex;gap:6px;list-style:none;padding:0;margin:8px 0 18px}
.hpsb-steps li{flex:1;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--s-mute);border-top:2px solid var(--s-hair);padding-top:8px;margin:0}
.hpsb-steps li span{width:20px;height:20px;border-radius:50%;border:1px solid var(--s-hair);display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex:none}
.hpsb-steps li.on,.hpsb-steps li.done{color:var(--s-navy);border-color:var(--s-navy)}
.hpsb-steps li.on span,.hpsb-steps li.done span{background:var(--s-navy);border-color:var(--s-navy);color:#fff}
.hpsb-card{background:#fff;border:1px solid var(--s-hair);padding:20px 18px;margin:0 0 16px}
.hpsb-card h3{font-weight:inherit;font-size:17px;letter-spacing:.04em;margin:0 0 10px}
.hpsb-secure{font-size:12.5px;color:var(--s-mute);margin:0 0 14px}
/* step 1: what is booked and in which zone the times are, at reading size (audit C-F3) */
.hpsb-facts{font-size:16px;margin:0 0 4px;letter-spacing:.02em}
.hpsb-tz{font-size:14px;color:var(--s-mute);margin:0 0 16px}.hpsb-tz b{color:var(--s-navy);font-weight:inherit}
.hpsb-secure{margin:12px 0 0;text-align:center}
.hpsb-note{background:var(--s-beige);padding:12px 14px;font-size:14px;margin:0 0 14px}
.hpsb-lab{display:block;font-size:13px;color:var(--s-mute);margin:0 0 12px}
.hpsb input:not([type=radio]):not([type=checkbox]),.hpsb select,.hpsb textarea{display:block;width:100%;margin-top:5px;font:inherit;font-size:16px;
  color:var(--s-navy);padding:10px 12px;border:1px solid var(--s-hair);background:#fff;border-radius:0}
.hpsb textarea{resize:vertical;min-height:110px}
.hpsb input:focus,.hpsb select:focus,.hpsb textarea:focus{outline:2px solid var(--s-navy);outline-offset:-1px}
.hpsb-count{display:block;text-align:right;font-size:11.5px;margin-top:3px}
.hpsb-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
.hpsb-row3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hpsb-sub{font-size:13px;color:var(--s-mute);margin:4px 0 0}
.hpsb-set{border:0;padding:0;margin:0 0 14px;min-width:0}
.hpsb-set legend{font-size:13px;color:var(--s-mute);padding:0;margin:0 0 6px}
.hpsb-check{display:block;font-size:14.5px;color:var(--s-navy);margin:0 0 6px;cursor:pointer}
.hpsb-check input{accent-color:var(--s-navy);margin-right:6px}
.hpsb-days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:4px 0 12px;-webkit-overflow-scrolling:touch}
.hpsb-day{flex:none;width:64px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;background:#fff;
  border:1px solid var(--s-hair);color:var(--s-navy);font:inherit;cursor:pointer}
.hpsb-day small{font-size:11px;color:var(--s-mute);letter-spacing:.04em}
.hpsb-day b{font-weight:inherit;font-size:20px}
.hpsb-day.on{background:var(--s-navy);border-color:var(--s-navy);color:#fff}
.hpsb-day.on small{color:rgba(255,255,255,.8)}
.hpsb-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.hpsb-time{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;background:#fff;border:1px solid var(--s-hair);
  color:var(--s-navy);font:inherit;text-align:left;cursor:pointer}
.hpsb-time b{font-weight:inherit;font-size:17px}
.hpsb-time span{font-size:12.5px;color:var(--s-mute)}
.hpsb-time:hover,.hpsb-day:hover{border-color:var(--s-navy)}
.hpsb-sum{background:var(--s-beige);border-color:var(--s-beige)}
.hpsb-sum p{margin:0 0 6px;font-size:14.5px;line-height:1.6}
.hpsb-sum b{font-weight:inherit;font-size:16px}
.hpsb-price{font-size:15px!important}
.hpsb-link{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--s-navy);text-decoration:underline;cursor:pointer}
.hpsb-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.hpsb-ts{margin:6px 0 4px}
.hpsb-err{color:#a23b2a;font-size:14px;margin:10px 0 0}
.hpsb-btn{display:block;width:100%;margin-top:12px;background:var(--s-navy);color:#fff;border:0;font:inherit;font-size:16px;letter-spacing:.04em;padding:15px;cursor:pointer}
.hpsb-btn:disabled{opacity:.6;cursor:default}
.hpsb-done{text-align:center}
.hpsb-tick{width:48px;height:48px;border-radius:50%;background:var(--s-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;margin:4px auto 12px}
@media (max-width:480px){.hpsb-row{grid-template-columns:minmax(0,1fr)}.hpsb-row3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* the IZI page's instructor cards (sessionform.cards): "Book with <name>" picks that instructor in the booking below */
.inst-book{display:block;width:fit-content;margin:18px auto 0;padding:12px 28px;background:var(--navy,#2f5d34);
  color:#fff;text-decoration:none;font-size:var(--fs-s,15px);letter-spacing:.12em;border:1px solid var(--navy,#2f5d34)}
.inst-book:hover,.inst-book:focus{background:#fff;color:var(--navy,#2f5d34)}
/* phones: one compact row per instructor (photo, name) instead of five full-height cards (audit C-F4) */
@media (max-width:600px){
  .instructors-grid{gap:16px}
  .instructor-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 16px;align-items:center;text-align:left;padding:18px 18px 20px}
  .instructor-card .inst-photo{width:64px;height:64px;max-width:none;aspect-ratio:auto;border-radius:50%;margin:0}
  .instructor-card .inst-jp{margin:0}
  .instructor-card .inst-msg,.instructor-card .inst-book,.instructor-card .inst-profile-link{grid-column:1/-1}
  .instructor-card .inst-msg{margin:12px 0 0;text-align:left}
  .instructor-card .inst-msg-toggle{padding:8px 0}
  .instructor-card .inst-book{width:100%;text-align:center;margin-top:14px}
  .instructor-card .inst-profile-link{justify-self:center}
}
.hpsb-fx{font-size:var(--fs-s)!important;color:var(--s-mute);margin:4px 0 0}
.hpsb-fx-fee{color:var(--navy-mute,rgba(47,93,52,.62));margin:var(--s1) 0 var(--s4)}