article:has(.card-form) {
	background-color: #e6e6ef;
}

.progress-bar {
	color: #b0b1cd;
	border-bottom: 1px solid #d8d8d8;

	@media (max-width: 767px) {
		font-size: 12px;
	}

	.active {
		color: #00035f;
	}

	.bar {
		min-width: 142px;
		height: 2px;
		background: currentColor;

		@media (max-width: 767px) {
			min-width: 20px;
			height: 1px;
		}
	}

	.fa-minus {
		width: 142px;
	}
}

.card-form {
	--danger-color: #dc2323;
	--success-color: #009b0f;
	max-width: 769px;
	background-color: var(--card-form-bg, #fffffff7);
	border-color: var(--card-form-border-color, hsl(240 1% 80% / 45%));
	padding: 32px;
	border-radius: 16px;

	@media (max-width: 767px) {
		padding: 16px;
	}

	.form-control {
		--form-control-border-color: #d8d8d8;
		padding-inline: 16px;
	}

	.pointer {
		cursor: pointer;
	}

	.card-title {
		--card-title-color: #333333;
		font-size: var(--card-title-font-size, 28px);

		@media (max-width: 767px) {
			font-size: var(--card-title-font-size-mobile, 20px);
		}
	}

	.card-subtitle {
		--card-subtitle-color: #747474;
		font-size: var(--card-subtitle-font-size, 16px);

		@media (max-width: 767px) {
			font-size: var(--card-subtitle-font-size, 12px);
		}
	}

	.btn {
		--btn-color: var(--card-form-btn-color, white);
		/* --btn-primary-border-color: #00035f; */
		min-width: 160px;
		height: 50px;
		font-size: 16px;
		align-content: center;

		@media only screen and (max-width: 767px) {
			min-width: auto;
			height: 36px;
			flex: 1;
		}

		&.btn-gradient:not([disabled]) {
			background-image: linear-gradient(
				to right,
				#ac1b1b,
				#f55151,
				#f55151,
				#ac1b1b
			);
			background-size: 300% 100%;

			&:hover {
				background-position: 100% 0;
				-moz-transition: all 0.4s ease-in-out;
				-o-transition: all 0.4s ease-in-out;
				-webkit-transition: all 0.4s ease-in-out;
				transition: all 0.4s ease-in-out;
				border-color: var(--btn-gradient-activeBtnOnHover-bg-color, #f55151);
			}
		}

		&.disabled,
		&[disabled] {
			border: 1px solid #999999;
			background-color: #cccccc;
			color: #666666 !important;
		}
	}

	.form-control,
	.input-group-btn > .btn {
		height: 36px;
		align-content: center;
		border-radius: 6px;

		@media (min-width: 768px) {
			height: 42px;
			font-size: 16px;
		}
	}

	.input-group-btn > .btn {
		min-width: 0;
	}

	.invalid {
		--form-control-color: var(--input-error-color, #dc3545);
		--form-control-border-color: var(--input-error-color, #dc3545);
		--form-control-focus-color: rgba(220, 53, 69, 0.4);
		--form-control-focusBorder-color: var(--input-error-color, #dc3545);

		&:focus {
			--form-control-boxShadow-color: rgba(220, 53, 69, 0.4);
		}
	}

	.custom-checkbox-area {
		--input-error-color: var(--font-color);

		@media (max-width: 767px) {
			font-size: 14px;
		}
	}

	/* Checked state styles */
	.custom-radio-area input[type='radio']:checked + .custom-radio {
		background-color: var(--primary-color);
		border-color: var(--primary-color);
	}

	/* Apply border and background to selected option */
	.custom-radio-area input[type='radio']:checked ~ span {
		font-weight: bold;
		color: var(--primary-color);
	}

	.custom-radio,
	.custom-checkbox {
		width: 18px;
		height: 18px;
		transition: background-color 0.3s, border-color 0.3s;
	}

	.amount-input-area {
		@media only screen and (min-width: 768px) {
			grid-template-columns: 1fr auto;

			.form-group-due-amount {
				margin-left: 30px;
				width: 400px;
				transition: width 0.4s;

				&.d-none {
					width: 0;
				}
			}
		}
	}
}

.color-mode-dark .card-form {
	.form-control:not([readonly]) {
		--form-control-color: var(--card-form-color-dark, white);
	}
}