/* The public booking tool: the front office's look (../frontoffice/styles/app.css) plus the few pieces only this page has. */

.bk-main { max-width: 1000px; }
.bk-narrow { max-width: 520px; margin: 0 auto; }

.bk-card { padding: 16px; margin-bottom: 18px; }
.bk-card-title { font-size: 17px; font-weight: 800; margin: 0 0 6px; }
.bk-note { margin: 0 0 14px; color: var(--fo-muted); font-size: 13px; line-height: 1.5; }
.bk-label { display: block; font-size: 12px; font-weight: 700; color: var(--fo-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.bk-input {
  width: 100%; border: 1px solid var(--fo-border); border-radius: 8px; padding: 10px 12px; font-size: 14px;
  background: #fff; color: var(--fo-ink); font-family: inherit;
}
.bk-input:focus { outline: 2px solid var(--fo-brand); outline-offset: 1px; }
.bk-gap { margin-top: 16px; }
.bk-gap-s { margin-top: 12px; }
.bk-back { display: block; margin: 14px auto 0; }
.bk-green { color: var(--fo-green); font-weight: 700; }

.bk-inline { display: flex; gap: 8px; }
.bk-inline .bk-input { flex: 1; min-width: 0; }
.bk-small-btn {
  background: var(--fo-brand); color: #fff; border: none; border-radius: 8px; padding: 0 18px;
  font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.bk-small-btn:hover { background: var(--fo-brand-dark); }
.bk-small-btn:disabled { background: #9fc4cf; cursor: not-allowed; }

.bk-banner {
  border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; font-size: 14px; line-height: 1.5;
  background: #fff6e5; color: #8a5a00; border: 1px solid #f3dca7;
}
.bk-banner strong { display: block; margin-bottom: 2px; }
.bk-banner-info { background: var(--fo-grey-bg); color: var(--fo-brand-dark); border-color: var(--fo-border); }

.bk-controls { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; }
.bk-fee-field { min-width: 90px; }
.bk-fee-field .fo-fee { font-size: 20px; font-weight: 800; color: var(--fo-brand-dark); padding: 6px 0; }
.bk-fee-sub { display: block; font-size: 11.5px; font-weight: 500; color: var(--fo-muted); }

.bk-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
.bk-grid .bk-card { margin-bottom: 0; }

.bk-section-title { font-weight: 700; font-size: 15px; margin-bottom: 10px; }

.bk-days { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-day {
  border: 1px solid var(--fo-border); background: #fff; border-radius: 10px; padding: 8px 12px; min-width: 72px;
  text-align: center; cursor: pointer; font-family: inherit; color: var(--fo-ink); touch-action: manipulation;
}
.bk-day:hover { border-color: var(--fo-brand); }
.bk-day-dow { display: block; font-size: 11px; font-weight: 700; color: var(--fo-muted); text-transform: uppercase; letter-spacing: .4px; }
.bk-day-date { display: block; font-size: 15px; font-weight: 800; margin: 1px 0; }
.bk-day-free { display: block; font-size: 11px; color: var(--fo-green); font-weight: 600; }
.bk-day.bk-day-selected { background: var(--fo-brand); border-color: var(--fo-brand); color: #fff; }
.bk-day.bk-day-selected .bk-day-dow, .bk-day.bk-day-selected .bk-day-free { color: #fff; opacity: .9; }

/* A <button> tile that looks exactly like the front office's <div> slot (same padding, line height and second line). */
.bk-slot-btn { font-family: inherit; width: 100%; margin: 0; }
button.fo-slot { appearance: none; -webkit-appearance: none; }
button.fo-slot:disabled { cursor: not-allowed; }

.bk-hold {
  background: var(--fo-grey-bg); border: 1px solid var(--fo-border); border-radius: 8px; padding: 9px 12px;
  font-size: 13px; color: var(--fo-muted); margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center;
}
.bk-hold strong { color: var(--fo-brand-dark); font-size: 16px; font-variant-numeric: tabular-nums; }
.bk-hold.bk-hold-low strong { color: var(--fo-red); }

.bk-booking { padding: 14px 16px; margin-bottom: 12px; }
.bk-booking-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.bk-booking-title { font-weight: 800; font-size: 15px; text-transform: capitalize; }
.bk-booking-when { color: var(--fo-brand-dark); font-weight: 700; font-size: 14px; }
.bk-booking-meta { color: var(--fo-muted); font-size: 13px; margin-top: 2px; }
.bk-booking-actions { margin-top: 12px; }
.bk-cancel-link { background: none; border: none; color: var(--fo-red); font-weight: 700; font-size: 13.5px; cursor: pointer; padding: 0; font-family: inherit; }
.bk-cancel-link:hover { text-decoration: underline; }
.bk-booking-note { margin-top: 10px; color: var(--fo-muted); font-size: 12.5px; }
.bk-pill { display: inline-block; background: rgba(0,133,174,0.1); color: var(--fo-brand); border-radius: 10px; padding: 1px 8px; font-size: 11.5px; font-weight: 700; margin-left: 6px; text-transform: none; }

@media (max-width: 760px) {
  .bk-grid { grid-template-columns: 1fr; }
  .bk-controls { grid-template-columns: 1fr 1fr; }
  .bk-fee-field { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .bk-main { padding-top: 14px; }
  /* The days scroll sideways on a phone instead of filling the screen. */
  .bk-days { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .bk-day { flex: 0 0 auto; }
}

.bk-wide { grid-column: 1 / -1; }
.bk-phone-line strong { font-size: 18px; color: var(--fo-brand-dark); letter-spacing: .3px; }
.bk-pill-warn { background: var(--fo-red-bg); color: var(--fo-red); margin-left: 0; }

.bk-phone-row { align-items: center; justify-content: space-between; }
.bk-small-btn-ghost { background: var(--fo-grey-bg); color: var(--fo-brand-dark); border: 1px solid var(--fo-border); }
.bk-small-btn-ghost:hover { background: var(--fo-border); }
.bk-pill-grey { background: var(--fo-grey-bg); color: var(--fo-muted); margin-left: 0; }
.bk-add-link { font-size: 13px; color: var(--fo-brand); }
#bk-phone-form .bk-inline .fo-primary-btn { flex: 1; }
#bk-phone-form .bk-inline .bk-small-btn { padding: 12px 18px; }

/* ---------- Navigation: clinicians > services > booking ---------- */
.bk-brand-link { text-decoration: none; color: inherit; }
.bk-back { display: inline-block; margin: 0 0 12px; color: var(--fo-brand); font-weight: 700; font-size: 14px; text-decoration: none; }
.bk-back:hover { text-decoration: underline; }
.bk-back-link { margin-left: auto; margin-right: auto; }
.bk-sub { margin-top: 18px; }

.bk-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.bk-pcard, .bk-scard {
  display: flex; align-items: center; gap: 14px; padding: 16px; text-decoration: none; color: var(--fo-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bk-pcard:hover, .bk-scard:hover { border-color: var(--fo-brand); box-shadow: 0 4px 14px rgba(4,92,115,0.10); }
.bk-pcard-body, .bk-scard-body { min-width: 0; flex: 1; }
.bk-pcard-name { font-weight: 800; font-size: 16px; }
.bk-pcard-title { color: var(--fo-brand-dark); font-weight: 600; font-size: 13.5px; margin-top: 1px; }
.bk-pcard-quals { color: var(--fo-muted); font-size: 12.5px; margin-top: 3px; overflow-wrap: anywhere; }
.bk-pcard-count { color: var(--fo-brand); font-size: 12.5px; font-weight: 700; margin-top: 6px; }

.bk-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--fo-brand), var(--fo-brand-dark)); color: #fff; font-weight: 800; font-size: 18px; letter-spacing: .5px;
}
.bk-avatar-lg { width: 64px; height: 64px; font-size: 22px; }

.bk-phead { margin-bottom: 0; }
.bk-phead-row { display: flex; align-items: center; gap: 16px; }
.bk-about { margin: 14px 0 0; color: var(--fo-ink); font-size: 14px; line-height: 1.55; }

.bk-slist { display: flex; flex-direction: column; gap: 12px; }
.bk-scard-name { font-weight: 800; font-size: 16px; text-transform: capitalize; }
.bk-scard-desc { color: var(--fo-muted); font-size: 13px; line-height: 1.45; margin-top: 3px; }
.bk-scard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bk-tag { background: var(--fo-grey-bg); color: var(--fo-brand-dark); border-radius: 10px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; }
.bk-scard-fee { font-weight: 800; color: var(--fo-brand-dark); font-size: 17px; white-space: nowrap; text-align: right; }
.bk-scard-fee .bk-fee-sub { text-align: right; }

.bk-bhead { margin-bottom: 18px; }
.bk-bhead-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.bk-readonly { background: var(--fo-grey-bg) !important; color: var(--fo-muted) !important; cursor: not-allowed; }

/* The booked slip: the image alone, no frame or margin, always inside the screen. */
.fo-lightbox.bk-slip-lightbox { padding: 12px; }
.bk-slip-box { position: relative; line-height: 0; }
.bk-slip-img {
  display: block; width: auto; height: auto;
  max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  border-radius: 20px; box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.bk-slip-box .fo-lightbox-close { top: 10px; right: 10px; z-index: 2; background: rgba(255,255,255,0.9); box-shadow: 0 1px 4px rgba(0,0,0,0.25); }

/* ---------- My bookings (kept on this device) ---------- */
.bk-my-link {
  margin-left: auto; margin-right: 12px; display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  color: var(--fo-brand-dark); font-weight: 700; font-size: 13.5px; background: var(--fo-grey-bg); border: 1px solid var(--fo-border);
  border-radius: 20px; padding: 7px 14px; white-space: nowrap;
}
.bk-my-link:hover { border-color: var(--fo-brand); }
.fo-header-user { margin-left: 0; }
.bk-my-link.hidden + .fo-header-user { margin-left: auto; }
.bk-mycard { padding: 14px 16px; margin-bottom: 12px; }
.bk-mycard.bk-mycard-off { opacity: .62; }
.bk-mycard-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.bk-mycard-title { font-weight: 800; font-size: 15px; text-transform: capitalize; }
.bk-mycard-meta { color: var(--fo-muted); font-size: 13px; margin-top: 2px; }
.bk-mycard-when { color: var(--fo-brand-dark); font-weight: 700; font-size: 14px; text-align: right; }
.bk-mycard-actions { display: flex; gap: 18px; margin-top: 10px; }
.bk-my-act { background: none; border: none; padding: 0; color: var(--fo-brand); font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.bk-my-act:hover { text-decoration: underline; }
.bk-status { display: inline-block; border-radius: 10px; padding: 1px 9px; font-size: 11.5px; font-weight: 700; margin-left: 6px; text-transform: none; }
.bk-status-up { background: var(--fo-green-bg); color: var(--fo-green); }
.bk-status-off { background: var(--fo-red-bg); color: var(--fo-red); }
.bk-status-past { background: var(--fo-grey-bg); color: var(--fo-muted); }
.bk-my-note { text-align: center; margin-top: 18px; }
@media (max-width: 560px) { .bk-my-link { margin-right: 8px; padding: 6px 11px; font-size: 12.5px; } }

body.bk-lock { overflow: hidden; }

/* ---------- Clinician cards and the full profile ---------- */
.bk-pgrid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.bk-pcard { flex-direction: column; align-items: stretch; gap: 10px; padding: 18px; }
.bk-pcard-top { display: flex; align-items: center; gap: 14px; }
.bk-pcard-where { color: var(--fo-muted); font-size: 12.5px; margin-top: 3px; }
.bk-pcard .bk-pcard-quals { margin-top: 0; padding-left: 10px; border-left: 3px solid var(--fo-border); line-height: 1.5; }
.bk-pcard-about {
  margin: 0; color: var(--fo-ink); font-size: 13.5px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-pcard-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-tag-more { background: transparent; border: 1px dashed var(--fo-border); color: var(--fo-muted); }
.bk-pcard-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px dashed var(--fo-border); padding-top: 10px; margin-top: 2px; }
.bk-pcard-foot .bk-pcard-count { margin-top: 0; }
.bk-pcard-view { color: var(--fo-brand); font-weight: 700; font-size: 13.5px; }
.bk-pcard:hover .bk-pcard-view { text-decoration: underline; }

.bk-phead { padding: 0; overflow: hidden; margin-bottom: 0; }
.bk-pbanner { display: flex; align-items: center; gap: 18px; padding: 22px; background: linear-gradient(135deg, var(--fo-brand), var(--fo-brand-dark)); color: #fff; }
.bk-pbanner .bk-avatar { background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.5); }
.bk-avatar-xl { width: 76px; height: 76px; font-size: 26px; }
.bk-pbanner-name { font-weight: 800; font-size: 21px; line-height: 1.2; }
.bk-pbanner-title { font-weight: 600; font-size: 14.5px; opacity: .92; margin-top: 2px; }
.bk-pbanner-where { font-size: 13px; opacity: .85; margin-top: 6px; }
.bk-pbody { padding: 6px 22px 18px; }
.bk-psec { margin-top: 16px; }
.bk-psec-title { font-size: 12px; font-weight: 700; color: var(--fo-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.bk-plist { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.bk-phead .bk-about { margin: 0; white-space: pre-line; }

.bk-reset { text-align: center; margin-top: 4px; }
.bk-reset-link { background: none; border: none; color: var(--fo-red); font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; padding: 6px; }
.bk-reset-link:hover { text-decoration: underline; }
.bk-reset-confirm { background: var(--fo-red-bg); border-radius: 10px; padding: 14px 16px; text-align: left; margin-top: 8px; }
.bk-reset-confirm p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--fo-ink); }
.bk-reset-actions { display: flex; align-items: center; gap: 16px; }
.bk-reset-actions .fo-link-btn { margin-left: 0; }

/* ---------- Wider on a desktop: one clinician per line, profile beside the services ---------- */
.bk-main { max-width: 1240px; }
.bk-medium { max-width: 860px; margin: 0 auto; }

/* Clinician cards: two to a row on a desktop, one on a phone, all the same height (a fixed height on a desktop) so the rows line up. */
.bk-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bk-pcard { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 20px 22px; }
.bk-pcard-top { align-items: flex-start; }
.bk-pcard-mid { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.bk-pcard-mid:empty { display: block; }
.bk-pcard .bk-pcard-quals {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;   /* two lines, then cut */
}
.bk-pcard-about { -webkit-line-clamp: 3; }
.bk-pcard-tags { max-height: 26px; overflow: hidden; }                                            /* one line of tags */
.bk-pcard-foot { flex: 0 0 auto; margin-top: auto; }
@media (min-width: 701px) { .bk-pcard { height: 290px; } }
@media (max-width: 700px) { .bk-pgrid { grid-template-columns: 1fr; gap: 14px; } .bk-pcard { height: auto; } }

.bk-pgrid2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.bk-pservices .faq-page-title { margin-top: 0; }
@media (min-width: 900px) { .bk-phead { position: sticky; top: 84px; } }
@media (max-width: 899px) { .bk-pgrid2 { grid-template-columns: 1fr; } .bk-phead { position: static; } }


/* The days: one line, no scrollbar, swipe or drag to move along. */
.bk-days {
  position: relative; display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
  cursor: grab; user-select: none; -webkit-user-select: none; padding-bottom: 2px;
}
.bk-days::-webkit-scrollbar { display: none; width: 0; height: 0; }
.bk-days.bk-dragging { cursor: grabbing; }
.bk-days .bk-day { flex: 0 0 auto; }
.bk-days .fo-empty { padding: 14px; }

/* A one-line strip inside a grid cell must not stretch the cell: the cell shrinks to its column and the strip scrolls inside it. */
.bk-grid > * { min-width: 0; }
.bk-days { max-width: 100%; }

/* ---------- The clinician card: about, fee, an expertise strip, languages, next slot ---------- */
.bk-pcard { gap: 10px; }
.bk-pcard-top { align-items: center; }
.bk-pcard-about { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fo-ink); -webkit-line-clamp: 3; }
.bk-pcard-price { font-weight: 800; font-size: 17px; color: var(--fo-brand-dark); }
.bk-pcard-label { font-size: 11.5px; font-weight: 700; color: var(--fo-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
.bk-pcard-exp { min-width: 0; }
.bk-pcard-strip {
  display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overflow-y: hidden; max-height: none;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; cursor: grab; user-select: none; -webkit-user-select: none;
}
.bk-pcard-strip::-webkit-scrollbar { display: none; width: 0; height: 0; }
.bk-pcard-strip.bk-dragging { cursor: grabbing; }
.bk-pcard-strip .bk-tag { flex: 0 0 auto; white-space: nowrap; padding: 4px 11px; font-size: 12px; }
.bk-pcard-line { font-size: 13px; color: var(--fo-ink); }
.bk-pcard-line span, .bk-pcard-next span { color: var(--fo-muted); font-weight: 600; }
.bk-pcard-next { font-size: 13.5px; font-weight: 700; color: var(--fo-green); }
.bk-pcard-next span { color: var(--fo-muted); }
.bk-pcard-foot { margin-top: auto; }
@media (min-width: 701px) { .bk-pcard { height: 340px; } }

/* A clinician's photo sits over their initials and fills the round avatar. */
.bk-avatar { position: relative; overflow: hidden; }
.bk-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
.bk-pbanner .bk-avatar-xl { border: 2px solid rgba(255,255,255,0.7); }

/* Who the appointment is for: one profile under the other, the chosen one marked */
.bk-people { display: flex; flex-direction: column; gap: 8px; }
.bk-person { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; font-weight: 700; font-size: 14px; padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--fo-border); background: #fff; color: var(--fo-text, #222); cursor: pointer; }
.bk-person:hover { border-color: var(--fo-brand); }
.bk-person-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--fo-border); background: #fff; box-sizing: border-box; }
.bk-person-on { border-color: var(--fo-brand); background: rgba(0,133,174,0.08); color: var(--fo-brand-dark); }
.bk-person-on .bk-person-dot { border-color: var(--fo-brand); background: radial-gradient(circle, var(--fo-brand) 0 45%, #fff 50%); }
.bk-person-add { border-style: dashed; font-weight: 600; }
.bk-person-add.bk-person-on { border-style: solid; }
.bk-newperson { margin-top: 10px; }
.bk-newperson input { width: 100%; box-sizing: border-box; }
.bk-newperson .fo-field { margin-bottom: 10px; }
.bk-np-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bk-newperson select { width: 100%; box-sizing: border-box; }

/* The time to be there, large */
.bk-bigtime { text-align: center; padding: 6px 0 12px; border-bottom: 1px dashed var(--fo-border); margin-bottom: 6px; }
.bk-bigtime-label { color: var(--fo-muted); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.bk-bigtime-value { color: var(--fo-brand-dark); font-size: 38px; font-weight: 800; line-height: 1.15; margin-top: 2px; }
.fo-confirm-fee { font-size: 15px; }
.fo-confirm-fee span { font-size: 18px; }
.bk-newperson #bk-c-name:not(:placeholder-shown) { text-transform: uppercase; }

/* Log in */
.bk-login-btn { margin-right: 12px; font: inherit; font-weight: 700; font-size: 13.5px; padding: 7px 14px; border-radius: 20px; border: 1px solid var(--fo-brand); background: #fff; color: var(--fo-brand-dark); cursor: pointer; margin-left: auto; }
.bk-login-btn:hover { background: var(--fo-brand); color: #fff; }
.bk-login-box { position: relative; background: #fff; border-radius: 14px; padding: 26px 22px 20px; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.bk-login-box .fo-login-subtitle { margin-bottom: 10px; }
.bk-otp-form { text-align: left; margin-top: 4px; }
.bk-otp-form .fo-field { margin-bottom: 12px; }
.bk-otp-form input[type=text], .bk-otp-form input[type=tel] { width: 100%; box-sizing: border-box; }
.bk-otp-row { display: flex; align-items: center; gap: 8px; }
.bk-otp-row .bk-cc { padding: 0 4px; font-weight: 600; }
.bk-otp-form .fo-primary-btn { width: 100%; }
.bk-otp-links { margin-top: 10px; font-size: 13px; text-align: center; }
.bk-otp-links button { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.bk-otp-links button:disabled { opacity: .5; cursor: default; text-decoration: none; }
#bk-code { letter-spacing: 8px; font-size: 22px; text-align: center; }
.bk-logout-line { text-align: center; margin: 26px 0 8px; font-size: 12.5px; }
.bk-logout-line a { color: var(--fo-muted); text-decoration: none; opacity: .75; }
.bk-logout-line a:hover { opacity: 1; text-decoration: underline; }
.bk-logout-line a + a:not(.hidden)::before { content: '\00b7'; margin: 0 8px; }
@media (max-width: 560px) { .bk-login-btn { margin-right: 8px; padding: 6px 11px; font-size: 12.5px; } }

/* My bookings: the page's header */
.bk-myhead { margin: 4px 0 18px; padding: 20px 22px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, var(--fo-brand-dark) 0%, var(--fo-brand) 100%); box-shadow: 0 6px 18px rgba(4, 92, 115, 0.18); }
.bk-myhead-title { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.bk-myhead-who { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500;
  background: rgba(255,255,255,0.16); border-radius: 20px; padding: 5px 12px; }
.bk-myhead-who strong { font-weight: 700; letter-spacing: .02em; }
.bk-myhead-dot { width: 8px; height: 8px; border-radius: 50%; background: #5be3a0; box-shadow: 0 0 0 3px rgba(91,227,160,0.28); }

/* ---------- Clinician list (home) ---------- */
.bk-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 2px 0 18px; }
.bk-hero-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--fo-brand-dark); line-height: 1.15; }
.bk-hero-sub { margin: 4px 0 0; color: var(--fo-muted); font-size: 14.5px; }
.bk-hero-search { width: 280px; max-width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 10px 16px; border-radius: 22px;
  border: 1px solid var(--fo-border); background: #fff; outline: none; }
.bk-hero-search:focus { border-color: var(--fo-brand); box-shadow: 0 0 0 3px rgba(0,133,174,0.12); }
.bk-docgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .bk-docgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .bk-docgrid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .bk-hero-title { font-size: 23px; } .bk-hero-search { width: 100%; } }
.bk-doc { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid var(--fo-border); border-radius: 14px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.bk-doc:hover { transform: translateY(-2px); border-color: var(--fo-brand); box-shadow: 0 8px 22px rgba(4,92,115,0.12); }
.bk-doc.hidden { display: none; }
.bk-doc-top { display: flex; align-items: center; gap: 12px; }
.bk-avatar-md { width: 52px; height: 52px; font-size: 18px; flex: none; }
.bk-doc-who { min-width: 0; flex: 1; }
.bk-doc-name { font-weight: 800; font-size: 15.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-doc-title { color: var(--fo-brand-dark); font-weight: 600; font-size: 13px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-doc-go { color: var(--fo-brand); font-size: 26px; line-height: 1; flex: none; transition: transform .15s; }
.bk-doc:hover .bk-doc-go { transform: translateX(3px); }
.bk-doc-tags { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; cursor: grab; user-select: none; -webkit-user-select: none; }
.bk-doc-tags::-webkit-scrollbar { display: none; width: 0; height: 0; }
.bk-doc-tags.bk-dragging { cursor: grabbing; }
.bk-doc-tag { flex: none; white-space: nowrap; background: var(--fo-grey-bg); color: var(--fo-brand-dark);
  border-radius: 12px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; text-transform: capitalize; }
.bk-doc-more { background: transparent; border: 1px dashed var(--fo-border); color: var(--fo-muted); }
.bk-doc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--fo-border); }
.bk-doc-price { font-weight: 800; font-size: 14px; color: var(--fo-brand-dark); }
.bk-doc-next { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #137a4a; background: rgba(19,122,74,0.09); border-radius: 12px; padding: 3px 10px; }
.bk-doc-next i { width: 7px; height: 7px; border-radius: 50%; background: #1fb56f; }
.bk-doc-none { color: var(--fo-muted); background: var(--fo-grey-bg); }
.bk-doc-name { text-transform: uppercase; }
.bk-doc-title { text-transform: lowercase; }
.bk-doc-title::first-letter { text-transform: uppercase; }
.bk-pbody, .bk-psec, .bk-phead { min-width: 0; }


/* A clinician's photo: tap to see it bigger */
.bk-avatar-img { cursor: zoom-in; }
.fo-lightbox.bk-photo-lightbox { padding: 14px; }
.bk-photo-box { position: relative; display: flex; flex-direction: column; align-items: center; max-width: min(92vw, 560px); }
.bk-photo-img { display: block; max-width: none; max-height: none; border-radius: 14px; background: #fff; box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.bk-photo-cap { margin-top: 10px; color: #fff; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .03em; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.bk-photo-box .fo-lightbox-close { top: -14px; right: -6px; z-index: 2; background: rgba(255,255,255,0.95); box-shadow: 0 1px 4px rgba(0,0,0,0.3); }

/* Header: About sits first of the right-hand links */
.bk-about-link { margin-left: auto; margin-right: 8px; }
.bk-about-link ~ .bk-my-link, .bk-about-link ~ .bk-login-btn { margin-left: 0; }

/* ---------- About ---------- */
.bk-about-page { max-width: 1040px; }
.bk-about-hero { padding: 22px 24px; border-radius: 20px; color: #fff; margin-bottom: 18px; position: relative; overflow: hidden;
  background: radial-gradient(circle at 85% 0%, rgba(255,255,255,0.18), transparent 45%), linear-gradient(135deg, var(--fo-brand-dark) 0%, var(--fo-brand) 100%);
  box-shadow: 0 10px 30px rgba(4,92,115,0.22); }
.bk-about-kicker { font-size: 12px; font-weight: 800; letter-spacing: .3em; opacity: .85; }
.bk-about-hero h1 { margin: 6px 0 6px; font-size: 32px; line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; }
.bk-about-hero p { margin: 0; font-size: 15px; opacity: .92; }
.bk-about-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bk-about-actions > a { justify-content: center; }
.bk-btn-solid, .bk-btn-ghost { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 14px; border-radius: 24px; padding: 11px 18px; transition: transform .15s, background .15s; }
.bk-btn-solid { background: #fff; color: var(--fo-brand-dark); }
.bk-btn-ghost { background: rgba(255,255,255,0.16); color: #fff; border: 1px solid rgba(255,255,255,0.45); }
.bk-btn-solid:hover, .bk-btn-ghost:hover { transform: translateY(-1px); }
.bk-btn-ghost:hover { background: rgba(255,255,255,0.26); }
.bk-btn-solid svg, .bk-btn-ghost svg { width: 18px; height: 18px; }
.bk-about-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.bk-about-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bk-about-card { background: #fff; border: 1px solid var(--fo-border); border-radius: 18px; padding: 20px 20px 16px; min-width: 0; box-shadow: 0 2px 10px rgba(4,92,115,0.05); }
.bk-about-wide { margin-bottom: 16px; }
.bk-about-card-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.bk-about-card-head h2, .bk-about-emergency h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--fo-brand-dark); }
.bk-about-card-head p { margin: 3px 0 0; color: var(--fo-muted); font-size: 13.5px; line-height: 1.5; }
.bk-about-ico { flex: none; width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(0,133,174,0.1); color: var(--fo-brand); }
.bk-about-ico svg { width: 22px; height: 22px; }
.bk-map { display: block; width: 100%; height: 260px; border: 0; border-radius: 12px; background: var(--fo-grey-bg); }
.bk-about-page .bk-about-link { margin-left: 0; margin-right: 0; display: inline-block; margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--fo-brand); text-decoration: none; }
.bk-about-page .bk-about-link:hover { text-decoration: underline; }
.bk-about-row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px dashed var(--fo-border); text-decoration: none; color: inherit; font-size: 14px; }
.bk-about-card-head + .bk-about-row { border-top: 1px solid var(--fo-border); }
.bk-about-row span { color: var(--fo-muted); }
.bk-about-row strong { color: var(--fo-brand-dark); text-align: right; }
a.bk-about-row:hover strong { text-decoration: underline; }
.bk-about-small { margin: 10px 0 2px; color: var(--fo-muted); font-size: 12.5px; line-height: 1.5; }
.bk-about-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bk-about-tile { background: var(--fo-grey-bg); border-radius: 14px; padding: 14px 15px; display: flex; flex-direction: column; gap: 5px; }
.bk-about-tile strong { font-size: 14px; color: var(--fo-brand-dark); }
.bk-about-tile span { font-size: 13px; color: var(--fo-ink); line-height: 1.55; }
.bk-about-emergency { display: flex; gap: 14px; align-items: flex-start; border-radius: 18px; padding: 18px 20px; margin-bottom: 8px;
  background: var(--fo-red-bg, #fdecea); border: 1px solid rgba(214,69,50,0.25); }
.bk-about-emergency p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--fo-ink); }
.bk-about-ico-red { background: rgba(214,69,50,0.14); color: var(--fo-red, #d64532); }
.bk-about-page .bk-about-emergency .bk-about-link { color: var(--fo-red, #d64532); }
@media (max-width: 860px) { .bk-about-grid { grid-template-columns: minmax(0, 1fr); } .bk-about-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .bk-about-hero { padding: 24px 20px 22px; border-radius: 16px; } .bk-about-hero h1 { font-size: 25px; }
  .bk-about-tiles { grid-template-columns: minmax(0, 1fr); } .bk-map { height: 220px; }
}
@media (max-width: 560px) {
  .bk-about-hero { padding: 16px; }
  .bk-about-actions > a { flex: 1 1 calc(50% - 5px); }
  .bk-about-actions > a:first-child { flex-basis: 100%; }
}

/* The page's tabs are the front office's grouped tab bar (header on a computer, the floating bar on a phone). */
.fo-tabs .fo-tab-btn { text-decoration: none; font-family: inherit; }
.fo-tabs .fo-tab-btn.hidden { display: none; }
/* The About page sits in the middle of the page */
.bk-about-page { margin-left: auto; margin-right: auto; width: 100%; }