/**
 * WITNERS Credit Application Form Styling
 */

.witners-form-container {
	max-width: 960px;
	margin: 40px auto;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(11, 1, 62, 0.08);
	border: 1px solid #e2e8f0;
	padding: 36px 32px;
	font-family: 'Asap', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #1e293b;
	box-sizing: border-box;
}

.witners-form-container * {
	box-sizing: border-box;
}

.witners-form-header {
	border-bottom: 2px solid #0B013E;
	padding-bottom: 24px;
	margin-bottom: 30px;
}

.witners-form-header-badge {
	display: inline-block;
	background-color: #0B013E;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 4px 12px;
	border-radius: 20px;
	margin-bottom: 10px;
}

.witners-form-header h2 {
	font-size: 28px;
	font-weight: 700;
	color: #0B013E;
	margin: 0 0 6px 0;
	line-height: 1.2;
}

.witners-form-subtitle {
	font-size: 14px;
	color: #64748b;
	margin: 0 0 20px 0;
}

/* Guide banner */
.witners-guide-banner {
	display: flex;
	background-color: #f8fafc;
	border-left: 4px solid #0B013E;
	border-radius: 6px;
	padding: 14px 18px;
	gap: 14px;
	font-size: 13px;
	line-height: 1.5;
}

.guide-icon {
	font-size: 20px;
	color: #0B013E;
	font-weight: bold;
}

.guide-text ul {
	margin: 6px 0 0 0;
	padding-left: 0;
	list-style: none;
}

.guide-text li {
	margin-bottom: 4px;
}

.guide-pill {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 4px;
	margin-right: 6px;
	border: 1px solid rgba(0,0,0,0.15);
}

.pill-yellow { background-color: #FFFF8D; color: #333; }
.pill-blue   { background-color: #CFE2FE; color: #084298; }
.pill-peach  { background-color: #FFE0CC; color: #78350f; }
.pill-green  { background-color: #C3E6CB; color: #155724; }

/* Sections */
.wit-section {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 24px;
	margin-bottom: 24px;
	transition: all 0.25s ease;
}

.wit-section-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e2e8f0;
}

.wit-section-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #0B013E;
	color: #fff;
	font-weight: 700;
	font-size: 12px;
}

.wit-section-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #0B013E;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Badge tags */
.wit-badge-yellow, .wit-badge-blue, .wit-badge-peach, .wit-badge-green {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 4px;
}

.wit-badge-yellow { background: #FFFF8D; color: #665c00; }
.wit-badge-blue   { background: #CFE2FE; color: #084298; }
.wit-badge-peach  { background: #FFE0CC; color: #9a3412; }
.wit-badge-green  { background: #C3E6CB; color: #14532d; }

/* Highlight styles when section matches credit type */
.wit-sec-yellow.is-highlighted {
	border-color: #facc15;
	background-color: #fffef2;
	box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.25);
}

.wit-sec-blue.is-highlighted {
	border-color: #93c5fd;
	background-color: #f8faff;
	box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.25);
}

.wit-sec-peach.is-highlighted {
	border-color: #fdba74;
	background-color: #fffbf8;
	box-shadow: 0 0 0 2px rgba(253, 186, 116, 0.25);
}

.wit-sec-green.is-highlighted {
	border-color: #86efac;
	background-color: #f6fdf8;
	box-shadow: 0 0 0 2px rgba(134, 239, 172, 0.25);
}

/* Grid system */
.wit-row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -8px;
	margin-right: -8px;
	margin-bottom: 16px;
}

.wit-row:last-child {
	margin-bottom: 0;
}

.wit-col-12 { flex: 0 0 100%; max-width: 100%; padding: 0 8px; }
.wit-col-6  { flex: 0 0 50%; max-width: 50%; padding: 0 8px; }
.wit-col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; padding: 0 8px; }
.wit-col-3  { flex: 0 0 25%; max-width: 25%; padding: 0 8px; }

/* Labels & inputs */
.wit-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	margin-bottom: 6px;
}

.wit-label.required::after {
	content: " *";
	color: #e11d48;
}

.wit-hint {
	font-weight: normal;
	font-size: 11.5px;
	color: #64748b;
}

.wit-input, .wit-textarea, .wit-select {
	width: 100%;
	padding: 9px 12px;
	font-size: 13.5px;
	color: #1e293b;
	background-color: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	outline: none;
}

.wit-input:focus, .wit-textarea:focus, .wit-select:focus {
	border-color: #0B013E;
	box-shadow: 0 0 0 3px rgba(11, 1, 62, 0.1);
}

.wit-textarea {
	resize: vertical;
	min-height: 50px;
}

.wit-file-input {
	display: block;
	width: 100%;
	font-size: 12.5px;
	color: #475569;
	padding: 6px 0;
}

/* Radio pills */
.wit-radio-pills {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.wit-radio-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	transition: all 0.2s ease;
}

.wit-radio-pill input[type="radio"] {
	margin: 0;
}

.wit-radio-pill.active {
	border-color: #0B013E;
	background: #f1f5f9;
	box-shadow: 0 2px 6px rgba(11, 1, 62, 0.08);
}

.pill-badge {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.wit-radio-group {
	display: flex;
	gap: 20px;
	padding-top: 8px;
	font-size: 14px;
}

.wit-radio-group label {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Contact matrix table */
.wit-matrix-wrapper {
	margin-top: 20px;
	background: #f8fafc;
	padding: 16px;
	border-radius: 6px;
	border: 1px solid #e2e8f0;
}

.wit-matrix-wrapper h4 {
	margin: 0 0 12px 0;
	font-size: 14px;
	font-weight: 700;
	color: #0B013E;
}

.wit-table-responsive {
	overflow-x: auto;
}

.wit-matrix-table {
	width: 100%;
	border-collapse: collapse;
	background: #ffffff;
}

.wit-matrix-table th {
	background: #0B013E;
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	padding: 8px 10px;
	text-align: left;
}

.wit-matrix-table td {
	padding: 6px 8px;
	border: 1px solid #e2e8f0;
	font-size: 12.5px;
}

.wit-matrix-table td.col-dept {
	font-weight: 600;
	width: 22%;
	font-size: 12px;
}

.dept-ops { background-color: #f0f7ff; color: #1e40af; }
.dept-fin { background-color: #fffef0; color: #854d0e; }
.dept-md  { background-color: #f0fdf4; color: #166534; }

.wit-input-sm {
	width: 100%;
	padding: 6px 8px;
	font-size: 12px;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
}

/* Checkbox grid */
.wit-checkbox-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	padding-top: 4px;
	font-size: 12.5px;
}

.wit-checkbox-grid label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.wit-subbox {
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 6px;
	padding: 16px;
	margin-top: 16px;
}

.wit-subbox h4 {
	margin: 0 0 14px 0;
	font-size: 14px;
	font-weight: 700;
	color: #0B013E;
}

.wit-input-group {
	display: flex;
	gap: 8px;
}

/* Actions & Feedback */
.wit-form-actions {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 2px solid #0B013E;
}

.wit-declaration {
	margin-bottom: 20px;
	font-size: 13.5px;
	color: #475569;
}

.wit-declaration label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

.wit-declaration input {
	margin-top: 3px;
}

.wit-btn-submit {
	background-color: #0B013E;
	color: #ffffff;
	border: none;
	padding: 14px 32px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.wit-btn-submit:hover {
	background-color: #1e1270;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(11, 1, 62, 0.2);
}

.wit-btn-submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}

.btn-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid #ffffff;
	border-top-color: transparent;
	border-radius: 50%;
	animation: wit-spin 0.8s linear infinite;
	display: inline-block;
}

@keyframes wit-spin {
	to { transform: rotate(360deg); }
}

/* Feedback alert */
.wit-feedback {
	margin-top: 20px;
	padding: 16px 20px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
}

.wit-feedback-success {
	background-color: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #166534;
}

.wit-feedback-error {
	background-color: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
}

.wit-download-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	background-color: #16a34a;
	color: #ffffff !important;
	text-decoration: none;
	padding: 10px 20px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 13.5px;
	transition: background 0.15s ease;
}

.wit-download-btn:hover {
	background-color: #15803d;
}

/* Responsive */
@media (max-width: 768px) {
	.witners-form-container {
		padding: 20px 16px;
		margin: 20px 12px;
	}
	.wit-col-6, .wit-col-4, .wit-col-3 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.wit-radio-pills {
		grid-template-columns: 1fr;
	}
	.wit-checkbox-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.wit-btn-submit {
		width: 100%;
		justify-content: center;
	}
}

/* ================= UX ENHANCEMENTS ================= */

/* Sticky Form Completion Progress Bar */
.wit-progress-wrapper {
	position: sticky;
	top: 15px;
	z-index: 99;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	border: 1.5px solid #e2e8f0;
	border-radius: 8px;
	padding: 10px 16px;
	margin-bottom: 24px;
	box-shadow: 0 4px 12px rgba(11, 1, 62, 0.05);
	transition: all 0.2s ease;
}

.wit-progress-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12.5px;
	font-weight: 700;
	color: #0B013E;
	margin-bottom: 6px;
}

.wit-progress-badge {
	color: #0284c7;
	font-size: 11.5px;
	font-weight: 600;
}

.wit-progress-track {
	width: 100%;
	height: 6px;
	background: #f1f5f9;
	border-radius: 10px;
	overflow: hidden;
}

.wit-progress-bar-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #E6B00F, #10b981);
	border-radius: 10px;
	transition: width 0.3s ease;
}

/* Auto-Save & Recovery Banner */
.wit-autosave-banner {
	background: #f0fdf4;
	border: 1.5px solid #86efac;
	border-radius: 8px;
	padding: 12px 18px;
	margin-bottom: 20px;
	color: #166534;
	font-size: 13.5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

.wit-autosave-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

.wit-btn-restore {
	background: #16a34a;
	color: #ffffff;
	border: none;
	padding: 6px 14px;
	border-radius: 4px;
	font-size: 12.5px;
	font-weight: bold;
	cursor: pointer;
}

.wit-btn-dismiss {
	background: transparent;
	color: #64748b;
	border: 1px solid #cbd5e1;
	padding: 5px 12px;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
}

/* "Same as Key Contact" 1-Click Copy Buttons */
.wit-copy-contact-btn {
	background: #f1f5f9;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	color: #0B013E;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	margin-top: 4px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: all 0.15s ease;
}

.wit-copy-contact-btn:hover {
	background: #e2e8f0;
	color: #0B013E;
}

.wit-copy-contact-btn.copied {
	background: #dcfce7;
	color: #166534;
	border-color: #86efac;
}

/* Collapsible Skipped Sections */
.wit-section.is-collapsed .wit-section-body {
	display: none;
}

.wit-section-skipped-banner {
	background: #f8fafc;
	border: 1.5px dashed #cbd5e1;
	border-radius: 6px;
	padding: 12px 18px;
	margin-top: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: #64748b;
}

.wit-skipped-toggle-btn {
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	color: #0B013E;
	cursor: pointer;
}

/* Modern Drag & Drop File Upload Zones */
.wit-dropzone {
	border: 2px dashed #cbd5e1;
	border-radius: 8px;
	padding: 18px;
	text-align: center;
	background: #f8fafc;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
	min-height: 95px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.wit-dropzone:hover {
	border-color: #0B013E;
	background: #f1f5f9;
}

.wit-dropzone.dragover {
	border-color: #2563eb;
	background: #eff6ff;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.wit-dropzone-icon {
	font-size: 24px;
	color: #64748b;
	margin-bottom: 4px;
}

.wit-dropzone-text {
	font-size: 13px;
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 2px;
}

.wit-dropzone-sub {
	font-size: 11.5px;
	color: #64748b;
}

.wit-dropzone-preview {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 8px 12px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	font-size: 12.5px;
}

.wit-dropzone-preview-info {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wit-dropzone-remove {
	color: #dc2626;
	cursor: pointer;
	font-weight: bold;
	font-size: 15px;
	padding: 0 4px;
}

/* ================= VALIDATION ERROR STATES & MISSING FIELDS UX ================= */
.wit-input.wit-input-error,
.wit-textarea.wit-input-error,
.wit-select.wit-input-error {
	border-color: #ef4444 !important;
	background-color: #fff5f5 !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}

.wit-dropzone.wit-dropzone-error {
	border-color: #ef4444 !important;
	background-color: #fff5f5 !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.wit-declaration.wit-declaration-error {
	border: 1.5px solid #ef4444 !important;
	background-color: #fff5f5 !important;
	border-radius: 6px;
	padding: 10px 14px;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.wit-field-error {
	color: #dc2626;
	font-size: 11.5px;
	font-weight: 600;
	margin-top: 5px;
	display: flex;
	align-items: center;
	gap: 5px;
	animation: witFadeIn 0.2s ease-in-out;
}

@keyframes witFadeIn {
	from { opacity: 0; transform: translateY(-3px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes witShake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-6px); }
	40%, 80% { transform: translateX(6px); }
}

.wit-shake {
	animation: witShake 0.4s ease-in-out;
}

@keyframes witPulseHighlight {
	0% { background-color: #fef08a; box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.4); }
	50% { background-color: #fef9c3; box-shadow: 0 0 0 6px rgba(234, 179, 8, 0.2); }
	100% { background-color: transparent; box-shadow: none; }
}

.wit-pulse-target {
	animation: witPulseHighlight 2s ease-out;
	border-radius: 6px;
}

/* Missing Fields Interactive Summary Card */
.wit-missing-summary-card {
	background: #ffffff;
	border: 1.5px solid #f87171;
	border-left: 5px solid #dc2626;
	border-radius: 8px;
	padding: 16px 18px;
	margin-bottom: 20px;
	box-shadow: 0 4px 12px rgba(220, 38, 38, 0.1);
	animation: witFadeIn 0.3s ease-out;
}

.wit-missing-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.wit-missing-title {
	font-size: 14.5px;
	font-weight: 700;
	color: #991b1b;
	display: flex;
	align-items: center;
	gap: 8px;
}

.wit-missing-subtitle {
	font-size: 12.5px;
	color: #7f1d1d;
	margin: 0 0 10px 0;
}

.wit-missing-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.wit-missing-pill-btn {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fca5a5;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.15s ease;
}

.wit-missing-pill-btn:hover {
	background: #dc2626;
	color: #ffffff;
	border-color: #dc2626;
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}

.wit-missing-pill-icon {
	font-size: 13px;
}

/* Section Header Alert Badge */
.wit-section-alert-badge {
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 12px;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #fee2e2;
	color: #b91c1c;
	border: 1px solid #fca5a5;
}