/* ==========================================================================
   SECTION 08 — REQUEST YOUR EVALUATION (approved concept)
   Desktop (>= 1024px): copy + four reassurance points on the left, form card
                        in the middle-right over the real reception photo.
   Phones/tablets:      copy, reassurance points (2 × 2), then the form card.
   ========================================================================== */

.evaluation {
  position: relative;
  padding-block: 4rem 4.5rem;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 15% 10%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)),
    var(--color-ivory);
  border-bottom: 1px solid rgba(167, 131, 92, 0.45);
}

/* Reception photo (desktop only) — fades in from the left */
.evaluation__media {
  display: none;
  position: absolute;
  inset: 0 0 0 auto;
  width: 45%;                          /* 1024–1279px: stays behind the form, clear of the copy */
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%);
  mask-image: linear-gradient(to right, transparent 0%, #000 38%);
}

.evaluation__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* Slight zoom anchored bottom-right: shows the stone counter, lamp and glass,
     and keeps the "Sanmiguel Hospital" sign fully behind the form card
     (a half-hidden sign looked accidental). */
  transform: scale(1.3);
  transform-origin: 100% 100%;
}

.evaluation__inner {
  position: relative;
  display: grid;
  gap: 2.5rem;
}

/* ---------- Copy ---------- */
.evaluation__title {
  margin-top: 1rem;
  font-size: clamp(2.375rem, 1.3rem + 3.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: wrap;
  color: var(--color-charcoal);
}

.evaluation__title-line { display: block; }

.evaluation__title-line--accent { color: var(--color-bronze-ink); }

.evaluation__intro {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.1875rem);
  line-height: 1.65;
  color: var(--color-text-body);
}

/* Four reassurance points */
.benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1rem;
  margin-top: 2.25rem;
}

.benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.benefit__icon {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background-color: var(--color-card);
}

.benefit__icon svg {
  width: 1.625rem;
  height: 1.625rem;
  fill: none;
  stroke: var(--color-bronze-ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit__title {
  margin-top: 0.85rem;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--color-charcoal);
}

.benefit__text {
  max-width: 12rem;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-body);
}

/* ---------- Form card ---------- */
.eval-card {
  padding: 1.75rem 1.25rem 1.5rem;
  border: 1px solid rgba(167, 131, 92, 0.18);
  border-radius: 1rem;
  background-color: rgba(252, 250, 246, 0.97);
  box-shadow: 0 30px 60px -36px rgba(32, 32, 31, 0.4);
}

.eval-card__title {
  font-size: 1.875rem;
  line-height: 1.15;
  color: var(--color-charcoal);
}

/* The heading receives focus (via script) when a "Request an Evaluation" link
   is used on phones/tablets. It is not a control, so no focus ring is drawn;
   the next Tab goes to the first form field. */
.eval-card__title:focus { outline: none; }

/* Development notice — removed automatically once a provider is connected */
.eval-card__pending {
  margin-top: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px dashed rgba(118, 89, 60, 0.6);
  border-radius: 0.5rem;
  background-color: rgba(239, 232, 222, 0.6);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-body);
}

.eval-card__pending strong { font-weight: 600; color: var(--color-charcoal); }

.eval-form { margin-top: 1.25rem; }

.eval-form__required-note {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Spam trap: visually hidden but not display:none (some bots skip those) */
.eval-form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field { margin-top: 1.1rem; }

.field__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-charcoal);
}

/* "(optional)" next to the phone label — quieter than the label itself */
.field__optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Small helper line under a field (e.g. country-code note for the phone) */
.field__hint {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.field__input {
  display: block;
  width: 100%;
  min-height: 3rem;                    /* 48px touch target */
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(32, 32, 31, 0.22);
  border-radius: 0.375rem;
  background-color: var(--color-white);
  font: inherit;
  font-size: 1rem;                     /* 16px avoids iOS zoom on focus */
  color: var(--color-charcoal);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field__input::placeholder { color: #7A756E; }   /* 4.6:1 on white */

.field__input:hover { border-color: rgba(32, 32, 31, 0.4); }

.field__input:focus-visible {
  outline: none;
  border-color: var(--color-bronze-button);
  box-shadow: 0 0 0 3px rgba(142, 111, 78, 0.28);
}

/* Custom select arrow */
.field__select-wrap { position: relative; }

.field__select {
  padding-right: 2.5rem;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.field__select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--color-charcoal);
  border-bottom: 1.5px solid var(--color-charcoal);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Error state: red-brown border + icon-free text message (not color alone) */
.field__input[aria-invalid="true"] {
  border-color: #A3352B;
  box-shadow: 0 0 0 1px #A3352B;
}

.field__error {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: #A3352B;                      /* 6.2:1 on the card background */
}

.eval-form__submit {
  width: 100%;
  margin-top: 1.5rem;
  min-height: 3.25rem;
}

.eval-form__submit[disabled],
.eval-form__submit[aria-disabled="true"] { opacity: 0.7; cursor: progress; }

.eval-form__privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.eval-form__privacy svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
  fill: none;
  stroke: var(--color-bronze-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.eval-form__status:empty { display: none; }

.eval-form__status {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  background-color: rgba(239, 232, 222, 0.7);
  color: var(--color-charcoal);
}

.eval-form__status.is-error   { background-color: #F8E9E6; color: #7E2A22; }
.eval-form__status.is-pending { background-color: rgba(239, 232, 222, 0.9); border: 1px dashed rgba(118, 89, 60, 0.6); }
.eval-form__status.is-success { background-color: #E8F1E6; color: #2F5130; }

/* ---------- TASK 08: consent, security check and sending states ---------- */

/* Required consent (contact about this request only) */
.field--consent { margin-top: 1.35rem; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.consent__input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--color-bronze-button);
  cursor: pointer;
}

.consent__input[aria-invalid="true"] {
  outline: 2px solid #A3352B;
  outline-offset: 2px;
}

.consent__label {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-body);
  cursor: pointer;
}

/* "Privacy Policy" is a real link only once the page is published (form-config.js) */
.consent__link[href] {
  color: var(--color-bronze-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.consent__link[href]:hover { color: var(--color-charcoal); }

.field--consent .field__error { margin-left: 2rem; }

/* Cloudflare Turnstile: takes no space unless the visitor has to verify */
.eval-form__verify {
  display: flex;
  justify-content: center;
}

.eval-form__verify.is-interactive { margin-top: 1.25rem; }

/* Sending: the arrow becomes a small progress ring */
.eval-form__submit[aria-busy="true"] .btn__arrow { display: none; }

.eval-form__submit[aria-busy="true"]::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: eval-spin 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .eval-form__submit[aria-busy="true"]::after { animation: none; border-right-color: currentColor; opacity: 0.6; }
}

/* Result details: receipt reference and direct-contact alternatives */
.eval-form__status-text,
.eval-form__status-ref,
.eval-form__status-contact { display: block; }

.eval-form__status-ref {
  margin-top: 0.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.eval-form__status-contact {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
}

.eval-form__status a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* Outcome unknown (not an error, not a success): details kept, "Try Again" */
.eval-form__status.is-warning {
  background-color: #FBF3E4;
  border: 1px solid rgba(167, 131, 92, 0.45);
  color: #5C4425;
}

/* ==========================================================================
   TABLETS (600–1023px)
   ========================================================================== */
@media (min-width: 37.5em) {
  .evaluation { padding-block: 5rem 5.5rem; }

  .benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .eval-card {
    width: 100%;
    max-width: 34rem;
    padding: 2.25rem 2rem 2rem;
  }

  .eval-card__title { font-size: 2.125rem; }
}

/* ==========================================================================
   DESKTOP (>= 1024px)
   ========================================================================== */
@media (min-width: 64em) {
  .evaluation { padding-block: 5.5rem; }

  .evaluation__media { display: block; }

  .evaluation__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
    align-items: center;
    column-gap: clamp(2.5rem, 4vw, 4rem);
  }

  .benefits {
    gap: 0;
    margin-top: 2.75rem;
  }

  .benefit { padding-inline: 0.75rem; }

  /* Thin vertical separators between the four points */
  .benefit + .benefit { border-left: 1px solid rgba(167, 131, 92, 0.28); }

  .benefit__icon { width: 4.25rem; height: 4.25rem; }

  .benefit__icon svg { width: 1.875rem; height: 1.875rem; }

  .benefit__title { font-size: 1.1875rem; }

  .benefit__text { font-size: 0.8125rem; }

  /* Same card color, fully opaque over the reception photo: the 3% transparency let the
     "Sanmiguel Hospital" sign show through the card (more visible since the consent row made it taller). */
  .eval-card {
    max-width: none;
    background-color: rgb(252, 250, 246);
  }
}

/* Wide screens: leave room on the right so the reception photo shows, as in the mockup */
@media (min-width: 80em) {
  .evaluation__media { width: 58%; }

  .evaluation__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 29rem) clamp(4rem, 9vw, 12rem);
  }
}

/* Very wide screens (> 1440px): the content stops growing at 1280px, but a 58%-wide photo kept
   zooming in, so the "Sanmiguel Hospital" sign grew wider than the card and showed beside it.
   Here the photo keeps ONE fixed framing, anchored to the bottom-right corner: the reception counter,
   lamp and glass stay in view all the way to the right edge, and the sign sits above the top edge
   of the section (cropped), so it can never show beside the card. Same file, no new image. */
@media (min-width: 90.0625em) {
  .evaluation__media img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: max(96.375rem, 100%);     /* 1542px (×1.42): sign ≈ 1050px above the section bottom, lamp in view */
    max-width: none;
    height: auto;
    transform: none;
  }
}