/* ============================================================
   HomeRite Custom Quote — Public Styles
   ============================================================ */

:root {
	--hrcq-blue:        #1B3566;
	--hrcq-blue-light:  #254a87;
	--hrcq-blue-dark:   #142852;
	--hrcq-yellow:      #F5C100;
	--hrcq-yellow-lite: #fffbe6;
	--hrcq-gray:        #f2f4f7;
	--hrcq-gray-mid:    #d8dde6;
	--hrcq-gray-dark:   #b0b8c4;
	--hrcq-text:        #1a1a1a;
	--hrcq-text-muted:  #666666;
	--hrcq-white:       #ffffff;
	--hrcq-border:      #dde1e8;
	--hrcq-card-bg:     #f5f6fa;
	--hrcq-radius:      10px;
	--hrcq-radius-sm:   6px;
	--hrcq-shadow:      0 2px 14px rgba(0,0,0,0.08);
	--hrcq-shadow-hover: 0 4px 20px rgba(27,53,102,0.15);
}

/* ── Reset & base ─────────────────────────────────────────── */
.hrcq-wrapper {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	color: var(--hrcq-text);
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
}
.hrcq-wrapper *,
.hrcq-wrapper *::before,
.hrcq-wrapper *::after {
	box-sizing: border-box;
}
.hrcq-wrapper button {
	font-family: inherit;
}

/* ── Form title ───────────────────────────────────────────── */
.hrcq-form-title {
	margin: 0 0 10px;
	font-size: clamp(18px, 2.8vw, 26px);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--hrcq-text);
	line-height: 1.2;
}
.hrcq-form-title .highlight {
	color: var(--hrcq-blue);
}

/* ── Progress bar ─────────────────────────────────────────── */
.hrcq-progress-bar-track {
	height: 8px;
	border-radius: var(--hrcq-radius-sm);
	background: var(--hrcq-gray-mid);
	overflow: hidden;
	margin-bottom: 28px;
}
.hrcq-progress-bar-fill {
	height: 100%;
	width: 0;
	background: var(--hrcq-yellow);
	border-radius: var(--hrcq-radius-sm);
	transition: width 0.3s ease;
}

/* ── Two-column layout ────────────────────────────────────── */
.hrcq-layout {
	display: grid;
	grid-template-columns: 1fr 290px;
	gap: 24px;
	align-items: start;
}
@media (max-width: 760px) {
	/* Single column. Flatten the two columns (sidebar + steps) into one flow via
	   display:contents so their children can be ordered together:
	   Budget → Prev/Next → Choices. The Project Summary is hidden on mobile. */
	.hrcq-layout {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	.hrcq-steps-panel,
	.hrcq-sidebar {
		display: contents;
	}
	.hrcq-price-box              { order: 1; }
	.hrcq-final-form             { order: 2; }
	.hrcq-nav                    { order: 3; }
	.hrcq-steps-panel .hrcq-step { order: 4; }
	.hrcq-summary-box            { display: none; }
}

/* ── Steps panel ──────────────────────────────────────────── */
.hrcq-steps-panel {
	min-width: 0;
}
.hrcq-step {
	display: none;
}
.hrcq-step.active {
	display: block;
	animation: hrcq-fadein 0.25s ease;
}
@keyframes hrcq-fadein {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Question card ────────────────────────────────────────── */
.hrcq-question-card {
	background: var(--hrcq-white);
	border: 1px solid var(--hrcq-border);
	border-radius: var(--hrcq-radius);
	padding: 28px 28px 24px;
	box-shadow: var(--hrcq-shadow);
}
.hrcq-question-heading {
	font-size: clamp(17px, 2.2vw, 22px);
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--hrcq-text);
	line-height: 1.3;
}
.hrcq-question-subheading {
	font-size: 14px;
	color: var(--hrcq-text-muted);
	margin: 0 0 22px;
}
.hrcq-required {
	color: #c0392b;
}
.hrcq-privacy-note {
	font-size: 12px;
	color: var(--hrcq-text-muted);
	margin: 16px 0 0;
	text-align: center;
}

/* ── Section label (small caps inside a step) ─────────────── */
.hrcq-section-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--hrcq-text-muted);
	margin: 0 0 12px;
}
.hrcq-example-img {
	margin: -4px 0 12px;
}
.hrcq-example-img img {
	max-width: 100%;
	max-height: 100px;
	object-fit: contain;
	border-radius: var(--hrcq-radius-sm);
	border: 1px solid var(--hrcq-border);
}

/* ============================================================
   OPTION CARDS — vertical list (Step 1)
   ============================================================ */
.hrcq-options-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.hrcq-option-card {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--hrcq-card-bg);
	border: 2px solid transparent;
	border-radius: var(--hrcq-radius);
	padding: 14px 22px;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
	user-select: none;
}
.hrcq-option-card:hover {
	border-color: var(--hrcq-blue-light);
	box-shadow: var(--hrcq-shadow-hover);
}
.hrcq-option-card.selected {
	background: var(--hrcq-blue);
	color: var(--hrcq-white);
	border-color: var(--hrcq-blue);
	box-shadow: var(--hrcq-shadow-hover);
}
.hrcq-option-card.selected svg {
	stroke: var(--hrcq-white);
}
.hrcq-option-img {
	width: 58px;
	height: 58px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hrcq-option-img img,
.hrcq-option-img svg {
	max-width: 100%;
	max-height: 100%;
}
.hrcq-option-label {
	font-size: 18px;
	font-weight: 700;
}

/* ============================================================
   OPTION GRID — 3-column (Steps 2, 3, 5, 9)
   ============================================================ */
.hrcq-options-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
@media (max-width: 480px) {
	.hrcq-options-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.hrcq-grid-card {
	position: relative;
	background: var(--hrcq-card-bg);
	border: 2px solid transparent;
	border-radius: var(--hrcq-radius);
	padding: 20px 12px 14px;
	cursor: pointer;
	text-align: center;
	transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
	user-select: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

/* Per-product tier icon (shown only when a product is promoted to Enhanced/Premium) */
.hrcq-tier-badge-icon {
	position: absolute;
	top: 6px;
	left: 6px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	z-index: 2;
}
.hrcq-tier-badge-icon svg,
.hrcq-tier-badge-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* Text-button options have left-aligned text (and no top-right check), so the
   badge goes on the right there instead of over the label. */
.hrcq-btn-toggle .hrcq-tier-badge-icon,
.hrcq-yn-btn .hrcq-tier-badge-icon {
	left: auto;
	right: 6px;
}
/* Glass dropdown rows also have left-aligned text; keep the badge on the right,
   offset so it clears the selected "✓" that sits at the far right edge. */
.hrcq-glass-option .hrcq-tier-badge-icon {
	left: auto;
	right: 36px;
}
/* Keep tier colours even on a selected (dark) card, overriding the white stroke. */
.hrcq-grid-card.selected .hrcq-tier-badge-energy_efficiency svg,
.hrcq-tier-badge-energy_efficiency svg {
	stroke: #2196f3;
}
.hrcq-grid-card.selected .hrcq-tier-badge-style svg,
.hrcq-tier-badge-style svg {
	stroke: #9c27b0;
}
.hrcq-tier-badge-energy_efficiency { border: 1px solid #2196f3; }
.hrcq-tier-badge-style { border: 1px solid #9c27b0; }
.hrcq-grid-card:hover {
	border-color: var(--hrcq-blue-light);
	box-shadow: var(--hrcq-shadow-hover);
}
.hrcq-grid-card.selected {
	background: var(--hrcq-blue);
	color: var(--hrcq-white);
	border-color: var(--hrcq-blue);
	box-shadow: var(--hrcq-shadow-hover);
}
.hrcq-grid-card.selected svg {
	stroke: var(--hrcq-white);
}
.hrcq-grid-img {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hrcq-grid-img img,
.hrcq-grid-img svg {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.hrcq-grid-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.3;
}

/* Qty counter (Steps 3, 5) */
.hrcq-grid-card.has-qty {
	position: relative;
}
.hrcq-qty-control {
	display: flex;
	align-items: center;
	gap: 0;
	background: rgba(255,255,255,0.15);
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.3);
	margin-top: 2px;
}
.hrcq-qty-btn {
	background: none;
	border: none;
	color: inherit;
	font-size: 18px;
	font-weight: 700;
	padding: 2px 10px;
	cursor: pointer;
	line-height: 1;
	transition: background 0.15s;
}
.hrcq-qty-btn:hover {
	background: rgba(255,255,255,0.15);
}
.hrcq-qty-val {
	min-width: 30px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	background: var(--hrcq-white);
	color: var(--hrcq-blue);
	padding: 2px 6px;
}

/* ============================================================
   LOOK HEADER (Steps 4, 6, 7, 8)
   ============================================================ */
.hrcq-look-header {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--hrcq-border);
}
.hrcq-look-thumb-wrap {
	width: 72px;
	height: 88px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hrcq-look-thumb-wrap img,
.hrcq-look-thumb-wrap svg {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.hrcq-look-type-label {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
}
.hrcq-look-type-label span {
	color: var(--hrcq-blue);
}
.hrcq-look-type-list-wrap {
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--hrcq-border);
}
.hrcq-look-type-list {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}
.hrcq-look-type-list li {
	font-size: 16px;
	font-weight: 700;
	color: var(--hrcq-blue);
	padding: 4px 0;
}

/* ── Two-column grid inside steps ─────────────────────────── */
.hrcq-custom-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.hrcq-custom-cols.hrcq-cols-1 {
	grid-template-columns: 1fr;
}
@media (max-width: 520px) {
	.hrcq-custom-cols {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   BUTTON TOGGLES (Steps 4, 6, 7, 8)
   ============================================================ */
.hrcq-btn-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hrcq-field-hint {
	margin: 8px 0 0;
	font-size: 12px;
	color: #666;
	line-height: 1.4;
}
.hrcq-btn-toggle {
	position: relative;
	background: var(--hrcq-card-bg);
	border: 2px solid var(--hrcq-border);
	border-radius: var(--hrcq-radius-sm);
	padding: 12px 16px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
	user-select: none;
	line-height: 1.4;
	color: var(--hrcq-text);
}
.hrcq-btn-toggle:hover {
	border-color: var(--hrcq-blue-light);
	background: var(--hrcq-white);
}
.hrcq-btn-toggle.selected {
	background: var(--hrcq-blue);
	border-color: var(--hrcq-blue);
	color: var(--hrcq-white);
}

/* ============================================================
   COLOR SWATCHES (Steps 4, 6)
   ============================================================ */
.hrcq-swatch-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.hrcq-swatch-card {
	background: var(--hrcq-card-bg);
	border: 2px solid transparent;
	border-radius: var(--hrcq-radius-sm);
	padding: 12px 10px 10px;
	cursor: pointer;
	text-align: center;
	transition: border-color 0.2s, box-shadow 0.2s;
	user-select: none;
	position: relative;
}
.hrcq-swatch-card:hover {
	border-color: var(--hrcq-blue-light);
}
.hrcq-swatch-card.selected {
	border-color: var(--hrcq-yellow);
	box-shadow: 0 0 0 2px var(--hrcq-yellow);
	background: var(--hrcq-yellow-lite);
}
.hrcq-swatch-card .hrcq-check {
	display: none;
	position: absolute;
	top: 6px;
	right: 6px;
	background: var(--hrcq-yellow);
	border-radius: 50%;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: var(--hrcq-blue);
	font-weight: 700;
}
.hrcq-swatch-card.selected .hrcq-check {
	display: flex;
}
/* Actual color circle (replaces generic icon) */
.hrcq-color-circle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	margin: 0 auto 8px;
}
.hrcq-color-painted {
	background: conic-gradient(
		#1B3566 0deg 90deg,
		#8a4500 90deg 180deg,
		#2d7a2d 180deg 270deg,
		#8b0000 270deg 360deg
	);
}
.hrcq-swatch-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--hrcq-text);
}

/* ============================================================
   OPERATION CARDS (Step 6 — patio style)
   ============================================================ */
.hrcq-operation-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-bottom: 24px;
}
.hrcq-operation-card {
	background: var(--hrcq-card-bg);
	border: 2px solid transparent;
	border-radius: var(--hrcq-radius);
	padding: 16px 12px 12px;
	cursor: pointer;
	text-align: center;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
	user-select: none;
	position: relative;
}
.hrcq-operation-card:hover {
	border-color: var(--hrcq-blue-light);
	box-shadow: var(--hrcq-shadow-hover);
}
.hrcq-operation-card.selected {
	border-color: var(--hrcq-yellow);
	background: var(--hrcq-yellow-lite);
}
.hrcq-operation-card.selected .hrcq-check {
	display: flex;
}
.hrcq-operation-card .hrcq-check {
	display: none;
	position: absolute;
	top: 8px;
	right: 8px;
	background: var(--hrcq-yellow);
	border-radius: 50%;
	width: 22px;
	height: 22px;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: var(--hrcq-blue);
	font-weight: 700;
}
.hrcq-operation-img {
	width: 80px;
	height: 80px;
	margin: 0 auto 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hrcq-operation-img img,
.hrcq-operation-img svg {
	max-width: 100%;
	max-height: 100%;
}
.hrcq-operation-label {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

/* ============================================================
   YES/NO BUTTONS (Step 8 — entry glass, sidelights, transom)
   ============================================================ */
.hrcq-yn-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}
.hrcq-yn-btn {
	position: relative;
	flex: 1 1 0;
	min-width: 64px;
	padding: 11px;
	border: 2px solid var(--hrcq-border);
	border-radius: var(--hrcq-radius-sm);
	background: var(--hrcq-card-bg);
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
	color: var(--hrcq-text);
}
.hrcq-yn-btn:hover {
	border-color: var(--hrcq-blue-light);
	background: var(--hrcq-white);
}
.hrcq-yn-btn.selected {
	background: var(--hrcq-blue);
	border-color: var(--hrcq-blue);
	color: var(--hrcq-white);
}

/* ── Glass style dropdown (Step 8) ───────────────────────── */
.hrcq-glass-dropdown {
	background: var(--hrcq-card-bg);
	border: 1px solid var(--hrcq-border);
	border-radius: var(--hrcq-radius-sm);
	margin-top: 10px;
	overflow: hidden;
}
.hrcq-glass-trigger {
	padding: 11px 14px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--hrcq-white);
	border-bottom: 1px solid var(--hrcq-border);
}
.hrcq-glass-trigger:hover {
	background: var(--hrcq-yellow-lite);
}
.hrcq-arrow {
	transition: transform 0.2s;
	display: inline-block;
}
.hrcq-glass-trigger.open .hrcq-arrow {
	transform: rotate(180deg);
}
.hrcq-glass-option {
	position: relative;
	padding: 11px 14px;
	cursor: pointer;
	font-size: 13px;
	border-top: 1px solid var(--hrcq-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: background 0.15s;
	background: var(--hrcq-white);
}
.hrcq-glass-option:first-child {
	border-top: none;
}
.hrcq-glass-option:hover {
	background: var(--hrcq-yellow-lite);
}
.hrcq-glass-option.selected {
	font-weight: 600;
}
.hrcq-glass-option.selected::after {
	content: '✓';
	color: var(--hrcq-yellow);
	font-weight: 700;
	font-size: 15px;
}

/* ============================================================
   CONTACT FORM (Step 10)
   ============================================================ */
.hrcq-contact-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.hrcq-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.hrcq-field label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--hrcq-text-muted);
}
.hrcq-field input {
	padding: 14px 16px;
	border: 2px solid var(--hrcq-border);
	border-radius: var(--hrcq-radius-sm);
	font-size: 16px;
	width: 100%;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
	color: var(--hrcq-text);
	background: var(--hrcq-white);
}
.hrcq-field input:focus {
	border-color: var(--hrcq-blue);
	box-shadow: 0 0 0 3px rgba(27,53,102,0.1);
}
.hrcq-field input.error {
	border-color: #c0392b;
	box-shadow: 0 0 0 3px rgba(192,57,43,0.1);
}
.hrcq-field input::placeholder {
	color: var(--hrcq-gray-dark);
}

/* ============================================================
   SUMMARY (Step 11)
   ============================================================ */
.hrcq-summary-items-wrap {
	margin-bottom: 8px;
}
.hrcq-summary-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--hrcq-border);
}
.hrcq-summary-item:last-child {
	border-bottom: none;
}
.hrcq-summary-thumb {
	width: 58px;
	height: 58px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hrcq-gray);
	border-radius: var(--hrcq-radius-sm);
	padding: 6px;
}
.hrcq-summary-thumb img,
.hrcq-summary-thumb svg {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.hrcq-summary-info {
	flex: 1;
	min-width: 0;
}
.hrcq-summary-info h3 {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--hrcq-text);
}
.hrcq-summary-info p {
	margin: 0;
	font-size: 13px;
	color: var(--hrcq-text-muted);
	line-height: 1.5;
}
.hrcq-summary-note {
	font-size: 12px;
	color: var(--hrcq-text-muted);
	margin: 16px 0 0;
	font-style: italic;
}
.hrcq-summary-actions {
	display: flex;
	gap: 12px;
	margin-top: 22px;
	flex-wrap: wrap;
}
.hrcq-btn-download {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border: 2px solid var(--hrcq-blue);
	border-radius: var(--hrcq-radius-sm);
	background: transparent;
	color: var(--hrcq-blue);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
	font-family: inherit;
}
.hrcq-btn-download:hover {
	background: var(--hrcq-blue);
	color: var(--hrcq-white);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.hrcq-sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 20px;
}

/* Project summary box */
.hrcq-summary-box {
	background: var(--hrcq-white);
	border: 1px solid var(--hrcq-border);
	border-radius: var(--hrcq-radius);
	padding: 16px;
	box-shadow: var(--hrcq-shadow);
}
.hrcq-summary-box-title {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--hrcq-text-muted);
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.hrcq-summary-tag {
	font-size: 10px;
	background: var(--hrcq-gray);
	color: var(--hrcq-text-muted);
	padding: 2px 8px;
	border-radius: 10px;
	font-weight: 600;
}
.hrcq-summary-line {
	font-size: 13px;
	color: var(--hrcq-text);
	padding: 5px 0;
	border-bottom: 1px solid var(--hrcq-gray);
	line-height: 1.4;
}
.hrcq-summary-line:last-child {
	border-bottom: none;
}
.hrcq-summary-placeholder {
	color: var(--hrcq-text-muted);
	font-style: italic;
	font-size: 12px;
}

/* Price box */
.hrcq-price-box {
	border: 2px solid var(--hrcq-yellow);
	border-radius: var(--hrcq-radius);
	padding: 20px 16px;
	text-align: center;
	background: var(--hrcq-white);
	box-shadow: var(--hrcq-shadow);
}
.hrcq-price-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--hrcq-text-muted);
	margin: 0 0 8px;
}
.hrcq-price-prefix {
	font-size: 12px;
	color: var(--hrcq-text-muted);
	margin: 0 0 4px;
	font-style: italic;
}
.hrcq-price-value {
	font-size: clamp(28px, 4vw, 38px);
	font-weight: 900;
	color: var(--hrcq-blue);
	margin: 0 0 4px;
	min-height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hrcq-price-dash {
	opacity: 0.3;
}
.hrcq-price-note {
	font-size: 11px;
	color: var(--hrcq-text-muted);
	margin: 0;
}

/* Nav buttons */
.hrcq-nav {
	display: flex;
	gap: 10px;
}
.hrcq-btn-prev {
	flex: 1;
	padding: 13px 14px;
	border: 2px solid var(--hrcq-blue);
	border-radius: var(--hrcq-radius-sm);
	background: transparent;
	color: var(--hrcq-blue);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	font-family: inherit;
}
.hrcq-btn-prev:hover:not(:disabled) {
	background: var(--hrcq-gray);
}
.hrcq-btn-prev:disabled {
	opacity: 0.35;
	cursor: default;
}
.hrcq-btn-next {
	flex: 1;
	padding: 13px 14px;
	border: none;
	border-radius: var(--hrcq-radius-sm);
	background: var(--hrcq-yellow);
	color: var(--hrcq-blue);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background 0.2s, box-shadow 0.2s;
	font-family: inherit;
	box-shadow: 0 2px 8px rgba(245,193,0,0.4);
}
.hrcq-btn-next:hover:not(:disabled) {
	background: #e6b400;
	box-shadow: 0 4px 14px rgba(245,193,0,0.5);
}
.hrcq-btn-next:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Schedule button */
.hrcq-btn-schedule {
	display: block;
	width: 100%;
	padding: 15px 16px;
	background: var(--hrcq-blue);
	color: var(--hrcq-white);
	border: none;
	border-radius: var(--hrcq-radius-sm);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition: background 0.2s, box-shadow 0.2s;
	box-shadow: 0 2px 10px rgba(27,53,102,0.3);
	font-family: inherit;
	line-height: 1.4;
}
.hrcq-btn-schedule:hover {
	background: var(--hrcq-blue-light);
	color: var(--hrcq-white);
	box-shadow: 0 4px 16px rgba(27,53,102,0.4);
	text-decoration: none;
}

/* On the final step the selections are already listed in the summary below,
   so hide the redundant Project Summary box — the sidebar then shows just the
   price followed by the contact form. */
.hrcq-final-active .hrcq-summary-box {
	display: none;
}

/* ── Final-step lead form (in the sidebar, under the price) ── */
.hrcq-final-form {
	background: var(--hrcq-white);
	border: 1px solid var(--hrcq-border);
	border-radius: var(--hrcq-radius);
	padding: 16px;
	box-shadow: var(--hrcq-shadow);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.hrcq-final-form-title {
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--hrcq-blue);
	margin: 0;
}
.hrcq-final-form .hrcq-contact-form {
	gap: 12px;
}
.hrcq-final-form .hrcq-field input {
	padding: 11px 13px;
	font-size: 15px;
}
.hrcq-final-form .hrcq-alert {
	margin-bottom: 0;
}
.hrcq-final-form .hrcq-privacy-note {
	margin: 0;
}
/* Top button: "Email me my quote details" */
.hrcq-btn-email-quote {
	display: block;
	width: 100%;
	padding: 15px 16px;
	background: var(--hrcq-yellow);
	color: var(--hrcq-blue);
	border: none;
	border-radius: var(--hrcq-radius-sm);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	cursor: pointer;
	text-align: center;
	transition: background 0.2s, box-shadow 0.2s;
	box-shadow: 0 2px 10px rgba(245,193,0,0.4);
	font-family: inherit;
	line-height: 1.4;
}
.hrcq-btn-email-quote:hover:not(:disabled) {
	background: #e6b400;
	box-shadow: 0 4px 16px rgba(245,193,0,0.5);
}
.hrcq-btn-email-quote:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ── Package intro + per-package tabs (final step, above cards) ── */
/* These live inside .hrcq-tier-cards-section, which already draws the top
   divider, so they only need bottom spacing. */
.hrcq-pkg-intro {
	font-size: 14px;
	line-height: 1.6;
	color: var(--hrcq-text);
	margin: 0 0 16px;
}
.hrcq-pkg-tabs {
	margin: 0 0 16px;
}
.hrcq-pkg-tab-nav {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 0;
}
.hrcq-pkg-tab-btn {
	flex: 1 1 0;
	min-width: 90px;
	padding: 10px 12px;
	border: 2px solid var(--hrcq-border);
	border-bottom: none;
	border-radius: var(--hrcq-radius-sm) var(--hrcq-radius-sm) 0 0;
	background: var(--hrcq-card-bg);
	color: var(--hrcq-text-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.hrcq-pkg-tab-btn:hover {
	color: var(--hrcq-blue);
}
.hrcq-pkg-tab-btn.active {
	background: var(--hrcq-white);
	color: var(--hrcq-blue);
	border-color: var(--hrcq-yellow);
}
.hrcq-pkg-tab-panel {
	display: none;
	border: 2px solid var(--hrcq-yellow);
	border-radius: 0 var(--hrcq-radius-sm) var(--hrcq-radius-sm) var(--hrcq-radius-sm);
	padding: 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--hrcq-text);
	background: var(--hrcq-white);
}
.hrcq-pkg-tab-panel.active {
	display: block;
}
.hrcq-pkg-tab-empty {
	color: var(--hrcq-text-muted);
	font-style: italic;
}
/* The cards heading no longer needs its own divider when tabs precede it. */
.hrcq-pkg-tabs + .hrcq-tier-cards-heading,
.hrcq-pkg-intro + .hrcq-tier-cards-heading {
	margin-top: 20px;
}

/* ============================================================
   BUTTON TEXT COLOR OPTION (Form Settings → Button Text Color)
   Swaps text on the form's blue-on-yellow buttons to white, and the
   toggle/yes-no buttons' dark text to white. Buttons that use a blue
   border/outline get a solid blue fill instead so the white text stays
   legible; buttons already white-on-blue (selected toggles, the
   schedule button) stay white explicitly.
   ============================================================ */
.hrcq-wrapper.hrcq-btn-text-white .hrcq-btn-next,
.hrcq-wrapper.hrcq-btn-text-white .hrcq-btn-email-quote,
.hrcq-wrapper.hrcq-btn-text-white .hrcq-btn-toggle,
.hrcq-wrapper.hrcq-btn-text-white .hrcq-yn-btn,
.hrcq-wrapper.hrcq-btn-text-white .hrcq-btn-schedule {
	color: var(--hrcq-white) !important;
}
.hrcq-wrapper.hrcq-btn-text-white .hrcq-btn-prev,
.hrcq-wrapper.hrcq-btn-text-white .hrcq-btn-download {
	background: var(--hrcq-blue);
	color: var(--hrcq-white) !important;
}
.hrcq-wrapper.hrcq-btn-text-white .hrcq-btn-prev:hover:not(:disabled),
.hrcq-wrapper.hrcq-btn-text-white .hrcq-btn-download:hover {
	background: var(--hrcq-blue-light);
	color: var(--hrcq-white) !important;
}
.hrcq-wrapper.hrcq-btn-text-white .hrcq-pkg-tab-btn:hover,
.hrcq-wrapper.hrcq-btn-text-white .hrcq-pkg-tab-btn.active {
	background: var(--hrcq-blue);
	color: var(--hrcq-white) !important;
}

/* ── Alert messages ───────────────────────────────────────── */
.hrcq-alert {
	padding: 12px 16px;
	border-radius: var(--hrcq-radius-sm);
	margin-bottom: 18px;
	font-size: 14px;
	line-height: 1.5;
}
.hrcq-alert-error {
	background: #fde8e8;
	border: 1px solid #f5c6c6;
	color: #8b0000;
}
.hrcq-alert-success {
	background: #e8f5e9;
	border: 1px solid #c8e6c9;
	color: #1b5e20;
}

/* ── Loading spinner ──────────────────────────────────────── */
.hrcq-spinner {
	display: inline-block;
	width: 22px;
	height: 22px;
	border: 3px solid var(--hrcq-gray-mid);
	border-top-color: var(--hrcq-blue);
	border-radius: 50%;
	animation: hrcq-spin 0.65s linear infinite;
	vertical-align: middle;
}
@keyframes hrcq-spin {
	to { transform: rotate(360deg); }
}

/* ============================================================
   TIER PRICING CARDS (Step 11)
   ============================================================ */
.hrcq-tier-cards-section {
	margin: 24px 0 0;
	padding-top: 22px;
	border-top: 2px solid var(--hrcq-yellow);
}
.hrcq-tier-cards-heading {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--hrcq-text-muted);
	margin: 0 0 14px;
}
.hrcq-tier-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
@media (max-width: 520px) {
	.hrcq-tier-cards {
		grid-template-columns: 1fr;
	}
}
.hrcq-tier-card {
	border: 2px solid var(--hrcq-border);
	border-radius: var(--hrcq-radius);
	padding: 18px 12px 14px;
	text-align: center;
	background: var(--hrcq-card-bg);
	transition: border-color 0.2s, box-shadow 0.2s;
}
.hrcq-tier-card-selected {
	border-color: var(--hrcq-yellow);
	background: var(--hrcq-yellow-lite);
	box-shadow: 0 2px 12px rgba(245,193,0,0.2);
}
.hrcq-tier-card-name {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--hrcq-text-muted);
	margin-bottom: 10px;
}
.hrcq-tier-card-selected .hrcq-tier-card-name {
	color: var(--hrcq-blue);
}
.hrcq-tier-card-price {
	font-size: clamp(20px, 2.8vw, 28px);
	font-weight: 900;
	color: var(--hrcq-blue);
	line-height: 1.1;
	margin-bottom: 8px;
}
.hrcq-tier-card-badge {
	display: inline-block;
	background: var(--hrcq-yellow);
	color: var(--hrcq-blue);
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 3px 10px;
	border-radius: 10px;
}

/* ============================================================
   PRODUCT DETAIL BLOCKS (Step 11)
   ============================================================ */
.hrcq-product-details-wrap {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 2px solid var(--hrcq-border);
}
.hrcq-product-detail {
	padding: 18px 0;
	border-bottom: 1px solid var(--hrcq-border);
}
.hrcq-product-detail:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.hrcq-product-detail-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
}
.hrcq-product-detail-thumb {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hrcq-gray);
	border-radius: var(--hrcq-radius-sm);
	padding: 6px;
}
.hrcq-product-detail-thumb img,
.hrcq-product-detail-thumb svg {
	max-width: 100%;
	max-height: 100%;
}
.hrcq-product-detail-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--hrcq-blue);
}
.hrcq-product-detail-desc {
	font-size: 14px;
	line-height: 1.65;
	color: var(--hrcq-text);
}
.hrcq-product-detail-desc p {
	margin: 0 0 8px;
}
.hrcq-product-detail-desc p:last-child {
	margin-bottom: 0;
}

/* ── Responsive tweaks ────────────────────────────────────── */
@media (max-width: 760px) {
	.hrcq-question-card {
		padding: 20px 16px 18px;
	}
	.hrcq-sidebar {
		position: static;
	}
	.hrcq-nav {
		flex-direction: row;
	}
	.hrcq-options-list .hrcq-option-label {
		font-size: 15px;
	}
}
@media (max-width: 480px) {
	.hrcq-form-title {
		font-size: 16px;
	}
	.hrcq-options-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.hrcq-grid-card {
		padding: 14px 8px 10px;
	}
	.hrcq-grid-img {
		width: 50px;
		height: 50px;
	}
	.hrcq-operation-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ============================================================
   Tooltips
   ============================================================ */
.hrcq-tooltip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	margin-left: 5px;
	vertical-align: middle;
	outline: none;
}
.hrcq-tooltip-icon {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--hrcq-gray-dark);
	color: var(--hrcq-white);
	font-size: 10px;
	font-style: italic;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
	font-family: Georgia, serif;
}
.hrcq-tooltip-text {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	width: 200px;
	max-width: 60vw;
	background: var(--hrcq-blue-dark);
	color: var(--hrcq-white);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	padding: 8px 10px;
	border-radius: var(--hrcq-radius-sm);
	box-shadow: var(--hrcq-shadow-hover);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 20;
	text-transform: none;
}
.hrcq-tooltip-text::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--hrcq-blue-dark);
}
.hrcq-tooltip:hover .hrcq-tooltip-text,
.hrcq-tooltip:focus .hrcq-tooltip-text,
.hrcq-tooltip:focus-within .hrcq-tooltip-text {
	opacity: 1;
	visibility: visible;
}