/* ══════════════════════════════════════════════════
   LP-TOOLS BASE CSS — v1.1.0
   Shared components for all LegalPlace tools.
   All rules are scoped inside .lp-tool
   to prevent conflicts with the WordPress theme.
══════════════════════════════════════════════════ */

/* ── CSS variables + tool root ── */
.lp-tool {
  --blue:         #005BC1;
  --blue-hover:   #004A9E;
  --blue-light:   #ECFBFF;
  --blue-border:  #D4F3FF;
  --yellow:       #DFB254;
  --yellow-hover: #C9A048;
  --white:        #FFFFFF;
  --bg:           #F8F6F3;
  --text:         #2D2D2D;
  --text-muted:   #6F6F6F;
  --border:       #EAEAEA;
  --green:        #3A8B2E;
  --green-bg:     #F3FBF2;
  --green-border: #E4F7E1;
  --orange-bg:    #FFF9EC;
  --orange-border:#FFF1D3;
  --red-bg:       #FEF2F2;
  --red-border:   #FDE3E3;
  --radius:       8px;
  --radius-sm:    6px;

  /* !important: theme targets [class^="lp-"] with font "legalplace" */
  font-family: 'Inter', sans-serif !important;
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ── Scoped reset ── */
.lp-tool *, .lp-tool *::before, .lp-tool *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Standalone mode: full-page background ── */
.lp-tool.lp-tool--standalone {
  border-radius: 0;
  min-height: 100vh;
}


/* ══ HEADER ══ */
.lp-tool .sim-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.lp-tool .sim-header-inner {
  max-width: 620px;
  margin: 0 auto;
  padding: 14px 20px 0;
}
.lp-tool .sim-title {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lp-tool .sim-nav {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.lp-tool .btn-back-header {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: opacity .15s;
}
.lp-tool .btn-back-header:hover { opacity: .7; }
.lp-tool .btn-back-header svg { flex-shrink: 0; }


/* ══ PROGRESS BAR ══ */
.lp-tool .progress-track {
  height: 3px;
  background: var(--border);
  overflow: hidden;
}
.lp-tool .progress-fill {
  height: 100%;
  background: var(--blue);
  transition: width .4s ease;
}


/* ══ CONTENT WRAPPER ══ */
.lp-tool .sim-wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 28px 20px 56px;
  /* min-height prevents CLS (Cumulative Layout Shift) during step transitions.
     480px corresponds to the shortest step observed. */
  min-height: 480px;
}


/* ══ STEPS ══ */
.lp-tool .step-panel { display: none; }
.lp-tool .step-panel.active {
  display: block;
  animation: lp-fadeUp .3s ease both;
}
@keyframes lp-fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ══ QUESTION ══ */
/* .question is a <p> with id — aria-labelledby points to it
   without polluting the heading structure */
.lp-tool .question {
  font-size: 17px;
  font-weight: 700;
  /* !important: overrides the theme's color reset */
  color: var(--text) !important;
  text-align: center;
  margin: 0 0 18px;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}
/* .section-divider kept but unused — spacing is handled via [role="group"] */
.lp-tool .section-divider {
  display: none;
}

/* Spacing between question groups (replaces <hr> elements) */
.lp-tool [role="group"] + [role="group"] {
  margin-top: 22px;
}


/* ══ RADIO CARDS ══ */
.lp-tool .radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.lp-tool .radio-grid.col2 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.lp-tool .radio-grid.col3 { grid-template-columns: repeat(3, 1fr); }

/* !important: theme forces label { display: flex } via main.css */
.lp-tool .radio-card { position: relative; cursor: pointer; display: block !important; }
.lp-tool .radio-card input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.lp-tool .radio-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  transition: border-color .15s, background .15s, color .15s;
  min-height: 88px;
  line-height: 1.3;
  user-select: none;
  /* ensures full fill even when .radio-card is flex */
  width: 100%;
}
.lp-tool .radio-inner .icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  /* default color for SVGs via currentColor */
  color: var(--text-muted);
}
.lp-tool .radio-inner .icon svg { width: 24px; height: 24px; }

.lp-tool .radio-card:hover .radio-inner {
  border-color: var(--blue);
  background: var(--blue-light);
}
.lp-tool .radio-card input:checked + .radio-inner {
  border-color: var(--blue);
  border-width: 2px;
  background: var(--blue-border);
  color: var(--blue);
  font-weight: 600;
}
/* No stroke rule here: currentColor on SVGs automatically inherits
   color: var(--blue) defined above via .icon */


/* ══ YES/NO TOGGLE ══ */
.lp-tool .toggle-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  flex-wrap: wrap;
}
.lp-tool .toggle-label-text {
  font-size: 14px; font-weight: 500;
  flex: 1; min-width: 180px;
}
.lp-tool .toggle-btns { display: flex; gap: 8px; }
.lp-tool .toggle-btn {
  padding: 7px 20px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--white);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
}
.lp-tool .toggle-btn.active-yes { background: var(--green);      border-color: var(--green);      color: var(--white); }
.lp-tool .toggle-btn.active-no  { background: var(--text-muted); border-color: var(--text-muted); color: var(--white); }


/* ══ CHECKBOX PILLS ══ */
.lp-tool .pills-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
/* !important: theme forces label { display: flex; width: 100% } */
.lp-tool .pill-check { position: relative; cursor: pointer; display: inline-flex !important; width: auto !important; }
.lp-tool .pill-check input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.lp-tool .pill-inner {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid var(--border);
  border-radius: 24px;
  background: var(--white);
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  transition: all .15s;
  user-select: none;
}
.lp-tool .pill-check:hover .pill-inner { border-color: var(--blue); color: var(--blue); }
.lp-tool .pill-check input:checked + .pill-inner {
  background: var(--blue); border-color: var(--blue);
  color: var(--white); font-weight: 600;
}
.lp-tool .pill-check input:checked + .pill-inner::before { content: "✓\00a0"; }


/* ══ NAVIGATION ══ */
.lp-tool .nav-row {
  display: flex; align-items: center;
  justify-content: flex-end;
  margin-top: 32px; gap: 12px;
}
.lp-tool .btn-next {
  background: var(--blue); color: var(--white);
  border: none; border-radius: var(--radius-sm);
  padding: 12px 26px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .15s;
  font-family: 'Inter', sans-serif;
  display: flex; align-items: center; gap: 6px;
}
.lp-tool .btn-next:hover { background: var(--blue-hover); transform: translateY(-1px); }
.lp-tool .btn-next:active { transform: translateY(0); }


/* ══ ERROR MESSAGE ══ */
.lp-tool .error-msg {
  display: none;
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  color: #D62E2C;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px; font-weight: 500;
  margin-top: 14px;
}
.lp-tool .error-msg.show { display: block; }


/* ══ RESPONSIVE ══ */
@media (max-width: 480px) {
  .lp-tool .radio-grid.col3 { grid-template-columns: repeat(2, 1fr); }
}