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

:root {
  --teal:        #00BDC3;   /* brand primary — matches bluewaterspany.com CTAs */
  --teal-dark:   #049aa0;   /* hover state */
  --teal-deep:   #046267;   /* higher-contrast teal for headings/text-on-white */
  --navy:        #313B67;   /* brand secondary accent */
  --bg:          #F3FBFB;   /* body background — light teal tint */
  --card-bg:     #ffffff;
  --tint:        #E4F7F8;   /* light teal tint for hover/selected bg */
  --text:        #2B2B2B;
  --muted:       #6C7E7F;
  --white:       #ffffff;
  --error:       #c0392b;
  --border:      #D7ECEE;
  --shadow:      0 4px 24px rgba(0, 61, 66, 0.12);
  --shadow-sm:   0 2px 8px  rgba(0, 61, 66, 0.08);
  --radius:      20px;
  --radius-pill: 999px;
  --transition:  0.25s ease;
}

body {
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: 'Lustria', serif;
  font-weight: 400;
  color: var(--teal-deep);
  letter-spacing: 0.01em;
}

a { color: var(--teal-dark); }
a:hover { opacity: 0.75; }

/* ===== Container ===== */
.form-container {
  width: 100%;
  max-width: 480px;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  min-height: 400px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

/* ===== Progress Bar ===== */
.progress-bar {
  height: 3px;
  background: var(--border);
  flex-shrink: 0;
}

.progress-fill {
  height: 100%;
  background: var(--teal);
  width: 0%;
  transition: width 0.4s ease;
}

/* ===== Back Button ===== */
.back-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  background: none;
  border: none;
  color: var(--teal-deep);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: background var(--transition), opacity var(--transition);
  opacity: 0;
  pointer-events: none;
}

.back-btn.visible { opacity: 1; pointer-events: auto; }
.back-btn:hover { background: var(--tint); }

/* ===== Steps ===== */
.steps-wrapper { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; }

.step {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  opacity: 0;
  transform: translateX(60px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  overflow-y: auto;
}

.step.active      { opacity: 1; transform: translateX(0);    pointer-events: auto; position: relative; }
.step.exit-left   { opacity: 0; transform: translateX(-60px); }
.step.exit-right  { opacity: 0; transform: translateX(60px);  }
.step.enter-right { transform: translateX(60px);  }
.step.enter-left  { transform: translateX(-60px); }

/* ===== Step Content ===== */
.step-content {
  width: 100%;
  min-height: 100%;
  padding: 48px 32px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.step-header { margin-bottom: 28px; }
.step-header h2 { font-size: 1.6rem; line-height: 1.25; }

.step-sub {
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--muted);
}

/* ===== Logo Strip ===== */
.logo {
  width: calc(100% + 64px);
  margin: -48px -32px 32px;
  padding: 20px 32px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo a { display: flex; justify-content: center; }

.logo-img { height: 68px; width: auto; max-width: 200px; }

h1 {
  font-size: 1.6rem;
  margin-bottom: 28px;
  line-height: 1.25;
  color: var(--teal-deep);
}

/* ===== Buttons ===== */
.btn {
  border: none;
  border-radius: var(--radius-pill);
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
  outline: none;
}

.btn:focus-visible { box-shadow: 0 0 0 3px rgba(0, 189, 195, 0.35); }

.btn-primary {
  background: var(--teal);
  color: var(--white);
  padding: 14px 48px;
  width: 100%;
  max-width: 320px;
  margin-top: 8px;
}

.btn-primary:hover:not(:disabled) {
  background: var(--teal-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 189, 195, 0.35);
}

.btn-primary:active  { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

/* ===== Path / Selection Cards ===== */
.path-cards,
.visit-status-cards {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}

.path-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 24px;
  min-height: 72px;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition);
  font-family: 'Raleway', system-ui, sans-serif;
  display: flex;
  align-items: center;
  gap: 16px;
}

.path-card:hover {
  border-color: var(--teal);
  background: var(--tint);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 189, 195, 0.2);
}

.path-card.selected { border-color: var(--teal); background: var(--tint); }

.path-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--tint);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
}

.path-card:hover .path-card-icon,
.path-card.selected .path-card-icon {
  background: var(--teal);
  color: var(--white);
}

.path-card-text  { display: flex; flex-direction: column; gap: 4px; }
.path-card-title { font-size: 1.05rem; font-weight: 600; color: var(--teal-deep); }
.path-card-desc  { font-size: 0.85rem; color: var(--muted); line-height: 1.4; }

/* ===== Service Selection ===== */
.service-grid {
  width: 100%;
  max-width: 420px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.service-chip {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal-deep);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  font-family: 'Raleway', system-ui, sans-serif;
}
.service-chip:hover,
.service-chip.selected { border-color: var(--teal); background: var(--tint); }

/* ===== Guide list (ip-guide) ===== */
.guide-list {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.guide-item {
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  text-align: left;
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--teal-deep);
  transition: all var(--transition);
}
.guide-item:hover,
.guide-item.selected { border-color: var(--teal); background: var(--tint); }

/* ===== Inputs ===== */
.input-group {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 8px;
}

.field { text-align: left; }

.field input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: 1rem;
  color: var(--text);
  transition: border-color var(--transition);
  outline: none;
  background: var(--white);
}

.field input::placeholder { color: var(--muted); opacity: 0.7; }
.field input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 189, 195, 0.15); }
.field input.invalid { border-color: var(--error); }

.field-error {
  display: block;
  font-size: 0.8rem;
  color: var(--error);
  margin-top: 4px;
  min-height: 1.2em;
}

.consent-text {
  margin-top: 14px;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 400px;
  text-align: left;
}

.cherry-info-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #f9fafb;
  align-self: center;
  width: 100%;
  max-width: 400px;
}

.cherry-info-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.cherry-info-text {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
  text-align: left;
}

/* ===== Privacy Link ===== */
.privacy-link {
  margin-top: auto;
  padding-top: 24px;
  padding-bottom: 8px;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  width: 100%;
  /* Pins to the bottom of the scrollable .step so it reads as a fixed
     footer instead of drifting further down as content above it grows. */
  position: sticky;
  bottom: 0;
  background: var(--card-bg);
}

.privacy-link a { color: var(--teal-dark); text-decoration: none; }
.privacy-link a:hover { text-decoration: underline; }

/* ===== Calendar & Time Slots ===== */
.datetime-picker { width: 100%; max-width: 360px; }
.calendar        { margin-bottom: 20px; }

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

.cal-month { font-family: 'Lustria', serif; font-weight: 400; font-size: 1.1rem; color: var(--teal-deep); }

.cal-nav {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  color: var(--teal-deep);
  transition: background var(--transition);
}

.cal-nav:hover    { background: var(--tint); }
.cal-nav:disabled { opacity: 0.25; cursor: default; }

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.calendar-weekdays span {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 0;
}

.calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.cal-day {
  background: none;
  border: none;
  padding: 10px 4px;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-size: 0.9rem;
  color: var(--teal-deep);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition);
}

.cal-day:hover:not(.disabled):not(.selected) { background: var(--tint); }
.cal-day.selected { background: var(--teal); color: var(--white); font-weight: 600; }
.cal-day.today:not(.selected) { font-weight: 700; color: var(--navy); }
.cal-day.disabled { color: var(--border); cursor: default; }
.cal-day.empty    { cursor: default; }

.time-slots         { display: none; }
.time-slots.visible { display: block; }

.time-slots h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal-deep);
  margin-bottom: 12px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.time-slot {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 10px 4px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  color: var(--teal-deep);
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}

.time-slot:hover            { border-color: var(--teal); background: var(--tint); }
.time-slot.selected         { background: var(--teal); color: var(--white); border-color: var(--teal); }

.availability-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  color: var(--muted);
  font-size: 0.9rem;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 3px solid var(--border);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

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

.no-availability {
  text-align: center;
  padding: 20px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ===== Summary ===== */
.summary {
  width: 100%;
  max-width: 320px;
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  text-align: left;
  flex-shrink: 0;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.9rem;
  gap: 12px;
}

.summary-item:not(:last-child) { border-bottom: 1px solid var(--border); }

.summary-label {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.summary-value { font-weight: 600; color: var(--teal-deep); text-align: right; }

/* ===== Confirmation ===== */
.confirmation-step h2 { font-size: 2rem; margin-bottom: 12px; line-height: 1.15; }
.confirm-title        { font-size: 2rem; margin-bottom: 12px; }

.confirm-message {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.5;
  max-width: 340px;
}

.checkmark-circle {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: var(--teal);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  animation: scaleIn 0.5s ease forwards;
}

@keyframes scaleIn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.checkmark-path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: drawCheck 0.4s 0.3s ease forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* ===== Cherry Prompt ===== */
.cherry-prompt {
  width: 100%;
  max-width: 320px;
  margin-top: 8px;
  margin-bottom: 16px;
  padding: 20px;
  border: 1.5px solid #d4f5e9;
  border-radius: var(--radius);
  background: #f0fdf8;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

.cherry-logo-img { height: 22px; width: auto; }

.cherry-title {
  font-family: 'Lustria', serif;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text);
}

.cherry-desc { font-size: 0.85rem; color: var(--muted); }

.btn-cherry,
.btn.btn-cherry {
  width: 100%;
  padding: 14px 24px;
  background: #00C37D;
  color: var(--white);
  border: none;
  border-radius: var(--radius-pill);
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-cherry:hover:not(:disabled),
.btn.btn-cherry:hover:not(:disabled) {
  background: #00a869;
  transform: translateY(-1px);
}

.cherry-apply-icon { width: 20px; height: 20px; flex-shrink: 0; }

.iframe-step-content { padding: 0 !important; }
.cherry-iframe       { width: 100%; height: 100dvh; min-height: 600px; border: none; }
.iframe-fallback     { padding: 24px; text-align: center; font-size: 0.9rem; color: var(--muted); }
.iframe-fallback a   { color: var(--teal-dark); font-weight: 600; }

/* ===== Resource Links ===== */
.resource-links {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resource-link {
  display: block;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-decoration: none;
  color: var(--teal-deep);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--transition);
  text-align: center;
}

.resource-link:hover {
  border-color: var(--teal);
  background: var(--tint);
  transform: translateY(-1px);
}

/* ===== Responsive ===== */
@media (max-width: 520px) {
  body { padding: 0; align-items: flex-start; }
  .form-container  { border-radius: 0; min-height: 100dvh; max-height: 100dvh; box-shadow: none; }
  .step-content    { padding: 40px 20px 24px; }
  .logo            { margin: -40px -20px 28px; padding: 16px 20px; }
  h1               { font-size: 1.4rem; }
  .step-header h2  { font-size: 1.3rem; }
  .confirm-title, .confirmation-step h2 { font-size: 1.8rem; }
}

/* ===== Embedded (iframe) ===== */
/* The rules above assume this page owns the whole browser viewport — true
   when opened directly, but circular inside an iframe: vh/dvh resolve
   against the iframe's own current height, which app.js's ResizeObserver
   also drives from this page's reported height. Left in place, that cuts
   both ways: body's `min-height: 100dvh` floor can only grow the iframe,
   never shrink it back between steps, while `.form-container`'s
   `max-height: 92vh` ceiling *clips* a step taller than the iframe's
   current height instead of letting it grow and drive the resize message
   — so tall steps never get the room they report needing. `.step.active`
   inheriting `height: 100%` from `.step` compounds both: it stretches
   every step to the container's current height rather than its own
   content, which is what actually made shrinking impossible. The 520px
   branch (which fires for any *narrow* iframe — e.g. a sidebar embed on a
   wide desktop page, not just an actual mobile browser) doubled all of
   this with an exact-match 100dvh min+max. These overrides drop every
   viewport-relative constraint so the embedded page's real height is
   just its actual content's intrinsic height, growing and shrinking
   freely, at any width. */
/* Embedded also drops body's own background + padding and the card's box-shadow:
   without this, the light-blue body background and its 20px padding are what the
   iframe actually gets sized to (see app.js's postHeightToParent measuring
   document.body), so the embed would render as a light-blue rectangle with the
   white card floating inside it — not a card that blends into whatever page it's
   dropped into. The shadow specifically needs reserved space around the card to
   render into; with padding gone there's nowhere for it to go without clipping at
   the iframe's edge, so it's dropped rather than left to clip. Any spacing around
   the iframe itself is the host page's call now, not ours. */
html.is-embedded body            { min-height: 0; align-items: flex-start; background: transparent; padding: 0; }
html.is-embedded .form-container { max-height: none; box-shadow: none; }
html.is-embedded .step.active    { height: auto; }
html.is-embedded .step-content   { min-height: 0; }
/* .cherry-iframe can't size itself off its own content (it's a same-origin
   iframe boundary) — 100dvh is circular for the same reason as everything
   else above, so give it a fixed height instead of a viewport-relative one. */
html.is-embedded .cherry-iframe  { height: 600px; }

@media (max-width: 520px) {
  html.is-embedded .form-container { border-radius: var(--radius); min-height: 400px; max-height: none; box-shadow: none; }
}