/* Registration form — Enlighten Tours
   Uses the brand tokens defined in style.css (:root). */

.reg-section { padding: 48px 0 72px; }

.reg-form {
  max-width: 760px;
  margin: 0 auto;
}

.reg-group {
  border: 1px solid var(--sand);
  border-radius: 14px;
  background: var(--white);
  padding: 24px 26px 28px;
  margin: 0 0 24px;
}

.reg-group legend {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--teal-dark);
  padding: 0 10px;
  margin-left: -6px;
}

.reg-help {
  color: var(--gray);
  font-size: 0.92rem;
  margin: 0 0 16px;
}

.reg-field { margin: 0 0 16px; }
.reg-field:last-child { margin-bottom: 0; }

.reg-label,
.reg-field > label {
  display: block;
  font-weight: 600;
  color: var(--slate);
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.reg-label { margin-bottom: 10px; }
.req { color: var(--flame); font-weight: 700; }

.reg-form input[type="text"],
.reg-form input[type="email"],
.reg-form input[type="tel"],
.reg-form input[type="date"],
.reg-form select,
.reg-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--gray-light);
  border-radius: 9px;
  font: inherit;
  color: var(--slate);
  background: var(--white);
  transition: border-color 0.12s, box-shadow 0.12s;
}

.reg-form input:focus,
.reg-form select:focus,
.reg-form textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(77, 196, 217, 0.18);
}

.reg-form textarea { resize: vertical; }

/* Multi-column rows collapse to one column on narrow screens */
.reg-row { display: grid; gap: 16px; }
.reg-row--2 { grid-template-columns: repeat(2, 1fr); }
.reg-row--3 { grid-template-columns: repeat(3, 1fr); }
.reg-row .reg-field { margin-bottom: 0; }
.reg-row + .reg-field,
.reg-row + .reg-row { margin-top: 16px; }

@media (max-width: 620px) {
  .reg-row--2, .reg-row--3 { grid-template-columns: 1fr; }
}

/* Radios */
.reg-radios { display: flex; flex-direction: column; gap: 8px; }
.reg-radios--inline { flex-direction: row; flex-wrap: wrap; gap: 10px 24px; }
.reg-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  color: var(--slate);
  cursor: pointer;
}
.reg-radio input { accent-color: var(--teal-dark); width: 17px; height: 17px; }

/* Liability checkbox */
.reg-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--cream);
  border: 1px solid var(--sand);
  border-radius: 10px;
  padding: 16px;
  margin: 0 0 18px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--slate);
  cursor: pointer;
}
.reg-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--teal-dark); flex: 0 0 auto; }

.reg-hint { font-size: 0.85rem; color: var(--gray); margin: 6px 0 0; }

/* Conditional reveal */
.is-conditional[hidden] { display: none; }

/* Error summary */
.reg-errors {
  background: #FDECEA;
  border: 1px solid #E2998F;
  color: #8A2A1B;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 0 18px;
  font-size: 0.92rem;
}
.reg-errors ul { margin: 8px 0 0; padding-left: 20px; }
.reg-errors li { margin: 2px 0; }

#reg-submit { margin-top: 4px; cursor: pointer; border: none; }
#reg-submit[disabled] { opacity: 0.65; cursor: default; }

/* Success panel */
.reg-success {
  max-width: 760px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: 14px;
  padding: 32px 30px;
}
.reg-success h2 { color: var(--teal-dark); margin: 0 0 10px; }
.reg-success h3 { color: var(--slate); margin: 22px 0 8px; }
.reg-success ul { padding-left: 20px; color: var(--slate); }
.reg-success li { margin: 6px 0; }