.rmm-container {
	--rmm-border: #dcdcde;
	--rmm-bg: #fff;
	--rmm-red: #E11919;
	--rmm-text: #1d2327;
	--rmm-muted: #646970;
	--rmm-accent: #2271b1;
	--rmm-accent-hover: #135e96;
	--rmm-radius: 8px;
	--rmm-success: #1e7e34;
	max-width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: var(--rmm-text);
}

.rmm-notice {
	padding: 0.75rem 1rem;
	border-radius: var(--rmm-radius);
	background: #fcf0f1;
	border: 1px solid #f0b0b5;
}

/* Progress bar */
.rmm-progress {
	display: flex;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	gap: 0.5rem;
	counter-reset: rmm-step;
}

.rmm-progress-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	position: relative;
	text-align: center;
}

.rmm-progress-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 14px;
	left: calc(50% + 18px);
	width: calc(100% - 36px);
	height: 2px;
	background: var(--rmm-border);
	z-index: 0;
}

.rmm-progress-step.is-complete:not(:last-child)::after,
.rmm-progress-step.is-active:not(:last-child)::after {
	background: var(--rmm-accent);
}

.rmm-progress-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--rmm-border);
	background: var(--rmm-bg);
	font-size: 0.8rem;
	font-weight: 600;
	position: relative;
	z-index: 1;
}

.rmm-progress-step.is-active .rmm-progress-num,
.rmm-progress-step.is-complete .rmm-progress-num {
	border-color: var(--rmm-accent);
	background: var(--rmm-accent);
	color: #fff;
}

.rmm-progress-label {
	font-size: 0.72rem;
	color: var(--rmm-muted);
	line-height: 1.2;
}

.rmm-progress-step.is-active .rmm-progress-label {
	color: var(--rmm-text);
	font-weight: 600;
}

/* Steps */
.rmm-step[hidden] {
	display: none !important;
}

.rmm-step-header {
	margin-bottom: 1rem;
}

.rmm-step-title {
	margin: 0 0 0.35rem;
	font-size: 1.25rem;
	font-weight: 600;
}

.rmm-step-subtitle {
	margin: 0;
	font-size: 0.9rem;
	color: var(--rmm-muted);
}

.rmm-step-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rmm-border);
}

/* Map step */
.rmm-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: stretch;
	margin-bottom: 0.75rem;
}

.rmm-search {
	flex: 1;
	min-width: 0;
}

.rmm-search-wrap {
	position: relative;
	width: 100%;
}

.rmm-search-input,
.rmm-input {
	flex: 1;
	min-width: 0;
	width: 100%;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--rmm-border);
	border-radius: var(--rmm-radius);
	font-size: 0.95rem;
	font-family: inherit;
	box-sizing: border-box;
}

.rmm-search-suggestions {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	background: var(--rmm-bg);
	border: 1px solid var(--rmm-border);
	border-radius: var(--rmm-radius);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	max-height: 240px;
	overflow-y: auto;
}

.rmm-search-suggestions[hidden] {
	display: none !important;
}

.rmm-search-suggestion {
	padding: 0.55rem 0.75rem;
	font-size: 0.9rem;
	line-height: 1.35;
	cursor: pointer;
	color: var(--rmm-text);
}

.rmm-search-suggestion:hover,
.rmm-search-suggestion.is-active {
	background: #f0f6fc;
	color: var(--rmm-accent);
}

.rmm-search-suggestion--empty {
	cursor: default;
	color: var(--rmm-muted);
	font-style: italic;
}

.rmm-search-suggestion--empty:hover {
	background: transparent;
	color: var(--rmm-muted);
}

.rmm-search-input.is-loading {
	background-image: linear-gradient(90deg, transparent, rgba(34, 113, 177, 0.08), transparent);
	background-size: 200% 100%;
	animation: rmm-search-shimmer 1.2s infinite;
}

@keyframes rmm-search-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

.rmm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.rmm-btn {
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--rmm-border);
	border-radius: var(--rmm-radius);
	background: var(--rmm-bg);
	color: var(--rmm-text);
	font-size: 0.9rem;
	cursor: pointer;
	line-height: 1.2;
	font-family: inherit;
}

.rmm-btn:hover {
	background-color: var(--rmm-red);
	color: #fff;
	border-color: var(--rmm-red);
}

.rmm-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.rmm-btn-primary {
	background: var(--rmm-accent);
	border-color: var(--rmm-accent);
	color: #fff;
}

.rmm-btn-primary:hover:not(:disabled) {
	background: var(--rmm-accent-hover);
	border-color: var(--rmm-accent-hover);
}

.rmm-instructions {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	color: var(--rmm-muted);
	line-height: 1.45;
}

.rmm-map-wrap {
	border: 1px solid var(--rmm-border);
	border-radius: var(--rmm-radius);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.rmm-map {
	width: 100%;
	height: var(--rmm-map-height, 420px);
}

.rmm-results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.rmm-result-card {
	padding: 0.85rem 1rem;
	border: 1px solid var(--rmm-border);
	border-radius: var(--rmm-radius);
	background: #f6f7f7;
}

.rmm-result-label {
	display: block;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rmm-muted);
	margin-bottom: 0.25rem;
}

.rmm-area-value,
.rmm-perimeter-value {
	display: block;
	font-size: 1.35rem;
	line-height: 1.2;
}

.rmm-area-units,
.rmm-perimeter-units {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.82rem;
	color: var(--rmm-muted);
}

/* Roof type grid */
.rmm-roof-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.85rem;
}

.rmm-roof-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	padding: 1rem;
	border: 2px solid var(--rmm-border);
	border-radius: var(--rmm-radius);
	background: var(--rmm-bg);
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
	font-family: inherit;
	text-align: center;
}

.rmm-roof-card:hover,
.rmm-roof-card:focus {
	background-color: var(--rmm-red);
	border-color: #a7aaad;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.rmm-roof-card.is-selected {
	border-color: var(--rmm-accent);
	box-shadow: 0 0 0 1px var(--rmm-accent);
}
.rmm-roof-card.is-selected .rmm-roof-card-title,
.rmm-roof-card:hover .rmm-roof-card-title,
.rmm-roof-card:focus .rmm-roof-card-title {
	color: #fff;
}

.rmm-roof-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rmm-roof-card-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--rmm-text);
}

/* Contact form */
.rmm-contact-form {
	width: 100%;
}

.rmm-contact-form .rmm-field {
	width: 100%;
}

.rmm-contact-form .rmm-input {
	width: 100%;
	box-sizing: border-box;
	display: block;
}

.rmm-form-row {
	margin-bottom: 0.85rem;
}

.rmm-form-row--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.rmm-field label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.85rem;
	font-weight: 500;
}

.rmm-form-error {
	margin: 0.5rem 0 0;
	padding: 0.6rem 0.75rem;
	border-radius: var(--rmm-radius);
	background: #fcf0f1;
	border: 1px solid #f0b0b5;
	color: #8a2424;
	font-size: 0.875rem;
}

/* Summary & packages */
.rmm-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	padding: 1rem;
	background: #f6f7f7;
	border: 1px solid var(--rmm-border);
	border-radius: var(--rmm-radius);
}

.rmm-summary-label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rmm-muted);
	margin-bottom: 0.2rem;
}

.rmm-packages-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.rmm-package-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	border: 1px solid var(--rmm-border);
	border-radius: var(--rmm-radius);
	background: var(--rmm-bg);
}

.rmm-package-card.is-featured {
	border-color: var(--rmm-accent);
	box-shadow: 0 4px 16px rgba(34, 113, 177, 0.12);
}

.rmm-package-badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.2rem 0.65rem;
	background: var(--rmm-accent);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: 999px;
	white-space: nowrap;
}

.rmm-package-title {
	margin: 0.5rem 0 0.25rem;
	font-size: 1.1rem;
	font-weight: 600;
}

.rmm-package-price {
	margin: 0 0 0.5rem;
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--rmm-accent);
	line-height: 1.1;
}

.rmm-package-desc {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	color: var(--rmm-muted);
	line-height: 1.45;
	flex: 1;
}

.rmm-package-features {
	margin: 0 0 1rem;
	padding-left: 1.1rem;
	font-size: 0.85rem;
	line-height: 1.5;
}

.rmm-package-features li {
	margin-bottom: 0.25rem;
}

.rmm-package-card .rmm-btn-select-package {
	width: 100%;
	margin-top: auto;
}

.rmm-package-message {
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	border-radius: var(--rmm-radius);
	font-size: 0.95rem;
	line-height: 1.45;
}

.rmm-package-message[hidden] {
	display: none !important;
}

.rmm-package-message.is-success {
	background: #edfaef;
	border: 1px solid #9fd4a9;
	color: var(--rmm-success);
}

.rmm-package-message.is-error {
	background: #fcf0f1;
	border: 1px solid #f0b0b5;
	color: #8a2424;
}

/* Mapbox Draw */
.mapboxgl-ctrl-group button {
	background-color: #fff;
}

@media (max-width: 600px) {
	.rmm-progress-label {
		display: none;
	}

	.rmm-toolbar {
		flex-direction: column;
	}

	.rmm-actions {
		width: 100%;
	}

	.rmm-actions .rmm-btn {
		flex: 1;
	}

	.rmm-roof-grid {
		grid-template-columns: 1fr;
	}

	.rmm-form-row--split {
		grid-template-columns: 1fr;
	}

	.rmm-step-nav {
		flex-direction: column-reverse;
	}

	.rmm-step-nav .rmm-btn {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.rmm-roof-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.rmm-search {
		flex: 1 1 240px;
	}
}

@media (min-width: 1024px) {
	.rmm-roof-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}