/* Responsive Job Stylesheet for Sarkari Rahat */

@media (min-width: 768px) {
	.pageHeader {
		width: 100% !important;
		max-width: 100% !important;
	}

	#mmenu {
		width: 100% !important;
		max-width: 100% !important;
	}
}

@media (max-width: 767px) {
	.pageHeader {
		min-width: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	#mmenu {
		min-width: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body {
		overflow-x: hidden !important;
	}

	/* Strip all visual margins, paddings, and borders from layout wrappers on mobile */
	div[align="center"],
	div[align="center"] > div,
	table:not(.responsive-table-wrapper table, .top-recruitment-card table, .vacancy-table-container table),
	tbody:not(.responsive-table-wrapper tbody, .top-recruitment-card tbody, .vacancy-table-container tbody),
	tr:not(.responsive-table-wrapper tr, .top-recruitment-card tr, .vacancy-table-container tr),
	td:not(.responsive-table-wrapper td, .top-recruitment-card td, .vacancy-table-container td) {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		background: transparent !important;
		box-shadow: none !important;
		box-sizing: border-box !important;
	}

	/* Prevent horizontal scrolling on content tables, and shrink font size */
	.responsive-table-wrapper {
		width: 100% !important;
		overflow-x: hidden !important;
		-webkit-overflow-scrolling: touch !important;
		font-size: 11px !important;
		box-sizing: border-box !important;
	}

	/* Enable full word-wrapping and text-wrap inside content tables */
	.responsive-table-wrapper *,
	.responsive-table-wrapper ul,
	.responsive-table-wrapper li,
	.responsive-table-wrapper td,
	.responsive-table-wrapper span,
	.responsive-table-wrapper a {
		white-space: normal !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
	}

	/* Reduce default list spacing to save horizontal room */
	.responsive-table-wrapper ul {
		padding-left: 10px !important;
		margin: 4px 0 !important;
	}

	.responsive-table-wrapper li {
		padding: 4px 0 !important;
		border-bottom: none !important;
	}

	/* Target Important Dates (colspan=9) and Application Fee (colspan=8) cells to make them and their text slightly smaller */
	.responsive-table-wrapper td[colspan="9"],
	.responsive-table-wrapper td[colspan="8"],
	.responsive-table-wrapper td[colspan="9"] *,
	.responsive-table-wrapper td[colspan="8"] * {
		font-size: 10px !important;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		word-break: break-word !important;
	}

	.responsive-table-wrapper td[colspan="8"] li,
	.responsive-table-wrapper td[colspan="9"] li {
		padding: 2px 0 !important;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
	}

	/* Shift dates and fees columns inward and distribute width */
	.responsive-table-wrapper td[colspan="9"] {
		padding-left: 2px !important;
		padding-right: 1px !important;
		width: 46% !important;
		box-sizing: border-box !important;
	}

	.responsive-table-wrapper td[colspan="8"] {
		padding-left: 1px !important;
		padding-right: 2px !important;
		width: 54% !important;
		box-sizing: border-box !important;
	}

	/* Keep content tables side-by-side (traditional columns) */
	.responsive-table-wrapper table {
		display: table !important;
		width: 100% !important;
		border-collapse: collapse !important;
		border: 1px solid #ddd !important;
		background: white !important;
		table-layout: auto !important;
	}

	.responsive-table-wrapper tr {
		display: table-row !important;
	}

	/* Shrink padding inside data cells to fit columns side-by-side */
	.responsive-table-wrapper td {
		display: table-cell !important;
		width: auto !important;
		padding: 4px 3px !important;
		border: 1px solid #ddd !important;
		vertical-align: middle !important;
	}

	/* Optimize table headers font sizes */
	.responsive-table-wrapper h2 {
		font-size: 13px !important;
		margin: 4px 0 !important;
	}

	.responsive-table-wrapper h3 {
		font-size: 11.5px !important;
		margin: 4px 0 !important;
	}

	.responsive-table-wrapper h4 {
		font-size: 10.5px !important;
		margin: 4px 0 !important;
	}

	/* Optimize card spacing for mobile screen edges */
	.card {
		margin: 15px 2px !important;
		padding: 10px !important;
		border-radius: 8px !important;
	}

	/* Stack grid/template-columns vertically on mobile */
	div[style*="display: grid"],
	div[style*="grid-template-columns"] {
		display: block !important;
		width: 100% !important;
	}

	div[style*="display: grid"] > div,
	div[style*="grid-template-columns"] > div {
		width: 100% !important;
		margin-bottom: 12px !important;
		box-sizing: border-box !important;
	}

	/* Stack display: flex containers inside content tables vertically on mobile, except social sharing icons */
	.responsive-table-wrapper div[style*="display: flex"]:not(.post-share-socials),
	.responsive-table-wrapper div[style*="display:flex"]:not(.post-share-socials) {
		display: block !important;
		width: 100% !important;
	}

	.responsive-table-wrapper div[style*="display: flex"]:not(.post-share-socials) > div,
	.responsive-table-wrapper div[style*="display:flex"]:not(.post-share-socials) > div {
		width: 100% !important;
		margin-bottom: 15px !important;
		box-sizing: border-box !important;
	}

	/* Show age limit details line-by-line on mobile */
	.age-limit-details .age-line {
		display: block !important;
		margin-bottom: 5px !important;
	}

	/* Hide Age Calculator widget and show link on mobile */
	.age-calc-widget-container {
		display: none !important;
	}

	.age-calc-mobile-link {
		display: block !important;
	}

	/* Strip card layout from Eligibility Criteria on mobile */
	.eligibility-container {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 10px 0 !important;
		margin: 10px 0 !important;
	}

	.eligibility-container h3 {
		font-size: 14px !important;
		border-bottom: 1px dashed #ddd !important;
		padding-bottom: 5px !important;
		margin-bottom: 10px !important;
		color: #8B1538 !important;
	}

	.eligibility-container li,
	.eligibility-container p,
	.eligibility-container * {
		font-size: 11px !important;
		line-height: 1.5 !important;
		margin-bottom: 8px !important;
	}

	/* Generic Premium Info Container (for custom sections like Exam Pattern, Syllabus, Selection Process) */
	.premium-info-container {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 10px 0 !important;
		margin: 10px 0 !important;
	}

	.premium-info-container h3,
	.premium-info-container h3 * {
		font-size: 14px !important;
		color: #000080 !important;
		border-bottom: 1px dashed #ddd !important;
		padding-bottom: 5px !important;
		margin-bottom: 10px !important;
		text-align: left !important;
	}

	.premium-info-container h4,
	.premium-info-container h4 * {
		font-size: 12px !important;
		color: #8B1538 !important;
		margin-top: 15px !important;
		margin-bottom: 8px !important;
		text-align: left !important;
	}

	.premium-info-container p,
	.premium-info-container li,
	.premium-info-container ul,
	.premium-info-container ol,
	.premium-info-container * {
		font-size: 11px !important;
		line-height: 1.5 !important;
	}

	/* Age Limit section font size optimization on mobile */
	.age-limit-container,
	.age-limit-container * {
		font-size: 11px !important;
	}

	.age-limit-container h3,
	.age-limit-container h3 * {
		font-size: 13px !important;
		color: #000099 !important;
	}

	.age-limit-container li {
		padding: 4px 0 !important;
	}

	/* Make Vacancy Details headers slightly larger on mobile */
	.responsive-table-wrapper h2,
	.responsive-table-wrapper h2 strong,
	.responsive-table-wrapper h2 span {
		font-size: 16px !important;
	}

	.responsive-table-wrapper h3,
	.responsive-table-wrapper h3 strong,
	.responsive-table-wrapper h3 span {
		font-size: 13.5px !important;
	}

	/* Shrink vacancy details tables text and padding to prevent squishing */
	.vacancy-title {
		font-size: 14px !important;
		margin: 15px 0 8px 0 !important;
	}

	.vacancy-table-container table {
		font-size: 11px !important;
	}

	.vacancy-table-container th {
		padding: 6px 4px !important;
		font-size: 11px !important;
	}

	.vacancy-table-container td {
		padding: 5px 3px !important;
		font-size: 10.5px !important;
	}

	/* For the qualifications cell text inside subject wise table */
	.vacancy-table-container td[rowspan] {
		font-size: 10.5px !important;
		line-height: 1.4 !important;
		padding: 8px 6px !important;
	}

	/* Pay Scale font and layout optimization on mobile */
	.pay-scale-container,
	.pay-scale-container * {
		font-size: 11px !important;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
	}

	.pay-scale-container h3,
	.pay-scale-container h3 span {
		font-size: 13.5px !important;
		margin: 10px 0 !important;
		line-height: 1.4 !important;
		color: #000080 !important;
	}

	.pay-scale-container li {
		padding: 4px 0 !important;
	}

	/* Disclaimer container layout & font optimization on mobile */
	.disclaimer-cell {
		padding: 10px 5px !important;
	}

	.disclaimer-container {
		padding: 12px 10px !important;
		border-left-width: 4px !important;
	}

	.disclaimer-container h3 {
		font-size: 13.5px !important;
		margin-bottom: 10px !important;
	}

	.disclaimer-container,
	.disclaimer-container p,
	.disclaimer-container * {
		font-size: 11px !important;
		line-height: 1.5 !important;
	}

	/* Force post share social media icons to remain in a single horizontal row on mobile */
	.post-share-socials {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
		gap: 15px !important;
	}

	/* Optimize Why Apply, Trending, FAQ, and How to Apply sections on mobile to be compact like Disclaimer */
	.why-apply-section,
	.trending-section,
	.faq-section,
	.how-to-apply-section {
		padding: 12px 10px !important;
		margin: 15px 2px !important;
		border-left-width: 4px !important;
	}

	.why-apply-section h2,
	.trending-section h2,
	.faq-section h2,
	.how-to-apply-section h2 {
		font-size: 13.5px !important;
		margin-bottom: 10px !important;
		line-height: 1.4 !important;
	}

	.why-apply-section p,
	.trending-section p,
	.faq-section p,
	.faq-section h4,
	.how-to-apply-section p,
	.how-to-apply-section h2,
	.how-to-apply-section ol,
	.how-to-apply-section li,
	.why-apply-section *,
	.trending-section *,
	.faq-section *,
	.how-to-apply-section * {
		font-size: 11px !important;
		line-height: 1.5 !important;
	}

	.faq-section div {
		margin-bottom: 12px !important;
		padding-bottom: 8px !important;
	}

	/* Optimize Top Recruitment Card text sizes on mobile */
	.top-recruitment-card {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 10px 0 !important;
		margin: 10px 0 !important;
	}

	/* Hide the "Recruitment Notification" badge completely on mobile */
	.top-recruitment-card div[style*="background: linear-gradient(135deg, #8B1538"] {
		display: none !important;
	}

	/* Style the top recruitment card table to display side-by-side on mobile */
	.top-recruitment-card table {
		display: table !important;
		width: 100% !important;
		table-layout: fixed !important;
		border: none !important;
	}

	.top-recruitment-card tr {
		display: table-row !important;
	}

	.top-recruitment-card td {
		display: table-cell !important;
		padding: 8px 4px !important;
		vertical-align: top !important;
		border-bottom: 1px solid #eee !important;
		background: transparent !important;
	}

	.top-recruitment-card tr:last-child td {
		border-bottom: none !important;
	}

	.top-recruitment-card td:first-child {
		width: 95px !important; /* Fixed label width matching the screenshot */
		font-size: 11.5px !important;
		color: #ff0000 !important;
		font-weight: bold !important;
	}

	.top-recruitment-card td:last-child {
		width: auto !important;
		font-size: 11px !important;
		color: #333 !important;
	}

	.top-recruitment-card h1 {
		font-size: 13.5px !important;
		margin: 0 !important;
		line-height: 1.4 !important;
		color: #8B1538 !important;
		font-weight: bold !important;
		text-align: left !important;
	}

	.top-recruitment-card td:last-child * {
		font-size: 11px !important;
	}

	/* Make the original grid card responsive on mobile */
	.card {
		padding: 12px 10px !important;
		margin: 12px 0 !important;
	}

	.card div[style*="display: grid"],
	.card div[style*="display:grid"] {
		display: block !important;
	}

	.card div[style*="background: linear-gradient(135deg, #8B1538"],
	.card div[style*="background:linear-gradient(135deg, #8B1538"] {
		width: 100% !important;
		padding: 8px 10px !important;
		margin-bottom: 10px !important;
		border-radius: 8px !important;
		box-sizing: border-box !important;
	}
	
	.card div[style*="background: linear-gradient(135deg, #8B1538"] h3,
	.card div[style*="background:linear-gradient(135deg, #8B1538"] h3 {
		font-size: 11px !important;
	}

	.card h1 {
		font-size: 14px !important;
		margin-bottom: 8px !important;
		line-height: 1.3 !important;
	}

	.card div[style*="display: flex"],
	.card div[style*="display:flex"] {
		gap: 6px !important;
		margin-bottom: 10px !important;
	}

	.card div[style*="background: #e3f2fd"],
	.card div[style*="background:#e3f2fd"],
	.card div[style*="background: #f3e5f5"],
	.card div[style*="background:#f3e5f5"] {
		padding: 4px 8px !important;
		font-size: 10px !important;
		border-radius: 12px !important;
	}

	.card div[style*="font-size: 16px"],
	.card div[style*="font-size:16px"] {
		font-size: 11px !important;
		line-height: 1.4 !important;
	}

	/* Float reminder system styling for mobile */
	#reminder-button-container {
		top: 10px !important;
		right: 10px !important;
		padding: 8px 12px !important;
		border-radius: 10px !important;
		box-shadow: 0 4px 15px rgba(139, 21, 56, 0.2) !important;
	}

	#reminder-button-container div {
		font-size: 11px !important;
		margin-bottom: 5px !important;
	}

	#reminder-button-container button {
		padding: 6px 12px !important;
		font-size: 11px !important;
		border-radius: 15px !important;
	}

	#reminder-button-container #stop-reminder-btn {
		padding: 4px 10px !important;
		font-size: 10px !important;
		margin-top: 4px !important;
	}

	#reminder-button-container #reminder-status {
		font-size: 9px !important;
		margin-top: 4px !important;
	}
}

/* Why Apply, Trending, FAQ, and How to Apply premium styling */
.why-apply-section {
    background: #f1f8e9;
    border-left: 5px solid #2e7d32;
    border-radius: 12px;
    padding: 25px;
    margin: 25px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: left;
    font-family: 'Segoe UI', sans-serif;
}
.why-apply-section h2 {
    color: #1b5e20 !important;
    margin: 0 0 15px 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: none !important;
    border-left: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.why-apply-section li {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #111 !important;
}

.trending-section {
    background: #e8f5e9;
    border-left: 5px solid #388e3c;
    border-radius: 12px;
    padding: 25px;
    margin: 25px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: left;
    font-family: 'Segoe UI', sans-serif;
}
.trending-section h2 {
    color: #1b5e20 !important;
    margin: 0 0 15px 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: none !important;
    border-left: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.trending-section p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #111 !important;
}

.faq-section {
    background: #ffffff;
    border: 1px solid #c8e6c9;
    border-radius: 12px;
    padding: 25px;
    margin: 25px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: left;
    font-family: 'Segoe UI', sans-serif;
}
.faq-section h2 {
    color: #2e7d32 !important;
    margin: 0 0 20px 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-bottom: 2px solid #e8f5e9 !important;
    padding-bottom: 10px !important;
    background: none !important;
    border-left: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.faq-section h4 {
    margin: 0 0 10px 0 !important;
    color: #1b5e20 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
}
.faq-section p {
    font-size: 15px !important;
    color: #111 !important;
    line-height: 1.5 !important;
}

.how-to-apply-section {
    background: #fff9f9;
    border: 1px solid #ffccd5;
    border-radius: 12px;
    padding: 25px;
    margin: 25px 0;
    text-align: left;
    font-family: 'Segoe UI', sans-serif;
}
.how-to-apply-section h2 {
    color: #c62828 !important;
    margin: 0 0 15px 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #ffccd5 !important;
    padding-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: none !important;
    border-left: none !important;
    box-shadow: none !important;
    padding: 0 0 10px 0 !important;
}
.how-to-apply-section li {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #111 !important;
}