.assessment-page {
  --assessment-ink: #284433;
  --assessment-muted: #495d50;
}

.assessment-hero .service-hero-image img { object-position: 50% 62%; }
.assessment-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.assessment-section { margin-block: 25px; scroll-margin-top: 16px; }
.assessment-section:last-child { margin-bottom: 35px; }
.assessment-note { margin-block: 5px 15px; color: var(--assessment-muted); }
.assessment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.assessment-card {
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 7px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--white);
}
.assessment-card h3 { color: var(--assessment-ink); font-size: 18px; }
.assessment-card p { color: var(--assessment-muted); }
.assessment-category { font-size: 12px; font-weight: 700; }
.assessment-card .assessment-availability {
  margin-top: auto;
  padding: 3px 10px;
  border-radius: 15px;
  background: #edf1e8;
  color: var(--assessment-ink);
  font-size: 12px;
  font-weight: 650;
}
.assessment-card .button { margin-top: 3px; }
.assessment-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: assessment-step;
}
.assessment-steps li { border-inline-start: 2px solid #cadac5; padding-inline-start: 12px; }
.assessment-steps li::before {
  counter-increment: assessment-step;
  content: counter(assessment-step, persian);
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: #e5eddf;
  color: var(--assessment-ink);
  font-weight: 800;
}
.assessment-steps p { color: var(--assessment-muted); font-size: 13px; }
.assessment-payment, .assessment-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.assessment-payment {
  padding: 16px;
  margin-block: 14px;
  background: #f0f4eb;
  border-radius: 12px;
}
.assessment-payment dt { color: var(--assessment-muted); font-size: 13px; }
.assessment-payment dd { margin: 0; color: var(--assessment-ink); font-weight: 800; }
.assessment-form { margin-top: 14px; }
.assessment-form label { display: block; margin-bottom: 11px; font-weight: 650; }
.assessment-form input:not([type="checkbox"]):not([type="radio"]) {
  display: block;
  width: 100%;
  margin-top: 4px;
  min-height: 43px;
  padding: 7px 10px;
  border: 1px solid #a8b9a7;
  border-radius: 8px;
  background: white;
  color: #234032;
}
.assessment-form .assessment-consent { display: flex; align-items: start; gap: 8px; }
.assessment-consent input { margin-top: 6px; accent-color: var(--forest); }
.assessment-feedback { margin-top: 9px; color: var(--assessment-ink); }
.assessment-feedback:empty { margin: 0; }
.assessment-result {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  background: #eaf2e6;
}
.assessment-result output { display: block; overflow-wrap: anywhere; font-family: monospace; }
.assessment-result .text-button { margin-top: 6px; text-decoration: underline; }
#previous-assessment-link, .assessment-submit { margin-top: 10px; }

@media (max-width: 760px) {
  .assessment-grid, .assessment-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  .assessment-grid, .assessment-steps, .assessment-fields { grid-template-columns: 1fr; }
  .assessment-payment { grid-template-columns: 1fr; }
  .assessment-card { padding: 17px; }
}

.assessment-form select, .reception-filters select {
  display: block;
  min-height: 43px;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid #a8b9a7;
  border-radius: 8px;
  background: white;
  color: #234032;
  font: inherit;
}
.assessment-form select { width: 100%; margin-top: 4px; }
.reception-filters { align-items: end; }
.reception-appointment { align-items: stretch; }
.reception-appointment .assessment-payment a { color: var(--forest); text-decoration: underline; }
.reception-age {
  align-self: start;
  padding: 4px 10px;
  border-radius: 8px;
  background: #fff1d8;
  color: #604513 !important;
  font-size: 13px;
}

.assessment-question {
  min-inline-size: 0;
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.assessment-question legend { color: var(--assessment-ink); font-weight: 700; padding-inline: 5px; }
.assessment-question label { display: flex; align-items: baseline; gap: 8px; font-weight: 400; }
.assessment-question input { accent-color: var(--forest); }
.assessment-completion + .assessment-completion { margin-top: 10px; }