/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(https://code-components.website-files.com/6a7c7b1c1ff7c96074c54a25%2Fmodule%2F416d91365b44e4b4f477-layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(https://code-components.website-files.com/6a7c7b1c1ff7c96074c54a25%2Fmodule%2F8f2c4d11474275fbc161-layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(https://code-components.website-files.com/6a7c7b1c1ff7c96074c54a25%2Fmodule%2F2b3e1faf89f94a483539-marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

/* ================================================================
   Zone Calculator — Component Styles
   All themeable values use CSS custom properties (--zc-*) with
   sensible defaults.  Webflow sites override these on :root or
   on the host element; they inherit through the Shadow DOM boundary.
   ================================================================ */

/* ----------------------------------------------------------------
   Root / layout
   ---------------------------------------------------------------- */

.zc-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    width: 100%;
    font-family: var(--zc-font-body, "Inter", sans-serif);
}

/* ----------------------------------------------------------------
   Mobile root
   The map fills the viewport edge to edge; there is no heading and no tab
   switcher. Everything else lives in the parcel sheet floating over the map
   (see the map section below).
   ---------------------------------------------------------------- */

/* Inset what little chrome remains (the form view, the error line); the map
   panel breaks out to full width via negative margins below. */
.zc-root--mobile {
    gap: 16px;
    padding: 0 20px;
    box-sizing: border-box;
    /* Fill the viewport so the action bar pins to the bottom and the map
       flexes to fill the space between the switcher and the bar. When the
       component is embedded below page chrome (site header/nav), that chrome
       eats into the viewport — subtract its height via the offset var so the
       map isn't forced taller than the space actually left. Base tier: applies
       across the whole mobile layout (≤991px). Driven by the
       `mobileViewportOffset` prop; defaults to 0 (full viewport). The two
       media queries below override it at Webflow's smaller breakpoints; each
       falls back through the larger tiers, so an unset (0) breakpoint inherits
       the next-larger value (`mobileViewportOffsetMd` / `mobileViewportOffsetSm`
       emit their vars only when non-zero).
       The max() clamps a floor (--zc-mobile-min-height, default 360px): on a
       short/landscape viewport where 100dvh minus the offset would collapse the
       layout, the component holds this minimum and the page scrolls instead. In
       portrait the calc() is always the larger term, so the floor is a no-op. */
    min-height: max(var(--zc-mobile-min-height, 360px), calc(100dvh - var(--zc-mobile-viewport-offset, 0px)));
}

/* md — Webflow "Mobile landscape" (≤767px). Falls back to the base tier. */
@media (max-width: 767px) {
    .zc-root--mobile {
        min-height: max(var(--zc-mobile-min-height, 360px), calc(100dvh - var(--zc-mobile-viewport-offset-md, var(--zc-mobile-viewport-offset, 0px))));
    }
}

/* sm — Webflow "Mobile portrait" (≤479px). Falls back to md, then the base. */
@media (max-width: 479px) {
    .zc-root--mobile {
        min-height: max(var(--zc-mobile-min-height, 360px), calc(100dvh - var(--zc-mobile-viewport-offset-sm, var(--zc-mobile-viewport-offset-md, var(--zc-mobile-viewport-offset, 0px)))));
    }
}

/* Variant fills the whole root — the map has the viewport to itself. */
.zc-root--mobile .zc-variant {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Mobile map panel: break out of the root padding to sit edge-to-edge, with
   no card padding/background. Compound selector so it beats the later,
   equal-specificity `.zc-tab-panel` rule regardless of source order. */
.zc-tab-panel.zc-tab-panel--bleed {
    margin-left: -20px;
    margin-right: -20px;
    padding: 0;
    background-color: transparent;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The map input fills the panel; the sheet floats over the bottom of it. */
.zc-tab-panel--bleed .zcm-root {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.zc-tab-panel--bleed .zcm-map-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* Clips the collapsed parcel sheet: it stays mounted and slides its body
       below the bottom edge, which is what lets a drag reveal it gradually. */
    overflow: hidden;
}

/* Full-bleed map has square corners (no rounded top like the desktop card)
   and fills the flexed wrapper. Uses flex rather than height:100% so it
   resolves against the flex-sized parent. */
.zc-tab-panel--bleed .zcm-map {
    flex: 1;
    min-height: 0;
    height: auto;
    border-radius: 0;
}

/* ----------------------------------------------------------------
   Variant tabs (map ↔ form)
   ---------------------------------------------------------------- */

.zc-variant {
    width: 100%;
}

.zc-tabs {
    display: flex;
    width: 100%;
    gap: 4px;
}

.zc-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    height: 48px;
    border: none;
    border-radius: var(--zc-radius, 8px) var(--zc-radius, 8px) 0 0;
    padding: 0 20px;
    cursor: pointer;
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    transition: background-color 0.15s, color 0.15s;
}

.zc-tab--active {
    background-color: #F7F7F7;
    color: var(--zc-color-text, #000);
}

.zc-tab--inactive {
    background-color: var(--zc-color-primary, #267a6a);
    color: var(--zc-color-primary-text, #fff);
}

.zc-tab-panel {
    padding: 20px;
    background-color: #F7F7F7;
}

.zc-tab-panel[hidden] {
    display: none;
}

/* Mobile form panel: the card already is the grey box, so drop the tab-panel's
   own padding + background — otherwise they stack (root 20px + panel 20px +
   card 35px = 75px inset per side, leaving the fields far too narrow). With
   these gone the card sits at the root's 20px inset and the fields fill it,
   matching the Figma phone spec (~24px card padding, near-full-width fields).
   The map panel keeps its own full-bleed treatment (.zc-tab-panel--bleed). */
.zc-root--mobile .zc-tab-panel:not(.zc-tab-panel--bleed) {
    padding: 0;
    background-color: transparent;
}

.zc-root--mobile .zc-card {
    padding: 36px 24px 32px;
}

/* ----------------------------------------------------------------
   Badge component (Light / Dark variant)
   ---------------------------------------------------------------- */

.zc-badge {
    display: inline-block;
    border-radius: 1em;
    font-size: 14px;
    line-height: 2;
    padding: 0 1em;
}

.zc-badge--light {
    background-color: #eee;
    color: #000;
}

.zc-badge--dark {
    background-color: #000;
    color: #fff;
}

/* ----------------------------------------------------------------
   Card
   ---------------------------------------------------------------- */

.zc-card {
    background-color: var(--zc-color-bg-card, #f7f7f7);
    border-radius: var(--zc-radius, 8px);
    padding: 45px 35px 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* ----------------------------------------------------------------
   Form fields
   ---------------------------------------------------------------- */

.zc-fields {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: 600px;
}

.zc-field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.zc-label {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 700;
    font-size: 16px;
    color: var(--zc-color-text, #000);
    margin: 0;
}

.zc-input {
    background-color: var(--zc-color-bg-input, #fff);
    border-radius: var(--zc-radius, 8px);
    border: none;
    height: 58px;
    padding: 8px 18px;
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 400;
    font-size: 20px;
    color: var(--zc-color-text, #000);
    width: 100%;
    box-sizing: border-box;
    outline: none;
    appearance: none;
    -moz-appearance: textfield;
}

/* ----------------------------------------------------------------
   Select / dropdown
   ---------------------------------------------------------------- */

.zc-select-wrapper {
    position: relative;
    width: 100%;
}

.zc-select {
    background-color: var(--zc-color-bg-input, #fff);
    border-radius: var(--zc-radius, 8px);
    border: none;
    height: 58px;
    padding: 8px 40px 8px 18px;
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 400;
    font-size: 20px;
    color: var(--zc-color-text, #000);
    width: 100%;
    box-sizing: border-box;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.zc-select--placeholder {
    color: var(--zc-color-text-placeholder, #999);
}

.zc-select-arrow {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--zc-color-text, #000);
}

/* ----------------------------------------------------------------
   Button
   ---------------------------------------------------------------- */

.zc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--zc-color-primary, #267a6a);
    color: var(--zc-color-primary-text, #fff);
    border: none;
    border-radius: var(--zc-radius-pill, 26px);
    padding: 12px 20px;
    width: 250px;
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 400;
    font-size: 20px;
    cursor: pointer;
    transition: opacity 0.15s;
}

/* Secondary action: same pill, green outline on white. Used for the mobile
   sheet's "plan without an address" and "leave" actions, which sit under the
   filled primary. Also applied to <a> elements, hence the explicit
   text-decoration and box-sizing.

   The doubled class is load-bearing: Webflow injects the site's tags.css into
   the component's Shadow DOM *after* this stylesheet, and it carries
   `button, [type="button"], [type="reset"] { border: 0 }`. `[type="button"]`
   ties this rule on specificity (0,1,0) and wins on source order, so a single
   class silently loses the border on every <button type="button"> in
   production while the <a> variants keep theirs. Two classes (0,2,0) win
   outright. The dev harness has no shadow root and no tags.css, so it never
   reproduces this. */
.zc-button.zc-button--outline {
    background-color: transparent;
    color: var(--zc-color-primary, #267a6a);
    border: 1px solid var(--zc-color-primary, #267a6a);
    box-sizing: border-box;
    text-decoration: none;
}

/* ----------------------------------------------------------------
   Info pane (above result table)
   Mirrors the input strip pattern: address on the left, parcel
   meta in the centre, edit button (pencil) on the right.
   ---------------------------------------------------------------- */

.zc-info-pane {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    background-color: var(--zc-color-bg-card, #f7f7f7);
    border-radius: 12px;
    padding: 16px 20px 16px 24px;
    box-sizing: border-box;
}

.zc-info-address {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.zc-info-meta {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    flex-shrink: 0;
}

.zc-info-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zc-info-label {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    color: var(--zc-color-text, #000);
}

.zc-info-value {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: var(--zc-color-text, #000);
}

.zc-info-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--zc-color-primary, #267a6a);
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
    flex-shrink: 0;
    text-decoration: none;
    transition: background-color 0.15s;
}

.zc-info-edit:hover {
    background-color: rgba(38, 122, 106, 0.08);
}

.zc-info-edit:disabled {
    cursor: default;
    opacity: 0.4;
}

.zc-info-edit svg {
    width: 20px;
    height: 20px;
}

/* ----------------------------------------------------------------
   Surface Table
   ---------------------------------------------------------------- */

.zc-table {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 20px;
    background-color: var(--zc-color-bg-card, #f7f7f7);
    border-radius: 12px;
    overflow: hidden;
}

/* ---- Header row ---- */

.zc-table-header {
    display: grid;
    /* Must match .zc-surface-row columns: type | div | current | div | recommended | div | diff | chevron */
    grid-template-columns: auto 1px 127px 1px 127px 1px 127px 14px;
    align-items: start;
    padding: 12px 24px 4px 20px;
    gap: 0 16px;
}

.zc-table-header-label {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 700;
    font-size: 12px;
    color: var(--zc-color-text, #000);
    white-space: nowrap;
}

/* ---- Table rows container ---- */

.zc-table-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---- Individual surface row ---- */

.zc-surface-row {
    display: grid;
    grid-template-columns: auto 1px 127px 1px 127px 1px 127px 14px;
    align-items: center;
    gap: 0 16px;
    background-color: var(--zc-color-bg-row, #fff);
    border-radius: var(--zc-radius, 8px);
    padding: 0 24px 0 20px;
    min-height: 58px;
    position: relative;
}

/* ---- Zone type column (icon + label) ---- */

.zc-surface-type {
    display: flex;
    align-items: center;
    gap: 24px;
}

.zc-surface-icon {
    width: 59px;
    height: 59px;
    flex-shrink: 0;
}

.zc-surface-icon-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.zc-surface-label-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.zc-surface-label {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 400;
    font-size: 16px;
    color: var(--zc-color-text, #000);
}

.zc-help-icon {
    display: inline-flex;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    cursor: help;
}

.zc-help-icon svg {
    width: 100%;
    height: 100%;
}

/* ---- Vertical dividers ---- */

.zc-vdivider {
    width: 1px;
    height: 20px;
    background-color: var(--zc-color-gray-300, #c8c8c8);
    justify-self: center;
}

.zc-vdivider--tall {
    height: 48px;
}

/* ---- Number stepper ---- */

.zc-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.zc-stepper-input-wrap {
    display: flex;
    align-items: center;
    background-color: var(--zc-color-gray-100, #ededed);
    border: 1px solid var(--zc-color-gray-1, #d9d9d9);
    border-radius: 4px;
    height: 32px;
    width: 83px;
    padding: 0 4px 0 8px;
    box-sizing: border-box;
    gap: 8px;
}

.zc-stepper-input {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 400;
    font-size: 16px;
    color: var(--zc-color-text, #000);
    text-align: right;
    outline: none;
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

.zc-stepper-input::-webkit-inner-spin-button,
.zc-stepper-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.zc-stepper-arrows {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}

.zc-stepper-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 8px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: var(--zc-color-text, #1C1B1F);
}

.zc-stepper-arrow svg {
    width: 100%;
    height: 100%;
}

.zc-stepper-arrow--down {
    transform: rotate(180deg);
}

.zc-stepper-arrow:disabled {
    cursor: default;
    opacity: 0.3;
}

.zc-stepper-unit {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 400;
    font-size: 16px;
    color: var(--zc-color-text, #000);
    white-space: nowrap;
}

/* ---- Square meters display ---- */

.zc-m2 {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    white-space: nowrap;
}

.zc-m2-value {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 700;
    font-size: 16px;
    color: var(--zc-color-text, #000);
}

.zc-m2-unit {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 700;
    font-size: 16px;
    color: var(--zc-color-text, #000);
}

.zc-m2-unit sup {
    font-size: 10px;
    vertical-align: super;
    line-height: 0;
}

/* ---- Recommended value ---- */

.zc-surface-recommended {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.zc-surface-recommended .zc-m2 {
    border-bottom: 2px solid var(--zc-color-text, #000);
    padding-bottom: 2px;
}

/* ---- Difference indicator ---- */

.zc-surface-difference {
    display: flex;
    align-items: center;
    justify-content: center;
}

.zc-diff {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.zc-diff-label {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 400;
    font-size: 12px;
    color: var(--zc-color-text, #000);
}

.zc-diff-value-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.zc-diff-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transform: rotate(180deg);
}

.zc-diff--ok .zc-diff-label {
    color: var(--zc-color-primary, #267a6a);
    font-weight: 700;
    font-size: 22px;
}

/* ---- Row wrapper (for expand/collapse) ---- */

.zc-surface-row-wrap {
    background-color: var(--zc-color-bg-row, #fff);
    border-radius: var(--zc-radius, 8px);
    overflow: hidden;
    min-width: 0;
}

.zc-surface-row-wrap .zc-surface-row {
    background-color: transparent;
    border-radius: 0;
}

/* ---- Expanded detail panel ---- */

.zc-surface-detail {
    padding: 8px 24px 20px 20px;
}

/* ---- Expand chevron ---- */

.zc-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.zc-chevron--open {
    transform: rotate(0deg);
}

.zc-chevron svg {
    width: 12px;
    height: 10px;
}

/* ---- Current value column ---- */

.zc-surface-current {
    display: flex;
    align-items: center;
}

/* ---- Remaining area footer ---- */

.zc-remaining {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px 12px;
}

.zc-remaining-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
}

.zc-remaining-text {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 400;
    font-size: 12px;
    color: var(--zc-color-text, #000);
}

.zc-remaining-value {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
}

.zc-remaining-number {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 700;
    font-size: 16px;
    color: var(--zc-color-text, #000);
}

.zc-remaining-value .zc-m2-unit {
    font-weight: 700;
    font-size: 16px;
}

.zc-remaining-bar {
    width: 100px;
    height: 8px;
    background-color: var(--zc-color-bg-row, #fff);
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0;
}

.zc-remaining-bar-fill {
    height: 100%;
    background-color: var(--zc-color-primary, #267a6a);
    transition: width 0.2s ease;
}

/* ----------------------------------------------------------------
   No-params message
   ---------------------------------------------------------------- */

.zc-no-params {
    font-size: 20px;
    color: var(--zc-color-text-muted, #525252);
    text-align: center;
    margin: 0;
}

/* ----------------------------------------------------------------
   Map input variant (.zcm-*)
   ---------------------------------------------------------------- */

.zcm-map-wrap {
    position: relative;
    width: 100%;
}

.zcm-map {
    width: 100%;
    height: 560px;
    border-radius: var(--zc-radius, 8px) var(--zc-radius, 8px) 0 0;
    overflow: hidden;
    background-color: #fff;
    position: relative;
    /* Holding a finger on the map is our additive-select gesture, so nothing in
       the map may respond to a long press the way a document would.

       Leaflet only suppresses selection on `.leaflet-tile`,
       `.leaflet-marker-icon` and `.leaflet-marker-shadow` — NOT on the
       container, and not on the SVG overlay pane holding the parcel polygons.
       A press landing on either of those let iOS Safari start a text selection
       that then extended across the rest of the page. Setting it here covers
       the whole map subtree by inheritance; the search box and the parcel sheet
       are siblings of this element, so their text stays selectable.

       The callout rule is separate: without it a long press on a tile image
       offers to save/share it. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.zcm-map .leaflet-container {
    width: 100%;
    height: 100%;
    font-family: inherit;
    background: #fff;
}

/* Uniform cursor across the whole map.
   Leaflet gives the map container `grab` and every interactive vector layer
   `pointer` — so a selected parcel's highlight polygon read as clickable while
   the rest of the map read as draggable, even though panning and selecting work
   identically everywhere. We show the pointer at rest throughout instead, so the
   cursor never implies a difference that isn't there.
   `.zcm-map` IS the Leaflet container (same element carries `.leaflet-grab`),
   hence the compound selectors — they also out-specify Leaflet's own rules. */
.zcm-map.leaflet-grab,
.zcm-map.leaflet-grab .leaflet-interactive {
    cursor: pointer;
}

/* An active pan keeps `grabbing` — transient feedback, not a spatial
   inconsistency. Leaflet's own rule for this keys off a class it sets on
   <body>, which sits outside the shadow root in the Webflow embed and therefore
   never matches there; the map mirrors the drag state onto the container as
   `zcm-dragging` so this works in the embed as well as in the dev harness. */
.zcm-map.zcm-dragging.leaflet-grab,
.zcm-map.zcm-dragging.leaflet-grab .leaflet-interactive {
    cursor: grabbing;
}

/* Cadastre overlay: render with multiply blend so the white background of
   swisstopo's cadastralwebmap-farbe tiles drops out, leaving parcel lines
   and labels visible on top of any base layer (Landeskarte, Luftbild…).
   grayscale() desaturates the pink building fills to grey (per design) while
   keeping the parcel lines and numbers dark; white stays white so it still
   drops out under multiply. The filter applies before the blend, so the two
   compose correctly on the same element. */
.zcm-cadastre-blend {
    filter: grayscale(1);
    mix-blend-mode: multiply;
}

/* ---- Search overlay (floating top-left) ---- */

.zcm-search-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 72px;
    max-width: 420px;
    z-index: 500;
}

.zcm-search-input {
    width: 100%;
    height: 52px;
    padding: 0 44px 0 22px;
    border: 2px solid #b2b2b2;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 500;
    font-size: 18px;
    color: var(--zc-color-text, #000);
    outline: none;
    box-sizing: border-box;
}

.zcm-search-input::placeholder {
    color: var(--zc-color-text-placeholder, #999);
    font-weight: 400;
}

.zcm-search-clear {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--zc-color-text, #000);
}

.zcm-search-clear:hover {
    background: rgba(0, 0, 0, 0.06);
}

.zcm-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    max-height: 260px;
    overflow-y: auto;
    list-style: none;
    padding: 6px;
    margin: 0;
    z-index: 500;
}

.zcm-search-result {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 15px;
    border-radius: 10px;
}

.zcm-search-result:hover {
    background: #f5f5f5;
}

/* ---- Transient toast (floats over the map) ----
   Feedback on a tap — "outside the building zone", "no parcel here" — is
   momentary and tied to the map, so it surfaces over the map and fades out on
   its own instead of reserving a permanent line of layout below the card.
   `pointer-events: none` matters: the toast sits on top of an interactive map
   and must never swallow the next click. */
.zcm-toast {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    /* Above the sheet, which is itself above Leaflet's controls. */
    z-index: 1020;
    margin: 0 auto;
    max-width: 420px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    box-sizing: border-box;
    border-radius: var(--zc-radius, 8px);
    background-color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-size: 14px;
    line-height: 1.35;
    color: var(--zc-color-text, #000);
    pointer-events: none;
    animation: zcm-toast-in 180ms ease-out;
}

/* Mobile pins the parcel sheet to the bottom of the map — clear it. */
.zcm-toast--mobile {
    left: 20px;
    right: 20px;
    bottom: 96px;
}

.zcm-toast--leaving {
    animation: zcm-toast-out 200ms ease-in forwards;
}

.zcm-toast-icon {
    flex-shrink: 0;
    color: var(--zc-color-danger, #b3261e);
}

@keyframes zcm-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes zcm-toast-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(8px); }
}

/* ---- Leaflet controls (zoom) styled to match design ---- */

/* Center the zoom control vertically on the right edge. Only the zoom
   lives in this corner (attribution was moved to bottom-left). */
.zcm-map .leaflet-bottom.leaflet-right {
    top: 50%;
    bottom: auto;
    right: 16px;
    transform: translateY(-50%);
}

/* ---- Base-map view selector (custom, replaces the Leaflet layer control) ----
   A layers button aligned with the search box; clicking it opens a popover of
   thumbnail tiles (Satellit / Standard). The active tile's label is bold and
   its thumbnail gets a brand-green ring. */
.zcm-viewselect {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 500;
}

.zcm-viewselect-toggle {
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    color: var(--zc-color-primary, #267a6a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.zcm-viewselect-toggle:hover {
    background: #f5f5f5;
}

.zcm-viewselect-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: flex;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}

.zcm-viewselect-tile {
    width: 116px;
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--zc-font-body, "Inter", sans-serif);
}

.zcm-viewselect-thumb {
    width: 116px;
    height: 96px;
    border-radius: 14px;
    background-color: #e9e9e9;
    background-size: cover;
    background-position: center;
    border: 2px solid transparent;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

.zcm-viewselect-tile[aria-checked="true"] .zcm-viewselect-thumb {
    border-color: var(--zc-color-primary, #267a6a);
}

.zcm-viewselect-label {
    font-size: 16px;
    font-weight: 400;
    color: var(--zc-color-text, #000);
}

.zcm-viewselect-tile[aria-checked="true"] .zcm-viewselect-label {
    font-weight: 700;
}

/* Zoom control — two separated, individually rounded tiles stacked vertically.
   Spec: 32x32 tiles with a 5px gap → 32x69 group total. */
.zcm-map .leaflet-control-zoom {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.zcm-map .leaflet-control-zoom a {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    background-color: #fff !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    color: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    font-size: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
}

.zcm-map .leaflet-control-zoom-in {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2722%27 height=%2722%27 viewBox=%270 0 22 22%27 fill=%27none%27%3E%3Cpath d=%27M11 3V19M3 11H19%27 stroke=%27%23000%27 stroke-width=%273%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") !important;
}

.zcm-map .leaflet-control-zoom-out {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2722%27 height=%2722%27 viewBox=%270 0 22 22%27 fill=%27none%27%3E%3Cpath d=%27M3 11H19%27 stroke=%27%23000%27 stroke-width=%273%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") !important;
}

.zcm-map .leaflet-control-zoom a:hover {
    background-color: #f5f5f5 !important;
}

.zcm-map .leaflet-control-zoom a.leaflet-disabled {
    background-color: #fff !important;
    opacity: 0.35;
    cursor: default;
}

/* Attribution moved to bottom-left; keep it subtle */
.zcm-map .leaflet-bottom.leaflet-left .leaflet-control-attribution {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
}

/* ---- Docked info strip directly below the map ---- */

.zcm-info-dock {
    background-color: var(--zc-color-gray-100, #ededed);
    border-radius: 0 0 var(--zc-radius, 8px) var(--zc-radius, 8px);
    padding: 14px 20px;
    width: 100%;
    box-sizing: border-box;
}

.zcm-parcel-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.zcm-parcel-field-label {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 700;
    font-size: 12px;
    color: var(--zc-color-text, #000);
    line-height: 1;
}

.zcm-parcel-field-value {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 400;
    font-size: 16px;
    color: var(--zc-color-text, #000);
    line-height: 1.25;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ---- Numbered parcel badge ----
   On the map it's a Leaflet divIcon (className zcm-badge-icon → we strip
   Leaflet's default white box); in the list it's the smaller --list variant. */
.zcm-badge-icon {
    background: none;
    border: none;
}

.zcm-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background-color: var(--zc-color-deepgreen-3, #2c5950);
    color: #fff;
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.zcm-badge--list {
    width: 22px;
    height: 22px;
    font-size: 12px;
    flex-shrink: 0;
    box-shadow: none;
}

/* ---- Stacked list of selected parcels (dock + expanded sheet) ---- */
.zcm-parcel-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* Badge on the left, then the parcel's two lines: identity fields on top,
   its own usage picker below. Rows are separated so several parcels stay
   readable as distinct blocks. */
.zcm-parcel-list-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.zcm-parcel-list-row + .zcm-parcel-list-row {
    border-top: 1px solid var(--zc-color-gray-1, #d9d9d9);
    padding-top: 10px;
}

.zcm-parcel-list-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

/* Parzelle | divider | Adresse. A grid rather than a wrapping flex row: the
   address is much longer than the parcel number and has to wrap inside its own
   column, and a wrapped flex row would strand the divider on its own line. */
.zcm-parcel-list-fields {
    display: grid;
    grid-template-columns: auto 1px minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    min-width: 0;
}

/* The usage picker sits under the identity fields, full width of the row —
   the density labels are long ("mittlere Dichte (Gesamthöhe 12m < x ≤ 15.5m)")
   and would truncate in a narrow column. */
.zcm-parcel-usage {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.zcm-parcel-usage .zc-select-wrapper {
    width: 100%;
}

/* The shared .zc-select is sized for the form page (20px / 58px). In the parcel
   list it sits next to 12px labels and 16px values, so it steps down to the
   list's own scale — and the shorter control keeps the mobile sheet compact. */
.zcm-parcel-usage .zc-select {
    height: 40px;
    padding: 6px 32px 6px 12px;
    font-size: 16px;
}

.zcm-parcel-usage .zc-select-arrow {
    right: 12px;
    border-left-width: 5px;
    border-right-width: 5px;
    border-top-width: 7px;
}

.zcm-parcel-list-empty,
.zcm-sheet-summary {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-size: 14px;
    color: var(--zc-color-text-placeholder, #999);
    padding: 4px 0;
}

/* Holds its line box even when the text is empty (expanded, nothing
   outstanding), so opening and closing never changes the header's height —
   which would make the sheet jump mid-drag. */
.zcm-sheet-summary {
    min-height: 20px;
    line-height: 20px;
}

/* Raised by a submit attempt that couldn't go through. */
.zcm-sheet-summary--error {
    color: var(--zc-color-danger, #b3261e);
    font-weight: 600;
}

/* Same attempt, pointed at the row it is about: the usage this parcel still
   needs. Cleared as soon as a usage is picked. */
.zcm-parcel-usage--missing .zcm-parcel-field-label,
.zcm-parcel-usage--missing .zc-select--placeholder {
    color: var(--zc-color-danger, #b3261e);
}

/* Inset ring rather than a border — .zc-select is borderless, and a real
   border would resize the control. */
.zcm-parcel-usage--missing .zc-select {
    box-shadow: inset 0 0 0 1px var(--zc-color-danger, #b3261e);
}

/* ---- Action row: density picker + calculate button ---- */

.zcm-action-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    width: 100%;
}

.zcm-density-select {
    flex: 1;
    min-width: 0;
    max-width: 540px;
}

.zcm-outside-zone-message {
    display: flex;
    align-items: center;
    height: 58px;
    padding: 8px 18px;
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 400;
    font-size: 20px;
    color: var(--zc-color-text-placeholder, #999);
    box-sizing: border-box;
}

.zcm-calc-button {
    flex-shrink: 0;
    height: 52px;
    padding: 0 28px;
    border-radius: 9999px;
    margin-left: auto;
}

/* ---- Mobile parcel sheet (floats over the bottom of the map) ---- */

.zcm-sheet {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    /* Above Leaflet's control corners (z-index 1000) — expanded, the sheet
       covers the zoom buttons rather than letting them punch through it. */
    z-index: 1010;
    /* Figma: vertical white → gray-100 gradient. */
    background-color: #fff;
    background-image: linear-gradient(180deg, #fff 0%, var(--zc-color-gray-100, #ededed) 100%);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
    /* No bottom padding here: the collapsed offset is the body's height, so
       anything below the body would peek out under the header. The body and
       the header carry their own bottom padding instead. */
    padding: 0 18px;
    box-sizing: border-box;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

/* No animation while a finger is on the header (the sheet tracks it 1:1, an
   animation would lag behind the gesture), nor before the body has been
   measured — the map tab can mount hidden, and the first real measurement must
   not play as a slide. */
.zcm-sheet--dragging,
.zcm-sheet--unmeasured {
    transition: none;
}

/* Drag surface: the grip and the summary line together, so the gesture has a
   finger-sized target rather than the 4px bar. */
.zcm-sheet-grab {
    padding-bottom: 12px;
    cursor: grab;
    /* Claim the vertical gesture: without this the browser pans the page and
       cancels the pointer mid-drag. */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.zcm-sheet-grab:active {
    cursor: grabbing;
}

.zcm-sheet-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 28px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: inherit;
    touch-action: none;
}

.zcm-sheet-handle::before {
    content: "";
    width: 70px;
    height: 4px;
    border-radius: 9999px;
    background-color: var(--zc-color-deepgreen-4, #263a3a);
}

.zcm-sheet-body {
    display: flex;
    flex-direction: column;
    padding-bottom: 14px;
    /* Keep a tall multi-parcel list from covering the whole map — scroll
       within the sheet instead. Bounds the collapsed offset too. */
    max-height: 60vh;
    overflow-y: auto;
    /* Don't hand the scroll on to the page when the list hits its end. */
    overscroll-behavior: contain;
}

.zcm-sheet-row {
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.zcm-sheet-row .zcm-parcel-field {
    gap: 4px;
}

.zcm-sheet-vsep {
    flex-shrink: 0;
    width: 1px;
    align-self: stretch;
    background-color: var(--zc-color-gray-1, #d9d9d9);
}

.zcm-sheet-divider {
    height: 1px;
    background-color: var(--zc-color-gray-1, #d9d9d9);
    margin: 10px 0;
}

/* ---- Sheet action stack ----
   On mobile the sheet carries the whole action set: the filled primary, then
   the two outlined secondaries. Full-width pills stacked vertically, so the
   long German labels never truncate. They sit in the sheet body, so they are
   only reachable once it is open. */
.zcm-sheet-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}

/* The list above already separates itself; only add a rule when both are
   present. */
.zcm-parcel-list + .zcm-sheet-actions {
    margin-top: 12px;
    border-top: 1px solid var(--zc-color-gray-1, #d9d9d9);
}

.zcm-sheet-action {
    width: 100%;
    height: 46px;
    padding: 0 18px;
    font-size: 16px;
    font-weight: 700;
    gap: 8px;
}

/* The primary's icon is drawn with a white stroke (shared with the desktop
   calculate button); the outlined variants take the current green. */
.zcm-sheet-action.zc-button--outline svg [stroke="white"] {
    stroke: currentColor;
}

/* ---- Mobile form view actions ----
   The form has no sheet to carry them, so its way back to the map and out of
   the calculator sits below the card. */
.zc-mobile-form-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
}

.zc-mobile-form-actions .zc-button {
    width: 100%;
    height: 46px;
    padding: 0 18px;
    font-size: 16px;
    font-weight: 700;
}

/* ================================================================
   Mobile result layout (.zc-result-root--mobile)
   Card stack instead of the desktop table: a stacked parcel info
   card, one card per surface type, and a pinned bottom action bar.
   ================================================================ */

.zc-result-root--mobile {
    gap: 20px;
    padding: 0 20px;
    box-sizing: border-box;
    /* Full-width cards, not the desktop's centred column. */
    align-items: stretch;
}

/* ---- Info card (stacked variant) ---- */

/* Address on its own row above a divider, then the meta columns with the
   edit pencil pinned to the right. */
.zc-info-pane--mobile {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0;
    padding: 20px 24px;
}

.zc-info-pane--mobile .zc-info-address {
    grid-column: 1 / -1;
    flex: none;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--zc-color-gray-300, #c8c8c8);
    gap: 6px;
}

.zc-info-pane--mobile .zc-info-meta {
    grid-column: 1;
    gap: 20px;
    min-width: 0;
}

/* Values step down from the shared 16px to 14px on mobile. The Figma spec is
   16px, but its text nodes are drawn wider than a real phone (the address is a
   no-wrap 500px node), so 16px never wraps there; at true mobile width 16px
   wraps the address, "799 m²" and "Geringe Dichte" onto second lines. 14px
   keeps each value on one line, matching the Figma's intended airy look. Labels
   stay at the 12px spec — they're short and never wrap. */
.zc-info-pane--mobile .zc-info-value {
    font-size: 14px;
}

.zc-info-pane--mobile .zc-info-edit {
    grid-column: 2;
    align-self: center;
}

/* ---- Result card stack ---- */

.zc-rcards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.zc-rcard {
    background-color: var(--zc-color-bg-row, #fff);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

/* Card header: surface icon + title + help marker */
.zc-rcard-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.zc-rcard .zc-surface-icon {
    width: 44px;
    height: 44px;
}

.zc-rcard-title {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.15;
    color: var(--zc-color-text, #000);
}

.zc-rcard-divider {
    height: 1px;
    background-color: var(--zc-color-gray-100, #ededed);
    margin: 16px 0;
}

/* A labelled row: title + caption on the left, value/badge on the right */
.zc-rcard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Title over caption, tight. Both need an explicit line-height: `line-height`
   inherits through the Shadow DOM boundary, so without one they pick up the
   Webflow page's body value (2 on the live site) and the title/caption pair
   drifts ~18px apart — the Figma spec has them nearly touching. */
.zc-rcard-row-label {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.zc-rcard-row-title {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.35;
    color: var(--zc-color-text, #000);
}

.zc-rcard-row-sub {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.35;
    color: var(--zc-color-text-muted, #525252);
}

.zc-rcard-row-value {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.zc-rcard-value {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    color: var(--zc-color-text-muted, #525252);
    white-space: nowrap;
}

.zc-rcard-unit {
    font-weight: 700;
}

/* Recommended value: black + underlined, like the desktop table cell. */
.zc-rcard-value--recommended {
    color: var(--zc-color-text, #000);
    border-bottom: 2px solid var(--zc-color-text, #000);
    padding-bottom: 3px;
}

.zc-rcard-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--zc-color-primary, #267a6a);
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
    flex-shrink: 0;
    transition: background-color 0.15s;
}

.zc-rcard-edit:hover {
    background-color: rgba(38, 122, 106, 0.08);
}

.zc-rcard-edit svg {
    width: 20px;
    height: 20px;
}

/* ---- Assessment (Verto-Einschätzung) badge ---- */

.zc-assess {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.zc-assess-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.zc-assess-label {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    color: var(--zc-color-text, #000);
}

/* ---- "Unsere Empfehlung" expand toggle ---- */

.zc-rcard-expand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.zc-rcard-expand-label {
    font-family: var(--zc-font-body, "Inter", sans-serif);
    font-weight: 700;
    font-size: 13px;
    /* Explicit, for the same inherited-line-height reason as the row labels. */
    line-height: 1.35;
    color: var(--zc-color-text, #000);
}

.zc-rcard-detail {
    padding-top: 16px;
}

/* ---- Bottom action bar ----
   In flow, after the last card: as a sticky bar it floated over the cards it
   was meant to follow, hiding a row of whichever card happened to be at the
   bottom of the viewport. The button now simply ends the stack, so nothing is
   ever covered. The root's 20px gap provides the space above it. */

.zc-mobile-actionbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
}

/* The "Neue Berechnung" pill grows to fill the bar instead of the desktop's
   fixed 250px. */
.zc-mobile-newcalc.zc-button {
    width: auto;
    flex: 1 1 auto;
    max-width: 360px;
    text-decoration: none;
}