/* ==========================================================================
   Trenity Eligibility Calculator — Frontend Styles
   Theme: Navy / Grey / White / Black — premium light "SaaS" aesthetic.
   Layout: two-column wizard — main steps left, live score sidebar right,
   collapsing to a single column on mobile.

   NOTE: Critical structural rules (sizing, position, core colors) carry
   !important. This widget is embedded inside third-party WordPress themes
   whose own global resets/utility CSS can otherwise override plain rules
   depending on stylesheet load order — !important keeps the widget looking
   correct regardless of the host theme.
   ========================================================================== */

:root {
	--tec-primary: #0A1F44;   /* Navy */
	--tec-primary-light: #1D3A6E;
	--tec-secondary: #667085; /* Grey */
	--tec-accent: #111111;    /* Black */
	--tec-light: #F7F8FA;     /* Soft grey background */
	--tec-text: #101828;
	--tec-radius: 14px;
	--tec-success: #16794B;
	--tec-warning: #B5750A;
	--tec-danger: #B4232C;
	--tec-white: #FFFFFF;
	--tec-border: #E5E7EB;
}

.tec-wizard, .tec-wizard * { box-sizing: border-box !important; }
.tec-wizard img, .tec-wizard svg { max-width: none !important; }

.tec-wizard {
	font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
	max-width: 1100px;
	margin: 0 auto;
	color: var(--tec-text);
	line-height: 1.45;
}

/* ---------- Intro header ---------- */
.tec-intro { background: var(--tec-white); padding: 32px 36px 22px; border-radius: var(--tec-radius) var(--tec-radius) 0 0; }
.tec-eyebrow { font-size: 15px; font-weight: 700; color: var(--tec-secondary); margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.tec-eyebrow::after { content: none; }
.tec-main-title { font-size: 32px; font-weight: 800; line-height: 1.18; margin: 0 0 8px; color: var(--tec-primary); letter-spacing: -0.01em; }
.tec-main-subtitle { font-size: 16px; color: var(--tec-secondary); margin: 0; }

/* ---------- Two-column layout ---------- */
.tec-columns {
	display: grid !important;
	grid-template-columns: 1fr 320px !important;
	gap: 24px;
	background: var(--tec-light);
	padding: 8px 36px 36px;
	border-radius: 0 0 var(--tec-radius) var(--tec-radius);
}

.tec-main-col {
	min-width: 0;
	background: var(--tec-white);
	border: 1px solid var(--tec-border);
	border-radius: var(--tec-radius);
	padding: 28px 28px 26px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

/* Segmented step indicator: STEP 2 OF 6 + row of boxes */
.tec-step-indicator { margin-bottom: 24px; }
.tec-step-text { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--tec-secondary); display: block; margin-bottom: 10px; text-transform: uppercase; }
.tec-step-boxes { display: flex !important; gap: 6px; }
.tec-step-box { flex: 1 1 0; max-width: 60px; height: 6px; border-radius: 3px; background: var(--tec-border); transition: background 0.25s ease; }
.tec-step-box.filled { background: var(--tec-primary); }

.tec-step { display: none; animation: tecFadeIn 0.25s ease; }
.tec-step.active { display: block !important; }
@keyframes tecFadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }

.tec-step-heading { font-size: 19px; font-weight: 700; margin: 0 0 20px; color: var(--tec-text); }

/* Country selection grid */
.tec-country-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px; }
.tec-country-card {
	border: 1.5px solid var(--tec-border);
	border-radius: 10px;
	padding: 20px 10px;
	text-align: center;
	cursor: pointer;
	transition: all 0.15s ease;
	background: var(--tec-white);
}
.tec-country-card:hover { border-color: var(--tec-primary-light); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(16, 24, 40, 0.06); }
.tec-country-card.selected { border-color: var(--tec-primary); border-width: 2px; background: #F4F7FC; box-shadow: 0 4px 12px rgba(10, 31, 68, 0.1); }
.tec-country-flag { font-size: 28px; display: block; margin-bottom: 8px; }
.tec-country-name { font-size: 13.5px; font-weight: 700; color: var(--tec-text); }

/* Question options — horizontal box style */
.tec-options { display: flex !important; flex-wrap: wrap; gap: 12px; }
.tec-option {
	position: relative;
	display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	border: 1.5px solid var(--tec-border);
	border-radius: 10px;
	padding: 16px 20px;
	min-width: 120px;
	flex: 1 1 auto;
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: center;
	background: var(--tec-white);
}
.tec-option:hover { border-color: var(--tec-primary-light); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(16, 24, 40, 0.06); }
.tec-option.selected { border-color: var(--tec-primary); border-width: 2px; background: #F4F7FC; }
.tec-option-label { font-size: 15px; font-weight: 600; }
.tec-option-points {
	font-size: 11px;
	font-weight: 700;
	color: var(--tec-secondary);
	background: #EEF0F3;
	border-radius: 20px;
	padding: 2px 10px;
	transition: all 0.15s ease;
}
.tec-option.selected .tec-option-points { background: var(--tec-primary) !important; color: #fff !important; }

/* Lead form */
.tec-field { margin-bottom: 16px; max-width: 420px; }
.tec-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--tec-secondary); }
.tec-input {
	width: 100%; padding: 12px 14px; border: 1.5px solid var(--tec-border); border-radius: 8px;
	font-size: 14.5px; font-family: inherit; background: var(--tec-white); color: var(--tec-text);
}
.tec-input:focus { outline: none; border-color: var(--tec-primary); }

.tec-phone-row { display: flex; gap: 8px; align-items: stretch; }
.tec-dial-select {
	flex: 0 0 118px; width: 118px; padding: 12px 8px; border: 1.5px solid var(--tec-border); border-radius: 8px;
	font-size: 13.5px; font-family: inherit; background: var(--tec-white); color: var(--tec-text); cursor: pointer;
}
.tec-dial-select:focus { outline: none; border-color: var(--tec-primary); }
.tec-phone-row .tec-phone-input { flex: 1 1 auto; }
@media (max-width: 480px) {
	.tec-dial-select { flex: 0 0 96px; width: 96px; font-size: 12.5px; }
}

/* Custom checkbox — many WP themes hide native checkboxes with their own
   global CSS to replace them with a styled version of their own; since
   they don't know about our markup, the box (and sometimes the whole row)
   can end up invisible. This draws our own box so it can't be hidden or
   dropped by the host theme. */
.tec-consent label,
.tec-checkbox-label {
	display: flex !important; gap: 10px; align-items: flex-start;
	font-weight: 400 !important; font-size: 13px !important; color: var(--tec-secondary) !important;
	cursor: pointer;
}
.tec-checkbox-wrap {
	position: relative !important;
	width: 20px !important; height: 20px !important;
	flex: 0 0 20px !important;
	margin-top: 1px;
	display: block !important;
}
.tec-checkbox-input {
	position: absolute !important; inset: 0 !important;
	width: 20px !important; height: 20px !important;
	margin: 0 !important; padding: 0 !important;
	opacity: 0 !important;
	cursor: pointer !important;
	z-index: 2 !important;
	appearance: auto !important;
	display: block !important;
}
.tec-checkbox-box {
	position: absolute !important; inset: 0 !important;
	display: block !important;
	width: 20px !important; height: 20px !important;
	border: 1.5px solid var(--tec-border) !important;
	border-radius: 5px !important;
	background: var(--tec-white) !important;
	pointer-events: none !important;
	transition: all 0.15s ease;
	box-sizing: border-box !important;
}
.tec-checkbox-box::after {
	content: '';
	position: absolute;
	left: 6px; top: 2px;
	width: 5px; height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity 0.1s ease;
}
.tec-checkbox-input:checked ~ .tec-checkbox-box {
	background: var(--tec-primary) !important;
	border-color: var(--tec-primary) !important;
}
.tec-checkbox-input:checked ~ .tec-checkbox-box::after { opacity: 1; }
.tec-checkbox-input:focus ~ .tec-checkbox-box { box-shadow: 0 0 0 3px rgba(10, 31, 68, 0.15); }
.tec-consent-text { padding-top: 1px; }

/* Wizard action buttons (Back / Next) */
.tec-wizard-actions { display: flex !important; gap: 12px; margin-top: 26px; }

.tec-btn {
	display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
	padding: 13px 28px !important; border-radius: 8px !important; font-size: 14.5px !important; font-weight: 700 !important;
	cursor: pointer; border: 1.5px solid transparent !important; text-decoration: none !important;
	transition: all 0.15s ease; line-height: 1.2 !important; font-family: inherit !important;
}
.tec-btn-back-solid { background: var(--tec-white) !important; color: var(--tec-primary) !important; border-color: var(--tec-border) !important; }
.tec-btn-back-solid:hover { background: var(--tec-light) !important; border-color: var(--tec-primary-light) !important; }
.tec-btn-next-outline { background: var(--tec-primary) !important; border-color: var(--tec-primary) !important; color: #fff !important; }
.tec-btn-next-outline:hover { background: var(--tec-primary-light) !important; border-color: var(--tec-primary-light) !important; }
.tec-btn:disabled { opacity: 0.4 !important; cursor: not-allowed; }

.tec-btn-primary { background: var(--tec-primary) !important; color: #fff !important; border-color: var(--tec-primary) !important; }
.tec-btn-primary:hover { background: var(--tec-primary-light) !important; }
.tec-btn-outline { background: transparent !important; border-color: var(--tec-primary) !important; color: var(--tec-primary) !important; }
.tec-btn-outline:hover { background: var(--tec-primary) !important; color: #fff !important; }

.tec-error { color: var(--tec-danger); font-size: 13px; margin-top: 10px; }

/* ---------- Sidebar: live score card + contact box ---------- */
.tec-sidebar-col { display: flex !important; flex-direction: column; gap: 16px; }
.tec-sidebar-card {
	border: 1px solid var(--tec-border);
	border-radius: var(--tec-radius);
	padding: 26px 22px 24px;
	text-align: center;
	position: sticky;
	top: 20px;
	background: var(--tec-white);
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.04);
}
.tec-sidebar-flag { font-size: 30px; margin-bottom: 8px; }
.tec-sidebar-caption { font-size: 12.5px; color: var(--tec-secondary); margin: 0 0 4px; }
.tec-sidebar-country { font-size: 21px; font-weight: 800; margin: 0 0 12px; color: var(--tec-primary); position: relative; padding-bottom: 12px; }
.tec-sidebar-country::after { content: ''; display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--tec-primary); margin: 10px auto 0; }
.tec-sidebar-divider { border: none; border-top: 1px solid var(--tec-border); margin: 14px 0; }
.tec-sidebar-score-label {
	font-size: 11.5px; font-weight: 700; color: var(--tec-secondary); margin: 0 0 18px;
	text-transform: uppercase; letter-spacing: 0.08em;
}

/* ---- Live score: white ring card + delta pop + progress bar ---- */
/* Fixed px sizing is intentional and duplicated as an inline style on the
   element itself (see class-tec-shortcode.php) so the widget keeps its
   shape even if a host theme's global reset touches div sizing. */
.tec-score-circle-wrap {
	position: relative !important;
	width: 136px !important;
	height: 136px !important;
	max-width: 136px !important;
	margin: 0 auto !important;
	display: block !important;
}
.tec-score-ring-svg {
	position: absolute !important; inset: 0 !important;
	width: 136px !important; height: 136px !important;
	transform: rotate(-90deg);
	display: block !important;
}
.tec-score-ring-bg { fill: none; stroke: #EEF0F3; stroke-width: 6; }
.tec-score-ring-fg {
	fill: none;
	stroke: var(--tec-primary);
	stroke-width: 6;
	stroke-linecap: round;
	stroke-dasharray: 326.7256;
	stroke-dashoffset: 326.7256;
	transition: stroke-dashoffset 0.5s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.3s ease;
}
.tec-score-ring-fg.is-passing { stroke: var(--tec-success); }

.tec-score-circle {
	position: absolute !important;
	top: 10px !important; left: 10px !important; right: 10px !important; bottom: 10px !important;
	width: 116px !important; height: 116px !important;
	border-radius: 50% !important;
	background: var(--tec-white) !important;
	border: 1px solid var(--tec-border);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 2px 8px rgba(16, 24, 40, 0.06);
	display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
	transition: box-shadow 0.35s ease, transform 0.2s ease, border-color 0.3s ease;
}
.tec-score-circle.tec-score-pulse { transform: scale(1.05); }
.tec-score-circle.tec-score-passing {
	border-color: #BFE6D2;
	box-shadow: 0 4px 14px rgba(22, 121, 75, 0.18);
}
.tec-score-circle-value { font-size: 30px !important; font-weight: 800 !important; color: var(--tec-primary) !important; line-height: 1; letter-spacing: -0.02em; }
.tec-score-circle.tec-score-passing .tec-score-circle-value { color: var(--tec-success) !important; }
.tec-score-circle-suffix { font-size: 10px; font-weight: 700; color: var(--tec-secondary); text-transform: uppercase; letter-spacing: 0.08em; }

/* Floating +N / -N popup above the circle when the score changes */
.tec-score-delta {
	position: absolute !important;
	top: -6px !important; left: 50% !important;
	transform: translate(-50%, 0);
	font-size: 13px; font-weight: 800;
	color: var(--tec-success);
	background: #fff;
	border: 1.5px solid #DCEFE5;
	border-radius: 20px;
	padding: 2px 10px;
	opacity: 0;
	pointer-events: none;
	z-index: 2;
	box-shadow: 0 3px 10px rgba(16, 24, 40, 0.1);
	white-space: nowrap;
}
.tec-score-delta.is-negative { color: var(--tec-danger); border-color: #F3D8D9; }
.tec-score-delta.tec-score-delta-animate { animation: tecDeltaPop 0.9s ease forwards; }
@keyframes tecDeltaPop {
	0%   { opacity: 0; transform: translate(-50%, 6px) scale(0.9); }
	18%  { opacity: 1; transform: translate(-50%, -10px) scale(1); }
	75%  { opacity: 1; transform: translate(-50%, -14px) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -26px) scale(0.96); }
}

/* Pass-mark badge chip, shown once the live score clears the pass mark */
.tec-sidebar-badge {
	display: inline-block;
	margin: 16px auto 0;
	font-size: 11.5px; font-weight: 800;
	color: var(--tec-success);
	background: #E9F6EF;
	border: 1px solid #BFE6D2;
	border-radius: 20px;
	padding: 5px 13px;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	text-align: center;
}
.tec-sidebar-badge.show { opacity: 1 !important; transform: translateY(0); }

/* Progress bar toward the pass mark */
.tec-sidebar-progress {
	width: 100%; height: 6px; border-radius: 4px;
	background: #EEF0F3;
	margin-top: 18px;
	overflow: hidden;
}
.tec-sidebar-progress-fill {
	height: 100%; width: 0%; border-radius: 4px;
	background: var(--tec-primary);
	transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease;
}
.tec-sidebar-progress-fill.is-passing { background: var(--tec-success); }

.tec-sidebar-max { font-size: 11.5px; font-weight: 600; color: var(--tec-secondary); margin: 10px 0 0; }

.tec-sidebar-contact {
	display: flex !important; align-items: center; gap: 12px;
	border: 1px solid var(--tec-border); border-radius: var(--tec-radius);
	padding: 16px 18px;
	background: var(--tec-white);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.tec-contact-flag { font-size: 20px; }
.tec-contact-label { font-size: 13px; font-weight: 700; color: var(--tec-text); }
.tec-contact-phone { font-size: 13px; color: var(--tec-secondary); }

/* ---------- Final result view (shown after lead submission) ---------- */
.tec-step-result { text-align: center; padding: 44px 36px; background: var(--tec-white); border: 1px solid var(--tec-border); border-radius: var(--tec-radius); }
.tec-result-score-ring { position: relative; width: 148px; height: 148px; margin: 0 auto 20px; }
.tec-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tec-ring-bg { fill: none; stroke: #EEF0F3; stroke-width: 9; }
.tec-ring-fg { fill: none; stroke: var(--tec-primary); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1s ease; }
.tec-ring-value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tec-score-number { font-size: 34px; font-weight: 800; color: var(--tec-primary); line-height: 1; }
.tec-score-max { font-size: 12px; color: var(--tec-secondary); }
.tec-result-label { font-size: 22px; font-weight: 800; margin: 6px 0 4px; }
.tec-result-label.tone-success { color: var(--tec-success); }
.tec-result-label.tone-warning { color: var(--tec-warning); }
.tec-result-label.tone-danger { color: var(--tec-danger); }

.tec-step-result.tone-success .tec-ring-fg { stroke: var(--tec-success); }
.tec-step-result.tone-success .tec-score-number { color: var(--tec-success); }
.tec-step-result.tone-warning .tec-ring-fg { stroke: var(--tec-warning); }
.tec-step-result.tone-warning .tec-score-number { color: var(--tec-warning); }
.tec-step-result.tone-danger .tec-ring-fg { stroke: var(--tec-danger); }
.tec-step-result.tone-danger .tec-score-number { color: var(--tec-danger); }
.tec-result-message { color: var(--tec-secondary); font-size: 14.5px; max-width: 460px; margin: 0 auto 20px; }
.tec-result-breakdown { text-align: left; max-width: 480px; margin: 0 auto 26px; background: var(--tec-light); border-radius: var(--tec-radius); padding: 16px 20px; }
.tec-breakdown-row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 7px 0; border-bottom: 1px dashed #E1E4E9; }
.tec-breakdown-row:last-child { border-bottom: none; }
.tec-breakdown-points { font-weight: 700; color: var(--tec-primary); }
.tec-result-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Template: CARDS — bolder tiles, black accents, square-ish corners
   ========================================================================== */
.tec-template-cards .tec-country-card,
.tec-template-cards .tec-option { border-radius: 4px; border-width: 2px; }
.tec-template-cards .tec-btn-back-solid { color: var(--tec-accent) !important; }
.tec-template-cards .tec-btn-next-outline { background: var(--tec-accent) !important; border-color: var(--tec-accent) !important; }
.tec-template-cards .tec-btn-next-outline:hover { background: #2a2a2a !important; }
.tec-template-cards .tec-ring-fg { stroke: var(--tec-accent); }
.tec-template-cards .tec-score-number { color: var(--tec-accent); }
.tec-template-cards .tec-score-ring-fg { stroke: var(--tec-accent); }
.tec-template-cards .tec-score-circle-value { color: var(--tec-accent) !important; }
.tec-template-cards .tec-sidebar-progress-fill { background: var(--tec-accent); }
.tec-template-cards .tec-sidebar-country { color: var(--tec-accent); }
.tec-template-cards .tec-sidebar-country::after { background: var(--tec-accent); }

/* ==========================================================================
   Template: MINIMAL — light, editorial, borderless cards
   ========================================================================== */
.tec-template-minimal .tec-intro { background: transparent; padding-left: 0; padding-right: 0; }
.tec-template-minimal .tec-columns { background: transparent; padding-left: 0; padding-right: 0; border-top: 1px solid var(--tec-border); }
.tec-template-minimal .tec-main-col,
.tec-template-minimal .tec-sidebar-card,
.tec-template-minimal .tec-sidebar-contact { border: none; box-shadow: none; background: var(--tec-light); }
.tec-template-minimal .tec-country-card,
.tec-template-minimal .tec-option { border-radius: 6px; }

/* Responsive */
@media (max-width: 860px) {
	.tec-columns { grid-template-columns: 1fr !important; padding: 8px 20px 28px; }
	.tec-sidebar-card { position: static; }
	.tec-country-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
	.tec-intro, .tec-columns, .tec-step-result { padding-left: 16px; padding-right: 16px; }
	.tec-main-col { padding: 22px 18px 20px; }
	.tec-main-title { font-size: 25px; }
	.tec-options { flex-direction: column; }
	.tec-option { width: 100%; }
	.tec-result-cta { flex-direction: column; }
	.tec-result-cta .tec-btn { width: 100%; }
	.tec-wizard-actions .tec-btn { flex: 1; }
}