/* Remove default margin from form-groups inside rows to prevent big gap */
		.row .form-group {
			margin-bottom: 0;
		}
		
		.input-group {
			border: 1px solid #0b161d;
			border-radius: 6px;
			/* Fix overflow issue */
			display: flex;
			flex-wrap: nowrap;
			overflow: hidden;
			position: relative;
			padding: 0 !important; /* Remove any padding */
		}
		
		.input-group-text {
            background-color: #e9ecef !important;
            border-right: 0.8px solid #d1d1d1 !important;
			border-radius: 0 !important;
			 /* Remove default border */
			border: none !important;
			color: #0b161d;
			/* Ensure proper alignment */
			display: flex;
			align-items: center;
			justify-content: center; /* Center the icon */
			/* Prevent the span from creating extra width */
			flex-shrink: 0;
			white-space: nowrap;
			z-index: 1;
			padding: 0.375rem 0.75rem !important; /* Standard Bootstrap padding */
			margin: 0 !important; /* Remove any margin */
			min-width: 45px; /* Ensure consistent width */
        }
		
		/* Target the icon inside input-group-text */
		.input-group-text i {
			margin: 0 !important;
			padding: 0 !important;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
        .form-control {			
			border: none !important; /* Remove default border */
			border-radius: 0 !important;/* Remove any default borders */
			box-shadow: none !important;
			/* Fix overflow - ensure it doesn't exceed container */
			min-width: 0;
			flex: 1 1 auto;
			background-clip: padding-box;
			padding: 0.375rem 0.75rem; /* Standard padding */
        }
		
        .form-control:focus {
            box-shadow: none !important;
			outline: none !important;
			border: none !important;
            /* border-color: #ced4da; */
        }
		
		
		/* Focus State - Changes border color of entire group */
		
        .input-group:focus-within {
			border-color: 0.8px solid #0b161d !important;
			/* Optional: add a subtle shadow instead of color change */
			box-shadow: 0 0 0 0.2rem rgba(11, 22, 29, 0.1);
		}	
		
		/* Add proper spacing between columns in row */
		.row {
			margin: 0 -7.5px;
			display: flex;
			flex-wrap: wrap;
		}
		
		/* Name and Email fields need to be in columns */
		.row > .form-group.input-group {
			flex: 0 0 calc(50% - 15px);
			margin: 15px 7.5px 0 7.5px;
			max-width: calc(50% - 15px);
		}

		/* Ensure textarea has proper min-height */
		textarea.form-control {
			min-height: 120px;
			resize: vertical;
		}	
        
        /* Tooltip styling override */
        .tooltip-inner {
            background-color: #007bff;
            font-size: 0.85rem;
        }
        .bs-tooltip-auto[x-placement^=top] .arrow::before,
        .bs-tooltip-top .arrow::before {
            border-top-color: #007bff;
        }
		
		/* Validation States */
		.input-group.is-invalid {
			border-color: #dc3545 !important;
		}

		.input-group.is-valid {
			border-color: #28a745 !important;
		}

        /* Notification Overlay (Center Middle) */
        #notification-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5);
            display: none; /* Hidden by default */
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        .notification-box {
            background: white;
            padding: 25px 40px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            animation: fadeIn 0.3s ease-out;
            max-width: 90%;
            width: 400px;
        }
        .notification-icon {
            font-size: 3rem;
            margin-bottom: 15px;
        }
        .success-icon { color: #28a745; }
        .error-icon { color: #dc3545; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Media Queries */
        @media (max-width: 576px) {
            .notification-box {
                width: 85%;
            }
        }
		
		@media (max-width: 768px) {
			.row > .form-group.input-group {
				flex: 0 0 100%;
				max-width: 100%;
			}
		}