/* Unit Rental Map — front end */

.urm-map {
	--urm-available: #1f9d55;
	--urm-unavailable: #9b1c1c;
	--urm-border: #000;
	--urm-border-w: 1px;
	--urm-label: #fff;
	--urm-tip-bg: #1f2329;
	--urm-tip-text: #fff;
	width: 100%;
	max-width: 100%;
}

.urm-stage {
	position: relative;
	width: 100%;
	height: 0; /* aspect ratio via padding-bottom inline */
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	container-type: inline-size;
}

.urm-unit {
	position: absolute;
	box-sizing: border-box;
	border: var(--urm-border-w) solid var(--urm-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--urm-label);
	font-size: clamp( 9px, 1vw, 13px );
	line-height: 1.15;
	text-decoration: none;
	overflow: visible;
	transition: filter .12s ease, transform .12s ease;
}

.urm-unit.is-available {
	background: var(--urm-available);
	cursor: pointer;
}
.urm-unit.is-available:hover {
	filter: brightness( 1.1 );
	z-index: 3;
}

.urm-unit.is-unavailable {
	background: var(--urm-unavailable);
	cursor: not-allowed;
	opacity: .85;
}

.urm-unit .urm-unit-number {
	font-weight: 700;
}
.urm-unit .urm-unit-size {
	opacity: .9;
	font-size: .85em;
}

/* Tooltip */
.urm-tip {
	position: absolute;
	bottom: calc( 100% + 8px );
	left: 50%;
	transform: translateX( -50% );
	min-width: 140px;
	max-width: 220px;
	padding: 8px 10px;
	background: var(--urm-tip-bg);
	color: var(--urm-tip-text);
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, .25 );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .12s ease;
	z-index: 10;
}
.urm-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX( -50% );
	border: 6px solid transparent;
	border-top-color: var(--urm-tip-bg);
}
.urm-unit:hover .urm-tip,
.urm-unit:focus .urm-tip {
	opacity: 1;
	visibility: visible;
}

/* Flip below when near the top edge */
.urm-unit.urm-tip-below .urm-tip {
	bottom: auto;
	top: calc( 100% + 8px );
}
.urm-unit.urm-tip-below .urm-tip::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: var(--urm-tip-bg);
}

.urm-tip-title {
	display: block;
	font-size: 13px;
	margin-bottom: 2px;
}
.urm-tip-row {
	display: block;
}
.urm-tip-price {
	font-weight: 700;
}
.urm-tip-status {
	display: inline-block;
	margin-top: 4px;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 11px;
	background: rgba( 255, 255, 255, .15 );
}

/* Free-standing text labels */
.urm-text-label {
	position: absolute;
	line-height: 1.15;
	white-space: nowrap;
	pointer-events: none;
	transform: translateY( -50% );
}
.urm-text-label[style*="text-align:right"] { transform: translate( -100%, -50% ); }
.urm-text-label[style*="text-align:center"] { transform: translate( -50%, -50% ); }

.urm-error {
	padding: 10px 14px;
	background: #fcf0f1;
	border-left: 4px solid #d63638;
	color: #1d2327;
}