/* ============================================================
   SALON MATURZYSTÓW — FORMULARZ (komponent .sm-form)
   Dopisz na końcu template.css. Wszystkie kolory, fonty i promienie
   pochodzą z tokenów szablonu; wartości po przecinku to fallbacki,
   dzięki którym formularz wygląda poprawnie także poza szablonem.
   ============================================================ */

.sm-form {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, #DEE4EB);
  border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(10, 47, 68, .08));
  font-family: var(--font-body, "Open Sans", "Helvetica Neue", Arial, sans-serif);
  font-size: var(--text-base, 1rem);
  line-height: var(--leading-normal, 1.55);
  color: var(--text-body, #333B43);
}
.sm-form *, .sm-form *::before, .sm-form *::after { box-sizing: border-box; }
.sm-form [hidden] { display: none !important; }

/* ---- Nagłówek ---- */
.sm-form__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display, "Oswald", "Arial Narrow", Arial, sans-serif);
  font-size: var(--text-eyebrow, 13px); font-weight: var(--fw-medium, 500);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow, .14em);
  color: var(--red-500, #ED1E26); margin-bottom: 12px;
}
.sm-form__eyebrow::before {
  content: ""; width: 28px; height: 3px; border-radius: 2px; background: currentColor;
}
.sm-form__title {
  font-family: var(--font-display, "Oswald", "Arial Narrow", Arial, sans-serif);
  font-weight: var(--fw-bold, 700); text-transform: uppercase;
  font-size: var(--text-h2, clamp(1.625rem, 3vw, 2.25rem));
  line-height: var(--leading-snug, 1.2);
  color: var(--blue-800, #0A2F44); margin: 0 0 12px;
}
.sm-form__lead {
  margin: 0 0 32px; font-size: 1.05rem; line-height: 1.7;
  color: var(--text-muted, #6B7682);
}

/* ---- Siatka pól ---- */
.sm-form__grid { display: grid; gap: var(--space-5, 1.5rem); }
.sm-form__row { display: grid; gap: var(--space-5, 1.5rem); }
@media (min-width: 640px) {
  .sm-form__row--split { grid-template-columns: 1fr 1fr; }
}

.sm-form__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 0; margin: 0; padding: 0; }
.sm-form__label {
  font-family: var(--font-display, "Oswald", "Arial Narrow", Arial, sans-serif);
  font-size: 13px; font-weight: var(--fw-semibold, 600);
  text-transform: uppercase; letter-spacing: .06em; line-height: 1.35;
  color: var(--blue-700, #0F4361); padding: 0;
}
.sm-form__req { color: var(--red-500, #ED1E26); margin-left: 3px; }
.sm-form__hint { font-size: 13px; color: var(--text-muted, #6B7682); }

/* ---- Pola tekstowe i listy ---- */
.sm-form__input,
.sm-form__select {
  width: 100%; padding: 13px 15px;
  font-family: inherit; font-size: 1rem; line-height: 1.4;
  color: var(--text-strong, #14181C); background: #fff;
  border: 1px solid var(--border-default, #C4CDD7);
  border-radius: var(--radius-sm, 8px);
  transition: border-color var(--dur-fast, .15s) var(--ease-out, ease),
              box-shadow var(--dur-fast, .15s) var(--ease-out, ease);
}
.sm-form__input::placeholder { color: var(--text-subtle, #9AA5B1); }
.sm-form__input:hover, .sm-form__select:hover { border-color: var(--blue-300, #63ABD0); }
.sm-form__input:focus, .sm-form__select:focus {
  outline: none; border-color: var(--blue-400, #2F88B6);
  box-shadow: var(--ring, 0 0 0 3px rgba(47, 136, 182, .4));
}
.sm-form__input:user-invalid { border-color: var(--red-400, #F0454D); }
.sm-form__select:user-invalid { border-color: var(--red-400, #F0454D); }

.sm-form__select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 46px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%230F4361' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 13px 8px;
}
.sm-form__select.is-empty { color: var(--text-subtle, #9AA5B1); }

/* ---- Przełącznik pigułkowy (radio) ---- */
.sm-form__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.sm-form__pill { position: relative; margin: 0; }
/* Input zostaje w layoucie (1×1 px, przezroczysty), żeby przeglądarka
   miała do czego przypiąć komunikat walidacji i fokus klawiatury. */
.sm-form__pill input {
  position: absolute; left: 24px; bottom: 4px;
  width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
}
.sm-form__pill span {
  display: block; cursor: pointer;
  font-family: var(--font-display, "Oswald", "Arial Narrow", Arial, sans-serif);
  font-size: 13px; font-weight: var(--fw-semibold, 600);
  text-transform: uppercase; letter-spacing: var(--tracking-wide, .04em); line-height: 1;
  padding: 12px 26px; border-radius: var(--radius-pill, 999px);
  border: 2px solid var(--blue-200, #9CCAE3);
  color: var(--blue-700, #0F4361); background: #fff;
  transition: background var(--dur-fast, .15s) var(--ease-out, ease),
              border-color var(--dur-fast, .15s) var(--ease-out, ease),
              color var(--dur-fast, .15s) var(--ease-out, ease);
}
.sm-form__pill span:hover { background: var(--blue-50, #EAF4FA); border-color: var(--blue-400, #2F88B6); }
.sm-form__pill input:checked + span {
  background: var(--blue-500, #1A6C9C); border-color: var(--blue-500, #1A6C9C); color: #fff;
}
.sm-form__pill input:focus-visible + span { box-shadow: var(--ring, 0 0 0 3px rgba(47, 136, 182, .4)); }

/* ---- Zgody ---- */
.sm-form__consents { display: grid; gap: 12px; }
.sm-form__consent {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  padding: 16px 18px; background: var(--ink-50, #F6F8FA);
  border: 1px solid var(--border-subtle, #DEE4EB);
  border-radius: var(--radius-md, 12px);
  transition: border-color var(--dur-fast, .15s) var(--ease-out, ease);
}
.sm-form__consent:hover { border-color: var(--blue-300, #63ABD0); }
.sm-form__consent input {
  width: 20px; height: 20px; margin: 2px 0 0; cursor: pointer;
  accent-color: var(--red-500, #ED1E26);
}
.sm-form__consent input:focus-visible {
  outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(47, 136, 182, .4)); border-radius: 3px;
}
.sm-form__consent-label { font-size: .95rem; line-height: 1.6; cursor: pointer; }
.sm-form__consent-label .sm-form__req { margin-left: 2px; }

/* ---- Akcje ---- */
.sm-form__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px;
  margin-top: var(--space-7, 2.5rem);
}
.sm-form__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display, "Oswald", "Arial Narrow", Arial, sans-serif);
  font-weight: var(--fw-medium, 500); font-size: 14px;
  text-transform: uppercase; letter-spacing: var(--tracking-wide, .04em);
  padding: 14px 34px; border: 2px solid transparent;
  border-radius: var(--radius-pill, 999px);
  background: var(--red-500, #ED1E26); color: #fff; cursor: pointer;
  transition: background var(--dur-fast, .15s) var(--ease-out, ease),
              box-shadow var(--dur-fast, .15s) var(--ease-out, ease),
              transform var(--dur-fast, .15s) var(--ease-out, ease);
}
.sm-form__submit:hover {
  background: var(--red-600, #CE161D);
  box-shadow: var(--shadow-brand, 0 10px 30px rgba(237, 30, 38, .28));
}
.sm-form__submit:active { transform: translateY(1px); }
.sm-form__submit:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(47, 136, 182, .4)); }
.sm-form__submit[disabled] { opacity: .6; cursor: progress; box-shadow: none; }
.sm-form__note { font-size: 13px; color: var(--text-muted, #6B7682); }

/* ---- Komunikaty ---- */
.sm-form__msg {
  margin-top: var(--space-5, 1.5rem); padding: 14px 18px;
  border: 1px solid transparent; border-radius: var(--radius-md, 12px);
  font-size: .95rem; line-height: 1.55;
}
.sm-form__msg--success {
  background: var(--green-50, #E9F7EF);
  border-color: var(--green-500, #1E9E5A);
  color: var(--green-600, #168049);
}
.sm-form__msg--error {
  background: var(--red-50, #FEF1F1);
  border-color: var(--red-400, #F0454D);
  color: var(--red-600, #CE161D);
}

/* ---- Drobne poprawki responsywne ---- */
@media (max-width: 480px) {
  .sm-form__pill span { padding: 12px 20px; }
  .sm-form__submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-form *, .sm-form *::before, .sm-form *::after { transition: none !important; }
}