/* ============================================================
   /book — appointment booking page.

   SCOPED STYLESHEET. Every selector is prefixed .book-* and this
   file is loaded ONLY by /book/index.html, so nothing here can
   affect any other page. styles.css is untouched.

   Colors, fonts, radii and shadows are copied from the values
   already used in styles.css so the page reads as part of the
   site rather than a bolt-on:
     navy    #0F2A44      navy-mid #1A5276
     gold    #E8A020      gold-dk  #8C5800
     body    #343A40      muted    #5C636A
     border  #E9ECEF      hairline #6C757D
     heading font 'Montserrat', body font 'Open Sans'
   ============================================================ */

.book-wrap{max-width:840px;margin:0 auto;}

/* ---------- step rail ---------- */
.book-steps{list-style:none;margin:0 0 26px;padding:0;display:flex;gap:10px;counter-reset:s;}
.book-steps li{flex:1;display:flex;align-items:center;gap:9px;padding:12px 14px;
  background:#fff;border:1px solid #E9ECEF;border-radius:6px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:.85rem;color:#5C636A;
  transition:border-color .3s,color .3s,background .3s;}
.book-steps li span{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:#E9ECEF;color:#5C636A;
  font-size:.8rem;font-weight:700;flex-shrink:0;transition:background .3s,color .3s;}
.book-steps li.is-on{border-color:#0F2A44;color:#0F2A44;background:#fff;}
.book-steps li.is-on span{background:#0F2A44;color:#fff;}
.book-steps li.is-done{border-color:#1E7D3F;color:#1E5E33;background:#E8F5EC;}
.book-steps li.is-done span{background:#1E7D3F;color:#fff;}

/* ---------- cards ---------- */
.book-card{background:#fff;border:1px solid #E9ECEF;border-radius:8px;
  box-shadow:0 2px 14px rgba(15,42,68,.06);padding:30px;margin-bottom:26px;}
.book-card__title{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.25rem;
  color:#0F2A44;margin:0 0 6px;}
.book-card__sub{color:#5C636A;font-size:.95rem;line-height:1.65;margin:0 0 22px;}

/* ---------- loading ---------- */
.book-loading{display:flex;align-items:center;gap:10px;color:#5C636A;
  font-size:.95rem;padding:22px 0;margin:0;}
.book-spinner{width:17px;height:17px;border:2px solid #E9ECEF;border-top-color:#0F2A44;
  border-radius:50%;display:inline-block;animation:bookSpin .7s linear infinite;flex-shrink:0;}
@keyframes bookSpin{to{transform:rotate(360deg)}}

/* ---------- day + slot picker ---------- */
.book-day{border-top:1px solid #E9ECEF;padding:20px 0 4px;}
.book-day:first-child{border-top:0;padding-top:0;}
.book-day__label{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1rem;
  color:#0F2A44;margin:0 0 12px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.book-day__count{font-family:'Open Sans',sans-serif;font-weight:400;font-size:.8rem;color:#5C636A;}
.book-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin:0 0 6px;}
.book-slot{padding:13px 10px;border:1px solid #6C757D;border-radius:4px;background:#fff;
  font-family:'Open Sans',sans-serif;font-size:.95rem;font-weight:600;color:#0F2A44;
  cursor:pointer;transition:border-color .3s,background .3s,color .3s,box-shadow .3s,transform .15s;
  -webkit-tap-highlight-color:transparent;text-align:center;line-height:1.3;}
.book-slot:hover{border-color:#0F2A44;background:#0F2A44;color:#fff;transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(15,42,68,.22);}
.book-slot:focus-visible{outline:3px solid #0F2A44;outline-offset:2px;}
.book-slot[disabled]{border-color:#E9ECEF;background:#F8F9FA;color:#ADB5BD;
  cursor:not-allowed;transform:none;box-shadow:none;text-decoration:line-through;}
.book-empty{color:#5C636A;font-size:.95rem;padding:26px 0;text-align:center;margin:0;}
.book-empty strong{display:block;font-family:'Montserrat',sans-serif;color:#0F2A44;
  font-size:1.05rem;margin-bottom:6px;}

/* ---------- chosen slot banner ---------- */
.book-chosen{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#F4F8FC;border:1px solid #C9DCF0;border-left:4px solid #0F2A44;
  border-radius:4px;padding:15px 18px;margin:0 0 24px;}
.book-chosen__txt{flex:1;min-width:180px;}
.book-chosen__txt strong{display:block;font-family:'Montserrat',sans-serif;
  font-weight:700;color:#0F2A44;font-size:1rem;}
.book-chosen__txt span{display:block;color:#5C636A;font-size:.9rem;margin-top:2px;}
.book-change{background:none;border:1px solid #0F2A44;color:#0F2A44;border-radius:4px;
  padding:8px 16px;font-family:'Montserrat',sans-serif;font-weight:600;font-size:.85rem;
  cursor:pointer;transition:background .3s,color .3s;flex-shrink:0;}
.book-change:hover{background:#0F2A44;color:#fff;}

/* ---------- address autocomplete ---------- */
.book-ac{position:relative;}
#bk-suggest{position:absolute;top:100%;left:0;right:0;z-index:60;margin:4px 0 0;padding:4px 0;
  background:#fff;border:1px solid #6C757D;border-radius:4px;
  box-shadow:0 8px 24px rgba(15,42,68,.16);list-style:none;max-height:280px;overflow-y:auto;}
#bk-suggest li{padding:11px 16px;cursor:pointer;line-height:1.4;}
#bk-suggest li[aria-selected="true"]{background:#F4F8FC;}
#bk-suggest .m{display:block;color:#343A40;font-weight:600;font-size:.95rem;}
#bk-suggest .s{display:block;color:#5C636A;font-size:.8rem;margin-top:1px;}

/* ---------- submit + status ---------- */
.book-submit{width:100%;justify-content:center;margin-top:8px;}
.book-status{margin:0 0 4px;}
.book-status:empty{display:none;}
.book-status .ok,.book-status .err{display:block;padding:14px 18px;border-radius:6px;
  font-weight:600;font-size:.95rem;line-height:1.5;margin-bottom:18px;}
.book-status .ok{background:#E8F5EC;border:1px solid #1E7D3F;color:#1E5E33;}
.book-status .err{background:#FDECEA;border:1px solid #C0392B;color:#96281B;}

/* ---------- confirmation ---------- */
.book-card--done{text-align:center;}
.book-done__check{width:64px;height:64px;margin:4px auto 18px;border-radius:50%;
  background:#E8F5EC;border:2px solid #1E7D3F;color:#1E7D3F;
  display:flex;align-items:center;justify-content:center;font-size:32px;line-height:1;}
.book-recap{max-width:430px;margin:22px auto 0;text-align:left;
  border:1px solid #E9ECEF;border-radius:6px;overflow:hidden;}
.book-recap div{display:flex;justify-content:space-between;gap:16px;
  padding:13px 18px;border-top:1px solid #E9ECEF;}
.book-recap div:first-child{border-top:0;}
.book-recap dt{color:#5C636A;font-size:.85rem;flex-shrink:0;}
.book-recap dd{margin:0;font-weight:600;color:#0F2A44;font-size:.95rem;text-align:right;word-break:break-word;}
.book-done__note{color:#5C636A;font-size:.9rem;line-height:1.7;margin:22px auto 0;max-width:480px;}
/* .btn-group is a plain flex row with no justify-content, so it inherits
   flex-start. Centre it explicitly here rather than with an inline style
   so the rule survives future markup edits. */
.book-done__actions{justify-content:center;align-items:center;margin-top:24px;}

/* ---------- trust strip ---------- */
.book-trust{list-style:none;margin:0 0 20px;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.book-trust li{background:#fff;border:1px solid #E9ECEF;border-radius:6px;
  padding:16px 12px;text-align:center;}
.book-trust strong{display:block;font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:.95rem;color:#0F2A44;}
.book-trust span{display:block;font-size:.78rem;color:#5C636A;margin-top:3px;line-height:1.4;}

.book-alt{text-align:center;color:#5C636A;font-size:.95rem;margin:0;}
.book-alt a{color:#1A5276;font-weight:600;}

/* ---------- responsive ---------- */
@media(max-width:767px){
  .book-card{padding:22px 18px;}
  .book-steps{gap:6px;}
  .book-steps li{flex-direction:column;gap:5px;padding:10px 6px;font-size:.7rem;text-align:center;}
  .book-steps li span{width:22px;height:22px;font-size:.72rem;}
  .book-slots{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;}
  .book-slot{padding:12px 6px;font-size:.88rem;}
  .book-trust{grid-template-columns:repeat(2,1fr);}
  .book-recap div{flex-direction:column;gap:3px;}
  .book-recap dd{text-align:left;}
}