/* Diamond Consulate: dedicated appointment pages (book/<service>/) */

/* Scrolling trust bar */
.appt-page .dc-recognition{background:#f7f3ed!important;border-top:1px solid #e8e0d5;border-bottom:1px solid #e8e0d5;padding:clamp(1.75rem,4vw,2.75rem) 0}
.appt-page .dc-recognition-top{background:transparent!important;text-align:center;padding:0 max(16px,env(safe-area-inset-left,0px));margin-bottom:1.1rem}
.appt-page .dc-recognition-top h2{font-family:Cardo,Georgia,serif;font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.3;color:#28211c;margin:0;text-align:center}
.appt-page .dc-recognition-rail{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none}
.appt-page .dc-recognition-rail::-webkit-scrollbar{display:none}
.appt-page .dc-recognition-rail:focus-visible{box-shadow:inset 0 0 0 2px #b9a281}
.appt-page .dc-recognition-track{display:flex;width:max-content}
.appt-page .dc-recognition-list{display:flex;align-items:center;gap:clamp(1.75rem,4vw,3.5rem);list-style:none;margin:0;padding:0 clamp(.9rem,2vw,1.75rem)}
.appt-page .dc-recognition-list li{flex:0 0 auto;margin:0;padding:0}
.appt-page .dc-recognition-item{display:flex;align-items:center;justify-content:center;height:72px;text-decoration:none}
.appt-page .dc-recognition-logo img{display:block;height:56px;width:auto;max-width:170px;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.05);opacity:.82;transition:opacity .25s ease,filter .25s ease}
.appt-page .dc-recognition-item:hover img,.appt-page .dc-recognition-item:focus-visible img{opacity:1;filter:none}
.appt-page .dc-news-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:700px){.appt-page .dc-recognition-item{height:60px}.appt-page .dc-recognition-logo img{height:44px;max-width:130px}}

/* Booking block */
.appt-page .appt-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin:0 auto 1rem}
.appt-page .appt-help{max-width:760px;margin:1.1rem auto 0;text-align:center!important;color:var(--ink-soft)}
.appt-page .expect dd a{text-decoration:none;border-bottom:1px solid var(--brass)}

/* Steps and practical details start at the same line */
.appt-page .appt-steps{align-items:start!important}
.appt-page .steps .step h3{margin-bottom:.35rem}

/* Other appointments */
.appt-page .appt-others{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;margin-top:1.75rem;border-top:1px solid #dcd0c1}
.appt-page .appt-others a{display:block;padding:1.05rem .25rem;border-bottom:1px solid #dcd0c1;text-decoration:none;color:var(--ink)}
.appt-page .appt-others a span{display:block;font-family:Cardo,Georgia,serif;font-size:1.15rem;line-height:1.35}
.appt-page .appt-others a small{display:block;margin-top:.2rem;font-size:.85rem;color:var(--ink-soft);line-height:1.5}
.appt-page .appt-others a:hover span,.appt-page .appt-others a:focus-visible span{text-decoration:underline;text-underline-offset:4px}
.appt-page .appt-related{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem;margin-top:1.75rem}
.appt-page .appt-related a{text-decoration:none;border-bottom:1px solid var(--brass)}

/* Final call to action */
.appt-page .appt-final{text-align:center}
.appt-page .appt-final p{text-align:center!important;max-width:58ch;margin:0 auto 1.4rem}

@media (prefers-reduced-motion:reduce){.appt-page .dc-recognition-logo img{transition:none}}

.appt-page .appt-crumb-current{color:#6f6258}

/* Booking calendar centered on its own, no side panel */
.appt-page .booking-first .booklay{display:block!important;width:100%;max-width:none;margin:0 auto}

/* Visit details woven into the reviews section */
.appt-page .appt-review-details{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 0;max-width:1240px;margin:1.6rem auto 0;padding:1.1rem max(16px,env(safe-area-inset-left,0px)) 0;border-top:1px solid #dcd0c1;font-family:Cardo,Georgia,serif;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.6;color:#60564d}
.appt-page .appt-review-details li{margin:0;padding:0 .85rem;white-space:nowrap}
.appt-page .appt-review-details li+li{border-left:1px solid #b9a281}
@media(max-width:600px){.appt-page .appt-review-details{flex-direction:column;align-items:center}.appt-page .appt-review-details li+li{border-left:0}}

/* Book Appointment hub */
.appt-page .appt-hub .lede{text-align:center!important;max-width:56ch;margin:0 auto}
.appt-page .appt-hub-group{font-family:Cardo,Georgia,serif;font-weight:400;text-align:center;margin:2.4rem 0 0;font-size:clamp(1.3rem,2vw,1.6rem)}
.appt-page .appt-hub .appt-others{margin-top:1rem}
.appt-page .appt-hub .appt-others{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:600px){.appt-page .appt-hub .appt-others{grid-template-columns:1fr}}

/* Give Acuity the full booking panel at every screen size. */
.booking-page.appt-page .booking-first > .wrap {
  width: 100% !important;
  max-width: 1320px !important;
}
.booking-page.appt-page .booking-first .bookframe {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding-inline: clamp(.4rem, 2vw, 1.5rem);
}
.booking-page.appt-page .booking-first #jos-book {
  width: 100%;
  max-width: none;
}
.booking-page.appt-page .booking-first #jos-book > iframe {
  display: block;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin-inline: auto;
}

/* Group appointment choices and make the full card clickable. */
.appt-page .appt-hub .dc-appointment-group {
  margin-top: 1.5rem;
  padding: clamp(1rem, 2.5vw, 2rem);
  background: #eae0d5;
  border: 1px solid #d9cbbb;
  border-radius: .5rem;
}
.appt-page .appt-hub .appt-hub-group { margin: 0; }
.appt-page .appt-hub .appt-others {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
  gap: .75rem;
  border: 0;
}
.appt-page .appt-hub .appt-others a {
  height: 100%;
  box-sizing: border-box;
  padding: 1rem;
  background: #faf6ef;
  border: 1px solid #d9cbbb;
  border-radius: .35rem;
}
.appt-page .appt-hub .appt-others a:hover,
.appt-page .appt-hub .appt-others a:focus-visible {
  border-color: #806647;
  background: #fffaf2;
}