/* Zintra KYC — Frontend CSS */
.zkyc-wrap { max-width: 680px; font-family: 'Urbanist', sans-serif; }

/* Header */
.zkyc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.zkyc-header__title { font-size: 20px; font-weight: 800; color: #111; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.zkyc-header__sub { font-size: 14px; color: #666; margin: 0; }

/* Badges */
.zkyc-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; }
.zkyc-badge--green { background: #eaf5ee; color: #207943; border: 1px solid #b8dfc6; }
.zkyc-badge--amber { background: #fff8e8; color: #9a6700; border: 1px solid #f5d78e; }
.zkyc-badge--red   { background: #fff0f0; color: #c0392b; border: 1px solid #f5c6cb; }
.zkyc-badge--grey  { background: #f0f0f0; color: #666;    border: 1px solid #ddd; }
.zkyc-badge--blue  { background: #e8f4ff; color: #1a6fa8; border: 1px solid #b3d4f0; }
.zkyc-badge--lg { font-size: 13px; padding: 5px 14px; }

/* Progress */
.zkyc-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.zkyc-progress__bar { flex: 1; height: 6px; background: #e8e8e8; border-radius: 3px; overflow: hidden; }
.zkyc-progress__fill { height: 100%; background: #207943; border-radius: 3px; transition: width .4s ease; }
.zkyc-progress__label { font-size: 12px; font-weight: 700; color: #207943; white-space: nowrap; }

/* Steps nav */
.zkyc-steps { display: flex; gap: 0; margin-bottom: 28px; border: 2px solid #e8e8e8; border-radius: 8px; overflow: hidden; }
.zkyc-step { flex: 1; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 13px; font-weight: 600; color: #999; background: #f7f7f7; border-right: 1px solid #e8e8e8; }
.zkyc-step:last-child { border-right: none; }
.zkyc-step--active { background: #fff; color: #207943; }
.zkyc-step--done { background: #eaf5ee; color: #207943; }
.zkyc-step--locked { color: #ccc; }
.zkyc-step__num { width: 22px; height: 22px; border-radius: 50%; background: #e8e8e8; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.zkyc-step--active .zkyc-step__num { background: #207943; color: #fff; }
.zkyc-step--done .zkyc-step__num { background: #207943; color: #fff; }
.zkyc-step__label { white-space: nowrap; }

/* Panels */
.zkyc-panel { display: none; background: #fff; border: 2px solid #e8e8e8; border-radius: 8px; padding: 24px; }
.zkyc-panel.active { display: block; }
.zkyc-panel__title { font-size: 16px; font-weight: 800; color: #111; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.zkyc-panel__desc { font-size: 14px; color: #666; margin-bottom: 20px; line-height: 1.65; }

/* Form elements */
.zkyc-form-group { margin-bottom: 16px; }
.zkyc-label { display: block; font-size: 13px; font-weight: 700; color: #111; margin-bottom: 6px; }
.zkyc-input { height: 46px; border: 2px solid #e8e8e8; border-radius: 4px; padding: 0 14px; font-family: inherit; font-size: 14px; color: #111; width: 100%; outline: none; transition: border-color .2s; }
.zkyc-input:focus { border-color: #207943; }
.zkyc-input--otp { letter-spacing: .2em; font-size: 20px; font-weight: 700; text-align: center; max-width: 180px; }
.zkyc-hint { font-size: 12px; color: #999; margin: 6px 0 0; }
.zkyc-phone-row { display: flex; gap: 8px; }
.zkyc-phone-row .zkyc-input { flex: 1; }
.zkyc-otp-row { display: flex; gap: 8px; align-items: center; }

/* Buttons */
.zkyc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 4px; padding: 11px 22px; border: 2px solid transparent; cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.zkyc-btn--primary { background: #207943; color: #fff; border-color: #207943; }
.zkyc-btn--primary:hover { background: #185f34; border-color: #185f34; }
.zkyc-btn--secondary { background: #111; color: #fff; border-color: #111; }
.zkyc-btn--secondary:hover { background: #333; }
.zkyc-btn--large { width: 100%; padding: 14px 22px; font-size: 14px; }
.zkyc-btn:disabled { opacity: .6; cursor: wait; }

/* Notices */
.zkyc-notice { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; }
.zkyc-notice--success { background: #eaf5ee; color: #207943; border: 1px solid #b8dfc6; }
.zkyc-notice--warn    { background: #fff8e8; color: #9a6700; border: 1px solid #f5d78e; }
.zkyc-notice--error   { background: #fff0f0; color: #c0392b; border: 1px solid #f5c6cb; }
.zkyc-notice--info    { background: #e8f4ff; color: #1a6fa8; border: 1px solid #b3d4f0; }
.zkyc-notice p { margin: 4px 0 0; font-size: 13px; }
.zkyc-error { color: #c0392b; font-size: 13px; padding: 8px 0; }

/* ID info grid */
.zkyc-id-info { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; padding: 16px; background: #f7f7f7; border-radius: 6px; }
.zkyc-id-info__item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #555; }

/* Upload area */
.zkyc-upload-area { border: 2px dashed #ccc; border-radius: 8px; padding: 36px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.zkyc-upload-area:hover, .zkyc-upload-area.drag-over { border-color: #207943; background: #eaf5ee; }
.zkyc-upload-area svg { margin: 0 auto 10px; color: #999; display: block; }
.zkyc-upload-area p { font-size: 14px; color: #666; margin: 0 0 4px; }
.zkyc-upload-label { color: #207943; cursor: pointer; font-weight: 700; }

/* Complete state */
.zkyc-complete { text-align: center; padding: 48px 24px; }
.zkyc-complete__icon { width: 72px; height: 72px; background: #eaf5ee; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.zkyc-complete h3 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.zkyc-complete p { color: #666; font-size: 15px; }

@media (max-width: 640px) {
	.zkyc-steps { flex-direction: column; }
	.zkyc-step { border-right: none; border-bottom: 1px solid #e8e8e8; }
	.zkyc-step:last-child { border-bottom: none; }
	.zkyc-header { flex-direction: column; }
	.zkyc-phone-row { flex-direction: column; }
	.zkyc-otp-row { flex-direction: column; align-items: flex-start; }
}