/* vs-availability-button.css
 * Styles for the "Se ledige uger her" button injected into the MPHB search form.
 * Matched to the site's green "Hent katalog" button on the front page.
 */

.vs-availability-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	height: 50px;
	padding: 0 22px;
	margin-right: 12px;
	background-color: #6e7e61; /* same green as "Hent katalog" */
	color: #fbfaf8;            /* ivory text */
	border: 2px solid transparent;
	border-radius: 0; /* match site's squared Søg-button */
	font-family: "DM sans", Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	transition: background-color 200ms ease,
				box-shadow 200ms ease,
				color 200ms ease,
				transform 200ms ease;
	white-space: nowrap;
}

.vs-availability-btn:hover,
.vs-availability-btn:focus-visible {
	background-color: #5d6c52; /* darker green on hover */
	color: #fbfaf8;
	box-shadow: 0 4px 12px rgba(110, 126, 97, 0.28);
	text-decoration: none;
	outline: none;
}

.vs-availability-btn:focus-visible {
	box-shadow: 0 0 0 3px rgba(110, 126, 97, 0.4);
}

.vs-availability-btn:active {
	transform: translateY(1px);
}

.vs-availability-btn__dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #fbfaf8;
	flex-shrink: 0;
	transition: transform 200ms ease;
}

.vs-availability-btn:hover .vs-availability-btn__dot {
	transform: scale(1.2);
}

.vs-availability-btn__label {
	display: inline-block;
}

.vs-availability-btn__arrow {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform 200ms ease;
}

.vs-availability-btn:hover .vs-availability-btn__arrow {
	transform: translateX(3px);
}

/* Make sure submit wrapper sits nicely next to the new button */
.mphb_sc_search-form-row:has(.vs-availability-btn) .mphb_sc_search-submit-button-wrapper {
	margin-left: 0;
}

/* Mobile / narrow viewports — stack neatly under the search filters */
@media (max-width: 640px) {
	.vs-availability-btn {
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
	}
}