/* ============================================
   FILE: components.css — 2026 refresh
   Purpose: Reusable atomic UI: buttons, badges, cards,
            pills, icon-circles, form fields
   Dependencies: base.css
============================================ */

/* ---------- Eyebrow (Trust-Tag style) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--r-pill);
  padding: 7px 14px 7px 11px;
  font-size: var(--fs-tagline);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  box-shadow: var(--sh-1);
}
.eyebrow .icon {
  width: 15px;
  height: 15px;
  color: var(--color-accent-strong);
  flex-shrink: 0;
}

/* Variants */
.eyebrow--sage {
  background: var(--color-accent-soft);
  border-color: rgba(47, 79, 151, 0.5);
}
.eyebrow--sand {
  background: var(--color-bg-sand-soft);
  border-color: rgba(31, 63, 134, 0.10);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 14px 22px;
  min-height: 50px;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  letter-spacing: 0.005em;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out),
    background-color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
  white-space: normal;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.btn .icon {
  width: 18px; height: 18px;
  transition: transform var(--t-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:hover .icon--shift { transform: translateX(4px); }

.btn--primary {
  background: var(--color-button-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-button-primary);
  box-shadow: var(--sh-button);
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 50%);
  pointer-events: none;
}
.btn--primary:hover {
  background: var(--color-button-primary-hover);
  border-color: var(--color-button-primary-hover);
  box-shadow: var(--sh-button-hover);
}
.btn--primary:active {
  background: var(--color-button-primary-active);
  border-color: var(--color-button-primary-active);
}

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-border-strong);
  box-shadow: var(--sh-1);
}
.btn--secondary:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: var(--sh-2);
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  padding: 12px 14px;
  min-height: 44px;
  border-color: transparent;
}
.btn--ghost:hover { background: var(--color-primary-soft); }

/* Accent button — Royal Blue trust accent from the visual reference */
.btn--accent {
  background: var(--color-accent);
  color: var(--color-text-on-primary);
  border-color: var(--color-accent);
  box-shadow: var(--sh-button-accent);
}
.btn--accent:hover {
  background: #24478E;
  border-color: #24478E;
  box-shadow: var(--sh-button-accent-hover);
}

.btn--block { width: 100%; }
.btn--mt-3 { margin-top: var(--space-3); }
.btn--lg { padding: 18px 28px; min-height: 58px; font-size: 1rem; }

/* ---------- Lead Paragraph ---------- */
.lead {
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  line-height: 1.55;
  max-width: 56ch;
}

/* ---------- Card ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--space-7);
  box-shadow: var(--sh-1);
  transition:
    transform var(--t-med) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out),
    border-color var(--t-med) var(--ease-out);
  position: relative;
}
@media (max-width: 479px) {
  .btn {
    width: 100%;
    padding-inline: 16px;
  }
}
@media (hover: hover) {
  .card--hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-3);
    border-color: var(--color-border-strong);
  }
}

.card__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
  color: var(--color-primary);
}
.card__text { color: var(--color-text-muted); }

/* ---------- Icon Circle ---------- */
.icon-circle {
  width: 56px;
  height: 56px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  flex-shrink: 0;
  position: relative;
  transition: transform var(--t-med) var(--ease-out);
  line-height: 1;
}
/* Defensive: doubled class hardens specificity against accidental
   descendant selectors (e.g. .container span) that would otherwise
   override `display` and break icon centering. Only applied to display
   so size modifiers (.icon-circle--sm/--lg) remain in effect. */
.icon-circle.icon-circle { display: inline-flex; }
.icon-circle::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid rgba(31, 63, 134, 0.08);
  pointer-events: none;
}
.icon-circle .icon { width: 24px; height: 24px; }
.icon-circle--sm { width: 44px; height: 44px; margin-bottom: var(--space-3); }
.icon-circle--sm .icon { width: 20px; height: 20px; }
.icon-circle--sm::before { inset: -3px; }
.icon-circle--lg { width: 68px; height: 68px; }
.icon-circle--lg .icon { width: 28px; height: 28px; }

/* Legacy class name; renders as Royal Blue variant */
.icon-circle--sage {
  background: var(--color-accent);
  color: var(--color-text-on-primary);
}
.icon-circle--sage::before { border-color: rgba(47, 79, 151, 0.25); }
.icon-circle--gold {
  background: var(--color-accent);
  color: var(--color-text-on-primary);
}

/* Square rounded variant — alternative to circle */
.icon-tile {
  width: 48px;
  height: 48px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.icon-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
  pointer-events: none;
}
.icon-tile .icon { width: 22px; height: 22px; }

/* ---------- Pill (small info chip) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font-size: var(--fs-tagline);
  font-weight: var(--fw-medium);
  box-shadow: var(--sh-1);
}
.pill .icon { width: 15px; height: 15px; color: var(--color-primary); }

/* ---------- Reassurance line ---------- */
.reassure-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
}
.reassure-row__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}
.reassure-row__item .icon {
  width: 17px; height: 17px;
  color: var(--color-primary);
}

/* ---------- Form Fields ---------- */
.field { display: block; margin-bottom: var(--space-5); }
.field__label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  letter-spacing: var(--tracking-normal);
}
.field__input,
.field__textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  transition:
    border-color var(--t-fast),
    box-shadow var(--t-fast),
    background var(--t-fast);
  box-shadow: var(--sh-1);
}
.field__input::placeholder,
.field__textarea::placeholder { color: var(--color-text-soft); }
.field__textarea { min-height: 112px; resize: vertical; }
.field__input:hover,
.field__textarea:hover {
  border-color: var(--color-border-strong);
}
.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow:
    0 0 0 4px rgba(31, 63, 134, 0.10),
    var(--sh-1);
}

/* ---------- Radio Card (used in wizard) ---------- */
.radio-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition:
    border-color var(--t-fast),
    background var(--t-fast),
    box-shadow var(--t-fast),
    transform var(--t-fast);
  box-shadow: var(--sh-1);
}
.radio-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card__indicator {
  width: 22px; height: 22px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--r-pill);
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.radio-card input:checked ~ .radio-card__indicator {
  border-color: var(--color-primary);
}
.radio-card input:checked ~ .radio-card__indicator::after {
  content: "";
  position: absolute; inset: 4px;
  background: var(--color-primary);
  border-radius: var(--r-pill);
}
.radio-card:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: 0 0 0 3px rgba(31, 63, 134, 0.08), var(--sh-1);
}
.radio-card__label {
  font-weight: var(--fw-medium);
  color: var(--color-text);
  font-size: var(--fs-body);
}