/* Page shell reset (widget CSS below was written for the Appsmith custom-widget root). */
:root { color-scheme: light; }
html, body { margin: 0; padding: 0; background: #eef1f5; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }

@charset "UTF-8";
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --green: #97C539;
  --blue: #00AAEB;
  --green-dark: #7aaa28;
  --blue-dark: #0090c8;
  --text: #1a1a1a;
  --text-light: #555;
  --border: #dde1e7;
  --bg: #f5f7fa;
  --card: #ffffff;
  --error: #e53935;
  --radius: 12px;
  --shadow: 0 2px 16px rgba(0,0,0,0.08);
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 40px;
}

/* ── Header ── */
#header {
  width: 100%;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.logo-mark {
  display: flex;
  gap: 3px;
}

.logo-mark span {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.logo-mark span:first-child {
  background: var(--green);
}

.logo-mark span:last-child {
  background: var(--blue);
}

.logo-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}

#header-title {
  font-size: 13px;
  color: var(--text-light);
  margin-left: auto;
}

/* ── Progress bar ── */
#progress-wrap {
  width: 100%;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px 14px;
  display: none;
}

#progress-steps {
  display: flex;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.progress-step::before {
  content: "";
  position: absolute;
  top: 13px;
  left: calc(-50% + 13px);
  right: calc(50% + 13px);
  height: 2px;
  background: var(--border);
  transition: background 0.3s;
}

.progress-step:first-child::before {
  display: none;
}

.progress-step.done::before,
.progress-step.active::before {
  background: var(--green);
}

.progress-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-light);
  transition: all 0.25s;
  position: relative;
  z-index: 1;
}

.progress-step.done .progress-dot {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.progress-step.active .progress-dot {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(0, 170, 235, 0.18);
}

.progress-label {
  font-size: 9px;
  color: var(--text-light);
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.progress-step.active .progress-label {
  color: var(--blue);
}

.progress-step.done .progress-label {
  color: var(--green-dark);
}

/* ── Card ── */
#card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 24px 24px;
  width: 100%;
  max-width: 520px;
  margin: 24px 16px 0;
}

.screen {
  display: none;
}

.screen.active {
  display: block;
}

/* ── Typography ── */
.step-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.3;
}

.step-subtitle {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 24px;
  line-height: 1.5;
}

.step-subtitle strong {
  color: var(--text);
}

/* ── Buttons ── */
.btn-row {
  display: flex;
  gap: 10px;
  margin-top: 28px;
}

.btn {
  flex: 1;
  padding: 14px 20px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--green);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--green-dark);
}

.btn-primary:disabled {
  background: #c5d8a0;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  flex: 0 0 auto;
  padding: 14px 18px;
}

.btn-secondary:hover {
  background: #eaeef3;
}

.btn-blue {
  background: var(--blue);
  color: #fff;
}

.btn-blue:hover:not(:disabled) {
  background: var(--blue-dark);
}

.btn-blue:disabled {
  background: #99d6f5;
  cursor: not-allowed;
}

/* ── Status screens ── */
.status-screen {
  text-align: center;
  padding: 20px 0 8px;
}

.status-icon {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.status-screen h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.status-screen p {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.6;
}

/* Phone CTA shown under "Link Invalid or Expired" so the candidate can
   call the office directly. Same visual language as the .help-phone pill
   used in step 5's "Having trouble?" fallback, intentionally — the
   candidate has hit a dead end and a friendly tap-to-call is the next
   action we want them to take. */
.invalid-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 12px 22px;
  background: #f6fbef;
  border: 1px solid #d6ebb5;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  color: var(--green-dark);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.05s ease;
}

.invalid-phone:hover {
  background: #eef7da;
}

.invalid-phone:active {
  transform: translateY(1px);
}

.invalid-phone-icon {
  font-size: 18px;
}

.invalid-phone-number {
  letter-spacing: 0.3px;
}

/* Pulse animation used to draw attention to the Submit Application button
   once the recorder iframe signals the recording has been accepted. The
   recorder iframe sits below the custom widget, so after the candidate
   taps "Use this recording" they're looking at the bottom of the page —
   the submit button at the top of step 5 is out of view. We scroll to it
   in JS and pulse it here so the eye is drawn to where the next tap goes.

   3 iterations × 1.2s = ~3.6s of attention then it settles. JS removes
   the class after the animation finishes so re-entering step 5 doesn't
   reanimate. Animation respects reduced-motion preference below. */
@keyframes btn-attention-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(151, 197, 57, 0.55);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 14px rgba(151, 197, 57, 0);
  }
}
.btn.btn-attention {
  animation: btn-attention-pulse 1.2s ease-in-out 3;
}

@media (prefers-reduced-motion: reduce) {
  .btn.btn-attention {
    animation: none;
    /* Static highlight as a fallback — a solid green ring around the
       button so the cue is still visible to candidates with reduced-motion
       turned on. */
    box-shadow: 0 0 0 4px rgba(151, 197, 57, 0.35);
  }
}
/* ── Spinner ── */
#loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 16px;
  color: var(--text-light);
  font-size: 14px;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* ── Resume banner ── */
#resume-banner {
  display: none;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #2e7d32;
  margin-bottom: 18px;
  align-items: center;
  gap: 8px;
}

/* ── Step 1 ── */
.info-box {
  background: #f0f7ff;
  border: 1px solid #cce5f8;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

.info-box-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--blue);
  margin-bottom: 12px;
}

.info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
}

.info-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.consent-box {
  background: #fffdf0;
  border: 1px solid #e8dfa0;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 8px;
}

.consent-box-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8a7a00;
  margin-bottom: 10px;
}

.consent-text {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.55;
  margin-bottom: 10px;
}

.privacy-link {
  display: inline-block;
  font-size: 13px;
  color: var(--blue);
  text-decoration: none;
  margin-bottom: 16px;
  font-weight: 500;
}

.privacy-link:hover {
  text-decoration: underline;
}

.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 12px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.2s;
}

.consent-label:hover {
  border-color: var(--green);
}

.consent-label.checked {
  border-color: var(--green);
  background: #f5fbea;
}

.consent-label input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.custom-checkbox {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 2px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-top: 1px;
}

.consent-label.checked .custom-checkbox {
  background: var(--green);
  border-color: var(--green);
}

.consent-label.checked .custom-checkbox::after {
  content: "";
  display: block;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}

.consent-label-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  font-weight: 500;
}

/* ── Step 2 ── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group-full {
  grid-column: 1/-1;
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.required {
  color: var(--error);
  margin-left: 2px;
}

.form-input {
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  color: var(--text);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  font-family: inherit;
}

.form-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 170, 235, 0.12);
}

.form-input.edited {
  border-color: var(--green);
  background: #f9fdf0;
}

.edit-notice {
  background: #f0f7ff;
  border: 1px solid #cce5f8;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #1565c0;
  margin-top: 4px;
}

/* Small grey helper text shown under form inputs (e.g. preferred name
   "Used in all communications instead of legal first name"). */
.form-helper {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 2px;
  font-style: italic;
  line-height: 1.45;
}

/* Expanded explainer that appears once the candidate enters a preferred
   name different from their legal first name. Distinct from .form-helper
   so it stands out as "extra info you should read once". */
.preferred-note {
  margin-top: 8px;
  padding: 10px 12px;
  background: #f6fbef;
  border: 1px solid #d6ebb5;
  border-radius: 8px;
  font-style: normal;
  color: var(--green-dark);
}

/* Optional-label modifier — used on form labels to signal a field isn't
   required without looking like an error (the .required asterisk is red).
   Small parenthetical grey text instead. */
.form-label-optional {
  font-weight: 400;
  color: var(--text-light);
  font-size: 12px;
  margin-left: 4px;
}

.form-error {
  background: #fdecea;
  border: 1px solid #f5c6c6;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--error);
  margin-top: 8px;
}

/* ── Step 3: Questions ── */
.q-section {
  margin-bottom: 28px;
}

.q-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--blue);
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid #e8f5ff;
}

.q-item {
  margin-bottom: 18px;
}

.q-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 10px;
  display: block;
}

.q-required {
  color: var(--error);
  margin-left: 3px;
}

.q-info-block {
  background: #f0f7ff;
  border: 1px solid #cce5f8;
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: #1a3a5c;
  line-height: 1.6;
  margin-bottom: 4px;
}

.yn-group {
  display: flex;
  gap: 10px;
}

.yn-btn {
  flex: 1;
  padding: 11px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  color: var(--text-light);
}

.yn-btn:hover {
  border-color: var(--blue);
  color: var(--text);
}

.yn-btn.selected-yes {
  border-color: var(--green);
  background: #f5fbea;
  color: var(--green-dark);
}

.yn-btn.selected-no {
  border-color: var(--blue);
  background: #f0f7ff;
  color: var(--blue-dark);
}

.q-input {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
}

.q-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 170, 235, 0.12);
}

.q-input.answered {
  border-color: var(--green);
}

.q-select {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.q-select:focus {
  outline: none;
  border-color: var(--blue);
}

.q-select.answered {
  border-color: var(--green);
}

.ms-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ms-chip {
  padding: 8px 14px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
  color: var(--text-light);
  user-select: none;
}

.ms-chip:hover {
  border-color: var(--blue);
  color: var(--text);
}

.ms-chip.selected {
  border-color: var(--green);
  background: #f5fbea;
  color: var(--green-dark);
  font-weight: 600;
}

.affirm-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 14px;
  background: #fffdf0;
  border: 2px solid #e8dfa0;
  border-radius: 10px;
  transition: border-color 0.2s;
}

.affirm-label:hover {
  border-color: var(--green);
}

.affirm-label.checked {
  border-color: var(--green);
  background: #f5fbea;
}

.affirm-label input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.affirm-checkbox {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 2px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-top: 2px;
}

.affirm-label.checked .affirm-checkbox {
  background: var(--green);
  border-color: var(--green);
}

.affirm-label.checked .affirm-checkbox::after {
  content: "";
  display: block;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}

.affirm-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  font-weight: 500;
}

.q-item.unanswered .q-label {
  color: var(--error);
}

.q-item.unanswered .yn-btn {
  border-color: #f5c6c6 !important;
}

.q-item.unanswered .q-input {
  border-color: var(--error) !important;
}

.q-item.unanswered .q-select {
  border-color: var(--error) !important;
}

.q-item.unanswered .affirm-label {
  border-color: var(--error) !important;
  background: #fdecea !important;
}

/* ── Step 4: Recording ── */
.passage-card {
  background: #f8fbff;
  border: 1px solid #cce5f8;
  border-left: 4px solid var(--blue);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 8px;
}

.passage-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--blue);
  margin-bottom: 10px;
}

.passage-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  font-style: italic;
}

/* The candidate's name slotted into the reading passage. JS replaces the
   span's text with the preferred name (or legal first name as fallback)
   once we know it. When neither is set the span keeps its default
   "(your name)" text styled as a placeholder so the passage still reads
   naturally — same intent as a form placeholder but inside flowing copy. */
.passage-name {
  font-style: normal;
  font-weight: 600;
  color: var(--blue-dark);
}

.passage-name-placeholder {
  color: var(--text-light);
  font-style: italic;
  opacity: 0.75;
}

.rec-done-banner {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #2e7d32;
  text-align: center;
}

/* ── Step 5: "Having trouble?" phone fallback (collapsible) ──
   Kept small by default so the recorder iframe (sibling canvas widget)
   sits closer to the visible viewport on small phones. Expands inline
   on tap to reveal the dial-able phone number. */
.help-card {
  display: inline-block;
  margin-top: 14px;
  border-radius: 999px;
  background: #f6fbef;
  border: 1px solid #d6ebb5;
  /* Pill shape collapses to fit content; details below break it out of
     pill shape when expanded (see [data-expanded] rule). */
  transition: border-radius 0.18s ease;
  max-width: 100%;
}

.help-card[data-expanded=true] {
  display: block;
  border-radius: 10px;
  border-left: 4px solid var(--green);
  padding: 4px 4px 12px;
}

.help-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-dark);
  cursor: pointer;
  border-radius: 999px;
  font-family: inherit;
  line-height: 1.2;
}

.help-toggle:hover {
  background: #eef7da;
}

.help-toggle:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.help-toggle-chev {
  font-size: 10px;
  transition: transform 0.18s ease;
  display: inline-block;
}

.help-card[data-expanded=true] .help-toggle-chev {
  transform: rotate(180deg);
}

.help-details {
  display: none;
  padding: 4px 10px 0;
}

.help-card[data-expanded=true] .help-details {
  display: block;
}

.help-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--green);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--green-dark);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.05s ease;
}

.help-phone:hover {
  background: #eef7da;
}

.help-phone:active {
  transform: translateY(1px);
}

.help-phone-icon {
  font-size: 18px;
}

.help-phone-number {
  letter-spacing: 0.3px;
}

/* ── Placeholder ── */
.placeholder-block {
  background: var(--bg);
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 32px 16px;
  text-align: center;
  color: var(--text-light);
  font-size: 13px;
  margin-bottom: 16px;
}

.placeholder-block strong {
  display: block;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 6px;
}

/* ── Responsive ── */
@media (max-width: 420px) {
  #card {
    padding: 22px 16px 20px;
    margin: 16px 10px 0;
  }
  .step-title {
    font-size: 18px;
  }
  .progress-label {
    font-size: 8px;
  }
  #header-title {
    display: none;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-group-full {
    grid-column: 1;
  }
}
/* ── Eligibility stop ── */
.eligibility-stop {
  background: #fdecea;
  border: 1px solid #f5c6c6;
  border-left: 4px solid var(--error);
  border-radius: 10px;
  padding: 18px 18px 14px;
  margin-bottom: 16px;
  text-align: center;
}

.eligibility-stop-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.eligibility-stop-msg {
  font-size: 14px;
  color: #7f1d1d;
  line-height: 1.6;
  margin-bottom: 16px;
  font-weight: 500;
}

.eligibility-undo-btn {
  margin: 0 auto;
  display: inline-block;
  flex: none !important;
}

/* ── v_optout: cancel-application action + inline confirm ── */
.eligibility-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.eligibility-cancel-link {
  background: none;
  border: none;
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 600;
  color: #b91c1c;
  text-decoration: underline;
  cursor: pointer;
}

.eligibility-cancel-link:hover {
  color: #7f1d1d;
}

.eligibility-cancel-confirm {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f5c6c6;
}

.eligibility-cancel-confirm-msg {
  font-size: 14px;
  font-weight: 600;
  color: #7f1d1d;
  line-height: 1.5;
  margin-bottom: 12px;
}

.eligibility-cancel-confirm-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.eligibility-cancel-confirm-btns .btn {
  flex: none;
}

.btn-danger {
  background: #dc2626;
  color: #fff;
}

.btn-danger:hover:not(:disabled) {
  background: #b91c1c;
}

.btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Suburb autocomplete & distances ── */
.suburb-input {
  margin-bottom: 0 !important;
}

.suburb-distance-card {
  background: #f0f7ff;
  border: 1px solid #cce5f8;
  border-radius: 0 0 8px 8px;
  padding: 10px 14px;
  margin-top: -2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.distance-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}

.distance-icon {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Scroll-for-more hint (mobile) ──
   Pinned to the iframe viewport. Use the longhand top/right/bottom/left if
   you ever convert this to a full overlay — `inset: 0` silently fails inside
   Appsmith iframes (trap 10). For a single-axis pin like this, position +
   bottom + left + transform is fine.

   Hidden by default; updateScrollIndicator() in widget JS toggles display
   based on overflow & current scroll position. Hidden on tablets/desktop
   via the media query below — desktop users see the page mouse-scroll and
   don't need a thumb-friendly nudge. */
#scroll-hint {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26, 26, 26, 0.86);
  color: #fff;
  padding: 8px 14px 8px 16px;
  border-radius: 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  align-items: center;
  gap: 6px;
  z-index: 999;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  animation: scrollHintBounce 1.6s ease-in-out infinite;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.scroll-hint-arrow {
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  margin-top: -3px;
}

@keyframes scrollHintBounce {
  0%, 100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 4px);
  }
}
/* Desktop: hide entirely. The scroll hint is a phone-specific affordance. */
@media (min-width: 600px) {
  #scroll-hint {
    display: none !important;
  }
}
/* ── Free-text char counter ──
   Sits under a textarea/long-text input and shows current/limit. Turns
   amber when within 50 chars of the cap, red at the cap. Driven by
   updateCharCounter() in widget JS. */
.q-char-counter {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #888;
  text-align: right;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.q-char-counter.warn {
  color: #c98300;
}

.q-char-counter.at-max {
  color: var(--error);
  font-weight: 600;
}

/* ── Eligibility-stop detail field ──
   When a flagged question has a `<key>_detail` partner question in the loaded
   set, the widget surfaces it BELOW the stop banner so the candidate can
   record what they want to declare even though they can't progress. Styling
   echoes the stop banner palette (alarmed red) so it reads as part of the
   stop, not a separate optional field. */
.eligibility-detail-prompt {
  background: #fff7f6;
  border: 1px solid #f5c6c6;
  border-left: 4px solid var(--error);
  border-radius: 10px;
  padding: 14px 16px 12px;
  margin-bottom: 16px;
}

.eligibility-detail-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #7f1d1d;
  margin-bottom: 8px;
  line-height: 1.4;
}

.eligibility-detail-input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #f5c6c6;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.eligibility-detail-input:focus {
  outline: none;
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.12);
}

.distance-warn {
  color: var(--error);
  font-weight: 600;
  margin-left: 4px;
}

/* Google autocomplete dropdown — ensure it appears above other elements */
.pac-container {
  z-index: 9999 !important;
  font-family: inherit;
}

.pac-item {
  font-size: 13px;
  padding: 6px 10px;
  cursor: pointer;
}

.pac-item:hover {
  background: #f0f7ff;
}

/* ── Role interest selection (step 2) ── */
#interest-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 20px;
}

.interest-card {
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px 48px 16px 18px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
  background: #fff;
}

.interest-card:hover {
  border-color: var(--blue);
}

.interest-card.selected {
  border-color: var(--green);
  background: #f5fbea;
}

.interest-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.interest-desc {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.4;
}

.interest-check {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: transparent;
  transition: background 0.15s, color 0.15s;
}

.interest-card.selected .interest-check {
  background: var(--green);
  color: #fff;
}

/* ===================================================================
   Inline voice recorder (scoped under #rec-panel; was record.html)
   =================================================================== */
#rec-panel { margin-top: 8px; }
#rec-panel * { box-sizing: border-box; }
#rec-panel .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 24px; border: none; border-radius: 50px;
    font-size: 15px; font-weight: 700; cursor: pointer;
    transition: background 0.18s, transform 0.1s;
  }
#rec-panel .btn:active { transform: scale(0.97); }
#rec-panel .btn-record {
    background: #e53935; color: #fff;
    box-shadow: 0 4px 14px rgba(229,57,53,0.35);
    width: 100%; border-radius: 0;
    padding: 16px 24px;
  }
#rec-panel .btn-record:hover { background: #c62828; }
#rec-panel .btn-record:disabled { background: #bbb; box-shadow: none; cursor: not-allowed; }
#rec-panel .btn-stop { background: #1a1a1a; color: #fff; flex: 1; border-radius: 50px; padding: 13px 20px; }
#rec-panel .btn-stop:hover { background: #333; }
#rec-panel .btn-green { background: #97C539; color: #fff; flex: 1; border-radius: 50px; }
#rec-panel .btn-green:hover { background: #7aaa28; }
#rec-panel .btn-grey { background: #eaeef3; color: #333; border: 1px solid #dde1e7; flex: 1; border-radius: 50px; }
#rec-panel .btn-grey:hover { background: #d8dde3; }
#rec-panel .btn-grey:disabled, #rec-panel .btn-grey.is-disabled { opacity: 0.45; cursor: not-allowed; }
#rec-panel .btn-grey:disabled:hover, #rec-panel .btn-grey.is-disabled:hover { background: #eaeef3; }
#rec-panel .btn-row { display: flex; gap: 8px; padding: 0 12px; }
#rec-panel .rec-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
  }
#rec-panel .dot-wrap { position: relative; width: 18px; height: 18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#rec-panel .pulse { position:absolute; width:18px; height:18px; border-radius:50%; background:rgba(229,57,53,0.3); animation: recpulse 1.2s ease-out infinite; }
#rec-panel .dot { width:11px; height:11px; border-radius:50%; background:#e53935; position:relative; z-index:1; }
@keyframes recpulse { 0%{transform:scale(0.8);opacity:1} 80%,100%{transform:scale(2.2);opacity:0} }
#rec-panel .timer { font-size: 20px; font-weight: 700; color: #1a1a1a; font-variant-numeric: tabular-nums; min-width: 48px; flex-shrink:0; }
#rec-panel .rec-label { font-size: 12px; font-weight: 700; color: #e53935; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink:0; }
#rec-panel .hint { font-size: 12px; color: #888; text-align: center; padding: 4px 12px 8px; }
#rec-panel .play-wrap { display:flex; align-items:center; gap:10px; padding: 10px 12px; }
#rec-panel .btn-play {
    width: 44px; height: 44px; border-radius: 50%; border: none;
    background: #1a1a1a; color: #fff; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink:0;
  }
#rec-panel .btn-play:hover { background: #333; }
#rec-panel .play-progress-track { flex: 1; height: 6px; background: #dde1e7; border-radius: 3px; overflow: hidden; }
#rec-panel .play-progress-fill { height: 100%; background: #00AAEB; width: 0%; transition: width 0.3s linear; border-radius: 3px; }
#rec-panel .play-time { font-size: 12px; color: #888; font-variant-numeric: tabular-nums; white-space:nowrap; }
#rec-panel .status { padding: 9px 12px; margin: 0 12px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center; }
#rec-panel .status-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
#rec-panel .status-error { background: #fdecea; color: #e53935; border: 1px solid #f5c6c6; }
#rec-panel .status-warn { background: #fff8e1; color: #8a6d00; border: 1px solid #ffe082; }
#rec-panel .spinner-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px; color: #555; font-size: 13px; }
#rec-panel .spinner { width: 28px; height: 28px; border: 3px solid #dde1e7; border-top-color: #00AAEB; border-radius: 50%; animation: recspin 0.7s linear infinite; }
@keyframes recspin { to { transform: rotate(360deg); } }
#rec-panel .attempt-badge { font-size: 12px; font-weight: 700; color: #555; text-align: center; padding: 6px 12px 2px; text-transform: uppercase; letter-spacing: 0.5px; }
#rec-panel .count-badge { font-size: 12px; font-weight: 600; color: #667085; text-align: center; padding: 8px 12px 2px; }
#rec-panel .count-badge.warn { color: #e53935; font-weight: 700; }
#rec-panel .build-tag { position: fixed; bottom: 4px; right: 6px; font-size: 9px; color: #aaa; font-family: monospace; pointer-events: none; }
#rec-panel .hidden { display: none !important; }