/* Basic styling to center the quiz card */
        .quiz-container {
            max-width: 850px;
        }
        .quiz-step {
            display: none; /* All steps hidden by default */
        }
        .quiz-step.active {
            display: block; /* Only the active step is visible */
        }
        .progress {
            height: 8px;
	}
        .step-header {
        	min-height: 80px;
	}


        /* Simulated fixed header (replace with your own .fixed-top-header) */

        /* Container that fills remaining viewport */
        .card-wrapper {
        	height: calc(100vh - 150px);/* full viewport minus header height */
		display: flex;
		flex-direction: column;
	}

	/* Card fills wrapper */
	.card-full-height {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: 0; /* critical for flex scroll behavior */
	}

	.card-full-height .card-body {
		flex: 1 1 auto;
		overflow-y: auto;/* scroll only the card body */
		min-height: 0;
	}


	/* =========================================================
	 FIXED HEADER & FOOTER LAYOUT + SCROLLABLE FORM BODY
 	========================================================= */

	/* 1. Fixed Header & Footer */

	.fixed-bottom-footer {
		position: relative;
		left: 0;
		right: 0;
		z-index: 1030;
	}

	/* 2. Scrollable Form Content Area */
	.form-content-area {
		/* Prevent overlap with fixed elements */
		padding-top: 0px;
		padding-bottom: 20px;

		/* Ensure only vertical scrolling */
		overflow-x: hidden !important;
		overflow-y: auto;
	}

	/* =========================================================
	 MULTI-STEP FORM TRANSITION
	 ========================================================= */

	/* 3. Step Container for Sliding Effect */
	#formStepsContainer {
		display: flex;
		transition: transform 0.4s ease-in-out;
	}

	/* 4. Individual Step Layout */
	.form-step {
		width: 10%; /* each step takes 10% (10 steps total = 100%) */
		flex-shrink: 0; /* prevent collapsing */
	}

	/* =========================================================
	 BUTTON GROUP (BTNGROUP-STRETCH)
	 ========================================================= */

	.btn-group-stretch > label:not(:last-child) {
		border-top-right-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}


	body {
		font-family: 'Inter', sans-serif;
		background-color: #f7f9fc;
		min-height: 100vh;
	}

	/* Custom CSS for Full-Screen Scrollable Modal */
	/* Targets the content inside the full-screen dialog */
	.modal-fullscreen .modal-content {
		/* Ensures content takes full viewport height and uses flex to manage children */
		height: 100vh;
		display: flex;
		flex-direction: column;
		border-radius: 0; /* Full screen typically has no corner radius */
	}

	/* Ensures header and footer do not shrink and remain visible */
	.modal-fullscreen .modal-header,
	.modal-fullscreen .modal-footer {
		flex-shrink: 0;
		padding: 1.5rem;
	}

	/* Allows the body to take up all remaining space and enable scrolling */
	.modal-fullscreen .modal-body {
		flex-grow: 1;
		overflow-y: auto;
		padding: 2rem;
		/* Add custom styling for aesthetics */
		background-color: #ffffff;
	}

	/* Custom style for the loading modal (keeping it centered and small) */
	#loadingModal .modal-content {
		border-radius: 1rem;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	}

	@media (min-width: 768px) {
  		.w-md-30 {
    			width: 30% !important;
  		}
	}