/* Einzugsgebiete-Check widget, styled to the Goetheschule design.
   Colors come from the active theme style variant via CSS custom properties,
   with olive fallbacks so the widget also looks right outside the theme. */
.basinmap-widget {
	--basinmap-accent: var(--wp--preset--color--primary, #808d5e);
	--basinmap-accent-dark: var(--wp--preset--color--primary-dark, #49543d);
	--basinmap-field-border: var(--wp--preset--color--primary, #808d5e);
	font-size: 1rem;
}

.basinmap-form {
	margin: 0 0 1.5rem;
}

.basinmap-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: end;
}

.basinmap-field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.basinmap-field--street {
	flex: 1 1 22rem;
}

.basinmap-field--hnr {
	flex: 0 1 14rem;
}

.basinmap-label {
	font-weight: 700;
	color: var(--basinmap-accent);
}

.basinmap-combo {
	position: relative;
}

/* Street input and house number select share one look. */
.basinmap-street,
.basinmap-hnr {
	width: 100%;
	box-sizing: border-box;
	padding: 0.85rem 2.75rem 0.85rem 1.1rem;
	border: 2px solid var(--basinmap-field-border);
	border-radius: 0.75rem;
	background-color: #fff;
	color: var(--basinmap-accent-dark);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
}

.basinmap-street::placeholder {
	color: var(--basinmap-accent);
	opacity: 0.85;
}

.basinmap-street:focus,
.basinmap-hnr:focus {
	outline: none;
	border-color: var(--basinmap-accent-dark);
	box-shadow: 0 0 0 3px rgba(128, 141, 94, 0.2);
}

/* House number is a real dropdown: replace the native arrow with a chevron. */
.basinmap-hnr {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.basinmap-field--hnr::after {
	content: "";
	position: absolute;
	right: 1.1rem;
	bottom: 1.15rem;
	width: 1rem;
	height: 0.7rem;
	pointer-events: none;
	background: var(--basinmap-accent);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Street is a type-to-search field, not a dropdown: a magnifier says so. */
.basinmap-combo::after {
	content: "";
	position: absolute;
	right: 1rem;
	bottom: 0.92rem;
	width: 1.15rem;
	height: 1.15rem;
	pointer-events: none;
	background-color: var(--basinmap-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cline x1='15.6' y1='15.6' x2='21' y2='21'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cline x1='15.6' y1='15.6' x2='21' y2='21'/%3E%3C/svg%3E") center / contain no-repeat;
}

.basinmap-hnr:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.basinmap-suggestions {
	position: absolute;
	z-index: 1200; /* above Leaflet zoom controls (z-index 1000) */
	left: 0;
	right: 0;
	margin: 0.35rem 0 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 2px solid var(--basinmap-field-border);
	border-radius: 0.75rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	max-height: 16rem;
	overflow-y: auto;
}

.basinmap-suggestions li {
	padding: 0.7rem 1.1rem;
	color: var(--basinmap-accent-dark);
	font-weight: 600;
	cursor: pointer;
}

.basinmap-suggestions li:hover {
	background: var(--wp--preset--color--secondary-light, #faead5);
}

.basinmap-submit {
	margin-top: 1.25rem;
	padding: 0.9rem 2rem;
	border: 0;
	border-radius: 0.75rem;
	background: var(--basinmap-accent);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.basinmap-submit:hover {
	background: var(--basinmap-accent-dark);
}

.basinmap-result {
	margin: 1.5rem 0;
	color: var(--basinmap-accent);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.4;
}

.basinmap-result strong {
	color: var(--basinmap-accent-dark);
	font-weight: 700;
}

.basinmap-result--empty {
	color: var(--wp--preset--color--secondary, #e9967f);
}

.basinmap-own-note {
	font-style: italic;
}

.basinmap-map {
	height: 28rem;
	margin-top: 1.25rem;
	border-radius: 1.5rem;
	overflow: hidden;
	background: #e8eef3;
}

/* Empty map container collapses when the map is disabled in settings. */
.basinmap-map:empty {
	height: 0;
	margin-top: 0;
}

@media (max-width: 600px) {
	.basinmap-fields {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}

	.basinmap-field--street,
	.basinmap-field--hnr {
		flex: 1 1 auto;
	}

	.basinmap-submit {
		width: 100%;
	}
}