.locations-list {
	position: relative;
}

.locations-empty {
	margin: 0;
	padding: 2.4rem;
	border: 0.1rem dashed var(--border-surface-color);
	border-radius: 1.4rem;
	background-color: var(--white-color);
	font-size: 1.6rem;
	line-height: 1.5;
	color: var(--secondary-text-color);
	text-align: center;
}

.locations-empty-text {
	margin: 0 0 1.6rem;
}

.locations-empty .waitlist-trigger {
	margin-inline: auto;
}

.locations-empty .waitlist-success-text {
	display: block;
	margin-top: 1.2rem;
	color: #22c55e;
	font-weight: 500;
}

.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;
	}
}
/* "≈ od 2,34€ denne" under the monthly price (warehouse.day_price). */
.price-per-day {
	margin-top: 0.2rem;
	font-size: 1.2rem;
	line-height: 1.4;
	color: var(--disabled-text-color);
	white-space: nowrap;
}

/* Phones: the card stacks. The photo goes across the top, the name, address
   and figures under it in one column, and the price with the arrow at the
   bottom. Side by side at 375 px the figures broke as "1.2 / m²" and the
   price sat over the photo. */
@media (max-width: 600px) {
	.location-card,
	.location-card.disabled {
		flex-direction: column;
		height: auto;
		min-height: 0;
		min-width: 0;
		background: var(--white-color);
	}

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

	.location-image {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		height: 15rem;
	}

	.location-details {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 1.2rem 1.6rem 1.6rem;
	}

	.location-name,
	.location-address,
	.location-param {
		padding: 0;
	}

	.location-name {
		font-size: 1.8rem;
	}

	.location-name-brand {
		display: inline;
	}

	.location-address {
		font-size: 1.3rem;
	}

	.location-param {
		font-size: 1.3rem;
	}

	.location-param span {
		white-space: nowrap;
	}

	.location-price {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: auto;
		margin-top: 1.2rem;
		padding: 1.2rem 0 0;
		border-top: 0.1rem solid var(--border-surface-color);
	}

	.location-card.disabled .location-price {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.location-price .btn.icon-btn {
		width: 4.8rem;
		height: 4.8rem;
	}

	.price-new {
		font-size: 1.8rem;
	}
}