/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

.positions-wrapper {
	display: flex;
	flex-direction: column;
	gap: 104px;
}

.search-filter-wrapper {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.position-search-form {
	width: 100%;
	max-width: 450px;
	position: relative;
}

.position-search-input {
	width: 100%;
	border-radius: 2222px;
	padding: 16px 24px;
	padding-right: 64px;
	border: none;
	font-size: 16px;
	font-weight: 400;
	line-height: 100%;
	color: rgba(56, 0, 13, 0.6);
}

.position-search-input::placeholder {
	color: rgba(56, 0, 13, 0.6);
}

.position-search-button {
	position: absolute;
	top: 10px;
	right: 32px;
	background-color: transparent;
}

.position-cancel-search-button {
	display: none;
	position: absolute;
	top: 10px;
	right: 64px;
	background-color: transparent;
	color: red;
}

#active-categories, #categories, .position-categories-wrapper {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.category-badge {
	border-radius: 2222px;
	padding: 8px 12px;
	background-color: rgba(56, 0, 13, .1);
	font-size: 16px;
	line-height: 100%;
	cursor: pointer;
}

.category-badge--detail {
	background-color: var(--38000d);
	color: #fff;
}

.category-cancel-button {
	background-color: transparent;
	font-weight: 700;
	margin-right: 4px;
	font-size: 16px;
	line-height: 100%;
	cursor: pointer;
}

.position-list {
	display: flex;
	flex-direction: column;
	list-style-type: none;
  	margin: 0;
	padding: 0;	
}

.position-item {}

.position-item__link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 0px;
	border-bottom: 1px solid rgba(56, 0, 13, 0.4);
}

.position-details {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.position-details__header {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.position-header {
	font-size: 28px;
	line-height: 120%;
	color: var(--38000d);
	transition: all 0.3s;
}

.position-category {
	border-radius: 2222px;
	padding: 8px 12px;
	color: #fff;
	background-color: var(--38000d);
	font-size: 12px;
	line-height: 100%;
}

.position-details__footer {
	display: flex;
	gap: 24px;
	align-items: center;
}

.position-company, .position-location {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 16px;
	line-height: 100%;
	color: var(--38000d);
}

.position-button {
	min-width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--38000d);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;
}

.position-item__link:hover {
	border-bottom: 1px solid var(--da0927);
}

.position-item__link:hover .position-button {
	background-color: var(--da0927);
}

.position-item__link:hover .position-header {
	color: var(--da0927);
}

@media (max-width: 991px) {
	.positions-wrapper {
		gap: 40px;
	}
}