/*
 * forms-base.css -- canonical form theming
 *
 * Contract:
 *   - Two themes: .form-theme-light (default), .form-theme-dark
 *   - Two buttons: .form-submit, .form-submit--gold
 *   - One switch:  .switch-*
 *
 * Footer newsletter signup is the only documented design exception.
 * Do not add per-selector color overrides. Extend variables instead.
 *
 * See docs/forms-stripe-contract.md for the full standing rule.
 */

/* ============================================================
   FORMS — Shared Base Styles
   Underline-only inputs, error states, submit buttons, switches,
   spinners, and turnstile wrapper. Theme-neutral using CSS vars
   with sensible defaults.

   Dark forms:  set --form-text, --form-border, --form-focus etc.
   Light forms: defaults work as-is (charcoal on alabaster)
   ============================================================ */

/* --- Form Layout --- */
.sarovyn-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* --- Form Group (label + input + error) --- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: relative;
}

/* --- Underline Inputs (the Sarovyn pattern) --- */
.form-group input,
.form-group textarea,
.form-group select,
.sarovyn-input {
  width: 100%;
  padding: 0.5rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--form-border, rgba(0, 0, 0, 0.15));
  color: var(--form-text, var(--color-text-primary, #2b2b2b));
  font-family: var(--font-body, 'Source Sans 3', -apple-system, sans-serif);
  font-size: var(--text-base, 1rem);
  font-weight: var(--weight-light, 300);
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

.form-group input::placeholder,
.form-group textarea::placeholder,
.sarovyn-input::placeholder {
  color: var(--form-placeholder, rgba(0, 0, 0, 0.4));
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.sarovyn-input:focus {
  outline: none;
  border-bottom-color: var(--form-focus, var(--color-gold, #c4a052));
  border-bottom-width: 2px;
}

.form-group input:focus::placeholder,
.form-group textarea:focus::placeholder,
.sarovyn-input:focus::placeholder {
  color: var(--form-placeholder-focus, rgba(0, 0, 0, 0.25));
}

.form-group input:disabled,
.form-group textarea:disabled,
.form-group select:disabled,
.sarovyn-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
  max-height: 200px;
}

/* Select arrow */
.form-group select,
select.sarovyn-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 1.5rem;
}

/* --- Field Helpers (hint text + character count) --- */
.field-helper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 0.5rem;
}

.helper-text {
  font-size: 0.8rem;
  color: var(--form-hint, rgba(0, 0, 0, 0.4));
  line-height: 1.4;
  flex: 1;
}

.char-count {
  font-size: 0.75rem;
  color: var(--form-hint, rgba(0, 0, 0, 0.35));
  white-space: nowrap;
}

/* --- Form Row (side-by-side fields) --- */
.form-row {
  display: flex;
  gap: 1rem;
}
.form-row__col { flex: 1; }
.form-row__col--sm { flex: 0 0 40%; }

/* --- Error Messages --- */
.form-error {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--form-error-bg, rgba(128, 0, 32, 0.08));
  border: 1px solid var(--form-error-border, rgba(128, 0, 32, 0.4));
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  color: var(--form-error-text, var(--color-burgundy, #800020));
  font-size: var(--text-sm, 0.9rem);
  line-height: 1.4;
}

.form-error svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Border-left variant (used in registration overlay) */
.form-error--left-accent {
  border: none;
  border-left: 3px solid var(--form-error-border, var(--color-burgundy, #800020));
}

/* Field-level error */
.field-error {
  font-size: var(--text-xs, 0.75rem);
  color: var(--form-error-text, var(--color-burgundy, #800020));
  margin-top: 0.25rem;
}

/* Error state on input */
.sarovyn-input--error,
.form-group input.input--error {
  border-bottom-color: var(--form-error-text, var(--color-burgundy, #800020));
}

/* --- Info Message --- */
.form-info {
  background: rgba(44, 95, 138, 0.06);
  border-left: 3px solid var(--color-info, #2c5f8a);
  color: var(--color-info, #2c5f8a);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: var(--text-sm, 0.875rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- Submit Button --- */
.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--form-submit-bg, #3a3a3a);
  border: 1px solid var(--form-submit-border, rgba(196, 160, 82, 0.3));
  color: var(--form-submit-text, var(--color-text-on-dark, #f5f5f0));
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.875rem 2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-body, 'Source Sans 3', -apple-system, sans-serif);
  border-radius: 0;
}

.form-submit:hover:not(:disabled) {
  background: var(--form-submit-hover-bg, #444);
  border-color: var(--form-submit-hover-border, var(--color-gold, #c4a052));
}

.form-submit:focus {
  outline: 2px solid var(--color-gold, #c4a052);
  outline-offset: 2px;
}

.form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Full-width variant */
.form-submit--full {
  width: 100%;
}

/* Gold variant — revenue-bearing checkout CTAs */
.form-submit--gold {
  background: var(--color-btn-charcoal-bg, #2b2b2b);
  border-color: var(--color-btn-charcoal-bg, #2b2b2b);
  color: var(--color-btn-charcoal-text, #f8f6f1);
}
.form-submit--gold:hover:not(:disabled) {
  background: var(--color-btn-charcoal-hover-bg, #3a3a3a);
  border-color: var(--color-btn-charcoal-hover-bg, #3a3a3a);
  color: var(--color-btn-charcoal-text, #f8f6f1);
}

/* --- Spinner (inline loading indicator) --- */
.form-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--form-spinner-track, var(--color-alabaster-30));
  border-top-color: var(--form-spinner-color, #f5f5f0);
  border-radius: 50%;
  animation: formSpin 0.8s linear infinite;
  display: inline-block;
}

@keyframes formSpin {
  to { transform: rotate(360deg); }
}

/* --- Switch Toggle --- */
.switch-group {
  margin-bottom: 0.75rem;
}

.switch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--form-text, var(--color-alabaster-70));
  font-size: var(--text-sm, 0.875rem);
}

.switch-label input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-track {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--form-switch-off, var(--color-alabaster-15));
  border-radius: 11px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--form-switch-knob, #fff);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.switch-label input:checked + .switch-track {
  background: var(--color-gold, #c4a052);
}

.switch-label input:checked + .switch-track::after {
  transform: translateX(18px);
}

/* --- Turnstile / CAPTCHA Wrapper --- */
.turnstile-wrapper {
  height: 0;
  overflow: hidden;
  margin: 0;
}

/* --- Light Form Autofill Override (default) ---
   Kill browser's blue autofill background on light forms.
   ---------------------------------------------------- */
.sarovyn-form input:-webkit-autofill,
.sarovyn-form input:-webkit-autofill:hover,
.sarovyn-form input:-webkit-autofill:focus,
.sarovyn-form textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--color-alabaster, #f8f6f1) inset;
  -webkit-text-fill-color: var(--color-charcoal, #2b2b2b);
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--color-charcoal, #2b2b2b);
}

/* --- Dark Form Theme Override ---
   Apply to any form container on dark backgrounds:
   <form class="sarovyn-form form-theme-dark">
   ------------------------------------------- */
/* Kill browser autofill background on dark forms */
.form-theme-dark input:-webkit-autofill,
.form-theme-dark input:-webkit-autofill:hover,
.form-theme-dark input:-webkit-autofill:focus,
.form-theme-dark textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--color-charcoal, #2b2b2b) inset;
  -webkit-text-fill-color: var(--color-ivory, #f5f5f0);
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--color-ivory, #f5f5f0);
}

.form-theme-dark {
  --form-text: rgba(245, 245, 240, 0.9);
  --form-border: var(--color-alabaster-20);
  --form-focus: var(--color-gold, #c4a052);
  --form-placeholder: var(--color-alabaster-40);
  --form-placeholder-focus: var(--color-alabaster-20);
  --form-hint: rgba(245, 245, 240, 0.5);
  --form-error-bg: rgba(192, 57, 43, 0.15);
  --form-error-border: rgba(192, 57, 43, 0.5);
  --form-error-text: #ff9999;
  --form-submit-bg: #3a3a3a;
  --form-submit-border: rgba(196, 160, 82, 0.3);
  --form-submit-text: #f5f5f0;
  --form-submit-hover-bg: #444;
  --form-submit-hover-border: var(--color-gold, #c4a052);
  --form-spinner-track: rgba(245, 245, 240, 0.3);
  --form-spinner-color: #f5f5f0;
  --form-switch-off: var(--color-alabaster-15);
  --form-switch-knob: #fff;
}

/* --- Responsive --- */
@media (max-width: 576px) {
  .form-submit {
    width: 100%;
  }

  .form-row {
    flex-direction: column;
    gap: 0;
  }

  .form-row__col--sm {
    flex: 1;
  }
}