/* Booking-specific styles, layered on the vendored site.css.
   Contact-page vocabulary: heavy squared teal form fields, uppercase teal
   buttons, the lightbulb-and-cog mark faded off the left edge. Type is set
   large for readability. */

body.booking { font-size: 19px; background: var(--white); line-height: 1.7; }
/* The vendored nav uses fixed px in site.css (brand 28, links 20); leave it be
   so it matches opsthatwork.com exactly. Just nudge the tiny footer up. */
body.booking .footer-copy { font-size: 0.95rem; }

/* --- Page wrapper --- */
.bk-wrap {
  position: relative;
  background: var(--white);
  padding: 3rem 2rem 4rem;
  overflow: hidden;
}
.bk-inner {
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto;
}

/* --- The lightbulb + cog, faded, off the left edge --- */
.bk-bulb {
  position: absolute; z-index: 1;
  top: 50%; left: -6vw; transform: translateY(-50%);
  width: min(46vw, 430px);
  opacity: 0.5; pointer-events: none;
}
.bk-bulb svg { width: 100%; height: auto; overflow: visible; display: block; }
.bk-bulb .cb-outline path {
  fill: none; stroke: var(--teal); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.28;
}
.bk-bulb .cb-mark { fill: var(--teal); opacity: 0.28; }
@media (max-width: 900px) { .bk-bulb { display: none; } }

/* --- Headings --- */
.bk-h1 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 2.7rem); color: var(--teal);
  text-align: center; line-height: 1.2; margin: 0 0 0.4rem;
}
.bk-lede {
  text-align: center; color: var(--text); font-size: 1.25rem;
  max-width: 34rem; margin: 0 auto 2rem;
}
.bk-eyebrow {
  display: block; text-align: center; margin-bottom: 1.75rem;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--slate);
}

/* --- Cards / panels --- */
.bk-card {
  background: var(--white); border: 3px solid var(--teal-dark); border-radius: 3px;
  padding: 1.6rem 1.7rem; margin-bottom: 1.25rem;
}
.bk-card h2 {
  font-family: var(--font-heading); color: var(--teal); font-weight: 700;
  font-size: 1.35rem; margin: 0 0 0.5rem;
}
.bk-card p { margin: 0.5rem 0; font-size: 1.15rem; line-height: 1.6; }
.bk-card ul { font-size: 1.15rem; line-height: 1.6; padding-left: 1.2rem; }
.bk-card ul li { margin: 0.25rem 0; }
.bk-meta { color: var(--slate); font-size: 1.05rem; }

a.bk-card { display: block; transition: border-color 0.15s ease; }
@media (hover: hover) { a.bk-card:hover { border-color: var(--teal-light); } }

/* --- Meeting-type list: the landing-page service-list pattern --- */
.bk-type-list { list-style: none; margin: 1.5rem 0 0; padding: 0 0 0 2.75rem; }
.bk-type { position: relative; }
.bk-type-bulb {
  position: absolute; top: 1.7rem; left: -2.75rem;
  width: 1.9rem; height: 1.9rem; display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; line-height: 1; color: #c2cbc8; pointer-events: none;
  transition: color 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}
.bk-type:hover .bk-type-bulb,
.bk-type:focus-within .bk-type-bulb {
  color: var(--yellow);
  filter: drop-shadow(0 0 9px rgba(253, 204, 44, 0.8));
  transform: scale(1.08);
}
.bk-type-list a {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "title go" "body go";
  column-gap: 1.5rem; padding: 1.25rem 0; text-decoration: none; color: inherit;
}
.bk-type-list li + li a { border-top: 1px solid rgba(20, 49, 44, 0.1); }
.bk-type-list h3 {
  grid-area: title; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700;
  color: var(--teal-dark); margin: 0 0 0.35rem; transition: color 0.15s ease;
}
.bk-type-list p { grid-area: body; font-size: 1.1rem; color: var(--slate); line-height: 1.6; margin: 0; }
.bk-type-go { grid-area: go; align-self: center; color: var(--teal-light); font-size: 0.95rem;
  transition: transform 0.2s ease, color 0.2s ease; }
.bk-type-list a:hover h3, .bk-type-list a:focus h3 { color: var(--teal); }
.bk-type-list a:hover .bk-type-go, .bk-type-list a:focus .bk-type-go { transform: translateX(4px); color: var(--teal); }
@media (max-width: 520px) {
  .bk-type-list { padding-left: 2.2rem; }
  .bk-type-bulb { left: -2.2rem; font-size: 1.15rem; }
}

/* --- Alerts --- */
.bk-alert {
  background: var(--bg-light); border: 2px solid var(--teal-light); border-radius: 3px;
  padding: 1em 1.25em; margin-bottom: 1.25em; font-size: 1.05rem; color: var(--teal);
}
.bk-alert-error { background: #fce4ec; border-color: #d63637; color: #d63637; }

/* --- Form fields: the contact-page treatment --- */
.bk-inner label {
  display: block; font-family: var(--font-heading); font-weight: 700;
  font-size: 1.2rem; color: var(--teal); margin: 1.1rem 0 0.4rem;
}
.bk-inner input[type=text],
.bk-inner input[type=email],
.bk-inner textarea {
  width: 100%; padding: 14px 16px; font-family: var(--font-body);
  font-size: 1.2rem; line-height: 1.6; color: var(--text);
  border: 3px solid var(--teal-dark); border-radius: 3px; background: var(--white);
  box-sizing: border-box;
}
.bk-inner input:focus, .bk-inner textarea:focus {
  outline: none; border-color: var(--teal-light);
  box-shadow: 0 0 0 1px var(--teal-light);
}
.bk-inner textarea { min-height: 110px; resize: vertical; }

/* --- Buttons --- */
.bk-inner .btn,
.bk-inner button[type=submit] {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; border: none; border-radius: 3px;
  padding: 14px 40px; font-size: 1.2rem; cursor: pointer;
  background: var(--teal); color: var(--white); transition: background 0.2s ease;
}
.bk-inner .btn:hover,
.bk-inner button[type=submit]:hover { background: var(--teal-dark); color: var(--white); }
.bk-inner .btn-outline {
  background: transparent; color: var(--teal); border: 2px solid var(--teal);
}
.bk-inner .btn-outline:hover { background: var(--bg-light); color: var(--teal); }
.bk-inner .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* --- Scheduler --- */
.scheduler { display: grid; grid-template-columns: 1fr 250px; gap: 1.75rem; }
@media (max-width: 620px) { .scheduler { grid-template-columns: 1fr; } }

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.cal-head strong { font-family: var(--font-heading); font-size: 1.2rem; color: var(--teal); }
.cal-nav {
  background: var(--white); border: 3px solid var(--teal-dark); color: var(--teal-dark);
  width: 42px; height: 42px; border-radius: 3px; font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.cal-nav[disabled] { opacity: 0.3; cursor: default; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-grid .dow {
  text-align: center; font-size: 0.9rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--slate); padding: 0.3rem 0;
}
.cal-cell {
  aspect-ratio: 1 / 1; border: 2px solid transparent; border-radius: 3px;
  background: var(--bg-light); color: var(--text);
  font-family: var(--font-body); font-size: 1.15rem; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.cal-cell[disabled] { background: transparent; color: #b6c3c4; cursor: default; }
.cal-cell.has-slots { background: var(--white); border-color: var(--teal-light); font-weight: 700; color: var(--teal); }
.cal-cell.selected { background: var(--teal-dark); color: var(--white); border-color: var(--teal-dark); }

.slots-head { font-family: var(--font-heading); font-weight: 700; color: var(--teal); font-size: 1.1rem; }
.slot-list { display: flex; flex-direction: column; gap: 0.55rem; max-height: 370px; overflow-y: auto; margin-top: 0.7rem; }
.slot-btn {
  text-align: left; padding: 0.75rem 1rem; font-size: 1.12rem;
  border-radius: 3px; border: 3px solid var(--teal-dark);
  background: var(--white); color: var(--teal-dark);
  font-family: var(--font-body); cursor: pointer;
}
@media (hover: hover) { .slot-btn:hover { background: var(--bg-light); } }
.slot-btn.selected { background: var(--teal); border-color: var(--teal); color: var(--white); }

.tz-note { font-size: 1.05rem; color: var(--slate); margin-top: 0.85rem; }
.load-state { font-size: 1.05rem; color: var(--slate); min-height: 1.2em; margin-top: 0.5rem; }
.hidden { display: none; }

/* --- Confirmation signature --- */
.bk-confirm-mark {
  width: 90px; height: 90px; margin: 0 auto 0.75rem; display: block;
  filter: drop-shadow(0 0 22px rgba(253, 204, 44, 0.55));
}

@media (max-width: 768px) { .bk-wrap { padding: 2rem 1.25rem 3rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }