/* ==========================================================================
   Fallback styling for the k2k-ccs calculator markup.
   Class names match the original Laravel/Blade component 1:1, so you can
   paste your own CSS (using these same selectors) to fully replace this file.
   ========================================================================== */
body{
    overflow-x: hidden;
}   
.page-header .entry-title{
    display:none;
}   

.k2k-ccs {
	--cc-page-bg: #fbf3df;
	--cc-primary: #97b610;
	--cc-bg: #ffffff;
	--cc-text: #1f2933;
	--cc-border: #ccc;
	--cc-radius: 16px;
	--cc-hover-btn: #fba916;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--cc-text);
	/* background: var(--cc-page-bg); */
}

.cc-wrap {
	max-width: 900px;
	margin: 0 auto 40px;
	padding: 0 20px;
	box-sizing: border-box;
}

/* Hero */
.cc-tool-hero {
	position: relative;
	overflow: hidden;
	padding: 48px 0 36px 0;
	/* background-image: var(--cc-tool-hero-image, none);
	background-size: cover;
	background-position: center; */
}

.cc-tool-hero__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(40px);
	opacity: 0.35;
	/* background: var(--cc-primary); */
	z-index: 0;
}

.cc-tool-hero__orb--one { width: 240px; height: 240px; top: -80px; left: -60px; }
.cc-tool-hero__orb--two { width: 180px; height: 180px; bottom: -60px; right: -40px; }

.cc-tool-hero__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

.cc-change-centre {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--cc-primary);
	text-decoration: none;
	margin-bottom: 16px;
}

.cc-change-centre:hover { text-decoration: underline; }

.cc-tool-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cc-primary);
	background: color-mix(in srgb, var(--cc-primary) 12%, var(--cc-bg));
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.cc-tool-hero__inner h1 {
	font-size: 30px;
	font-weight: 800;
	margin: 0 0 10px 0;
	letter-spacing: -0.01em;
	color: #fff !important;
}

.cc-tool-hero__inner > p {
	font-size: 15px;
	opacity: 0.7;
	max-width: 520px;
	margin: 0 auto 20px auto;
	color: #fff !important
}

.cc-tool-hero__inner > p a {
	color: #fff !important;
	text-decoration: underline;
	opacity: 1;
	font-weight: 700;
}

.cc-tool-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.cc-tool-badges span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 700;
	background: var(--cc-bg);
	border: 1px solid color-mix(in srgb, var(--cc-primary) 30%, var(--cc-border));
	padding: 7px 14px;
	border-radius: 999px;
	color: var(--cc-primary);
}

/* Stepper card */
.cc-stepper {
	background: var(--cc-bg);
	border: 1.5px solid color-mix(in srgb, var(--cc-primary) 30%, var(--cc-border));
	border-radius: var(--cc-radius);
	padding: 26px 32px;
	margin: -24px 0 24px 0;
	position: relative;
	z-index: 2;
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
}

.cc-stepper-head { text-align: center; margin-bottom: 18px; }
.cc-stepper-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; opacity: 0.55; margin: 0 0 4px 0; letter-spacing: 0.04em; }
.cc-stepper-title { font-size: 18px; font-weight: 700; margin: 0; }

.cc-stepper-track {
	display: flex;
	align-items: center;
}

.cc-stp {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

.cc-stp-dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	border: 2px solid var(--cc-border);
	background: var(--cc-bg);
	color: var(--cc-text);
	opacity: 0.55;
}

.cc-stp.active .cc-stp-dot,
.cc-stp.done .cc-stp-dot {
	border-color: var(--cc-primary);
	background: var(--cc-primary);
	color: #fff;
	opacity: 1;
}

.cc-stp-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.5; }
.cc-stp.active .cc-stp-lbl, .cc-stp.done .cc-stp-lbl { opacity: 0.9; }

.cc-stp-line { flex: 1; height: 2px; background: var(--cc-border); margin: 0 6px; margin-bottom: 20px; }

/* Panels */
.cc-panel {
	display: none;
	background: var(--cc-bg);
	border: 1.5px solid color-mix(in srgb, var(--cc-primary) 30%, var(--cc-border));
	border-radius: var(--cc-radius);
	padding: 30px 32px;
	margin-bottom: 20px;
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.05);
	animation: cc-fade-in 0.25s ease;
}

.cc-panel.active { display: block; }

@keyframes cc-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

.cc-panel-heading { margin-bottom: 22px; }
.cc-panel-heading > span { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--cc-primary); letter-spacing: 0.04em; }
.cc-panel-heading h2 { font-size: 19px; margin: 4px 0; }
.cc-panel-heading p { font-size: 13.5px; opacity: 0.6; margin: 0; }

.cc-field { margin-bottom: 20px; }
.cc-field > label { display: flex; align-items: center; gap: 6px; font-family: inherit; font-size: 13px; font-weight: 700; margin-bottom: 8px; }

.cc-req { color: #b91c1c; }
.cc-hint { font-size: 12.5px; opacity: 0.55; margin: 6px 0 0 0; }
.cc-hint-inline { font-weight: 400; opacity: 0.55; text-transform: none; }

.cc-info-btn {
	appearance: none;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--cc-primary);
	opacity: 0.7;
	padding: 0;
	font-size: 13px;
}

.cc-pop-panel { display: none; margin-top: 10px; }
.cc-pop-panel.open { display: block; }
.cc-pop-inner {
	background: color-mix(in srgb, var(--cc-primary) 8%, var(--cc-bg));
	border: 1px solid color-mix(in srgb, var(--cc-primary) 25%, var(--cc-border));
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 12.5px;
	line-height: 1.5;
	opacity: 0.85;
}

/* Segmented buttons */
.cc-seg { display: flex; gap: 10px; flex-wrap: wrap; }

.cc-seg-btn {
	flex: 1;
	min-width: 130px;
	appearance: none;
	cursor: pointer;
	font-family: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	padding: 13px 10px !important;
	background: color-mix(in srgb, var(--cc-primary) 12%, var(--cc-bg)) !important;
	border: 1.5px solid var(--cc-border);
	border-radius: calc(var(--cc-radius) * 0.4) !important;
	color: var(--cc-text) !important;
	border-width: 0 !important;
}

.cc-seg-btn.sel {
	background: var(--cc-hover-btn) !important;
	border-color: var(--cc-primary);
	color: #fff !important;
}

.cc-seg-title { font-weight: 700; }
.cc-seg-sub { font-size: 11px; opacity: 0.65; font-weight: 500; }

/* Slider */
.cc-slider-row { display: flex; align-items: center; gap: 14px; }
.cc-slider-row input[type="range"] { flex: 1; accent-color: var(--cc-primary); }
.cc-money-box {
	background: color-mix(in srgb, var(--cc-primary) 12%, var(--cc-bg));
	color: var(--cc-primary);
	font-weight: 700;
	font-size: 14px;
	padding: 9px 14px;
	border-radius: calc(var(--cc-radius) * 0.35);
	white-space: nowrap;
}

/* Children */
.cc-child-card {
	background: color-mix(in srgb, var(--cc-bg) 94%, var(--cc-text) 6%);
	border-radius: calc(var(--cc-radius) * 0.6);
	padding: 18px;
	margin-bottom: 16px;
}

.cc-child-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.cc-child-card__title { font-weight: 700; font-size: 14px; }
.cc-child-card__remove { appearance: none; background: none; border: none; color: #b91c1c; font-size: 12px; font-weight: 600; cursor: pointer; }

.cc-add-child-btn {
	width: 100%;
	appearance: none;
	cursor: pointer;
	background: transparent;
	border: 1.5px dashed var(--cc-border);
	border-radius: calc(var(--cc-radius) * 0.4) !important;
	padding: 13px !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--cc-text) !important;
	opacity: 0.7;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 12px;
}

.cc-add-child-btn:hover { opacity: 1; border-color: var(--cc-primary); }

.cc-days-select,
.cc-lead-grid input,
.cc-lead-grid textarea,
#lead-msg {
	appearance: none;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	font-size: 14px;
	font-family: inherit;
	color: var(--cc-text);
	background: color-mix(in srgb, var(--cc-bg) 96%, var(--cc-text) 4%);
	border: 1px solid var(--cc-border);
	border-radius: calc(var(--cc-radius) * 0.4) !important;
	border-width: 1px !important;
}

.cc-fee-note {
	font-size: 12px;
	opacity: 0.55;
	display: flex;
	gap: 6px;
	align-items: center;
}

/* Frequency toggle */
.cc-freq { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.cc-freq-btn {
	flex: 1;
	min-width: 80px;
	appearance: none;
	cursor: pointer;
	font-family: inherit !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	padding: 10px 8px !important;
	background: color-mix(in srgb, var(--cc-primary) 12%, var(--cc-bg)) !important; 
	border: 1.5px solid var(--cc-border);
	border-radius: calc(var(--cc-radius) * 0.4) !important;
	color: var(--cc-text) !important;
	border-width: 0 !important;
}
.cc-freq-btn.sel { 
	background: var(--cc-hover-btn) !important;
	border-color: var(--cc-primary); 
	color: #fff !important; 
    
}

/* Results */
.cc-results-layout {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

.cc-child-rate-card {
	background: color-mix(in srgb, var(--cc-bg) 94%, var(--cc-text) 6%);
	border-radius: calc(var(--cc-radius) * 0.5);
	padding: 16px;
}

.cc-child-rate-card h3 { font-size: 13px; margin: 0 0 10px 0; }

.cc-child-rate-row {
	font-size: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--cc-border);
}
.cc-child-rate-row:last-child { border-bottom: none; }
.cc-child-rate-row strong { display: block; margin-bottom: 2px; }

.cc-res-rows {
	border: 1px solid var(--cc-border);
	border-radius: calc(var(--cc-radius) * 0.5);
	overflow: hidden;
}

.cc-res-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 13px 16px;
	font-size: 14px;
	border-bottom: 1px solid var(--cc-border);
}

.cc-res-row:last-child { border-bottom: none; }
.cc-res-k { opacity: 0.75; display: flex; align-items: center; gap: 6px; }
.cc-res-warn .cc-res-v { color: #c2410c; }
.cc-res-green { background: color-mix(in srgb, var(--cc-primary) 6%, transparent); }

.cc-res-big {
	background: var(--cc-primary);
	color: #fff;
}
.cc-res-big .cc-res-k, .cc-res-big .cc-res-v { color: #fff; opacity: 1; }
.cc-res-big .cc-res-v { font-size: 17px; font-weight: 700; }

.cc-pct-pill {
	background: color-mix(in srgb, var(--cc-primary) 15%, var(--cc-bg));
	color: var(--cc-primary);
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 13px;
}

.cc-disc {
	display: flex;
	gap: 10px;
	align-items: center;
	background: color-mix(in srgb, #f5c518 15%, var(--cc-bg));
	border: 1px solid color-mix(in srgb, #f5c518 40%, var(--cc-border));
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 20px;
	font-size: 12.5px;
	font-family: inherit !important;
	margin-top: 10px;
}
.cc-disc p { margin: 0; opacity: 0.85; line-height: 1.2; }

/* Lead form */
.cc-send-section { border-top: 1px dashed var(--cc-border); padding-top: 22px; }
.cc-send-header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.cc-send-header__icon { color: var(--cc-primary); font-size: 18px; }
.cc-send-header h3 { margin: 0 0 2px 0; font-size: 15px; }
.cc-send-header p { margin: 0; font-size: 12.5px; opacity: 0.6; }

.cc-lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

.cc-honeypot { position: absolute; left: -9999px; opacity: 0; }

.cc-consent {
	display: flex;
	gap: 8px;
	align-items: center;
	font-family: inherit !important;
	font-size: 12.5px;
	opacity: 0.75;
	margin-bottom: 16px;
}

.cc-consent {
	line-height: 1.4em !important;
}

.cc-send-btn {
	appearance: none;
	border: none;
	cursor: pointer;
	background: var(--cc-primary) !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	padding: 12px 24px !important;
	border-radius: 999px !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-width: 0 !important;
}

.cc-send-btn:hover { opacity: 0.9; }

.cc-success { color: var(--cc-primary); font-size: 13px; font-weight: 600; margin-top: 10px; }
.cc-error { color: #b91c1c; font-size: 13px; font-weight: 600; margin-top: 10px; }
.cc-privacy-note { font-size: 11.5px; opacity: 0.5; margin-top: 12px; display: flex; align-items: center; gap: 6px; }

/* Tour section */
.cc-tour-section {
	background: linear-gradient(135deg, #f97316, #ea580c);
	border-radius: var(--cc-radius);
	padding: 28px 32px;
	color: #fff;
	margin: 24px 0;
}
.cc-tour-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; opacity: 0.9; margin: 0 0 8px 0; display: flex; align-items: center; gap: 6px; color: var(--cc-bg) }
.cc-tour-inner h2 { font-size: 20px; margin: 0 0 8px 0; }
.cc-tour-inner > p { font-size: 13.5px; opacity: 0.9; max-width: 460px; margin: 0 0 18px 0; }
.cc-tour-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.cc-tour-btn-primary, .cc-tour-btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none;
}
.cc-tour-btn-primary { background: #fff; color: #ea580c; }
.cc-tour-btn-secondary { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.cc-tour-note { font-size: 12px; opacity: 0.85; margin: 14px 0 0 0; }

.cc-disclaimer { font-size: 11.5px; opacity: 0.5; line-height: 1.6; margin: 0 0 20px 0; }
.cc-disclaimer a { color: var(--cc-primary); }

/* Nav */
.cc-nav { display: flex; justify-content: space-between; gap: 12px; }
.cc-btn-back, .cc-btn-next {
	appearance: none;
	border: none !important;
	cursor: pointer;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	padding: 12px 24px !important;
	border-radius: 999px !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.cc-btn-next { background: var(--cc-primary); color: #fff; margin-left: auto; }
.cc-btn-back { background: transparent; color: var(--cc-text); border: 1px solid var(--cc-border); }

.cc-wizard-error { margin-bottom: 16px; }

@media (max-width: 640px) {
	.cc-panel, .cc-stepper { padding: 20px; }
	.cc-tool-hero__inner h1 { font-size: 24px; }
	.cc-results-layout { grid-template-columns: 1fr; }
	.cc-lead-grid { grid-template-columns: 1fr; }
	.cc-stp-lbl { font-size: 9px; }
}

/* ==========================================================================
   ADDED — classes used by the current calculator.js output that weren't
   covered above yet. Nothing before this line has been changed.
   ========================================================================== */

.cc-sublbl {
	font-size: 13px;
	font-weight: 700;
	margin: 18px 0 8px 0;
}

.cc-room-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 10px;
	margin-bottom: 4px;
}

.cc-room-card {
	cursor: pointer;
	text-align: center;
	padding: 14px 10px;
	background: var(--cc-bg);
	border: 1.5px solid var(--cc-border);
	border-radius: calc(var(--cc-radius) * 0.4);
}

.cc-room-card.sel {
	background: color-mix(in srgb, var(--cc-primary) 12%, var(--cc-bg));
	border-color: var(--cc-primary);
}

.cc-room-icon { font-size: 22px; margin-bottom: 4px; }
.cc-room-name { font-size: 13px; font-weight: 700; }
.cc-room-age { font-size: 11px; opacity: 0.6; margin-top: 2px; }

.cc-session-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cc-sess {
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	background: var(--cc-bg);
	border: 1.5px solid var(--cc-border);
	border-radius: calc(var(--cc-radius) * 0.5);
	padding: 18px 20px;
}

.cc-sess.sel {
	border-color: var(--cc-primary);
	background: color-mix(in srgb, var(--cc-primary) 7%, var(--cc-bg));
}

.cc-sess-left { flex: 1; }
.cc-sess-time { font-weight: 700; font-size: 15px; }
.cc-sess-hrs { font-size: 12.5px; opacity: 0.55; margin-top: 3px; }

.cc-sess-tip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	background: color-mix(in srgb, var(--cc-primary) 10%, var(--cc-bg));
	color: var(--cc-primary);
	font-size: 12.5px;
	font-weight: 600;
	padding: 8px 12px;
	border-radius: 999px;
}

.cc-sess-fee {
	font-weight: 700;
	color: var(--cc-primary);
	font-size: 14px;
	white-space: nowrap;
	margin-right: 12px;
}

.cc-sess-rb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--cc-border);
	position: relative;
	flex-shrink: 0;
	display: block;
}

.cc-sess.sel .cc-sess-rb { border-color: var(--cc-primary); }

.cc-sess.sel .cc-sess-rb::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--cc-primary);
}

.cc-child-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.cc-child-head h3 { margin: 0; font-weight: 700; font-size: 14px; }

.cc-child-remove {
	appearance: none;
	background: none;
	border: none;
	color: #b91c1c;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.cc-book-inline-btn {
	appearance: none;
	border: none;
	background: var(--cc-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 8px 14px;
	border-radius: 999px;
	margin-top: 8px;
	cursor: pointer;
	font-family: inherit;
}

.cc-success {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.cc-share-wrap { margin-top: 20px; }

.cc-share-divider {
	text-align: center;
	font-size: 12px;
	opacity: 0.5;
	margin-bottom: 14px;
}

.cc-share-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.cc-share-tab {
	flex: 1;
	appearance: none;
	cursor: pointer;
	font-family: inherit !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	padding: 10px !important;
	background: color-mix(in srgb, var(--cc-primary) 12%, var(--cc-bg)) !important;
	border: 1.5px solid var(--cc-border);
	border-radius: calc(var(--cc-radius) * 0.4)!important;
	color: var(--cc-text) !important;
	border-width: 0 !important;
}

.cc-share-tab.active {
	background: var(--cc-hover-btn) !important;
	border-color: var(--cc-primary);
	color: #fff !important;
}

.cc-share-panel { display: none; }
.cc-share-panel.active { display: block; }

.cc-self-row { display: flex; gap: 10px; }

.cc-self-row input {
	flex: 1;
	padding: 11px 13px;
	border: 1px solid var(--cc-border);
	border-radius: calc(var(--cc-radius) * 0.4) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	border-width: 1px !important;
}

.cc-self-row button {
	appearance: none;
	border: none;
	cursor: pointer;
	background: var(--cc-primary);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	padding: 0 18px;
	border-radius: calc(var(--cc-radius) * 0.4);
	white-space: nowrap;
	font-family: inherit;
}

.cc-self-row button:hover{
	border: none !important;
	border-radius: calc(var(--cc-radius) * 0.4) !important;
}

@media (max-width: 640px) {
	.cc-share-tabs { flex-direction: column; }
}

/* ==========================================================================
   ADDED — full-width hero background image support + primary-color range
   slider styling. Nothing above this line has been changed.
   ========================================================================== */

/* Break the hero out of the theme's centered content column so its
   background spans the full browser width, edge-to-edge. */
.cc-tool-hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* When a center has a hero image configured, the section gets class
   "has-image" and an inline --cc-hero-image variable with the photo URL. */
.cc-tool-hero.has-image {
	background-image: var(--cc-hero-image);
	background-size: cover;
	background-position: center;
}

/* Dark overlay so white heading/badge text stays readable over the photo. */
.cc-tool-hero.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 0;
}

/* Range slider (income slider) styled with the primary color instead of
   the browser's default blue thumb/track. */
.cc-slider-row input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	height: 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cc-primary) 20%, var(--cc-border));
	outline: none;
}

.cc-slider-row input[type="range"]::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cc-primary) 20%, var(--cc-border));
}

.cc-slider-row input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	margin-top: -7px;
	border-radius: 50%;
	background: var(--cc-primary);
	border: 3px solid var(--cc-bg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.cc-slider-row input[type="range"]::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cc-primary) 20%, var(--cc-border));
}

.cc-slider-row input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--cc-primary);
	border: 3px solid var(--cc-bg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

/* ==========================================================================
   ADDED — "Book a tour" section restyle to match the dark-green reference
   design (decorative circles, gold accents). Nothing above this line has
   been changed. The earlier orange .cc-tour-section rule above is kept;
   these rules override just the properties needed, later in the cascade.
   ========================================================================== */

.cc-tour-section {
	background: var(--cc-primary);
	position: relative;
	overflow: hidden;
	text-align: center;
}

.cc-tour-section__orb {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	z-index: 0;
}

.cc-tour-section__orb--one { width: 160px; height: 160px; top: -50px; right: -30px; }
.cc-tour-section__orb--two { width: 140px; height: 140px; bottom: -60px; left: -30px; background: rgba(0, 0, 0, 0.15); }

.cc-tour-inner { position: relative; z-index: 1; }

.cc-tour-eyebrow {
	justify-content: center;
	color: var(--cc-bg);
}

.cc-tour-inner > p { margin-left: auto; margin-right: auto; }

.cc-tour-actions { justify-content: center; }

.cc-tour-actions a{ text-decoration: none !important;}

.cc-tour-btn-primary {
	background: var(--cc-hover-btn);
	color: var(--cc-bg) !important;
	border-color: transparent !important;
}

.cc-tour-btn-secondary {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	color: var(--cc-bg) !important
}
.flatpickr-monthDropdown-months, .numInputWrapper{
	top: -14px;
}

/* ==========================================================================
   ADDED — Footer content section (rendered after the calculator, before the
   FAQ accordion) and the FAQ accordion itself. Nothing above this line has
   been changed.
   ========================================================================== */

.cc-footer {
	border-top: 1px solid var(--cc-border);
	padding-top: 36px;
	margin-top: 8px;
}

.cc-footer-content {
	font-size: 14px;
	line-height: 1.7;
	opacity: 0.85;
}

.cc-footer-content > *:first-child { margin-top: 0; }
.cc-footer-content > *:last-child { margin-bottom: 0; }

.cc-footer-content h1,
.cc-footer-content h2,
.cc-footer-content h3,
.cc-footer-content h4 {
	color: var(--cc-text);
	opacity: 1;
	line-height: 1.3;
	margin: 0 0 10px 0;
}

.cc-footer-content h2 { font-size: 20px; font-weight: 800; }
.cc-footer-content h3 { font-size: 16px; font-weight: 700; }

.cc-footer-content p { margin: 0 0 14px 0; }

.cc-footer-content a {
	color: var(--cc-primary);
	font-weight: 600;
	text-decoration: underline;
}

.cc-footer-content a:hover { opacity: 0.85; }

.cc-footer-content ul,
.cc-footer-content ol {
	margin: 0 0 14px 0;
	padding-left: 22px;
}

.cc-footer-content li { margin-bottom: 6px; }

.cc-footer-content strong { font-weight: 700; color: var(--cc-text); }

/* FAQ accordion */
.cc-faq-section {
	border-top: 1px solid var(--cc-border);
	padding-top: 36px;
	margin-top: 8px;
}

.cc-faq-heading {
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 18px 0;
	letter-spacing: -0.01em;
}

.cc-faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cc-faq-item {
	background: var(--cc-bg);
	border: 1.5px solid var(--cc-border);
	border-radius: calc(var(--cc-radius) * 0.5);
	padding: 4px 20px;
}

.cc-faq-item[open] {
	border-color: color-mix(in srgb, var(--cc-primary) 40%, var(--cc-border));
	background: color-mix(in srgb, var(--cc-primary) 4%, var(--cc-bg));
}

.cc-faq-question {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--cc-text);
}

.cc-faq-question::-webkit-details-marker { display: none; }

.cc-faq-icon {
	flex-shrink: 0;
	color: var(--cc-primary);
	font-size: 13px;
	transition: transform 0.2s ease;
}

.cc-faq-item[open] .cc-faq-icon { transform: rotate(180deg); }

.cc-faq-answer {
	font-size: 13.5px;
	line-height: 1.65;
	opacity: 0.85;
	padding: 0 0 20px 0;
}

.cc-faq-answer > *:first-child { margin-top: 0; }
.cc-faq-answer > *:last-child { margin-bottom: 0; }
.cc-faq-answer p { margin: 0 0 12px 0; }
.cc-faq-answer a { color: var(--cc-primary); font-weight: 600; text-decoration: underline; }
.cc-faq-answer ul,
.cc-faq-answer ol { margin: 0 0 12px 0; padding-left: 20px; }
.cc-faq-answer li { margin-bottom: 4px; }

@media (max-width: 640px) {
	.cc-faq-heading { font-size: 19px; }
	.cc-faq-question { font-size: 13.5px; padding: 15px 0; }
}

/* ==========================================================================
   ADDED — sitewide floating "Subsidy Calculator" button (icon + wrapping
   two-line label), fixed to the right edge of the window. Matches the
   stacked block style of a "Book a Tour" style tab. Nothing above this
   line has been changed.
   ========================================================================== */

.cc-float-calc-btn {
	position: fixed;
	right: 0;
	bottom: var(--cc-float-bottom, 120px);
	z-index: 99999;
	width: 108px;
	padding: 18px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--cc-float-bg, #1e6b3c);
	border-radius: 14px 0 0 14px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	text-decoration: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cc-float-calc-btn:hover {
	transform: translateX(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.cc-float-calc-btn__icon {
	color: #fff;
	font-size: 26px;
	line-height: 1;
}

.cc-float-calc-btn__label {
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.3;
	text-align: center;
}

@media (max-width: 640px) {
	.cc-float-calc-btn { width: 84px; padding: 14px 6px; bottom: var(--cc-float-bottom-mobile, 200px); }
	.cc-float-calc-btn__icon { font-size: 20px; }
	.cc-float-calc-btn__label { font-size: 10.5px; }
}