/* Booking gadget, scheduling page and admin console.
   Kept separate from style.css so the existing marketing design is untouched. */

:root {
  --ybk-blue: #3559e0;
  --ybk-blue-dark: #2544b4;
  --ybk-ink: #111111;
  --ybk-muted: #5d6577;
  --ybk-line: #e2e6f0;
  --ybk-soft: #f5f7fc;
  --ybk-ok: #0f8a5f;
  --ybk-bad: #c0392b;
}

/* =========================
   BOOKING GADGET
========================= */

.ybk {
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ybk-ink);
  background: #ffffff;
  border: 1px solid var(--ybk-line);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 18px 50px rgba(21, 34, 84, 0.08);
  max-width: 720px;
  width: 100%;
}

.ybk--compact {
  padding: 20px;
  border-radius: 14px;
}

.ybk__head {
  margin-bottom: 18px;
}

.ybk__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.ybk__sub,
.ybk__lead {
  color: var(--ybk-muted);
  font-size: 15px;
  margin: 6px 0 0;
}

.ybk__lead {
  margin: 0 0 14px;
}

.ybk__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.ybk__step {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ybk-muted);
  background: var(--ybk-soft);
  border-radius: 999px;
  padding: 6px 12px;
}

.ybk__step.is-current {
  background: var(--ybk-blue);
  color: #ffffff;
}

.ybk__step.is-done {
  background: #e4ecff;
  color: var(--ybk-blue-dark);
}

/* Runs to two or three lines now that it carries the prescribing note as
   well, so it needs leading and a little more room than a one-liner did. */
.ybk__notice {
  margin: 0 0 18px;
  padding: 12px 15px;
  border-radius: 10px;
  background: #fff6e5;
  color: #7a5209;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}

.ybk__muted {
  color: var(--ybk-muted);
  font-size: 15px;
  margin: 12px 0 0;
}

.ybk__error {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fdecea;
  color: var(--ybk-bad);
  font-size: 15px;
  font-weight: 500;
}

/* visit type */

.ybk__choices {
  display: grid;
  gap: 12px;
}

.ybk__choice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  cursor: pointer;
  border: 1.5px solid var(--ybk-line);
  border-radius: 14px;
  background: #ffffff;
  padding: 18px 20px;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ybk__choice:hover {
  border-color: var(--ybk-blue);
  box-shadow: 0 8px 22px rgba(53, 89, 224, 0.12);
  transform: translateY(-1px);
}

.ybk__choice-label {
  font-size: 18px;
  font-weight: 600;
}

.ybk__choice-note {
  font-size: 14px;
  color: var(--ybk-muted);
}

/* calendar */

.ybk__month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ybk__month-label {
  font-size: 17px;
  font-weight: 600;
}

.ybk__nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--ybk-line);
  background: #ffffff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--ybk-ink);
  font-family: inherit;
}

.ybk__nav-btn:hover:not(:disabled) {
  border-color: var(--ybk-blue);
  color: var(--ybk-blue);
}

.ybk__nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ybk__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.ybk__dow {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ybk-muted);
  padding-bottom: 4px;
}

.ybk__day {
  aspect-ratio: 1 / 1;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--ybk-line);
  background: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ybk-ink);
  cursor: pointer;
}

/* A touch device leaves :hover applied to whatever was last tapped. That
   hover colour outranked the selected state, so a tapped date turned blue
   text on a blue background and the number disappeared. Hover styling is
   now limited to devices that actually hover, and never applies to the
   selected cell, so neither half of that can happen again. */
@media (hover: hover) {
  .ybk__day:hover:not(:disabled):not(.is-selected) {
    border-color: var(--ybk-blue);
    color: var(--ybk-blue);
  }
}

.ybk__day:disabled {
  color: #c2c7d4;
  background: var(--ybk-soft);
  border-color: transparent;
  cursor: not-allowed;
}

.ybk__day--blank {
  border: none;
  background: none;
}

.ybk__day.is-selected,
.ybk__day.is-selected:hover {
  background: var(--ybk-blue);
  border-color: var(--ybk-blue);
  color: #ffffff;
}

.ybk__slots-title {
  font-size: 16px;
  font-weight: 600;
  margin: 22px 0 10px;
}

.ybk__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}

.ybk__slot {
  padding: 11px 8px;
  border-radius: 10px;
  border: 1.5px solid var(--ybk-line);
  background: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ybk-ink);
}

@media (hover: hover) {
  .ybk__slot:hover:not(.is-selected) {
    border-color: var(--ybk-blue);
    color: var(--ybk-blue);
  }
}

.ybk__slot.is-selected,
.ybk__slot.is-selected:hover {
  background: var(--ybk-blue);
  border-color: var(--ybk-blue);
  color: #ffffff;
}

/* details form */

.ybk__summary {
  background: var(--ybk-soft);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  margin-bottom: 18px;
}

.ybk__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ybk__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ybk__field--wide,
.ybk__form > .ybk__hint,
.ybk__check,
.ybk__submit {
  grid-column: 1 / -1;
}

.ybk__label {
  font-size: 14px;
  font-weight: 600;
}

.ybk__req {
  color: var(--ybk-bad);
}

.ybk__field input,
.ybk__field textarea {
  width: 100%;
  border: 1.5px solid var(--ybk-line);
  border-radius: 10px;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ybk-ink);
  background: #ffffff;
  resize: vertical;
}

.ybk__field input:focus,
.ybk__field textarea:focus {
  outline: none;
  border-color: var(--ybk-blue);
  box-shadow: 0 0 0 3px rgba(53, 89, 224, 0.15);
}

.ybk__hint {
  font-size: 13px;
  color: var(--ybk-muted);
  margin: 0;
}

.ybk__check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  cursor: pointer;
}

/* Consent text runs to several lines, so the box sits at the top of it
   rather than floating in the vertical middle. */
.ybk__check--consent {
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border: 1.5px solid var(--ybk-line);
  border-radius: 12px;
  background: var(--ybk-soft);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ybk-muted);
}

.ybk__check--consent:hover {
  border-color: #c9d8ff;
}

.ybk__check--consent input {
  margin-top: 2px;
  flex: 0 0 auto;
}

.ybk__check--consent:has(input:checked) {
  border-color: var(--ybk-blue);
  background: #f2f6ff;
  color: var(--ybk-ink);
}

.ybk__check input {
  width: 18px;
  height: 18px;
  accent-color: var(--ybk-blue);
}

.ybk__submit {
  margin-top: 4px;
  padding: 14px 20px;
  border: none;
  border-radius: 999px;
  background: var(--ybk-blue);
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.ybk__submit:hover:not(:disabled) {
  background: var(--ybk-blue-dark);
}

.ybk__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ybk__back,
.ybk__ghost {
  margin-top: 18px;
  background: none;
  border: none;
  color: var(--ybk-blue);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
}

.ybk__back:hover,
.ybk__ghost:hover {
  text-decoration: underline;
}

/* confirmation */

.ybk__done {
  text-align: center;
  padding: 10px 0 4px;
}

.ybk__done-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #e6f6ef;
  color: var(--ybk-ok);
  font-size: 28px;
  line-height: 56px;
  font-weight: 700;
}

.ybk__done-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.ybk__done-when {
  font-size: 17px;
  font-weight: 600;
  color: var(--ybk-blue);
  margin: 8px 0 0;
}

@media (max-width: 560px) {
  .ybk {
    padding: 20px 16px;
  }

  .ybk__form {
    grid-template-columns: 1fr;
  }

  .ybk__title {
    font-size: 22px;
  }
}

.ybk__pay-lead {
  margin: 18px 0 10px;
  font-size: 16px;
  font-weight: 600;
}

/* Sits between the payment prompt and the button, so it needs to breathe
   without pushing the button too far down the card. */
.ybk__next {
  max-width: 42ch;
  margin: 10px auto 18px;
}

.ybk__pay {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--ybk-blue);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

/* The same button, for joining a visit rather than paying for one. */
.ybk__pay--quiet {
  background: #1b7a44;
}

.ybk__pay--quiet:hover {
  background: #166137;
}


.ybk__pay:hover {
  background: var(--ybk-blue-dark);
  color: #ffffff;
}

/* =========================
   PROMOTION
========================= */

.promo {
  border: 1.5px solid #cfe0ff;
  background: linear-gradient(135deg, #eef3ff 0%, #f8faff 100%);
  border-radius: 18px;
  padding: 26px 28px;
  margin-bottom: 28px;
}

.promo-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ybk-blue);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.promo h2 {
  margin: 0 0 10px;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ybk-ink);
}

.promo h2 span {
  color: var(--ybk-blue);
}

/* The old price, struck through beside the new one. */
.promo-was {
  margin-right: 4px;
  color: var(--ybk-muted);
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* Read aloud but not shown: without it a screen reader announces
   "New patient visit for 150 dollars 75 dollars", which says the opposite
   of what the strikethrough conveys to everyone else. */
.promo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.promo p {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ybk-muted);
}

.promo p:last-child {
  margin-bottom: 0;
}

.promo strong {
  color: var(--ybk-ink);
}

/* =========================
   SCHEDULING PAGE
========================= */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.sched-hero {
  background: linear-gradient(180deg, #eef2fd 0%, #ffffff 100%);
  padding: 48px 0 26px;
  text-align: center;
}

/* A link down to the booking widget further along the page, so the first
   thing in the hero is also a way to act on it. */
.sched-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  padding: 7px 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--ybk-line);
  color: var(--ybk-blue);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.sched-eyebrow:hover {
  border-color: var(--ybk-blue);
  background: #f4f7ff;
  box-shadow: 0 6px 18px rgba(53, 89, 224, 0.15);
}

.sched-eyebrow-arrow {
  font-size: 14px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.sched-eyebrow:hover .sched-eyebrow-arrow {
  transform: translateY(2px);
}

/* Jumping to the booking section should not land it flush against the
   viewport edge. */
#book {
  scroll-margin-top: 24px;
}

.sched-hero h1 {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 15ch;
  margin-inline: auto;
}

.sched-hero p {
  max-width: 660px;
  margin: 18px auto 0;
  color: var(--ybk-muted);
  font-size: 18px;
  line-height: 1.65;
}

/* =========================
   WHAT A VISIT INCLUDES
========================= */

/* 26px above and 30px here: the hero and these cards read as one block, and
   140px of dead space between them was what the owner called huge. */
.pitch {
  padding: 30px 0 10px;
}

.pitch-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.pitch-head h2 {
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

.pitch-head p {
  margin: 12px 0 0;
  color: var(--ybk-muted);
  font-size: 17px;
  line-height: 1.6;
}

/* Five cards on an auto-fitting grid strand the fifth on a row of its own.
   Six columns with each card spanning two gives a clean three, and the last
   two are nudged inwards so they sit centred beneath, rather than hanging
   off the left edge. */
.pitch-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.pitch-card {
  grid-column: span 2;
}

.pitch-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.pitch-card:nth-child(5) {
  grid-column: 4 / span 2;
}

.pitch-card {
  border: 1px solid var(--ybk-line);
  border-radius: 18px;
  padding: 28px 26px;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pitch-card:hover {
  border-color: #c9d8ff;
  box-shadow: 0 16px 38px rgba(21, 34, 84, 0.09);
  transform: translateY(-2px);
}

.pitch-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: #eaf0ff;
  color: var(--ybk-blue);
}

.pitch-icon svg {
  width: 25px;
  height: 25px;
}

.pitch-card h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ybk-ink);
}

.pitch-card p {
  margin: 0;
  color: var(--ybk-muted);
  font-size: 15.5px;
  line-height: 1.65;
}

@media (max-width: 1000px) {
  .pitch-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .pitch-card,
  .pitch-card:nth-child(4) {
    grid-column: span 2;
  }

  .pitch-card:nth-child(5) {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 660px) {
  .pitch-grid {
    grid-template-columns: 1fr;
  }

  .pitch-card,
  .pitch-card:nth-child(4),
  .pitch-card:nth-child(5) {
    grid-column: 1 / -1;
  }
}

/* =========================
   QUESTIONS AND CANCELLATIONS
========================= */

.reach {
  padding: 20px 0 90px;
}

.reach-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 32px;
}

.reach-head h2 {
  font-size: clamp(24px, 3.2vw, 33px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.reach-head p {
  margin: 12px 0 0;
  color: var(--ybk-muted);
  font-size: 16.5px;
  line-height: 1.6;
}

.reach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.reach-card {
  border: 1px solid var(--ybk-line);
  border-radius: 16px;
  padding: 24px 24px 22px;
  background: var(--ybk-soft);
  text-align: center;
}

.reach-label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ybk-blue);
}

.reach-card .protected-sms,
.reach-card .protected-phone,
.reach-card .protected-email {
  font-size: 19px;
  font-weight: 650;
  color: var(--ybk-ink);
}

.reach-card p {
  margin: 12px 0 0;
  color: var(--ybk-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.reach-policy {
  border: 1px solid var(--ybk-line);
  border-left: 4px solid var(--ybk-blue);
  border-radius: 16px;
  padding: 26px 28px;
  background: #ffffff;
}

.reach-policy h3 {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 650;
}

.reach-policy p {
  margin: 0 0 12px;
  color: var(--ybk-muted);
  font-size: 16px;
  line-height: 1.7;
}

.reach-policy p:last-child {
  margin-bottom: 0;
}

/* The same panel, but read BEFORE the contact details rather than after
   them, so it needs space below it instead of above. */
.reach-policy--lead {
  margin-bottom: 40px;
}


.sched-main {
  padding: 56px 0 72px;
}

.sched-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

/* Sits under the booking widget: a fact worth knowing before you fill the
   form in, not a banner competing with it. */
.sched-footnote {
  margin: 20px 2px 0;
  color: var(--ybk-muted);
  font-size: 16px;
  line-height: 1.7;
}

.sched-footnote strong {
  color: var(--ybk-ink);
}

.sched-aside {
  display: grid;
  gap: 16px;
}

.sched-card {
  border: 1px solid var(--ybk-line);
  border-radius: 16px;
  padding: 22px 24px;
  background: var(--ybk-soft);
}

.sched-card h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
}

.sched-card p,
.sched-card li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ybk-muted);
  margin: 0;
}

.sched-card ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.sched-card a {
  color: var(--ybk-blue);
  font-weight: 600;
}

/* The map fills the space the sidebar used to leave empty next to the
   booking widget. A fixed ratio keeps the column tidy at any width. */
/* The way through to the follow-up page. Deliberately quiet: /schedule is
   the landing page for advertising and its job is the new patient booking,
   so this must be findable without competing with it. */
.sched-card--return {
  border-color: #cdd8f6;
  background: #f6f8ff;
}

.sched-cta {
  display: inline-block;
  margin-top: 4px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--ybk-blue);
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.sched-cta:hover {
  background: #2c49c9;
  box-shadow: 0 8px 22px rgba(53, 89, 224, 0.25);
}

.sched-card--map {
  background: #ffffff;
}

.sched-map {
  position: relative;
  aspect-ratio: 16 / 10;
  margin-bottom: 14px;
  border: 1px solid var(--ybk-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ybk-soft);
}

.sched-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.sched-card--map p {
  margin-bottom: 6px;
}

.sched-card--map p:last-child {
  margin-bottom: 0;
  font-size: 14px;
}

/* A condition of being seen at all, so it should not read as small print. */
.sched-card--note {
  border-color: #cdd8f6;
  background: #f6f8ff;
}

.sched-card--urgent {
  background: #fdecea;
  border-color: #f6cfc9;
}

.sched-card--urgent p {
  color: #8d2f22;
}

@media (max-width: 900px) {
  .sched-layout {
    grid-template-columns: 1fr;
  }

  .sched-main {
    padding-top: 40px;
  }

  /* This page's header is .header-solid, which is position: relative and
     already takes its own height, so the first section needs no clearance. */
  .sched-hero {
    padding-top: 32px;
  }

  .pitch {
    padding-top: 22px;
  }
}

@media (max-width: 560px) {
  .pitch-card {
    padding: 24px 20px;
  }

  .reach-policy {
    padding: 22px 20px;
  }
}