/* ── Smart KYC System – Public Styles ─────────────────────────── */
:root {
  --kyc-primary:   #1a56db;
  --kyc-success:   #198754;
  --kyc-warning:   #ffc107;
  --kyc-danger:    #dc3545;
  --kyc-bg:        #f0f4ff;
  --kyc-card-bg:   #ffffff;
  --kyc-border:    #dee2e6;
  --kyc-radius:    12px;
}

.smart-kyc-wrap { padding: 20px 0; font-family: 'Inter', system-ui, sans-serif; }

/* ── BS / AD Date Widget ───────────────────────────────────────── */
.kyc-date-widget { display: flex; flex-direction: column; gap: 4px; }

.kyc-date-bs-row,
.kyc-date-ad-row  { display: flex; align-items: stretch; }

.kyc-date-lbl {
  font-size: 10px; font-weight: 800; letter-spacing: .4px;
  padding: 0 7px; min-width: 38px; text-align: center;
  white-space: nowrap; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.kyc-date-lbl.bs { background: #1a56db; color: #fff; border-color: #1a56db; }
.kyc-date-lbl.ad { background: #059669; color: #fff; border-color: #059669; }

.kyc-date-bs-row .form-control { border-left: none; font-size: 13px; }
.kyc-date-ad-row .form-control { border-left: none; font-size: 13px; }

.kyc-bs-inp.is-invalid { border-color: #dc3545; background-image: none; }
.kyc-bs-inp:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.15); }

/* ── Auth Cards ────────────────────────────────────────────────── */
.kyc-auth-card {
  max-width: 480px;
  margin: 0 auto;
  background: var(--kyc-card-bg);
  border-radius: var(--kyc-radius);
  box-shadow: 0 10px 40px rgba(0,0,0,.12);
  padding: 40px;
}

.kyc-auth-logo { text-align: center; margin-bottom: 30px; }

.kyc-brand-icon {
  width: 70px; height: 70px;
  background: var(--kyc-primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 32px; color: #fff;
}

/* ── Password strength ─────────────────────────────────────────── */
.password-strength .strength-bar {
  height: 4px; background: #e9ecef; border-radius: 2px; overflow: hidden;
}
.password-strength .strength-fill {
  height: 100%; width: 0; transition: width .3s, background .3s;
}

/* ── KYC Form Wizard ───────────────────────────────────────────── */
.kyc-form-wrap { max-width: 900px; margin: 0 auto; }

.kyc-progress-wrap { overflow-x: auto; }

.kyc-step-labels {
  display: flex; align-items: flex-start;
  gap: 0; list-style: none; padding: 0; margin: 0;
}

.kyc-step-label {
  flex: 1; text-align: center; position: relative; cursor: pointer;
}
.kyc-step-label::before {
  content: '';
  position: absolute; top: 20px; left: -50%; right: 50%;
  height: 2px; background: var(--kyc-border); z-index: 0;
}
.kyc-step-label:first-child::before { display: none; }
.kyc-step-label.completed::before,
.kyc-step-label.active::before { background: var(--kyc-primary); }

.kyc-step-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--kyc-border);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 6px;
  font-size: 13px; font-weight: 700; position: relative; z-index: 1;
  transition: all .3s;
}
.kyc-step-label.active   .kyc-step-num { background: var(--kyc-primary); border-color: var(--kyc-primary); color: #fff; box-shadow: 0 0 0 4px rgba(26,86,219,.2); }
.kyc-step-label.completed .kyc-step-num { background: var(--kyc-success); border-color: var(--kyc-success); color: #fff; }

.kyc-step-name {
  font-size: 11px; color: #6c757d; white-space: nowrap;
  max-width: 80px; overflow: hidden; text-overflow: ellipsis; margin: 0 auto;
}
.kyc-step-label.active   .kyc-step-name { color: var(--kyc-primary); font-weight: 600; }
.kyc-step-label.completed .kyc-step-name { color: var(--kyc-success); }

/* ── Step panels ───────────────────────────────────────────────── */
.kyc-step-panel { display: none; animation: fadeIn .3s ease; }
.kyc-step-panel.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.kyc-step-title { font-size: 1.2rem; font-weight: 700; color: var(--kyc-primary); margin-bottom: 20px; }

/* ── Photo Upload ──────────────────────────────────────────────── */
.kyc-photo-upload-area {
  width: 200px; height: 250px; margin: 0 auto;
  border: 3px dashed var(--kyc-border);
  border-radius: 12px; overflow: hidden; position: relative;
  cursor: pointer; transition: border-color .3s;
  display: flex; align-items: center; justify-content: center;
}
.kyc-photo-upload-area:hover { border-color: var(--kyc-primary); }
.kyc-photo-preview { width: 100%; height: 100%; object-fit: cover; }
.kyc-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 10; }

/* ── Document Cards ────────────────────────────────────────────── */
.kyc-doc-upload-card {
  border: 2px dashed var(--kyc-border); border-radius: 10px; padding: 12px;
  transition: border-color .3s, background .3s;
}
.kyc-doc-upload-card.uploaded { border-style: solid; border-color: var(--kyc-success); background: #f0fff4; }
.kyc-doc-upload-card:hover { border-color: var(--kyc-primary); }
.kyc-doc-upload-card.kyc-upload-invalid { border-color: #dc3545; background: #fff5f5; animation: kyc-shake .3s ease; }
@keyframes kyc-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

.kyc-doc-dropzone {
  min-height: 100px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; overflow: hidden; border-radius: 6px;
}
.kyc-doc-preview { width: 100%; height: 100px; object-fit: cover; border-radius: 4px; }
.kyc-doc-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff;
}
.kyc-doc-empty { text-align: center; padding: 10px; }
.kyc-doc-header { margin-bottom: 8px; }

/* ── Meeting type selector ─────────────────────────────────────── */
.kyc-meeting-option {
  border: 2px solid var(--kyc-border); border-radius: 10px; padding: 15px;
  text-align: center; cursor: pointer; transition: all .3s;
}
.kyc-meeting-option:hover { border-color: var(--kyc-primary); }
.kyc-meeting-option.selected { border-color: var(--kyc-primary); background: #ebf0ff; }

/* ── Declaration ───────────────────────────────────────────────── */
.kyc-declaration-block {
  background: #f8f9fa; border-radius: 8px; padding: 15px;
  border-left: 4px solid var(--kyc-primary);
}

/* ── Dashboard ─────────────────────────────────────────────────── */
.kyc-dash-header {
  background: linear-gradient(135deg, var(--kyc-primary), #7c3aed);
  border-radius: var(--kyc-radius); padding: 25px 30px; color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 15px; margin-bottom: 10px;
}
.kyc-avatar { font-size: 48px; opacity: .9; }

/* ── Timeline ──────────────────────────────────────────────────── */
.kyc-timeline { padding-left: 20px; }
.kyc-timeline-item { display: flex; gap: 12px; margin-bottom: 16px; position: relative; }
.kyc-timeline-item::before {
  content: ''; position: absolute; left: -14px; top: 26px; bottom: -16px;
  width: 2px; background: var(--kyc-border);
}
.kyc-timeline-item:last-child::before { display: none; }
.kyc-timeline-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.kyc-timeline-content { flex: 1; }

/* ── Auto-save indicator ───────────────────────────────────────── */
.kyc-autosave {
  position: fixed; top: 80px; right: 20px; z-index: 9999;
  background: rgba(0,0,0,.75); color: #fff; padding: 6px 14px;
  border-radius: 20px; font-size: 12px;
}

/* ── Main card ─────────────────────────────────────────────────── */
.kyc-main-card { border-radius: var(--kyc-radius) !important; }

/* ── Inline checkbox rows (marital / family / education) ────────── */
.kyc-icr-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  border: 1px solid #999; border-bottom: none; padding: 7px 12px;
  background: #fff; font-size: 14px;
}
.kyc-icr-row:last-of-type { border-bottom: 1px solid #999; }

.kyc-icr-label {
  font-weight: 700; white-space: nowrap; min-width: 170px;
  color: #111; font-size: 13.5px;
}

.kyc-icr-options {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; flex: 1;
}

.kyc-icr-opt {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; user-select: none; font-size: 13.5px; color: #222;
  white-space: nowrap;
}
.kyc-icr-opt input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }

.kyc-icr-box {
  width: 14px; height: 14px; border: 1.5px solid #555;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: #fff; font-size: 11px; font-weight: 900;
  transition: background .15s, border-color .15s;
}
.kyc-icr-opt.checked .kyc-icr-box {
  background: #1a56db; border-color: #1a56db; color: #fff;
}
.kyc-icr-opt.checked .kyc-icr-box::after { content: '✓'; }

.kyc-icr-fill-input {
  border: none; border-bottom: 1px dotted #555; outline: none;
  width: 140px; font-size: 13px; background: transparent;
  padding: 0 2px; margin-left: 4px; color: #333;
}
.kyc-icr-fill-input::placeholder { color: #bbb; }

/* ── Section divider (steps 2–10) ──────────────────────────────── */
.kyc-section-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 12px; font-size: 13px; font-weight: 700; color: var(--kyc-primary);
}
.kyc-section-divider::before,
.kyc-section-divider::after {
  content: ''; flex: 1; height: 2px;
  background: linear-gradient(90deg, var(--kyc-primary), transparent);
}
.kyc-section-divider::after {
  background: linear-gradient(270deg, var(--kyc-primary), transparent);
}
.kyc-section-divider span {
  white-space: nowrap; padding: 0 4px;
}

/* ── Radio pills (marital / family / education) ─────────────────── */
.kyc-radio-group {
  display: flex; flex-wrap: wrap; gap: 10px;
}

.kyc-radio-pill {
  display: flex; align-items: center; gap: 8px;
  border: 2px solid var(--kyc-border); border-radius: 8px; padding: 8px 14px;
  cursor: pointer; transition: all .2s; font-size: 14px; user-select: none;
}
.kyc-radio-pill:hover { border-color: var(--kyc-primary); background: #f0f4ff; }
.kyc-radio-pill.active { border-color: var(--kyc-primary); background: #ebf0ff; color: var(--kyc-primary); font-weight: 600; }
.kyc-radio-pill .kyc-pill-icon { color: var(--kyc-border); transition: color .2s; }
.kyc-radio-pill.active .kyc-pill-icon { color: var(--kyc-primary); }

/* ── Income range pills (step 7) ────────────────────────────────── */
.kyc-income-pill {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--kyc-border); border-radius: 8px; padding: 10px 16px;
  cursor: pointer; transition: all .2s; width: 100%; font-size: 13.5px; user-select: none;
}
.kyc-income-pill:hover { border-color: var(--kyc-primary); background: #f0f4ff; }
.kyc-income-pill.active { border-color: var(--kyc-primary); background: #1a56db; color: #fff; font-weight: 600; }
.kyc-income-pill.active .kyc-pill-icon { color: #fff; }

/* ── Address doc checkboxes (step 9) ────────────────────────────── */
.kyc-addr-doc-check {
  background: #f8f9fa; border: 1px solid var(--kyc-border);
  border-radius: 8px; padding: 8px 12px; transition: background .2s;
}
.kyc-addr-doc-check:has(.form-check-input:checked) {
  background: #ebf0ff; border-color: var(--kyc-primary);
}

/* ── Household members table (step 4) ───────────────────────────── */
.kyc-members-table th { background: var(--kyc-primary); color: #fff; font-size: 12px; }
.kyc-members-table td { vertical-align: middle; }
.kyc-members-table .form-control-sm { font-size: 13px; }

/* ── Occupation table (step 5) ──────────────────────────────────── */
.kyc-occ-table { border-radius: 8px; overflow: hidden; }
.kyc-occ-table thead th { background: var(--kyc-primary); color: #fff; font-size: 12px; }
.kyc-occ-table td { vertical-align: middle; }

/* ── Cooperative table (step 6) ─────────────────────────────────── */
.kyc-coop-table thead th { background: #6c757d; color: #fff; font-size: 12px; }
.kyc-coop-table td { vertical-align: middle; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .kyc-auth-card { padding: 25px; }
  .kyc-form-wrap { max-width: 100%; }
  .kyc-radio-pill, .kyc-income-pill { font-size: 13px; padding: 8px 10px; }
}