/* ---------- Law Enforcement pages — shared additions on top of style.css ---------- */

/* Step list (guidelines page) */
.step-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:40px;
}
.step-row{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:20px 22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.step-num{
  flex:none;
  width:34px; height:34px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:700; font-size:14.5px;
  color:#fff;
  background:linear-gradient(135deg, rgb(var(--magenta)), rgb(var(--orange)));
}
.step-copy h3{ font-size:16px; margin-bottom:4px; }
.step-copy p{ font-size:14.5px; margin:0; }

/* Compare grid (can / cannot provide) */
.compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:40px;
}
.compare-card{
  padding:26px 24px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--surface);
}
.compare-card h3{ font-size:16.5px; margin-bottom:14px; display:flex; align-items:center; gap:9px; }
.compare-card ul{ display:flex; flex-direction:column; gap:10px; }
.compare-card li{ font-size:14.5px; color:var(--text-dim); padding-left:20px; position:relative; }
.compare-card li::before{ position:absolute; left:0; top:1px; font-weight:700; }
.compare-yes li::before{ content:"+"; color:rgb(var(--gold)); }
.compare-no li::before{ content:"–"; color:var(--text-faint); }

.callout{
  margin-top:32px;
  padding:18px 20px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(var(--gold),.35);
  background:rgba(var(--gold),.08);
  font-size:14px;
  color:var(--text-dim);
}
.callout strong{ color:var(--text); }

/* ---------- Portal shell ---------- */
.portal-section{ padding:20px 0 120px; }
.portal-shell{
  max-width:640px;
  margin:0 auto;
}
.portal-card{
  padding:38px 36px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(16px);
}
@media (max-width:640px){
  .portal-card{ padding:28px 22px; }
}

/* Stepper */
.stepper{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:32px;
}
.step-dot{
  flex:1;
  height:4px;
  border-radius:4px;
  background:var(--border);
  transition:background .3s var(--ease);
}
.step-dot.done{ background:linear-gradient(90deg, rgb(var(--gold)), rgb(var(--magenta))); }
.step-dot.current{ background:rgba(255,255,255,.4); }
.step-label{
  font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:6px;
}

/* Panels */
.step-panel{ display:none; }
.step-panel.active{ display:block; }
.step-panel h2{ font-size:22px; margin-bottom:6px; }
.step-panel > p.step-sub{ font-size:14.5px; color:var(--text-dim); margin-bottom:26px; }

/* Fields */
.field{ margin-bottom:20px; }
.field label{
  display:block;
  font-size:13.5px; font-weight:600;
  color:var(--text);
  margin-bottom:8px;
}
.field .hint{ font-size:12.5px; color:var(--text-faint); margin-top:6px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"],
.field textarea{
  width:100%;
  padding:13px 15px;
  font-family:var(--font-body);
  font-size:14.5px;
  color:var(--text);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  outline:none;
  transition:border-color .2s, background .2s;
}
.field input:focus,
.field textarea:focus{
  border-color:rgba(var(--gold),.6);
  background:rgba(255,255,255,.06);
}
.field input.invalid{ border-color:rgba(220,90,90,.7); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }

.error-text{
  font-size:13px;
  color:rgb(240,140,140);
  margin-top:6px;
  display:none;
}
.error-text.show{ display:block; }

/* File drop */
.file-drop{
  border:1.5px dashed var(--border);
  border-radius:var(--radius-md);
  padding:30px 20px;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.file-drop:hover, .file-drop.drag{
  border-color:rgba(var(--gold),.6);
  background:rgba(255,255,255,.04);
}
.file-drop input{ display:none; }
.file-drop .fd-title{ font-size:14.5px; font-weight:600; color:var(--text); margin-bottom:4px; }
.file-drop .fd-sub{ font-size:12.5px; color:var(--text-faint); }
.file-picked{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:14px;
  padding:12px 16px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:13.5px;
}
.file-picked button{
  background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:13px;
  text-decoration:underline;
}
.file-picked button:hover{ color:var(--text); }

/* Buttons row */
.btn-row{ display:flex; gap:12px; margin-top:30px; }
.btn-row .btn{ flex:none; }
.btn-row .btn-back{ margin-right:auto; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; pointer-events:none; }

/* Review summary */
.review-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.review-row{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 14px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--border);
  border-radius:10px;
  font-size:13.5px;
}
.review-row span:first-child{ color:var(--text-faint); }
.review-row span:last-child{ color:var(--text); font-weight:600; text-align:right; word-break:break-word; }

/* Checking / result states */
.state-panel{ text-align:center; padding:20px 0 6px; }
.state-icon{
  width:56px; height:56px;
  margin:0 auto 20px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
}
.state-icon svg{ width:26px; height:26px; }
.spinner{
  width:22px; height:22px;
  border-radius:50%;
  border:2.5px solid rgba(255,255,255,.18);
  border-top-color:rgb(var(--gold));
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.state-panel h2{ font-size:20px; margin-bottom:8px; }
.state-panel p{ font-size:14.5px; max-width:420px; margin:0 auto 8px; }
.case-ref{
  display:inline-block;
  margin-top:14px;
  padding:9px 16px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius:100px;
}

/* Status-check toggle & panel */
.portal-mode-toggle{
  text-align:center;
  margin-top:22px;
  font-size:13.5px;
  color:var(--text-faint);
}
.portal-mode-toggle button{
  background:none; border:none; cursor:pointer;
  color:var(--text); font-weight:600; text-decoration:underline;
  text-underline-offset:3px;
  font-size:13.5px;
}
.status-card{ display:none; }
.status-card.active{ display:block; }

/* Status result card */
.status-result-card{
  padding:22px 22px 24px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:rgba(255,255,255,.035);
}
.status-tone-good{ border-color:rgba(120,220,150,.3); background:rgba(120,220,150,.06); }
.status-tone-pending{ border-color:rgba(var(--gold),.35); background:rgba(var(--gold),.06); }
.status-tone-bad{ border-color:rgba(230,120,120,.35); background:rgba(230,120,120,.06); }
.status-result-head{
  display:flex; align-items:flex-start; gap:14px;
  margin-bottom:12px;
}
.status-result-icon{
  flex:none;
  width:38px; height:38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
}
.status-result-label{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16.5px;
  color:var(--text);
  margin-bottom:4px;
}
.case-ref-small{
  margin-top:0;
  padding:4px 12px;
  font-size:12.5px;
}
.status-result-detail{ font-size:14.5px; margin:0; }

/* PIN-gated download */
.download-gate{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.download-gate label{
  display:block;
  font-size:13px; font-weight:600;
  color:var(--text);
  margin-bottom:8px;
}
.download-gate-row{ display:flex; gap:10px; }
.download-gate-row input{
  flex:1;
  padding:12px 14px;
  font-family:var(--font-body);
  font-size:14.5px;
  color:var(--text);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  outline:none;
}
.download-gate-row input:focus{ border-color:rgba(var(--gold),.6); }
.download-gate-row .btn{ flex:none; }
@media (max-width:480px){
  .download-gate-row{ flex-direction:column; }
}