@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ==========================================================================
   MasterStudy LMS Opportunities Stylesheet
   Matching exact header navbar and hero section design from reference
   ========================================================================== */

:root {
	--opp-primary: #5A32E8;
	--opp-primary-dark: #4321B9;
	--opp-primary-light: #F3E8FF;
	--opp-text-dark: #0F172A;
	--opp-text-muted: #64748B;
	--opp-bg-hero: #F9F8FE;
	--opp-bg-light: #F8FAFC;
	--opp-card-bg: #FFFFFF;
	--opp-border-color: #E2E8F0;
	--opp-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--opp-radius: 20px;
	--opp-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.stm-lms-opportunities-wrapper,
.stm-opportunity-detail-wrapper {
	font-family: var(--opp-font-family);
	color: var(--opp-text-dark);
	max-width: 1300px;
	margin: 0 auto;
	padding: 20px;
	background-color: #FFFFFF;
	box-sizing: border-box;
}

.stm-lms-opportunities-wrapper button,
.stm-opportunity-detail-wrapper button {
	font-family: inherit;
	box-sizing: border-box;
	text-transform: none;
	letter-spacing: normal;
}

/* ==========================================================================
   Top Navigation Bar (Matching Screenshot Header)
   ========================================================================== */
.opp-navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
	background: #FFFFFF;
	border-bottom: 1px solid #F1F5F9;
	margin-bottom: 24px;
}

.nav-brand .brand-logo {
	font-size: 28px;
	font-weight: 800;
	color: #0F172A;
	text-decoration: none;
	letter-spacing: -0.5px;
}

.nav-brand .brand-logo .dot {
	color: var(--opp-primary);
}

.nav-menu-links {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-menu-links li {
	position: relative;
	padding: 10px 0;
}

.nav-menu-links li a {
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	color: #475569;
	transition: var(--opp-transition);
}

.nav-menu-links li a:hover {
	color: var(--opp-primary);
}

/* Active Menu Item with Underline Indicator */
.nav-menu-links li.active a {
	color: var(--opp-primary);
	font-weight: 700;
}

.nav-menu-links li.active::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: -4px;
	right: -4px;
	height: 3px;
	background-color: var(--opp-primary);
	border-radius: 3px 3px 0 0;
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.nav-search-box {
	position: relative;
	display: flex;
	align-items: center;
}

.nav-search-box input {
	width: 220px;
	padding: 9px 38px 9px 16px;
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 50px;
	font-size: 14px;
	font-family: inherit;
	color: #1E293B;
	transition: var(--opp-transition);
}

.nav-search-box input:focus {
	outline: none;
	border-color: var(--opp-primary);
	background: #FFFFFF;
	box-shadow: 0 0 0 3px rgba(90, 50, 232, 0.1);
	width: 260px;
}

.nav-search-box .search-submit-btn {
	position: absolute;
	right: 12px;
	background: none;
	border: none;
	color: #64748B;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-icon-btn {
	position: relative;
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #475569;
	cursor: pointer;
	transition: var(--opp-transition);
}

.nav-icon-btn:hover {
	background: #F1F5F9;
	color: var(--opp-primary);
}

.notification-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	background: #EF4444;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #FFFFFF;
}

.nav-user-profile {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	padding: 4px;
	border-radius: 50px;
	transition: var(--opp-transition);
}

.nav-user-profile:hover {
	background: #F8FAFC;
}

.avatar-circle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.caret-icon {
	color: #64748B;
}

/* ==========================================================================
   Hero Section (Matching Exact Design Specs)
   ========================================================================== */
.opp-hero-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--opp-bg-hero);
	border-radius: 24px;
	padding: 48px 56px;
	margin-bottom: 40px;
	position: relative;
	overflow: hidden;
}

.hero-left {
	max-width: 58%;
}

.hero-left-img {
	max-width: 100%;
	height: auto;
	margin-bottom: 16px;
	border-radius: 12px;
	object-fit: contain;
}

.hero-title {
	margin: 0 0 16px 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hero-title .title-primary {
	font-size: 44px;
	font-weight: 700;
	color: #0F172A;
	line-height: 1.15;
	letter-spacing: -0.8px;
}

.hero-title .title-highlight {
	font-size: 40px;
	font-weight: 700;
	color: var(--opp-primary);
	line-height: 1.15;
	letter-spacing: -0.8px;
}

.hero-description {
	font-size: 16px;
	line-height: 1.6;
	color: #475569;
	margin: 0 0 32px 0;
	font-weight: 450;
}

/* 3 Stat Badges Row */
.hero-badges-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.hero-stat-pill {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px 10px 12px;
	border-radius: 14px;
	transition: var(--opp-transition);
}

.hero-stat-pill:hover {
	transform: translateY(-2px);
}

/* Pill 1: Purple */
.pill-purple {
	background-color: #F3E8FF;
	border: 1px solid #E9D5FF;
}

.box-purple {
	background-color: #E9D5FF;
	color: #7E22CE;
}

/* Pill 2: Green */
.pill-green {
	background-color: #DCFCE7;
	border: 1px solid #BBF7D0;
}

.box-green {
	background-color: #BBF7D0;
	color: #15803D;
}

/* Pill 3: Gold */
.pill-gold {
	background-color: #FEF3C7;
	border: 1px solid #FDE68A;
}

.box-gold {
	background-color: #FDE68A;
	color: #B45309;
}

.pill-icon-box {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pill-text-wrapper {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.pill-number {
	font-size: 15px;
	font-weight: 800;
	color: #0F172A;
}

.pill-label {
	font-size: 12px;
	font-weight: 500;
	color: #64748B;
}

/* Hero Right Side 3D Graphic */
.hero-right {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 40%;
}

.hero-illustration-wrapper {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hero-3d-img {
	max-width: 420px;
	width: 100%;
	height: auto;
	border-radius: 20px;
	object-fit: contain;
	transition: var(--opp-transition);
}

.hero-3d-img:hover {
	transform: scale(1.02) rotate(0.5deg);
}

/* ==========================================================================
   Main Content Directory Feed
   ========================================================================== */
.opp-main-container {
	margin-top: 20px;
}

.opp-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.opp-tabs-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #F8FAFC;
	padding: 6px;
	border-radius: 14px;
	border: 1px solid #E2E8F0;
	overflow-x: auto;
}

.opp-tab {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: none;
	background: none;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: #64748B;
	cursor: pointer;
	transition: var(--opp-transition);
	white-space: nowrap;
}

.opp-tab:hover {
	color: var(--opp-primary);
	background: rgba(90, 50, 232, 0.05);
}

.opp-tab.active {
	background: #FFFFFF;
	color: var(--opp-primary);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.opp-filter-controls {
	display: flex;
	align-items: center;
	gap: 12px;
}

.opp-search-field {
	position: relative;
	display: flex;
	align-items: center;
}

.opp-search-field .field-icon {
	position: absolute;
	left: 14px;
	color: #94A3B8;
}

.opp-search-field input {
	padding: 10px 14px 10px 38px;
	border: 1px solid #CBD5E1;
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
	color: #0F172A;
	width: 240px;
	transition: var(--opp-transition);
}

.opp-search-field input:focus {
	outline: none;
	border-color: var(--opp-primary);
	box-shadow: 0 0 0 3px rgba(90, 50, 232, 0.1);
}

.opp-select-field select {
	padding: 10px 16px;
	border: 1px solid #CBD5E1;
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
	color: #0F172A;
	background-color: #FFFFFF;
	cursor: pointer;
}

/* Opportunities Grid */
.opp-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	gap: 24px;
}

.opp-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 18px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	transition: var(--opp-transition);
}

.opp-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.08);
	border-color: #CBD5E1;
}

.card-header-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.category-badge {
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 20px;
	letter-spacing: 0.2px;
}

.bookmark-btn {
	background: none;
	border: none;
	color: #94A3B8;
	cursor: pointer;
	padding: 4px;
	border-radius: 6px;
	transition: var(--opp-transition);
}

.bookmark-btn:hover {
	color: var(--opp-primary);
	background: #F1F5F9;
}

.bookmark-btn.saved {
	color: var(--opp-primary);
	fill: var(--opp-primary);
}

.opp-card-title {
	margin: 0 0 8px 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}

.opp-card-title a {
	color: #0F172A;
	text-decoration: none;
	transition: var(--opp-transition);
}

.opp-card-title a:hover {
	color: var(--opp-primary);
}

.opp-provider-info {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: #64748B;
	margin-bottom: 12px;
}

.opp-card-desc {
	font-size: 14px;
	line-height: 1.55;
	color: #475569;
	margin: 0 0 16px 0;
	flex-grow: 1;
}

.opp-card-tags {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.tag-pill {
	font-size: 12px;
	font-weight: 600;
	color: #475569;
	background: #F1F5F9;
	padding: 3px 10px;
	border-radius: 6px;
}

.opp-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	border-top: 1px solid #F1F5F9;
}

.footer-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: #64748B;
	font-weight: 500;
}

.meta-location, .meta-deadline {
	display: flex;
	align-items: center;
	gap: 4px;
}

.apply-now-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--opp-primary);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 18px;
	border-radius: 10px;
	text-decoration: none;
	transition: var(--opp-transition);
}

.apply-now-btn:hover {
	background: var(--opp-primary-dark);
	box-shadow: 0 4px 12px rgba(90, 50, 232, 0.25);
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
	.opp-hero-section {
		flex-direction: column;
		padding: 36px 32px;
		gap: 32px;
	}

	.hero-left, .hero-right {
		max-width: 100%;
	}

	.opp-navbar {
		flex-wrap: wrap;
		gap: 16px;
	}
}

@media (max-width: 768px) {
	.nav-menu-links {
		display: none;
	}

	.hero-title .title-primary {
		font-size: 32px;
	}

	.hero-title .title-highlight {
		font-size: 28px;
	}

	.hero-badges-row {
		flex-direction: column;
		align-items: stretch;
	}

	.opp-cards-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Filter Card & Category Pills Bar Section (Matching User Reference Image)
   ========================================================================== */
.opp-filters-section {
	margin-top: 24px;
	width: 100%;
}

.opp-filter-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	padding: 20px 24px;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

.filter-controls-wrapper {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	flex-wrap: wrap;
}

.filter-col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	min-width: 180px;
}

.filter-col.search-col {
	flex: 1.5;
	min-width: 240px;
}

.filter-col.action-col {
	flex: 0 0 auto;
	min-width: max-content;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}

.filter-col label {
	font-size: 13px;
	font-weight: 700;
	color: #0F172A;
	margin: 0;
}

.action-top-label {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	margin-bottom: 8px;
}

.stm-lms-opportunities-wrapper .reset-filters-btn,
.reset-filters-btn {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	color: #64748B !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	padding: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	line-height: 1 !important;
	height: auto !important;
	min-height: 0 !important;
	transition: var(--opp-transition) !important;
}

.stm-lms-opportunities-wrapper .reset-filters-btn:hover,
.reset-filters-btn:hover {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--opp-primary) !important;
	box-shadow: none !important;
}

.stm-lms-opportunities-wrapper .reset-filters-btn svg,
.reset-filters-btn svg {
	stroke: currentColor !important;
}

.input-with-icon, .select-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.input-with-icon .search-icon {
	position: absolute;
	left: 14px;
	color: #94A3B8;
	pointer-events: none;
}

.input-with-icon input {
	width: 100%;
	padding: 10px 14px 10px 38px;
	border: 1px solid #CBD5E1;
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
	color: #0F172A;
	background-color: #FFFFFF;
	transition: var(--opp-transition);
	box-sizing: border-box;
}

.input-with-icon input:focus {
	outline: none;
	border-color: var(--opp-primary);
	box-shadow: 0 0 0 3px rgba(90, 50, 232, 0.1);
}

.select-wrapper select {
	width: 100%;
	padding: 10px 36px 10px 14px;
	border: 1px solid #CBD5E1;
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
	color: #0F172A;
	background-color: #FFFFFF;
	appearance: none;
	cursor: pointer;
	transition: var(--opp-transition);
	box-sizing: border-box;
}

.select-wrapper select:focus {
	outline: none;
	border-color: var(--opp-primary);
	box-shadow: 0 0 0 3px rgba(90, 50, 232, 0.1);
}

.select-wrapper .calendar-icon {
	position: absolute;
	left: 14px;
	color: #64748B;
	pointer-events: none;
}

.select-wrapper.date-select select, .select-wrapper:has(.calendar-icon) select {
	padding-left: 38px;
}

.select-wrapper .select-caret {
	position: absolute;
	right: 14px;
	color: #64748B;
	pointer-events: none;
}

.stm-lms-opportunities-wrapper .apply-filters-btn,
.apply-filters-btn {
	background: var(--opp-primary) !important;
	background-color: var(--opp-primary) !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 10px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	padding: 10.5px 24px !important;
	cursor: pointer !important;
	transition: var(--opp-transition) !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	outline: none !important;
	line-height: normal !important;
}

.stm-lms-opportunities-wrapper .apply-filters-btn:hover,
.apply-filters-btn:hover {
	background: var(--opp-primary-dark) !important;
	background-color: var(--opp-primary-dark) !important;
	box-shadow: 0 4px 12px rgba(90, 50, 232, 0.2) !important;
}

/* Category Pills Row */
.opp-category-pills-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	flex-wrap: wrap;
}

/* Category Pills Row Hover & Active States */
.category-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 12px;
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
}

.category-pill svg {
	transition: stroke 0.2s ease, fill 0.2s ease;
}

.category-pill:hover:not(.active) {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* Pill 1: All Opportunities */
.category-pill.pill-all {
	background-color: #F1F5F9 !important;
	color: #475569 !important;
	border-color: #E2E8F0 !important;
}
.category-pill.pill-all:hover:not(.active) {
	background-color: #E2E8F0 !important;
	color: var(--opp-primary) !important;
}
.category-pill.pill-all.active {
	background-color: var(--opp-primary) !important;
	color: #FFFFFF !important;
	border-color: var(--opp-primary) !important;
	box-shadow: 0 4px 14px rgba(90, 50, 232, 0.3) !important;
}

/* Pill 2: Scholarships */
.category-pill.pill-scholarships {
	background-color: #F3E8FF !important;
	color: #7E22CE !important;
	border-color: #E9D5FF !important;
}
.category-pill.pill-scholarships:hover:not(.active) {
	background-color: #E9D5FF !important;
}
.category-pill.pill-scholarships.active {
	background-color: #7E22CE !important;
	color: #FFFFFF !important;
	border-color: #7E22CE !important;
	box-shadow: 0 4px 14px rgba(126, 34, 206, 0.3) !important;
}

/* Pill 3: Competitions */
.category-pill.pill-competitions {
	background-color: #FFF8EC !important;
	color: #D97706 !important;
	border-color: #FDE68A !important;
}
.category-pill.pill-competitions:hover:not(.active) {
	background-color: #FDE68A !important;
}
.category-pill.pill-competitions.active {
	background-color: #D97706 !important;
	color: #FFFFFF !important;
	border-color: #D97706 !important;
	box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3) !important;
}

/* Pill 4: Grants */
.category-pill.pill-grants {
	background-color: #DCFCE7 !important;
	color: #15803D !important;
	border-color: #BBF7D0 !important;
}
.category-pill.pill-grants:hover:not(.active) {
	background-color: #BBF7D0 !important;
}
.category-pill.pill-grants.active {
	background-color: #15803D !important;
	color: #FFFFFF !important;
	border-color: #15803D !important;
	box-shadow: 0 4px 14px rgba(21, 128, 61, 0.3) !important;
}

/* Pill 5: Internships */
.category-pill.pill-internships {
	background-color: #E0F2FE !important;
	color: #0284C7 !important;
	border-color: #BAE6FD !important;
}
.category-pill.pill-internships:hover:not(.active) {
	background-color: #BAE6FD !important;
}
.category-pill.pill-internships.active {
	background-color: #0284C7 !important;
	color: #FFFFFF !important;
	border-color: #0284C7 !important;
	box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
}

/* Pill 6: Fellowships */
.category-pill.pill-fellowships {
	background-color: #FCE7F3 !important;
	color: #DB2777 !important;
	border-color: #FBCFE8 !important;
}
.category-pill.pill-fellowships:hover:not(.active) {
	background-color: #FBCFE8 !important;
}
.category-pill.pill-fellowships.active {
	background-color: #DB2777 !important;
	color: #FFFFFF !important;
	border-color: #DB2777 !important;
	box-shadow: 0 4px 14px rgba(219, 39, 119, 0.3) !important;
}

/* Pill 7: Programs */
.category-pill.pill-programs {
	background-color: #F1F5F9 !important;
	color: #475569 !important;
	border-color: #E2E8F0 !important;
}
.category-pill.pill-programs:hover:not(.active) {
	background-color: #E2E8F0 !important;
}
.category-pill.pill-programs.active {
	background-color: #475569 !important;
	color: #FFFFFF !important;
	border-color: #475569 !important;
	box-shadow: 0 4px 14px rgba(71, 85, 105, 0.3) !important;
}

/* Ensure icons turn white on active pill */
.category-pill.active svg {
	stroke: #FFFFFF !important;
}

/* ==========================================================================
   4-Column Opportunity Cards Grid Section (Matching Reference Image)
   ========================================================================== */
.opp-cards-section {
	margin-top: 32px;
	width: 100%;
}

.opp-grid-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 16px;
}

.grid-count-info {
	font-size: 14px;
	font-weight: 500;
	color: #64748B;
}

.grid-count-info .count-num, .grid-count-info .total-num {
	font-weight: 700;
	color: #0F172A;
}

.grid-view-controls {
	display: flex;
	align-items: center;
	gap: 16px;
}

.sort-select-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #64748B;
}

.sort-dropdown-box {
	position: relative;
	display: flex;
	align-items: center;
}

.sort-dropdown-box select {
	padding: 8px 32px 8px 14px;
	border: 1px solid #CBD5E1;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	color: #0F172A;
	background-color: #FFFFFF;
	appearance: none;
	cursor: pointer;
	transition: var(--opp-transition);
}

.sort-dropdown-box select:focus {
	outline: none;
	border-color: var(--opp-primary);
}

.sort-dropdown-box .select-caret {
	position: absolute;
	right: 12px;
	color: #64748B;
	pointer-events: none;
}

/* Layout Toggle Controls (Grid / List Switcher) */
.layout-toggle-group {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #FFFFFF;
	padding: 4px;
	border: 1px solid #CBD5E1;
	border-radius: 12px;
}

.stm-lms-opportunities-wrapper .layout-btn,
.layout-btn {
	background: #FFFFFF !important;
	background-color: #FFFFFF !important;
	border: 1px solid #E2E8F0 !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	border-radius: 8px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

.stm-lms-opportunities-wrapper .layout-btn svg,
.layout-btn svg {
	width: 18px !important;
	height: 18px !important;
	stroke: #64748B !important;
	fill: none !important;
	display: block !important;
	transition: all 0.2s ease !important;
}

.stm-lms-opportunities-wrapper .layout-btn:hover:not(.active),
.layout-btn:hover:not(.active) {
	background: #F3E8FF !important;
	background-color: #F3E8FF !important;
	border-color: #E9D5FF !important;
}

.stm-lms-opportunities-wrapper .layout-btn:hover:not(.active) svg,
.layout-btn:hover:not(.active) svg {
	stroke: var(--opp-primary) !important;
}

.stm-lms-opportunities-wrapper .layout-btn.active,
.layout-btn.active {
	background: var(--opp-primary) !important;
	background-color: var(--opp-primary) !important;
	border-color: var(--opp-primary) !important;
	box-shadow: 0 3px 10px rgba(90, 50, 232, 0.3) !important;
}

.stm-lms-opportunities-wrapper .layout-btn.active svg,
.layout-btn.active svg {
	stroke: #FFFFFF !important;
}

/* 4 Column Cards Grid */
.opp-cards-grid-4col {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.opp-card-item {
	background: #FFFFFF;
	border: 1px solid #F1F5F9;
	border-radius: 18px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	transition: var(--opp-transition);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
}

.opp-card-item:hover {
	transform: translateY(-4px);
	border-color: #CBD5E1;
	box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.08);
}

.card-top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.company-logo-box {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.deadline-pill-badge {
	font-size: 11px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 20px;
	white-space: nowrap;
}

.card-title {
	margin: 0 0 10px 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
}

.card-title a {
	color: #0F172A;
	text-decoration: none;
	transition: var(--opp-transition);
}

.card-title a:hover {
	color: var(--opp-primary);
}

.card-category-badge {
	margin-bottom: 12px;
}

.cat-pill {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 20px;
}

.card-description {
	font-size: 13.5px;
	line-height: 1.55;
	color: #64748B;
	margin: 0 0 24px 0;
	flex-grow: 1;
}

.card-footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	border-top: 1px solid #F8FAFC;
}

.footer-meta-info {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 12px;
	font-weight: 600;
	color: #64748B;
}

.meta-item {
	display: flex;
	align-items: center;
	gap: 4px;
}

.arrow-action-btn {
	background: none;
	border: none;
	color: var(--opp-primary);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: var(--opp-transition);
}

.arrow-action-btn:hover {
	background: #F3E8FF;
	transform: translateX(3px);
}

/* Responsive Grid Breakpoints */
@media (max-width: 1200px) {
	.opp-cards-grid-4col {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.opp-cards-grid-4col {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Pagination Navigation Bar (8 Items Per Page)
   ========================================================================== */
.opp-pagination-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid #F1F5F9;
}

.pag-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 1px solid #CBD5E1 !important;
	background: #FFFFFF !important;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 700;
	color: #0F172A !important;
	cursor: pointer;
	transition: all 0.2s ease;
}

.pag-btn:hover:not(:disabled) {
	border-color: var(--opp-primary) !important;
	color: var(--opp-primary) !important;
	background: #F3E8FF !important;
}

.pag-btn:disabled, .pag-btn.disabled {
	opacity: 0.45;
	cursor: not-allowed;
	border-color: #E2E8F0 !important;
	color: #94A3B8 !important;
	background: #F8FAFC !important;
}

.pag-numbers-list {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pag-num-btn {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	border: 1px solid #CBD5E1 !important;
	background: #FFFFFF !important;
	font-size: 14px;
	font-weight: 700;
	color: #475569 !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.pag-num-btn:hover:not(.active) {
	border-color: var(--opp-primary) !important;
	color: var(--opp-primary) !important;
	background: #F3E8FF !important;
}

.pag-num-btn.active {
	background: var(--opp-primary) !important;
	color: #FFFFFF !important;
	border-color: var(--opp-primary) !important;
	box-shadow: 0 4px 12px rgba(90, 50, 232, 0.25) !important;
}

/* ==========================================================================
   Newsletter Subscription Section (Last Section - Matching Screenshot)
   ========================================================================== */
.opp-newsletter-section {
	margin-top: 48px;
	margin-bottom: 20px;
	width: 100%;
}

.newsletter-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--opp-bg-hero);
	border: 1px solid #F1F0FB;
	border-radius: 20px;
	padding: 36px 48px;
	gap: 32px;
}

.newsletter-left {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 55%;
}

.envelope-icon-box {
	flex-shrink: 0;
}

.newsletter-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.newsletter-title {
	font-size: 20px;
	font-weight: 700;
	color: #0F172A;
	margin: 0;
}

.newsletter-desc {
	font-size: 14px;
	line-height: 1.5;
	color: #64748B;
	margin: 0;
}

.newsletter-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 380px;
}

.newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.form-input-group {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.form-input-group input {
	flex: 1;
	padding: 12px 18px;
	border: 1px solid #CBD5E1 !important;
	background: #FFFFFF !important;
	border-radius: 12px;
	font-size: 14px;
	font-family: inherit;
	color: #0F172A !important;
	box-sizing: border-box;
	transition: all 0.2s ease;
}

.form-input-group input:focus {
	outline: none;
	border-color: var(--opp-primary) !important;
	box-shadow: 0 0 0 3px rgba(90, 50, 232, 0.1) !important;
}

.newsletter-submit-btn {
	background: var(--opp-primary) !important;
	color: #FFFFFF !important;
	border: none;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 700;
	padding: 12px 28px;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s ease;
}

.newsletter-submit-btn:hover {
	background: var(--opp-primary-dark) !important;
	box-shadow: 0 4px 14px rgba(90, 50, 232, 0.3) !important;
}

.privacy-note {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #64748B;
	margin-top: 2px;
}

.privacy-note svg {
	color: #64748B;
	flex-shrink: 0;
}

@media (max-width: 992px) {
	.newsletter-content-wrapper {
		flex-direction: column;
		align-items: stretch;
		padding: 28px 24px;
		gap: 24px;
	}

	.newsletter-left {
		max-width: 100%;
	}

	.newsletter-right {
		min-width: 100%;
	}
}

@media (max-width: 576px) {
	.form-input-group {
		flex-direction: column;
		align-items: stretch;
	}

	.newsletter-submit-btn {
		width: 100%;
	}
}

/* ==========================================================================
   Single Opportunity Detail Page Styles (Matching Reference Image)
   ========================================================================== */
.stm-opportunity-detail-wrapper {
	padding-top: 10px;
}

.detail-top-nav {
	margin-bottom: 20px;
}

.back-board-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #5A32E8;
	text-decoration: none;
	transition: var(--opp-transition);
}

.back-board-link:hover {
	color: #4321B9;
	transform: translateX(-3px);
}

.detail-hero-card {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 24px;
	padding: 32px;
	gap: 32px;
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
	margin-bottom: 28px;
}

.hero-card-left {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.hero-logo-title-row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.detail-logo-box {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: #0F172A;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

.detail-logo-img {
	max-width: 48px;
	max-height: 48px;
	object-fit: contain;
}

.detail-main-title {
	font-size: 26px;
	font-weight: 800;
	color: #0F172A;
	margin: 0 0 10px 0;
	line-height: 1.25;
}

.detail-badges-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.detail-badge-pill {
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
}

.detail-hero-description {
	font-size: 15px;
	line-height: 1.6;
	color: #475569;
	margin: 20px 0;
}

.detail-hero-meta-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	padding-top: 16px;
	border-top: 1px solid #F1F5F9;
}

.detail-hero-meta-grid .meta-col {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.detail-hero-meta-grid .meta-label {
	font-size: 12px;
	color: #94A3B8;
	font-weight: 500;
}

.detail-hero-meta-grid .meta-val {
	font-size: 13px;
	color: #0F172A;
	font-weight: 700;
}

.hero-card-right {
	width: 320px;
	flex-shrink: 0;
}

.hero-image-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 220px;
	border-radius: 18px;
	overflow: hidden;
}

.detail-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 18px;
}

.stm-lms-opportunities-wrapper .detail-bookmark-btn,
.stm-opportunity-detail-wrapper .detail-bookmark-btn,
.detail-bookmark-btn {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	border-radius: 50% !important;
	background: #FFFFFF !important;
	background-color: #FFFFFF !important;
	border: none !important;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
	outline: none !important;
	transition: var(--opp-transition) !important;
}

.stm-lms-opportunities-wrapper .detail-bookmark-btn:hover,
.stm-opportunity-detail-wrapper .detail-bookmark-btn:hover,
.detail-bookmark-btn:hover {
	transform: scale(1.1) !important;
	background: #FFFFFF !important;
	background-color: #FFFFFF !important;
}

/* Tabbed Sub-Navigation Bar */
.detail-tab-nav-bar {
	display: flex;
	align-items: center;
	gap: 32px;
	border-bottom: 2px solid #F1F5F9;
	margin-bottom: 32px;
}

.detail-tab-nav-bar .tab-item {
	font-size: 14px;
	font-weight: 700;
	color: #64748B;
	text-decoration: none;
	padding-bottom: 12px;
	position: relative;
	transition: var(--opp-transition);
}

.detail-tab-nav-bar .tab-item:hover,
.detail-tab-nav-bar .tab-item.active {
	color: #5A32E8;
}

.detail-tab-nav-bar .tab-item.active::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 3px;
	background: #5A32E8;
	border-radius: 3px 3px 0 0;
}

/* Body Grid 70% / 30% */
.detail-body-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 32px;
}

@media (max-width: 992px) {
	.detail-hero-card {
		flex-direction: column;
	}
	.hero-card-right {
		width: 100%;
	}
	.detail-body-grid {
		grid-template-columns: 1fr;
	}
}

/* Sections */
.detail-section {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 20px;
	padding: 32px;
	margin-bottom: 24px;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.02);
}

.section-heading {
	font-size: 20px;
	font-weight: 800;
	color: #0F172A;
	margin: 0 0 16px 0;
}

.section-paragraph {
	font-size: 15px;
	line-height: 1.65;
	color: #475569;
	margin: 0 0 16px 0;
}

/* Organization Callout */
.org-info-callout {
	display: flex;
	gap: 16px;
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	padding: 20px;
	margin-top: 24px;
}

.org-icon-box {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: #F3E8FF;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.org-text-box h4 {
	margin: 0 0 6px 0;
	font-size: 16px;
	font-weight: 700;
	color: #0F172A;
}

.org-text-box p {
	margin: 0 0 10px 0;
	font-size: 13px;
	color: #64748B;
	line-height: 1.5;
}

.org-website-link {
	font-size: 13px;
	font-weight: 700;
	color: #5A32E8;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Offers Grid (6 Icon Badges) */
.offers-grid-6 {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin-bottom: 28px;
	padding: 10px 0;
}

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

.offer-card {
	background: transparent;
	border: none;
	padding: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
}

.offer-icon-box {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #F5F3FF;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--opp-transition);
}

.offer-card:hover .offer-icon-box {
	background: #EDE9FE;
	transform: translateY(-2px);
}

.offer-title {
	font-size: 12.5px;
	font-weight: 700;
	color: #0F172A;
	line-height: 1.35;
	text-align: center;
}

/* Program Highlights Box */
.highlights-box {
	background: #F5F3FF;
	border: 1px solid #EDE9FE;
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 32px;
}

.highlights-title-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

.star-badge {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #EDE9FE;
	display: flex;
	align-items: center;
	justify-content: center;
}

.highlights-title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	color: #0F172A;
}

.highlights-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 20px;
}

@media (max-width: 640px) {
	.highlights-grid {
		grid-template-columns: 1fr;
	}
}

.highlight-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: #334155;
	font-weight: 600;
}

.check-circle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Timeline Pipeline */
.dates-timeline-pipeline {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 6px;
	margin-top: 24px;
	margin-bottom: 36px;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.dates-timeline-pipeline::before {
	content: "";
	position: absolute;
	top: 22px;
	left: 8%;
	right: 8%;
	height: 2px;
	background: #E2E8F0;
	z-index: 1;
}

@media (max-width: 768px) {
	.dates-timeline-pipeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

.timeline-step {
	background: transparent;
	border: none;
	padding: 4px;
	text-align: center;
	position: relative;
	z-index: 2;
	min-width: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.step-icon-circle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 8px auto;
	box-shadow: 0 2px 6px rgba(0,0,0,0.02);
	transition: var(--opp-transition);
	flex-shrink: 0;
}

.timeline-step:hover .step-icon-circle {
	transform: scale(1.08);
}

.circle-green { background: #DCFCE7; }
.circle-red { background: #FEE2E2; }
.circle-purple { background: #F3E8FF; }
.circle-blue { background: #E0F2FE; }
.circle-amber { background: #FEF3C7; }

.step-label {
	font-size: 11px;
	font-weight: 700;
	color: #0F172A;
	margin-bottom: 3px;
	line-height: 1.25;
	word-wrap: break-word;
}

.step-date {
	font-size: 10.5px;
	color: #64748B;
	line-height: 1.25;
	word-wrap: break-word;
}
	line-height: 1.3;
}

.bold-deadline {
	font-weight: 700;
	color: #0F172A;
}

.time-sub {
	font-size: 10.5px;
	color: #64748B;
	font-weight: 500;
}

/* How to apply split */
.how-to-apply-split {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 28px;
	margin-top: 20px;
	margin-bottom: 28px;
}

@media (max-width: 768px) {
	.how-to-apply-split {
		grid-template-columns: 1fr;
	}
}

.steps-column {
	display: flex;
	flex-direction: column;
	gap: 22px;
	position: relative;
}

.steps-column::before {
	content: "";
	position: absolute;
	top: 15px;
	bottom: 15px;
	left: 12px;
	width: 2px;
	background: #E2E8F0;
	z-index: 1;
}

.apply-step-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	position: relative;
	z-index: 2;
}

.step-badges-box {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
}

.step-num-pill {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #5A32E8;
	color: #FFFFFF !important;
	font-weight: 800;
	font-size: 12.5px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 3;
	box-shadow: 0 0 0 3px #FFFFFF;
}

.step-doc-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #F3E8FF;
	display: flex;
	align-items: center;
	justify-content: center;
}

.apply-step-item h4 {
	margin: 0 0 4px 0;
	font-size: 15px;
	font-weight: 700;
	color: #0F172A;
}

.apply-step-item p {
	margin: 0;
	font-size: 13px;
	color: #64748B;
	line-height: 1.4;
}

.docs-column {
	display: flex;
	flex-direction: column;
}

.required-docs-card {
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	padding: 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.required-docs-card h4 {
	margin: 0 0 16px 0;
	font-size: 15px;
	font-weight: 800;
	color: #0F172A;
}

.docs-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.docs-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #334155;
	font-weight: 600;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

/* Bottom Banner Card inside How to Apply section card */
.questions-banner-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: #F5F3FF;
	border: 1px solid #EDE9FE;
	border-radius: 16px;
	padding: 20px 24px;
	margin-top: 28px;
}

@media (max-width: 768px) {
	.questions-banner-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.q-banner-right {
		width: 100%;
		align-items: flex-start;
	}

	.main-apply-btn {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.q-banner-left {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

.q-banner-left {
	display: flex;
	align-items: center;
	gap: 16px;
}

.q-banner-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	flex-shrink: 0;
}

.main-apply-btn {
	background: #5A32E8;
	color: #FFFFFF !important;
	font-weight: 700;
	font-size: 14.5px;
	height: 44px;
	padding: 0 24px;
	border-radius: 12px;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	transition: var(--opp-transition);
	box-shadow: 0 4px 14px rgba(90, 50, 232, 0.25);
}

.main-apply-btn:hover,
.main-apply-btn:focus,
.main-apply-btn:active,
.main-apply-btn:visited {
	background: #4321B9 !important;
	color: #FFFFFF !important;
	text-decoration: none !important;
	box-shadow: 0 6px 18px rgba(90, 50, 232, 0.35);
	transform: translateY(-1px);
}

.apply-disclaimer {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: #64748B;
	text-align: right;
	line-height: 1.3;
}

.q-icon-box {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #EDE9FE;
	color: #5A32E8;
	font-size: 26px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.q-text-box h4 {
	margin: 0 0 4px 0;
	font-size: 16px;
	font-weight: 800;
	color: #0F172A;
	line-height: 1.3;
}

.q-text-box p {
	margin: 0;
	font-size: 13px;
	color: #64748B;
}

/* Right Sidebar Cards */
.sidebar-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 20px;
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.02);
}

.sidebar-heading {
	font-size: 16px;
	font-weight: 800;
	color: #0F172A;
	margin: 0 0 16px 0;
}

.action-buttons-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sidebar-primary-btn {
	background: #5A32E8;
	color: #FFFFFF !important;
	font-size: 15px;
	font-weight: 700;
	padding: 14px;
	border-radius: 12px;
	text-decoration: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: var(--opp-transition);
}

.sidebar-primary-btn:hover,
.sidebar-primary-btn:focus,
.sidebar-primary-btn:active,
.sidebar-primary-btn:visited {
	background: #4321B9 !important;
	color: #FFFFFF !important;
	text-decoration: none !important;
	box-shadow: 0 4px 16px rgba(90, 50, 232, 0.3);
}

.stm-lms-opportunities-wrapper .sidebar-secondary-btn,
.stm-opportunity-detail-wrapper .sidebar-secondary-btn,
.sidebar-secondary-btn {
	background: #FFFFFF !important;
	background-color: #FFFFFF !important;
	color: #0F172A !important;
	border: 1.5px solid #CBD5E1 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	padding: 12px 20px !important;
	border-radius: 12px !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
	outline: none !important;
	line-height: normal !important;
	text-transform: none !important;
	transition: var(--opp-transition) !important;
}

.stm-lms-opportunities-wrapper .sidebar-secondary-btn svg,
.stm-opportunity-detail-wrapper .sidebar-secondary-btn svg,
.sidebar-secondary-btn svg {
	stroke: currentColor !important;
	fill: none !important;
	transition: var(--opp-transition) !important;
}

.stm-lms-opportunities-wrapper .sidebar-secondary-btn:hover,
.stm-opportunity-detail-wrapper .sidebar-secondary-btn:hover,
.sidebar-secondary-btn:hover {
	background: #F8FAFC !important;
	background-color: #F8FAFC !important;
	border-color: #5A32E8 !important;
	color: #5A32E8 !important;
	box-shadow: 0 4px 12px rgba(90, 50, 232, 0.08) !important;
}

.stm-lms-opportunities-wrapper .sidebar-secondary-btn.saved,
.stm-opportunity-detail-wrapper .sidebar-secondary-btn.saved,
.sidebar-secondary-btn.saved {
	background: #F3E8FF !important;
	background-color: #F3E8FF !important;
	border-color: #5A32E8 !important;
	color: #5A32E8 !important;
}

.stm-lms-opportunities-wrapper .sidebar-secondary-btn.saved svg,
.stm-opportunity-detail-wrapper .sidebar-secondary-btn.saved svg,
.sidebar-secondary-btn.saved svg {
	fill: #5A32E8 !important;
	stroke: #5A32E8 !important;
}

.overview-meta-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.overview-meta-list .meta-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.overview-meta-list .meta-icon {
	font-size: 18px;
}

.overview-meta-list .meta-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.overview-meta-list .label {
	font-size: 12px;
	color: #94A3B8;
	font-weight: 500;
}

.overview-meta-list .val {
	font-size: 13px;
	color: #0F172A;
	font-weight: 700;
}

.eligibility-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 16px 0 !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.eligibility-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13.5px;
	color: #334155;
	font-weight: 600;
	padding-bottom: 6px;
	padding-left: 0 !important;
	margin-left: 0 !important;
	border-bottom: 1px solid #F8FAFC;
}

.green-check {
	color: #16A34A;
	font-weight: 800;
	font-size: 15px;
}

.view-full-link {
	font-size: 13.5px;
	font-weight: 700;
	color: #5A32E8;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	transition: var(--opp-transition);
}

.view-full-link:hover {
	color: #4C1D95;
	gap: 10px;
}

.share-desc {
	font-size: 13px;
	color: #64748B;
	margin: 0 0 16px 0;
	line-height: 1.5;
}

.share-icons-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	margin-top: 14px;
	width: 100%;
	box-sizing: border-box;
}

.stm-lms-opportunities-wrapper .share-icon-btn,
.stm-opportunity-detail-wrapper .share-icon-btn,
.share-icon-btn {
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;
	flex-shrink: 0 !important;
	border-radius: 50% !important;
	border: 1px solid #E2E8F0 !important;
	background: #FFFFFF !important;
	background-color: #FFFFFF !important;
	color: #0F172A !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: var(--opp-transition) !important;
	box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
	padding: 0 !important;
	margin: 0 !important;
	outline: none !important;
}

.stm-lms-opportunities-wrapper .share-icon-btn svg,
.stm-opportunity-detail-wrapper .share-icon-btn svg,
.share-icon-btn svg {
	width: 16px !important;
	height: 16px !important;
	display: block !important;
}

.stm-lms-opportunities-wrapper .share-icon-btn:hover,
.stm-opportunity-detail-wrapper .share-icon-btn:hover,
.share-icon-btn:hover {
	border-color: #5A32E8 !important;
	background: #F3E8FF !important;
	background-color: #F3E8FF !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(90, 50, 232, 0.15) !important;
}

.newsletter-mini-card {
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 20px;
	padding: 24px;
}

.mini-newsletter-input {
	width: 100%;
	height: 46px;
	padding: 0 16px;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	font-size: 13.5px;
	font-family: inherit;
	box-sizing: border-box;
	margin-bottom: 12px;
	background: #FFFFFF;
	color: #0F172A;
	transition: var(--opp-transition);
}

.mini-newsletter-input:focus {
	outline: none;
	border-color: #5A32E8;
	box-shadow: 0 0 0 3px rgba(90, 50, 232, 0.1);
}

.mini-newsletter-btn {
	width: 100%;
	height: 46px;
	border-radius: 12px;
	background: #5A32E8;
	color: #FFFFFF;
	border: none;
	font-weight: 700;
	font-size: 14.5px;
	cursor: pointer;
	transition: var(--opp-transition);
	box-shadow: 0 4px 12px rgba(90, 50, 232, 0.2);
}

.mini-newsletter-btn:hover {
	background: #4C1D95;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(90, 50, 232, 0.3);
}

.mini-privacy-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #64748B;
	margin-top: 16px;
	line-height: 1.4;
}

.mini-envelope-illustration {
	display: flex;
	justify-content: center;
	margin-top: 20px;
	padding-top: 10px;
}

/* ==========================================================================
   OPPORTUNITY DETAIL PAGE — FULL MOBILE RESPONSIVE
   ========================================================================== */

/* Tablet: 992px and below */
@media (max-width: 992px) {
	/* Hero card stacks vertically */
	.detail-hero-card {
		flex-direction: column;
		padding: 24px;
		gap: 24px;
	}

	.hero-card-right {
		width: 100%;
		min-height: 200px;
	}

	/* Body grid single column */
	.detail-body-grid {
		grid-template-columns: 1fr;
	}

	/* Detail sidebar appears after main content */
	.detail-sidebar-col {
		order: -1;
	}

	/* Tab nav scroll on tablet */
	.detail-tab-nav-bar {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 20px;
		padding-bottom: 2px;
		scrollbar-width: none;
	}
	.detail-tab-nav-bar::-webkit-scrollbar { display: none; }

	.detail-hero-meta-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: 768px and below */
@media (max-width: 768px) {
	.stm-opportunity-detail-wrapper {
		padding: 12px;
	}

	/* Hero card */
	.detail-hero-card {
		padding: 20px;
		border-radius: 16px;
		gap: 20px;
	}

	.hero-logo-title-row {
		gap: 14px;
	}

	.detail-logo-box {
		width: 52px;
		height: 52px;
	}

	.detail-main-title {
		font-size: 20px;
	}

	.detail-badges-row {
		flex-wrap: wrap;
		gap: 8px;
	}

	.detail-hero-description {
		font-size: 14px;
		margin: 14px 0;
	}

	.detail-hero-meta-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.hero-card-right {
		min-height: 160px;
	}

	.hero-image-wrapper {
		min-height: 160px;
		border-radius: 12px;
	}

	/* Tab navigation */
	.detail-tab-nav-bar {
		gap: 16px;
		margin-bottom: 20px;
	}

	.detail-tab-nav-bar .tab-item {
		font-size: 13px;
		white-space: nowrap;
		padding-bottom: 10px;
	}

	/* Content sections */
	.detail-section {
		padding: 20px;
		border-radius: 16px;
		margin-bottom: 16px;
	}

	.section-heading {
		font-size: 17px;
		margin-bottom: 12px;
	}

	.section-paragraph {
		font-size: 14px;
	}

	/* Org info callout */
	.org-info-callout {
		flex-direction: column;
		gap: 12px;
		padding: 16px;
	}

	/* Offers grid: 3 columns on mobile */
	.offers-grid-6 {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	/* Timeline: 2 columns */
	.dates-timeline-pipeline {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	/* How to apply */
	.how-to-apply-split {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* Questions banner */
	.questions-banner-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 16px;
	}

	.q-banner-right {
		width: 100%;
		align-items: flex-start;
	}

	.main-apply-btn {
		width: 100%;
		justify-content: center;
	}

	/* Sidebar */
	.sidebar-card {
		padding: 18px;
		border-radius: 16px;
		margin-bottom: 16px;
	}

	.sidebar-primary-btn,
	.sidebar-secondary-btn {
		font-size: 14px;
		padding: 12px;
	}

	/* Overview meta list */
	.meta-row {
		gap: 10px;
	}

	/* Back nav link */
	.back-board-link {
		font-size: 13px;
	}

	/* Share row */
	.detail-share-row {
		flex-wrap: wrap;
		gap: 8px;
	}
}

/* Small mobile: 480px and below */
@media (max-width: 480px) {
	.detail-hero-card {
		padding: 16px;
	}

	.detail-main-title {
		font-size: 18px;
	}

	.detail-hero-meta-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.detail-hero-meta-grid .meta-label {
		font-size: 11px;
	}

	.detail-hero-meta-grid .meta-val {
		font-size: 12px;
	}

	/* Offers grid: 2 columns on very small screens */
	.offers-grid-6 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Timeline: single column */
	.dates-timeline-pipeline {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.dates-timeline-pipeline::before {
		display: none;
	}

	.timeline-step {
		display: flex;
		align-items: center;
		gap: 14px;
		text-align: left;
		padding: 10px 12px;
		background: #F8FAFC;
		border: 1px solid #E2E8F0;
		border-radius: 12px;
	}

	.step-icon-circle {
		margin: 0;
		flex-shrink: 0;
	}

	.step-label {
		font-size: 12px;
	}

	.step-date {
		font-size: 11px;
	}

	/* Sections */
	.detail-section {
		padding: 16px;
	}

	.highlights-box {
		padding: 16px;
	}

	.required-docs-card {
		padding: 16px;
	}

	.apply-step-item {
		gap: 10px;
	}

	.q-banner-left {
		flex-direction: column;
		gap: 10px;
	}
}

/* ==========================================================================
   OPPORTUNITIES LISTING PAGE — FULL MOBILE RESPONSIVE
   ========================================================================== */

/* Tablet: 1024px and below */
@media (max-width: 1024px) {
	/* Wrapper padding */
	.stm-lms-opportunities-wrapper {
		padding: 16px;
	}

	/* Navbar */
	.opp-navbar {
		flex-wrap: wrap;
		gap: 12px;
		padding: 14px 16px;
	}

	/* Hero section stacks */
	.opp-hero-section {
		flex-direction: column;
		padding: 32px 28px;
		gap: 28px;
		text-align: center;
		align-items: center;
	}

	.hero-left {
		max-width: 100%;
	}

	.hero-right {
		max-width: 100%;
	}

	.hero-badges-row {
		justify-content: center;
	}

	.hero-3d-img {
		max-width: 320px;
	}

	/* Filter card */
	.opp-filter-card {
		padding: 16px;
	}

	.filter-controls-wrapper {
		gap: 12px;
	}

	.filter-col {
		min-width: 160px;
	}

	/* Toolbar */
	.opp-toolbar {
		gap: 12px;
	}

	/* 4-col grid → 2-col */
	.opp-cards-grid-4col {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	/* Newsletter */
	.newsletter-content-wrapper {
		flex-direction: column;
		align-items: stretch;
		padding: 28px 24px;
		gap: 24px;
	}

	.newsletter-left {
		max-width: 100%;
	}

	.newsletter-right {
		min-width: 100%;
	}
}

/* Mobile: 768px and below */
@media (max-width: 768px) {
	/* Wrapper */
	.stm-lms-opportunities-wrapper {
		padding: 12px;
	}

	/* Navbar */
	.opp-navbar {
		padding: 12px 14px;
		gap: 10px;
	}

	.nav-menu-links {
		display: none;
	}

	.nav-auth-buttons {
		gap: 8px;
	}

	.nav-auth-buttons .btn-login,
	.nav-auth-buttons .btn-signup {
		font-size: 13px;
		padding: 8px 14px;
	}

	/* Hero */
	.opp-hero-section {
		padding: 24px 18px;
		gap: 20px;
		border-radius: 16px;
		margin-bottom: 24px;
	}

	.hero-title .title-primary {
		font-size: 28px;
	}

	.hero-title .title-highlight {
		font-size: 24px;
	}

	.hero-description {
		font-size: 14px;
		margin-bottom: 20px;
	}

	.hero-badges-row {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	.hero-stat-pill {
		width: 100%;
		max-width: 280px;
		justify-content: center;
	}

	.hero-3d-img {
		max-width: 240px;
	}

	/* Filter card */
	.opp-filters-section {
		margin-top: 16px;
	}

	.opp-filter-card {
		padding: 14px;
		border-radius: 12px;
	}

	.filter-controls-wrapper {
		flex-direction: column;
		gap: 10px;
	}

	.filter-col {
		width: 100%;
		min-width: unset;
		flex: unset;
	}

	.filter-col.action-col {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.action-top-label {
		margin-bottom: 0;
		justify-content: flex-start;
	}

	.apply-filters-btn {
		width: 100%;
		text-align: center;
		padding: 12px;
	}

	/* Category pills — horizontal scroll */
	.opp-category-pills-row {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 8px;
		padding-bottom: 6px;
		scrollbar-width: none;
		margin-top: 16px;
	}

	.opp-category-pills-row::-webkit-scrollbar {
		display: none;
	}

	.category-pill {
		flex-shrink: 0;
		padding: 8px 14px;
		font-size: 13px;
	}

	/* Topbar toolbar */
	.opp-grid-topbar {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		margin-bottom: 16px;
	}

	.grid-view-controls {
		width: 100%;
		justify-content: space-between;
	}

	/* Toolbar inside opp-toolbar */
	.opp-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.opp-tabs-nav {
		width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.opp-tabs-nav::-webkit-scrollbar {
		display: none;
	}

	.opp-filter-controls {
		flex-wrap: wrap;
		gap: 8px;
	}

	.opp-search-field input {
		width: 100%;
	}

	.opp-search-field {
		flex: 1;
	}

	/* Cards — single column */
	.opp-cards-grid-4col {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.opp-card-item {
		padding: 18px;
		border-radius: 14px;
	}

	.card-title {
		font-size: 15px;
	}

	.card-description {
		font-size: 13px;
	}

	/* Pagination */
	.opp-pagination-wrapper {
		gap: 8px;
		margin-top: 28px;
		flex-wrap: wrap;
		justify-content: center;
	}

	.pag-btn {
		padding: 8px 14px;
		font-size: 13px;
	}

	.pag-num-btn {
		width: 34px;
		height: 34px;
		font-size: 13px;
		border-radius: 8px;
	}

	/* Newsletter */
	.opp-newsletter-section {
		margin-top: 32px;
	}

	.newsletter-content-wrapper {
		padding: 22px 18px;
		border-radius: 16px;
		gap: 18px;
	}

	.newsletter-title {
		font-size: 17px;
	}

	.newsletter-desc {
		font-size: 13px;
	}

	.newsletter-left {
		gap: 14px;
	}
}

/* Small mobile: 480px and below */
@media (max-width: 480px) {
	/* Wrapper */
	.stm-lms-opportunities-wrapper {
		padding: 10px;
	}

	/* Hero further shrink */
	.opp-hero-section {
		padding: 20px 14px;
	}

	.hero-title .title-primary {
		font-size: 24px;
	}

	.hero-title .title-highlight {
		font-size: 20px;
	}

	.hero-3d-img {
		max-width: 180px;
	}

	/* Card tweaks */
	.opp-card-item {
		padding: 14px;
	}

	.card-top-row {
		margin-bottom: 14px;
	}

	.card-footer-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.arrow-action-btn {
		align-self: flex-end;
	}

	/* Pagination: hide numbers, show only prev/next */
	.pag-numbers-list {
		display: none;
	}

	.opp-pagination-wrapper {
		gap: 12px;
	}

	/* Newsletter form stacks */
	.form-input-group {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.newsletter-submit-btn {
		width: 100%;
	}

	/* Topbar controls simplify */
	.sort-select-wrapper .sort-label {
		display: none;
	}

	/* Category pills shrink padding */
	.category-pill {
		padding: 7px 12px;
		font-size: 12px;
	}
}