/*
 * PKH Tuition Calculator — Base Stylesheet
 * Version: 1.0.0
 *
 * ALL color, font, radius, and shadow values reference CSS custom properties.
 * Override these in your school-specific theme file — zero hard-coded values here.
 *
 * Default values are defined in :root below as a fallback only.
 * Production: enqueue your school theme CSS AFTER this file to override.
 */

/* ============================================================
   DEFAULT CUSTOM PROPERTIES (fallback / sensible defaults)
   Override in your school theme file.
   ============================================================ */

.tc-root {
	/* Brand */
	--tc-color-primary:          #333333;
	--tc-color-primary-text:     #ffffff;
	--tc-color-secondary:        #555555;
	--tc-color-secondary-text:   #ffffff;

	/* Backgrounds */
	--tc-bg-outer:               #333333;
	--tc-bg-card:                #ffffff;
	--tc-bg-panel:               #f5f5f5;
	--tc-bg-input:               #111111;
	--tc-bg-stat-card:           #ffffff;
	--tc-bg-total-banner:        var(--tc-color-primary);

	/* Text */
	--tc-text-heading:           #111111;
	--tc-text-body:              #111111;
	--tc-text-muted:             #555555;
	--tc-text-input:             #ffffff;
	--tc-text-stat-label:        #111111;
	--tc-text-stat-value:        var(--tc-color-primary);
	--tc-text-total-label:       #ffffff;
	--tc-text-total-value:       #ffffff;

	/* Typography */
	--tc-font-heading:           'Open Sans', sans-serif;
	--tc-font-body:              'Open Sans', sans-serif;
	--tc-font-stats:             'Open Sans', sans-serif;
	--tc-font-cta:               'Open Sans', sans-serif;

	/* Sizing */
	--tc-font-size-heading:      2.25rem;
	--tc-font-size-subheading:   1.25rem;
	--tc-font-size-body:         1rem;
	--tc-font-size-small:        0.75rem;
	--tc-font-size-stat:         2.25rem;
	--tc-font-size-total:        2.25rem;

	/* Border radius */
	--tc-radius-card:            12px;
	--tc-radius-panel:           4px;
	--tc-radius-input:           4px;
	--tc-radius-stat:            6px;
	--tc-radius-button:          4px;
	--tc-radius-slider:          9999px;

	/* Shadows */
	--tc-shadow-card:            0px 12px 8px rgba(16,24,40,0.08), 0px 4px 3px rgba(16,24,40,0.03);
	--tc-shadow-stat:            0px 1px 1.5px rgba(0,0,0,0.1), 0px 1px 1px rgba(0,0,0,0.1);
	--tc-shadow-total:           0px 4px 3px rgba(0,0,0,0.1);
	--tc-shadow-panel:           0px 4px 2px rgba(0,0,0,0.15);

	/* Spacing */
	--tc-padding-card:           50px;
	--tc-padding-panel:          40px;
	--tc-gap:                    24px;

	/* Progress bar */
	--tc-progress-track:         rgba(120,120,128,0.16);
	--tc-progress-fill:          var(--tc-color-secondary);
	--tc-progress-height:        4px;
	--tc-progress-radius:        9999px;

	/* Slider */
	--tc-slider-track-bg:        #e0e0e0;
	--tc-slider-fill:            var(--tc-color-primary);
	--tc-slider-thumb:           var(--tc-color-primary);
	--tc-slider-height:          6px;
	--tc-slider-thumb-size:      20px;

	/* Heading treatment */
	--tc-heading-weight:         800;
	--tc-heading-transform:      uppercase;
	--tc-heading-tracking:       -0.02em;
	--tc-heading-line-height:    1.2;
	--tc-step-title-font:        var(--tc-font-heading);
	--tc-step-title-weight:      700;
	--tc-step-title-transform:   uppercase;
	--tc-step-title-tracking:    0.04em;
	--tc-label-font:             var(--tc-font-body);
	--tc-label-size:             0.875rem;
	--tc-label-weight:           700;
	--tc-label-transform:        uppercase;

	/* Stat cards + total banner */
	--tc-stat-label-transform:   uppercase;
	--tc-stat-value-weight:      800;
	--tc-total-label-font:       var(--tc-font-body);
	--tc-total-label-size:       1rem;
	--tc-total-label-weight:     800;
	--tc-total-label-transform:  uppercase;
	--tc-total-value-weight:     700;
	--tc-total-padding:          20px 24px;

	/* Phone sizes (≤768px) */
	--tc-font-size-heading-sm:   1.75rem;
	--tc-font-size-subheading-sm: 1.125rem;
	--tc-label-size-sm:          0.875rem;
	--tc-font-size-stat-sm:      1.5rem;
	--tc-font-size-total-sm:     1.75rem;
	--tc-total-label-size-sm:    0.875rem;
	--tc-total-padding-sm:       16px 18px;

	/* Right panel: inset > 0 floats it inside the card as its own rounded panel */
	--tc-panel-inset:            0px;
	--tc-radius-right:           0px;

	/* Sub-panels (single-panel slider block) */
	--tc-bg-subpanel:            #fafafa;
	--tc-border-subpanel:        #efefef;

	/* Choice blocks (residency toggle + stepped-cards options) */
	--tc-choice-bg:              #fafafa;
	--tc-choice-border:          #e0e0e0;
	--tc-choice-text:            var(--tc-text-body);
	--tc-choice-hover-bg:        #ffffff;
	--tc-choice-hover-border:    var(--tc-color-primary);
	--tc-choice-active-bg:       var(--tc-color-primary);
	--tc-choice-active-text:     var(--tc-color-primary-text);
	--tc-choice-border-width:    2px;

	/* Buttons */
	--tc-btn-next-hover-bg:      var(--tc-color-secondary);
	--tc-btn-next-hover-text:    var(--tc-color-secondary-text);

	/* Credits number input */
	--tc-input-border:           var(--tc-color-primary);
	--tc-input-border-width:     3px;
	--tc-input-font-size:        1.1rem;

	/* Background image */
	--tc-bg-image:               none;
	--tc-bg-image-size:          cover;
	--tc-bg-image-position:      center center;
}

/* ============================================================
   RESET & BASE
   ============================================================ */

.tc-root *,
.tc-root *::before,
.tc-root *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.tc-root {
	font-family: var(--tc-font-body);
	font-size: var(--tc-font-size-body);
	line-height: 1.5;
	color: var(--tc-text-body);
	width: 100%;
	/* Sit above section decorations such as a theme's ::before pattern overlay */
	position: relative;
	z-index: 2;
}

/* ============================================================
   OUTER WRAPPER (the colored / image section background)
   ============================================================ */

.tc-root::before {
	content: '';
	display: none; /* outer background handled by theme section wrapper, not widget */
}

/* ============================================================
   CARD
   ============================================================ */

.tc-panel,
.tc-wizard {
	background: var(--tc-bg-card);
	border-radius: var(--tc-radius-card);
	box-shadow: var(--tc-shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: row;
	min-height: 420px;
}

/* ============================================================
   LEFT PANEL
   ============================================================ */

.tc-left {
	flex: 0 0 38%;
	padding: var(--tc-padding-card);
	display: flex;
	flex-direction: column;
	gap: 20px;
	background: var(--tc-bg-card);
}

.tc-left__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.tc-heading {
	font-family: var(--tc-font-heading);
	font-size: var(--tc-font-size-heading);
	font-weight: var(--tc-heading-weight);
	line-height: var(--tc-heading-line-height);
	color: var(--tc-text-heading);
	text-transform: var(--tc-heading-transform);
	letter-spacing: var(--tc-heading-tracking);
}

.tc-description {
	font-family: var(--tc-font-body);
	font-size: var(--tc-font-size-body);
	color: var(--tc-text-body);
	line-height: 1.6;
	margin: 0;
}

.tc-description + .tc-description {
	margin-top: 0.75em;
}

.tc-program-name {
	font-family: var(--tc-font-body);
	font-size: 0.875rem;
	color: var(--tc-text-muted);
}

/* ============================================================
   RIGHT PANEL
   ============================================================ */

.tc-right {
	flex: 1 1 62%;
	background: var(--tc-bg-panel);
	box-shadow: var(--tc-shadow-panel);
	padding: var(--tc-padding-panel);
	margin: var(--tc-panel-inset);
	border-radius: var(--tc-radius-right);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */

.tc-progress {
	width: 100%;
	height: var(--tc-progress-height);
	margin-bottom: 8px;
}

.tc-progress__track {
	background: var(--tc-progress-track);
	border-radius: var(--tc-progress-radius);
	height: var(--tc-progress-height);
	width: 100%;
	overflow: hidden;
}

.tc-progress__fill {
	background: var(--tc-progress-fill);
	border-radius: var(--tc-progress-radius);
	height: 100%;
	width: 0%;
	transition: width 0.3s ease;
}

/* ============================================================
   STEP LAYOUT
   ============================================================ */

.tc-step {
	display: flex;
	flex-direction: column;
	gap: var(--tc-gap);
	height: 100%;
}

.tc-step__title {
	font-family: var(--tc-step-title-font);
	font-size: var(--tc-font-size-subheading);
	font-weight: var(--tc-step-title-weight);
	color: var(--tc-text-heading);
	text-transform: var(--tc-step-title-transform);
	letter-spacing: var(--tc-step-title-tracking);
	line-height: 1.2;
}

.tc-step__subtitle {
	font-family: var(--tc-font-body);
	font-size: var(--tc-font-size-body);
	color: var(--tc-text-body);
	margin-top: -12px;
}

.tc-step__nav {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: auto;
}

/* ============================================================
   LABELS
   ============================================================ */

.tc-label {
	font-family: var(--tc-label-font);
	font-size: var(--tc-label-size);
	font-weight: var(--tc-label-weight);
	color: var(--tc-text-body);
	text-transform: var(--tc-label-transform);
	letter-spacing: 0.04em;
	display: block;
	margin-bottom: 6px;
}

/* ============================================================
   SELECT / DROPDOWN
   ============================================================ */

.tc-select-wrap {
	position: relative;
	width: 100%;
}

.tc-select-wrap::after {
	content: '▾';
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--tc-text-input);
	pointer-events: none;
	font-size: 1.1rem;
}

.tc-select {
	width: 100%;
	height: auto; /* themes like Blocksy fix form-field height, which clips the padded text */
	line-height: 1.5;
	padding: 12px 44px 12px 16px;
	background: var(--tc-bg-input);
	color: var(--tc-text-input);
	border: 1px solid var(--tc-bg-input);
	border-radius: var(--tc-radius-input);
	font-family: var(--tc-font-body);
	font-size: var(--tc-font-size-body);
	font-weight: 700;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	outline: none;
	transition: border-color 0.2s;
}

.tc-select:focus {
	border-color: var(--tc-color-primary);
	box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}

/* ============================================================
   CTA BUTTONS
   ============================================================ */

.tc-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	font-family: var(--tc-font-cta);
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	border: none;
	border-radius: var(--tc-radius-button);
	transition: opacity 0.15s, transform 0.1s;
	line-height: 1;
}

.tc-btn:active {
	transform: scale(0.98);
}

.tc-btn--next {
	background: var(--tc-color-secondary);
	color: var(--tc-color-secondary-text);
}

.tc-btn--back {
	background: transparent;
	color: var(--tc-text-body);
	padding-left: 0;
}

.tc-btn--next:hover {
	background: var(--tc-btn-next-hover-bg);
	color: var(--tc-btn-next-hover-text);
	opacity: 0.92;
}

/* ============================================================
   RESIDENCY TOGGLE (single-panel)
   ============================================================ */

.tc-residency {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
}

.tc-residency-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 18px;
	border: var(--tc-choice-border-width) solid var(--tc-choice-border);
	border-radius: var(--tc-radius-input);
	background: var(--tc-choice-bg);
	color: var(--tc-choice-text);
	cursor: pointer;
	font-family: var(--tc-font-body);
	transition: border-color 0.15s, background 0.15s;
}

.tc-residency-btn:hover {
	border-color: var(--tc-choice-hover-border);
}

.tc-residency-btn--active,
.tc-residency-btn--active:hover {
	background: var(--tc-choice-active-bg);
	border-color: var(--tc-choice-active-bg);
	color: var(--tc-choice-active-text);
}

.tc-residency-btn__label {
	font-size: 0.875rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tc-residency-btn__rate {
	font-size: 1rem;
	font-weight: 700;
}

.tc-residency-btn .tc-residency-btn__label,
.tc-residency-btn .tc-residency-btn__rate {
	color: inherit;
}

/* ============================================================
   CHOICE BLOCKS (stepped-cards layout)
   Same block style as the residency toggle; clicking one advances.
   ============================================================ */

.tc-choices {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tc-choice {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 14px 18px;
	border: var(--tc-choice-border-width) solid var(--tc-choice-border);
	border-radius: var(--tc-radius-input);
	background: var(--tc-choice-bg);
	color: var(--tc-choice-text);
	font-family: var(--tc-font-body);
	text-align: left;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.tc-choice:hover {
	border-color: var(--tc-choice-hover-border);
	background: var(--tc-choice-hover-bg);
}

.tc-choice:focus-visible,
.tc-residency-btn:focus-visible {
	outline: 3px solid var(--tc-choice-hover-border);
	outline-offset: 2px;
}

.tc-choice--active,
.tc-choice--active:hover {
	background: var(--tc-choice-active-bg);
	border-color: var(--tc-choice-active-bg);
	color: var(--tc-choice-active-text);
}

.tc-choice__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.tc-choice__label {
	font-size: 1rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tc-root .tc-choice__meta {
	font-family: var(--tc-font-body); /* themes often restyle <button> text; keep the detail line readable */
	font-size: 0.875rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.8;
}

.tc-choice__aside {
	font-size: 1rem;
	font-weight: 700;
	white-space: nowrap;
}

.tc-choice__arrow {
	font-size: 1.125rem;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.15s, transform 0.15s;
}

.tc-choice:hover .tc-choice__arrow,
.tc-choice:focus-visible .tc-choice__arrow,
.tc-choice--active .tc-choice__arrow {
	opacity: 1;
	transform: none;
}

/* ============================================================
   SLIDER
   ============================================================ */

.tc-slider-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.tc-slider-label {
	font-family: var(--tc-font-body);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--tc-text-body);
	flex: 1;
}

.tc-slider-input-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.tc-root .tc-slider-input-wrap input.tc-credits-input { /* outranks themes' input[type] rules */
	width: 80px;
	height: auto;
	padding: 8px 10px;
	font-family: var(--tc-font-body);
	font-size: var(--tc-input-font-size);
	font-weight: 800;
	text-align: center;
	border: var(--tc-input-border-width) solid var(--tc-input-border);
	border-radius: var(--tc-radius-input);
	background: white;
	color: var(--tc-text-body);
	outline: none;
	-moz-appearance: textfield;
}

.tc-credits-input::-webkit-outer-spin-button,
.tc-credits-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.tc-credits-of {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--tc-text-muted);
	white-space: nowrap;
}

.tc-slider-wrap {
	padding: 4px 0;
}

.tc-slider {
	-webkit-appearance: none;
	width: 100%;
	height: var(--tc-slider-height);
	border-radius: var(--tc-progress-radius);
	background: var(--tc-slider-track-bg);
	outline: none;
	cursor: pointer;
}

.tc-slider::-webkit-slider-runnable-track {
	height: var(--tc-slider-height);
	border-radius: var(--tc-progress-radius);
	background: linear-gradient(
		to right,
		var(--tc-slider-fill) 0%,
		var(--tc-slider-fill) var(--tc-slider-pct, 0%),
		var(--tc-slider-track-bg) var(--tc-slider-pct, 0%),
		var(--tc-slider-track-bg) 100%
	);
}

.tc-slider::-moz-range-track {
	height: var(--tc-slider-height);
	border-radius: var(--tc-progress-radius);
	background: var(--tc-slider-track-bg);
}

.tc-slider::-moz-range-progress {
	height: var(--tc-slider-height);
	border-radius: var(--tc-progress-radius);
	background: var(--tc-slider-fill);
}

.tc-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: var(--tc-slider-thumb-size);
	height: var(--tc-slider-thumb-size);
	border-radius: 50%;
	background: var(--tc-slider-thumb);
	cursor: pointer;
	border: 2px solid var(--tc-slider-thumb);
	margin-top: calc( ( var(--tc-slider-height) - var(--tc-slider-thumb-size) ) / 2 );
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.tc-slider::-moz-range-thumb {
	width: var(--tc-slider-thumb-size);
	height: var(--tc-slider-thumb-size);
	border-radius: 50%;
	background: var(--tc-slider-thumb);
	cursor: pointer;
	border: 2px solid var(--tc-slider-thumb);
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.tc-slider-hint {
	font-size: 0.7rem;
	color: var(--tc-text-muted);
	margin-top: 2px;
}

/* ============================================================
   STAT CARDS
   ============================================================ */

.tc-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.tc-stat {
	background: var(--tc-bg-stat-card);
	border-radius: var(--tc-radius-stat);
	box-shadow: var(--tc-shadow-stat);
	padding: 16px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.tc-stat__label {
	font-family: var(--tc-font-body);
	font-size: var(--tc-font-size-small);
	font-weight: 700;
	color: var(--tc-text-stat-label);
	text-align: center;
	text-transform: var(--tc-stat-label-transform);
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.tc-stat__value {
	font-family: var(--tc-font-stats);
	font-size: var(--tc-font-size-stat);
	font-weight: var(--tc-stat-value-weight);
	color: var(--tc-text-stat-value);
	text-align: center;
	line-height: 1;
	letter-spacing: -0.02em;
}

/* ============================================================
   TOTAL COST BANNER
   ============================================================ */

.tc-total {
	background: var(--tc-bg-total-banner);
	border-radius: var(--tc-radius-stat);
	box-shadow: var(--tc-shadow-total);
	padding: var(--tc-total-padding);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.tc-total__label {
	font-family: var(--tc-total-label-font);
	font-size: var(--tc-total-label-size);
	font-weight: var(--tc-total-label-weight);
	color: var(--tc-text-total-label);
	text-transform: var(--tc-total-label-transform);
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.tc-total__value {
	font-family: var(--tc-font-stats);
	font-size: var(--tc-font-size-total);
	font-weight: var(--tc-total-value-weight);
	color: var(--tc-text-total-value);
	text-align: right;
	letter-spacing: -0.02em;
	line-height: 1;
}

/* ============================================================
   DISCLAIMER
   ============================================================ */

.tc-disclaimer {
	font-size: 0.7rem;
	color: var(--tc-text-muted);
	line-height: 1.5;
	margin-top: auto;
}

/* ============================================================
   SINGLE-PANEL LAYOUT SPECIFICS
   ============================================================ */

.tc-root--single-panel .tc-panel {
	align-items: stretch;
}

.tc-root--single-panel .tc-right {
	gap: 20px;
}

.tc-root--single-panel .tc-slider-block {
	background: var(--tc-bg-subpanel);
	border: 1px solid var(--tc-border-subpanel);
	border-radius: var(--tc-radius-stat);
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tc-program-selector {
	margin-top: 4px;
}

.tc-single-rate {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--tc-text-body);
}

/* ============================================================
   CREDITS NOTE (all layouts)
   ============================================================ */

.tc-credits-note {
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.4;
	color: var(--tc-text-muted);
}

.tc-lead {
	font-weight: inherit;
}

/* ============================================================
   SPLIT PANEL LAYOUT
   Heading + intro across the card; questions left, breakdown right.
   ============================================================ */

.tc-split {
	background: var(--tc-bg-card);
	border-radius: var(--tc-radius-card);
	box-shadow: var(--tc-shadow-card);
	padding: var(--tc-padding-card);
}

.tc-split__head {
	margin-bottom: 32px;
}

.tc-root .tc-split__head .tc-heading {
	margin-bottom: 16px !important;
}

.tc-split__head .tc-lead {
	font-weight: 700;
}

.tc-split__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
	align-items: stretch;
}

.tc-split__questions {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
}

.tc-question .tc-label {
	margin-bottom: 14px;
}

.tc-root--split-panel .tc-select-wrap::after {
	content: '';
	right: 16px;
	width: 20px;
	height: 12px;
	background: var(--tc-select-arrow-color, var(--tc-text-input));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M2 2l8 8 8-8' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M2 2l8 8 8-8' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tc-root--split-panel .tc-select {
	padding-right: 52px;
}

.tc-root--split-panel .tc-residency {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 0;
}

.tc-root--split-panel .tc-residency-btn {
	padding: 10px 12px;
	gap: 2px 8px;
	flex-wrap: wrap;
}

.tc-root--split-panel .tc-residency-btn__label {
	font-size: 0.9375rem;
	letter-spacing: 0;
	white-space: nowrap;
}

.tc-root--split-panel .tc-residency-btn__rate {
	white-space: nowrap;
}

.tc-root--split-panel .tc-residency-btn__rate {
	font-size: 0.875rem;
	font-weight: 400;
}

.tc-root--split-panel .tc-slider-hint {
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--tc-text-body);
	margin: -6px 0 6px;
}

.tc-root--split-panel .tc-credits-note {
	margin-bottom: 12px;
}

.tc-split__credits {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tc-root .tc-split__credits input.tc-credits-input { /* outranks themes' input[type] rules */
	flex: 0 0 auto;
	width: 64px;
	height: auto;
	padding: 6px 4px;
	font-family: var(--tc-font-body);
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	border: var(--tc-input-border-width) solid var(--tc-input-border);
	border-radius: var(--tc-radius-input);
	background: var(--tc-bg-card);
	color: var(--tc-text-body);
	-moz-appearance: textfield;
}

.tc-split__credits .tc-slider {
	flex: 1 1 auto;
	min-width: 0;
	--tc-slider-height: 14px;
	--tc-slider-thumb-size: 14px;
	--tc-progress-radius: 999px;
	--tc-slider-track-bg: var(--tc-split-track, var(--tc-bg-panel));
}

.tc-split__credits .tc-slider::-webkit-slider-thumb {
	background: var(--tc-split-thumb, var(--tc-slider-thumb));
	border: 2px solid var(--tc-slider-fill);
	box-shadow: none;
}

.tc-split__credits .tc-slider::-moz-range-thumb {
	background: var(--tc-split-thumb, var(--tc-slider-thumb));
	border: 2px solid var(--tc-slider-fill);
	box-shadow: none;
}

.tc-split__credits .tc-credits-of {
	font-size: 1rem;
	font-weight: 700;
	color: var(--tc-text-body);
}

.tc-split__results {
	background: var(--tc-bg-panel);
	border-radius: var(--tc-radius-panel);
	padding: 28px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.tc-root .tc-split__results-title {
	margin: 0 !important;
	font-family: var(--tc-font-heading) !important;
	font-size: var(--tc-font-size-breakdown-title, 2rem) !important;
	font-weight: var(--tc-heading-weight) !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	color: var(--tc-text-heading) !important;
	text-align: center;
}

/* Labels sit on a shared baseline so the values line up when one label wraps */
.tc-split__results .tc-stat {
	display: grid;
	grid-template-rows: 1fr auto;
	justify-items: center;
}

.tc-split__results .tc-stat__label {
	align-self: end;
}

.tc-split__results .tc-total__label {
	white-space: normal;
}

.tc-split__results .tc-disclaimer {
	font-size: 0.75rem;
	font-style: italic;
	text-align: center;
	color: var(--tc-text-body);
	margin-top: 0;
}

.tc-split__results .tc-disclaimer .tc-lead {
	font-weight: 700;
}

@media ( max-width: 1023px ) {
	.tc-split__cols {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media ( max-width: 768px ) {
	.tc-split {
		padding: 28px 20px 20px;
		border-radius: var(--tc-radius-panel);
	}

	.tc-split__head {
		margin-bottom: 24px;
	}

	.tc-split__questions {
		gap: 28px;
	}

	.tc-split__results {
		padding: 24px 14px 16px;
		gap: 16px;
	}

	.tc-root .tc-split__results-title {
		font-size: var(--tc-font-size-breakdown-title-sm, 1.625rem) !important;
	}
}

@media ( max-width: 480px ) {
	.tc-root--split-panel .tc-residency-btn {
		flex-direction: column;
		align-items: flex-start;
	}

	.tc-split__credits {
		gap: 10px;
	}
}

/* ============================================================
   THEME ISOLATION
   Themes often force paragraph line-height (e.g. p { line-height: 25px !important }),
   which spreads out the widget's fine print.
   ============================================================ */

.tc-root .tc-slider-hint,
.tc-root .tc-credits-note,
.tc-root .tc-disclaimer {
	line-height: 1.5 !important;
}

/* ============================================================
   THEME ISOLATION (headings)
   Many WP themes style h1–h3 with !important (e.g. a display font at
   60px+). Widget headings must follow the --tc-* tokens instead.
   ============================================================ */

.tc-root .tc-heading,
.tc-root .tc-step__title {
	margin: 0 !important;
	color: var(--tc-text-heading) !important;
}

.tc-root .tc-heading {
	font-family: var(--tc-font-heading) !important;
	font-size: var(--tc-font-size-heading) !important;
	font-weight: var(--tc-heading-weight) !important;
	line-height: var(--tc-heading-line-height) !important;
	text-transform: var(--tc-heading-transform) !important;
	letter-spacing: var(--tc-heading-tracking) !important;
}

.tc-root .tc-step__title {
	font-family: var(--tc-step-title-font) !important;
	font-size: var(--tc-font-size-subheading) !important;
	font-weight: var(--tc-step-title-weight) !important;
	line-height: 1.2 !important;
	text-transform: var(--tc-step-title-transform) !important;
	letter-spacing: var(--tc-step-title-tracking) !important;
}

.tc-root .tc-label {
	font-family: var(--tc-label-font) !important;
	font-size: var(--tc-label-size) !important;
	font-weight: var(--tc-label-weight) !important;
	line-height: 1.2 !important;
}

.tc-root .tc-choice__label,
.tc-root .tc-choice__aside,
.tc-root .tc-residency-btn__label,
.tc-root .tc-residency-btn__rate {
	font-family: var(--tc-font-body);
}

/* ============================================================
   ERROR STATE
   ============================================================ */

.tc-error {
	padding: 24px;
	background: #fff3f3;
	border: 1px solid #fcc;
	border-radius: var(--tc-radius-input);
	color: #c00;
	font-size: 0.875rem;
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media ( max-width: 768px ) {
	.tc-panel,
	.tc-wizard {
		flex-direction: column;
		border-radius: var(--tc-radius-panel);
	}

	.tc-left {
		flex: none;
		padding: 28px 24px 20px;
	}

	.tc-right {
		flex: none;
		padding: 24px;
		gap: 16px;
		margin: 0 min( var(--tc-panel-inset), 12px ) min( var(--tc-panel-inset), 12px );
	}

	/* In wizard mode, collapse the left panel on steps 2+ to give more room */
	.tc-wizard[data-step="2"] .tc-left,
	.tc-wizard[data-step="3"] .tc-left {
		padding-bottom: 12px;
	}

	.tc-root .tc-heading {
		font-size: var(--tc-font-size-heading-sm) !important;
	}

	.tc-root .tc-step__title {
		font-size: var(--tc-font-size-subheading-sm) !important;
	}

	.tc-root .tc-label {
		font-size: var(--tc-label-size-sm) !important;
	}

	.tc-stats {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}

	.tc-stat {
		padding: 12px 6px;
	}

	.tc-stat__value {
		font-size: var(--tc-font-size-stat-sm);
	}

	.tc-total {
		padding: var(--tc-total-padding-sm);
	}

	.tc-total__value {
		font-size: var(--tc-font-size-total-sm);
	}

	.tc-total__label {
		font-size: var(--tc-total-label-size-sm);
	}

	.tc-slider-row {
		flex-wrap: wrap;
		gap: 8px;
	}

	.tc-slider-label {
		flex: 1 1 100%;
	}
}

@media ( max-width: 400px ) {
	.tc-stats {
		grid-template-columns: 1fr;
	}

	.tc-total {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}