/* ===========================================================================
 * WorkLifePeople Course Estimator — frontend styles
 *
 * All visual tokens come from the CSS variables emitted by WLP_Style_Renderer
 * and scoped to the instance id. Fallbacks here just protect against the
 * theme stripping inline styles.
 * ========================================================================= */

.wlp-estimator,
.wlp-estimator * { box-sizing: border-box; }

.wlp-estimator {
	font-family: var(--wlp-font-family, system-ui, sans-serif);
	font-size: var(--wlp-font-size, 16px);
	font-weight: var(--wlp-body-weight, 400);
	color: var(--wlp-text, #1a1f36);
	background: var(--wlp-bg, #f7f8fb);
	padding: var(--wlp-section-gap, 28px) 0;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.wlp-estimator-shell {
	max-width: 720px;
	margin: 0 auto;
	background: var(--wlp-card-bg, #fff);
	border-radius: var(--wlp-radius-card, 16px);
	box-shadow: var(--wlp-card-shadow, 0 10px 30px rgba(20,30,60,0.08));
	padding: var(--wlp-card-padding, 32px);
}

@media (max-width: 640px) {
	.wlp-estimator-shell {
		padding: var(--wlp-mobile-padding, 20px);
		border-radius: 0;
	}
	.wlp-estimator { padding: 0; }
}

.wlp-estimator-header { margin-bottom: var(--wlp-section-gap, 28px); }
.wlp-estimator-title  { margin: 0 0 8px; font-weight: var(--wlp-heading-weight, 600); font-size: 1.5em; line-height: 1.25; color: inherit; }
.wlp-estimator-subtitle { margin: 0; color: var(--wlp-muted, #6b7280); }

/* --------------------------------------------------------------------------
 * Progress bar
 * ------------------------------------------------------------------------ */
.wlp-estimator-progress {
	width: 100%; height: 6px;
	background: var(--wlp-progress-track, #e5e7eb);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: var(--wlp-section-gap, 28px);
}
.wlp-estimator-progress-fill {
	height: 100%;
	background: var(--wlp-progress-fill, #6c4cf1);
	transition: width var(--wlp-transition, 250ms ease);
}

/* --------------------------------------------------------------------------
 * Body & steps
 * ------------------------------------------------------------------------ */
.wlp-estimator-body { min-height: 200px; position: relative; }
.wlp-estimator-loading {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 12px; padding: 40px 0;
	color: var(--wlp-muted, #6b7280);
}
.wlp-spinner {
	width: 28px; height: 28px;
	border-radius: 50%;
	border: 3px solid var(--wlp-progress-track, #e5e7eb);
	border-top-color: var(--wlp-primary, #6c4cf1);
	animation: wlpSpin 800ms linear infinite;
}
@keyframes wlpSpin { to { transform: rotate(360deg); } }

.wlp-step { display: block; }
.wlp-step.is-leaving { opacity: 0; transform: translateY(-8px); transition: var(--wlp-transition, 250ms ease); }
.wlp-step.is-entering { opacity: 0; transform: translateY(8px); }
.wlp-step.is-entered  { opacity: 1; transform: translateY(0);  transition: var(--wlp-transition, 250ms ease); }

.wlp-step-meta { color: var(--wlp-muted, #6b7280); font-size: 0.875em; margin: 0 0 4px; }
.wlp-step-title { font-weight: var(--wlp-heading-weight, 600); font-size: 1.25em; margin: 0 0 6px; line-height: 1.3; }
.wlp-step-help  { color: var(--wlp-muted, #6b7280); margin: 0 0 18px; font-size: 0.95em; }

/* --------------------------------------------------------------------------
 * Inputs
 * ------------------------------------------------------------------------ */
.wlp-field { margin-bottom: 14px; }
.wlp-field label { display: block; margin-bottom: 6px; font-weight: 500; }

.wlp-estimator input[type=text],
.wlp-estimator input[type=email],
.wlp-estimator input[type=number],
.wlp-estimator select,
.wlp-estimator textarea {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	color: inherit;
	background: var(--wlp-card-bg, #fff);
	border: 1px solid var(--wlp-border, #e5e7eb);
	border-radius: var(--wlp-radius-input, 10px);
	transition: var(--wlp-transition, 250ms ease);
	-webkit-appearance: none; appearance: none;
}
.wlp-estimator input:focus,
.wlp-estimator select:focus,
.wlp-estimator textarea:focus {
	outline: none;
	border-color: var(--wlp-primary, #6c4cf1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wlp-primary, #6c4cf1) 22%, transparent);
}

.wlp-estimator select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%236b7280' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
	padding-right: 38px;
}

.wlp-error-msg { color: var(--wlp-error, #ef4444); margin: 4px 0 0; font-size: 0.875em; }
.wlp-field.has-error input,
.wlp-field.has-error select,
.wlp-field.has-error textarea { border-color: var(--wlp-error, #ef4444); }

/* --------------------------------------------------------------------------
 * Tile / card options (sector picker, ambition picker)
 * ------------------------------------------------------------------------ */
.wlp-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
}
.wlp-tile {
	display: flex; align-items: center; justify-content: center;
	min-height: 64px;
	padding: 12px 12px;
	border: 1.5px solid var(--wlp-border, #e5e7eb);
	border-radius: var(--wlp-radius-input, 10px);
	background: var(--wlp-card-bg, #fff);
	cursor: pointer;
	text-align: center;
	font-size: 0.92em;
	font-weight: 500;
	transition: var(--wlp-transition, 250ms ease);
	color: inherit;
}
.wlp-tile:hover {
	border-color: var(--wlp-primary, #6c4cf1);
	background: var(--wlp-primary, #6c4cf1);
	color: var(--wlp-on-primary, #fff);
}
.wlp-tile.is-selected {
	border-color: var(--wlp-primary, #6c4cf1);
	background: color-mix(in srgb, var(--wlp-primary, #6c4cf1) 8%, var(--wlp-card-bg, #fff));
	color: var(--wlp-primary, #6c4cf1);
}
.wlp-tile.is-selected:hover {
	background: var(--wlp-primary, #6c4cf1);
	color: var(--wlp-on-primary, #fff);
}

/* --------------------------------------------------------------------------
 * Checkbox / radio
 * ------------------------------------------------------------------------ */
.wlp-checkbox-label {
	display: flex; align-items: flex-start; gap: 10px;
	cursor: pointer; font-weight: 400;
	margin: 0; line-height: 1.45;
}
.wlp-checkbox-label input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 18px; }

/* --------------------------------------------------------------------------
 * Lead step (step 6) — privacy note + consent block
 * ------------------------------------------------------------------------ */
.wlp-privacy-note {
	margin: -4px 0 16px;
	font-size: 13px;
	color: var(--wlp-muted, #6b7280);
	line-height: 1.45;
}
.wlp-consent-block {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--wlp-border, #e5e7eb);
}
.wlp-consent-block .wlp-checkbox-label { font-size: 14px; }
.wlp-privacy-note[hidden],
.wlp-consent-block[hidden] { display: none; }

/* --------------------------------------------------------------------------
 * Buttons & nav
 * ------------------------------------------------------------------------ */
.wlp-step-actions {
	display: flex; justify-content: space-between; align-items: center;
	gap: 12px; margin-top: 24px;
}
.wlp-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 6px;
	padding: 12px 22px;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--wlp-radius-button, 10px);
	border: 0;
	cursor: pointer;
	transition: var(--wlp-transition, 250ms ease);
	background: var(--wlp-primary, #6c4cf1);
	color: var(--wlp-on-primary, #fff);
	min-height: 44px;
}
.wlp-btn:hover { background: var(--wlp-primary-hover, #5538d6); }
.wlp-btn:focus-visible { outline: 2px solid var(--wlp-primary, #6c4cf1); outline-offset: 3px; }
.wlp-btn[disabled] { opacity: .5; cursor: not-allowed; }
.wlp-btn-secondary {
	background: transparent;
	color: var(--wlp-muted, #6b7280);
	border: 1px solid var(--wlp-border, #e5e7eb);
}
.wlp-btn-secondary:hover { background: color-mix(in srgb, var(--wlp-primary, #6c4cf1) 6%, transparent); color: var(--wlp-text, #1a1f36); }

.wlp-btn-link {
	background: none; color: var(--wlp-muted, #6b7280);
	border: 0; padding: 6px 0; font-weight: 500;
	cursor: pointer; text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * Results
 * ------------------------------------------------------------------------ */
.wlp-results-summary {
	margin-bottom: 24px;
	padding: 18px;
	background: color-mix(in srgb, var(--wlp-primary, #6c4cf1) 6%, transparent);
	border-radius: var(--wlp-radius-card, 16px);
}
.wlp-results-summary h3 { margin: 0 0 6px; font-weight: var(--wlp-heading-weight, 600); }
.wlp-results-summary p  { margin: 0; color: var(--wlp-muted, #6b7280); }

.wlp-result-courses { display: flex; flex-direction: column; gap: 14px; }
.wlp-result-course {
	border: 1px solid var(--wlp-border, #e5e7eb);
	border-radius: var(--wlp-radius-card, 16px);
	padding: 18px;
	background: var(--wlp-card-bg, #fff);
}
.wlp-result-course-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.wlp-result-course-title { margin: 0; font-weight: var(--wlp-heading-weight, 600); font-size: 1.05em; }
.wlp-result-course-desc  { margin: 4px 0 12px; color: var(--wlp-muted, #6b7280); font-size: 0.95em; }
.wlp-result-tiers { display: flex; gap: 10px; flex-wrap: wrap; }
.wlp-tier-pill {
	display: inline-flex; flex-direction: column;
	padding: 10px 18px;
	border-radius: 99px;
	background: var(--wlp-primary, #6c4cf1);
	color: var(--wlp-on-primary, #fff);
	font-weight: 600;
	min-width: 130px;
	text-align: center;
}
.wlp-tier-pill.tier-best {
	background: var(--wlp-accent, #ef7ab5);
	color: #fff;
}
.wlp-tier-pill small { display: block; font-size: 11px; opacity: .95; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.wlp-tier-pill strong { font-size: 1.4em; }

.wlp-results-actions { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.wlp-result-totals {
	margin-top: 18px;
	padding: 16px 18px;
	background: var(--wlp-card-soft, #f6f5fa);
	border-radius: 8px;
}
.wlp-result-totals-row {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	padding: 8px 0;
}
.wlp-result-totals-row + .wlp-result-totals-row {
	border-top: 1px solid var(--wlp-border, rgba(0,0,0,.08));
}
.wlp-result-totals-label {
	flex: 1 1 200px; font-weight: 600; font-size: .95em;
}
.wlp-result-totals-help {
	display: block; margin-top: 2px;
	font-weight: 400; font-size: .8em;
	color: var(--wlp-muted, #6b7280); font-style: italic;
}
.wlp-result-totals-values { display: flex; gap: 10px; flex-wrap: wrap; }
.wlp-result-totals-values .wlp-tier-pill { padding: 6px 12px; }

/* --------------------------------------------------------------------------
 * Footer & misc
 * ------------------------------------------------------------------------ */
.wlp-estimator-footer {
	margin-top: var(--wlp-section-gap, 28px);
	padding-top: 12px;
	border-top: 1px solid var(--wlp-border, #e5e7eb);
	text-align: center;
	font-size: 12px;
	color: var(--wlp-muted, #6b7280);
}
.wlp-estimator-footer a { color: inherit; text-decoration: none; }
.wlp-estimator-footer a:hover { color: var(--wlp-primary, #6c4cf1); }

.wlp-noscript { background: #fef3c7; border: 1px solid #fde68a; padding: 12px 16px; border-radius: 8px; }

.wlp-input-suffix { display: flex; align-items: center; gap: 8px; }
.wlp-input-suffix .wlp-suffix { color: var(--wlp-muted, #6b7280); font-size: 0.9em; white-space: nowrap; }

/* --------------------------------------------------------------------------
 * Accessibility — reduced motion
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.wlp-estimator,
	.wlp-estimator * {
		transition-duration: 0ms !important;
		animation-duration: 0ms !important;
	}
}