/*
 * Onboarding flows — auth.css alignment layer
 * Load after parent-onboarding.css / advocate-onboarding.css
 * Brand: navy + yellow, 4px radius, Inter (matches login/signup)
 */

:root {
  --auth-navy: #182743;
  --auth-yellow: #ffef4b;
  --auth-yellow-hover: #ffe820;
  --auth-white: #ffffff;
  --auth-border: #e2e5ea;
  --auth-border-input: #d1d5db;
  --auth-text-muted: #6b7280;
  --auth-text-placeholder: #9ca3af;
  --auth-error-bg: #fef2f2;
  --auth-error-border: #fecaca;
  --auth-error-text: #991b1b;
  --auth-radius: 4px;
  --auth-easing: cubic-bezier(0.2, 0, 0, 1);
  --auth-duration: 180ms;

  /* Remap onboarding tokens → auth */
  --black: var(--auth-navy);
  --white: var(--auth-white);
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: var(--auth-border);
  --gray-300: var(--auth-border-input);
  --gray-400: var(--auth-text-placeholder);
  --gray-500: var(--auth-text-placeholder);
  --gray-600: var(--auth-text-muted);
  --gray-700: #4b5563;
  --gray-900: var(--auth-navy);

  --radius-sm: var(--auth-radius);
  --radius-md: var(--auth-radius);
  --radius-lg: var(--auth-radius);

  --ease: var(--auth-easing);
  --duration: var(--auth-duration);
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--auth-navy);
  background: var(--auth-white);
}

/* ── Typography ── */
.step-title {
  font-size: clamp(1.5rem, 4.5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--auth-navy);
}

.step-description {
  color: var(--auth-text-muted);
  font-size: 0.9375rem;
}

@media (min-width: 768px) {
  .step-title {
    font-size: 2rem;
  }
}

/* ── Progress ── */
.progress-track {
  background: var(--auth-border);
}

.progress-fill {
  background: var(--auth-navy);
}

/* ── Inputs ── */
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field select,
.form-field textarea {
  background: var(--auth-white);
  border: 1px solid var(--auth-border-input);
  border-radius: var(--auth-radius);
  color: var(--auth-navy);
  min-height: 48px;
  padding: 0.75rem 0.875rem;
  font-size: 1rem;
  transition:
    border-color var(--auth-duration) var(--auth-easing),
    box-shadow var(--auth-duration) var(--auth-easing);
}

.form-field input::placeholder {
  color: var(--auth-text-placeholder);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  background: var(--auth-white);
  border-color: var(--auth-navy);
  box-shadow: 0 0 0 1px var(--auth-navy);
}

.form-field input.readonly-field {
  background: var(--gray-100);
  color: var(--auth-text-muted);
}

.location-tag {
  border: 1px solid var(--auth-border-input);
  border-radius: var(--auth-radius);
  background: var(--auth-white);
}

/* ── Role welcome step ── */
.app-shell--role-step {
  background: var(--auth-white);
}

.app-shell--role-step .app-header {
  background: var(--auth-white);
}

.po-role-headline {
  color: var(--auth-navy);
}

.po-role-btn--primary {
  background: var(--auth-navy);
  border-radius: 999px;
}

.po-role-btn--link {
  color: var(--auth-navy);
}

.po-role-btn:focus-visible {
  outline-color: var(--auth-navy);
}

/* ── Choice cards ── */
.choice-list--roles .choice-card--role {
  border: 1px solid var(--auth-border-input);
  border-radius: var(--auth-radius);
  box-shadow: none;
}

.choice-list--roles .choice-card--role:hover {
  border-color: #b0b7c3;
  background: var(--gray-50);
  box-shadow: none;
  transform: none;
}

.choice-list--roles .choice-card--role.is-selected {
  border-color: var(--auth-navy);
  box-shadow: 0 0 0 1px var(--auth-navy);
  transform: none;
}

.choice-list--roles .choice-card--role.is-selected .choice-icon {
  background: var(--auth-navy);
  color: var(--auth-white);
  border-radius: var(--auth-radius);
}

.choice-list--roles .choice-icon {
  border-radius: var(--auth-radius);
}

.choice-card:focus-visible,
.choice-list--roles .choice-card--role:focus-visible {
  outline: 2px solid var(--auth-navy);
  outline-offset: 2px;
}

.choice-card.is-selected .choice-check:not(.choice-check--box),
.choice-card:has(input:checked) .choice-check {
  border-color: var(--auth-navy);
  background: var(--auth-navy);
}

.choice-card.is-selected .choice-check--box {
  border-color: var(--auth-navy);
  background: var(--auth-navy);
}

.choice-title {
  color: var(--auth-navy);
}

.choice-desc {
  color: var(--auth-text-muted);
}

/* ── Plan picker (advocate) ── */
.plan-picker-card {
  border: 1px solid var(--auth-border-input);
  border-radius: var(--auth-radius);
  background: var(--auth-white);
}

.plan-picker-card.is-selected {
  background: var(--auth-navy);
  color: var(--auth-white);
  border-color: var(--auth-navy);
  box-shadow: 0 0 0 1px var(--auth-navy);
}

.plan-picker-radio {
  border-color: var(--auth-navy);
}

.plan-picker-card.is-selected .plan-picker-radio {
  border-color: var(--auth-white);
  background: var(--auth-white);
  box-shadow: inset 0 0 0 4px var(--auth-navy);
}

/* ── Primary CTA (auth yellow) ── */
.btn-primary,
#nextBtn,
#submitBtn,
#poContinue {
  background: var(--auth-yellow);
  color: var(--auth-navy);
  border: none;
  border-radius: var(--auth-radius);
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background var(--auth-duration) var(--auth-easing);
}

.btn-primary:hover:not(:disabled),
#nextBtn:hover:not(:disabled),
#submitBtn:hover:not(:disabled),
#poContinue:hover:not(:disabled) {
  background: var(--auth-yellow-hover);
  opacity: 1;
  transform: none;
}

.btn-primary:active:not(:disabled),
#nextBtn:active:not(:disabled),
#submitBtn:active:not(:disabled),
#poContinue:active:not(:disabled) {
  transform: none;
}

.btn-primary:disabled,
#nextBtn:disabled,
#submitBtn:disabled,
#poContinue:disabled {
  background: var(--gray-100);
  color: var(--auth-text-placeholder);
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary:focus-visible,
#nextBtn:focus-visible,
#submitBtn:focus-visible,
#poContinue:focus-visible {
  outline: 2px solid var(--auth-navy);
  outline-offset: 2px;
}

/* ── Secondary / skip ── */
.btn-secondary {
  border: 1px solid var(--auth-border-input);
  border-radius: var(--auth-radius);
  color: var(--auth-navy);
  background: var(--auth-white);
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  transition:
    background var(--auth-duration) var(--auth-easing),
    border-color var(--auth-duration) var(--auth-easing);
}

.btn-secondary:hover {
  border-color: #b0b7c3;
  background: var(--gray-50);
}

.btn-skip,
.btn-text,
.btn-start-over {
  color: var(--auth-text-muted);
}

.btn-skip:hover,
.btn-text:hover,
.btn-start-over:hover {
  color: var(--auth-navy);
}

.header-back {
  color: var(--auth-navy);
}

.header-back:hover {
  background: var(--gray-50);
}

.app-header,
.app-footer {
  border-color: var(--auth-border);
  background: var(--auth-white);
}

/* ── Match cards (parent) ── */
.match-grid-card {
  border-radius: var(--auth-radius);
}

/* ── Loading ── */
.loading-spinner {
  border-color: var(--auth-border);
  border-top-color: var(--auth-navy);
}

.loading-text {
  color: var(--auth-text-muted);
  font-size: 0.875rem;
}

.initial-loading-overlay {
  background: var(--auth-white);
}

/* ── Errors ── */
.error-container {
  background: var(--auth-error-bg);
  border: 1px solid var(--auth-error-border);
  color: var(--auth-error-text);
  border-radius: var(--auth-radius);
  box-shadow: none;
  font-size: 0.875rem;
  font-weight: 400;
}

.field-hint.is-error {
  color: var(--auth-error-text);
}

.form-field input.invalid {
  border-color: var(--auth-error-border);
}

/* ── Search / filter inputs ── */
.list-search {
  background: var(--auth-white);
  border: 1px solid var(--auth-border-input);
  border-radius: var(--auth-radius);
  color: var(--auth-navy);
  min-height: 48px;
  padding: 0.75rem 0.875rem;
  font-size: 1rem;
  transition:
    border-color var(--auth-duration) var(--auth-easing),
    box-shadow var(--auth-duration) var(--auth-easing);
}

.list-search::placeholder {
  color: var(--auth-text-placeholder);
}

.list-search:focus {
  background: var(--auth-white);
  border-color: var(--auth-navy);
  box-shadow: 0 0 0 1px var(--auth-navy);
}

/* ── Location field wrapper (advocate) ── */
.location-field {
  border: 1px solid var(--auth-border-input);
  border-radius: var(--auth-radius);
  background: var(--auth-white);
}

.location-field:focus-within {
  background: var(--auth-white);
  border-color: var(--auth-navy);
  box-shadow: 0 0 0 1px var(--auth-navy);
}

.location-tag-remove {
  border-radius: var(--auth-radius);
}

.pac-container {
  border-radius: var(--auth-radius);
  border-color: var(--auth-border);
}

/* ── Choice lists (scroll rows) ── */
.choice-list,
.choice-list--scroll {
  border-top-color: var(--auth-border);
}

.choice-card {
  border-bottom-color: var(--auth-border);
}

.choice-card:focus-visible {
  outline-color: var(--auth-navy);
}

.choice-check {
  border-color: var(--auth-border-input);
}

/* ── Plan picker tweaks ── */
.plan-picker-card:not(.is-selected) {
  background: var(--auth-white);
}

.plan-picker-card:active {
  transform: none;
}

.plan-picker-tag {
  color: var(--auth-text-muted);
}

/* ── Rate slider ── */
.rate-slider-step {
  border: 1px solid var(--auth-border-input);
  border-radius: var(--auth-radius);
  color: var(--auth-navy);
}

.rate-slider-step:hover:not(:disabled) {
  border-color: #b0b7c3;
  background: var(--gray-50);
}

.rate-slider-step:focus-visible {
  outline-color: var(--auth-navy);
}

.rate-rank-row--self {
  border-color: var(--auth-border);
}

.rate-rank-row--self::before {
  background: var(--auth-navy);
}

/* ── Photo upload ── */
.photo-preview:hover {
  border-color: var(--auth-navy);
}

/* ── Review step ── */
.review-name,
.review-info-heading,
.review-info-value {
  color: var(--auth-navy);
}

.review-verified-badge .material-symbols-outlined {
  color: var(--auth-navy);
}

.review-info-card {
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius);
}

.review-info-row {
  border-bottom-color: var(--auth-border);
}

/* ── Terms checklist ── */
.terms-check-box {
  border-radius: var(--auth-radius);
  border-color: var(--auth-border-input);
}

.terms-check:has(input:checked) .terms-check-box {
  border-color: var(--auth-navy);
  background: var(--auth-navy);
}

.terms-check-text a {
  color: var(--auth-navy);
}

.pro-badge {
  background: var(--auth-navy);
  border-radius: var(--auth-radius);
}

/* ── Confirmation / done screens ── */
.confirmation-icon {
  background: var(--auth-navy);
}

.confirmation-title {
  color: var(--auth-navy);
  letter-spacing: -0.02em;
}

.confirmation-message {
  color: var(--auth-text-muted);
}

.confirmation-email {
  color: var(--auth-text-muted);
}

.redirect-notice {
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius);
  background: var(--gray-50);
}

.redirect-progress-container {
  background: var(--auth-border);
}

.redirect-progress-bar {
  background: var(--auth-navy);
}

/* ── Field hints ── */
.field-hint {
  color: var(--auth-text-muted);
  font-size: 0.8125rem;
}

/* ── Desktop shell (matches auth card feel) ── */
@media (min-width: 600px) {
  body {
    background: var(--gray-50);
  }

  .app-shell {
    border-color: var(--auth-border);
    border-radius: var(--auth-radius);
    box-shadow: 0 4px 24px rgb(24 39 67 / 0.06);
  }
}

/* ── Extra primary targets ── */
a.btn-primary,
a.btn-primary--block,
#redirectNowBtn {
  background: var(--auth-yellow);
  color: var(--auth-navy);
  border: none;
  border-radius: var(--auth-radius);
  min-height: 48px;
  font-weight: 600;
  text-decoration: none;
}

a.btn-primary:hover,
a.btn-primary--block:hover,
#redirectNowBtn:hover:not(:disabled) {
  background: var(--auth-yellow-hover);
  opacity: 1;
}