@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.tip-intake,
.tip-intake *,
.tip-intake *::before,
.tip-intake *::after {
  box-sizing: border-box;
}

.tip-intake {
  --tip-accent: #8FE23A;
  --tip-accent-dark: #6FC71E;
  --tip-ink: #10241C;
  --tip-text: #1B2A22;
  --tip-text-muted: #55645C;
  --tip-surface: #FFFFFF;
  --tip-surface-alt: #F3F8F4;
  --tip-border: #E3EAE5;
  --tip-danger: #C0362C;
  --tip-radius-sm: 10px;
  --tip-radius-md: 16px;
  --tip-radius-lg: 24px;
  --tip-radius-pill: 999px;
  --tip-ease: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--tip-text);
  max-width: 720px;
  margin-inline: auto;
}

/* Honeypot — off-screen rather than display:none/visibility:hidden, since
   some bots skip fields hidden that way but still fill absolutely-positioned
   ones sitting off-canvas. */
.tip-intake__hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Defensive reset — "all: revert" placed first in each rule below cancels
   the host theme's own h2/p/button/input/select/textarea/a/label styling
   before this widget's declarations apply, so it looks the same anywhere. */

.tip-intake__progress { margin-bottom: 2rem; }
.tip-intake__progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tip-text-muted);
  margin-bottom: 0.5rem;
}
.tip-intake__progress-track {
  height: 8px;
  border-radius: var(--tip-radius-pill);
  background: var(--tip-border);
  overflow: hidden;
}
.tip-intake__progress-fill {
  height: 100%;
  width: 10%;
  border-radius: var(--tip-radius-pill);
  background: var(--tip-accent-dark);
  transition: width 250ms var(--tip-ease);
}

.tip-intake__card {
  background: var(--tip-surface);
  border: 1px solid var(--tip-border);
  border-radius: var(--tip-radius-lg);
  padding: 2.5rem;
  min-height: 360px;
}

.tip-intake__card h2 {
  all: revert;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--tip-ink);
  margin: 0 0 0.5rem;
}
.tip-intake__card > p.tip-intake__step-sub {
  all: revert;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1rem;
  color: var(--tip-text-muted);
  margin: 0 0 1.75rem;
}

.tip-intake__field { margin-bottom: 1.5rem; }
.tip-intake__label {
  all: revert;
  box-sizing: border-box;
  font-family: inherit;
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tip-text);
  margin-bottom: 0.75rem;
}

.tip-intake__error {
  all: revert;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--tip-danger);
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0.5rem 0 0;
}
.tip-intake__submit-error { text-align: center; margin-top: 1rem; }

/* Card-style radio choice (hidden native input, whole label is clickable) */
.tip-intake__radio-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 0.25rem;
}
.tip-intake__radio-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.tip-intake__radio-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  border: 1px solid var(--tip-border);
  border-radius: var(--tip-radius-md);
  cursor: pointer;
  font-weight: 500;
  transition: border-color 150ms var(--tip-ease), background 150ms var(--tip-ease);
}
.tip-intake__radio-card--wide { justify-content: flex-start; text-align: left; font-size: 1.05rem; }
.tip-intake__radio-card:hover { background: var(--tip-surface-alt); }
.tip-intake__radio-card.is-selected {
  border-color: var(--tip-accent-dark);
  background: rgba(111, 199, 30, 0.08);
}
.tip-intake__radio-card:focus-within { outline: 2px solid var(--tip-accent-dark); outline-offset: 2px; }
.tip-intake__radio-card input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Row-style radio choice (visible native input, left-aligned label) */
.tip-intake__radio-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--tip-border);
  border-radius: var(--tip-radius-sm);
  cursor: pointer;
  font-weight: 500;
  transition: border-color 150ms var(--tip-ease), background 150ms var(--tip-ease);
}
.tip-intake__radio-row:hover { background: var(--tip-surface-alt); }
.tip-intake__radio-row.is-selected { border-color: var(--tip-accent-dark); background: rgba(111, 199, 30, 0.08); }
.tip-intake__radio-row input[type="radio"] {
  all: revert;
  width: 18px;
  height: 18px;
  accent-color: var(--tip-accent-dark);
  flex-shrink: 0;
}

.tip-intake__input,
.tip-intake__select,
.tip-intake__textarea {
  all: revert;
  box-sizing: border-box;
  font-family: inherit;
  display: block;
  width: 100%;
  font-size: 1rem;
  color: var(--tip-text);
  background: var(--tip-surface);
  border: 1px solid var(--tip-border);
  border-radius: var(--tip-radius-sm);
  padding: 0.85rem 1rem;
}
.tip-intake__input, .tip-intake__select { height: 52px; }
.tip-intake__textarea { height: 150px; resize: vertical; }
.tip-intake__input:focus,
.tip-intake__select:focus,
.tip-intake__textarea:focus {
  outline: none;
  border-color: var(--tip-accent-dark);
  box-shadow: 0 0 0 3px rgba(111, 199, 30, 0.2);
}

.tip-intake__row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.tip-intake__callout {
  background: var(--tip-surface-alt);
  border: 1px solid var(--tip-border);
  border-radius: var(--tip-radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--tip-text);
}
.tip-intake__callout p { all: revert; box-sizing: border-box; font-family: inherit; margin: 0; font-size: inherit; color: inherit; }
.tip-intake__callout-title {
  all: revert;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--tip-ink);
}

.tip-intake__checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--tip-surface-alt);
  border: 1px solid var(--tip-border);
  border-radius: var(--tip-radius-md);
  padding: 1.5rem;
}
.tip-intake__checkbox-row { display: flex; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; }
.tip-intake__checkbox-row label { all: revert; box-sizing: border-box; font-family: inherit; flex: 1; min-width: 200px; cursor: pointer; }
.tip-intake__checkbox {
  all: revert;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--tip-accent-dark);
  flex-shrink: 0;
  cursor: pointer;
}
.tip-intake__checkbox-title { display: block; font-weight: 600; color: var(--tip-ink); margin-bottom: 0.25rem; }
.tip-intake__checkbox-desc { display: block; font-size: 0.88rem; color: var(--tip-text-muted); line-height: 1.5; }
.tip-intake__checkbox-row .tip-intake__error { flex-basis: 100%; margin-top: 0.25rem; }

.tip-intake__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--tip-border);
}
.tip-intake__back-btn,
.tip-intake__next-btn {
  all: revert;
  box-sizing: border-box;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
}
.tip-intake__back-btn {
  background: none;
  color: var(--tip-text-muted);
  padding: 0.75rem 0.5rem;
  border-radius: var(--tip-radius-sm);
}
.tip-intake__back-btn:hover:not(:disabled) { color: var(--tip-ink); }
.tip-intake__back-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.tip-intake__next-btn {
  background: var(--tip-accent);
  color: var(--tip-ink);
  padding: 0.85rem 1.75rem;
  border-radius: var(--tip-radius-pill);
  text-decoration: none;
  transition: background 150ms var(--tip-ease), transform 150ms var(--tip-ease);
}
.tip-intake__next-btn:hover:not(:disabled) { background: var(--tip-accent-dark); transform: translateY(-1px); }
.tip-intake__next-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Polite-exit screen (already has a lawyer & is happy with them) */
.tip-intake__exit { text-align: center; padding: 1.5rem 0; }
.tip-intake__exit-icon {
  width: 64px; height: 64px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--tip-surface-alt);
  color: var(--tip-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tip-intake__exit h2 { text-align: center; }
.tip-intake__exit p {
  all: revert;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--tip-text-muted);
  font-size: 1.05rem;
  max-width: 46ch;
  margin: 0 auto 2rem;
}
.tip-intake__exit-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.tip-intake__exit-link { text-decoration: none; }

/* Success screen (matches "final message.png") */
.tip-intake__success { text-align: center; padding: 1rem 0; }
.tip-intake__success-icon {
  width: 72px; height: 72px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--tip-surface-alt);
  color: var(--tip-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tip-intake__success h2 { text-align: center; font-size: 1.9rem; }
.tip-intake__success-sub {
  all: revert;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--tip-text-muted);
  font-size: 1.1rem;
  max-width: 44ch;
  margin: 0 auto 2rem;
}
.tip-intake__reminder-box {
  background: var(--tip-surface-alt);
  border-radius: var(--tip-radius-md);
  padding: 1.5rem 1.75rem;
  text-align: left;
  margin-bottom: 2rem;
}
.tip-intake__reminder-box p {
  all: revert;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--tip-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 0.85rem;
}
.tip-intake__reminder-box p:last-child { margin-bottom: 0; }
.tip-intake__reminder-title {
  all: revert;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: 700;
  color: var(--tip-ink);
  margin: 0 0 0.5rem;
}
.tip-intake__reminder-box strong { color: var(--tip-ink); }
.tip-intake__return-link {
  all: revert;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--tip-ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--tip-border);
  padding-bottom: 2px;
}
.tip-intake__return-link:hover { border-color: var(--tip-ink); }

@media (max-width: 640px) {
  .tip-intake__card { padding: 1.5rem; }
  .tip-intake__row-2 { grid-template-columns: 1fr; gap: 0; }
  .tip-intake__radio-grid[style*="repeat(3"] { grid-template-columns: 1fr !important; }
  .tip-intake__radio-grid[style*="repeat(2"] { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------------
   Compact "sm" sizing for [tip_contact_form].
   Scoped to [data-tip-form="contact"] and [data-tip-form="citation"] (the
   single-screen forms) so the multi-step wizard form
   ([data-tip-form="intake-wizard"]) keeps its current, larger sizing.
   Values follow Tailwind's "sm" scale: text-sm (0.875rem), h-9 controls
   (2.25rem), px-3/py-2 padding (0.75rem/0.5rem), rounded-md (0.375rem).
   ------------------------------------------------------------------ */
.tip-intake[data-tip-form="contact"],
.tip-intake[data-tip-form="citation"] {
  max-width: 100%;
  font-size: 0.875rem;
}

.tip-intake[data-tip-form="contact"] .tip-intake__card,
.tip-intake[data-tip-form="citation"] .tip-intake__card {
  padding: 1.5rem;
}

.tip-intake[data-tip-form="contact"] .tip-intake__row-2,
.tip-intake[data-tip-form="citation"] .tip-intake__row-2 {
  gap: 0.75rem;
}

.tip-intake[data-tip-form="contact"] .tip-intake__field,
.tip-intake[data-tip-form="citation"] .tip-intake__field {
  margin-bottom: 1rem;
}

.tip-intake[data-tip-form="contact"] .tip-intake__label,
.tip-intake[data-tip-form="citation"] .tip-intake__label {
  font-size: 0.875rem;
  margin-bottom: 0.375rem;
}

.tip-intake[data-tip-form="contact"] .tip-intake__input,
.tip-intake[data-tip-form="contact"] .tip-intake__select,
.tip-intake[data-tip-form="citation"] .tip-intake__input,
.tip-intake[data-tip-form="citation"] .tip-intake__select {
  height: 2.25rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
}

.tip-intake[data-tip-form="contact"] .tip-intake__textarea,
.tip-intake[data-tip-form="citation"] .tip-intake__textarea {
  height: 6rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
}

.tip-intake[data-tip-form="citation"] .tip-intake__radio-row {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
}
.tip-intake[data-tip-form="citation"] .tip-intake__radio-row input[type="radio"] {
  width: 16px;
  height: 16px;
}

.tip-intake[data-tip-form="contact"] .tip-intake__callout,
.tip-intake[data-tip-form="citation"] .tip-intake__callout {
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
  border-radius: 0.375rem;
}

.tip-intake[data-tip-form="contact"] .tip-intake__next-btn,
.tip-intake[data-tip-form="citation"] .tip-intake__next-btn {
  width: 100%;
  height: 2.25rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  justify-content: center;
}

.tip-intake[data-tip-form="contact"] .tip-intake__error,
.tip-intake[data-tip-form="contact"] .tip-intake__success-sub,
.tip-intake[data-tip-form="citation"] .tip-intake__error,
.tip-intake[data-tip-form="citation"] .tip-intake__success-sub {
  font-size: 0.8125rem;
}

.tip-intake[data-tip-form="contact"] .tip-intake__success h2,
.tip-intake[data-tip-form="citation"] .tip-intake__success h2 {
  font-size: 1.25rem;
}