/* "Notify me when registration opens" (TEA-355). Shares the park page's
   shell (register-public.css) and must fit an iPhone (390x844) with no
   vertical scroll: header, six controls, the consent line and two buttons.
   Every size is a token. */

.reg-notify-header {
  margin-bottom: var(--space-3);
}

.reg-notify-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
}

.reg-notify-group {
  margin-bottom: 0;
}

.reg-notify-group .form-label {
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
}

.reg-notify-group .form-input,
.reg-notify-group .form-select {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
}

/* Phone and birth year side by side: both are short, and the page is one
   screen tall only if they share a row. */
.reg-notify-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
}

.reg-notify-row > * {
  min-width: 0;
}

.reg-notify-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}

.reg-notify-consent input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--color-accent);
}

.reg-notify-btn {
  display: flex;
  width: 100%;
  min-height: 44px;
  font-size: var(--text-md);
  border-radius: var(--radius-lg);
}

.reg-notify-error {
  color: var(--color-error);
  margin: 0;
}

.reg-notify-done {
  text-align: center;
}

.reg-notify-done-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.reg-notify-done p {
  margin: 0;
  color: var(--color-text);
}