/* =========================================================
   Badr Al Safaa Medical Centre — Book Consultation
   Built from Figma file "Badr-Al-Safaa", prototype frame 526:4150
   Loads after style.css and about.css (top bar, footer).
   ========================================================= */

.site-nav--cream { background: #fcf9f4; }
.page-booking [hidden] { display: none !important; }

/* ---------- Hero ---------- */
.bk-hero { position: relative; overflow: hidden; height: 426px; padding-top: 95px; background: #f6f3ee; }
.bk-hero__blob { position: absolute; border-radius: 50%; pointer-events: none; }
.bk-hero__blob--left { width: 460px; height: 460px; left: -250px; top: 200px; background: radial-gradient(closest-side, rgba(238,217,176,0.85), rgba(238,217,176,0)); }
.bk-hero__blob--right { width: 440px; height: 440px; right: -150px; top: -20px; background: radial-gradient(closest-side, rgba(243,226,196,0.8), rgba(243,226,196,0)); }
.bk-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bk-badge {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 11px; border-radius: 9999px;
  background: #fefbea; border: 1px solid #f3e4b8;
  font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1.4px; color: #c8931f; white-space: nowrap;
}
.bk-badge i { width: 6px; height: 6px; border-radius: 9999px; background: #c8931f; }
.bk-hero__title { margin-top: 26px; font-weight: 700; font-size: 58px; line-height: 64px; letter-spacing: -0.6px; color: #1a1512; }
.bk-hero__lead { max-width: 640px; margin-top: 18px; font-size: 17px; line-height: 22px; color: #473f34; }

/* ---------- Form card ---------- */
.bk-main { background: #fcf9f4; padding: 63px 0 80px; }
.bk-wrap { width: min(768px, calc(100% - 32px)); margin-inline: auto; display: flex; flex-direction: column; gap: 32px; }
.bk-card { background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(28,25,23,0.03); }
.bk-form { padding: 40px 40px 40px; display: flex; flex-direction: column; }
.bk-kicker { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.9px; color: #704400; }
.bk-kicker img { width: 18px; height: 18px; }
.bk-title { margin-top: 12px; font-family: var(--f-serif); font-weight: 700; font-size: 30px; line-height: 38px; letter-spacing: -0.3px; color: #1a1512; }
.bk-sub { margin-top: 2px; font-size: 15px; line-height: 20px; color: #504b3f; }
.bk-sub b { font-weight: 700; color: #7a5a06; }
.bk-field { margin-top: 21px; display: flex; flex-direction: column; min-width: 0; }
.bk-form > .bk-field:first-of-type { margin-top: 30px; }
.bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bk-label { margin-bottom: 7px; font-weight: 700; font-size: 12.5px; line-height: 16px; letter-spacing: 1px; color: #1a1512; }
.bk-label span { color: #ae1618; }
.bk-input { position: relative; display: flex; align-items: center; height: 48px; border-radius: 8px; background: #f4f3ef; border: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.bk-input:focus-within { border-color: #d89814; box-shadow: 0 0 0 3px rgba(216,152,20,0.12); }
.bk-input input, .bk-input select, .bk-textarea {
  width: 100%; height: 100%; border: 0; outline: 0; background: transparent; font-size: 15px; color: #201f1b;
}
.bk-input input::placeholder, .bk-textarea::placeholder { color: #9fa2aa; opacity: 1; }
.bk-input--icon img { position: absolute; left: 15px; pointer-events: none; }
.bk-input--icon input { padding: 0 16px 0 44px; }
.bk-input--date input { padding-left: 45px; color: #201f1b; }
.bk-input--date input::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
.bk-input--prefix { overflow: hidden; }
.bk-prefix { flex: 0 0 53px; height: 100%; display: flex; align-items: center; justify-content: center; background: #e9e8e4; font-weight: 500; font-size: 13px; color: #252420; }
.bk-input--prefix input { padding: 0 16px; }
.bk-input--select select { padding: 0 44px 0 16px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.bk-input--select img { position: absolute; right: 16px; top: 13px; pointer-events: none; }
.bk-quick { margin-top: 9px; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: #605c59; }
.bk-quick span { margin-right: 1px; }
.bk-quick button { height: 24px; padding: 0 10px; border-radius: 4px; background: #f4f3ef; font-size: 13px; color: #181713; transition: background-color .2s; }
.bk-quick button:hover, .bk-quick button.is-active { background: #ebe4d3; }
.bk-textarea { height: 120px; padding: 14px 16px; border-radius: 8px; background: #f4f3ef; border: 1px solid transparent; resize: vertical; line-height: 22px; font-family: inherit; }
.bk-textarea:focus { border-color: #d89814; box-shadow: 0 0 0 3px rgba(216,152,20,0.12); }
.bk-consent { margin-top: 29px; margin-right: -16px; display: flex; align-items: flex-start; gap: 12px; font-size: 12.7px; line-height: 16px; color: #463e2f; cursor: pointer; }
.bk-consent input { flex: 0 0 auto; width: 14px; height: 14px; margin: 2px 0 0; accent-color: #d89814; }
.bk-consent a { color: #705610; text-decoration: underline; }
.bk-submit {
  margin-top: 20px; height: 56px; border-radius: 6px; background: #d89814; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 14.5px; line-height: 20px; letter-spacing: 1.5px; color: #4d2c00; transition: filter .2s;
}
.bk-submit:hover { filter: brightness(1.05); }
.bk-submit img { width: 16px; height: 16px; }
.bk-secure { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; line-height: 16px; color: #595853; text-align: center; }
.bk-secure img { width: 18px; height: 18px; }
.bk-error { margin-top: 16px; padding: 10px 14px; border-radius: 6px; background: #fdecec; color: #8a1c1c; font-size: 13px; line-height: 18px; }
.bk-field.is-invalid .bk-input, .bk-field.is-invalid .bk-textarea { border-color: #d14343; }
.bk-success { margin-top: 24px; padding: 20px 22px; border-radius: 8px; background: #f3f8ef; border: 1px solid #cfe3c2; }
.bk-success h3 { font-weight: 700; font-size: 16px; line-height: 22px; color: #1f5132; }
.bk-success p { margin-top: 6px; font-size: 14px; line-height: 20px; color: #2f4a37; }
.bk-success a { text-decoration: underline; }

/* ---------- Campus card ---------- */
.bk-campus { padding: 32px 32px 32px; }
.bk-campus__kicker { font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; color: #664800; }
.bk-campus__title { margin-top: 8px; font-family: var(--f-serif); font-weight: 700; font-size: 22px; line-height: 30px; color: #1a1512; }
.bk-campus__info { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.bk-info { display: flex; align-items: flex-start; gap: 12px; }
.bk-info__icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 8px; background: #e9e8e4; display: flex; align-items: center; justify-content: center; }
.bk-info__icon img { width: 21px; height: 21px; }
.bk-info__label { font-size: 13px; line-height: 16px; letter-spacing: 1px; color: #535250; }
.bk-info__text { margin-top: 5px; font-weight: 500; font-size: 15px; line-height: 23px; color: #0f0f0f; }
.bk-info__note { font-weight: 500; font-size: 13.5px; line-height: 20px; color: #6e5510; }
.bk-map { position: relative; margin-top: 25px; height: 176px; border-radius: 8px; overflow: hidden; }
.bk-map > img { position: absolute; left: 0; top: -260px; width: 100%; height: auto; max-width: none; }
.bk-map__overlay {
  position: absolute; inset: 0; background: rgba(23,40,52,0.42); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px;
}
.bk-map__title { font-family: var(--f-serif); font-size: 18px; line-height: 24px; color: rgba(255,255,255,0.92); }
.bk-map__sub { font-size: 13px; line-height: 18px; color: rgba(255,255,255,0.88); }
.bk-map__btn {
  margin-top: 11px; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border-radius: 8px; background: #fff;
  font-weight: 700; font-size: 13.5px; line-height: 18px; letter-spacing: 1px; color: #1a1512; transition: transform .2s;
}
.bk-map__btn:hover { transform: translateY(-1px); }
.bk-map__btn img { width: 18px; height: 18px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
  .bk-hero { height: auto; padding: 72px 0 80px; }
  .bk-hero__title { font-size: 46px; line-height: 52px; }
}
@media (max-width: 640px) {
  .bk-hero { padding: 56px 0 64px; }
  .bk-hero__title { font-size: 36px; line-height: 42px; }
  .bk-hero__lead { font-size: 15.5px; }
  .bk-main { padding: 40px 0 56px; }
  .bk-form, .bk-campus { padding: 24px 20px; }
  .bk-row, .bk-campus__info { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bk-campus__info { gap: 20px; }
  .bk-consent { margin-right: 0; }
  .bk-submit { font-size: 12.5px; letter-spacing: 0.8px; padding: 0 12px; }
  .bk-map { height: 220px; }
  .bk-map > img { top: 50%; transform: translateY(-50%); }
  .bk-map__btn { font-size: 11px; letter-spacing: 0.5px; padding: 0 12px; height: auto; min-height: 34px; }
}