@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Core Variables & Styles */
.financial-wizard-wrapper {
	font-family: 'Poppins', sans-serif !important;
	color: #333;
	line-height: 1.6;
	box-sizing: border-box;
}

.financial-wizard-wrapper *,
.financial-wizard-wrapper *::before,
.financial-wizard-wrapper *::after {
	box-sizing: inherit;
}

/* Card layout */
.financial-wizard-card {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	padding: 40px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
	margin-bottom: 30px;
}

.financial-wizard-card h2 {
	font-weight: 600;
	font-size: 26px;
	color: var(--primary-color);
	margin-top: 0;
	margin-bottom: 8px;
}

.financial-step-desc {
	font-size: 14px;
	color: #666;
	margin-top: 0;
	margin-bottom: 25px;
}

/* Form inputs & controls */
.financial-form-group {
	margin-bottom: 20px;
}

.financial-form-group label {
	display: block;
	font-weight: 600;
	font-size: 15px;
	color: #333;
	margin-bottom: 6px;
}

/* Tighter boxes, larger text. 16px is also the threshold below which iOS
   zooms the page on focus, which made the old form jump about on phones. */
.financial-form-group input[type="text"],
.financial-form-group input[type="email"],
.financial-form-group input[type="tel"],
.financial-form-group input[type="password"],
.financial-form-group input[type="number"],
.financial-form-group select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-family: inherit;
	font-size: 16px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	background: #fafafa;
}

.financial-form-group input:focus,
.financial-form-group select:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(3, 37, 75, 0.08);
	background: #fff;
}

.financial-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

@media (max-width: 768px) {
	.financial-form-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.financial-form-group-checkbox {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	gap: 10px;
}

.financial-form-group-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.financial-form-group-checkbox label {
	font-size: 13px;
	font-weight: 500;
	color: #444;
	cursor: pointer;
}

.required {
	color: #e60000;
	font-weight: bold;
}

/* Buttons */
.financial-btn {
	display: inline-block;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	padding: 12px 24px;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.1s ease;
	text-decoration: none;
	text-align: center;
}

body .financial-wizard-wrapper .financial-btn-primary,
body .financial-wizard-wrapper a.financial-btn-primary,
body .financial-wizard-wrapper button.financial-btn-primary,
body .financial-wizard-wrapper input[type="button"].financial-btn-primary,
body .financial-wizard-wrapper input[type="submit"].financial-btn-primary,
.financial-wizard-wrapper .financial-btn-primary,
.financial-btn-primary {
	background: var(--btn-primary-bg, var(--secondary-color)) !important;
	color: var(--btn-primary-text, #ffffff) !important;
}

body .financial-wizard-wrapper .financial-btn-primary:hover,
body .financial-wizard-wrapper a.financial-btn-primary:hover,
body .financial-wizard-wrapper button.financial-btn-primary:hover,
body .financial-wizard-wrapper input[type="button"].financial-btn-primary:hover,
body .financial-wizard-wrapper input[type="submit"].financial-btn-primary:hover,
.financial-wizard-wrapper .financial-btn-primary:hover,
.financial-btn-primary:hover {
	background: var(--btn-primary-hover-bg, #cc0000) !important;
	color: var(--btn-primary-text, #ffffff) !important;
}

body .financial-wizard-wrapper .financial-btn-secondary,
body .financial-wizard-wrapper a.financial-btn-secondary,
body .financial-wizard-wrapper button.financial-btn-secondary,
body .financial-wizard-wrapper input[type="button"].financial-btn-secondary,
body .financial-wizard-wrapper input[type="submit"].financial-btn-secondary,
.financial-wizard-wrapper .financial-btn-secondary,
.financial-btn-secondary {
	background: var(--btn-secondary-bg, #f1f5f9) !important;
	color: var(--btn-secondary-text, #475569) !important;
	border: 1.5px solid #cbd5e1 !important;
}

body .financial-wizard-wrapper .financial-btn-secondary:hover,
body .financial-wizard-wrapper a.financial-btn-secondary:hover,
body .financial-wizard-wrapper button.financial-btn-secondary:hover,
body .financial-wizard-wrapper input[type="button"].financial-btn-secondary:hover,
body .financial-wizard-wrapper input[type="submit"].financial-btn-secondary:hover,
.financial-wizard-wrapper .financial-btn-secondary:hover,
.financial-btn-secondary:hover {
	background: var(--btn-secondary-hover-bg, #e2e8f0) !important;
	color: var(--btn-secondary-text, #475569) !important;
}

/* Specific Dashboard Button Overrides to prevent theme overrides */
body #financial-dashboard-container .financial-btn-primary,
body #financial-dashboard-container a.financial-btn-primary,
body #financial-dashboard-container button.financial-btn-primary,
#financial-dashboard-container .financial-btn-primary {
	background: var(--dash-btn-bg, var(--btn-primary-bg)) !important;
	color: var(--dash-btn-text, var(--btn-primary-text)) !important;
}

body #financial-dashboard-container .financial-btn-primary:hover,
body #financial-dashboard-container a.financial-btn-primary:hover,
body #financial-dashboard-container button.financial-btn-primary:hover,
#financial-dashboard-container .financial-btn-primary:hover {
	background: var(--dash-btn-hover-bg, var(--btn-primary-hover-bg)) !important;
	color: var(--dash-btn-text, var(--btn-primary-text)) !important;
}

body #financial-dashboard-container .financial-btn-secondary,
body #financial-dashboard-container a.financial-btn-secondary,
body #financial-dashboard-container button.financial-btn-secondary,
#financial-dashboard-container .financial-btn-secondary {
	background: var(--dash-btn-sec-bg, var(--btn-secondary-bg)) !important;
	color: var(--dash-btn-sec-text, var(--btn-secondary-text)) !important;
	border: 1.5px solid #cbd5e1 !important;
}

body #financial-dashboard-container .financial-btn-secondary:hover,
body #financial-dashboard-container a.financial-btn-secondary:hover,
body #financial-dashboard-container button.financial-btn-secondary:hover,
#financial-dashboard-container .financial-btn-secondary:hover {
	background: var(--dash-btn-sec-hover-bg, var(--btn-secondary-hover-bg)) !important;
	color: var(--dash-btn-sec-text, var(--btn-secondary-text)) !important;
}

.financial-btn:active {
	transform: scale(0.98);
}

/* Progress bar indicator */
.financial-progress-container {
	margin-bottom: 30px;
}

.financial-progressbar {
	counter-reset: step;
	padding: 0;
	display: flex;
	justify-content: space-between;
	list-style: none;
	position: relative;
}

.financial-progressbar li {
	flex: 1;
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	color: #aaa;
	position: relative;
}

.financial-progressbar li::before {
	content: counter(step);
	counter-increment: step;
	width: 30px;
	height: 30px;
	line-height: 28px;
	border: 2px solid #ccc;
	display: block;
	text-align: center;
	margin: 0 auto 10px auto;
	border-radius: 50%;
	background-color: #fff;
	font-weight: bold;
	color: #ccc;
	transition: all 0.2s ease;
	position: relative;
	z-index: 2;
}

.financial-progressbar li::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: #ccc;
	top: 15px;
	left: -50%;
	z-index: 1;
	transition: all 0.2s ease;
}

.financial-progressbar li:first-child::after {
	content: none;
}

.financial-progressbar li.active {
	color: var(--primary-color);
}

.financial-progressbar li.active::before {
	border-color: var(--primary-color);
	color: var(--primary-color);
	background-color: #fff;
}

.financial-progressbar li.completed {
	color: var(--secondary-color);
}

.financial-progressbar li.completed::before {
	border-color: var(--secondary-color);
	background-color: var(--secondary-color);
	color: #fff;
}

.financial-progressbar li.completed::after {
	background-color: var(--secondary-color);
}

/* Steps visible management */
.financial-wizard-step {
	display: none;
}

/* Term buttons */
.term-btn {
	transition: all 0.2s ease;
}
.term-btn:hover {
	border-color: var(--primary-color) !important;
	background-color: rgba(0, 0, 0, 0.02);
}
.term-btn.active {
	background-color: var(--primary-color) !important;
	color: #fff !important;
	border-color: var(--primary-color) !important;
}

.financial-wizard-step.active-step {
	display: block;
	animation: fadeIn 0.4s ease;
}

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

/* Dropzone document uploads */
.financial-upload-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.financial-dropzone-container {
	background: #fff;
	border: 1px solid #e1e1e1;
	border-radius: 8px;
	padding: 15px;
	transition: transform 0.2s, box-shadow 0.2s;
}

.financial-dropzone-container:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.financial-dropzone-container label {
	font-weight: 600;
	font-size: 13px;
	color: var(--primary-color);
	margin-bottom: 8px;
	display: block;
}

.financial-dropzone {
	border: 2px dashed var(--secondary-color);
	border-radius: 6px;
	background: #fafafa;
	padding: 25px 15px;
	text-align: center;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: #666;
	font-size: 12px;
	font-weight: 500;
	transition: background-color 0.2s, border-color 0.2s;
}

.financial-dropzone i {
	font-size: 24px;
	color: #bbb;
}

.financial-dropzone.dragover {
	border-color: var(--primary-color);
	background-color: #f1f6fa;
}

.financial-dropzone.file-selected {
	border-color: #28a745;
	background-color: #f4faf5;
}

/* Tables */
.financial-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 15px;
}

.financial-table th,
.financial-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid #dee2e6;
}

.financial-table th {
	background-color: #f8f9fa;
	font-weight: 600;
	color: #495057;
}

/* Alerts */
.financial-alert {
	padding: 12px 18px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
}

.financial-alert-error {
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.financial-alert-success {
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.financial-alert-info {
	background-color: #d1ecf1;
	color: #0c5460;
	border: 1px solid #bee5eb;
}

/* Success screen */
.financial-success-screen {
	text-align: center;
	padding: 30px 10px;
}

.financial-success-icon {
	color: #28a745;
	margin-bottom: 20px;
}

.financial-success-icon i {
	font-size: 80px;
	width: 80px;
	height: 80px;
}

.financial-loan-number-box {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	padding: 15px;
	border-radius: 6px;
	display: inline-block;
	margin-top: 15px;
}

.financial-loan-number-box strong {
	color: var(--secondary-color);
	font-size: 18px;
}

/* Accordion sections in dashboard & complete dashboard layout styling */
.financial-dashboard-layout {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: 24px;
	margin-top: 10px;
	align-items: start;
}

@media (max-width: 991px) {
	.financial-dashboard-layout {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* Dashboard Hero Banner */
.financial-dashboard-hero {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
	color: #ffffff;
	padding: 40px;
	border-radius: 16px;
	margin-bottom: 25px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.financial-dashboard-hero-content {
	position: relative;
	z-index: 2;
}

.financial-dashboard-hero-badge {
	display: inline-block;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	color: #ffffff;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	padding: 5px 12px;
	border-radius: 50px;
	font-weight: 600;
	margin-bottom: 15px;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.financial-dashboard-hero-content h2 {
	color: #ffffff !important;
	font-weight: 700;
	font-size: 32px;
	margin: 0 0 10px;
	line-height: 1.2;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.financial-dashboard-hero-content p {
	color: rgba(255, 255, 255, 0.9);
	font-size: 14px;
	margin: 0;
	max-width: 600px;
	line-height: 1.6;
}

.financial-dashboard-hero-decor {
	position: absolute;
	top: -50%;
	right: -10%;
	width: 350px;
	height: 350px;
	background: rgba(255, 255, 255, 0.07);
	border-radius: 50%;
	filter: blur(40px);
	pointer-events: none;
}

/* Glassmorphic Dashboard Cards */
.financial-dashboard-card {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 16px;
	padding: 30px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.02);
	margin-bottom: 24px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.financial-dashboard-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.financial-card-header {
	margin-bottom: 20px;
	border-bottom: 1.5px solid rgba(0, 0, 0, 0.05);
	padding-bottom: 15px;
}

.financial-card-header h3 {
	font-size: 18px;
	font-weight: 600;
	color: var(--primary-color) !important;
	margin: 0 !important;
	display: flex;
	align-items: center;
	gap: 10px;
}

.financial-card-header h3 i {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: var(--secondary-color);
	margin: 0;
}

/* Loan Details List */
.financial-details-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

.financial-detail-item {
	background: #f8fafc;
	padding: 15px;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.02);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.financial-detail-label {
	font-size: 11px;
	text-transform: uppercase;
	color: #64748b;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.financial-detail-value {
	font-size: 15px;
	font-weight: 600;
	color: #1e293b;
}

.financial-detail-value code {
	background: #e2e8f0;
	color: #0f172a;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 13px;
	font-family: monospace;
}

.font-primary-accent {
	color: var(--primary-color) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
}

/* OTP Activation Box */
.financial-otp-activation-box {
	background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
	border: 1px solid #fde68a;
	border-radius: 12px;
	padding: 20px;
	margin-top: 25px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.financial-otp-header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.financial-otp-header i {
	font-size: 24px;
	color: #d97706;
	width: 24px;
	height: 24px;
	margin-top: 2px;
}

.financial-otp-header h4 {
	margin: 0 0 4px;
	color: #92400e;
	font-size: 15px;
	font-weight: 600;
}

.financial-otp-header p {
	margin: 0;
	color: #b45309;
	font-size: 12px;
	line-height: 1.5;
}

.financial-otp-input-group {
	display: flex;
	gap: 10px;
	max-width: 360px;
}

.financial-otp-input-group input {
	flex: 1;
	padding: 10px 14px;
	border: 1.5px solid #fcd34d;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	letter-spacing: 2px;
	text-transform: uppercase;
	background: #ffffff;
	outline: none;
	transition: border-color 0.2s;
}

.financial-otp-input-group input:focus {
	border-color: #d97706;
	box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

.financial-otp-input-group button {
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 8px;
}

/* Badges */
.financial-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: 600;
	text-align: center;
}

body .financial-wizard-wrapper .financial-badge-success,
body .financial-wizard-wrapper span.financial-badge-success,
.financial-wizard-wrapper .financial-badge-success,
.financial-badge-success {
	background-color: var(--badge-success-bg, #d1fae5) !important;
	color: var(--badge-success-text, #065f46) !important;
}

body .financial-wizard-wrapper .financial-badge-warning,
body .financial-wizard-wrapper span.financial-badge-warning,
.financial-wizard-wrapper .financial-badge-warning,
.financial-badge-warning {
	background-color: var(--badge-pending-bg, #fef3c7) !important;
	color: var(--badge-pending-text, #92400e) !important;
}

body .financial-wizard-wrapper .financial-badge-danger,
body .financial-wizard-wrapper span.financial-badge-danger,
.financial-wizard-wrapper .financial-badge-danger,
.financial-badge-danger {
	background-color: var(--badge-error-bg, #fee2e2) !important;
	color: var(--badge-error-text, #991b1b) !important;
}

.financial-badge-info {
	background-color: #e0f2fe;
	color: #075985;
}

/* Document List Table */
.financial-table-responsive {
	width: 100%;
	overflow-x: auto;
	margin-bottom: 25px;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.financial-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 0 !important;
}

.financial-table th {
	background: #f8fafc;
	color: #475569;
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 12px 16px;
	border-bottom: 1.5px solid rgba(0, 0, 0, 0.05);
}

.financial-table td {
	padding: 12px 16px;
	font-size: 13px;
	color: #334155;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
	vertical-align: middle;
}

.financial-table tr:last-child td {
	border-bottom: none;
}

.financial-table tr:hover td {
	background-color: #f8fafc;
}

.financial-doc-type strong {
	font-weight: 600;
	color: #0f172a;
}

.financial-doc-link {
	white-space: nowrap;
}

.financial-link-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--primary-color);
	text-decoration: none !important;
	transition: opacity 0.2s;
}

.financial-link-btn:hover {
	opacity: 0.8;
	text-decoration: underline !important;
}

.financial-link-btn i {
	font-size: 15px;
	width: 15px;
	height: 15px;
	margin: 0;
	color: var(--primary-color);
}

.financial-table-empty {
	text-align: center;
	color: #94a3b8;
	padding: 30px !important;
	font-style: italic;
}

/* Missing Documents Uploader Box */
.financial-supplemental-upload-box {
	background: #f8fafc;
	border: 1.5px dashed #cbd5e1;
	padding: 25px;
	border-radius: 12px;
	margin-top: 20px;
}

.financial-supplemental-upload-box h4 {
	font-size: 15px;
	font-weight: 600;
	color: #1e293b;
	margin: 0 0 6px;
}

.financial-upload-subtext {
	font-size: 12px;
	color: #64748b;
	margin: 0 0 20px;
}

.financial-uploader-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	margin-bottom: 20px;
}

@media (max-width: 600px) {
	.financial-uploader-fields {
		grid-template-columns: 1fr;
	}
}

/* Custom File Input Wrapper */
.financial-custom-file-input {
	position: relative;
	overflow: hidden;
	display: block;
	width: 100%;
}

.financial-custom-file-input input[type="file"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

.financial-file-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid #cbd5e1;
	border-radius: 8px;
	background: #ffffff;
	color: #64748b;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
	font-size: 13px;
	font-weight: 500;
}

.financial-custom-file-input:hover .financial-file-trigger {
	border-color: var(--secondary-color);
	background: #fafafa;
}

.financial-file-trigger i {
	font-size: 18px;
	width: 18px;
	height: 18px;
	color: #94a3b8;
	transition: color 0.2s;
	margin: 0;
}

.financial-custom-file-input:hover .financial-file-trigger i {
	color: var(--secondary-color);
}

.file-trigger-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	max-width: calc(100% - 26px);
}

/* Custom select dropdown styling */
.financial-select-wrapper {
	position: relative;
	display: block;
	width: 100%;
}

.financial-select-wrapper select {
	width: 100%;
	padding: 12px 16px;
	padding-right: 40px;
	border: 1.5px solid #cbd5e1;
	border-radius: 8px;
	background: #ffffff;
	font-size: 13px;
	font-weight: 500;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
	color: #334155;
	cursor: pointer;
}

.financial-select-wrapper::after {
	content: "\f347";
	font-family: dashicons;
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	pointer-events: none;
	color: #94a3b8;
	font-size: 16px;
	transition: color 0.2s;
}

.financial-select-wrapper:hover::after {
	color: var(--primary-color);
}

.financial-select-wrapper select:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(3, 37, 75, 0.08);
}

/* Form styling updates. Labels read as sentence case at a comfortable size —
   the old uppercase 12px was hard going on a phone. */
.financial-form-group label {
	font-size: 15px;
	font-weight: 600;
	color: #334155;
	margin-bottom: 5px;
	text-transform: none;
	letter-spacing: 0;
}

/* Selects need the same treatment as the text inputs. */
.financial-select-wrapper select,
.financial-form-group select {
	padding: 9px 12px !important;
	font-size: 16px !important;
}

/* Tighter vertical rhythm now that the boxes are shorter. */
.financial-wizard-wrapper .financial-form-group {
	margin-bottom: 15px;
}

.financial-form-group input[type="text"],
.financial-form-group input[type="email"],
.financial-form-group input[type="tel"],
.financial-form-group input[type="number"] {
	padding: 9px 12px;
	border: 1.5px solid #cbd5e1;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 500;
	background: #ffffff;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
	color: #334155;
	width: 100%;
}

.financial-form-group input:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(3, 37, 75, 0.08);
}

.financial-input-readonly {
	background: #f1f5f9 !important;
	border-color: #cbd5e1 !important;
	color: #64748b !important;
	cursor: not-allowed;
}

/* Accordion sections in dashboard */
.financial-accordion-section {
	border: 1px solid #cbd5e1;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 15px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
	background: #ffffff;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.financial-accordion-section:hover {
	border-color: #94a3b8;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.financial-accordion-toggle {
	background: #f8fafc;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	user-select: none;
	transition: background 0.2s;
	margin: 0 !important;
	border-bottom: none;
}

.financial-accordion-toggle:hover {
	background: #f1f5f9;
}

.financial-accordion-toggle span {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
}

.financial-accordion-toggle span i {
	font-size: 18px;
	color: var(--primary-color);
	opacity: 0.85;
	margin: 0;
}

.financial-accordion-toggle .financial-arrow {
	font-size: 16px;
	color: #64748b;
	transition: transform 0.20s ease;
	margin: 0;
}

.financial-accordion-content {
	padding: 20px;
	border-top: 1px solid #cbd5e1;
	background: #ffffff;
}

/* Autocomplete Search Box Styling */
.financial-search-input-wrapper {
	position: relative;
	display: block;
	width: 100%;
}

.financial-search-input-wrapper input {
	padding-right: 40px !important;
}

.financial-search-input-wrapper .search-icon {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: #94a3b8;
	font-size: 18px;
	pointer-events: none;
}

.financial-search-results-list {
	border: 1.5px solid #cbd5e1;
	border-radius: 8px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	max-height: 220px;
	overflow-y: auto;
	background: #ffffff;
	margin-top: 5px;
	list-style: none;
	padding: 0;
	z-index: 100;
	position: absolute;
	width: 100%;
}

.financial-employer-item {
	padding: 12px 16px;
	border-bottom: 1px solid #edf2f7;
	cursor: pointer;
	transition: background 0.2s;
	font-size: 13px;
	color: #334155;
}

.financial-employer-item:hover {
	background: #f8fafc;
}

.financial-employer-item strong {
	color: #0f172a;
	display: block;
}

.financial-employer-item small {
	color: #64748b;
	display: block;
	margin-top: 2px;
}

#dashboard-create-employer-shortcut {
	padding: 12px 16px;
	font-weight: 600;
	cursor: pointer;
	font-size: 13px;
	transition: background 0.2s;
	border-top: 1.5px solid #edf2f7;
}

#dashboard-create-employer-shortcut:hover {
	background: #f1f5f9;
}

.financial-selected-employer-badge {
	font-size: 11px;
	margin-top: 8px;
	color: #475569;
	display: flex;
	align-items: center;
	gap: 6px;
}

.financial-selected-employer-badge code {
	background: #e2e8f0;
	color: #0f172a;
	padding: 2px 6px;
	border-radius: 4px;
	font-weight: 600;
	font-family: monospace;
}

/* Button enhancements */
.financial-btn {
	border-radius: 8px;
	padding: 12px 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: all 0.2s ease;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	text-align: center;
}

.financial-btn i {
	font-size: 16px;
	width: 16px;
	height: 16px;
	margin: 0;
}

.financial-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	filter: brightness(0.92);
}

.financial-btn:active {
	transform: translateY(0);
	box-shadow: none;
}


/* No active loans notice */
.financial-no-loans-box {
	text-align: center;
	padding: 40px 20px;
	color: #64748b;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

.financial-no-loans-box p {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
}

/* Modal Styling */
.financial-modal {
	position: fixed;
	z-index: 100000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: none;
	align-items: center;
	justify-content: center;
}

.financial-modal-content {
	background-color: #ffffff;
	padding: 30px;
	border-radius: 16px;
	width: 90%;
	max-width: 450px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	position: relative;
	animation: financialModalScaleIn 0.3s ease;
}

.financial-modal-close {
	position: absolute;
	top: 15px;
	right: 20px;
	color: #94a3b8;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
	transition: color 0.2s;
	line-height: 1;
}

.financial-modal-close:hover,
.financial-modal-close:focus {
	color: var(--secondary-color);
}

@keyframes financialModalScaleIn {
	from { transform: scale(0.9); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   LOAN CALCULATOR STYLES
   ========================================================================== */

#financial-loan-calculator-card {
	max-width: 480px !important;
	margin: 20px auto !important;
	padding: 35px !important;
	border-radius: 16px !important;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
	border: 1px solid rgba(0, 0, 0, 0.05) !important;
	background-color: #ffffff !important;
	font-family: inherit !important;
	box-sizing: border-box !important;
}

#financial-loan-calculator-card * {
	box-sizing: border-box !important;
}

#financial-loan-calculator-card .calc-section {
	margin-bottom: 25px !important;
}

#financial-loan-calculator-card .calc-section:last-of-type {
	margin-bottom: 0 !important;
}

#financial-loan-calculator-card .calc-label {
	display: block !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	margin-bottom: 12px !important;
	text-align: left !important;
}

#financial-loan-calculator-card .slider-container {
	width: 100% !important;
	margin-bottom: 15px !important;
}

/* Range input element track reset and styles */
#financial-loan-calculator-card input[type=range] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	width: 100% !important;
	height: 8px !important;
	border-radius: 4px !important;
	outline: none !important;
	background: #e2e8f0 !important; /* default track color, overridden in JS */
	margin: 15px 0 !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
}

#financial-loan-calculator-card input[type=range]::-webkit-slider-runnable-track {
	background: transparent !important;
	border: none !important;
	height: 8px !important;
	box-shadow: none !important;
}

#financial-loan-calculator-card input[type=range]::-moz-range-track {
	background: transparent !important;
	border: none !important;
	height: 8px !important;
	box-shadow: none !important;
}

/* Custom circular thumb styling */
#financial-loan-calculator-card input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	border: 3px solid #ffffff !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
	cursor: pointer !important;
	margin-top: -8px !important; /* center on 8px track */
	transition: transform 0.1s ease !important;
}

#financial-loan-calculator-card input[type=range]::-moz-range-thumb {
	width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	border: 3px solid #ffffff !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	transition: transform 0.1s ease !important;
}

#financial-loan-calculator-card input[type=range]::-webkit-slider-thumb:hover {
	transform: scale(1.15) !important;
}

#financial-loan-calculator-card input[type=range]::-moz-range-thumb:hover {
	transform: scale(1.15) !important;
}

#financial-loan-calculator-card .selected-amount-box {
	text-align: center !important;
	margin-top: 15px !important;
}

#financial-loan-calculator-card .selected-amount-value {
	display: inline-block !important;
	background: #f8fafc !important;
	padding: 10px 24px !important;
	border-radius: 30px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	border: 1px solid rgba(0, 0, 0, 0.05) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
}

#financial-loan-calculator-card .selected-amount-value strong {
	font-weight: 700 !important;
	font-size: 18px !important;
	margin-left: 5px !important;
}

#financial-loan-calculator-card .calc-divider {
	border: 0 !important;
	height: 1px !important;
	background: rgba(0, 0, 0, 0.08) !important;
	margin: 25px 0 !important;
}

#financial-loan-calculator-card .calc-terms-btn-group {
	display: flex !important;
	gap: 10px !important;
	width: 100% !important;
	justify-content: space-between !important;
}

#financial-loan-calculator-card .calc-term-btn {
	flex: 1 !important;
	border: 1.5px solid transparent !important;
	padding: 11px 5px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border-radius: 30px !important;
	cursor: pointer !important;
	text-align: center !important;
	transition: all 0.25s ease !important;
	outline: none !important;
	white-space: nowrap !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

#financial-loan-calculator-card .calc-details-table {
	width: 100% !important;
	border-collapse: collapse !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	margin-top: 25px !important;
	box-shadow: none !important;
	border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

#financial-loan-calculator-card .calc-details-table tr,
#financial-loan-calculator-card .calc-details-table th,
#financial-loan-calculator-card .calc-details-table td {
	background: transparent !important;
	border: none !important;
}

#financial-loan-calculator-card .calc-details-table th {
	padding: 14px 18px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

#financial-loan-calculator-card .calc-details-table th.details-title {
	text-align: left !important;
}

#financial-loan-calculator-card .calc-details-table th.details-term-title {
	text-align: right !important;
}

#financial-loan-calculator-card .calc-details-table td {
	padding: 14px 18px !important;
	font-size: 14px !important;
	color: inherit !important;
}

#financial-loan-calculator-card .calc-details-table td:last-child {
	text-align: right !important;
	font-weight: 600 !important;
}

#financial-loan-calculator-card .calc-details-table tbody tr {
	border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

#financial-loan-calculator-card .calc-details-table tbody tr:last-child {
	border-bottom: none !important;
}

#financial-loan-calculator-card .calc-details-table tbody tr:nth-child(even) td {
	background-color: #f8fafc !important;
}

#financial-loan-calculator-card .calc-details-table tr.total-repayment-row td {
	background-color: rgba(0, 0, 0, 0.02) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
}

#financial-loan-calculator-card #financial-calc-apply-btn {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 20px auto 0 auto !important;
	padding: 15px 25px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	border-radius: 30px !important;
	text-align: center !important;
	text-decoration: none !important;
	border: none !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	line-height: 1.2 !important;
}

#financial-loan-calculator-card #financial-calc-apply-btn:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

#financial-loan-calculator-card #financial-calc-apply-btn:active {
	transform: translateY(0) !important;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
}

#financial-loan-calculator-card .calc-info-footer {
	text-align: center !important;
	margin-top: 18px !important;
}

#financial-loan-calculator-card .info-icon {
	display: inline-block !important;
	color: #94a3b8 !important;
	font-size: 16px !important;
	cursor: pointer !important;
	transition: color 0.2s !important;
}

#financial-loan-calculator-card .info-icon:hover {
	color: #64748b !important;
}

@media (max-width: 480px) {
	#financial-loan-calculator-card {
		padding: 25px 20px !important;
	}
	#financial-loan-calculator-card .calc-terms-btn-group {
		gap: 8px !important;
	}
	#financial-loan-calculator-card .calc-term-btn {
		padding: 10px 4px !important;
		font-size: 12px !important;
	}
	#financial-loan-calculator-card .calc-details-table th, 
	#financial-loan-calculator-card .calc-details-table td {
		padding: 12px 14px !important;
		font-size: 13px !important;
	}
}

/* ==========================================================================
   PREMIUM MICRO-ANIMATIONS & HIGHLIGHTS
   ========================================================================== */

#financial-loan-calculator-card {
	border-top: 4px solid var(--secondary-color, #E60000) !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

#financial-loan-calculator-card:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
}

#financial-loan-calculator-card .calc-label {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	text-transform: uppercase !important;
	font-size: 11px !important;
	letter-spacing: 1.5px !important;
	color: #64748b !important;
	font-weight: 700 !important;
	margin-bottom: 15px !important;
	text-align: left !important;
}

#financial-loan-calculator-card .calc-label::before {
	content: "" !important;
	display: inline-block !important;
	width: 3px !important;
	height: 12px !important;
	background-color: var(--secondary-color, #E60000) !important;
	border-radius: 2px !important;
}

/* Slider Halo Hover & Drag Transitions */
#financial-loan-calculator-card input[type=range]::-webkit-slider-thumb {
	transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

#financial-loan-calculator-card input[type=range]::-webkit-slider-thumb:hover {
	transform: scale(1.18) !important;
	box-shadow: 0 0 0 8px rgba(230, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

#financial-loan-calculator-card input[type=range]:active::-webkit-slider-thumb {
	transform: scale(1.22) !important;
	box-shadow: 0 0 0 12px rgba(230, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

#financial-loan-calculator-card input[type=range]::-moz-range-thumb {
	transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

#financial-loan-calculator-card input[type=range]::-moz-range-thumb:hover {
	transform: scale(1.18) !important;
	box-shadow: 0 0 0 8px rgba(230, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

#financial-loan-calculator-card input[type=range]:active::-moz-range-thumb {
	transform: scale(1.22) !important;
	box-shadow: 0 0 0 12px rgba(230, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Number Pulse Animations */
@keyframes amountPulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.06); }
	100% { transform: scale(1); }
}

.amount-pulse-active {
	animation: amountPulse 0.12s ease-in-out !important;
}

@keyframes numberHighlight {
	0% { opacity: 0.6; }
	100% { opacity: 1; }
}

.number-changed {
	animation: numberHighlight 0.15s ease-out !important;
}

/* ==========================================================================
   REVIEW STEP STYLES (STEP 5)
   ========================================================================== */

.financial-review-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 25px !important;
	margin-top: 25px !important;
}

@media (max-width: 768px) {
	.financial-review-grid {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
}

.financial-review-card {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
	border-radius: 14px !important;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02) !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.financial-review-card:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06) !important;
}

.financial-review-card-header {
	background: #f8fafc !important;
	padding: 18px 24px !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}

.financial-review-card-header i {
	font-size: 20px !important;
	width: 20px !important;
	height: 20px !important;
	line-height: 1 !important;
	color: var(--primary-color) !important;
	margin: 0 !important;
}

.financial-review-card-header h4 {
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #0f172a !important;
}

.financial-review-card-body {
	padding: 24px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	flex: 1 !important;
}

.review-item {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	font-size: 13px !important;
	padding-bottom: 14px !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.review-item:last-child {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

.review-label {
	color: #64748b !important;
	font-weight: 500 !important;
}

.review-value {
	color: #0f172a !important;
	font-weight: 600 !important;
	text-align: right !important;
}

.financial-review-card-wide {
	grid-column: span 2 !important;
}

@media (max-width: 768px) {
	.financial-review-card-wide {
		grid-column: span 1 !important;
	}
	
	.financial-review-card-wide .financial-review-card-body {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	
	.financial-review-card-wide .review-item {
		border-right: none !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
		padding-right: 0 !important;
		padding-bottom: 14px !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		margin-bottom: 0 !important;
	}
	
	.financial-review-card-wide .review-item:last-child {
		border-bottom: none !important;
		padding-bottom: 0 !important;
	}
	
	.financial-review-card-wide .review-label {
		margin-bottom: 0 !important;
	}
}

/* Multi-step registration styling */
.financial-substep-progress-wrapper {
	background: #f8fafc;
	padding: 12px 20px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	margin-bottom: 25px;
}

.financial-substep-indicator {
	transition: color 0.3s ease, border-color 0.3s ease;
	border-bottom: 2px solid transparent;
	padding-bottom: 6px;
	cursor: default;
}

.financial-substep-indicator.active-indicator {
	color: var(--primary-color) !important;
	border-bottom-color: var(--secondary-color) !important;
}

.financial-substep-indicator.completed-indicator {
	color: #10b981 !important;
	border-bottom-color: #10b981 !important;
}

.financial-register-substep {
	animation: fadeInSubstep 0.3s ease;
}

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



/* =========================================================
   APPLICATION FORM: documents notice, draft resume, WhatsApp
   ========================================================= */

/* ---------------------------------------------------------------
   "Have these ready:" — one compact strip.

   Deliberately small: it is a reminder, not the main event, and it
   sits directly above the form. Wrapper-scoped with !important on
   the properties themes reset (list-style, margins, font-size).
   --------------------------------------------------------------- */

.financial-wizard-wrapper .financial-docs-required {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 6px 10px !important;
	border: 1px solid #fecaca !important;
	border-left: 4px solid var(--secondary-color, #E60000) !important;
	border-radius: 8px !important;
	background: #fff7f7 !important;
	padding: 10px 14px !important;
	margin: 0 0 20px !important;
}

.financial-wizard-wrapper .financial-docs-required-head {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #991b1b !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	white-space: nowrap;
}

.financial-wizard-wrapper .financial-docs-required-head-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--secondary-color, #E60000);
}

.financial-wizard-wrapper .financial-docs-required-head-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* The documents themselves, as inline chips. */
.financial-wizard-wrapper .financial-docs-required-list {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.financial-wizard-wrapper .financial-docs-required-list li {
	display: inline-block !important;
	margin: 0 !important;
	padding: 3px 10px !important;
	list-style: none !important;
	background: #ffffff !important;
	border: 1px solid #f3d0d0 !important;
	border-radius: 20px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #3f3f46 !important;
	line-height: 1.5 !important;
}

.financial-wizard-wrapper .financial-docs-required-list li::before,
.financial-wizard-wrapper .financial-docs-required-list li::marker {
	content: none !important;
	display: none !important;
}

@media (max-width: 600px) {
	.financial-wizard-wrapper .financial-docs-required-head {
		width: 100%;
	}
}

/* Resume banner */
.financial-draft-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 13px 16px;
	margin: 0 0 20px;
	border-radius: 10px;
	background: #ecfdf5;
	border: 1px solid #6ee7b7;
	color: #065f46;
	font-size: 15px;
}

.financial-draft-banner strong { margin-right: 5px; }

.financial-draft-discard {
	background: none;
	border: none;
	color: #065f46;
	text-decoration: underline;
	font-size: 14px;
	cursor: pointer;
	padding: 0;
	font-family: inherit;
}

.financial-draft-discard:hover { opacity: 0.75; }

/* Quiet "saved" indicator, shown briefly after each autosave */
.financial-draft-saved {
	position: fixed;
	bottom: 18px;
	right: 18px;
	padding: 8px 14px;
	border-radius: 20px;
	background: rgba(31, 41, 55, 0.9);
	color: #fff;
	font-size: 13px;
	z-index: 9999;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.financial-draft-saved.visible { opacity: 1; }

/* "Same as my mobile number" */
.financial-wizard-wrapper .financial-same-as {
	display: flex !important;
	align-items: center;
	gap: 8px;
	margin-top: 8px !important;
	margin-bottom: 0 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: #475569 !important;
	cursor: pointer;
}

.financial-wizard-wrapper .financial-same-as input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin: 0;
	cursor: pointer;
	flex-shrink: 0;
	accent-color: var(--secondary-color, #E60000);
}

.financial-wizard-wrapper .financial-field-hint {
	font-size: 13px;
	color: #64748b;
	margin: 6px 0 0;
	line-height: 1.45;
}

/* Document steps: make the requirement unmissable */
.financial-wizard-wrapper .financial-doc-required-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 5px 12px !important;
	margin: 0 0 12px !important;
	border-radius: 20px !important;
	background: #fee2e2 !important;
	color: #991b1b !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.financial-wizard-wrapper .financial-badge-icon {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	display: inline-flex;
}

.financial-wizard-wrapper .financial-badge-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.financial-upload-error {
	display: none;
	padding: 11px 14px;
	margin-top: 12px;
	border-radius: 8px;
	background: #fee2e2;
	border: 1px solid #fca5a5;
	color: #991b1b;
	font-size: 14px;
	font-weight: 500;
}

.financial-upload-error.visible { display: block; }