/* Styles for "Standort finden" dropdown - See pattern in theme */

.locfind summary::-webkit-details-marker {
	display: none;
}

.locfind summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	list-style: none;
	gap: 10px;
	padding: 15px 28px;
	border: 2px solid transparent;
	border-radius: var(--btn-radius, 999px);
	cursor: pointer;
	text-decoration: none;
	background: #d71945;
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	transition: transform .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease), gap .16s var(--ease), color .16s var(--ease);
	white-space: nowrap;
	line-height: 1;
}

.locfind summary::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: .75rem;
	background-color: currentColor;
	-webkit-mask: url("/wp-content/plugins/cg-ui-kit/build/svgs/regular/chevron-down.svg") no-repeat center;
	mask: url("/wp-content/plugins/cg-ui-kit/build/svgs/regular/chevron-down.svg") no-repeat center;
	transition: transform .2s;
}

.locfind[open] summary::after {
	transform: rotate(180deg);
}

.locfind {
	position: relative;
}

.locfind__menu {
	position: absolute;
	top: calc(100%);
	left: 0;
	z-index: 9;
	width: 320px;
	max-width: 86vw;
	background: #fff;
	border: 1px solid var(--hairline, #e3e3e3);
	border-radius: var(--r-lg, 16px);
	box-shadow: var(--shadow-2, 0 6px 18px rgba(18,33,51,0.10));
	overflow: hidden;
	animation: locfind-in .16s var(--easecubic-bezier, (0.22, 0.61, 0.36, 1)) both;
}

.locfind__menu ul {
	max-height: 360px;
	overflow-y: auto;
	padding: 8px;
	list-style: none;
}

.locfind__menu li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-radius: var(--r-md, 10px);
	font-size: 16px;
	font-weight: 700;
	position: relative; /* needed for the stretched link */
}

.locfind__menu li a {
	color: var(--oxford, #122133);
	text-decoration: none;
	cursor: pointer;
}

.locfind__menu li:hover {
	background: var(--seasalt, #f4f6f8);
}

.locfind__menu li::before {
	content: "";
	width: 16px;
	height: 16px;
	background-color: #d71945;
	-webkit-mask: url("/wp-content/plugins/cg-ui-kit/build/svgs/regular/location-dot.svg") no-repeat center;
	mask: url("/wp-content/plugins/cg-ui-kit/build/svgs/regular/location-dot.svg") no-repeat center;
}

.locfind__menu li::after {
    content: "";
    width: 16px;
    height: 16px;
    margin-left: auto;

    background-color: var(--fg-2, #3a4a5e);
    -webkit-mask: url("/wp-content/plugins/cg-ui-kit/build/svgs/regular/chevron-right.svg") no-repeat center;
    mask: url("/wp-content/plugins/cg-ui-kit/build/svgs/regular/chevron-right.svg") no-repeat center;

    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .15s var(--ease, ease), transform .15s var(--ease, ease);
}

.locfind__menu li:hover::after {
    opacity: 1;
    transform: translateX(0);
}

.locfind__menu li a::after {
	content: "";
	position: absolute;
	inset: 0; /* covers the entire li */
}