:root{
	--brand-orange:#0C4C4B;
	--brand-dark-green:#0A3D3D;
	--brand-orange-soft:#edf8f7;
	--brand-orange-soft-strong:#dfeeea;
	--brand-orange-text:#0A4042;
	--field-radius:4px;
}
*, *::before, *::after{ box-sizing:border-box; }
html, body{
	height:100%;
	margin:0;
	font-family:"Poppins", Sans-serif;
	color:#333;
	overflow:hidden; /* page must fit the viewport, no scrolling on desktop/tablet */
}

.brand-header{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:78px;
	padding:4px 0 0;
}
.brand-logo{
	display:block;
	width:min(100%, 405px);
	height:auto;
	max-height:114px;
	object-fit:contain;
}

.enquiry-page{
	height:100vh;
	display:flex;
	flex-direction:column;
}

/* ---- Main working area: form column + map column ---- */
.enquiry-main{
	flex:1;
	display:flex;
	gap:16px;
	padding:16px;
	background:var(--brand-orange);
	min-height:0; /* required so children can shrink instead of overflowing */
}

.form-col{
	width:26%;
	min-width:260px;
	max-width:340px;
	background:#fff;
	border-radius:8px;
	padding:20px;
	overflow-y:auto; /* safety valve on very short screens, hidden in normal use */
	display:flex;
	flex-direction:column;
	gap:10px;
}
.form-col h2{
	font-size:15px;
	margin:0 0 4px 0;
	color:var(--brand-dark-green);
}
.form-col p.lead{
	font-size:12px;
	color:#666;
	margin:0 0 6px 0;
	line-height:1.4;
}
.testing-controls{
	padding:10px;
	border:1px dashed #bfe8c8;
	border-radius:var(--field-radius);
	background:var(--brand-orange-soft);
}
.testing-controls summary{
	font-size:11px;
	font-weight:600;
	color:var(--brand-orange-text);
	cursor:pointer;
}
.testing-controls .testing-buttons{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:4px;
	margin-top:8px;
}
.testing-controls button{
	padding:5px 3px;
	border:1px solid #bfe8c8;
	border-radius:3px;
	background:#fff;
	color:var(--brand-orange-text);
	font:500 11px inherit;
	cursor:pointer;
}
.testing-controls button:hover,
.testing-controls button:focus-visible{ background:var(--brand-orange-soft-strong); }

.field-row{ display:flex; gap:8px; }
.field-row > *{ flex:1; min-width:0; }
.mobile-number-row{ display:flex; gap:8px; }
.mobile-number-row select{ flex:0 1 42%; min-width:0; }
.mobile-number-row input{ flex:1; min-width:0; }
.phone-error{ font-size:12px; margin:6px 0 0; }
.phone-error{ color:#ad3d22; }

label.sr-only{
	position:absolute;
	width:1px; height:1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea{
	width:100%;
	font-family:inherit;
	font-size:13px;
	padding:8px 10px;
	border:1px solid #ddd;
	border-radius:var(--field-radius);
	background:#fff;
	color:#333;
}
textarea{ resize:none; }
input:focus, select:focus, textarea:focus{
	outline:none;
	border-color:var(--brand-orange);
}

.boundary-status{
	font-size:12px;
	padding:8px 10px;
	border-radius:var(--field-radius);
	background:var(--brand-orange-soft);
	color:var(--brand-orange-text);
}
.boundary-status.ready{
	background:#e5f3ec;
	color:var(--brand-dark-green);
}

.submit-btn{
	margin-top:4px;
	background:var(--brand-dark-green);
	color:#fff;
	border:none;
	border-radius:4px;
	padding:11px 16px;
	font-family:inherit;
	font-size:13px;
	font-weight:600;
	cursor:pointer;
}
.submit-btn:disabled{
	background:#9aa8a2;
	cursor:not-allowed;
}
.back-to-edit-btn{
	background:#fff;
	color:var(--brand-dark-green);
	border:1px solid var(--brand-dark-green);
	border-radius:4px;
	padding:10px 16px;
	font-family:inherit;
	font-size:13px;
	font-weight:600;
	cursor:pointer;
}

/* ---- Step tracker (left column) ---- */
.step-tracker{
	list-style:none;
	margin:0 0 4px 0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:4px;
}
.step-item{
	display:flex;
	align-items:center;
	gap:10px;
	padding:8px 10px;
	border-radius:6px;
	font-size:13px;
	color:#999;
}
.step-item .step-indicator{
	flex:0 0 auto;
	width:22px;
	height:22px;
	border-radius:50%;
	background:#eee;
	color:#999;
	font-size:11px;
	font-weight:600;
	display:flex;
	align-items:center;
	justify-content:center;
}
.step-item.active{
	color:var(--brand-dark-green);
	font-weight:600;
	background:#f4f7f5;
}
.step-item.active .step-indicator{ background:var(--brand-orange); color:#fff; }
.step-item.complete{ color:var(--brand-dark-green); cursor:pointer; }
.step-item.complete .step-indicator{ background:var(--brand-dark-green); color:#fff; }
.step-item.complete:hover{ background:#f4f7f5; }

/* ---- Map column ---- */
.map-col{
	flex:1;
	background:#fff;
	border-radius:8px;
	display:flex;
	flex-direction:column;
	min-width:0;
}
/* ---- Step panels (right column swaps content per step) ---- */
.step-panel{
	display:none;
	flex:1;
	flex-direction:column;
	min-height:0;
}
.step-panel.active{ display:flex; }
.step-panel:not([data-step-panel="4"]){
	padding:20px;
	gap:14px;
	overflow-y:auto;
}
.panel-banner{
	font-size:12px;
	font-weight:500;
	color:var(--brand-dark-green);
	background:#e5f3ec;
	padding:8px 12px;
	border-radius:20px;
}
.panel-body{
	flex:1;
	display:flex;
	flex-direction:column;
	gap:8px;
}
.next-btn{
	align-self:flex-end;
	margin-top:auto;
	background:var(--brand-dark-green);
	color:#fff;
	border:none;
	border-radius:4px;
	padding:11px 16px;
	font-family:inherit;
	font-size:13px;
	font-weight:600;
	cursor:pointer;
	min-width:100px;
}
.next-btn:disabled{ background:#9aa8a2; cursor:not-allowed; }

/* ---- Success view (after Send Enquiry) ---- */
.success-title{ margin:0; font-size:22px; line-height:1.35; color:var(--brand-dark-green); }
.success-copy{ margin:0; font-size:14px; color:#333; }
.success-image{ display:block; flex:1 1 auto; min-height:0; width:100%; object-fit:contain; object-position:left top; }
.success-close-btn{ align-self:flex-start; }

/* ---- Step 1: contact verification ---- */
.otp-panel{
	margin-top:6px;
	padding:12px;
	border:1px solid #d8e6de;
	border-radius:var(--field-radius);
	background:#f7faf8;
	display:flex;
	flex-direction:column;
	gap:9px;
}
.otp-heading{
	margin:0;
	font-size:13px;
	font-weight:600;
	color:var(--brand-dark-green);
}
.otp-copy, .otp-status{
	margin:0;
	font-size:11px;
	line-height:1.4;
	color:#666;
}
.delivery-options{ display:flex; gap:14px; }
.delivery-option{
	display:flex;
	align-items:center;
	gap:5px;
	font-size:12px;
	color:#333;
	cursor:pointer;
}
.delivery-option input{ margin:0; accent-color:var(--brand-orange); }
.otp-actions{ display:flex; gap:8px; }
.otp-btn{
	border:0;
	border-radius:var(--field-radius);
	padding:8px 11px;
	font-family:inherit;
	font-size:12px;
	font-weight:600;
	color:#fff;
	background:var(--brand-orange);
	cursor:pointer;
	white-space:nowrap;
}
.otp-btn:disabled{ background:#9aa8a2; cursor:not-allowed; }
.otp-status.error{ color:#ad3d22; }
.otp-status.success{ color:var(--brand-dark-green); font-weight:600; }
.email-match-error{ color:#ad3d22; font-size:12px; margin:6px 0 0; }

/* ---- Step 2: structure type tiles ---- */
.structure-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
}
.structure-tile{
	grid-column:span 1;
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	border:2px solid #ddd;
	border-radius:6px;
	background:#fafafa;
	padding:0;
	font-family:inherit;
	font-size:13px;
	font-weight:500;
	color:#333;
	cursor:pointer;
	text-align:center;
}
.structure-tile-img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:contain;
}
.structure-tile-img-group{
	position:absolute;
	inset:0;
	display:flex;
	justify-content:center;
	align-items:stretch;
	overflow:hidden;
}
.structure-tile-img-group img{
	display:block;
	height:100%;
	width:auto;
	object-fit:cover;
}
.structure-tile-img-grid{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
}
.structure-tile-img-grid img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.structure-tile span{
	position:relative;
	z-index:1;
	width:100%;
	padding:6px 10px;
	background:rgba(0,0,0,0.55);
	color:#fff;
	text-align:left;
}
.structure-tile:hover{ border-color:var(--brand-orange); }
.structure-tile.selected{
	border-color:var(--brand-orange);
	background:var(--brand-orange-soft);
	color:var(--brand-dark-green);
	font-weight:600;
}
.structure-tile-wide{ grid-column:1 / -1; }

/* ---- Step 3: planting layout reference ---- */
.step3-reference{
	display:grid;
	grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);
	align-items:start;
	gap:16px;
	width:100%;
}
.step3-reference-group{
	display:flex;
	flex-direction:column;
	gap:8px;
	min-width:0;
}
/* height shrinks with viewport once space is tight; image stays pinned to the bottom
   of this box so the fields directly below always line up with the graphic's corners */
.step3-reference-graphic{
	display:flex;
	align-items:flex-end;
	justify-content:center;
	height:clamp(120px, 32vh, 340px);
}
.step3-reference-group.planting-layout-group .step3-reference-graphic{
	height:clamp(120px, 32vh, 510px);
}
.step3-reference-graphic img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
	object-position:center bottom;
}
.step3-reference-fields{
	display:flex;
	flex-direction:column;
	flex:0 0 auto;
	gap:8px;
}
.step3-reference-fields label{
	display:block;
	font-size:12px;
	font-weight:500;
	color:var(--brand-dark-green);
	margin-bottom:3px;
}
@media (max-width:700px){
	.step3-reference{ grid-template-columns:1fr; }
}

.map-canvas-wrap{
	position:relative;
	flex:1;
	min-height:0;
}
#map-container{
	position:absolute;
	inset:0;
	border-radius:0 0 8px 8px;
}
.mapboxgl-canvas-container.mapbox-gl-draw_cursor-move,
.mapboxgl-canvas-container.mapbox-gl-draw_cursor-move .mapboxgl-canvas{
	cursor:default !important;
}
.mapboxgl-canvas-container.polygon-direct-select-cursor,
.mapboxgl-canvas-container.polygon-direct-select-cursor .mapboxgl-canvas{
	cursor:default !important;
}
/* Overrides Mapbox's own dynamically-set cursor while the road tool is active */
.mapboxgl-canvas-container.road-drawing-cursor,
.mapboxgl-canvas-container.road-drawing-cursor .mapboxgl-canvas{
	cursor:crosshair !important;
}
.map-instruction-banner{
	display:none;
	position:absolute;
	top:16px;
	left:50%;
	transform:translateX(-50%);
	background:#fff;
	color:var(--brand-dark-green);
	font-family:"Poppins", Sans-serif;
	font-size:17px;
	font-weight:500;
	padding:8px 16px;
	border-radius:20px;
	box-shadow:0 1px 4px rgba(0,0,0,0.3);
	z-index:1;
	pointer-events:none;
}

.mapboxgl-canvas-container.side-net-drawing-cursor,
.mapboxgl-canvas-container.side-net-drawing-cursor .mapboxgl-canvas{
	cursor:crosshair !important;
}
.side-net-settings{
	position:absolute;
	top:calc(100% + 6px);
	left:0;
	width:100%;
	max-width:calc(100vw - 24px);
	box-sizing:border-box;
	padding:12px;
	background:rgba(255,255,255,0.97);
	border:1px solid rgba(30,64,55,0.28);
	border-radius:8px;
	box-shadow:0 4px 14px rgba(0,0,0,0.22);
	z-index:3;
	font-family:"Poppins", Sans-serif;
	font-size:12px;
	color:var(--brand-dark-green);
}
.side-net-settings[hidden]{ display:none; }
.side-net-settings h2{ margin:0 0 10px; font-size:14px; }
.side-net-setting-row,.side-net-measurement{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	margin-top:8px;
}
.side-net-options{ display:flex; gap:5px; }
.side-net-options button{
	border:1px solid #9aa5a1;
	border-radius:4px;
	background:#fff;
	color:#243b35;
	padding:5px 8px;
	font:600 12px "Poppins", Sans-serif;
	cursor:pointer;
}
.side-net-options button.active{ background:var(--brand-dark-green); border-color:var(--brand-dark-green); color:#fff; }
.side-net-measurement strong{ text-align:right; font-weight:600; }
.side-net-settings p{ margin:9px 0 0; color:#52635e; font-size:11px; line-height:1.4; }

.road-width-banner{
	display:none;
	position:absolute;
	bottom:16px;
	left:50%;
	transform:translateX(-50%);
	background:#fff;
	color:var(--brand-dark-green);
	font-family:"Poppins", Sans-serif;
	font-size:14px;
	font-weight:600;
	padding:6px 14px;
	border-radius:16px;
	box-shadow:0 1px 4px rgba(0,0,0,0.3);
	z-index:1;
	pointer-events:none;
	transition:background-color 0.15s ease;
}
.road-width-banner.flash{
	background:#ffd60a;
}

.map-totals-panel{
	position:absolute;
	top:16px;
	right:16px;
	min-width:210px;
	max-width:calc(100% - 32px);
	box-sizing:border-box;
	padding:10px 12px;
	background:rgba(255,255,255,0.97);
	border:1px solid rgba(30,64,55,0.28);
	border-radius:8px;
	box-shadow:0 4px 14px rgba(0,0,0,0.22);
	z-index:2;
	pointer-events:none;
	font-family:"Poppins", Sans-serif;
	font-size:12px;
	color:var(--brand-dark-green);
}
.map-totals-panel h2{ margin:0 0 8px; font-size:14px; }
.map-totals-row{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:10px;
	margin-top:5px;
}
.map-totals-row strong{ text-align:right; font-weight:600; }
.map-totals-sub .map-totals-row{
	padding-left:10px;
	font-size:11px;
	color:#52635e;
}

/* ---- Review mode (after Complete Enquiry): static map with summary panels ---- */
.map-review-blocker{
	display:none;
	position:absolute;
	inset:0;
	z-index:1;
}
.map-review-panels{
	position:absolute;
	top:16px;
	left:16px;
	right:240px;
	display:flex;
	align-items:flex-start;
	gap:12px;
	z-index:2;
	pointer-events:none;
}
.map-review-panels[hidden]{ display:none; }
.map-review-panel{
	flex:0 1 auto;
	min-width:0;
	box-sizing:border-box;
	padding:10px 12px;
	background:rgba(255,255,255,0.97);
	border:1px solid rgba(30,64,55,0.28);
	border-radius:8px;
	box-shadow:0 4px 14px rgba(0,0,0,0.22);
	font-family:"Poppins", Sans-serif;
	font-size:12px;
	color:var(--brand-dark-green);
	overflow-wrap:anywhere;
}
.map-review-panel > div + div{ margin-top:5px; }
.map-review-name{ font-size:14px; font-weight:600; }
.map-review-logo{ flex:0 0 auto; padding:8px; }
.map-review-logo img{ display:block; height:72px; width:auto; }
.map-canvas-wrap.review-mode .map-review-blocker{ display:block; }
.map-canvas-wrap.review-mode .mapboxgl-ctrl-top-left,
.map-canvas-wrap.review-mode .map-instruction-banner,
.map-canvas-wrap.review-mode .road-width-banner,
.map-canvas-wrap.review-mode .side-net-settings{ display:none !important; }
/* Map is temporarily laid out at the fixed image size while the enquiry image is rendered */
.map-canvas-wrap.capturing{ position:fixed; top:0; left:0; width:1920px; height:1080px; flex:none; z-index:9998; }
.map-capture-cover{
	position:fixed;
	inset:0;
	z-index:9999;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fff;
	font-family:"Poppins", Sans-serif;
	font-size:16px;
	font-weight:600;
	color:var(--brand-dark-green);
}
.map-capture-cover[hidden]{ display:none; }

/* Hide the geocoder's default magnifying glass icon and reclaim its input padding */
.mapboxgl-ctrl-geocoder--icon-search{ display:none; }
.mapboxgl-ctrl-geocoder--input{ padding-left:12px !important; }

/* Custom control that replaces Mapbox Draw's default polygon button, stacked under the geocoder search box */
.draw-net-btn-ctrl{
	position:relative;
	margin-top:8px !important;
	display:flex;
	flex-direction:column;
	gap:6px;
}
.draw-net-btn{
	width:100%;
	font-family:"Poppins", Sans-serif;
	font-size:13px;
	font-weight:600;
	color:#fff;
	background:var(--brand-orange);
	border:2px solid transparent;
	border-radius:4px;
	padding:10px 14px;
	cursor:pointer;
	box-shadow:0 1px 4px rgba(0,0,0,0.4);
	opacity:1;
	transition:border-color 0.15s;
}
.draw-net-btn:hover{ border-color:#fff; }
.draw-net-btn.active{ border-color:#fff; }
.draw-net-btn:disabled{ opacity:.48; cursor:not-allowed; }
/* Hidden fields that carry the drawn boundary data to the form submission */
#form-field-boundary_geojson,
#form-field-boundary_file,
#form-field-map_image{ display:none; }

/* ---- Small screens: allow scrolling rather than crushing the map/form ---- */
@media (max-width: 900px){
	html, body{ overflow:auto; }
	.enquiry-page{ height:auto; min-height:100vh; }
	.enquiry-main{ flex-direction:column; }
	.form-col, .map-col{ width:auto; max-width:none; }
	#map-container{ min-height:320px; }
	.map-totals-panel{ top:8px; right:8px; min-width:0; padding:8px 10px; font-size:11px; }
	.map-totals-panel h2{ font-size:12px; }
	.map-review-panels{ top:8px; left:8px; gap:8px; flex-wrap:wrap; }
	.map-review-panel{ padding:8px 10px; font-size:11px; }
	.map-review-logo img{ height:48px; }
}