/* ── Layout system ────────────────────────────────────────── */

.section {
  padding: var(--section-padding-y) var(--section-padding-x);
}

/* ── Accessibility utility ────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Container (Épico 22.1) ───────────────────────────────── */
/* Note: --container-max (1200px) / --container-wide (1440px) are kept as-is
   rather than changed to the 1280px referenced in the original brief -
   both values are already used extensively across Épicos 11–21 and
   changing them would shift alignment on every already-shipped page. */

.container,
.container--wide {
  margin-inline: auto;
  width: 100%;
  padding-inline: 1rem;
}

.container {
  max-width: var(--container-max);
}

.container--wide {
  max-width: var(--container-wide);
}

@media (min-width: 768px) {
  .container,
  .container--wide {
    padding-inline: 2rem;
  }
}

@media (min-width: 1200px) {
  .container,
  .container--wide {
    padding-inline: 4rem;
  }
}

/* ── 12-column grid (Épico 22.2) ──────────────────────────── */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap, clamp(16px, 3vw, 32px));
}

.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* Tablet: collapse to 6 columns - spans above 6 become full-width rows,
   spans 6 and below keep their relative half/third/quarter proportions. */
@media (max-width: 1023px) {
  .grid-12 {
    grid-template-columns: repeat(6, 1fr);
  }

  .col-span-7, .col-span-8, .col-span-9,
  .col-span-10, .col-span-11, .col-span-12 {
    grid-column: span 6;
  }
}

/* Mobile: single column - every span becomes full-width. */
@media (max-width: 599px) {
  .grid-12 {
    grid-template-columns: 1fr;
  }

  .grid-12 > * {
    grid-column: span 1;
  }
}

.surface-light {
  background: #FAFAF8;
}

.surface-dark {
  background: #0D1F3C;
  color: #FFFFFF;
}

.section-header {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 64px);
}

.section-header__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 12px;
}

/* Use on section headers sitting on flat light backgrounds (white/ivory) -
   the default --color-gold only has ~2:1 contrast there (fails WCAG AA);
   see Épico 20.4 audit. Do not apply to hero/photo-overlay eyebrows. */
.section-header--on-light .section-header__eyebrow {
  color: var(--color-gold-on-light);
}

.section-header__title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-heading);
}

.surface-dark .section-header__title {
  color: #FFFFFF;
}

.section-header__lead {
  font-family: var(--font-body);
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 400;
  line-height: 1.8;
  color: var(--color-text-secondary);
  max-width: 560px;
  margin: 16px auto 0;
}

.surface-dark .section-header__lead {
  color: rgba(255, 255, 255, 0.7);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 3vw, 32px);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 32px);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 32px);
}

@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

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

.divider-gold {
  display: block;
  width: 48px;
  height: 2px;
  background: #D4B483;
  margin: 0 auto 24px;
  border: none;
}

/* ── Icon system ──────────────────────────────────────────── */

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* ── Buttons (Épico 21.1) ─────────────────────────────────── */

.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  padding: 14px 40px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary .icon,
.btn-secondary .icon,
.btn-ghost .icon,
.btn-danger .icon {
  width: 14px;
  height: 14px;
}

/* Primary */

.btn-primary {
  background: linear-gradient(90deg, var(--color-accent-gold) 0%, #F3DBA6 50%, var(--color-accent-gold) 100%);
  color: var(--color-navy);
  border: 1px solid #F6E2B0;
  box-shadow: 0 0 20px 3px rgba(212, 180, 131, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

@media (hover: hover) {
  .btn-primary:hover {
    background: linear-gradient(90deg, #A67F22 0%, #EACB88 50%, #A67F22 100%);
    border-color: #F9ECC6;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md), 0 0 26px 4px rgba(212, 180, 131, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  }
}

.btn-primary:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Secondary */

.btn-secondary {
  background: #FFFFFF;
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-text-primary);
}

@media (hover: hover) {
  .btn-secondary:hover {
    background: rgba(13, 31, 60, 0.06);
    transform: translateY(-1px);
  }
}

.btn-secondary:active {
  transform: translateY(0) scale(0.97);
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* On dark backgrounds, use .btn-secondary--on-dark */
.btn-secondary--on-dark {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.6);
}

@media (hover: hover) {
  .btn-secondary--on-dark:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* Ghost - minimal, no border/background, for low-emphasis actions */

.btn-ghost {
  background: transparent;
  color: var(--color-text-primary);
  border: none;
  padding: 14px 24px;
}

@media (hover: hover) {
  .btn-ghost:hover {
    background: rgba(13, 31, 60, 0.06);
  }
}

.btn-ghost:active {
  transform: scale(0.97);
}

.btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-ghost--on-dark {
  color: #FFFFFF;
}

@media (hover: hover) {
  .btn-ghost--on-dark:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* Danger - destructive actions */

.btn-danger {
  background: #C0392B;
  color: #FFFFFF;
  border: none;
}

@media (hover: hover) {
  .btn-danger:hover {
    background: #A8301F;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
}

.btn-danger:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Sizes - apply alongside the base button class, e.g. class="btn-primary btn--sm" */

.btn--sm {
  padding: 10px 24px;
  font-size: 10px;
}

.btn--lg {
  padding: 18px 52px;
  font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .btn-primary:hover, .btn-secondary:hover, .btn-danger:hover,
  .btn-primary:active, .btn-secondary:active, .btn-ghost:active, .btn-danger:active {
    transform: none;
  }
}

/* ── Badges & Pills (Épico 21.2) ──────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.badge--neutral {
  background: rgba(13, 31, 60, 0.08);
  color: var(--color-text-secondary);
}

.badge--success {
  background: #EAF7EF;
  color: #1A6B3C;
}

.badge--warning {
  background: #FCF3E3;
  color: #8A5A00;
}

.badge--error {
  background: #FDF2F2;
  color: #C0392B;
}

.badge--info {
  background: #E8F1FB;
  color: #1B5E9E;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pill--active {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #FFFFFF;
}

@media (hover: hover) {
  .pill:not(.pill--active):hover {
    border-color: var(--color-gold);
    color: var(--color-gold-on-light);
  }
}

/* ── Card (Épico 21.3) ────────────────────────────────────── */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--color-surface-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card-flat {
  border: none;
  box-shadow: none;
}

.card-elevated {
  border: none;
  box-shadow: var(--shadow-sm);
}

@media (hover: hover) {
  .card-elevated:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }
}

.card-outlined {
  border: 1px solid var(--color-border);
  box-shadow: none;
}

@media (hover: hover) {
  .card-outlined:hover {
    border-color: rgba(212, 180, 131, 0.4);
    box-shadow: var(--shadow-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-elevated:hover {
    transform: none;
  }
}

/* ── Gold rule ────────────────────────────────────────────── */

.gold-rule {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-accent-gold);
  margin: 0 auto;
}

/* ── Eyebrow ──────────────────────────────────────────────── */

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent-gold);
}

.eyebrow--on-dark {
  color: var(--color-accent-gold-light);
}

/* ── Scroll reveal (Épico 23.5) ───────────────────────────── */
/* .reveal alone keeps its original translateY(24px) behaviour - every
   existing usage across the site (Épicos 11–22) stays unchanged.
   Add a direction modifier for new/opt-in work: */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--fade-in {
  transform: none;
}

.reveal--slide-up {
  transform: translateY(24px);
}

.reveal--slide-left {
  transform: translateX(32px);
}

.reveal--slide-right {
  transform: translateX(-32px);
}

.reveal--visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Skeleton loader (Épico 26.1) ──────────────────────────── */

@keyframes skeleton-shimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

.skeleton {
  background: linear-gradient(
    100deg,
    var(--color-border) 35%,
    #FFFFFF 50%,
    var(--color-border) 65%
  );
  background-size: 250% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

.skeleton--text {
  height: 1em;
  width: 100%;
}

.skeleton--heading {
  height: 1.4em;
  width: 60%;
}

.skeleton--image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

.skeleton--card {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
}

/* ── Falling petals (decorative, shared/js/petals.js) ─────── */
/* Leve (SVG + CSS, sem JS em loop) - cada pétala é um <img> independente
   com timing/amplitude/duração próprios (custom properties definidas em
   JS a partir da altura real da secção). A animação só toca transform
   (translate/rotate) e opacity - nunca top/left/margin - para correr no
   compositor da GPU sem reflow. A secção anfitriã precisa de
   position:relative + overflow:hidden, e o wrapper de conteúdo dessa
   secção precisa de position:relative + z-index acima de 1. */

/* Aplicar esta classe (além da(s) já existente(s)) a qualquer secção onde
   se chame initPetals() - evita ter de conhecer/editar o wrapper de
   conteúdo específico de cada página: todos os filhos directos passam
   automaticamente para cima da camada de pétalas, excepto ela própria. */
.petals-host {
  position: relative;
  overflow: hidden;
}

.petals-host > *:not(.petals-layer) {
  position: relative;
  z-index: 2;
}

.petals-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.petal {
  position: absolute;
  will-change: transform;
  animation: petal-fall var(--fall-duration, 20s) linear var(--fall-delay, 0s) infinite;
}

/* Uma única animação combina queda (translateY, em px reais - calculados
   a partir da altura da secção em JS, por isso "aterra" sempre no fundo
   real do contentor, em vez da percentagem da própria pétala), vaivém
   lateral (translateX) e rotação ligeira - têm de ir na mesma keyframe
   porque duas animações CSS em simultâneo não se somam na mesma
   propriedade (transform), a última sobrepõe-se à primeira. */
@keyframes petal-fall {
  0%   { transform: translate(0, 0) rotate(0deg);                                                     opacity: 0; }
  4%   {                                                                                               opacity: 0.85; }
  10%  { transform: translate(var(--sway), calc(var(--fall-distance) * 0.1)) rotate(var(--rotate)); }
  20%  { transform: translate(0, calc(var(--fall-distance) * 0.2)) rotate(0deg); }
  30%  { transform: translate(calc(var(--sway) * -1), calc(var(--fall-distance) * 0.3)) rotate(calc(var(--rotate) * -1)); }
  40%  { transform: translate(0, calc(var(--fall-distance) * 0.4)) rotate(0deg); }
  50%  { transform: translate(var(--sway), calc(var(--fall-distance) * 0.5)) rotate(var(--rotate)); }
  60%  { transform: translate(0, calc(var(--fall-distance) * 0.6)) rotate(0deg); }
  70%  { transform: translate(calc(var(--sway) * -1), calc(var(--fall-distance) * 0.7)) rotate(calc(var(--rotate) * -1)); }
  80%  { transform: translate(0, calc(var(--fall-distance) * 0.8)) rotate(0deg); }
  90%  { transform: translate(var(--sway), calc(var(--fall-distance) * 0.9)) rotate(var(--rotate));    opacity: 0.85; }
  96%  {                                                                                               opacity: 0; }
  100% { transform: translate(0, var(--fall-distance)) rotate(0deg);                                  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .petals-layer { display: none; }
}

/* ── Standalone spinner (Épico 26.2) ──────────────────────── */
/* For one-off async actions outside a button - e.g. inline loading
   indicators. Buttons keep their own ::after spinner (see .btn-primary--loading). */

@keyframes spinner-spin {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(212, 180, 131, 0.25);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: spinner-spin 0.7s linear infinite;
}

.spinner--sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.spinner--lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

/* ── Form fields ──────────────────────────────────────────── */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  min-width: 0; /* sem isto, um grid item herda min-width:auto, que usa o
    min-content do filho mais largo (ex: o widget nativo de <input
    type="date"> em iPadOS, que não encolhe) para forçar a coluna da
    grid a crescer além de 1fr - desalinhando essa coluna em todas as
    linhas */
}

.form-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.form-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 12px var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-primary);
  background: var(--color-surface-base);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.form-date-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.form-input:focus {
  outline: none;
  border-color: #D4B483;
  box-shadow: 0 0 0 3px rgba(212, 180, 131, 0.15);
}

.form-input:disabled,
.form-textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--color-surface-section);
}

.form-input[aria-invalid="true"] {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.form-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.2);
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}

/* Wrapper em vez de background-image directamente no <select>: o iOS/iPadOS
   Safari reserva espaço interno para o seu próprio combobox nativo mesmo
   com appearance:none, o que faz o <select> não preencher width:100% da
   mesma forma que um <input> na mesma coluna da grid. Isolar a seta num
   ::after do wrapper (que é um <div>, sem chrome nativo) garante que o
   alinhamento do wrapper é sempre fiável, independentemente do que o
   motor do browser decida fazer ao <select> lá dentro. */
.form-select-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.form-select-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 14px;
  width: 12px;
  height: 8px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5968' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

.form-select {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 12px 36px 12px var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-primary);
  background: var(--color-surface-base);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.form-select:focus {
  outline: none;
  border-color: #D4B483;
  box-shadow: 0 0 0 3px rgba(212, 180, 131, 0.15);
}

.form-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.form-select[aria-invalid="true"] {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.form-select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.2);
}

.form-success {
  background: #EAF7EF;
  border: 1px solid #A8D5B9;
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  font-size: 15px;
  color: #1A6B3C;
  line-height: 1.6;
}

/* ── Form errors ──────────────────────────────────────────── */

@keyframes field-error-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.field-error {
  display: block;
  font-size: 13px;
  color: #C0392B;
  margin-top: var(--space-1);
  animation: field-error-in 0.25s ease forwards;
}

.field-error:empty {
  display: none;
}

.form-error {
  background: #FDF2F2;
  border: 1px solid #F5C6C6;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  color: #C0392B;
}

.form-error:empty { display: none; }

/* ── Animated state icons (Épico 26.3) ────────────────────── */

@keyframes state-icon-pop {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes state-icon-draw {
  to { stroke-dashoffset: 0; }
}

.state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 auto var(--space-3);
  animation: state-icon-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.state-icon svg {
  width: 20px;
  height: 20px;
}

.state-icon svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: state-icon-draw 0.35s 0.15s ease forwards;
}

.state-icon--success {
  background: #CFEBD9;
  color: #1A6B3C;
}

.state-icon--error {
  background: #F5CFCB;
  color: #C0392B;
}

/* Centred stack - icon above text (used by celebratory success boxes) */
.form-success--icon {
  text-align: center;
}

/* Row layout - icon beside text (used by compact inline error banners) */
.form-error--icon:not([hidden]) {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
}

.form-error--icon .state-icon {
  margin: 0;
}

.form-error__text {
  flex: 1;
}

/* Smooth hand-off from form to success message instead of an abrupt swap */
.form-fade-out {
  opacity: 0;
  transition: opacity 300ms ease;
}

/* ── Submit button states ─────────────────────────────────── */

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.btn-primary--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-primary--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

.btn-primary--success {
  background: #27AE60 !important;
  pointer-events: none;
}

/* ── Toast ────────────────────────────────────────────────── */

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.toast-container {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  background: var(--color-text-primary);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-5);
  font-size: 14px;
  font-weight: 400;
  min-width: 240px;
  max-width: 360px;
  pointer-events: auto;
  animation: toast-in 0.2s ease forwards;
}

.toast--success {
  background: #1A6B3C;
}

.toast--error {
  background: #8B1A1A;
}

.toast--dismiss {
  animation: toast-out 0.3s ease forwards;
}

/* ── Focus-visible (keyboard navigation) ─────────────────── */

:focus-visible {
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.form-input:focus-visible,
.form-select:focus-visible {
  outline: none;
}