/* Logo gold, sampled from Logo-Doaa.jpeg: highlight → mid → shadow. Shared by both pills. */
:root { --logo-gold: linear-gradient(135deg, #F6DC8E 0%, #E0B75F 28%, #CFA247 52%, #AE8035 78%, #D9AE5C 100%); }

/* Book pill — booking CTA, one style everywhere, in the logo's colours (user pick:
   option 3 + the light sweep of option 5, see homepage/DESIGN.md round 8).
   Shape & motion from reddent.framer.website "Make an Appointment": a pill + a 42px
   circle tucked 7px into it (wrapper padding-right 35px). On hover the label rolls
   (old one drops 30px, a 500-weight copy comes down from -30px).
   - pill: the logo's metallic gold gradient, with a slow light sweep every 4.5s
   - circle: cream with a gold ring, carrying the logo tooth; on hover the tooth
     exits top-right and the arrow enters from bottom-left
   Content is ours: doctor avatar + live dot + "Book an appointment". Every ~5s it
   gives a small nudge (wiggle); stops on hover/focus and under reduced motion. */
.book-pill {
  --bp-bg: var(--logo-gold);
  --bp-ring: #E0B75F;
  --bp-ink: var(--navy);
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-right: 35px;
  color: var(--bp-ink);
  font: 400 14px/20px var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transform-origin: 70% 50%;
  /* nudge + sheen + dot pulse only on the Hero and final CTA pills (round 12: the other 14 stay static) */
  transition: transform .25s cubic-bezier(.23, 1, .32, 1);
}
.book-pill:hover,
.book-pill:focus-visible { animation-play-state: paused; }
.book-pill:active { transform: scale(.96); }
.book-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 32px; }
.hero .book-pill, .cta .book-pill { animation: book-nudge 5s cubic-bezier(.36, .07, .19, .97) 2.5s infinite; }
.hero .book-pill__body::after, .cta .book-pill__body::after { animation: book-sheen 4.5s ease-in-out infinite; }
.hero .book-pill__dot::after, .cta .book-pill__dot::after { animation: book-dot 2.4s ease-out infinite; }
@keyframes book-nudge {
  0%, 78%, 100% { rotate: 0deg; translate: 0 0; }
  81% { rotate: -3deg; translate: -1px 0; }
  84% { rotate: 2.5deg; translate: 1px 0; }
  87% { rotate: -2deg; }
  90% { rotate: 1.5deg; }
  93% { rotate: -.75deg; }
  96% { rotate: 0deg; }
}

.book-pill__body {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 8px 18px 8px 8px;
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: var(--bp-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 24px -14px rgba(var(--shadow-tint), .5);
}
/* light sweep across the gold, like light moving over the logo */
.book-pill__body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  translate: -120% 0;

}
@keyframes book-sheen {
  0%, 55% { translate: -120% 0; }
  85%, 100% { translate: 120% 0; }
}
.book-pill__labels {
  position: relative;
  display: grid;
  overflow: hidden;
  padding-block: 4px;
  margin-block: -4px;
}
.book-pill__label {
  grid-area: 1 / 1;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.book-pill__label--in { font-weight: 500; transform: translateY(-30px); }
.book-pill:hover .book-pill__label,
.book-pill:focus-visible .book-pill__label { transform: translateY(30px); }
.book-pill:hover .book-pill__label--in,
.book-pill:focus-visible .book-pill__label--in { transform: none; }

.book-pill__icon {
  position: absolute;
  right: 0;
  top: 50%;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy);
  box-shadow: inset 0 0 0 1px rgba(206, 158, 69, .5), 0 10px 24px -14px rgba(var(--shadow-tint), .5);
  overflow: hidden;
}
.book-pill__icon img {
  position: absolute;
  inset: 0;
  width: 34px;
  height: 30px;
  margin: auto;
  object-fit: contain;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.book-pill__icon svg {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.book-pill__icon svg { transform: translate(-34px, 34px); }
.book-pill:hover .book-pill__icon img,
.book-pill:focus-visible .book-pill__icon img { transform: translate(34px, -34px); }
.book-pill:hover .book-pill__icon svg,
.book-pill:focus-visible .book-pill__icon svg { transform: none; }

.book-pill__avatar {
  position: relative;
  width: 44px;
  height: 28px;
  flex: none;
}
.book-pill__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  object-fit: cover;
  transition: transform .35s cubic-bezier(.23, 1, .32, 1);
}
.book-pill:hover .book-pill__avatar img { transform: scale(1.06); }
.book-pill__dot {
  position: absolute;
  left: 36px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3DDC84;
  box-shadow: 0 0 0 2px var(--bp-ring);
}
.book-pill__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #3DDC84;

}
@keyframes book-dot {
  0% { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

/* Gold primary pill (den-tora "Explore treatments": 12/16 padding, square bullet).
   Same logo-gold gradient as the booking pill, but no light sweep, so the sweep stays
   the booking button’s signal. Hover: the gradient slides to its lighter end. */
.gold-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 32px;
  background: var(--logo-gold);
  background-size: 160% 100%;
  background-position: 100% 0;
  color: var(--navy);
  font: 500 14px/20px var(--font);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 24px -14px rgba(var(--shadow-tint), .5);
  transition: background-position .6s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.23, 1, .32, 1);
}
.gold-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform .35s cubic-bezier(.23, 1, .32, 1);
}
.gold-pill:hover { background-position: 0 0; }
.gold-pill:hover::before { transform: rotate(45deg); }
.gold-pill:active { transform: scale(.96); }
.gold-pill:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

.rd-head__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .book-pill, .hero .book-pill, .cta .book-pill, .book-pill__dot::after, .hero .book-pill__dot::after, .cta .book-pill__dot::after, .book-pill__body::after, .hero .book-pill__body::after, .cta .book-pill__body::after { animation: none; }
  .book-pill__label, .book-pill__icon svg, .book-pill__icon img { transition: none; }
}

/* placement of the booking pill inside sections */
.about__actions { margin-top: 4px; }
.ba__actions { margin-top: 24px; }
.program__body > div:last-child { margin-top: 4px; }

/* ---------- floating booking button (user, 2026-10-21) ----------
   A white round chip with the logo tooth, bottom-right like a WhatsApp bubble. It
   rises in once the hero has left the screen (html.past-hero, header.js) while the
   header's booking pill fades out. Hover/focus: a white pill slides out to the left
   with the label, and the tooth gives way to the arrow (same motion as .book-pill__icon).
   A soft gold ring pulses every few seconds to catch the eye without nagging. */
.fab-book {
  position: fixed;
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 32px);
  z-index: 60;
  display: flex;
  align-items: center;
  height: 64px;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(206, 158, 69, .35), 0 18px 40px -14px rgba(var(--shadow-tint), .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px) scale(.85);
  transition: opacity .45s ease, transform .6s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .6s;
}
.past-hero .fab-book {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s ease, transform .6s cubic-bezier(.16, 1, .3, 1), visibility 0s;
}
.menu-is-open .fab-book,
.past-hero.at-footer .fab-book {
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px) scale(.85);
  transition: opacity .45s ease, transform .6s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .6s;
}
.fab-book__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font: 500 15px/1 var(--font);
  transition: max-width .55s cubic-bezier(.16, 1, .3, 1), padding .55s cubic-bezier(.16, 1, .3, 1);
}
.fab-book:focus-visible .fab-book__label { max-width: 220px; padding: 0 4px 0 24px; }
@media (hover: hover) and (pointer: fine) {
  .fab-book:hover .fab-book__label { max-width: 220px; padding: 0 4px 0 24px; }
  .fab-book:hover .fab-book__icon img { transform: translate(46px, -46px); }
  .fab-book:hover .fab-book__icon svg { transform: none; }
}
.fab-book__icon {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
}
.fab-book__icon img {
  position: absolute;
  inset: 0;
  width: 42px;
  height: 36px;
  margin: auto;
  object-fit: contain;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.fab-book__icon svg {
  position: absolute;
  inset: 0;
  width: 28px;
  height: 28px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(-46px, 46px);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.fab-book:focus-visible .fab-book__icon img { transform: translate(46px, -46px); }
.fab-book:focus-visible .fab-book__icon svg { transform: none; }
.fab-book:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.fab-book::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(206, 158, 69, .55);
  animation: fab-ring 4.5s ease-out infinite;
  pointer-events: none;
}
@keyframes fab-ring {
  0%, 70% { box-shadow: 0 0 0 0 rgba(206, 158, 69, .55); }
  100% { box-shadow: 0 0 0 16px rgba(206, 158, 69, 0); }
}

/* the header pill steps aside while the floating one is out */
.site-header__actions .book-pill { transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
.past-hero .site-header__actions .book-pill {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.94);
  transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .45s;
}

@media (max-width: 809.98px) {
  .fab-book { height: 56px; }
  .fab-book__icon { width: 56px; height: 56px; }
  .fab-book__icon img { width: 36px; height: 31px; }
  .fab-book::after { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .fab-book, .fab-book__label, .fab-book__icon img, .fab-book__icon svg { transition: none; }
  .fab-book::after { animation: none; }
}