/* DM-01 Residential Intake Form
   Asher Roofing brand treatment for the controlled residential intake.
   Accessibility: state is never color-only; visible focus and error text
   remain explicit; mobile-responsive multi-step layout is preserved. */

:root {
	--asher-dm01-black: #0b0b0c;
	--asher-dm01-charcoal: #141414;
	--asher-dm01-panel: #1a1a1c;
	--asher-dm01-gold: #caa457;
	--asher-dm01-white: #ffffff;
	--asher-dm01-muted: #c9c9c9;
	--asher-dm01-border: #3a3a3c;
	--asher-dm01-error: #ff7b7b;
}

.asher-dm01-progress,
#asher-dm01-form {
	color: var(--asher-dm01-white);
}

.asher-dm01-progress ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
	gap: 0.65em 0.9em;
}

.asher-dm01-progress .asher-dm01-step {
	color: var(--asher-dm01-muted);
}

.asher-dm01-step[aria-current="step"],
.asher-dm01-progress .asher-dm01-step--current {
	color: var(--asher-dm01-gold);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.asher-dm01-progress .asher-dm01-step--pending {
	opacity: 0.72;
}

#asher-dm01-form fieldset {
	background: var(--asher-dm01-charcoal);
	border: 1px solid var(--asher-dm01-border);
	border-radius: 4px;
	color: var(--asher-dm01-white);
	margin: 0;
	padding: clamp(1.15rem, 3vw, 2rem);
}

#asher-dm01-form fieldset > legend {
	color: var(--asher-dm01-white);
	font-weight: 700;
	padding: 0 0.55em;
}

.asher-dm01-field,
.asher-dm01-field-group {
	margin-bottom: 1.25em;
	border: none;
	padding: 0;
}

.asher-dm01-field label,
.asher-dm01-field-group legend,
#asher-dm01-form label,
#asher-dm01-form legend {
	color: var(--asher-dm01-white);
	font-weight: 600;
}

.asher-dm01-field label,
.asher-dm01-field-group legend {
	display: block;
	margin-bottom: 0.35em;
}

#asher-dm01-form input[type="text"],
#asher-dm01-form input[type="email"],
#asher-dm01-form input[type="tel"],
#asher-dm01-form input[type="number"],
#asher-dm01-form input[type="url"],
#asher-dm01-form input[type="date"],
#asher-dm01-form select,
#asher-dm01-form textarea {
	background: var(--asher-dm01-black);
	border: 1px solid var(--asher-dm01-border);
	border-radius: 4px;
	box-shadow: none;
	color: var(--asher-dm01-white);
	font-size: 1em;
	max-width: 36em;
	padding: 0.72em 0.8em;
	width: 100%;
}

#asher-dm01-form textarea {
	min-height: 8em;
	resize: vertical;
}

#asher-dm01-form input::placeholder,
#asher-dm01-form textarea::placeholder {
	color: #8e8e92;
	opacity: 1;
}

#asher-dm01-form select,
#asher-dm01-form select option {
	background-color: var(--asher-dm01-black);
	color: var(--asher-dm01-white);
}

#asher-dm01-form input[type="radio"],
#asher-dm01-form input[type="checkbox"] {
	accent-color: var(--asher-dm01-gold);
}

.asher-dm01-radio-option,
.asher-dm01-checkbox-option {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	margin-bottom: 0.5em;
	color: var(--asher-dm01-white);
}

/* Visible focus state: gold border plus an outer ring so focus does not
   rely on color alone. */
#asher-dm01-form input:focus,
#asher-dm01-form select:focus,
#asher-dm01-form textarea:focus,
#asher-dm01-form button:focus,
#asher-dm01-form a:focus {
	border-color: var(--asher-dm01-gold);
	outline: 3px solid rgba(202, 164, 87, 0.34);
	outline-offset: 2px;
}

.asher-dm01-field-error {
	display: block;
	color: var(--asher-dm01-error);
	font-size: 0.9em;
	font-weight: 600;
	margin-top: 0.35em;
}

.asher-dm01-field-error:empty {
	display: none;
}

/* Errors are conveyed with text and an icon-style prefix, never color only. */
.asher-dm01-field-error:not(:empty)::before {
	content: "⚠ ";
}

.asher-dm01-error-summary {
	background: rgba(255, 123, 123, 0.08);
	border: 2px solid var(--asher-dm01-error);
	border-radius: 4px;
	color: var(--asher-dm01-white);
	margin-bottom: 1.5em;
	padding: 1em;
}

.asher-dm01-error-summary[hidden] {
	display: none;
}

.asher-dm01-help-text,
.asher-dm01-placeholder-notice {
	color: var(--asher-dm01-muted);
}

.asher-dm01-help-text {
	font-size: 0.9em;
}

.asher-dm01-placeholder-notice {
	font-size: 0.85em;
	font-style: italic;
}

.asher-dm01-field-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.asher-dm01-form-nav {
	display: flex;
	gap: 1em;
	margin-top: 1.5em;
	flex-wrap: wrap;
}

.asher-dm01-form-nav button {
	border-radius: 4px;
	cursor: pointer;
	font-size: 1em;
	font-weight: 800;
	letter-spacing: 0.03em;
	min-height: 3em;
	padding: 0.75em 1.5em;
}

.asher-dm01-btn-next,
.asher-dm01-btn-submit {
	background: var(--asher-dm01-gold);
	border: 2px solid var(--asher-dm01-gold);
	color: var(--asher-dm01-black);
}

.asher-dm01-btn-next:hover,
.asher-dm01-btn-submit:hover {
	background: #d6b36c;
	border-color: #d6b36c;
	color: var(--asher-dm01-black);
}

.asher-dm01-btn-back {
	background: transparent;
	border: 2px solid var(--asher-dm01-gold);
	color: var(--asher-dm01-gold);
}

.asher-dm01-btn-back:hover {
	background: rgba(202, 164, 87, 0.1);
	color: var(--asher-dm01-gold);
}

.asher-dm01-property-confirmation {
	background: var(--asher-dm01-panel);
	border: 1px solid var(--asher-dm01-border);
	border-radius: 4px;
	margin-bottom: 1.5em;
	padding: 1em;
}

.asher-dm01-property-confirmation[hidden],
.asher-dm01-property-map[hidden] {
	display: none;
}

.asher-dm01-property-search {
	margin-bottom: 1em;
	max-width: 36em;
}

.asher-dm01-property-search gmp-place-autocomplete {
	width: 100%;
}

.asher-dm01-property-map {
	height: 22em;
	margin-bottom: 1em;
	width: 100%;
}

/* Roof confirmation is a primary decision, so the complete label is a
   generous, high-contrast click target instead of a tiny native checkbox. */
.asher-dm01-checkbox {
	align-items: center;
	background: var(--asher-dm01-black);
	border: 2px solid var(--asher-dm01-gold);
	border-radius: 6px;
	color: var(--asher-dm01-white);
	cursor: pointer;
	display: flex;
	font-weight: 700;
	gap: 0.85rem;
	line-height: 1.4;
	margin-top: 1rem;
	max-width: 42rem;
	min-height: 3.5rem;
	padding: 0.8rem 1rem;
	width: 100%;
}

.asher-dm01-checkbox:hover {
	background: rgba(202, 164, 87, 0.12);
}

.asher-dm01-checkbox:focus-within {
	outline: 3px solid rgba(202, 164, 87, 0.5);
	outline-offset: 3px;
}

.asher-dm01-checkbox input[type="checkbox"] {
	accent-color: var(--asher-dm01-gold);
	cursor: pointer;
	flex: 0 0 1.65rem;
	height: 1.65rem;
	margin: 0;
	width: 1.65rem;
}

.asher-dm01-btn-submit:disabled,
.asher-dm01-btn-submit[aria-busy="true"] {
	cursor: wait;
	opacity: 0.72;
}

/* Canonical Start My Roof shell. Keep this separate from the legacy
   #asher-dm01-form selectors so the customer journey renders consistently. */
.asher-residential-shell {
	color: var(--asher-dm01-white);
	margin: 0 auto;
	max-width: 72rem;
}

.asher-residential-substeps-label {
	background: var(--asher-dm01-charcoal);
	border-radius: 4px;
	color: var(--asher-dm01-white);
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 0.65rem;
	padding: 0.3rem 0.5rem;
	text-transform: uppercase;
}

[data-roof-confirmation-control][hidden] {
	display: none;
}

.asher-residential-flow {
	counter-reset: residential-step;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.asher-residential-flow li {
	align-items: center;
	background: var(--asher-dm01-charcoal);
	border: 1px solid var(--asher-dm01-border);
	border-radius: 6px;
	color: var(--asher-dm01-muted);
	counter-increment: residential-step;
	display: flex;
	font-weight: 700;
	gap: 0.65rem;
	line-height: 1.25;
	min-height: 3.5rem;
	padding: 0.75rem 0.9rem;
}

.asher-residential-flow li::before {
	align-items: center;
	background: var(--asher-dm01-border);
	border-radius: 50%;
	color: var(--asher-dm01-white);
	content: counter(residential-step);
	display: inline-flex;
	flex: 0 0 1.8rem;
	height: 1.8rem;
	justify-content: center;
}

.asher-residential-flow li.is-active {
	background: var(--asher-dm01-charcoal);
	border-color: var(--asher-dm01-gold);
	color: var(--asher-dm01-white);
}

.asher-residential-flow li.is-active::before {
	background: var(--asher-dm01-gold);
	color: var(--asher-dm01-black);
}

.asher-residential-stage {
	background: var(--asher-dm01-charcoal);
	border: 1px solid var(--asher-dm01-border);
	border-radius: 8px;
	padding: clamp(1.1rem, 3vw, 2rem);
}

.asher-residential-stage[hidden] {
	display: none;
}

.asher-residential-stage h2 {
	color: var(--asher-dm01-white);
	margin: 0 0 0.45rem;
}

.asher-residential-stage-intro {
	color: var(--asher-dm01-muted);
	margin: 0 0 1.25rem;
	max-width: 48rem;
}

.asher-residential-stage .asher-dm01-btn-submit {
	border-radius: 6px;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 800;
	margin-top: 1rem;
	min-height: 3rem;
	padding: 0.75rem 1.35rem;
}

.asher-measurement-payment-summary {
	color: var(--asher-dm01-white);
	font-weight: 700;
	margin: 0.9rem 0;
}

.asher-measurement-payment [data-billing-element],
.asher-card-fields {
	background: var(--asher-dm01-black);
	border: 1px solid var(--asher-dm01-border);
	border-radius: 8px;
	margin-top: 1rem;
	padding: 1rem;
}

.asher-card-fields[hidden] {
	display: none;
}

.asher-card-fields {
	min-width: 0;
}

.asher-card-fields legend,
.asher-card-field label {
	color: var(--asher-dm01-white);
	font-weight: 700;
}

.asher-card-field label {
	display: block;
	margin-bottom: 0.45rem;
}

.asher-card-number-field {
	margin-bottom: 1rem;
}

.asher-card-secondary-fields {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.asher-card-field [data-card-number-element],
.asher-card-field [data-card-expiry-element],
.asher-card-field [data-card-cvc-element] {
	background: var(--asher-dm01-charcoal);
	border: 1px solid var(--asher-dm01-border);
	border-radius: 6px;
	min-height: 3.25rem;
	padding: 1rem 0.85rem;
}

.asher-residential-error,
.asher-measurement-payment-error {
	background: rgba(255, 123, 123, 0.08);
	border: 1px solid var(--asher-dm01-error);
	border-radius: 6px;
	color: var(--asher-dm01-white);
	margin-top: 1rem;
	padding: 0.85rem 1rem;
}

.asher-residential-progress {
	margin: 0 auto 1.5rem;
	max-width: 72rem;
}

.asher-residential-progress > p {
	background: var(--asher-dm01-charcoal);
	border-radius: 4px;
	color: var(--asher-dm01-white);
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	margin: 0 0 0.65rem;
	padding: 0.3rem 0.5rem;
	text-transform: uppercase;
}

.asher-residential-progress ol {
	display: grid;
	gap: 0.7rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.asher-residential-progress li {
	align-items: center;
	background: var(--asher-dm01-charcoal);
	border: 1px solid var(--asher-dm01-border);
	border-radius: 6px;
	color: var(--asher-dm01-muted);
	display: flex;
	font-weight: 700;
	gap: 0.65rem;
	line-height: 1.25;
	min-height: 3.5rem;
	padding: 0.7rem 0.85rem;
}

.asher-residential-progress li > span {
	align-items: center;
	background: var(--asher-dm01-border);
	border-radius: 50%;
	color: var(--asher-dm01-white);
	display: inline-flex;
	flex: 0 0 1.8rem;
	height: 1.8rem;
	justify-content: center;
}

.asher-residential-progress li.is-active {
	border-color: var(--asher-dm01-gold);
	color: var(--asher-dm01-white);
}

.asher-residential-progress li.is-active > span {
	background: var(--asher-dm01-gold);
	color: var(--asher-dm01-black);
}

@media (max-width: 700px) {
	.asher-residential-flow,
	.asher-residential-progress ol {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.asher-card-secondary-fields {
		grid-template-columns: 1fr;
	}

	#asher-dm01-form input[type="text"],
	#asher-dm01-form input[type="email"],
	#asher-dm01-form input[type="tel"],
	#asher-dm01-form input[type="number"],
	#asher-dm01-form input[type="url"],
	#asher-dm01-form input[type="date"],
	#asher-dm01-form select,
	#asher-dm01-form textarea {
		max-width: 100%;
	}

	.asher-dm01-form-nav {
		flex-direction: column;
	}

	.asher-dm01-form-nav button {
		width: 100%;
	}

	.asher-dm01-property-map {
		height: 17em;
	}
}