.locations-list {
	position: relative;
}

.location-card {
	position: relative;
	background-color: var(--white-color);
	border: 0.1rem solid var(--border-surface-color);
	border-radius: 1.4rem;
	overflow: hidden;
	transition: transform 0.3s ease;
	display: flex;
	justify-content: space-between;
	width: 35rem;
	height: 24rem;
	--location-image-width: 14.8rem;
}

.location-card.disabled {
	background-color: var(--tabs-surface-color);
}

.location-card:hover {
	box-shadow: 0 2px 4px rgb(36, 52, 82, 0.15);
}

.location-image {
	position: relative;
	width: var(--location-image-width);
	background-size: cover;
	background-position: center;
	background-color: var(--orange-surface-color);
}

.location-card.disabled .location-image {
	filter: grayscale(100%);
}

.location-labels-container {
	position: absolute;
	top: 1.2rem;
	left: 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.location-label {
	background-color: var(--orange-surface-color);
	border: 0.1rem solid var(--border-orange-color);
	padding: 0.35rem 0.6rem 0.35rem 0.4rem;
	border-radius: 0.4rem;
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--orange-text-color);
	display: inline-flex;
	align-items: center;
	width: fit-content;
	gap: 1rem;
}

.location-label svg {
	width: 1.2rem;
	height: 1.2rem;
}

.location-details {
	width: calc(100% - var(--location-image-width));
	padding: 1.2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.location-name {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.25;
	vertical-align: middle;
	color: var(--primary-text-color);
	margin-bottom: 0.4rem;
}

/* The whole card is the link. The heading's link stretches over the card
   (the card is the nearest positioned box), so a tap on the price, the
   address or the picture opens the location like a tap on its name. On a
   phone the name alone was 13% of the card and the rest were dead taps.
   The arrow and the waitlist button stay above the layer and keep working. */
.location-card:not(.disabled) {
	cursor: pointer;
}

a.location-name::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}

.location-price .btn {
	position: relative;
	z-index: 2;
}

/* The brand takes its own line above the place name. This break used to be a
   <br> stored inside Area.name in the database, so the one card that wanted it
   got it for free while every other page stripped it back out.

   nowrap because the brand is one thing: in a narrow card "TOP SKLAD" splits
   at its own space and the heading becomes three lines — TOP / SKLAD / place.
   The place below it stays free to wrap as it needs. */
.location-name-brand {
	display: block;
	white-space: nowrap;
}

.location-address {
	font-size: 1.2rem;
	font-weight: 400;	
	color: var(--secondary-text-color);
	margin-bottom: 1.2rem;
}

.location-param {
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--secondary-text-color);
	margin-bottom: 0.4rem;
}

.location-param span {
	font-weight: 500;
	color: var(--primary-text-color);
}

.location-param:last-child {
	margin-bottom: 0;
}

.location-price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	font-weight: bold;
}

.location-card.disabled .location-price {
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 16px;
}

.location-card.disabled .location-waitlist-btn {
	font-size: 1.3rem;
}

.price-old {
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.3;
	vertical-align: middle;
	color: var(--secondary-text-color);
}

.price-old span {
	text-decoration: line-through;
}

.price-new {
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--primary-text-color);
}

.locations-pagination {
	display: flex;
	justify-content: center;
}

.locations-pagination .btn {
	margin-top: 1.6rem;
	margin-bottom: 1.6rem;
}

.filters {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1.6rem;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.filters-toggle-btn {
	padding-left: 0;
	padding-right: 0;
	height: 2.4rem;
}

.filters-list {
	display: none;
}

.filters-list.open {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.6rem 0;
	border-top: 0.1rem solid rgba(36, 52, 82, 0.5);
	padding-top: 1.6rem;
}

.filter-group {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	width: 100%;
	gap: 1.2rem;
	padding-bottom: 1.6rem;
	border-bottom: 0.1rem solid rgba(36,52,82,0.5);
}

.filter-group.half-width {
	width: 50%;
}

.filter-inline-group {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 1.6rem;
}

.filter-title {
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--primary-text-color);
	line-height: 1.25;
	margin-bottom: 0;
	text-wrap-mode: nowrap;
    overflow-wrap: break-word;	
}

.filter-option {
	width: 100%;
}

.marker-popup-content {
	position: absolute;
	top: calc(100% + 1.6rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: none;
}

.marker-container.open .marker-popup-content {
	display: block;
}

.close-marker-popup-content-btn {
	position: absolute;
	top: 0;
	right: 0;
	transform: translateY(calc(-1 * 100% - 0.6rem));
	width: 3.8rem;
	height: 3.8rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	box-shadow: 0 2px 4px rgb(36, 52, 82, 0.15);
	cursor: pointer;
	z-index: 11;
	background-color: var(--white-color);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cpath d='M1.19434 1.19434L7.64575 7.64575M14.0972 14.0972L7.64575 7.64575M7.64575 7.64575L1.19434 14.0972L14.0972 1.19434' stroke='%23243452' stroke-width='1.07524' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

@media (max-width: 960px) {
	.location-card {
		width: 100%;
		--image-width: 17.2rem;
		min-width: 34.3rem;
		min-height: 14rem;
		height: auto;
		background: linear-gradient(to right, var(--white-color) calc(100% - var(--image-width)), var(--orange-surface-color) calc(100% - var(--image-width)));
	}

	.location-card.disabled {
		width: 100%;
		background: linear-gradient(to right, var(--tabs-surface-color) calc(100% - var(--image-width)), var(--orange-surface-color) calc(100% - var(--image-width)));
	}

	.location-image {
		position: absolute;
		width: var(--image-width);
		height: calc(100% - 5.6rem);
		top: 0;
		right: 0;
	}

	.location-labels-container {
		left: initial;
		right: 1.2rem;
		align-items: flex-end;
	}

	.location-details {
		width: 100%;
		display: grid;
		grid-template-columns: auto calc(var(--image-width) - 0.8rem);
		padding: 0.8rem;
	}

	.location-name,
	.location-address,
	.location-param {
		grid-column: 1;
		padding-left: 0.4rem;
        padding-right: 1.2rem;
	}

	.location-name {
		margin-bottom: 0;
		padding-top: 0.4rem;
	}

	.location-address {
		margin-bottom: 0.8rem;
	}

	.location-param {
		margin-bottom: 0.2rem;
	}	

	.location-price {
		grid-column: 2;
		grid-row: 1 / span 100;
		height: 100%;
		padding-top: 8rem;
		padding-left: 0.8rem;
		align-items: flex-end;
	}

	.locations-pagination .btn {
		margin-top: 0.8rem;
		margin-bottom: 0.8rem;
	}

	.filters {
		width: 100%;
	}
}

@media (max-width: 375px) {
	.location-card {
		min-width: initial;
	}
}