/* Batash patient review funnel - app stylesheet (responsive)
   Lifts the design system from the weight-loss-path quiz so the two apps are
   visually identical: same tokens, same appbar, same buttons / fields / cards,
   same desktop card-on-soft-panel treatment, same mobile full-bleed.
   Source of truth for tokens: ../2026-06-08-weight-loss-path-quiz/quiz-app/quiz.css

   navy #1a3a5c headings | orange #E8711A primary CTA | blue #188bf6 secondary
   body #5e5e5e | bg white / #E7ECF1 / #CDE0EC / #FFDFC8 | border #EAEAEA
   Font: Poppins (Arial fallback). Mobile-first. No emojis. */

:root {
  --navy: #1a3a5c;
  --blue: #188bf6;
  --orange: #E8711A;
  --orange-deep: #cf5f0e;
  --ink: #1E1E1E;
  --body: #5e5e5e;
  --white: #FFFFFF;
  --bg-light: #E7ECF1;
  --bg-soft-blue: #CDE0EC;
  --bg-cream: #FFDFC8;
  --border: #EAEAEA;
  --soft-red-brown: #9a4b2e; /* brand-safe validation, not alarm red */
  --star-empty: #c2cedb;     /* grey star outline default (matches quiz .ctrl border) */
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 600px;          /* desktop card width (matches quiz) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'Poppins', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--body);
  background: var(--white);
}

/* Page background: soft brand panel, visible only around the card on larger
   screens. On mobile the card fills the viewport so the panel is hidden. */
body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 20% 0%, rgba(205,224,236,0.55), transparent 60%),
    linear-gradient(160deg, #eef3f8 0%, #dfe9f2 100%);
}

/* App shell. Mobile-first: full width, full min-height, single column.
   Desktop: centered card with shadow, capped width. (Parity with quiz .app) */
.app {
  width: 100%;
  min-height: 100dvh;
  max-width: 100%;
  margin: 0 auto;
  background: var(--white);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

@media (min-width: 680px) {
  body { padding: 40px 16px; }
  .app {
    max-width: var(--maxw);
    min-height: auto;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(26,58,92,0.18), 0 4px 14px rgba(26,58,92,0.08);
    border: 1px solid rgba(26,58,92,0.06);
    margin: 0 auto;
  }
}

/* Logo header. Logo CENTERED, same as the quiz appbar (no back button here). */
.appbar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
  flex: 0 0 auto;
}
.appbar .logo { height: 34px; width: auto; display: block; }

/* Screen body. Flex-grow so footer sits at the bottom on tall viewports. */
.screen {
  padding: 26px 22px 30px;
  flex: 1 1 auto;
  width: 100%;
}
@media (min-width: 680px) {
  .screen { padding: 30px 30px 34px; }
}

/* Typography (matches quiz scale) */
.kicker { color: var(--orange); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
h1.r-headline {
  color: var(--navy);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.subhead { color: var(--body); font-size: 15px; line-height: 1.55; }
.helper { color: var(--body); font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; font-weight: 400; opacity: .92; }
.body-copy { color: var(--body); font-size: 15px; line-height: 1.6; margin-bottom: 4px; }

/* Buttons (identical to quiz) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  border-radius: 99px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .05s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.btn-primary { background: var(--orange); color: var(--white); box-shadow: 0 10px 24px rgba(232,113,26,0.32); }
.btn-primary:hover { background: var(--orange-deep); }
.btn-primary:active { transform: translateY(-1px); }
.btn-primary[disabled], .btn-primary.disabled { background: var(--orange); opacity: .42; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-secondary { background: var(--white); color: var(--blue); border: 1.5px solid var(--blue); }
.btn-secondary:hover { background: #f3f9ff; }
.btn-block { margin-top: 18px; }

.reassure { text-align: center; color: var(--body); font-size: 13px; margin-top: 12px; font-weight: 500; }

/* ==================================================================
   Star rating row. Large accessible tap targets (~44px each), inline-SVG
   stars. Solid brand gold by default so they match the gold stars in the
   review-request email and never read as an unstyled/greyed-out control
   (on mobile there is no hover and a tap advances the screen immediately,
   so the resting colour is the only colour most patients ever see). Hover
   or selection deepens the gold and lifts the star slightly. Hover state
   cascades so the hovered star and every star before it deepen, mirroring
   real rating UIs.
   ================================================================== */
.stars {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 22px 0 8px;
}
.star-btn {
  width: 52px;
  height: 52px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--orange);
  transition: transform .12s ease, color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.star-btn svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.star-btn:hover { transform: translateY(-2px); }
.star-btn:active { transform: scale(0.94); }
.star-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 10px; }
/* selected (set via .on by JS up to the chosen rating) */
.star-btn.on { color: var(--orange-deep); }
/* hover cascade: when the row is hovered, fill the hovered star and the ones
   before it. Pointer hover only, so it does not fight the selected state on
   touch. The .hovered flag is toggled by JS on pointer enter/leave per star. */
.star-btn.hovered { color: var(--orange-deep); }
.stars-label { text-align: center; color: var(--body); font-size: 13px; margin-top: 4px; font-weight: 500; }

/* ==================================================================
   Selectable reason chips (negative screen). Pill shape, border default,
   orange fill + white text when selected. Multi-select.
   ================================================================== */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 18px;
}
.chip {
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--navy);
  background: var(--white);
  cursor: pointer;
  min-height: 44px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover { background: #f3f7fb; }
.chip.selected { background: var(--orange); border-color: var(--orange); color: var(--white); font-weight: 600; }
.chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ==================================================================
   Forms (lifted from quiz). Label above input, error below, gap-2 style.
   ================================================================== */
.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field label { color: var(--navy); font-size: 13px; font-weight: 600; display: flex; align-items: baseline; gap: 6px; }
.field label .optional { color: var(--body); font-weight: 500; font-size: 12px; }
.field input,
.field textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.field input { height: 50px; padding: 0 14px; }
.field textarea { min-height: 110px; line-height: 1.5; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #9aa6b2; }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,58,92,0.12); }
.field.error input,
.field.error textarea { border-color: var(--orange); }
.field.error input:focus,
.field.error textarea:focus { box-shadow: 0 0 0 3px rgba(232,113,26,0.18); }
.field .err-text { color: var(--soft-red-brown); font-size: 12.5px; font-weight: 500; }
.field .err-text[hidden] { display: none; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.field-label-block { color: var(--navy); font-size: 13px; font-weight: 600; margin-bottom: 10px; }

.privacy-note { font-size: 11.5px; line-height: 1.5; color: var(--body); margin-top: 4px; margin-bottom: 4px; }

/* ==================================================================
   Negative ("What can we do to be better?") screen rhythm.
   Scoped to .feedback-form so the positive and picker layouts keep their
   own spacing. Same tokens as the quiz, just a calmer, roomier cadence:
   a clear gap below the intro, air around the chips group, and consistent,
   slightly larger gaps down the form to the submit button.
   ================================================================== */
.feedback-form .body-copy { margin-bottom: 20px; }
.feedback-form .field-label-block { margin-top: 8px; margin-bottom: 10px; }
.feedback-form .chips { margin: 10px 0 22px; }
.feedback-form .field { margin-bottom: 18px; }
.feedback-form .privacy-note { margin-top: 10px; margin-bottom: 4px; }
.feedback-form .btn-block { margin-top: 24px; }

/* honeypot: visually hidden but present in the DOM for bots to fill */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Location prompt block (star picker, when loc is missing) */
.loc-prompt { margin-bottom: 20px; }
.loc-prompt .loc-q { color: var(--navy); font-size: 16px; font-weight: 600; margin-bottom: 12px; text-align: center; }
.loc-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.loc-buttons .btn { margin-top: 0; }

/* incentive line (positive screen only). Reads as plain body copy, centered,
   calm, clearly a thank-you for feedback, never tied to a positive/public
   review. Matches .body-copy type (color/size/line-height); no callout box. */
.incentive {
  color: var(--body);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  text-align: center;
  margin: 16px 0 18px;
}

/* ==================================================================
   Success / confirmation panel (shown after the positive CTA context and
   after the negative feedback submit). Centered, calm, with a soft check mark.
   ================================================================== */
.confirm {
  text-align: center;
  padding: 14px 4px 8px;
}
.confirm .confirm-mark {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--bg-soft-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.confirm .confirm-mark svg { width: 30px; height: 30px; }

/* Positive-screen Dr. Batash portrait disc (replaces the check mark on the
   4-5 path only; the negative confirmation keeps .confirm-mark above). Matches
   the live-site / quiz orange-ringed portrait: a 4px orange ring padded around
   a circular cover-fit photo. object-position pulls his face (upper-middle of
   the source frame) into the visual center of the disc, so it reads as a warm
   headshot rather than a hard square crop. */
.confirm .dr-photo {
  width: 92px; height: 92px;
  border-radius: 50%;
  padding: 4px;
  background: var(--orange);
  display: inline-flex;
  margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(232,113,26,0.22);
}
/* The inner disc clips a slightly zoomed portrait so the framing is head and
   shoulders rather than the full torso, giving a warm headshot read. The image
   is scaled up and nudged up via object-position so his face lands in the
   visual center of the circle (his face sits in the upper-middle of the source). */
.confirm .dr-photo .dr-photo-clip {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-light);
  display: block;
}
.confirm .dr-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 54% 25%;
  transform: scale(1.3);
  transform-origin: 54% 30%;
  display: block;
}
.confirm h1.r-headline { text-align: center; }
.confirm .body-copy { text-align: center; max-width: 42ch; margin: 0 auto 4px; }
/* incentive is centered plain body text via the base .incentive rule; the old
   left-align override was removed in r3 so it sits centered like the body copy. */
.confirm .reassure { margin-top: 14px; }

/* graceful fallback line when the feedback POST fails after retries */
.fallback-note {
  background: var(--bg-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--body);
  margin-top: 14px;
}
.fallback-note a { color: var(--blue); font-weight: 600; text-decoration: none; }
.fallback-note a:hover { text-decoration: underline; }

/* submit button loading state (spinner inside the button) */
.btn .btn-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.footer-privacy { padding: 14px 22px 18px; border-top: 1px solid var(--border); text-align: center; font-size: 11.5px; color: var(--body); flex: 0 0 auto; }
.footer-privacy[hidden] { display: none; }
.footer-privacy svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }

@media (prefers-reduced-motion: reduce) {
  .star-btn, .chip, .btn { transition: none; }
  .btn .btn-spinner { animation-duration: 1.6s; }
}

/* utility */
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.aria-live { position: absolute; left: -9999px; }