@charset "UTF-8";

:root {
	--navy-900: #0B2545;
	--navy-700: #123A6B;
	--navy-600: #1B4C82;
	--gold-600: #B8912F;
	--gold-500: #C9A34C;
	--maroon-600: #A4243B;
	--bg-page: #FFFFFF;
	--surface: #FFFFFF;
	--text-primary: #1C2530;
	--text-muted: #5B6472;
	--border-subtle: #E1E4E9;
	--blue-border: #9DB8D9; /* input/border blue */
	--blue-card: #2E5E9E; /* card outline blue */
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", "Noto Sans", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	color: var(--text-primary);
	background: #FFFFFF;
}

body>br, body>hr {
	display: none !important;
}

body>*:not(.container-fluid) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.container-fluid.p-0 {
	margin-top: 0 !important;
}

.main-row {
	min-height: 100vh;
}

@media ( min-width : 992px) {
	html, body {
		height: 100vh;
	}
	body {
		display: flex;
		flex-direction: column;
	}
	body>.container-fluid {
		flex: 0 0 auto; /* header fragment's wrapper: natural height only */
	}
	body>#fpMain {
		flex: 1 1 auto; /* main content: takes all remaining space */
		min-height: 0;
		 overflow: hidden !important;
		display: flex;
		flex-direction: column;
	}
	.main-row {
		flex: 1 1 auto;
		min-height: 0;
	}
	.left, .right {
		height: 100%;
		overflow-y: auto; /* safety net only; content is sized to fit */
	}
}

.row-full {
	min-height: 100vh
}

/* ---------- Left panel : institutional information (light theme) ---------- */
.left {
	background: #FFFFFF;
	color: var(--text-primary);
	padding: 3rem 2rem; /* same top padding as .right */
	position: relative;
	overflow: hidden;
}

.left:before, .left:after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(27, 76, 130, .05);
	pointer-events: none;
}

.left:before {
	width: 260px;
	height: 260px;
	top: -80px;
	left: -80px
}

.left:after {
	width: 200px;
	height: 200px;
	bottom: 30px;
	right: 40px
}

.portal-brand {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: 1.1rem;
}

.portal-brand .bi {
	font-size: 1.35rem;
	color: var(--gold-600);
}

.portal-brand span {
	font-family: Cambria, Georgia, "Times New Roman", "Noto Serif", serif;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--navy-900);
}

.instruction-card {
	border-radius: 10px;
	overflow: hidden !important;;
	background: var(--surface);
	border: 1px solid var(--blue-border);
	box-shadow: 0 6px 18px rgba(11, 37, 69, .07);
	margin-bottom: 16px;
	/* width: 115%; */
}

.card-header-title {
	color: var(--navy-900);
	background: #F2F6FB;
	border-bottom: 1px solid var(--border-subtle);
	border-left: 4px solid var(--navy-700);
	padding: 10px 16px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.card-header-title .bi {
	color: var(--navy-700);
}

.hostel-card .card-header-title {
	border-left-color: var(--navy-700);
}

.hostel-card .card-header-title .bi {
	color: var(--navy-700);
}

.instruction-card .card-body {
	color: var(--text-primary);
	background-color: transparent;
	font-size: 13.5px;
	line-height: 1.55;
}

.instruction-card .card-body ul li {
	font-weight: 400;
	margin-bottom: .6rem !important;
}

.instruction-card .card-body ul li:last-child {
	margin-bottom: 0 !important;
}

.instruction-card .card-body .bi {
	color: var(--gold-600);
}

.instruction-card a {
	color: var(--navy-700);
	font-weight: 600;
	text-decoration: underline;
	word-break: break-all;
}

.instruction-card a:hover {
	color: var(--navy-900);
}

.instruction-card .highlight-date {
	color: var(--maroon-600);
	font-weight: 700;
}

.instruction-card .contact-link {
	color: var(--maroon-600);
	font-weight: 700;
}

/* ---------- Right panel : sign-in ---------- */
.right {
	background: #FFFFFF;
	color: var(--text-primary);
	padding: 3rem 2rem; /* same top padding as .left */
	position: relative;
	overflow: hidden;
}

.right:before, .right:after {
	content: "";
	position: absolute;	
	border-radius: 50%;
	background: rgba(27, 76, 130, .05);
	pointer-events: none;
}

.right:before {
	width: 240px;
	height: 240px;
	top: -70px;
	right: -70px;
}

.right:after {
	width: 170px;
	height: 170px;
	bottom: 40px;
	left: 50px;
}

.right>.login {
	position: relative;
	z-index: 1;
	width: 100%;
    max-width: 450px;
}

.login {
	width: 100%;
	max-width: 430px;
	background: var(--surface);
	border: 1.5px solid var(--blue-card);
	border-top: 4px solid var(--navy-700);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(11, 37, 69, .12);
	padding: 1.9rem 2.1rem 1.75rem;
}

/* ---------- Mobile ---------- */
@media ( max-width : 991.98px) {
	.left {
		border-right: none;
		border-bottom: 1px solid var(--border-subtle);
		padding: 1.5rem 1.1rem;
	}
	.right {
		padding: 1.5rem 1rem 2rem;
	}
	.login {
		max-width: 100%;
		padding: 1.5rem 1.15rem 1.4rem;
	}
	.portal-brand span {
		font-size: 1.1rem;
	}
	.login h1 {
		font-size: 1.35rem;
	}
	.input-wrap .form-control {
		height: 48px;
	}
	.captcha-row {
		gap: 10px;
	}
}

/* Neutralize browser autofill yellow */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus
	{
	-webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
	-webkit-text-fill-color: var(--text-primary);
	transition: background-color 5000s ease-in-out 0s;
}

.login h1 {
	font-family: Cambria, Georgia, "Times New Roman", "Noto Serif", serif;
	font-size: 1.45rem;
	color: var(--navy-900);
	margin-bottom: .3rem;
}

.login .subtitle {
	color: var(--text-muted);
	font-size: .82rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .09em;
	margin-bottom: 1.25rem;
}

.form-label-strong {
	font-size: .74rem;
	font-weight: 700;
	color: var(--navy-700);
	text-transform: uppercase;
	letter-spacing: .07em;
	margin-bottom: .35rem;
}

.input-wrap .form-control, .btn-login {
	font-variant-numeric: tabular-nums;
	/* clean alignment for application no. & DOB */
}

.form-control {
	border: 1px solid var(--blue-border);
	color: var(--text-primary);
	background-color: var(--surface);
	border-radius: 8px;
	padding: .9rem 1rem .9rem 2.8rem;
	font-size: .96rem;
}

.form-control::placeholder {
	color: #9AA3AF;
}

.form-control:focus {
	color: var(--text-primary);
	box-shadow: 0 0 0 3px rgba(27, 76, 130, .15);
	border-color: var(--navy-600);
}

.input-wrap {
	position: relative;
	margin-bottom: .95rem
}

.input-wrap .form-control {
	height: 50px;
	border-radius: 8px;
	padding-left: 46px;
	padding-right: 46px;
}

.input-icon, .input-wrap>i {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--navy-600);
	font-size: 16px;
	z-index: 10;
}

/* Password field: flex container — eye sits physically inside the box */
.pw-field {
	display: flex !important;
	align-items: center !important;
	height: 50px;
	background: #FFFFFF;
	border: 1px solid var(--blue-border);
	border-radius: 8px;
	padding: 0 14px;
}

.pw-field:focus-within {
	border-color: var(--navy-600);
	box-shadow: 0 0 0 3px rgba(27, 76, 130, .15);
}

.pw-field .pw-lock {
	position: static !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	color: var(--navy-600);
	font-size: 16px;
	margin-right: 12px;
	flex: 0 0 auto;
}

.pw-field input.pw-input, .pw-field input.pw-input:focus {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	height: 100% !important;
	padding: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 0;
}

.pw-field .password-toggle {
	position: static !important;
	transform: none !important;
	flex: 0 0 auto;
	margin-left: 12px !important;
	cursor: pointer;
	color: #9AA3AF;
	line-height: 1;
	font-size: 16px;
}

.pw-field .password-toggle:hover {
	color: var(--navy-700);
}

.btn-login {
	background: var(--navy-900);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: .85rem;
	font-weight: 600;
	font-size: .98rem;
	letter-spacing: .02em;
	transition: background-color .15s ease;
}

.btn-login:hover {
	background: var(--navy-700);
	color: #fff;
}

.btn-login:focus {
	box-shadow: 0 0 0 3px rgba(27, 76, 130, .35);
}

.captcha-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.captcha-input-wrap {
	flex: 1 1 130px;
	min-width: 130px;
}

.captcha-refresh-btn {
	background: var(--navy-900);
	border: none;
	border-radius: 8px;
	color: #fff;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.captcha-refresh-btn:hover {
	background: var(--navy-700);
	color: #fff;
}

.captcha-img-wrap {
	flex: 0 0 auto;
}

.captcha-img-wrap img {
	border: 1px solid var(--blue-border) !important;
	border-radius: 8px;
	background: #FFFFFF !important;
	padding: 3px 6px;
	display: block;
	object-fit: contain;
}

.form-footer-error {
	margin-top: 1rem;
	text-align: center;
}

.dates-section {
	margin-top: 2px;
	animation: contentAppear .6s ease both;
}

.section-mini-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	padding: 0 2px;
	color: #6B7480;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .16em;
}

.section-mini-title span {
	display: flex;
	align-items: center;
	gap: 7px;
}

.section-mini-title span::before {
	content: "";
	width: 24px;
	height: 2px;
	border-radius: 10px;
	background: linear-gradient(90deg, var(--gold-600),
		rgba(184, 145, 47, .15));
}

.section-mini-title i {
	color: var(--gold-600);
	font-size: 15px;
}

/* ---------- Date Grid ---------- */
.date-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

/* ---------- Date Item ---------- */
.date-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	min-height: 72px;
	padding: 12px;
	overflow:  hidden !important;;
	background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
	border: 1px solid #E2E7ED;
	border-radius: 12px;
	box-shadow: 0 3px 10px rgba(11, 37, 69, .035);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s
		ease, background .22s ease;
}

/* Decorative vertical accent */
.date-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	bottom: 12px;
	width: 3px;
	border-radius: 0 5px 5px 0;
	background: var(--navy-900);
}

/* Subtle background decoration */
.date-item::after {
	content: "";
	position: absolute;
	width: 75px;
	height: 75px;
	right: -35px;
	bottom: -40px;
	border-radius: 50%;
	background: #F2F6FB;
	pointer-events: none;
}

.date-item:hover {
	transform: translateY(-3px);
	border-color: rgba(184, 145, 47, .38);
	box-shadow: 0 8px 20px rgba(11, 37, 69, .08);
}

.date-number {
	position: relative;
	z-index: 2;
	width: 44px;
	height: 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border-radius: 10px;
	background: linear-gradient(145deg, #FFFDF7, #F8F2E4);
	border: 1px solid rgba(184, 145, 47, .25);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.date-number strong {
	color: var(--navy-900);
	font-size: 17px;
	font-weight: 800;
	line-height: 1;
}

.date-number span {
	margin-top: 4px;
	color: var(--gold-600);
	font-size: 7px;
	font-weight: 900;
	letter-spacing: .13em;
	line-height: 1;
}

.date-info {
	position: relative;
	z-index: 2;
	min-width: 0;
	padding-right: 2px;
}

.date-info strong {
	display: block;
	overflow:  hidden !important;;
	color: var(--navy-900);
	font-size: 11px;
	font-weight: 750;
	line-height: 1.25;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.date-info small {
	display: block;
	margin-top: 5px;
	color: #7A8490;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.25;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.date-time {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 5px;
	color: var(--maroon-600);
	font-size: 9px;
	font-weight: 700;
}

.date-time i {
	font-size: 9px;
}

.hostel-card {
	position: relative;
	overflow:  hidden !important;;
}

.hostel-card .card-header-title {
	display: flex;
	align-items: center;
	min-height: 43px;
	background: #F2F6FB;
	border-left: 4px solid var(--navy-900);
	color: var(--navy-900);
}

.hostel-card .card-header-title i {
	width: 27px;
	height: 27px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 7px;
	font-size: 13px;
}

.hostel-card .card-body {
	padding: 15px !important;
}

@media ( max-width : 1199px) {
	.date-grid {
		grid-template-columns: 1fr;
		gap: 9px;
	}
	.date-item {
		min-height: 65px;
	}
}

@media ( max-width : 991.98px) {
	.date-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media ( max-width : 767.98px) {
	.date-grid {
		grid-template-columns: 1fr;
		gap: 9px;
	}
	.date-item {
		min-height: 68px;
		padding: 11px;
	}
	.date-number {
		width: 43px;
		height: 46px;
	}
	.date-info strong {
		font-size: 11px;
	}
	.date-info small {
		font-size: 9px;
	}
}

@keyframes contentAppear {from { opacity:0;
	transform: translateY(7px);
}

to {
	opacity: 1;
	transform: translateY(0);
}
}

.instruction-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 5px 9px;
	color: var(--navy-700) !important;
	background: #F4F7FA;
	border: 1px solid #E1E6EC;
	border-radius: 7px;
	font-size: 11px;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: transform .2s ease, background .2s ease, border-color .2s
		ease;
}

.instruction-link:hover {
	color: var(--navy-900) !important;
	background: #EDF3F9;
	border-color: #C9D7E5;
	transform: translateX(2px);
}

.instruction-link i {
	font-size: 9px;
}

.contact-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 7px;
}

.contact-item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 7px 9px;
	background: linear-gradient(135deg, #F8FAFC, #FFFFFF);
	border: 1px solid #E4E8ED;
	border-radius: 8px;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s
		ease;
}

.contact-item:hover {
	transform: translateY(-1px);
	border-color: #D5DDE6;
	box-shadow: 0 4px 10px rgba(11, 37, 69, .05);
}

.contact-label {
	margin-bottom: 3px;
	color: #8A94A2;
	font-size: 7px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.contact-link {
	display: block;
	 overflow: hidden !important;
	color: var(--maroon-600);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.password-format {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-top: 6px;
    overflow: hidden !important;
    background: #F8FAFC;
    border: 1px solid #E1E6EC;
    border-radius: 8px;
    box-shadow: var(--shadow-xs);
}

.password-format > div {
    padding: 5px 9px;
    flex-shrink: 0;
}

.password-format small {
    display: block;
    margin-bottom: 3px;
    color: #8A94A2;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .10em;
}

.password-format strong {
    color: var(--navy-900);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .04em;
}

.format-divider {
    width: 1px;
    height: 28px;
    padding: 0 !important;
    background: #DEE4EA;
    flex-shrink: 0;
}

/* ============= PAL Generation  ========== */

#page-wrapper {
	width: 100%;
	min-height: 100vh;
	height: auto !important;
	overflow: visible !important;
}

.freshers-page {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 15px 60px;
	box-sizing: border-box;
	height: auto !important;
	min-height: auto !important;
	overflow: visible !important;
}

.fp-title-icon {
	text-align: center;
	margin: 20px 0 30px;
}

.fp-title-icon h4 {
	margin: 0;
	color: #24344d;
	font-size: 21px;
	font-weight: 700;
}

.fp-title-decoration {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
}

.fp-title-decoration span {
	width: 80px;
	height: 2px;
	background: #C9A34C;
}

.fp-title-decoration i {
	color: #4bb7ae;
	font-size: 18px;
}

.fp-invalid-message {
	width: 100%;
	margin-bottom: 20px;
	padding: 16px 20px;
	box-sizing: border-box;
	border: 1px solid #ffd1d1;
	border-radius: 12px;
	background: #fff5f5;
	color: #d32f2f;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
}


.fp-welcome {
	margin: 0 0 10px;
	color: #252b35;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
}

.fp-student-name {
	font-weight: 700;
	color: #252b35;
}

.fp-application-number {
	color: #198754;
	font-weight: 700;
}

.fp-admission-message {
	margin: 18px 0 8px;
	color: #198754;
	text-align: center;
	font-size: 21px;
	font-weight: 700;
}

.fp-programme-details {
	margin: 0;
	color: #3f4650;
	text-align: center;
	line-height: 1.8;
	font-size: 15px;
}

.fp-campus {
	margin-top: 3px;
}

.fp-card {
	width: 100%;
	margin-bottom: 20px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
}

.fp-message {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 20px;
	padding: 14px 18px;
	border: 1px solid #ffd6d6;
	border-radius: 12px;
	background: #fff5f5;
	color: #d32f2f;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

.fp-section-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 25px;
	background: #fafbfc;
	border-bottom: 1px solid #edf0f3;
	border-radius: 16px 16px 0 0;
}

.fp-section-icon {
	width: 46px;
	height: 46px;
	min-width: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: #eef3ff;
	color: #4e6fcf;
	font-size: 20px;
}

.fp-section-heading {
	min-width: 0;
}

.fp-section-heading h3 {
	margin: 0;
	color: #252b35;
	font-size: 19px;
	font-weight: 700;
}

.fp-section-heading p {
	margin: 4px 0 0;
	color: #737b87;
	font-size: 13px;
}

.fp-upload-btn {
	min-width: 210px;
	min-height: 46px;
	padding: 11px 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 9px;
	background: #198754;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: 0.2s ease;
}

.fp-upload-btn:hover {
	background: #157347;
	transform: translateY(-1px);
}


.fp-payment-agreement-wrapper {
	width: 100%;
	display: block;
}

.fp-payment-agreement-wrapper.payment-selected {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
	gap: 20px;
	align-items: stretch;
	padding: 20px;
}

.fp-payment-body {
	padding: 20px;
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
}

.fp-payment-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
}

.payment-selected .fp-payment-grid {
	grid-template-columns: 1fr;
}

.fp-payment-card {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #e2e6eb;
	border-radius: 14px;
	overflow: hidden;
	box-sizing: border-box;
}

.fp-payment-card:hover {
	border-color: #cfd6e0;
	box-shadow: 0 7px 22px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.fp-payment-header {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 12px;
	background: #f8f9fb;
	border-bottom: 1px solid #e9edf1;
	border-radius: 14px 14px 0 0;
}

.fp-payment-icon {
	width: 42px;
	height: 42px;
	min-width: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: #eef3ff;
	color: #4e6fcf;
	font-size: 18px;
}

.fp-payment-header-text {
	min-width: 0;
}

.fp-payment-label {
	display: block;
	margin-bottom: 3px;
	color: #8a919c;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.fp-payment-header h4 {
	margin: 0;
	color: #252b35;
	font-size: 16px;
	font-weight: 700;
}

.fp-payment-details {
	flex: 1;
	padding: 5px 18px;
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
}

.fp-fee-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 58px;
	border-bottom: 1px solid #edf0f3;
}

.fp-fee-row:last-child {
	border-bottom: 0;
}

.fp-fee-name {
	color: #555d68;
	font-size: 14px;
	font-weight: 600;
}

.fp-fee-amount {
	color: #252b35;
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}

.fp-payment-footer {
	padding: 15px 18px 18px;
}

.fp-payment-btn {
	width: 100%;
	min-height: 46px;
	border: 0;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: 0.2s ease;
}

.fp-payment-btn-id {
	width: 48%;
	min-height: 46px;
	border: 0;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: 0.2s ease;
}

.fp-payment-btn:hover {
	transform: translateY(-1px);
}

.fp-part-btn {
	background: #198754;
}

.fp-part-btn:hover {
	background: #157347;
}

.fp-full-btn {
	background: #4e6fcf;
}

.fp-full-btn:hover {
	background: #405db5;
}

.fp-agreement-body {
	padding: 20px;
	height: 100% !important;
	min-height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: visible !important;
}

.fp-agreement-box {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 17px;
	border: 1px solid #ffe19a;
	border-radius: 12px;
	background: #fffaf0;
	box-sizing: border-box;
}

.fp-agreement-checkbox {
	width: 19px;
	height: 19px;
	min-width: 19px;
	margin-top: 3px;
	cursor: pointer;
}

.fp-agreement-label {
	margin: 0;
	color: #55514a;
	font-size: 14px;
	line-height: 1.6;
	font-weight: 600;
	cursor: pointer;
}

.fp-action-area {
	margin-top: 18px;
	text-align: center;
}

.fp-submit-btn,
.fp-download-btn {
	width: 100%;
	max-width: 320px;
	min-height: 46px;
	border: 0;
	border-radius: 9px;
	padding: 11px 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: 0.2s ease;
}

.fp-submit-btn {
	background: #4e6fcf;
}

.fp-submit-btn:hover {
	background: #405db5;
	transform: translateY(-1px);
}

.fp-download-btn {
	background: #198754;
}

.fp-download-btn:hover {
	background: #157347;
	transform: translateY(-1px);
}

@media (max-width: 991.98px) {
	.freshers-page {
		padding: 16px 12px 50px;
	}

	.fp-payment-grid {
		gap: 15px;
	}
}

@media (max-width: 767.98px) {

	html,
	body {
		width: 100% !important;
		height: auto !important;
		min-height: 100% !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	#page-wrapper {
		width: 100% !important;
		height: auto !important;
		min-height: 100vh !important;
		overflow: visible !important;
	}

	.freshers-page {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		padding: 10px 8px 60px !important;
		overflow: visible !important;
	}

	.fp-title-icon {
		margin: 15px 0 20px;
	}

	.fp-title-icon h4 {
		font-size: 17px;
	}

	.fp-title-decoration span {
		width: 60px;
	}

	.fp-welcome {
		font-size: 15px;
		line-height: 1.6;
	}

	.fp-admission-message {
		font-size: 17px;
		line-height: 1.5;
	}

	.fp-programme-details {
		font-size: 13px;
		line-height: 1.8;
	}

	.fp-card {
		margin-bottom: 14px;
		border-radius: 12px;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}

	.fp-message {
		padding: 12px;
		font-size: 13px;
	}

	.fp-section-header {
		padding: 15px;
		gap: 10px;
		border-radius: 12px 12px 0 0;
	}

	.fp-section-icon {
		width: 39px;
		height: 39px;
		min-width: 39px;
		border-radius: 10px;
		font-size: 17px;
	}

	.fp-section-heading h3 {
		font-size: 16px;
	}

	.fp-section-heading p {
		margin-top: 3px;
		font-size: 11px;
		line-height: 1.4;
	}

	.fp-upload-btn {
		width: 100%;
		min-width: 0;
	}

	.fp-payment-agreement-wrapper.payment-selected {
		display: block;
		padding: 14px;
	}

	.fp-payment-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.fp-payment-body {
		padding: 0;
	}

	.payment-selected .fp-payment-body {
		margin-bottom: 14px;
	}

	.fp-payment-card {
		width: 100%;
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
	}

	.fp-payment-header {
		padding: 15px;
	}

	.fp-payment-icon {
		width: 38px;
		height: 38px;
		min-width: 38px;
	}

	.fp-payment-header h4 {
		font-size: 14px;
	}

	.fp-payment-details {
		padding: 4px 15px;
	}

	.fp-fee-row {
		min-height: auto;
		padding: 13px 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
	}

	.fp-fee-name {
		font-size: 13px;
	}

	.fp-fee-amount {
		font-size: 15px;
		white-space: normal;
	}

	.fp-payment-footer {
		padding: 13px 15px 15px;
	}

	.fp-payment-btn {
		min-height: 44px;
		font-size: 13px;
	}

	.fp-agreement-body {
		padding: 14px;
		height: auto !important;
		min-height: 0;
	}

	.fp-agreement-box {
		padding: 13px;
		gap: 9px;
	}

	.fp-agreement-checkbox {
		width: 18px;
		height: 18px;
		min-width: 18px;
	}

	.fp-agreement-label {
		font-size: 13px;
		line-height: 1.5;
	}

	.fp-submit-btn,
	.fp-download-btn {
		width: 100%;
		max-width: none;
	}

}

@media (max-width: 380px) {

	.freshers-page {
		padding-left: 6px !important;
		padding-right: 6px !important;
	}

	.fp-section-heading h3 {
		font-size: 15px;
	}

	.fp-payment-header h4 {
		font-size: 13px;
	}

	.fp-agreement-label {
		font-size: 12px;
	}

}

@media (max-width: 767px) {

	.fp-upload-heading {
		align-items: flex-start;
		gap: 10px;
	}

	.fp-upload-heading h3 {
		font-size: 16px;
	}

	.fp-upload-heading .fp-upload-btn {
		min-width: auto;
		min-height: 38px;
		padding: 7px 10px;
		font-size: 12px;
	}

	.fp-upload-heading .fp-upload-btn span {
		display: none;
	}

}

img,
video,
iframe {
	max-width: 100%;
}

input,
select,
textarea,
button {
	max-width: 100%;
	box-sizing: border-box;
}
/* ========================= Payments ===========================*/

.student-info {
	padding: 22px;
}

.info-item {
	height: 100%;
	background: #f8fafc;
	border: 1px solid #e7edf3;
	border-radius: 10px;
	padding: 14px 16px;
	transition: all 0.2s ease;
}

.info-item:hover {
	border-color: rgba(43, 118, 170, 0.35);
	box-shadow: 0 2px 8px rgba(43, 118, 170, 0.08);
}

.info-label {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #6c757d;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-bottom: 6px;
}

.info-label i {
	color: rgb(43, 118, 170);
	font-size: 14px;
}

.info-value {
	color: #212529;
	font-size: 15px;
	font-weight: 600;
	word-break: break-word;
}

.transaction-count {
	background: #eaf3f8;
	color: rgb(43, 118, 170);
	border-radius: 20px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
}

.table-wrapper {
	padding: 0 22px 22px 22px;
}

.payment-table-wrapper {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #e9ecef;
	border-radius: 10px;
}

.payment-table thead th {
	background: #f1f6fa;
	color: #334155;
	font-size: 13px;
	font-weight: 700;
	border-bottom: 2px solid #dbe5ec;
	padding: 13px 14px;
	white-space: nowrap;
}

.payment-table tbody td {
	padding: 13px 14px;
	font-size: 13px;
	color: #495057;
	border-color: #edf0f2;
	vertical-align: middle;
	white-space: nowrap;
}

.payment-table tbody tr:hover {
	background: #f8fbfd;
}

.serial-number {
	width: 55px;
	text-align: center;
	font-weight: 600;
	color: rgb(43, 118, 170) !important;
}

.reference-number {
	font-weight: 600;
	color: #343a40 !important;
}

.amount {
	font-weight: 700;
	color: #198754 !important;
}

.advance-amount {
    font-weight: 700;
    color: #221987 !important;
}

.balance-amount {
    font-weight: 700;
    color: #878019 !important;
}


.view-receipt-btn {
	background: rgb(43, 118, 170);
	color: #ffffff;
	border: none;
	border-radius: 7px;
	padding: 7px 13px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	transition: all 0.2s ease;
}

.view-receipt-btn:hover {
	background: rgb(31, 95, 141);
	color: #ffffff;
	transform: translateY(-1px);
}

.view-receipt-btn i {
	margin-right: 5px;
}

.receipt-image {
	display: block;
	margin: 0 auto;
}

.receipt-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 20px;
}

#receiptModal .modal-body {
    padding: 20px;
}

#receiptModal .receipt-preview-card {
    margin: 0 auto;
    max-width: 900px;
}

#receiptModal .receipt-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.action-btn {
	min-width: 140px;
	border-radius: 7px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 600;
}

.print-btn {
	background: rgb(43, 118, 170);
	border-color: rgb(43, 118, 170);
	color: #ffffff;
}

.print-btn:hover {
	background: rgb(31, 95, 141);
	border-color: rgb(31, 95, 141);
	color: #ffffff;
}

.empty-state {
	padding: 35px 20px;
	text-align: center;
	color: #6c757d;
}

.empty-state i {
	font-size: 40px;
	color: #adb5bd;
}

@media ( min-width : 1200px) {
	.info-item {
		padding: 16px 18px;
	}
}

@media ( max-width : 991.98px) {
	.contentBody {
		padding: 15px;
	}
	.student-info {
		padding: 18px;
	}
	.table-wrapper {
		padding: 0 18px 18px;
	}
}

@media ( max-width : 767.98px) {
	.contentBody {
		padding: 10px;
	}
	
	.student-info {
		padding: 12px;
	}
	.info-item {
		padding: 12px;
	}
	.info-label {
		font-size: 11px;
	}
	.info-value {
		font-size: 14px;
	}
	
	.transaction-count {
		font-size: 10px;
		padding: 4px 9px;
	}
	.table-wrapper {
		padding: 0 12px 12px;
	}
	.payment-table-wrapper {
		border-radius: 8px;
	}
	
	.receipt-actions {
		flex-direction: column;
		width: 100%;
		gap: 8px;
	}
	.action-btn {
		width: 100%;
		max-width: 250px;
	}
}

@media print {
	.receipt-actions {
		display: none !important;
	}
	.receipt-image {
		width: 1000px;
		max-width: 100%;
		box-shadow: none;
	}
	
}
/* ================ Document Preview Model ==============*/
.modal-header {
	background: #4262a5;
	color: #fff;
}

.modal-title {
	font-weight: 600;
}

.pdf-viewer-container {
	background: #e9ecef;
	border-radius: 8px;
	padding: 15px;
}

#pdf-canvas {
	max-width: 100%;
	height: auto;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

#pdf-loader, #page-loader {
	text-align: center;
	color: #6c757d;
	padding: 10px;
}

.pdf-page-info {
	font-weight: 600;
	color: #4262a5;
}
/* PDF Modal */

body.modal-open {
    overflow: hidden !important;
}

#uploadDocumentsPreviewModal {
    z-index: 1060;
}

#uploadDocumentsPreviewModal .modal-dialog {
    width: 95%;
    max-width: 1200px;
}

#uploadDocumentsPreviewModal .modal-content {
    height: 90vh;
    max-height: 90vh;
    overflow: hidden;
}

#uploadDocumentsPreviewModal .modal-header {
    background: #4262a5;
    color: #fff;
    flex-shrink: 0;
}

#uploadDocumentsPreviewModal .modal-title {
    font-weight: 600;
}

#uploadDocumentsPreviewModal .modal-body {
    padding: 0;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

#uploadDocumentsPreviewModal .modal-footer {
    flex-shrink: 0;
}

.pdf-preview {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
}

@media (max-width: 767.98px) {

    #uploadDocumentsPreviewModal {
        padding: 0 !important;
    }

    #uploadDocumentsPreviewModal .modal-dialog {
        width: 100%;
        max-width: 100%;
        height: 100%;
        margin: 0;
        padding: 10px;
    }

    #uploadDocumentsPreviewModal .modal-content {
        width: 100%;
        height: calc(100vh - 20px);
        max-height: calc(100vh - 20px);
        margin: 0;
        overflow: hidden;
        border-radius: 10px;
    }

    #uploadDocumentsPreviewModal .modal-header {
        padding: 10px 12px;
        min-height: 50px;
    }

    #uploadDocumentsPreviewModal .modal-title {
        font-size: 16px;
    }

    #uploadDocumentsPreviewModal .modal-body {
        padding: 0;
        overflow: hidden;
        min-height: 0;
    }

    #uploadDocumentsPreviewModal .modal-footer {
        padding: 8px;
    }

    #uploadDocumentsPreviewModal .modal-footer .btn {
        width: 100%;
    }

    #uploadDocumentsPreviewModal .pdf-preview {
        width: 100%;
        height: 100%;
        min-height: 0;
        border: 0;
    }
}
/* ====== Menu =======*/
:root {
	--vit-navy: #17325C;
	--vit-navy-deep: #0F2444;
	--vit-blue: #2C5490;
	--vit-gold: #B8912F;
	--vit-gold-soft: #F4E9CE;
	--vit-surface: #FFFFFF;
	--vit-bg-subtle: #F4F6F9;
	--vit-border: #E3E7EE;
	--vit-text: #2A3646;
	--vit-text-muted: #6B7688;
}

.category-bar {
	display: flex;
	align-items: center;
	overflow-x: auto;
	white-space: nowrap;
	background: var(--vit-surface);
	border-bottom: 1px solid var(--vit-border);
	padding: 8px 16px;
	gap: 2px;
}

.category-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid transparent;
	background: none;
	padding: 7px 12px;
	border-radius: 7px;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .1px;
	color: var(--vit-text-muted);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.category-btn i.cat-icon {
	font-size: 13px;
	color: var(--vit-blue);
	transition: color .2s ease;
}

.category-btn .arrow-icon {
	display: none;
	font-size: 10px;
	color: var(--vit-navy-deep);
}

.category-btn:hover {
	color: var(--vit-navy-deep);
}

.category-btn.active {
	background: #EAF3FB;
	border-color: #C7E1F5;
	color: var(--vit-navy-deep);
}

.category-btn.active .arrow-icon {
	display: inline-block;
}

.category-btn.active i.cat-icon {
	color: var(--vit-navy);
}

.crumb-sep {
	font-size: 11px;
	color: #C2CAD6;
	margin: 0 4px;
	flex-shrink: 0;
}

.submenu-wrapper {
	background: var(--vit-surface);
	border-bottom: 1px solid var(--vit-border);
	box-shadow: 0 14px 26px -18px rgba(15, 36, 68, .18);
}

.submenu {
	display: none;
	align-items: stretch;
	gap: 32px;
	padding: 20px 28px;
}

.submenu-label {
	display: flex;
	align-items: center;
	flex: 0 0 170px;
	font-size: 19px;
	font-weight: 700;
	color: var(--vit-navy);
	letter-spacing: .1px;
	border-right: 1px solid var(--vit-border);
	padding-right: 24px;
}

.submenu-list {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	justify-content: center;
}

.submenu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 7px;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--vit-text);
	transition: background .15s ease, color .15s ease;
	width: fit-content;
	max-width: 100%;
}

.submenu-item .item-icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--vit-gold-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--vit-navy);
	flex-shrink: 0;
	transition: background .15s ease, color .15s ease;
}

.submenu-item:hover {
	background: var(--vit-bg-subtle);
	color: var(--vit-navy-deep);
}

.submenu-item.active {
	background: var(--vit-gold-soft);
	color: var(--vit-navy-deep);
}

.submenu-item.active .item-icon {
	background: #fff;
	color: var(--vit-gold);
}

.mobile-menu-navbar {
	background: var(--vit-surface);
	border-bottom: 1px solid var(--vit-border);
	padding: 8px 15px;
}

.mobile-menu-navbar .navbar-brand {
	color: var(--vit-navy);
	font-size: 15px;
}

.mobile-menu-navbar .navbar-toggler {
	border: 1px solid var(--vit-border);
	border-radius: 7px;
	padding: 5px 9px;
	color: var(--vit-navy);
	background: var(--vit-surface);
}

.mobile-menu-navbar .navbar-toggler:focus {
	box-shadow: none;
}

.mobile-menu-navbar .navbar-toggler i {
	font-size: 21px;
}

.mobile-menu-content {
	background: var(--vit-surface);
	border-bottom: 1px solid var(--vit-border);
	box-shadow: 0 10px 20px -15px rgba(15, 36, 68, .25);
	padding: 8px;
}

.mobile-category-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 12px;
	border: 1px solid transparent;
	border-radius: 7px;
	background: transparent;
	color: var(--vit-text-muted);
	font-size: 13.5px;
	font-weight: 600;
	text-align: left;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.mobile-category-btn:hover, .mobile-category-btn.active {
	background: #EAF3FB;
	border-color: #C7E1F5;
	color: var(--vit-navy-deep);
}

.mobile-category-left {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.mobile-category-icon {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--vit-gold-soft);
	color: var(--vit-blue);
	flex-shrink: 0;
}

.mobile-category-icon i {
	font-size: 14px;
}

.mobile-arrow {
	font-size: 11px;
	color: var(--vit-navy-deep);
	transition: transform .2s ease;
	flex-shrink: 0;
}

.mobile-category-btn.active .mobile-arrow {
	transform: rotate(180deg);
}

.mobile-submenu {
	display: none;
	padding: 4px 8px 8px 42px;
}

.mobile-submenu.show {
	display: block;
}

.mobile-submenu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 9px;
	margin-bottom: 2px;
	border-radius: 7px;
	color: var(--vit-text);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	transition: background .15s ease, color .15s ease;
}

.mobile-submenu-item:hover, .mobile-submenu-item.active {
	background: var(--vit-bg-subtle);
	color: var(--vit-navy-deep);
}

.mobile-item-icon {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background: var(--vit-gold-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vit-navy);
	flex-shrink: 0;
}

.mobile-item-icon i {
	font-size: 13px;
}

@media ( max-width : 767.98px) {
	.mobile-menu-navbar {
		padding: 7px 12px;
	}
	.mobile-menu-content {
		padding: 6px;
	}
	.mobile-category-btn {
		padding: 10px;
		font-size: 13px;
	}
	.mobile-submenu {
		padding-left: 30px;
	}
	.mobile-submenu-item {
		font-size: 12.5px;
	}
}

@media ( max-width : 380px) {
	.mobile-menu-navbar .navbar-brand {
		font-size: 14px;
	}
	.mobile-category-btn {
		font-size: 12.5px;
		padding: 9px;
	}
	.mobile-submenu {
		padding-left: 24px;
	}
	.mobile-submenu-item {
		font-size: 12px;
	}
}

.category-bar::-webkit-scrollbar {
	height: 5px;
}

.category-bar::-webkit-scrollbar-thumb {
	background: #C7CEDA;
	border-radius: 10px;
}

/*====== Alert Message =====*/

.freshers-alert {
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 20px;
	padding: 10px 18px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff1f1;
	border: 1px solid #ffd5d5;
	border-radius: 8px;
	color: #dc3545;
	font-size: 13px;
	font-weight: 600;
}

.freshers-alert.success {
	background: #edf9f2;
	border-color: #ccebd8;
	color: #198754;
}