/* CareVixis booking widget. Linked by book-a-call.html ONLY, so its ?v= can be
   bumped without a sitewide sweep -- the same trade this repo makes for
   email-security.css and vixistrace-funnel.css. Prefix bk-. */

.bk-wrap { max-width: 880px; margin: 0 auto; }
.bk-card { background: var(--white); border: 1px solid var(--gray-300); border-radius: 20px;
  padding: clamp(22px, 3.2vw, 34px); }
.bk-step-h { font-family: 'Space Grotesk', Inter, sans-serif; font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.2; margin: 0 0 6px; }
.bk-step-h:focus { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
.bk-step-sub { font-size: .98rem; line-height: 1.6; color: var(--gray-600); margin: 0 0 20px; }
.bk-tz { font-size: .88rem; color: var(--gray-500); margin: 0 0 18px; }

.bk-label { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gray-500); margin: 0 0 10px; }

/* Days: a horizontal strip that scrolls rather than wrapping into a wall. */
.bk-days { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.bk-day { flex: 0 0 auto; min-width: 92px; padding: 12px 14px; border: 1px solid var(--gray-300);
  border-radius: 14px; background: var(--white); cursor: pointer; text-align: center; font: inherit; }
.bk-day:hover { border-color: var(--blue); }
.bk-day:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.bk-day[aria-pressed="true"] { border-color: var(--blue); background: #f2f8fd; box-shadow: inset 0 0 0 1px var(--blue); }
.bk-day-wd { display: block; font-size: .76rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gray-500); }
.bk-day-dm { display: block; font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.04rem;
  font-weight: 700; color: var(--dark); margin: 3px 0 2px; }
.bk-day-n { display: block; font-size: .74rem; color: var(--gray-500); }

.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px; margin: 14px 0 0; padding: 0; }
.bk-time { padding: 13px 10px; border: 1px solid var(--gray-300); border-radius: 12px;
  background: var(--white); font: inherit; font-weight: 700; color: var(--blue-dark); cursor: pointer; }
.bk-time:hover { border-color: var(--blue); background: #f2f8fd; }
.bk-time:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.bk-more { margin: 16px 0 0; padding: 11px 18px; border: 1px solid var(--gray-300);
  border-radius: 12px; background: var(--white); font: inherit; font-weight: 700;
  color: var(--blue); cursor: pointer; }
.bk-more:disabled { opacity: .5; cursor: default; }

.bk-status { font-size: .96rem; line-height: 1.6; color: var(--gray-600); margin: 0 0 14px; }
.bk-status.bk-error { color: #9b1c1c; background: #fdf2f2; border: 1px solid #f5c6c6;
  border-radius: 12px; padding: 13px 15px; }
.bk-status:focus { outline: 3px solid #9b1c1c; outline-offset: 3px; }

.bk-chosen-box { background: #f2f8fd; border: 1px solid #cfe0f0; border-radius: 14px;
  padding: 15px 18px; margin: 0 0 22px; }
.bk-chosen-label { font-size: .76rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gray-500); margin: 0 0 5px; }
.bk-chosen { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.08rem;
  font-weight: 700; color: var(--dark); margin: 0; }

.bk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.bk-field { display: flex; flex-direction: column; min-width: 0; }
.bk-field--full { grid-column: 1 / -1; }
.bk-field label { font-size: .92rem; font-weight: 700; color: var(--dark); margin: 0 0 7px; }
.bk-field .bk-opt { font-weight: 400; color: var(--gray-500); }
.bk-field input, .bk-field textarea { font: inherit; padding: 12px 14px; border: 1px solid var(--gray-300);
  border-radius: 12px; background: var(--white); color: var(--dark); width: 100%; }
.bk-field input:focus, .bk-field textarea:focus { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.bk-field textarea { min-height: 96px; resize: vertical; }
.bk-help { font-size: .86rem; line-height: 1.55; color: var(--gray-600); margin: 8px 0 0; }
.bk-help strong { color: var(--dark); }

/* THE HONEYPOT. Hidden with CSS and NOT type="hidden", so a bot that fills visible
   inputs fills this one too. Never display:none on the input alone -- some bots skip
   that; this takes it out of flow and out of the tab order while leaving it fillable. */
.bk-hp { position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important; }

.bk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 24px 0 0; }
.bk-back { background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bk-submit[aria-busy="true"] { opacity: .75; cursor: progress; }

.bk-confirm-when { font-family: 'Space Grotesk', Inter, sans-serif; font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 700; color: var(--dark); margin: 0 0 6px; }
.bk-confirm-where { font-size: 1rem; color: var(--gray-600); margin: 0 0 18px; }
.bk-confirm-note { font-size: 1rem; line-height: 1.7; color: var(--gray-700); margin: 0; }

@media (max-width: 640px) {
  .bk-fields { grid-template-columns: 1fr; }
  .bk-actions .btn { width: 100%; }
  .bk-times { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}