/* ========================================
   OVO Talent Booking Page
   BLACK theme matching ovotalent.com with OVO red accent
   (Samantha override in block near bottom restores cream for samanthabaio.com)
   ======================================== */

:root {
  --page-bg: #000000;
  --card-bg: #0A0A0A;
  --input-bg: #141414;
  --border: rgba(255, 255, 255, 0.10);
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.62);
  --text-button: #FFFFFF;
  --accent: #FF0031;
  --error: #ef4444;
  --valid: #22c55e;
  --placeholder: rgba(255, 255, 255, 0.38);
  --hover-tint: rgba(255, 255, 255, 0.06);
  --shadow-color: rgba(0, 0, 0, 0.6);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---- Reset ---- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  background: var(--page-bg);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
}

button {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  background: none;
}

input {
  font-family: var(--font);
  outline: none;
  border: none;
  background: none;
}

/* ===========================================================
   PAGE CURTAIN (first-visit entrance)
   Exact visual match to ovotalent.com curtain, compressed
   to ~1.25s total with vanilla JS phase timeline in app.js.
   Hidden via html.curtain-skip on Samantha, repeat visits,
   and prefers-reduced-motion.
   =========================================================== */
.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: var(--page-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  transition: clip-path 0.45s cubic-bezier(0.87, 0, 0.13, 1);
}
.page-curtain::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 49, 0.18) 0%, transparent 70%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.page-curtain.glow::before { opacity: 1; }
.page-curtain .curtain-logo {
  font-family: 'Boska', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 5rem);
  color: #FAF7F4;
  text-transform: lowercase;
  letter-spacing: -0.06em;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out, filter 0.3s ease-in;
  will-change: opacity, transform, filter;
}
.page-curtain .curtain-logo .dot {
  color: var(--accent);
  display: inline-block;
  transition: transform 0.22s ease-out, text-shadow 0.22s ease-out;
}
.page-curtain .curtain-line {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin-top: 20px;
  transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease-in;
}
.page-curtain.in .curtain-logo { opacity: 1; transform: scale(1); }
.page-curtain.line .curtain-line { width: 80px; }
.page-curtain.pulse .curtain-logo .dot {
  transform: scale(1.2);
  text-shadow: 0 0 40px rgba(255, 0, 49, 0.9), 0 0 80px rgba(255, 0, 49, 0.5);
}
.page-curtain.out .curtain-logo {
  opacity: 0;
  transform: scale(1.08);
  filter: blur(6px);
}
.page-curtain.out .curtain-line { opacity: 0; }
.page-curtain.wipe { clip-path: inset(0 0 100% 0); }

/* Default: show OVO logotype, hide others */
.curtain-sam { display: none; }
.curtain-rm  { display: none; }

/* ---- Roster Method route curtain variant ----
   Same dark OVO treatment, wordmark swapped to "the roster method."
   Drives off html.rm-route (set synchronously in head) for
   book.rostermethod.com and 1on1.alexgunnar.com. */
html.rm-route .curtain-ovo { display: none; }
html.rm-route .curtain-sam { display: none; }
html.rm-route .curtain-rm  { display: inline-block; }

/* ---- Sam route curtain variant ----
   Cream background, "samantha baio" in Instrument Serif italic,
   warm espresso logotype, gold accent dot, gold line sweep.
   Drives off html.sam-route (set synchronously in head). */
html.sam-route .page-curtain {
  background: #FFF8F0;
}
html.sam-route .curtain-ovo { display: none; }
html.sam-route .curtain-sam { display: inline-block; }
html.sam-route .page-curtain .curtain-logo {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #2A1F19;
  letter-spacing: -0.01em;
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);
}
html.sam-route .page-curtain .curtain-logo .dot {
  color: #C4956A;
}
html.sam-route .page-curtain .curtain-line {
  background: linear-gradient(90deg, transparent, #C4956A, transparent);
}
html.sam-route .page-curtain::before {
  background: radial-gradient(circle, rgba(196, 149, 106, 0.28) 0%, transparent 70%);
}
html.sam-route .page-curtain.pulse .curtain-logo .dot {
  text-shadow: 0 0 36px rgba(196, 149, 106, 0.95),
               0 0 72px rgba(196, 149, 106, 0.55);
}

/* ---- Creator photo in curtain ---- */
/* Large hero-style headshot (120px desktop, 96px mobile). Double halo ring
   for premium Calendly-style treatment. Name below in tracked uppercase. */
.curtain-creator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.page-curtain.in .curtain-creator { opacity: 1; transform: translateY(0) scale(1); }
.page-curtain.out .curtain-creator {
  opacity: 0; transform: scale(1.06); filter: blur(6px);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in, filter 0.2s ease-in;
}
.curtain-creator-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 0, 49, 0.5),
              0 0 0 10px rgba(255, 0, 49, 0.06),
              0 14px 48px rgba(0, 0, 0, 0.55);
  transition: box-shadow 0.6s ease-out;
}
.page-curtain.glow .curtain-creator-img {
  box-shadow: 0 0 0 1px rgba(255, 0, 49, 0.65),
              0 0 0 10px rgba(255, 0, 49, 0.14),
              0 0 56px rgba(255, 0, 49, 0.22),
              0 14px 48px rgba(0, 0, 0, 0.55);
}
.curtain-creator-name {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.page-curtain.has-creator .curtain-logo {
  font-size: clamp(1.4rem, 3.6vw, 2rem);
  margin-top: 4px;
  opacity: 0.75;
}
.page-curtain.has-creator .curtain-line { margin-top: 14px; }
@media (max-width: 520px) {
  .curtain-creator-img { width: 96px; height: 96px; }
  .curtain-creator-name { font-size: 11px; }
  .curtain-creator { gap: 14px; margin-bottom: 20px; }
  .page-curtain.has-creator .curtain-logo { font-size: clamp(1.4rem, 3.5vw, 2rem); }
}

/* Skip curtain entirely: repeat visits, reduced motion */
html.curtain-skip .page-curtain { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .page-curtain { display: none !important; }
}

/* CURTAIN RACE FALLBACK
   On slow phones JS can take several seconds to parse, leaving the
   curtain stuck on a blank logo. These keyframes run unconditionally:
   the logo fade-in autoplays at 0.3s, and the whole curtain auto-wipes
   at 2.5s (well after the JS timeline's 1.35s budget). fill-mode
   forwards locks the final state so the curtain always clears even
   if the JS never executes. Scoped off curtain-skip so Samantha,
   repeat visits, and reduced-motion still suppress it. */
@keyframes curtainFallbackLogoIn {
  0%   { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes curtainFallbackWipe {
  0%, 100% { clip-path: inset(0 0 100% 0); }
}
html:not(.curtain-skip) .page-curtain .curtain-logo {
  animation: curtainFallbackLogoIn 0.55s ease-out 0.35s forwards;
}
html:not(.curtain-skip) .page-curtain {
  animation: curtainFallbackWipe 0.01s linear 2.5s forwards;
}

/* ---- Page layout ---- */
.page {
  display: flex;
  justify-content: center;
  padding: 56px 20px 40px;
  min-height: 100vh;
  flex: 1 0 auto;
}

/* ---- Page-level footer (outside the card, pinned to bottom) ---- */
.page-footer {
  flex-shrink: 0;
  padding: 24px 20px 32px;
  text-align: center;
  color: var(--text-secondary);
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}

.footer-logo {
  height: 14px;
  width: auto;
  color: var(--text-primary);
  opacity: 0.40;
}

.footer-sep {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.18);
}

.footer-link {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.40);
  text-decoration: none;
  letter-spacing: 0.3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  transition: color 0.2s, border-color 0.2s;
}
.footer-link:hover {
  color: rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.25);
}

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.5px;
}
.footer-legal .footer-link {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.28);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.footer-legal .footer-link:hover {
  color: rgba(255, 255, 255, 0.50);
}

@media (max-width: 768px) {
  .page {
    padding: 40px 16px 24px;
  }
  .page-footer {
    padding: 16px 16px 24px;
  }
  .footer-logo { height: 12px; }
  .footer-link { font-size: 10px; }
  .footer-legal { font-size: 9px; gap: 6px; }
}

/* ---- Card ---- */
.card {
  width: 100%;
  max-width: 811px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px var(--shadow-color), 0 8px 24px -8px var(--shadow-color);
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}

/* ---- OVO brand header ---- */
.card-brand-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ovo-logotype {
  font-family: 'Boska', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--text-primary);
  letter-spacing: -0.05em;
  text-transform: lowercase;
  line-height: 1;
}

.ovo-dot {
  color: #FF0031;
}

body.brand-samantha .ovo-only,
body.brand-rm .ovo-only {
  display: none;
}

/* Roster Method domains (book.rostermethod.com, 1on1.alexgunnar.com):
   hide the "ovotalent." agency wordmark at the top. The card reads clean
   with no wordmark at all; the brand cue for these domains is the tab
   favicon (set by the branding script in index.html), not a header logo. */
body.brand-roster .ovo-only {
  display: none;
}

/* Samantha brand header (injected by samantha-theme branch when page loads).
   Editorial rhythm: generous top padding so the wordmark has breathing room,
   subtle gold hairline below. */
.sam-brand-header {
  padding: 30px 24px 24px !important;
  border-bottom: 1px solid rgba(196, 149, 106, 0.14) !important;
  opacity: 0;
  animation: samHeaderIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards;
}
.sam-logotype {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.75rem;
  color: #2A1F19;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  line-height: 1;
  display: inline-block;
  position: relative;
}
/* Tiny gold accent under the wordmark, sweeps in after the logotype lands */
.sam-logotype::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C4956A, transparent);
  animation: samLogoUnderline 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.55s forwards;
  transform: translateX(-50%);
}
@keyframes samHeaderIn {
  0%   { opacity: 0; transform: translateY(-8px); letter-spacing: 0.08em; }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: -0.01em; }
}
@keyframes samLogoUnderline {
  0%   { width: 0; opacity: 0; }
  100% { width: 58px; opacity: 1; }
}
body.brand-samantha .sam-brand-header {
  background: transparent;
}

/* Title row that the shared twoDay flow places above the day cards (Sam only).
   Editorial spacing: more air above, tighter bottom since day cards follow. */
.sam-title-row {
  text-align: center;
  padding: 36px 16px 22px;
  opacity: 0;
  animation: ovoFadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s forwards;
}
.sam-title-row .sam-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.12;
  color: #2A1F19;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.sam-title-row .sam-subtitle {
  font-family: 'Plus Jakarta Sans', Inter, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(42, 31, 25, 0.6);
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.005em;
}
@media (max-width: 768px) {
  .sam-title-row {
    padding: 28px 16px 18px;
  }
  .sam-title-row .sam-title {
    font-size: 1.72rem;
  }
  .sam-title-row .sam-subtitle {
    font-size: 12.5px;
  }
}

/* ---- Clean booking title (warm-inbound routes like /patricia-brand) ---- */
/* Minimal Calendly-style title above the day cards. No marketing. */
.clean-title-row {
  text-align: center;
  padding: 28px 12px 26px;
  opacity: 0;
  animation: ovoFadeUp 0.6s ease 0.15s forwards;
}
.clean-title-row .clean-title {
  font-family: var(--font);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.clean-title-row .clean-subtitle {
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 0;
  font-weight: 400;
  line-height: 1.55;
}

/* ---- Creator profile photo (clean booking pages) ----
   Calendly/Cal.com-style hero headshot. Large (120px desktop / 96px mobile),
   double halo ring, smooth upward float on reveal. This is the first thing
   a brand sees when they land -- it must feel personal and premium. */
.creator-photo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.creator-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #FFFFFF;
  box-shadow: 0 0 0 1px rgba(255, 0, 49, 0.35),
              0 0 0 8px rgba(255, 0, 49, 0.06),
              0 10px 32px rgba(0, 0, 0, 0.28),
              0 2px 6px rgba(0, 0, 0, 0.08);
  opacity: 0;
  animation: creatorPhotoIn 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards;
}
/* Tighten the title/subtitle spacing below the photo so they hug the image */
.clean-title-row.has-creator-photo { padding-top: 32px; }
.clean-title-row.has-creator-photo .clean-title { margin-bottom: 6px; font-size: 1.5rem; }
.clean-title-row.has-creator-photo .clean-subtitle { font-size: 13px; }
@keyframes creatorPhotoIn {
  0%   { opacity: 0; transform: translateY(10px) scale(0.9); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 520px) {
  .creator-photo { width: 96px; height: 96px; border-width: 2.5px; }
  .creator-photo-wrap { margin-bottom: 16px; }
  .clean-title-row.has-creator-photo { padding-top: 24px; }
  .clean-title-row.has-creator-photo .clean-title { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .creator-photo { animation: none; opacity: 1; transform: none; }
}
/* Samantha cream theme: white border looks right, but halo should be gold */
html.sam-route .creator-photo,
body.brand-samantha .creator-photo {
  box-shadow: 0 0 0 1px rgba(196, 149, 106, 0.4),
              0 0 0 8px rgba(196, 149, 106, 0.08),
              0 10px 32px rgba(42, 31, 25, 0.18),
              0 2px 6px rgba(42, 31, 25, 0.06);
}

/* ---- Progress bar ---- */
.progress-bar {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

.progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-step .dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--border);
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.progress-step.active .dot {
  background: var(--accent);
}

.progress-step .step-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  white-space: nowrap;
}

/* ---- Content area ---- */
.content {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ---- Form panel ---- */
.form-panel {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  min-width: 0;
}

.form-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.form-subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 17.5px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* ---- Social proof ---- */
.social-proof {
  height: 20px;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}

.social-proof-text {
  font-size: 12px;
  color: var(--text-secondary);
  display: block;
  animation: fadeInOut 0.5s ease;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- Form ---- */
#bookingForm {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stage.hidden {
  display: none;
}

/* Stage 2 reveal animation */
.stage-2.revealing,
.stage-3.revealing {
  display: flex;
  animation: slideDown 0.35s ease forwards;
}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-12px);
    max-height: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    max-height: 900px;
  }
}

/* Stage 3 Q&A textarea/select focus styling */
.stage-3 textarea:focus,
.stage-3 select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(255, 0, 49, 0.18);
  outline: none;
}

.stage-3 textarea::placeholder {
  color: var(--placeholder);
}

/* ---- Field group ---- */
.field-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

.field-label {
  display: none; /* Labels removed - using placeholder text only (matches iClosed) */
}

.field-label-inline {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.field-group input,
.field-group .iti {
  width: 100%;
}

.field-group input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 40px;
  padding: 0 36px 0 12px;
  font-size: 14px;
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field-group input::placeholder {
  color: var(--placeholder);
}

.field-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 0, 49, 0.18);
  outline: none;
}

/* ---- Phone highlight pulse on load (draws attention to first field) ---- */
@keyframes highlight-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 0, 49, 0); border-color: var(--border); }
  30% { box-shadow: 0 0 0 4px rgba(255, 0, 49, 0.2); border-color: var(--accent); }
  70% { box-shadow: 0 0 0 4px rgba(255, 0, 49, 0.2); border-color: var(--accent); }
  100% { box-shadow: 0 0 0 0 rgba(255, 0, 49, 0); border-color: var(--border); }
}

.phone-highlight .iti input,
.phone-highlight input[type="tel"] {
  animation: highlight-pulse 2s ease-in-out 1s 2; /* 2 pulses, starts after 1s delay */
}

.field-group input.invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}

.field-group input.valid {
  border-color: var(--valid);
}

/* Field error */
.field-error {
  font-size: 12px;
  color: var(--error);
  margin-top: 4px;
  min-height: 0;
  overflow: hidden;
  transition: all 0.2s ease;
}

.field-error.show {
  min-height: 16px;
}

/* Field valid checkmark */
.field-valid {
  position: absolute;
  right: 10px;
  top: 33px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.field-valid.show {
  opacity: 1;
}

/* ---- Name row ---- */
.name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ---- Phone: intl-tel-input overrides ---- */
.phone-wrap {
  position: relative;
}

.phone-wrap .iti {
  width: 100%;
}

.phone-wrap .iti__selected-country {
  background: transparent;
  border-right: 1px solid var(--border);
  padding: 0 10px;
  gap: 6px;
  border-radius: 8px 0 0 8px;
  transition: background 0.15s ease;
}

.phone-wrap .iti__selected-country:hover,
.phone-wrap .iti__selected-country:focus {
  background: rgba(255,255,255,0.06);
}

/* Legacy class fallback */
.phone-wrap .iti__selected-flag {
  background: transparent;
  border-right: 1px solid var(--border);
  padding: 0 10px;
  border-radius: 8px 0 0 8px;
  transition: background 0.15s ease;
}

.phone-wrap .iti__selected-flag:hover,
.phone-wrap .iti__selected-flag:focus {
  background: rgba(255,255,255,0.06);
}

.phone-wrap .iti__arrow {
  border-top-color: rgba(255,255,255,0.4);
  margin-left: 4px;
}

.phone-wrap .iti__arrow--up {
  border-bottom-color: rgba(255,255,255,0.4);
}

/* Dial code text next to flag */
.phone-wrap .iti__selected-dial-code {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  font-weight: 500;
}

/* Style the intl-tel-input phone field specifically */
.phone-wrap input.iti__tel-input,
.phone-wrap .iti input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 40px;
  font-size: 14px;
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.phone-wrap input.iti__tel-input::placeholder,
.phone-wrap .iti input::placeholder {
  color: var(--placeholder);
}

.phone-wrap input.iti__tel-input:focus,
.phone-wrap .iti input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 0, 49, 0.18);
}

/* Body-level dropdown container (intl-tel-input v21 appends to body) */
.iti--container {
  z-index: 99999 !important;
}

/* Desktop dropdown content panel — solid dark, no transparency.
   Scope to :not(.iti--fullscreen-popup) so mobile fullscreen keeps its
   edge-to-edge native layout (no max-height cap, no min-width, no border
   radius clipping) and the country list actually fills the screen. */
.iti--container:not(.iti--fullscreen-popup) .iti__dropdown-content {
  background: #0a0a0a !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
  max-height: 260px !important;
  box-shadow: 0 12px 48px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.06) !important;
  overflow: hidden !important;
  min-width: 300px !important;
}

/* Mobile fullscreen-popup: solid dark background only, no sizing overrides */
.iti--container.iti--fullscreen-popup .iti__dropdown-content {
  background: #0a0a0a !important;
}

.iti__search-input {
  background: #060610 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  text-align: left !important;
  margin: 8px !important;
  width: calc(100% - 16px) !important;
  box-sizing: border-box !important;
}

.iti__search-input::placeholder {
  color: rgba(255,255,255,0.3) !important;
  text-align: left !important;
}

.iti__country-list {
  background: #0a0a0a !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

/* Solid black dropdown chrome. Target STRUCTURAL elements ONLY — the
   `* ` universal-descendant selector MUST NOT be used here, or every
   flag span/img inherits a forced bg color that masks the sprite. */
.iti--container,
.iti__dropdown-content,
.iti__country-list,
.iti__country,
.iti__search-input,
ul.iti__country-list,
li.iti__country {
  background-color: #0a0a0a !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.iti__country:hover,
.iti__country.iti__highlight,
.iti__highlight,
.iti__country--highlight {
  background-color: #1a1a2e !important;
  background: #1a1a2e !important;
}

/* Flags (sprites) must stay transparent on BOTH resting and hover
   states so the image renders cleanly over the row color. Higher
   specificity than the row rule above via attribute-anchored parent. */
li.iti__country .iti__flag,
li.iti__country .iti__flag-box,
li.iti__country img,
li.iti__country .iti__flag *,
li.iti__country:hover .iti__flag,
li.iti__country:hover .iti__flag-box,
li.iti__country:hover img,
li.iti__country:hover .iti__flag *,
li.iti__country.iti__highlight .iti__flag,
li.iti__country.iti__highlight .iti__flag-box,
li.iti__country.iti__highlight img,
li.iti__country.iti__highlight .iti__flag * {
  background-color: transparent !important;
}

/* Webkit custom scrollbar */
.iti__country-list::-webkit-scrollbar {
  width: 6px;
}
.iti__country-list::-webkit-scrollbar-track {
  background: transparent;
}
.iti__country-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}
.iti__country-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.25);
}

.iti__country {
  padding: 10px 14px !important;
  color: #fff !important;
  background: #0a0a0a !important;
  transition: background 0.12s ease !important;
  font-size: 14px !important;
}

.iti__country:hover,
.iti__country.iti__highlight,
.iti__highlight,
.iti__country--highlight {
  background: #161628 !important;
  background-color: #161628 !important;
}

.iti__divider {
  border-color: rgba(255,255,255,0.06) !important;
  margin: 2px 0 !important;
}

.iti__dial-code {
  color: rgba(255,255,255,0.5);
}

.iti__country-name {
  color: #fff !important;
}

/* Fullscreen popup (mobile) — dark theme override */
.iti--fullscreen-popup .iti__dropdown-content {
  background: #0a0a0a !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  border: none !important;
}
.iti--fullscreen-popup .iti__search-input {
  background: #111 !important;
  margin: 12px !important;
  width: calc(100% - 24px) !important;
}
.iti--fullscreen-popup .iti__country {
  padding: 14px 18px !important;
}

/* Mini form intlTelInput: full width, clean flag, no overlap */
.ovo-mini-field .iti,
.sam-mini-field .iti {
  width: 100%;
  position: relative;
  z-index: 100;
}
.ovo-mini-field .iti input,
.sam-mini-field .iti input {
  padding-left: 68px !important;
}
.ovo-mini-field .iti__selected-flag,
.sam-mini-field .iti__selected-flag {
  background: transparent;
  border-right: 1px solid var(--border);
  padding: 0 8px;
}
.ovo-mini-field .iti__selected-flag:hover,
.sam-mini-field .iti__selected-flag:hover {
  background: rgba(255,255,255,0.05);
}
/* Mini form intlTelInput: high z-index so dropdown renders above the CTA button */
.ovo-mini-field .iti,
.sam-mini-field .iti {
  width: 100%;
  position: relative;
  z-index: 200;
}
.ovo-mini-field .iti input,
.sam-mini-field .iti input {
  padding-left: 68px !important;
}
.ovo-mini-field .iti__selected-flag,
.sam-mini-field .iti__selected-flag {
  background: transparent;
  border-right: 1px solid var(--border);
  padding: 0 8px;
}

/* OVO mini form phone: intl-tel-input wrapper */
.ovo-mini-phone-wrap {
  position: relative;
  width: 100%;
  z-index: 9999;
}
.ovo-mini-phone-wrap .iti {
  width: 100%;
  z-index: 9999;
}
/* Break dropdown out of parent stacking context */
#ovoMiniForm {
  overflow: visible !important;
}
#ovoMiniForm .ovo-mini-field {
  overflow: visible !important;
}
.ovo-mini-phone-wrap .iti__selected-country,
.ovo-mini-phone-wrap .iti__selected-flag {
  background: rgba(255,255,255,0.03);
  border-right: 1px solid var(--border);
  padding: 0 10px;
  border-radius: 10px 0 0 10px;
  transition: background 0.15s ease;
}
.ovo-mini-phone-wrap .iti__selected-country:hover,
.ovo-mini-phone-wrap .iti__selected-flag:hover {
  background: rgba(255,255,255,0.08);
}
.ovo-mini-phone-wrap .iti__selected-dial-code {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
}
.ovo-mini-phone-wrap .iti__arrow {
  border-top-color: rgba(255,255,255,0.4);
  margin-left: 4px;
}
.ovo-mini-phone-wrap .ovo-check {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* Phone valid checkmark needs different positioning because of intl-tel-input wrapper */
.phone-wrap ~ .field-valid {
  right: 10px;
  top: 13px;
}

/* Fix valid/error icon positions - stage 1 fields have no labels */
.stage-1 .field-valid {
  top: 13px !important;
}
/* Stage 2 fields have labels, push checkmark down */
.stage-2 .field-valid {
  top: 38px !important;
}
.field-error {
  margin-top: 2px;
}

/* ---- Continue button ---- */
.btn-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 48px;
  background: var(--accent);
  color: var(--text-button);
  font-size: 13px;
  font-weight: 600;
  border-radius: 100px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

/* Shimmer sweep on hover */
.btn-continue::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.5s ease;
}

.btn-continue:hover:not(:disabled)::after {
  left: 100%;
}

.btn-continue:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(255, 0, 49, 0.35);
  filter: brightness(1.08);
}

.btn-continue:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 0, 49, 0.25);
}

.btn-continue:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Chevron nudge on hover */
.btn-continue svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.btn-continue:hover:not(:disabled) svg {
  transform: translateX(3px);
}

/* Subtle glow pulse when button is enabled (draws eye) */
@keyframes btn-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 49, 0); }
  50% { box-shadow: 0 0 16px 2px rgba(255, 0, 49, 0.25); }
}

.btn-continue:not(:disabled) {
  animation: btn-glow 2.5s ease-in-out infinite;
}

.btn-continue:hover:not(:disabled) {
  animation: none;
}

/* ---- Consent text ---- */
.consent-text {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.7;
  line-height: 1.5;
  margin-top: 12px;
}

/* Footer-mode consent: even darker, sits inside .card-footer next to "Powered by" */
.consent-footer {
  display: block;
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.6;
  margin: 0 0 6px;
  text-align: center;
  font-weight: 400;
  letter-spacing: 0.1px;
}

.consent-link {
  text-decoration: underline;
  font-weight: 500;
  color: inherit;
  opacity: 0.85;
}

.consent-link:hover {
  color: var(--accent);
}

/* ---- Calendar panel ---- */
.calendar-panel {
  flex: 1;
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Gate overlay */
.calendar-gate {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--card-bg) 85%, transparent);
  border-radius: 0 8px 8px 0;
  backdrop-filter: blur(2px);
  transition: opacity 0.3s ease;
}

.calendar-gate.hidden {
  opacity: 0;
  pointer-events: none;
}

.gate-tooltip {
  background: var(--input-bg);
  color: var(--text-secondary);
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 8px;
  text-align: center;
  max-width: 240px;
  line-height: 1.4;
  border: 1px solid var(--border);
}

/* Calendar header */
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cal-month-label {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-primary);
}

.cal-nav {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.cal-nav:hover {
  background: var(--hover-tint);
}

/* Day headers */
.cal-day-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 4px;
}

.cal-day-headers span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 4px 0;
}

/* Day grid */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  justify-items: center;
}

.cal-day {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-primary);
  cursor: default;
  transition: background 0.15s ease;
  user-select: none;
}

.cal-day.available {
  cursor: pointer;
}

.cal-day.available:hover {
  background: var(--hover-tint);
}

.cal-day.selected {
  background: var(--accent);
  color: var(--text-button);
  font-weight: 500;
  border-radius: 50%;
}

.cal-day.unavailable {
  opacity: 0.3;
}

.cal-day.other-month {
  opacity: 0;
  pointer-events: none;
}

/* ---- Time slots ---- */
.time-slots {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-slots.hidden {
  display: none;
}

.time-slots-header {
  margin-bottom: 4px;
}

.time-slots-date {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.time-slots-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding-right: 4px;
}

.time-slot {
  padding: 12px 18px;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  background: transparent;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.time-slot:hover {
  border-color: var(--accent);
}

.time-slot.selected {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
  font-weight: 600;
  box-shadow: 0 2px 16px rgba(255, 0, 49, 0.45);
}

.timezone-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.timezone-row {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.timezone-prefix {
  white-space: nowrap;
}

.timezone-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.timezone-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 999px;
  padding: 4px 22px 4px 12px;
  margin: 0;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: background 120ms ease, border-color 120ms ease;
}

.timezone-select:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.28);
}

.timezone-select:focus-visible {
  border-color: rgba(0,0,0,0.4);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.timezone-caret {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.55;
}

body.samantha-theme .timezone-select {
  border-color: rgba(26,18,16,0.18);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  color: rgba(26,18,16,0.85);
}

body.samantha-theme .timezone-select:hover {
  background: rgba(26,18,16,0.04);
  border-color: rgba(26,18,16,0.32);
}

body.samantha-theme .timezone-select:focus-visible {
  border-color: rgba(212,175,55,0.7);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.18);
}

.btn-book {
  margin-top: 8px;
}

.btn-book.hidden {
  display: none;
}

/* ---- Footer (legacy .card-footer removed, now .page-footer lives outside card) ---- */

/* ---- Confirmation card ---- */
.confirmation-card {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 400px;
}

.confirmation-card.hidden {
  display: none;
}

.confirmation-inner {
  padding: 48px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Checkmark animation */
.check-anim {
  margin-bottom: 24px;
}

.check-circle {
  stroke-dasharray: 214;
  stroke-dashoffset: 214;
  animation: drawCircle 0.6s ease forwards;
}

.check-path {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: drawCheck 0.4s ease 0.4s forwards;
}

@keyframes drawCircle {
  to { stroke-dashoffset: 0; }
}

@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

.confirm-heading {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.confirm-detail {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.5;
}

.confirm-sub {
  font-size: 14px;
  color: var(--placeholder);
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* Tablet: stack form/calendar vertically */
@media (max-width: 900px) {
  .content {
    flex-direction: column;
  }

  .form-panel {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .calendar-panel {
    padding-top: 20px;
  }

  .calendar-gate {
    border-radius: 0 0 8px 8px;
  }
}

/* Mobile: full-width, no card border */
@media (max-width: 520px) {
  .page {
    padding: 0;
    min-height: auto;
  }

  .card {
    border: none;
    border-radius: 0;
    max-width: 100%;
    min-height: auto;
    align-self: stretch;
  }

  .content {
    flex: initial;
  }

  .calendar-panel {
    flex: initial;
  }

  .calendar-gate {
    border-radius: 0;
  }

  .name-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .progress-bar {
    gap: 16px;
    padding: 14px 16px;
  }

  .form-panel,
  .calendar-panel {
    padding: 20px 16px;
  }

  .cal-day {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  .exit-popup-card {
    width: 90vw !important;
    padding: 28px 20px !important;
  }
}

/* ========================================
   CONVERSION BOOSTERS
   ======================================== */

/* ---- Phone microcopy ---- */
.phone-microcopy {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.75;
  margin-top: 4px;
  padding-left: 2px;
}

/* ---- Spots remaining badge ---- */
.spots-badge {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 0, 49, 0.06);
  border: 1px solid rgba(255, 0, 49, 0.18);
  border-radius: 100px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.spots-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: spots-pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes spots-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.spots-badge strong {
  color: var(--accent);
  font-weight: 600;
}

/* ---- Exit intent popup ---- */
.exit-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exit-popup.hidden {
  display: none;
}

.exit-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.exit-popup-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px 36px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  animation: popup-enter 0.3s ease-out;
}

@keyframes popup-enter {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.exit-popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 24px;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
}

.exit-popup-close:hover {
  color: var(--text-primary);
}

.exit-popup-icon {
  margin-bottom: 16px;
}

.exit-popup-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.exit-popup-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
}

.exit-popup-btn {
  max-width: 280px;
  margin: 0 auto;
}

/* ---- Return visitor badge ---- */
.return-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 6px;
  font-size: 11px;
  color: #22c55e;
  margin-bottom: 8px;
}

/* ---- Continue button loading state ---- */
.btn-continue.loading span {
  opacity: 0;
}

.btn-continue.loading svg {
  opacity: 0;
}

.btn-continue.loading::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(17, 25, 40, 0.3);
  border-top-color: var(--text-button);
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ---- Samantha theme refinements ---- */
body.samantha-theme .form-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

body.samantha-theme .form-subtitle {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: var(--text-secondary);
}

body.samantha-theme .btn-continue {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  border-radius: 100px;
  height: 48px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

body.samantha-theme .btn-continue:not(:disabled) {
  animation: sam-btn-glow 2.5s ease-in-out infinite;
}

@keyframes sam-btn-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 149, 106, 0); }
  50% { box-shadow: 0 0 16px 2px rgba(196, 149, 106, 0.25); }
}

body.samantha-theme .btn-continue:hover:not(:disabled) {
  animation: none;
  box-shadow: 0 4px 20px rgba(196, 149, 106, 0.35);
}

body.samantha-theme .field-group input {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  border-radius: 12px;
  height: 44px;
}

body.samantha-theme .field-group input:focus {
  box-shadow: 0 0 0 2px rgba(196, 149, 106, 0.3);
}

body.samantha-theme .field-label-inline {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
}

body.samantha-theme .card {
  border-radius: 16px;
  border-color: rgba(196, 149, 106, 0.12);
}

body.samantha-theme .progress-step .dot {
  width: 10px;
  height: 10px;
}

body.samantha-theme .cal-day.selected {
  border-radius: 50%;
}

body.samantha-theme .time-slot {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  border-radius: 100px;
  font-size: 14px;
  min-height: 46px;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.samantha-theme .time-slot.selected {
  box-shadow: 0 2px 12px rgba(196, 149, 106, 0.3);
}

body.samantha-theme .time-slots-list {
  gap: 10px;
  padding: 4px 0;
}

body.samantha-theme .consent-text {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 9px;
  color: rgba(168,152,136,0.4);
  text-align: center;
  margin-top: 8px;
}

body.samantha-theme .phone-microcopy {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

body.samantha-theme .phone-wrap input:focus,
body.samantha-theme .phone-wrap .iti input:focus,
body.samantha-theme .phone-highlight .iti input,
body.samantha-theme .phone-highlight input[type="tel"] {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(196, 149, 106, 0.3) !important;
  animation: none !important;
}

body.samantha-theme .field-group input.invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 2px rgba(232, 124, 106, 0.2);
}

body.samantha-theme .confirm-heading {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 32px;
}

body.samantha-theme .confirm-detail,
body.samantha-theme .confirm-sub {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

body.samantha-theme .spots-badge {
  border-radius: 100px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  display: flex;
  width: fit-content;
  margin: 0 auto 14px;
  padding: 7px 16px;
  font-size: 12px;
  letter-spacing: 0.02em;
  background: rgba(196, 149, 106, 0.08);
  border: 1px solid rgba(196, 149, 106, 0.22);
  white-space: nowrap;
}

body.samantha-theme .spots-badge .spots-text {
  white-space: nowrap;
}

body.samantha-theme .exit-popup-card {
  border-radius: 20px;
  border: 1px solid rgba(196, 149, 106, 0.15);
}

body.samantha-theme .exit-popup-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
}

body.samantha-theme .exit-popup-text,
body.samantha-theme .exit-popup-btn {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

body.samantha-theme .step-label {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 13px;
}

body.samantha-theme .cal-month-label {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 18px;
  font-weight: 400;
}

body.samantha-theme .timezone-label {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

@media (max-width: 520px) {
  body.samantha-theme .card {
    border-radius: 0;
  }
}

/* ---- Loading shimmer for calendar ---- */
.cal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--text-secondary);
  font-size: 14px;
}

.cal-loading::after {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin-left: 8px;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ========================================
   SAMANTHA BAIO BRAND OVERRIDE
   Activated when host=booking.samanthabaio.com
   Body class .brand-samantha is set in JS at top of <body>.
   Cream/gold/espresso palette to match samanthabaio.com
   ======================================== */
body.brand-samantha {
  --page-bg: #FFF8F0;
  --card-bg: #FFFFFF;
  --input-bg: #FBF6EE;
  --border: rgba(196, 149, 106, 0.22);
  --text-primary: #2A1F19;
  --text-secondary: rgba(42, 31, 25, 0.66);
  --text-button: #FFF8F0;
  --accent: #C4956A;
  --placeholder: rgba(42, 31, 25, 0.42);
  --hover-tint: rgba(42, 31, 25, 0.06);
  --shadow-color: rgba(74, 44, 26, 0.12);
  --font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #FFF8F0;
}
body.brand-samantha .card {
  background: #FFFFFF;
  border: 1px solid rgba(196, 149, 106, 0.18);
  border-radius: 20px;
  box-shadow: 0 40px 100px -30px rgba(74, 44, 26, 0.18),
              0 14px 36px -12px rgba(74, 44, 26, 0.1),
              0 0 0 1px rgba(255, 248, 240, 0.8) inset;
  opacity: 0;
  transform: translateY(14px);
  animation: samCardIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s forwards;
}
@keyframes samCardIn {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Tighter horizontal rhythm on Sam: subtle margin pushes the card
   into a proper editorial column, not blunt full-width. */
body.brand-samantha.ovo-skin .calendar-panel {
  padding: 0 32px 32px !important;
}
body.brand-samantha.ovo-skin .sam-day-card {
  padding: 22px 16px !important;
}
body.brand-samantha .page {
  padding-top: 64px;
}
@media (max-width: 768px) {
  body.brand-samantha .page {
    padding-top: 32px;
  }
  body.brand-samantha .card {
    border-radius: 16px;
  }
  body.brand-samantha.ovo-skin .calendar-panel {
    padding: 0 20px 24px !important;
  }
  body.brand-samantha.ovo-skin .sam-day-card {
    padding: 18px 14px !important;
  }
}
body.brand-samantha .progress-bar {
  border-bottom-color: rgba(196, 149, 106, 0.18);
}
body.brand-samantha .progress-step .dot {
  background: rgba(196, 149, 106, 0.28);
}
body.brand-samantha .progress-step.active .dot {
  background: #C4956A;
  box-shadow: 0 0 0 4px rgba(196, 149, 106, 0.18);
}
body.brand-samantha .progress-step .step-label {
  color: #2A1F19;
  font-weight: 500;
}
body.brand-samantha .form-panel {
  border-right-color: rgba(196, 149, 106, 0.14);
}
body.brand-samantha .form-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #1A1715;
  margin-bottom: 8px;
}
body.brand-samantha .form-subtitle {
  font-size: 14px;
  color: rgba(42, 31, 25, 0.62);
  font-weight: 400;
  margin-bottom: 8px;
}
body.brand-samantha .social-proof-text {
  font-size: 11px;
  color: #C4956A;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}
body.brand-samantha input,
body.brand-samantha select,
body.brand-samantha textarea {
  color: #2A1F19;
  background: transparent;
}
body.brand-samantha input::placeholder,
body.brand-samantha textarea::placeholder {
  color: rgba(42, 31, 25, 0.38);
}
body.brand-samantha .field-group {
  border-color: rgba(196, 149, 106, 0.22);
}
body.brand-samantha .page-footer {
  color: rgba(42, 31, 25, 0.5);
}
body.brand-samantha .footer-logo {
  color: #2A1F19;
  opacity: 0.35;
}
body.brand-samantha .footer-sep {
  color: rgba(42, 31, 25, 0.18);
}
body.brand-samantha .footer-link {
  color: rgba(42, 31, 25, 0.40);
  border-bottom-color: rgba(42, 31, 25, 0.12);
}
body.brand-samantha .footer-link:hover {
  color: rgba(42, 31, 25, 0.65);
  border-color: rgba(42, 31, 25, 0.25);
}
body.brand-samantha .footer-legal {
  color: rgba(42, 31, 25, 0.22);
}
body.brand-samantha .footer-legal .footer-link {
  color: rgba(42, 31, 25, 0.28);
  border-bottom-color: rgba(42, 31, 25, 0.08);
}
body.brand-samantha .consent-text {
  color: rgba(42, 31, 25, 0.5);
}
body.brand-samantha .calendar-panel,
body.brand-samantha .calendar-header,
body.brand-samantha .calendar-grid,
body.brand-samantha .day-card {
  background: transparent;
  color: #2A1F19;
}
body.brand-samantha .day-card {
  border: 1px solid rgba(196, 149, 106, 0.22);
  background: #FFFFFF;
  color: #2A1F19;
}
body.brand-samantha .day-card:hover {
  border-color: #C4956A;
  background: #FBF6EE;
}
body.brand-samantha .day-card.selected,
body.brand-samantha .day-card.active {
  background: #2A1F19;
  border-color: #2A1F19;
  color: #FFF8F0;
}
body.brand-samantha .time-slot {
  border: 1px solid rgba(196, 149, 106, 0.22);
  background: #FFFFFF;
  color: #2A1F19;
}
body.brand-samantha .time-slot:hover {
  border-color: #C4956A;
  background: #FBF6EE;
}
body.brand-samantha .time-slot.selected,
body.brand-samantha .time-slot.active {
  background: #2A1F19;
  border-color: #2A1F19;
  color: #FFF8F0;
}
body.brand-samantha button[type="submit"],
body.brand-samantha .submit-btn,
body.brand-samantha .primary-btn,
body.brand-samantha .btn-primary,
body.brand-samantha .confirm-btn {
  background: #2A1F19;
  color: #FFF8F0;
  border-radius: 100px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 18px 36px;
  border: none;
  transition: all 0.4s ease;
}
body.brand-samantha button[type="submit"]:hover,
body.brand-samantha .submit-btn:hover,
body.brand-samantha .primary-btn:hover,
body.brand-samantha .btn-primary:hover,
body.brand-samantha .confirm-btn:hover {
  background: #C4956A;
  transform: translateY(-1px);
}
body.brand-samantha .field-valid svg path {
  stroke: #C4956A;
}
body.brand-samantha .exit-popup-card {
  background: #FFF8F0;
  border: 1px solid rgba(196, 149, 106, 0.22);
  color: #2A1F19;
}
body.brand-samantha .exit-popup-title {
  font-family: 'Instrument Serif', Georgia, serif;
  color: #1A1715;
}
body.brand-samantha .exit-popup-text {
  color: rgba(42, 31, 25, 0.66);
}

/* Confirmation card overrides for Sam's cream/gold theme */
body.brand-samantha #confirmationCard {
  background: #FFF8F0 !important;
  border-color: rgba(196, 149, 106, 0.18) !important;
}
body.brand-samantha #confirmationCard h1 {
  color: #2A1F19 !important;
}
body.brand-samantha #confirmationCard .confirmation-inner > p {
  color: rgba(42, 31, 25, 0.66) !important;
}
body.brand-samantha #confirmationCard .confirmation-inner > p span {
  color: #2A1F19 !important;
}
body.brand-samantha #confirmationCard > div:last-child {
  background: #F5EDE2 !important;
  border-top-color: rgba(196, 149, 106, 0.18) !important;
}

/* ========================================
   brand-samantha + ovo-skin overrides
   The shared twoDay calendar-first flow adds `ovo-skin` to body. When Sam is
   on that flow, we want her cream/gold aesthetic to win, not the OVO red-tint
   defaults. These rules raise brand-samantha specificity above the JS-injected
   ovo-skin rules (which use !important). Preserves the dark-brown selected
   treatment users already like.
   ======================================== */
body.brand-samantha.ovo-skin .sam-day-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(196, 149, 106, 0.28) !important;
  color: #2A1F19 !important;
  position: relative;
  overflow: hidden;
  transition: opacity 0.4s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease,
              color 0.3s ease !important;
}
body.brand-samantha.ovo-skin .sam-day-card:hover {
  background: #FBF6EE !important;
  border-color: #C4956A !important;
  box-shadow: 0 8px 26px rgba(196, 149, 106, 0.28),
              0 0 0 1px rgba(196, 149, 106, 0.35) !important;
  transform: translateY(-2px) !important;
}
body.brand-samantha.ovo-skin .sam-day-card.selected {
  background: #2A1F19 !important;
  border-color: #2A1F19 !important;
  color: #FFF8F0 !important;
  box-shadow: 0 10px 30px rgba(42, 31, 25, 0.32),
              0 0 0 1px rgba(196, 149, 106, 0.5),
              0 0 24px rgba(196, 149, 106, 0.22) !important;
  transform: translateY(-2px) !important;
}
body.brand-samantha.ovo-skin .sam-day-card.selected * {
  color: #FFF8F0 !important;
}
/* Gold shimmer sweep on hover. Runs once per hover. */
body.brand-samantha.ovo-skin .sam-day-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(110deg, transparent 20%,
              rgba(196, 149, 106, 0.14) 50%, transparent 80%);
  transition: left 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
body.brand-samantha.ovo-skin .sam-day-card:hover::before {
  left: 120%;
}

body.brand-samantha.ovo-skin .time-slot {
  background: #FFFFFF !important;
  border: 1px solid rgba(196, 149, 106, 0.28) !important;
  color: #2A1F19 !important;
  position: relative;
  overflow: hidden;
  transition: opacity 0.35s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease,
              color 0.28s ease !important;
}
body.brand-samantha.ovo-skin .time-slot:hover {
  background: #FBF6EE !important;
  border-color: #C4956A !important;
  box-shadow: 0 6px 20px rgba(196, 149, 106, 0.26),
              0 0 0 1px rgba(196, 149, 106, 0.32) !important;
  transform: translateY(-2px) !important;
}
body.brand-samantha.ovo-skin .time-slot.selected {
  background: #2A1F19 !important;
  border-color: #2A1F19 !important;
  color: #FFF8F0 !important;
  box-shadow: 0 8px 24px rgba(42, 31, 25, 0.32),
              0 0 0 1px rgba(196, 149, 106, 0.5),
              0 0 20px rgba(196, 149, 106, 0.22) !important;
  transform: translateY(-2px) !important;
}
/* Gold shimmer sweep on time-slot hover */
body.brand-samantha.ovo-skin .time-slot::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(110deg, transparent 20%,
              rgba(196, 149, 106, 0.16) 50%, transparent 80%);
  transition: left 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
body.brand-samantha.ovo-skin .time-slot:hover::before {
  left: 140%;
}

body.brand-samantha.ovo-skin .btn-book {
  background: #2A1F19 !important;
  border: 1.5px solid #2A1F19 !important;
  color: #FFF8F0 !important;
  border-radius: 100px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 16px 32px !important;
}
/* Gold shimmer sweep across the button on hover (override the OVO red sweep) */
body.brand-samantha.ovo-skin .btn-book::after {
  background: linear-gradient(90deg, transparent,
              rgba(196, 149, 106, 0.45), transparent) !important;
}
body.brand-samantha.ovo-skin .btn-book:hover:not(.ovo-btn-pending) {
  background: #C4956A !important;
  border-color: #C4956A !important;
  color: #FFF8F0 !important;
  box-shadow: 0 10px 30px rgba(196, 149, 106, 0.42),
              0 0 0 1px rgba(196, 149, 106, 0.3) !important;
  transform: translateY(-2px) !important;
}
/* Gold bump + pulse for Sam (mirrors OVO red bump + pulse). Because
   ovo-skin injects animation:none!important via the red pulse rule,
   we re-declare with Sam colors at higher specificity.
   Calm rise + single pulse, no overshoot, no infinite ring. The
   springy cubic-bezier + infinite pulse made the bottom button on the
   final stage read as "jumping weird" on mobile. */
@keyframes samBookBump {
  0%   { transform: translateY(10px) scale(0.97); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes samBookPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 149, 106, 0),
                         0 6px 20px rgba(42, 31, 25, 0.2); }
  50%      { box-shadow: 0 0 0 8px rgba(196, 149, 106, 0),
                         0 0 28px rgba(196, 149, 106, 0.45),
                         0 8px 26px rgba(42, 31, 25, 0.28); }
}
body.brand-samantha.ovo-skin .btn-book:not(.hidden):not(.ovo-btn-pending) {
  animation: samBookBump 0.6s cubic-bezier(0.16, 1, 0.3, 1),
             samBookPulse 2.4s ease-in-out 0.65s 1 !important;
}
body.brand-samantha.ovo-skin .btn-book:not(.hidden):not(.ovo-btn-pending):hover {
  animation: none !important;
}
body.brand-samantha.ovo-skin .btn-book.ovo-btn-pending {
  background: #F5EDE2 !important;
  color: rgba(42, 31, 25, 0.45) !important;
  border-color: rgba(196, 149, 106, 0.2) !important;
}
body.brand-samantha.ovo-skin .btn-book span {
  color: inherit !important;
}

/* Mini-form input focus uses gold ring, not red */
body.brand-samantha.ovo-skin .ovo-mini-field input:focus {
  border-color: #C4956A !important;
  box-shadow: 0 0 0 3px rgba(196, 149, 106, 0.28) !important;
}

/* Spots badge on Sam's page: gold, not red */
body.brand-samantha .spots-badge {
  background: rgba(196, 149, 106, 0.1) !important;
  border-color: rgba(196, 149, 106, 0.26) !important;
  color: #2A1F19 !important;
}
body.brand-samantha .spots-badge .spots-dot {
  background: #C4956A !important;
}

/* Social proof "reveal" hint that runs on the shared flow */
body.brand-samantha .social-proof-text strong,
body.brand-samantha .spots-text strong {
  color: #C4956A !important;
}

/* ========================================
   MINI-FORM REVEAL + PULSE ANIMATIONS
   Used when phone/time slot selection injects extra fields
   ======================================== */

/* OVO mini-form field (injected after time slot selection) */
.ovo-mini-field {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.ovo-mini-field.revealed {
  opacity: 1;
  transform: translateY(0);
}

@keyframes ovoMiniFormReveal {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Progressive pulse highlight on the next field to fill
   Uses rgb(from var(--accent) ...) so red (OVO) and gold (brand-samantha) share the animation. */
@keyframes ovoFieldPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgb(from var(--accent) r g b / 0.4);
    border-color: var(--border);
  }
  50% {
    box-shadow: 0 0 0 4px rgb(from var(--accent) r g b / 0.28);
    border-color: var(--accent);
  }
}

.ovo-pulsing {
  animation: ovoFieldPulse 1.8s ease-in-out infinite;
}

/* Samantha equivalent. Matches OVO's max-height collapse pattern so gated
   fields take zero vertical space until revealed. That keeps the book button
   right under the phone field while the user is still filling phone, and
   smoothly slides down when first name / last name / email unlock. */
.sam-mini-field {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0 !important;
  transform: translateY(10px);
  transition: opacity 0.35s ease, max-height 0.35s ease,
              margin 0.35s ease, transform 0.35s ease;
  will-change: opacity, max-height, transform;
}

.sam-mini-field.revealed {
  opacity: 1;
  max-height: 200px;
  overflow: visible;
  margin-bottom: 14px !important;
  transform: translateY(0);
}

@keyframes samMiniFormReveal {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes samFieldFocus {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(196, 149, 106, 0);
    border-color: rgba(196, 149, 106, 0.22);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(196, 149, 106, 0.25);
    border-color: #C4956A;
  }
}

/* ========================================
   ENHANCED CONTINUE BUTTON ANIMATION
   Stronger pulse, arrow bounce, gradient sweep
   ======================================== */

/* Override base btn-continue with gradient + stronger glow */
.btn-continue:not(:disabled) {
  background: linear-gradient(135deg, #FF0031 0%, #FF2D4F 50%, #FF0031 100%);
  background-size: 200% 200%;
  animation: btn-gradient-drift 3s ease-in-out infinite, btn-glow-strong 2.4s ease-in-out infinite;
}

@keyframes btn-gradient-drift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes btn-glow-strong {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 49, 0),
                0 8px 24px -6px rgba(255, 0, 49, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 0, 49, 0),
                0 12px 32px -6px rgba(255, 0, 49, 0.65),
                0 0 22px 2px rgba(255, 0, 49, 0.35);
  }
}

/* Arrow bounce when enabled */
.btn-continue:not(:disabled) svg {
  animation: arrow-bounce 1.8s ease-in-out infinite;
}

@keyframes arrow-bounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

.btn-continue:hover:not(:disabled) {
  animation: btn-gradient-drift 1.5s ease-in-out infinite;
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 28px rgba(255, 0, 49, 0.55),
              0 0 0 3px rgba(255, 0, 49, 0.15);
  filter: brightness(1.1);
}

.btn-continue:hover:not(:disabled) svg {
  animation: none;
  transform: translateX(5px);
}

.btn-continue:active:not(:disabled) {
  transform: translateY(0) scale(0.99);
}

/* Keep Sam's softer gold button, not the red one */
body.brand-samantha .btn-continue:not(:disabled) {
  background: #2A1F19;
  animation: sam-btn-glow 2.5s ease-in-out infinite;
}

body.brand-samantha .btn-continue:not(:disabled) svg {
  animation: arrow-bounce 1.8s ease-in-out infinite;
}

body.brand-samantha .btn-continue:hover:not(:disabled) {
  background: #C4956A;
  animation: none;
  box-shadow: 0 8px 28px rgba(196, 149, 106, 0.45);
  transform: translateY(-2px) scale(1.01);
}

/* ========================================
   COMPLETION TACTICS UI
   Progress %, urgency timer, micro-commit copy
   ======================================== */

.completion-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
}

.completion-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}

.completion-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #FF5577);
  border-radius: 100px;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: 0 0 12px rgba(255, 0, 49, 0.5);
}

.completion-progress-label {
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}

.completion-encourage {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  min-height: 14px;
  transition: opacity 0.3s ease, color 0.3s ease;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.completion-encourage.show {
  opacity: 1;
}

/* Urgency timer (holds spot for 5 min after selecting time). Three stages:
   calm (>2:00) -> warning amber (2:00-1:00) -> expiring red (<1:00). */
.urgency-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(120, 180, 255, 0.08);
  border: 1px solid rgba(120, 180, 255, 0.28);
  border-radius: 100px;
  font-size: 11px;
  color: #8FC1FF;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.urgency-timer-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8FC1FF;
  animation: spots-pulse 1s ease-in-out infinite;
}

.urgency-timer.warning {
  background: rgba(255, 165, 0, 0.12);
  border-color: rgba(255, 165, 0, 0.4);
  color: #FFB74D;
}

.urgency-timer.warning .urgency-timer-dot {
  background: #FFB74D;
}

.urgency-timer.expiring {
  background: rgba(255, 0, 49, 0.1);
  border-color: rgba(255, 0, 49, 0.35);
  color: var(--accent);
}

.urgency-timer.expiring .urgency-timer-dot {
  background: var(--accent);
}

/* "Still there. Keep holding" extension button. Surfaces at 0:30 once per hold. */
.ovo-extend-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 0;
  width: fit-content;
  padding: 9px 16px;
  background: rgba(255, 0, 49, 0.08);
  border: 1px solid rgba(255, 0, 49, 0.4);
  border-radius: 100px;
  color: var(--accent);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  animation: ovoFadeUp 0.35s ease forwards;
  transition: background 0.2s ease, transform 0.15s ease;
}

.ovo-extend-btn:hover {
  background: rgba(255, 0, 49, 0.14);
  transform: translateY(-1px);
}

.ovo-extend-btn:disabled,
.ovo-extend-btn.ovo-extend-btn-loading {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* Green check rewards that fade in per completed field */
@keyframes check-reward {
  0% { opacity: 0; transform: scale(0.5) rotate(-10deg); }
  60% { opacity: 1; transform: scale(1.2) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.field-valid.show svg {
  animation: check-reward 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.brand-samantha .completion-progress {
  background: color-mix(in srgb, #C4956A 10%, transparent);
  border-color: rgba(196, 149, 106, 0.28);
}

body.brand-samantha .completion-progress-fill {
  background: linear-gradient(90deg, #C4956A, #D9B38A);
  box-shadow: 0 0 12px rgba(196, 149, 106, 0.5);
}

body.brand-samantha .completion-progress-label {
  color: #C4956A;
}