/* =========================================================
   10-notify-form.css — EMAIL NOTIFY FORM COMPONENT
   Depends on: 01-tokens.css
   ========================================================= */

.notify-form-wrapper { text-align: center; width: 100%; max-width: var(--max-narrow); }
.notify-form-wrapper__headline {
  font-family: var(--font-serif);
  font-size: var(--fs-xs); letter-spacing: .3em;
  color: var(--clr-muted); text-transform: uppercase;
  margin-bottom: var(--sp-4);
}

.notify-form__row {
  display: flex;
  border: 1px solid rgba(200,137,10,.38);
  border-radius: 3px; overflow: hidden;
  background: var(--clr-bg-700);
  transition: border-color var(--dur-med) ease, box-shadow var(--dur-med) ease;
}
.notify-form__row:focus-within {
  border-color: var(--clr-gold-400);
  box-shadow: 0 0 16px rgba(200,137,10,.15);
}
.notify-form__input {
  flex: 1; background: transparent;
  border: none; outline: none;
  padding: .85rem 1.1rem;
  color: var(--clr-text);
  font-family: var(--font-body); font-size: var(--fs-base);
  caret-color: var(--clr-gold-200);
}
.notify-form__input::placeholder { color: var(--clr-dim); font-style: italic; }
.notify-form__input.is-invalid   { outline: 1px solid var(--clr-amber); }

.notify-form__btn {
  background: var(--grad-badge);
  border: none; cursor: pointer;
  padding: 0 1.4rem;
  font-family: var(--font-serif);
  font-size: var(--fs-xs); letter-spacing: .2em;
  color: var(--clr-bg-900); font-weight: 700;
  text-transform: uppercase; white-space: nowrap;
  transition: opacity var(--dur-fast) ease;
}
.notify-form__btn:hover  { opacity: .82; }
.notify-form__btn:active { opacity: .65; }

.notify-form__note {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm); color: var(--clr-dim); font-style: italic;
}
.notify-form__success {
  display: none; margin-top: var(--sp-4);
  font-family: var(--font-serif);
  font-size: var(--fs-sm); letter-spacing: .14em;
  color: var(--clr-gold-200);
}
.notify-form__success.is-visible { display: block; }