.hfr-app, .hfr-app * { box-sizing: border-box; }
.hfr-app {
	--hfr-bg: #0e0e12;
	--hfr-card: #17171d;
	--hfr-border: #27272f;
	--hfr-gold: #f7b500;
	--hfr-gold-dark: #d69f00;
	--hfr-text: #f5f5f7;
	--hfr-text-muted: #a4a4ae;
	font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
	color: var(--hfr-text);
	background: var(--hfr-bg);
	padding: 1.75rem;
	border-radius: 18px;
}

.hfr-form-container { max-width: 1180px; margin: 0 auto; }

.hfr-header h1 {
	font-size: 1.9rem; font-weight: 800; display: flex; align-items: center; gap: 12px; margin: 0 0 4px;
}
.hfr-header h1 i { color: var(--hfr-gold); }
.hfr-header h1 small { font-size: .85rem; font-weight: 400; color: var(--hfr-text-muted); margin-left: 6px; }
.hfr-subhead { color: var(--hfr-text-muted); border-left: 3px solid var(--hfr-gold); padding-left: 14px; margin-bottom: 1.75rem; font-size: .92rem; }

/* Layout: main column + sidebar, like the reference site */
.hfr-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.75rem; align-items: start; }
.hfr-main {
	background: var(--hfr-card);
	border: 1px solid var(--hfr-border);
	border-radius: 22px;
	padding: 1.75rem 2rem;
}
.hfr-sidebar { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 1.1rem; }
.hfr-sidebar-card { background: var(--hfr-card); border: 1px solid var(--hfr-border); border-radius: 18px; padding: 1.2rem 1.3rem; }
.hfr-sidebar-title { font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .4px; margin-bottom: .9rem; color: var(--hfr-gold); }
.hfr-sidebar-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hfr-border); font-size: .85rem; }
.hfr-sidebar-row:last-child { border-bottom: none; }
.hfr-sidebar-row i { color: var(--hfr-gold); width: 18px; margin-top: 3px; }
.hfr-sidebar-row div { display: flex; flex-direction: column; gap: 2px; }
.hfr-sidebar-row strong { font-size: .78rem; text-transform: uppercase; letter-spacing: .3px; color: var(--hfr-text-muted); }
.hfr-sidebar-row span { color: var(--hfr-text); font-weight: 500; }
.hfr-sidebar-total span { color: var(--hfr-gold); font-weight: 700; font-size: 1.05rem; }
.hfr-why-item { font-size: .85rem; padding: 6px 0; color: var(--hfr-text-muted); }
.hfr-why-item i { color: #2fbf71; margin-right: 8px; }
.hfr-gold-text { color: var(--hfr-gold); }

/* Steps bar */
.hfr-steps-bar { display: flex; justify-content: space-between; margin-bottom: 2rem; position: relative; }
.hfr-steps-bar::before { content: ''; position: absolute; top: 20px; left: 24px; right: 24px; height: 2px; background: var(--hfr-border); z-index: 0; }
.hfr-step-dot { display: flex; flex-direction: column; align-items: center; flex: 1; z-index: 1; }
.hfr-step-dot .circle {
	width: 40px; height: 40px; border-radius: 50%; background: var(--hfr-bg);
	border: 2px solid var(--hfr-border); color: var(--hfr-text-muted); font-weight: 700;
	display: flex; align-items: center; justify-content: center; transition: .2s; font-size: .85rem;
}
.hfr-step-dot.active .circle { background: var(--hfr-gold); border-color: var(--hfr-gold); color: #1a1a1a; box-shadow: 0 0 0 4px rgba(247,181,0,.15); }
.hfr-step-dot.completed .circle { background: #2fbf71; border-color: #2fbf71; color: #08130d; }
.hfr-step-dot .label { font-size: .65rem; margin-top: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--hfr-text-muted); text-align: center; }
.hfr-step-dot.active .label, .hfr-step-dot.completed .label { color: var(--hfr-text); }

/* Steps */
.hfr-step-page { display: none; animation: hfr-fade .25s ease; }
.hfr-step-page.active { display: block; }
@keyframes hfr-fade { 0% { opacity: .5; transform: translateY(6px);} 100% { opacity:1; transform:translateY(0);} }
.hfr-step-page h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 1.4rem; font-size: 1.15rem; }
.hfr-step-page h3 i { color: var(--hfr-gold); }

.hfr-form-group { margin-bottom: 1.4rem; }
.hfr-form-group label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.hfr-hint { font-size: .78rem; color: var(--hfr-text-muted); font-weight: 400; }
.hfr-label-row { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; color: var(--hfr-gold); margin: 1rem 0 .7rem; }
.hfr-req { color: #ff6b5e; font-weight: 700; }

.hfr-control {
	width: 100%; padding: 12px 15px; border: 1.5px solid var(--hfr-border); border-radius: 12px;
	font-size: .93rem; background: var(--hfr-bg); color: var(--hfr-text); transition: .2s;
}
.hfr-control::placeholder { color: var(--hfr-text-muted); }
.hfr-control:focus { border-color: var(--hfr-gold); outline: none; box-shadow: 0 0 0 3px rgba(247,181,0,.15); }
select.hfr-control option { background: var(--hfr-card); color: var(--hfr-text); }
.hfr-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

/* Location grid (step 1) */
.hfr-location-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 1.2rem; }
.hfr-location-card {
	background: var(--hfr-bg); border: 2px solid var(--hfr-border); border-radius: 14px; padding: 12px;
	cursor: pointer; transition: .15s; text-align: left;
}
.hfr-location-card:hover { border-color: var(--hfr-gold-dark); }
.hfr-location-card.active { border-color: var(--hfr-gold); background: rgba(247,181,0,.08); }
.hfr-location-card .loc-name { font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: 6px; }
.hfr-location-card .loc-name i { color: var(--hfr-gold); }
.hfr-location-card .loc-region { font-size: .75rem; color: var(--hfr-text-muted); margin-top: 2px; }
.hfr-manual-location {
	display: flex; align-items: center; gap: 14px; border: 2px dashed var(--hfr-gold-dark); border-radius: 14px;
	padding: 14px 16px; background: rgba(247,181,0,.05); margin-bottom: .5rem;
}
.hfr-manual-location > i { color: var(--hfr-gold); font-size: 1.3rem; }
.hfr-manual-location > div:nth-child(2) { flex: 0 0 auto; min-width: 160px; }
.hfr-manual-location input { flex: 1; }

/* Device grid */
.hfr-device-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hfr-dev-btn {
	background: var(--hfr-bg); border: 2px solid var(--hfr-border); padding: 10px 20px; border-radius: 40px;
	font-weight: 600; color: var(--hfr-text); cursor: pointer; transition: .15s; font-size: .88rem;
}
.hfr-dev-btn:hover { border-color: var(--hfr-gold-dark); }
.hfr-dev-btn.active { background: var(--hfr-gold); color: #1a1a1a; border-color: var(--hfr-gold); }
.hfr-dev-btn.other-device { border-style: dashed; }

/* Selected-device chip (shown after a device is picked; grid hides) */
.hfr-device-chip {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: rgba(247,181,0,.08); border: 2px solid var(--hfr-gold); border-radius: 14px;
	padding: 12px 16px; margin-bottom: 1.4rem;
}
.hfr-device-chip .chip-info { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .95rem; }
.hfr-device-chip .chip-info i { color: var(--hfr-gold); font-size: 1.2rem; }
.hfr-btn-sm { padding: 7px 16px; font-size: .8rem; }

/* Suburb field only shown for door-to-door method */
.hfr-suburb-group { display: none; margin-top: 18px; }
.hfr-suburb-group.visible { display: block; }

/* Upload */
.hfr-upload-area { border: 2px dashed var(--hfr-border); padding: 20px; border-radius: 16px; text-align: center; background: var(--hfr-bg); cursor: pointer; transition: .2s; }
.hfr-upload-area:hover { border-color: var(--hfr-gold); background: rgba(247,181,0,.04); }
.hfr-upload-area i { font-size: 2rem; color: var(--hfr-gold); }
.hfr-upload-area p { margin-top: 8px; color: var(--hfr-text-muted); font-weight: 500; }
.hfr-file-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.hfr-file-preview .hfr-thumb { position: relative; }
.hfr-file-preview img { width: 68px; height: 68px; object-fit: cover; border-radius: 10px; border: 2px solid var(--hfr-border); }
.hfr-file-preview .remove { position: absolute; right: -6px; top: -8px; background: #e0433e; color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 700; font-size: 13px; }

/* Services */
.hfr-service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hfr-service-grid label {
	background: var(--hfr-bg); padding: 12px 14px; border-radius: 14px; display: flex; align-items: center; gap: 10px;
	font-weight: 500; font-size: .9rem; border: 2px solid var(--hfr-border); cursor: pointer; transition: .1s;
}
.hfr-service-grid label:hover { border-color: var(--hfr-gold-dark); }
.hfr-service-grid label.checked { border-color: var(--hfr-gold); background: rgba(247,181,0,.08); }
.hfr-service-grid input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--hfr-gold); }
.hfr-service-grid .price { margin-left: auto; font-weight: 700; color: var(--hfr-gold); font-size: .85rem; }

/* Pricing summary */
.hfr-pricing-summary { background: rgba(247,181,0,.06); border-left: 4px solid var(--hfr-gold); border-radius: 16px; padding: 16px 20px; margin: 16px 0 8px; display: none; }
.hfr-pricing-summary.visible { display: block; }
.hfr-pricing-title { font-weight: 700; margin-bottom: 8px; }
.hfr-total-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: .9rem; }
.hfr-total-row.hfr-total { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--hfr-border); padding-top: 10px; margin-top: 6px; }
.hfr-price { font-weight: 700; color: var(--hfr-gold); }
.hfr-total .hfr-price { font-size: 1.2rem; }

/* Screen type tier */
.hfr-screen-tier { background: var(--hfr-bg); border: 2px solid var(--hfr-border); padding: 16px 18px; border-radius: 16px; margin: 16px 0 6px; display: none; }
.hfr-screen-tier.visible { display: block; }
.hfr-screen-tier-title { font-weight: 700; margin-bottom: 10px; display: block; }
.hfr-screen-option { display: flex; align-items: center; padding: 10px 12px; margin: 6px 0; background: var(--hfr-card); border-radius: 12px; border: 2px solid transparent; cursor: pointer; transition: .15s; }
.hfr-screen-option:hover { border-color: var(--hfr-border); }
.hfr-screen-option.selected { border-color: var(--hfr-gold); background: rgba(247,181,0,.08); }
.hfr-screen-option input { accent-color: var(--hfr-gold); width: 17px; height: 17px; margin-right: 12px; }
.hfr-screen-option .label { flex: 1; font-weight: 600; font-size: .9rem; }
.hfr-screen-option .desc { display: block; font-size: .76rem; color: var(--hfr-text-muted); font-weight: 400; }
.hfr-screen-option .price { font-weight: 700; color: var(--hfr-gold); }

/* Method cards */
.hfr-method-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hfr-method-card { background: var(--hfr-bg); border: 2px solid var(--hfr-border); border-radius: 18px; padding: 20px 10px; text-align: center; cursor: pointer; transition: .15s; }
.hfr-method-card:hover { border-color: var(--hfr-gold-dark); }
.hfr-method-card.active { border-color: var(--hfr-gold); background: rgba(247,181,0,.08); }
.hfr-method-card i { font-size: 1.9rem; color: var(--hfr-gold); }
.hfr-method-card h4 { margin: 10px 0 4px; font-size: .95rem; }
.hfr-method-card small { color: var(--hfr-text-muted); }

/* Shipping / return label (mail-in & in-store) */
.hfr-shipping-label { background: #fff; color: #17171d; border-radius: 18px; overflow: hidden; margin-top: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.hfr-label-header { background: var(--hfr-gold); padding: 20px 24px 16px; }
.hfr-label-shop-name { font-size: 1.5rem; font-weight: 900; color: #1a1a1a; letter-spacing: .5px; line-height: 1.1; }
.hfr-label-tagline { font-size: .72rem; font-weight: 700; color: #1a1a1a; opacity: .75; letter-spacing: .6px; margin-top: 4px; }
.hfr-label-body { padding: 22px 24px 24px; }
.hfr-label-eyebrow { font-size: .68rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #8a8a93; margin-bottom: 8px; }
.hfr-label-shop-name-sm { font-size: 1.1rem; font-weight: 800; color: #111; margin-bottom: 6px; }
.hfr-label-addr-line { font-size: .92rem; color: #3a3a42; line-height: 1.5; }
.hfr-label-phone-box { margin-top: 14px; background: #f4f4f6; border-left: 4px solid var(--hfr-gold); padding: 10px 14px; border-radius: 8px; font-size: .92rem; color: #111; }
.hfr-label-note { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #ddd; font-size: .78rem; color: #8a8a93; text-align: center; }
.hfr-btn-print { display: block; width: 100%; margin-top: 16px; background: var(--hfr-gold); color: #1a1a1a; border: none; padding: 12px; border-radius: 40px; font-weight: 800; cursor: pointer; font-size: .92rem; }
.hfr-btn-print:hover { background: var(--hfr-gold-dark); }

/* Print only the label, nothing else on the page */
@media print {
	body * { visibility: hidden !important; }
	.hfr-shipping-label, .hfr-shipping-label * { visibility: visible !important; }
	.hfr-shipping-label {
		position: absolute; top: 0; left: 0; width: 100%; margin: 0;
		box-shadow: none; border-radius: 0;
	}
	.hfr-shipping-label #hfr-print-label { display: none !important; }
}

/* PayPal / Stripe button area */
#hfr-paypal-button-container { max-width: 380px; }
.hfr-paypal-note { font-size: .8rem; color: var(--hfr-text-muted); margin-top: 8px; }
.hfr-quote-notice {
	margin-top: 10px; background: rgba(255,107,94,.08); border-left: 4px solid #ff6b5e;
	color: var(--hfr-text); padding: 10px 14px; border-radius: 10px; font-size: .84rem;
}
.hfr-quote-notice i { color: #ff6b5e; margin-right: 6px; }
.hfr-stripe-btn { background: #635bff; color: #fff; }
.hfr-stripe-btn:hover { background: #4b43e0; }
.hfr-stripe-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Inline Stripe card fields (card number / expiry / CVC live right in the form) */
.hfr-stripe-payment { margin-top: 4px; }
.hfr-stripe-card-label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 6px; }
.hfr-stripe-card-element {
	background: var(--hfr-bg); border: 1.5px solid var(--hfr-border); border-radius: 12px;
	padding: 13px 14px; transition: .2s;
}
.hfr-stripe-card-element.StripeElement--focus { border-color: var(--hfr-gold); box-shadow: 0 0 0 3px rgba(247,181,0,.15); }
.hfr-stripe-card-element.StripeElement--invalid { border-color: #ff6b5e; }
.hfr-stripe-card-errors { color: #ff6b5e; font-size: .8rem; margin-top: 6px; min-height: 1.1em; }

/* Payment success / booking complete panels */
.hfr-success-badge {
	display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 800;
	color: #2fbf71; background: rgba(47,191,113,.1); border: 1px solid rgba(47,191,113,.35);
	border-radius: 14px; padding: 14px 18px; margin-bottom: 6px;
}
.hfr-success-badge i { font-size: 1.3rem; }
#hfr-receipt-box .hfr-summary-item { font-size: .9rem; }

/* Return address field (mail-in only) */
#hfr-return-address-group.visible { display: block !important; }

/* Thank-you popup */
.hfr-modal-overlay {
	position: fixed; inset: 0; background: rgba(6,6,9,.72); z-index: 99999;
	display: flex; align-items: center; justify-content: center; padding: 20px;
	backdrop-filter: blur(2px);
}
.hfr-modal-box {
	background: var(--hfr-card); border: 1px solid var(--hfr-border); border-radius: 22px;
	max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 32px 30px 26px;
	position: relative; box-shadow: 0 30px 60px rgba(0,0,0,.5);
	animation: hfr-modal-in .25s ease;
}
@keyframes hfr-modal-in { 0% { opacity: 0; transform: translateY(12px) scale(.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.hfr-modal-close-x {
	position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--hfr-text-muted);
	font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.hfr-modal-close-x:hover { color: var(--hfr-text); }
.hfr-modal-header { text-align: center; margin-bottom: 18px; }
.hfr-modal-icon { font-size: 2.6rem; margin-bottom: 6px; }
.hfr-modal-header h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 8px; color: var(--hfr-text); }
.hfr-modal-booking-number {
	display: inline-block; background: rgba(247,181,0,.12); border: 1px solid rgba(247,181,0,.4);
	color: var(--hfr-gold); font-weight: 700; padding: 6px 16px; border-radius: 40px; font-size: .9rem;
}
.hfr-modal-body {
	white-space: pre-line; font-size: .9rem; line-height: 1.65; color: var(--hfr-text);
	background: var(--hfr-bg); border: 1px solid var(--hfr-border); border-radius: 14px;
	padding: 18px 20px; margin-bottom: 20px; max-height: 42vh; overflow-y: auto;
}
.hfr-modal-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 500px) {
	.hfr-modal-box { padding: 24px 18px 20px; }
	.hfr-modal-body { font-size: .85rem; padding: 14px 15px; }
}

/* Summary box (step 6) */
.hfr-summary-box { background: var(--hfr-bg); border: 1px solid var(--hfr-border); border-radius: 16px; padding: 18px; margin: 14px 0; }
.hfr-summary-box h4 { margin: 0 0 10px; font-size: .95rem; }
.hfr-summary-item { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--hfr-border); font-size: .88rem; }
.hfr-summary-item:last-child { border-bottom: none; }
.hfr-online-info { margin-top: 10px; background: rgba(247,181,0,.08); padding: 10px 14px; border-radius: 12px; font-size: .85rem; }

/* Nav buttons */
.hfr-nav-buttons { display: flex; justify-content: space-between; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--hfr-border); }
.hfr-nav-single { justify-content: flex-end; }
.hfr-btn { padding: 12px 30px; border-radius: 40px; font-weight: 700; border: none; background: var(--hfr-border); color: var(--hfr-text); cursor: pointer; transition: .15s; font-size: .9rem; }
.hfr-btn-primary { background: var(--hfr-gold); color: #1a1a1a; }
.hfr-btn-primary:hover { background: var(--hfr-gold-dark); }
.hfr-btn-outline { background: transparent; border: 2px solid var(--hfr-border); }
.hfr-btn-outline:hover { border-color: var(--hfr-gold-dark); }
.hfr-btn-success { background: #2fbf71; color: #06170d; }
.hfr-btn-success:hover { background: #26a35f; }
.hfr-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Previous / Next / Submit repair / Print Address — exact brand colors requested */
[data-back],
[data-next],
#hfr-step1-next,
#hfr-step3-next,
#hfr-step5-back,
#hfr-submit-btn,
.hfr-btn-print {
	background: #F7C600 !important;
	color: #111111 !important;
	border-color: #F7C600 !important;
}
[data-back]:hover,
[data-next]:hover,
#hfr-step1-next:hover,
#hfr-step3-next:hover,
#hfr-step5-back:hover,
#hfr-submit-btn:hover,
.hfr-btn-print:hover {
	background: #e0b400 !important;
	color: #111111 !important;
}

.hfr-toast {
	position: fixed; bottom: 24px; right: 24px; background: var(--hfr-card); border: 1px solid var(--hfr-gold);
	color: var(--hfr-text); padding: 14px 20px; border-radius: 14px; box-shadow: 0 10px 25px rgba(0,0,0,.35);
	z-index: 9999; max-width: 320px; font-size: .9rem;
}
.hfr-toast.error { border-color: #e0433e; }

/* Responsive */
@media (max-width: 980px) {
	.hfr-layout { grid-template-columns: 1fr; }
	.hfr-sidebar { position: static; order: 1; }
	.hfr-main { order: 0; }
	.hfr-location-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
	.hfr-app { padding: 1rem .6rem; border-radius: 12px; }
	.hfr-main { padding: 1.2rem 1.1rem; border-radius: 16px; }
	.hfr-row-2col { grid-template-columns: 1fr; }
	.hfr-service-grid { grid-template-columns: 1fr; }
	.hfr-method-cards { grid-template-columns: 1fr; }
	.hfr-location-grid { grid-template-columns: repeat(2, 1fr); }
	.hfr-steps-bar .label { display: none; }
	.hfr-manual-location { flex-wrap: wrap; }
	.hfr-manual-location input { width: 100%; }
	.hfr-nav-buttons { flex-direction: column-reverse; gap: 10px; }
	.hfr-nav-buttons .hfr-btn { width: 100%; }
}
@media (max-width: 420px) {
	.hfr-location-grid { grid-template-columns: 1fr; }
}