/* Container */
.scopein-kyc-form { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:24px; }
.scopein-kyc-brand img { height:42px; }

/* Title + steps */
.scopein-kyc-form h2 { font-size:32px; margin:8px 0 16px; color:#0c2a4a; }
.scopein-steps { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 18px; }
.scopein-steps .step { background:#eef2f7; color:#6b7280; border:none; padding:8px 12px; border-radius:18px; cursor:pointer; }
.scopein-steps .step.is-active { background:#111827; color:#fff; }

/* Fieldsets */
.scopein-kyc-form fieldset { display:none; border:1px solid #edf2f7; border-radius:10px; padding:16px; margin:0 0 18px; }
.scopein-kyc-form fieldset.is-active { display:block; }
.scopein-kyc-form legend { font-weight:700; color:#0c2a4a; padding:0 6px; }
.scopein-kyc-form label { display:block; margin:10px 0; color:#111827; font-weight:600; }
.scopein-kyc-form input[type="text"],
.scopein-kyc-form input[type="url"],
.scopein-kyc-form input[type="number"],
.scopein-kyc-form input[type="date"],
.scopein-kyc-form select,
.scopein-kyc-form textarea {
  width:100%; border:1px solid #d1d5db; border-radius:8px; padding:10px 12px; font:inherit; background:#fff;
}
.scopein-kyc-form textarea { min-height:110px; resize:vertical; }

/* Grids */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:900px){ .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

/* Repeaters */
.repeater .rows .row { display:grid; grid-template-columns:2fr 1.5fr 1.5fr 1.2fr 40px; gap:10px; align-items:center; margin:8px 0; }
.repeater .rows .row .remove { background:#ef4444; color:#fff; border:none; border-radius:8px; padding:8px 10px; cursor:pointer; }
.repeater .add { margin-top:6px; background:#0c2a4a; color:#fff; border:none; border-radius:10px; padding:8px 12px; cursor:pointer; }

/* Nav buttons */
.scopein-kyc-form .nav { display:flex; justify-content:space-between; gap:10px; margin-top:12px; }
.scopein-kyc-form .nav .prev,
.scopein-kyc-form .nav .next,
.scopein-kyc-form .nav .submit { background:#0c2a4a; color:#fff; border:none; border-radius:10px; padding:10px 16px; cursor:pointer; }
.scopein-kyc-form .nav .prev { background:#6b7280; }
/* Make the “+ ADD PERSON / + ADD UBO” buttons smaller */
.scopein-kyc-form .add-row.button{
  font-size: 12px;
  padding: 6px 10px;
  line-height: 1.2;
  border-radius: 6px;
  background: #0c2a4a; /* keep your brand color */
  color: #fff;
  border: none;
  cursor: pointer;
}
.scopein-kyc-form .add-row.button:hover{ opacity: .9; }
@media (max-width: 600px){
  .scopein-kyc-form .add-row.button{
    font-size: 11px;
    padding: 3px 8px;
  }
}
/* Admin list buttons */
.column-kyc_downloads .button { margin-right:6px; }
/* === Filled-field indicators (frontend only) === */
.scopein-kyc-form label,
.scopein-kyc-form .like-grid .row > div { position: relative; }

.scopein-kyc-form .fill-indicator{
  position: absolute;
  top: 6px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  font-size: 12px;
  line-height: 1;
  color: #059669;            /* green text */
  background: #ecfdf5;       /* light green bg */
  border: 1px solid #a7f3d0; /* green border */
  border-radius: 999px;
  padding: 2px 6px;
}

.scopein-kyc-form .icon-check { fill: #059669; display: block; }

.scopein-kyc-form .is-filled input,
.scopein-kyc-form .is-filled textarea,
.scopein-kyc-form .is-filled select{
  border-color: #059669 !important;
  box-shadow: 0 0 0 2px rgba(16,185,129,.15);
}
/* optional: simple grid for repeater rows */
.scopein-kyc-form #directors .repeater-row,
.scopein-kyc-form #ubos .repeater-row{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; margin:10px 0;
}
.scopein-kyc-form #directors .repeater-row .cell input,
.scopein-kyc-form #ubos .repeater-row .cell input{ width:100%; }
/* PDF shared classes (also used inline in PHP when building Dompdf) */
.pdf-wrap { font-size:12px; }
