#opportunities {
	max-width: 1200px;
	margin: 2rem auto;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;

	.offer-card {
		background: #fff;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
		cursor: pointer;
		transition: all 0.15s ease, box-shadow 0.15s ease, border-color 0.15s;
		a {
			text-decoration: none;
		}

		&:hover {
			transform: translateY(-3px);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
			border-color: #f28f7a;
			background-color: #12062c;
			.offer-content .offer-text p:not(:last-child),
			.offer-content .offer-text h3 {
				color: white;
			}
		}

		.offer-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 1rem;
			text-align: center;

			.offer-thumbnail {
				width: 80px;
				height: 80px;
				object-fit: cover;
				border-radius: 6px;
				margin-bottom: 0.75rem;
			}

			.offer-text {
				h3 {
					margin: 0 0 0.5rem;
					font-size: 1.5rem;
					font-weight: 600;
					color: #12062c;
					letter-spacing: normal !important;
				}

				p {
					margin: 0.2rem 0;
					font-size: 0.85rem;
					color: #333;

					&:last-child {
						margin-top: 0.5rem;
						font-weight: 500;
						color: #f28f7a;
					}
				}
			}
		}
	}
}

#pagination-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.5rem;

	button {
		background: #fff;
		color: #12062c;
		border: 1px solid #f28f7a;
		border-radius: 4px;
		padding: 0.4rem 0.8rem;
		cursor: pointer;
		transition: background 0.15s, color 0.15s, transform 0.15s;

		&:hover:not(:disabled) {
			background: #f28f7a;
			color: #fff;
			transform: translateY(-1px);
		}

		&:disabled,
		&.current-page {
			background: #f28f7a;
			color: #fff;
			cursor: default;
		}
	}
}

#filters-container {
	max-width: 1200px;
	margin: 1.5rem auto;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1rem;
	background: #fff;
	border: 1px solid #f28f7a;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	justify-content: space-between;
	@media (max-width: 960px) {
		flex-direction: column;
	}

	.custom-select {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 0.35rem;
		min-width: 250px;

		label {
			font-weight: 600;
			color: #12062c;
			font-size: 0.9rem;
		}

		.select-box {
			position: relative;
		}

		.select-trigger {
			width: 100%;
			padding: 0.45rem 0.6rem;
			border: 1px solid #ccc;
			border-radius: 4px;
			background: #fff;
			text-align: left;
			font-size: 0.9rem;
			color: #12062c;
			cursor: pointer;
			transition: border-color 0.15s, box-shadow 0.15s;

			&:after {
				content: "▼";
				position: absolute;
				right: 0.75rem;
				top: 50%;
				transform: translateY(-50%);
				font-size: 0.7rem;
				color: #666;
			}

			&:focus {
				border-color: #f28f7a;
				box-shadow: 0 0 4px rgba(242, 143, 122, 0.4);
				outline: none;
			}
		}

		.options {
			position: absolute;
			top: calc(100% + 0.25rem);
			left: 0;
			right: 0;
			background: #fff;
			border: 1px solid #ccc;
			border-radius: 4px;
			margin: 0;
			padding: 0;
			list-style: none;
			max-height: 300px;
			overflow-y: auto;
			display: none;
			z-index: 20;

			li {
				padding: 0.5rem;
				cursor: pointer;
				transition: background 0.15s;
				font-size: 0.7rem;

				&:hover {
					background: #f28f7a;
					color: #fff;
				}
			}
		}

		&.open .options {
			display: block;
		}
	}
}

.no-offers {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 2rem;
	margin: 2rem auto;
	max-width: 500px;
	text-align: center;
	background: #fff7f5;
	border: 1px solid #f28f7a;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	color: #12062c;
	font-size: 1rem;
	font-weight: 500;

	.icon {
		width: 64px;
		height: 64px;
	}

	p {
		margin: 0;
		line-height: 1.4;
	}

	@media (max-width: 600px) {
		padding: 1.5rem;
		font-size: 0.95rem;
	}
}

.offer-detail-container {
	max-width: 900px;
	margin: 2rem auto;
	padding: 1.5rem;
	background: #fff;
	border-radius: 8px;
	border: 1px solid #f28f7a;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	font-family: Arial, sans-serif;
	color: #12062c;
	transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
	&:hover {
		background-color: #12062c;
		color: #f28f7a;
		.offer-header {
			h1 {
				color: white;
			}
		}
		.offer-description p {
			color: white;
		}
	}
	.pills {
		list-style: none;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-bottom: 1rem;
		justify-content: center;
	}

	.pill {
		background-color: #f28f7a;
		color: #fff;
		font-weight: 600;
		padding: 0.3rem 0.7rem;
		border-radius: 999px;
		font-size: 0.85rem;
	}
	.offer-header {
		h1 {
			font-size: 2.5rem;
			margin-bottom: 0.25rem;
			text-align: center;
		}
		p {
			margin: 0.1rem 0;
			font-size: 0.95rem;
		}
	}

	.offer-company {
		display: flex;
		align-items: center;
		gap: 1rem;
		margin-top: 1.5rem;

		img.company-thumbnail {
			width: 80px;
			height: 80px;
			object-fit: cover;
			border-radius: 6px;
			border: 1px solid #ccc;
		}

		p.company-name {
			font-weight: 600;
			font-size: 1rem;
		}
	}

	.offer-description {
		margin-top: 1.5rem;
		p {
			white-space: pre-line;
			color: rgb(18, 6, 44);
		}
	}

	.offer-meta {
		p {
			margin-top: 1.5rem;
			font-size: 0.85rem;
			color: #666;
			margin: 0.15rem 0;
		}
	}
}