/* Shared styles for the simple form pages (opt-out, unsubscribe).
   Header, footer, tokens and base typography come from styles.css. */

.page-wrap { padding-top: 1.5rem; padding-bottom: 4rem; }

.page-title {
  margin: 0 0 2rem;
  padding-bottom: 0.5rem;
  text-align: left;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-900);
  border-bottom: 1px solid var(--aws-border);
}

.section-title {
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--aws-navy);
}

.form-card {
  max-width: 32rem;
  margin: 0 auto;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
}

.field { margin-top: 0.75rem; }
.field label { display: block; margin-bottom: 0.25rem; font-size: 0.875rem; color: var(--gray-700); }

.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.875rem;
  color: #000;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input::placeholder,
.field textarea::placeholder { color: var(--gray-500); }
.field input:focus,
.field textarea:focus { outline: 2px solid var(--aws-orange); outline-offset: 1px; }
.field.invalid input,
.field.invalid textarea { border-color: var(--red-500); }

.feedback { display: none; margin-top: 0.25rem; font-size: 0.75rem; color: var(--red-500); }
.field.invalid .feedback { display: block; }

.check { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 1rem; }
.check input { flex: none; margin-top: 0.3rem; cursor: pointer; accent-color: var(--aws-orange); }
.check label { font-size: 0.875rem; color: var(--gray-700); cursor: pointer; }
.check.invalid input { outline: 2px solid var(--red-500); outline-offset: 1px; }

.btn {
  margin-top: 1rem;
  padding: 0.75rem 1.75rem;
  font: inherit;
  color: #fff;
  background: var(--aws-orange);
  border: 0;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  cursor: pointer;
  transition: background 0.15s;
}
.btn:hover:not(:disabled) { background: var(--aws-orange-hover); }
.btn:focus-visible { outline: 2px solid var(--aws-orange); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.status { margin: 0.75rem 0 0; font-size: 0.875rem; font-weight: 500; }
.status.success { color: var(--green-600); }
.status.error { color: var(--red-500); }

/* Unsubscribe: centred card on a light panel */
.main { display: flex; flex-direction: column; }
.panel { flex: 1; background: var(--aws-light); padding: 4rem 1rem; }
.unsub-card {
  max-width: 26rem;
  margin: 0 auto;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--aws-border);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08);
}
.unsub-card h1 { margin: 0 0 1rem; text-align: left; font-size: 1.5rem; font-weight: 600; }
.unsub-card .field { margin-top: 0; }