/* Student Portal Custom Styles */

/* hCaptcha Mobile Responsiveness */
@media only screen and (max-width: 500px) {
	.h-captcha-container {
		max-width: 100%;
		box-sizing: border-box;
	}

	.h-captcha iframe {
		max-width: 120% !important;
	}

	.h-captcha {
		transform: scale(0.77);
		transform-origin: 0 0;
	}
}

/* Exam Entry Styling */
.exam-entry .subject-row + hr {
	margin: 20px 0 !important;
	padding: 0px !important;
	border-top: 1px solid #eee !important;
}

/* Flatpickr Cross-Browser Compatibility Styles */
.flatpickr-input {
	background-color: #fff !important;
	cursor: pointer !important;
}

.flatpickr-calendar {
	font-family: inherit !important;
	z-index: 9999 !important;
}

.flatpickr-cross-browser {
	box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
	border-radius: 8px !important;
	border: 1px solid #ddd !important;
}

.flatpickr-calendar.open {
	display: block !important;
}

/* Contact Title Responsive Design */
.contact_title h3 {
	font-size: 27px;
}

/* Mobile Responsiveness for Contact Title */
@media (max-width: 768px) {
	.contact_title h3 {
		font-size: 24px !important;
	}
}

@media (max-width: 480px) {
	.contact_title h3 {
		font-size: 22px !important;
	}
}

@media (max-width: 360px) {
	.contact_title h3 {
		font-size: 21px !important;
	}
}

@media (max-width: 320px) {
	.contact_title h3 {
		font-size: 20px !important;
	}
}

/* Academic Qualifications Section Headings Responsive Design */
h4.mb-3 {
	font-size: 22px;
}

/* Mobile Responsiveness for Academic Qualifications Headings */
@media (max-width: 768px) {
	h4.mb-3 {
		font-size: 20px !important;
	}
}

@media (max-width: 480px) {
	h4.mb-3 {
		font-size: 18px !important;
	}
}

@media (max-width: 360px) {
	h4.mb-3 {
		font-size: 17px !important;
	}
}

@media (max-width: 320px) {
	h4.mb-3 {
		font-size: 16px !important;
	}
}

/* Disabled Submit Button Styling */
#submit-btn:disabled {
	background: #ccc !important;
	color: #000 !important;
	cursor: not-allowed !important;
	opacity: 0.6 !important;
	box-shadow: none !important;
}

#submit-btn:disabled:hover {
	background: #ccc !important;
	color: #000 !important;
	transform: none !important;
	box-shadow: none !important;
}

/* Add Exam Button - Orange Theme */
.add-exam-btn {
	background: linear-gradient(135deg, #FF3C00 0%, #FF6B3D 100%) !important;
	color: white !important;
	border: none !important;
	border-radius: 25px !important;
	padding: 12px 25px !important;
	cursor: pointer !important;
	margin: 10px 0 20px 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	transition: all 0.3s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.add-exam-btn:hover {
	background: linear-gradient(135deg, #E53300 0%, #FF5722 100%) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 25px rgba(255, 60, 0, 0.3) !important;
	color: white !important;
}

.add-exam-btn:disabled {
	background: #ccc !important;
	color: #888 !important;
	cursor: not-allowed !important;
	opacity: 0.6 !important;
	box-shadow: none !important;
}

.add-exam-btn:disabled:hover {
	background: #ccc !important;
	transform: none !important;
	box-shadow: none !important;
}

/* Add Other Qualification Button - Matching Add Exam Button */
.add-other-qualification-btn {
	background: linear-gradient(135deg, #FF3C00 0%, #FF6B3D 100%) !important;
	color: white !important;
	border: none !important;
	border-radius: 25px !important;
	padding: 12px 25px !important;
	cursor: pointer !important;
	margin: 10px 0 20px 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	transition: all 0.3s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.add-other-qualification-btn:hover {
	background: linear-gradient(135deg, #E53300 0%, #FF5722 100%) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 25px rgba(255, 60, 0, 0.3) !important;
	color: white !important;
}

.add-other-qualification-btn:disabled {
	background: #ccc !important;
	color: #888 !important;
	cursor: not-allowed !important;
	opacity: 0.6 !important;
	box-shadow: none !important;
}

.add-other-qualification-btn:disabled:hover {
	background: #ccc !important;
	transform: none !important;
	box-shadow: none !important;
}

/* Mobile Responsiveness for Flatpickr */
@media (max-width: 768px) {
	.flatpickr-calendar {
		width: 100% !important;
		max-width: 320px !important;
	}
	
	.add-exam-btn,
	.add-other-qualification-btn {
		font-size: 12px !important;
		padding: 10px 20px !important;
	}
	
	.add-subject-btn {
		font-size: 11px !important;
		padding: 6px 12px !important;
	}
}

/* Other Qualification Entry Styling - Matching Exam Entry */
.other-qualification-entry {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 20px;
	margin: 15px 0;
	position: relative;
}

.other-qualification-header {
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 2px solid #dee2e6;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
}

.other-qualification-title {
	font-weight: 600;
	color: #495057;
	font-size: 16px;
	flex-shrink: 0;
	white-space: nowrap;
}

.remove-other-qualification-btn {
	background: #dc3545 !important;
	color: white !important;
	border: none !important;
	border-radius: 20px !important;
	padding: 6px 12px !important;
	cursor: pointer !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	transition: all 0.3s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	flex-shrink: 0;
	white-space: nowrap;
}

.remove-other-qualification-btn:hover {
	background: #c82333 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
}

.other-qualification-entry + hr {
	margin: 20px 0 !important;
	padding: 0px !important;
	border-top: 1px solid #eee !important;
}

/* Exam Entry Styling - Matching Other Qualification Entry */
.exam-entry {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 20px;
	margin: 15px 0;
	position: relative;
}

.exam-entry-header {
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 2px solid #dee2e6;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
}

.exam-entry-title {
	font-weight: 600;
	color: #495057;
	font-size: 16px;
	flex-shrink: 0;
	white-space: nowrap;
}

.remove-exam-btn {
	background: #dc3545 !important;
	color: white !important;
	border: none !important;
	border-radius: 20px !important;
	padding: 6px 12px !important;
	cursor: pointer !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	transition: all 0.3s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	flex-shrink: 0;
	white-space: nowrap;
}

.remove-exam-btn:hover {
	background: #c82333 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
}

.remove-subject-btn {
	background: #dc3545 !important;
	color: white !important;
	border: none !important;
	border-radius: 20px !important;
	padding: 6px 12px !important;
	cursor: pointer !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	transition: all 0.3s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
}

.remove-subject-btn:hover {
	background: #c82333 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
}

.exam-entry + hr {
	margin: 20px 0 !important;
	padding: 0px !important;
	border-top: 1px solid #eee !important;
}

/* Add Subject Button - Smaller than main add buttons */
.add-subject-btn {
	background: linear-gradient(135deg, #FF3C00 0%, #FF6B3D 100%) !important;
	color: white !important;
	border: none !important;
	border-radius: 20px !important;
	padding: 8px 16px !important;
	cursor: pointer !important;
	margin: 10px 0 15px 0 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	transition: all 0.3s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.add-subject-btn:hover {
	background: linear-gradient(135deg, #E53300 0%, #FF5722 100%) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 15px rgba(255, 60, 0, 0.25) !important;
	color: white !important;
}

.add-subject-btn:disabled {
	background: #ccc !important;
	color: #888 !important;
	cursor: not-allowed !important;
	opacity: 0.6 !important;
	box-shadow: none !important;
}

.add-subject-btn:disabled:hover {
	background: #ccc !important;
	transform: none !important;
	box-shadow: none !important;
}

/* SweetAlert2 Custom Theme - Orange Theme */
.swal2-popup {
	border-radius: 15px !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
	font-family: inherit !important;
}

.swal2-title {
	color: #333 !important;
	font-weight: 600 !important;
	font-size: 24px !important;
}

.swal2-content {
	color: #555 !important;
	font-size: 16px !important;
}

/* Custom Confirm Button - Orange Theme */
.swal2-confirm {
	background: linear-gradient(135deg, #FF3C00 0%, #F16722 100%) !important;
	border: none !important;
	border-radius: 8px !important;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	padding: 12px 24px !important;
	min-width: 120px !important;
	box-shadow: 0 4px 15px rgba(255, 60, 0, 0.3) !important;
	transition: all 0.3s ease !important;
	text-transform: none !important;
}

.swal2-confirm:hover {
	background: linear-gradient(135deg, #E63600 0%, #D15A1F 100%) !important;
	box-shadow: 0 6px 20px rgba(255, 60, 0, 0.4) !important;
	transform: translateY(-2px) !important;
}

.swal2-confirm:focus {
	box-shadow: 0 0 0 3px rgba(255, 60, 0, 0.2) !important;
	outline: none !important;
}

.swal2-confirm:active {
	transform: translateY(0) !important;
	box-shadow: 0 4px 15px rgba(255, 60, 0, 0.3) !important;
}

/* Custom Cancel Button */
.swal2-cancel {
	background: #f8f9fa !important;
	border: 2px solid #dee2e6 !important;
	border-radius: 8px !important;
	color: #6c757d !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	padding: 12px 24px !important;
	min-width: 120px !important;
	transition: all 0.3s ease !important;
	text-transform: none !important;
}

.swal2-cancel:hover {
	background: #e9ecef !important;
	border-color: #adb5bd !important;
	color: #495057 !important;
	transform: translateY(-2px) !important;
}

.swal2-cancel:focus {
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25) !important;
	outline: none !important;
}

/* Success Icon Styling */
.swal2-success {
	border-color: #28a745 !important;
	color: #28a745 !important;
}

.swal2-success .swal2-success-ring {
	border: 0.25em solid rgba(40, 167, 69, 0.3) !important;
}

.swal2-success .swal2-success-fix {
	background-color: #fff !important;
	width: 0.4375em !important;
	height: 5.625em !important;
	transform: rotate(-45deg) !important;
	border-radius: 0 0 0 0.3em !important;
	left: 1.8em !important;
	top: 2.875em !important;
	z-index: 1 !important;
}

.swal2-success .swal2-success-line {
	background-color: #28a745 !important;
	border-radius: 0.125em !important;
	height: 0.3125em !important;
}

.swal2-success .swal2-success-line.swal2-success-line-tip {
	width: 1.5625em !important;
	left: 0.875em !important;
	top: 2.875em !important;
	transform: rotate(45deg) !important;
}

.swal2-success .swal2-success-line.swal2-success-line-long {
	width: 2.9375em !important;
	right: 0.5em !important;
	top: 2.375em !important;
	transform: rotate(-45deg) !important;
}

/* Error Icon Styling */
.swal2-error .swal2-x-mark .swal2-x-mark-line-left,
.swal2-error .swal2-x-mark .swal2-x-mark-line-right {
	background-color: #dc3545 !important;
}

/* Warning Icon Styling */
.swal2-warning .swal2-icon-content {
	color: #ffc107 !important;
}

/* Loading Spinner */
.swal2-loading .swal2-confirm {
	background: linear-gradient(135deg, #FF3C00 0%, #F16722 100%) !important;
	opacity: 0.8 !important;
}

/* Cross-browser compatibility fixes */
.swal2-popup {
	-webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
	-moz-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
}

.swal2-confirm {
	-webkit-transition: all 0.3s ease !important;
	-moz-transition: all 0.3s ease !important;
	-o-transition: all 0.3s ease !important;
	-webkit-transform: translateY(0) !important;
	-moz-transform: translateY(0) !important;
	-o-transform: translateY(0) !important;
}

.swal2-confirm:hover {
	-webkit-transform: translateY(-2px) !important;
	-moz-transform: translateY(-2px) !important;
	-o-transform: translateY(-2px) !important;
}

/* Mobile Responsiveness for SweetAlert */
@media (max-width: 768px) {
	.swal2-popup {
		width: 90% !important;
		margin: 20px auto !important;
	}
	
	.swal2-title {
		font-size: 20px !important;
	}
	
	.swal2-content {
		font-size: 14px !important;
	}
	
	.swal2-confirm,
	.swal2-cancel {
		font-size: 14px !important;
		padding: 10px 20px !important;
		min-width: 100px !important;
	}
}

/* Terms & Conditions Styling */
.terms-container {
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 20px;
	background-color: #f9f9f9;
	height: 300px;
	overflow-y: auto;
	margin-bottom: 20px;
	font-size: 13px;
	line-height: 1.6;
}

.terms-container ul {
	list-style: none;
	padding-left: 0;
	margin-left: 20px;
}

.terms-container ul li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 5px;
}

.terms-container ul li:before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #FF3C00;
	font-weight: bold;
	font-size: 12px;
}

.terms-container h5 {
	color: #333;
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 14px;
}

.terms-header {
	margin-bottom: 20px;
}

.terms-header h4 {
	margin-bottom: 10px;
	color: #333;
	font-size: 16px;
}

.terms-section {
	margin-bottom: 20px;
}

.terms-footer {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid #ccc;
	text-align: center;
}

.terms-checkbox-container {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
}

.terms-checkbox-container input[type="checkbox"] {
	margin: 0;
	margin-top: 2px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.terms-checkbox-container label {
	margin: 0;
	cursor: pointer;
	line-height: 1.4;
	flex: 1;
}

.terms-checkbox-container a {
	color: #FF3C00;
	text-decoration: underline;
}

/* Terms Container Mobile Responsiveness */
@media (max-width: 768px) {
	.terms-container {
		height: 250px;
		font-size: 12px;
		padding: 15px;
	}
	
	.terms-container h4 {
		font-size: 15px !important;
	}
	
	.terms-container h5 {
		font-size: 13px !important;
	}
}

@media (max-width: 480px) {
	.terms-container {
		height: 200px;
		font-size: 11px;
		padding: 12px;
	}
	
	.terms-container h4 {
		font-size: 14px !important;
	}
	
	.terms-container h5 {
		font-size: 12px !important;
	}
	
	.terms-checkbox-container {
		align-items: flex-start;
		gap: 8px;
	}
}

/* Mobile responsive fixes for checkbox and text sizing only */
@media (max-width: 768px) {
	.terms-checkbox-container input[type="checkbox"] {
		width: 16px;
		height: 16px;
		margin-top: 1px;
	}
	
	.terms-checkbox-container label {
		font-size: 14px;
		line-height: 1.3;
	}
}

@media (max-width: 480px) {
	.terms-checkbox-container input[type="checkbox"] {
		width: 14px;
		height: 14px;
		margin-top: 0px;
	}
	
	.terms-checkbox-container label {
		font-size: 13px;
		line-height: 1.2;
	}
}