/* DC CCS Calculator - front-end styles. Everything scoped under .dcccs.
   Default neutral palette (overridden in Settings > Template) */
.dcccs {
	/* Defaults - overridden by the colours in CCS Calculator > Settings > Template (inline style on .dcccs). */
	--dc-primary: #2563eb;
	--dc-accent: #64748b;
	--dc-suburb: #64748b;
	--dc-panel: #f1f5f9;
	--dc-track: #94a3b8;
	--dc-thumb: #2563eb;
	--dc-text: #1f2937;
	box-sizing: border-box;
	color: var(--dc-text);
	font-family: var(--dc-font, inherit);
	line-height: var(--dc-lh, inherit);
	margin-left: auto;
	margin-right: auto;
	max-width: var(--dc-max, none);
	width: 100%;
}
.dcccs-recaptcha { margin: 0 0 10px; }
.dcccs *, .dcccs *::before, .dcccs *::after { box-sizing: border-box; }
.dcccs [hidden] { display: none !important; }

/* ---------- Centre picker ---------- */
.dcccs-picker { text-align: center; }
.dcccs-picker-title { color: var(--dc-heading, inherit); margin: 0 0 12px; font-size: var(--dc-hfs, 23px); }
.dcccs-picker-sub { margin: 0 0 36px; }
.dcccs-centres {
	display: grid;
	gap: var(--dc-gap, 24px);
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	margin: 0 auto;
	max-width: 1140px;
}
.dcccs-centre {
	appearance: none;
	background: var(--dc-card, #fff);
	border: var(--dc-bw, 1px) solid var(--dc-cb, #e2e8f0);
	box-shadow: var(--dc-shadow, 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(0, 0, 0, 0.07));
	color: var(--dc-text);
	cursor: pointer;
	display: block;
	font: inherit;
	padding: var(--dc-pad, 24px);
	text-align: center;
	transition: box-shadow 0.25s, border-color 0.25s, background-color 0.25s, transform 0.25s;
	width: 100%;
}
.dcccs-centre:hover, .dcccs-centre:focus-visible { background: var(--dc-hover-bg, var(--dc-card, #fff)); border-color: var(--dc-hover, var(--dc-primary)); outline: none; }
.hov-lift .dcccs-centre:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16); transform: translateY(-4px); }
.hov-glow .dcccs-centre:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dc-hover, var(--dc-primary)) 28%, transparent), 0 6px 20px rgba(0, 0, 0, 0.1); }
.dcccs-centre:focus-visible { outline: 2px solid var(--dc-primary); outline-offset: 2px; }
.dcccs-c-title { color: var(--dc-primary); display: block; font-size: var(--dc-fs-name, 20px); font-weight: 700; line-height: 1.2; margin-bottom: 6px; }
.dcccs-c-street { color: var(--dc-text); display: block; font-size: var(--dc-fs-street, 16px); font-weight: 700; line-height: 1.3; }
.dcccs-c-state { color: var(--dc-suburb); display: block; font-size: var(--dc-fs-suburb, 14px); font-weight: 700; line-height: 1.3; }

/* Template: rectangle (default) - wide card. */
.dcccs-centres--rectangle .dcccs-centre { border-radius: var(--dc-radius, 12px); }

/* Template: square - equal width and height. */
.dcccs-centres--square { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.dcccs-centres--square .dcccs-centre {
	align-items: center;
	aspect-ratio: 1 / 1;
	border-radius: var(--dc-radius, 12px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 14px;
}

/* Template: circle - round badge. */
.dcccs-centres--circle { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); justify-items: center; }
.dcccs-centres--circle .dcccs-centre {
	align-items: center;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 220px;
	padding: 28px 24px;
}
.dcccs-centres--circle .dcccs-c-title { font-size: calc(var(--dc-fs-name, 20px) * 0.9); }
.dcccs-centres--circle .dcccs-c-street { font-size: calc(var(--dc-fs-street, 16px) * 0.88); }
.dcccs-centres--circle .dcccs-c-state { font-size: calc(var(--dc-fs-suburb, 14px) * 0.86); }

/* ---------- Wizard panel ---------- */
.dcccs-wizard {
	background: var(--dc-panel);
	border-radius: var(--dc-radius, 20px);
	margin: 0 auto;
	border: var(--dc-pbw, 0) solid var(--dc-pb, #e2e8f0);
	box-shadow: var(--dc-rshadow, none);
	max-width: 900px;
	padding: 40px 44px 44px;
}
.dcccs-selected { margin: 0 0 20px; text-align: center; }
.dcccs-link { background: none; border: 0; color: var(--dc-primary); cursor: pointer; font: inherit; margin-left: 10px; padding: 0; text-decoration: underline; }
.dcccs-hp { height: 0; left: -9999px; overflow: hidden; position: absolute; width: 0; }

/* Step indicator (circles + connector) */
.dcccs-steps { display: flex; list-style: none; margin: 0 0 30px; padding: 0; }
.dcccs-steps li { color: #999; flex: 1; position: relative; text-align: center; }
.dcccs-steps li::before, .dcccs-steps li::after {
	background: #ccc;
	content: '';
	height: 3px;
	position: absolute;
	top: 24px;
	width: 50%;
	z-index: 0;
}
.dcccs-steps li::before { left: 0; }
.dcccs-steps li::after { right: 0; }
.dcccs-steps li:first-child::before, .dcccs-steps li:last-child::after { content: none; }
.dcccs-steps li.is-done::before, .dcccs-steps li.is-done::after,
.dcccs-steps li.is-current::before { background: var(--dc-primary); }
.dcccs-step-no {
	background: #fff;
	border: 3px solid #ccc;
	border-radius: 50%;
	display: block;
	font-size: 1.3rem;
	height: 50px;
	line-height: 44px;
	margin: 0 auto 8px;
	position: relative;
	width: 50px;
	z-index: 1;
}
.dcccs-steps li.is-current .dcccs-step-no { border-color: var(--dc-primary); color: var(--dc-primary); }
.dcccs-steps li.is-current { color: #2f3d4a; }
.dcccs-steps li.is-done .dcccs-step-no { background: var(--dc-primary); border-color: var(--dc-primary); color: #fff; }

/* Fields */
.dcccs-section { margin: 0 auto; max-width: 620px; }

.dcccs-section h4 { color: var(--dc-heading, inherit); font-size: var(--dc-hfs, 23px); margin: 0 0 20px; }
.dcccs-field { border: 0; margin: 0 0 26px; padding: 0; text-align: left; }
.dcccs-field label, .dcccs-field legend { display: block; font-size: var(--dc-label-fs, 17px); font-weight: 600; line-height: 23px; margin: 0 0 18px; padding: 0; }
.dcccs-field input[type=text], .dcccs-field input[type=email], .dcccs-field input[type=tel], .dcccs-field select {
	background: #fff;
	border: 1px solid var(--dc-ib, #ccc);
	border-radius: min(var(--dc-radius, 4px), 12px);
	font: inherit;
	height: var(--dc-input-h, 44px);
	padding: 6px 12px;
	width: 100%;
}
.dcccs-field input:focus, .dcccs-field select:focus { border-color: var(--dc-if, var(--dc-primary)); outline: 2px solid color-mix(in srgb, var(--dc-if, var(--dc-primary)) 30%, transparent); outline-offset: 0; }
.dcccs-field .has-error { border-color: #ff3111; }
.dcccs-error { color: #ff3111; display: block; font-size: 14px; margin-top: 4px; min-height: 0; }
.dcccs-form-error { margin: 0 0 10px; text-align: center; }

/* Sliders */
.dcccs-range { align-items: center; display: flex; gap: 14px; justify-content: center; margin-bottom: 14px; }
.dcccs-range em { font-size: 18px; font-style: normal; line-height: 20px; white-space: nowrap; }
.dcccs-range input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	flex: 1;
	margin: 0;
	min-width: 0;
}
.dcccs-range input[type=range]:focus { outline: none; }
.dcccs-range input[type=range]::-webkit-slider-runnable-track {
	background: #fff;
	border: 1px solid var(--dc-track);
	border-radius: 20px;
	cursor: pointer;
	height: 10px;
	width: 100%;
}
.dcccs-range input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	background: var(--dc-thumb);
	border: 5px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 2px var(--dc-track), 0 0 2px var(--dc-track);
	height: 30px;
	margin-top: -11px;
	width: 30px;
}
.dcccs-range input[type=range]::-moz-range-track { background: #fff; border: 1px solid var(--dc-track); border-radius: 20px; height: 10px; }
.dcccs-range input[type=range]::-moz-range-thumb { background: var(--dc-thumb); border: 5px solid #fff; border-radius: 50%; box-shadow: 0 0 2px var(--dc-track); height: 20px; width: 20px; }
.dcccs-range input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--dc-primary); }
.dcccs-pill {
	border: 2px solid var(--dc-primary);
	border-radius: 50px;
	display: block;
	font-size: 17px;
	margin: 0 auto;
	padding: 6px 0;
	text-align: center;
	width: 140px;
}
.dcccs-pill output { font: inherit; }

/* Radios */
.dcccs-radios { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 14px; }
.dcccs-radio { align-items: center; cursor: pointer; display: inline-flex; font-weight: 400 !important; gap: 8px; margin: 0 !important; }
.dcccs-radio input {
	-webkit-appearance: none;
	appearance: none;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 50%;
	cursor: pointer;
	flex: none;
	height: 18px;
	margin: 0;
	position: relative;
	width: 18px;
}
.dcccs-radio input::before { background: transparent; border-radius: 50%; content: ''; height: 10px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 10px; }
.dcccs-radio input:checked { border-color: var(--dc-track); }
.dcccs-radio input:checked::before { background: var(--dc-primary); }
.dcccs-radio input:focus-visible { outline: 2px solid var(--dc-primary); outline-offset: 2px; }

/* Buttons */
.dcccs-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }
.dcccs-btn {
	background: var(--dc-primary);
	border: 1px solid transparent;
	border-radius: var(--dc-btn-r, min(var(--dc-radius, 50px), 50px));
	color: var(--dc-btn-text, #fff);
	cursor: pointer;
	font: inherit;
	font-size: var(--dc-btn-fs, inherit);
	font-weight: var(--dc-btn-w, 700);
	padding: var(--dc-btn-pad, 8px 30px);
	text-decoration: none;
}
.dcccs-btn:hover, .dcccs-btn:focus-visible { background: var(--dc-btn-hover, #333); color: var(--dc-btn-text, #fff); }
.dcccs-btn[disabled] { cursor: wait; opacity: 0.7; }
.dcccs-btn-ghost { background: #fff; border-color: #d9d9d9; color: #54667a; }
.dcccs-btn-ghost:hover, .dcccs-btn-ghost:focus-visible { background: #f3f3f3; color: #54667a; }
.dcccs-btn-inline { display: inline-block; }

/* ---------- Result ---------- */
.dcccs-result {
	background: var(--dc-panel);
	border-radius: var(--dc-radius, 20px);
	margin: 0 auto;
	border: var(--dc-pbw, 0) solid var(--dc-pb, #e2e8f0);
	box-shadow: var(--dc-rshadow, none);
	max-width: 900px;
	padding: calc(var(--dc-rpad, 34px) * 1.18) var(--dc-rpad, 34px) calc(var(--dc-rpad, 34px) * 0.7);
}
.dcccs-result-title { color: var(--dc-heading, inherit); margin: 0 0 6px; }
.dcccs-result-centre { color: #666; margin: 0 0 20px; }
.dcccs-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.dcccs-tab {
	background: var(--dc-primary);
	border: 0;
	border-radius: var(--dc-btn-r, 50px);
	color: var(--dc-tab-text, #fff);
	cursor: pointer;
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	padding: 12px 20px;
	transition: all 0.3s ease;
}
.dcccs-tab.is-active { background: var(--dc-accent); }
.dcccs-row { align-items: baseline; display: flex; font-size: var(--dc-rfs, inherit); font-weight: 700; gap: 16px; justify-content: space-between; margin-bottom: 16px; }
.dcccs-row-v { color: var(--dc-rv, inherit); white-space: nowrap; }
.dcccs-note { margin: 28px 0 16px; }
.dcccs-result-empty { text-align: center; }
.dcccs-notice { background: #fff8e5; border-left: 4px solid #dba617; padding: 10px 14px; }

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
	.dcccs-wizard { padding: 20px; }
	.dcccs-result { padding: 24px 18px 12px; }
	.dcccs-range em { font-size: 12px; }
	.dcccs-field label, .dcccs-field legend { font-size: 15px; }
	.dcccs-steps { margin-bottom: 20px; }
	.dcccs-step-label { font-size: 13px; }
	.dcccs-row { flex-direction: column; gap: 2px; }
}
@media (max-width: 480px) {
	.dcccs-step-no { height: 40px; line-height: 34px; width: 40px; }
	.dcccs-steps li::before, .dcccs-steps li::after { top: 19px; }
	.dcccs-actions { flex-wrap: wrap; }
}

/* Multiple children */
.dcccs-child { margin-bottom: 20px; }
.dcccs-child + .dcccs-child { border-top: 1px solid rgba(0, 0, 0, .12); padding-top: 18px; }
.dcccs-child-title { color: var(--dc-primary); font-size: 1.05em; margin: 0 0 10px; }
.dcccs-breakdown { border-top: 1px solid rgba(0, 0, 0, .15); margin-top: 8px; padding-top: 14px; }
.dcccs-breakdown-title { color: var(--dc-heading, inherit); font-weight: 700; margin: 0 0 8px; }
.dcccs-child-res { display: flex; flex-direction: column; font-size: .92em; gap: 2px; margin-bottom: 10px; }
.dcccs-child-res-h { font-weight: 700; }

/* Optional centre image on the card */
.dcccs-c-img { display: block; margin: calc(var(--dc-pad, 24px) * -1) calc(var(--dc-pad, 24px) * -1) 14px; overflow: hidden; }
.dcccs-c-img img { display: block; height: var(--dc-img-h, 140px); max-width: 100%; object-fit: var(--dc-img-fit, cover); width: 100%; }
.dcccs-centres--rectangle .dcccs-centre { overflow: hidden; }
.dcccs-centres--rectangle .dcccs-c-img { border-radius: 0; }
.dcccs-centres--square .dcccs-centre { overflow: hidden; }
.dcccs-centres--square .dcccs-c-img { flex: 0 0 auto; margin: -14px -14px 8px; width: calc(100% + 28px); }
.dcccs-centres--square .dcccs-c-img img { height: min(var(--dc-img-h, 140px), 45%); max-height: 90px; }
.dcccs-centres--circle .dcccs-c-img { border-radius: 50%; height: 56px; margin: 0 0 6px; width: 56px; }
.dcccs-centres--circle .dcccs-c-img img { height: 100%; object-fit: cover; }

/* Card size and alignment (Settings > Template) */
.dcccs-centre { text-align: var(--dc-card-align, center); }
.dcccs-centres--square .dcccs-centre, .dcccs-centres--circle .dcccs-centre { align-items: var(--dc-card-items, center); }
.dcccs-centres.has-cw { grid-template-columns: repeat(auto-fill, var(--dc-card-w)); justify-content: var(--dc-card-justify, center); }
.dcccs-centres.has-cw .dcccs-centre { max-width: none; width: var(--dc-card-w); }
.dcccs-centres.has-cw.dcccs-centres--circle .dcccs-centre { height: var(--dc-card-w); }
.dcccs-centres.has-ch .dcccs-centre { aspect-ratio: auto; height: var(--dc-card-h); }
.dcccs-centres.has-ch.dcccs-centres--rectangle .dcccs-centre { align-items: var(--dc-card-items, center); display: flex; flex-direction: column; justify-content: center; }

/* Extra card lines, cards per row */
.dcccs-c-phone { color: var(--dc-text); display: block; font-size: 13px; line-height: 1.3; margin-top: 2px; }
.dcccs-c-btn { background: var(--dc-primary); border-radius: var(--dc-radius, 8px); color: #fff; display: inline-block; font-size: 14px; font-weight: 600; margin-top: 12px; padding: 8px 20px; }
.dcccs-centres.has-cols { grid-template-columns: repeat(var(--dc-cols), minmax(0, 1fr)); }
@media (max-width: 640px) {
	.dcccs-centres.has-colsm { grid-template-columns: repeat(var(--dc-cols-m, 1), minmax(0, 1fr)); }
}

/* ---------- Theme protection ----------
   Many themes (e.g. Hello Elementor) style every <button> and [type=button] with their own border,
   colour and a hover / focus background. These rules use a higher specificity so the calculator's
   buttons and centre cards always keep the colours chosen in Settings > Template. */
.dcccs .dcccs-centre,
.dcccs .dcccs-centre:focus,
.dcccs .dcccs-centre:active {
	background: var(--dc-card, #fff);
	border: var(--dc-bw, 1px) solid var(--dc-cb, #e2e8f0);
	color: var(--dc-text);
	font-size: inherit;
	font-weight: inherit;
	padding: var(--dc-pad, 24px);
	text-align: var(--dc-card-align, center);
	text-transform: none;
	white-space: normal;
}
.dcccs .dcccs-centres--square .dcccs-centre { padding: 14px; }
.dcccs .dcccs-centres--circle .dcccs-centre { padding: 28px 24px; }
.dcccs .dcccs-centre:hover,
.dcccs .dcccs-centre:focus-visible {
	background: var(--dc-hover-bg, var(--dc-card, #fff));
	border-color: var(--dc-hover, var(--dc-primary));
	color: var(--dc-text);
}
.dcccs .dcccs-btn, .dcccs .dcccs-btn:focus, .dcccs .dcccs-btn:active {
	background: var(--dc-primary);
	border: 1px solid transparent;
	color: var(--dc-btn-text, #fff);
	text-transform: none;
}
.dcccs .dcccs-btn:hover { background: var(--dc-btn-hover, #333); color: var(--dc-btn-text, #fff); }
.dcccs .dcccs-btn-ghost, .dcccs .dcccs-btn-ghost:focus, .dcccs .dcccs-btn-ghost:active { background: #fff; border-color: #d9d9d9; color: #54667a; }
.dcccs .dcccs-btn-ghost:hover { background: #f3f3f3; border-color: #d9d9d9; color: #54667a; }
.dcccs .dcccs-tab, .dcccs .dcccs-tab:hover, .dcccs .dcccs-tab:focus, .dcccs .dcccs-tab:active {
	background: var(--dc-primary);
	border: 0;
	color: var(--dc-tab-text, #fff);
	text-transform: none;
}
.dcccs .dcccs-tab.is-active, .dcccs .dcccs-tab.is-active:hover, .dcccs .dcccs-tab.is-active:focus { background: var(--dc-accent); }
.dcccs .dcccs-link, .dcccs .dcccs-link:hover, .dcccs .dcccs-link:focus { background: none; border: 0; color: var(--dc-primary); padding: 0; }

/* Radio buttons: keep the gap between the circle and its label (".dcccs-field label" would otherwise turn the label into a block). */
.dcccs .dcccs-field .dcccs-radio { align-items: center; display: inline-flex; font-size: var(--dc-label-fs, 17px); gap: 10px; line-height: 1.3; padding: 0; }
.dcccs .dcccs-field .dcccs-radio input[type=radio] { flex: none; margin: 0; }
.dcccs .dcccs-radios { column-gap: 28px; }