/* ==========================================================================
   Reviews page — wraps the Plandaro widget in our theme
   ========================================================================== */

.reviews-hero {
  text-align: center;
  padding-top: calc(var(--header-h) + var(--space-2xl));
  padding-bottom: var(--space-xl);
}

.reviews-hero h1 em { font-style: italic; color: var(--accent); }

.reviews-hero .lede { margin-inline: auto; margin-top: var(--space-md); }

/* Widget container — gives Plandaro's widget breathing room + frames it */
.reviews-widget-wrap {
  padding-block: var(--space-xl) var(--space-3xl);
  min-height: 40vh;
}

#plandaro-reviews {
  /* Plandaro injects its own HTML here — this is just the slot */
  min-height: 20rem;
  width: 100%;
}

/* Loading shimmer for while the script fetches */
.reviews-loading {
  display: grid;
  place-items: center;
  min-height: 20rem;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--ink-muted);
}

#plandaro-reviews:not(:empty) + .reviews-loading { display: none; }

/* Force light inputs — Plandaro widget sometimes renders inputs on a dark
   background that makes the typed text invisible. These overrides apply
   inside the widget's shadow-less DOM regardless of its own theme CSS. */
#plandaro-reviews input,
#plandaro-reviews textarea,
#plandaro-reviews select,
.plandaro-widget input,
.plandaro-widget textarea,
.plandaro-widget select {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(26, 26, 26, 0.2) !important;
  font-family: var(--ff-sans) !important;
}

#plandaro-reviews input::placeholder,
#plandaro-reviews textarea::placeholder,
.plandaro-widget input::placeholder,
.plandaro-widget textarea::placeholder {
  color: rgba(26, 26, 26, 0.45) !important;
}

#plandaro-reviews input:focus,
#plandaro-reviews textarea:focus,
#plandaro-reviews select:focus,
.plandaro-widget input:focus,
.plandaro-widget textarea:focus,
.plandaro-widget select:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(40, 88, 70, 0.15) !important;
}