/* Marketing Well booking UI — shared across /book, /book/{slug}, /book/manage.
   Header/footer come from the site's all.css; this file styles only the
   booking components. Colours follow the approved mockup (primary = plum). */

:root {
  --bk-plum: #7A545C;
  --bk-plum-2: #63474D;
  --bk-sand: #F0E3DA;
  --bk-blush: #F0E0E3;
  --bk-line: #EADBD2;
  --bk-line-2: #E2CFC5;
  --bk-muted: #5A4A4E;
  --bk-slot-line: #D9BFB8;
}

.bk-page { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3.5rem, 8vw, 6rem); }
.bk-intro { display: flex; flex-direction: column; gap: 14px; max-width: 680px; margin-bottom: 40px; }
.bk-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--bk-plum); }
.bk-h1 { font-family: var(--serif); font-weight: 420; font-size: clamp(2.3rem, 5vw, 2.9rem); line-height: 1.06; letter-spacing: -.015em; margin: 0; }
.bk-h1 em { font-style: italic; color: var(--bk-plum); }
.bk-lead { font-size: 1.06rem; color: var(--bk-muted); margin: 0; }

/* Meeting-type cards */
.bk-cards { display: flex; flex-wrap: wrap; gap: 20px; }
.bk-card {
  flex: 1 1 300px; text-align: left; background: #fff; border: 1.5px solid var(--bk-line);
  border-radius: 30px; padding: 32px 30px; display: flex; flex-direction: column; gap: 14px;
  color: var(--ink); cursor: pointer; transition: border-color .15s ease, transform .15s ease; text-decoration: none;
}
.bk-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.bk-tag {
  align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bk-plum-2); background: var(--bk-blush); border-radius: 999px; padding: 5px 12px;
}
.bk-card-name { font-family: var(--serif); font-size: 1.55rem; font-weight: 420; line-height: 1.12; letter-spacing: -.01em; }
.bk-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: .86rem; font-weight: 600; color: var(--bk-muted); }
.bk-meta span { display: inline-flex; align-items: center; gap: 6px; }
.bk-card-desc { font-size: .95rem; color: var(--bk-muted); flex: 1 0 auto; }
.bk-choose { font-size: .95rem; font-weight: 700; color: var(--accent); }

/* Scheduler two-column card */
.bk-flow { display: flex; flex-wrap: wrap; background: #fff; border: 1.5px solid var(--bk-line); border-radius: 30px; overflow: hidden; }
.bk-aside { flex: 1 1 300px; min-width: 0; background: var(--bk-sand); padding: 32px 30px; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; }
.bk-main { flex: 999 1 520px; min-width: 0; padding: 32px 32px 36px; box-sizing: border-box; }
.bk-back { align-self: flex-start; background: transparent; border: 0; padding: 6px 0; font-size: .9rem; font-weight: 700; color: var(--bk-plum-2); cursor: pointer; }
.bk-who { display: flex; align-items: center; gap: 12px; }
.bk-avatar { width: 52px; height: 52px; border-radius: 999px; object-fit: cover; background: var(--bk-plum); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 21px; }
.bk-who b { font-size: .95rem; } .bk-who span { font-size: .82rem; color: var(--bk-muted); display: block; }
.bk-type-name { font-family: var(--serif); font-weight: 420; font-size: 1.85rem; line-height: 1.1; letter-spacing: -.012em; margin: 4px 0 0; }
.bk-facts { display: flex; flex-direction: column; gap: 10px; font-size: .93rem; font-weight: 600; color: #4A3C40; }
.bk-facts > span { display: flex; align-items: flex-start; gap: 10px; }
.bk-facts svg { flex: 0 0 auto; margin-top: 2px; }
.bk-desc { margin: 6px 0 0; font-size: .93rem; color: #4A3C40; white-space: pre-line; }
.bk-notice { margin: 0; font-size: .86rem; font-weight: 600; color: var(--bk-plum-2); background: var(--paper); border-radius: 18px; padding: 14px 16px; }

.bk-step-h { font-family: var(--serif); font-weight: 420; font-size: 1.55rem; letter-spacing: -.01em; margin: 0 0 22px; }
.bk-cols { display: flex; flex-wrap: wrap; gap: 32px; }
.bk-cal { flex: 1 1 330px; min-width: 0; }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bk-navbtn { width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid var(--bk-line-2); background: #fff; color: var(--bk-plum-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bk-navbtn:disabled { opacity: .4; cursor: default; }
.bk-month { font-weight: 700; font-size: 1rem; }
.bk-dow { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: #6B5A5E; margin-bottom: 4px; }
.bk-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.bk-cell { display: flex; justify-content: center; align-items: center; height: 48px; }
.bk-cell .off { font-size: .95rem; color: #B7A6A9; }
.bk-day { width: 44px; height: 44px; border-radius: 999px; border: 0; background: #F4E6E3; color: var(--bk-plum-2); font-size: .95rem; font-weight: 800; cursor: pointer; font-family: var(--sans); }
.bk-day:hover { background: #EBD5D0; }
.bk-day.sel { background: var(--accent); color: #fff; }
.bk-tz { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; font-size: .88rem; font-weight: 700; }
.bk-tz select { padding: 12px 14px; border-radius: 11px; border: 1.5px solid var(--bk-line-2); background: #fff; color: var(--ink); font-weight: 500; }
.bk-tz-top { margin: 0 0 22px; max-width: 360px; }

.bk-slots-wrap { flex: 1 1 220px; min-width: 0; }
.bk-day-label { font-weight: 700; font-size: 1rem; margin: 10px 0 14px; }
.bk-slots { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.bk-slot { height: 50px; border-radius: 11px; border: 1.5px solid var(--bk-slot-line); background: #fff; color: var(--bk-plum-2); font-size: 1rem; font-weight: 700; cursor: pointer; font-family: var(--sans); }
.bk-slot:hover { border-color: var(--bk-plum); }
.bk-slot-sel { display: flex; gap: 8px; }
.bk-slot-time { flex: 1 1 0; height: 50px; border-radius: 11px; background: var(--bk-plum-2); color: #fff; font-size: 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bk-next { flex: 1 1 0; height: 50px; border-radius: 11px; border: 0; background: var(--accent); color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; font-family: var(--sans); }
.bk-empty { margin-top: 10px; border: 1.5px dashed var(--bk-line-2); border-radius: 18px; padding: 28px 22px; text-align: center; color: var(--bk-muted); font-size: .95rem; }

/* Details form */
.bk-form { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.bk-field { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; font-weight: 700; }
.bk-field .req { color: #9A4F45; }
.bk-field input, .bk-field textarea {
  padding: 12px 14px; border-radius: 11px; border: 1.5px solid var(--bk-line-2);
  background: #fff; color: var(--ink); font-weight: 500; font-family: var(--sans); font-size: 1rem;
}
.bk-field input { height: 48px; padding: 0 14px; }
.bk-field textarea { resize: vertical; min-height: 80px; }
.bk-note { margin: 0; font-size: .88rem; color: var(--bk-muted); }
.bk-error { margin: 0; font-size: .88rem; font-weight: 700; color: #8E3F36; }
.bk-submit { border: 0; border-radius: 999px; background: var(--bk-plum); color: #fff; font-weight: 700; font-size: 1rem; padding: 15px 28px; cursor: pointer; font-family: var(--sans); }
.bk-submit:disabled { opacity: .6; cursor: default; }
.bk-ghost { border: 1.5px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--ink); font-weight: 700; font-size: 1rem; padding: 15px 28px; cursor: pointer; font-family: var(--sans); text-decoration: none; display: inline-block; }

/* Done / manage states */
.bk-done { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 560px; padding: 12px 0; }
.bk-check { width: 60px; height: 60px; border-radius: 999px; background: var(--bk-blush); color: var(--bk-plum); display: inline-flex; align-items: center; justify-content: center; }
.bk-done h3 { font-family: var(--serif); font-weight: 420; font-size: 2.3rem; line-height: 1.05; letter-spacing: -.015em; margin: 0; }
.bk-done h3 em { font-style: italic; color: var(--bk-plum); }
.bk-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

.bk-loading { padding: 60px 0; text-align: center; color: var(--bk-muted); }
.bk-spinner { width: 28px; height: 28px; border: 3px solid var(--bk-line); border-top-color: var(--bk-plum); border-radius: 999px; animation: bk-spin .8s linear infinite; margin: 0 auto 14px; }
@keyframes bk-spin { to { transform: rotate(360deg); } }
.bk-banner { background: #FFF6E9; border: 1px solid #E9D4A8; color: #7A5A1E; font-size: .85rem; font-weight: 600; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; }

@media (max-width: 760px) {
  .bk-aside { flex-basis: 100%; }
  .bk-cols { gap: 24px; }
}