/* =====================================================================
 * Review sheet — opens when the bottom-nav "Review" button is tapped.
 *
 * Layout strategy
 *   • Mobile / tablet (< 720 px): full-screen bottom sheet that slides
 *     up from the bottom edge. Header is sticky so the rating + form
 *     scroll under it, and the submit row is sticky at the bottom so
 *     it's always reachable while typing.
 *   • Desktop (>= 720 px): centred dialog (520 px max) over a dim
 *     backdrop. Same internals — just framed differently.
 *
 * Theming
 *   • Uses the existing `--nv-*` tokens from navigation.css so dark
 *     mode flips automatically with `.theme-dark`. No hand-rolled dark
 *     overrides in here.
 * ===================================================================== */

.review-overlay {
  position: fixed;
  inset: 0;
  z-index: 4100;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
}
.review-overlay[data-state="open"] {
  pointer-events: auto;
  opacity: 1;
}
.review-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 22, 0.55);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

.review-sheet {
  position: relative;
  width: 100%;
  max-width: 720px;
  /* Mobile-first: fill the visible viewport completely. dvh is the
     dynamic viewport unit — iOS Safari/Chrome shrink it when their
     URL bar is on-screen, so the sheet stops at the visible edge
     instead of sliding under the browser chrome. vh fallback first
     so older browsers still get something sensible. */
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  background: var(--nv-bg);
  color: var(--nv-fg);
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.35);
  transform: translateY(100%);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.review-overlay[data-state="open"] .review-sheet {
  transform: translateY(0);
}

/* Drag-handle pill — full-screen mobile sheet doesn't need it; kept
   in the markup for backwards-compat but always hidden. */
.review-sheet__handle {
  display: none;
}

/* Header bar — sticky so the rating stars and form fields scroll
   underneath the title + close button. safe-area-inset-top keeps the
   title clear of the iOS dynamic island / notch on full-screen mobile. */
.review-sheet__header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 12px;
  border-bottom: 1px solid var(--nv-border);
  background: var(--nv-bg);
  flex-shrink: 0;
}
.review-sheet__title-wrap {
  flex: 1;
  min-width: 0;
}
.review-sheet__eyebrow {
  font: 600 11px/1 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nv-accent);
  margin: 0 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.review-sheet__eyebrow .material-symbols-outlined { font-size: 16px; }
.review-sheet__title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
  color: var(--nv-fg);
  font-weight: 600;
}

.review-sheet__close {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nv-border);
  border-radius: 50%;
  background: transparent;
  color: var(--nv-muted-fg, var(--nv-fg));
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
  flex-shrink: 0;
}
.review-sheet__close:hover {
  background: var(--nv-accent-muted, rgba(184, 134, 11, 0.12));
  color: var(--nv-accent);
}
.review-sheet__close:focus-visible {
  outline: 3px solid var(--nv-accent-glow);
  outline-offset: 2px;
}

/* Scrollable body — everything between header and submit bar. */
.review-sheet__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ─ Rating block ─────────────────────────────────────────────────── */
.review-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 16px;
  border-radius: 18px;
  background: var(--nv-muted, rgba(184, 134, 11, 0.06));
  border: 1px solid var(--nv-border);
}
.review-rating__prompt {
  font: 500 14px/1.4 'Source Sans 3', system-ui, sans-serif;
  color: var(--nv-muted-fg);
  margin: 0;
  text-align: center;
}
.review-rating__stars {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
}
.review-rating__star {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--nv-border-strong, #cdb780);
  cursor: pointer;
  transition: color 140ms ease, transform 140ms ease;
  padding: 0;
}
.review-rating__star .material-symbols-outlined {
  font-size: 38px;
  font-variation-settings: 'FILL' 0, 'wght' 400;
  transition: font-variation-settings 120ms ease;
}
.review-rating__star:hover { transform: scale(1.08); }
.review-rating__star:focus-visible {
  outline: 3px solid var(--nv-accent-glow);
  outline-offset: 2px;
  border-radius: 10px;
}
.review-rating__star.is-active {
  color: var(--nv-accent);
}
.review-rating__star.is-active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 500;
}
.review-rating__label {
  font: 600 14px/1.2 'Source Sans 3', system-ui, sans-serif;
  color: var(--nv-fg);
  min-height: 18px;
  text-align: center;
}
.review-rating__label[data-empty="true"] {
  color: var(--nv-muted-fg);
  font-weight: 500;
}

/* ─ Form fields ───────────────────────────────────────────────────── */
.review-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.review-field__label {
  font: 600 13px/1.2 'Source Sans 3', system-ui, sans-serif;
  color: var(--nv-fg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.review-field__hint {
  font: 400 12px/1.4 'Source Sans 3', system-ui, sans-serif;
  color: var(--nv-muted-fg);
  margin-top: -2px;
}
.review-field__input,
.review-field__textarea {
  width: 100%;
  font: 400 15px/1.45 'Source Sans 3', system-ui, sans-serif;
  color: var(--nv-fg);
  background: var(--nv-bg);
  border: 1px solid var(--nv-border);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.review-field__input::placeholder,
.review-field__textarea::placeholder {
  color: var(--nv-muted-fg);
  opacity: 0.75;
}
.review-field__input:focus,
.review-field__textarea:focus {
  outline: none;
  border-color: var(--nv-accent);
  box-shadow: 0 0 0 3px var(--nv-accent-glow);
}
.review-field__textarea {
  min-height: 110px;
  resize: vertical;
  font-family: inherit;
}
.review-field__counter {
  text-align: right;
  font: 400 11px/1 'Source Sans 3', system-ui, sans-serif;
  color: var(--nv-muted-fg);
}
.review-field--row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 520px) {
  .review-field--row { grid-template-columns: 1fr 1fr; }
}

/* ─ Submit bar (sticky bottom) ───────────────────────────────────── */
.review-sheet__footer {
  border-top: 1px solid var(--nv-border);
  background: var(--nv-bg);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
.review-sheet__legal {
  flex: 1;
  font: 400 11.5px/1.35 'Source Sans 3', system-ui, sans-serif;
  color: var(--nv-muted-fg);
  margin: 0;
}
.review-sheet__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 14px;
  font: 600 14px/1 'Source Sans 3', system-ui, sans-serif;
  background: var(--nv-accent);
  color: var(--nv-accent-on);
  border: 1px solid var(--nv-accent);
  box-shadow: 0 4px 14px var(--nv-accent-glow);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  white-space: nowrap;
}
.review-sheet__submit .material-symbols-outlined { font-size: 18px; }
.review-sheet__submit:hover:not([disabled]) {
  background: var(--nv-accent-soft);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--nv-accent-glow);
}
.review-sheet__submit[disabled],
.review-sheet__submit[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}
.review-sheet__submit:focus-visible {
  outline: 3px solid var(--nv-accent-glow);
  outline-offset: 2px;
}
.review-sheet__submit.is-loading .review-sheet__submit-label { opacity: 0.65; }
.review-sheet__submit.is-loading .material-symbols-outlined {
  animation: review-spin 700ms linear infinite;
}
@keyframes review-spin { to { transform: rotate(360deg); } }

/* ─ Error / success states ───────────────────────────────────────── */
.review-sheet__error {
  display: none;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(180, 30, 30, 0.10);
  color: #b41e1e;
  border: 1px solid rgba(180, 30, 30, 0.30);
  font: 500 13px/1.35 'Source Sans 3', system-ui, sans-serif;
}
.theme-dark .review-sheet__error {
  background: rgba(255, 110, 110, 0.10);
  color: #ffadad;
  border-color: rgba(255, 110, 110, 0.30);
}
.review-sheet[data-error="true"] .review-sheet__error {
  display: block;
}

.review-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 28px 22px 18px;
}
.review-sheet[data-state="success"] .review-success { display: flex; }
.review-sheet[data-state="success"] .review-sheet__body > *:not(.review-success) { display: none; }
.review-sheet[data-state="success"] .review-sheet__footer { display: none; }

.review-success__glyph {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nv-accent-muted);
  border: 1px solid var(--nv-accent-glow);
  color: var(--nv-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 6px 18px var(--nv-accent-glow);
}
.review-success__glyph .material-symbols-outlined { font-size: 40px; }
.review-success__title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
  font-weight: 600;
  color: var(--nv-fg);
}
.review-success__body {
  font: 400 14.5px/1.55 'Source Sans 3', system-ui, sans-serif;
  color: var(--nv-muted-fg);
  margin: 0;
  max-width: 36ch;
}
.review-success__done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 14px;
  font: 600 14px/1 'Source Sans 3', system-ui, sans-serif;
  background: var(--nv-accent);
  color: var(--nv-accent-on);
  border: 1px solid var(--nv-accent);
  box-shadow: 0 4px 14px var(--nv-accent-glow);
  cursor: pointer;
  margin-top: 4px;
}

/* ─ Desktop: centred dialog instead of the full-screen mobile sheet. */
@media (min-width: 720px) {
  .review-overlay {
    align-items: center;
    padding: 24px;
  }
  .review-sheet {
    height: auto;
    max-height: 86vh;
    max-height: 86dvh;
    border: 1px solid var(--nv-border);
    border-radius: 24px;
    transform: translateY(28px) scale(0.96);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  }
  .review-overlay[data-state="open"] .review-sheet {
    transform: translateY(0) scale(1);
  }
  .review-sheet__header { padding: 18px 24px 14px; }
  .review-sheet__body   { padding: 22px 24px 26px; }
  .review-sheet__footer { padding: 16px 24px; }
}

/* Lock body scroll when overlay is open. */
body.review-open {
  overflow: hidden;
}