/* =========================================================
   SLA Advisor – Network-IT
   Primary:  #F76100  (orange)
   Accent:   #080f2c  (navy)
   ========================================================= */

:root {
	--sla-orange:        #F76100;
	--sla-orange-dk:     #d55200;
	--sla-orange-lt:     #fff3eb;
	--sla-orange-mid:    rgba(247, 97, 0, 0.12);

	--sla-navy:          #080f2c;
	--sla-navy-mid:      #1a2550;
	--sla-navy-lt:       rgba(8, 15, 44, 0.06);

	--sla-surface:       #ffffff;
	--sla-bg:            #f6f8fb;
	--sla-border:        #e2e6ed;
	--sla-text:          #080f2c;
	--sla-muted:         #5c6a8a;

	--sla-error:         #d92b2b;
	--sla-success:       #0d8a4e;

	--sla-radius-sm:     6px;
	--sla-radius:        10px;
	--sla-radius-lg:     14px;
	--sla-shadow:        0 4px 24px rgba(8, 15, 44, 0.09);
	--sla-shadow-sm:     0 1px 6px  rgba(8, 15, 44, 0.07);
	--sla-ease:          0.18s ease;

	--sla-max-width:     740px;
	--sla-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ── Reset & base ────────────────────────────────────────────── */

.sla-advisor {
	font-family: var(--sla-font);
	color:       var(--sla-text);
	max-width:   var(--sla-max-width);
	margin:      0 auto;
	padding:     0 16px 64px;
	box-sizing:  border-box;
	-webkit-font-smoothing: antialiased;
}

.sla-advisor *,
.sla-advisor *::before,
.sla-advisor *::after {
	box-sizing: inherit;
}

.sla-advisor p,
.sla-advisor h2,
.sla-advisor h3 {
	margin: 0;
}

/* ── Progress ────────────────────────────────────────────────── */

.sla-advisor__progress {
	display:       flex;
	align-items:   center;
	gap:           12px;
	margin-bottom: 28px;
}

.sla-advisor__progress-track {
	flex:          1;
	height:        4px;
	background:    var(--sla-border);
	border-radius: 100px;
	overflow:      hidden;
}

.sla-advisor__progress-bar {
	height:     100%;
	background: var(--sla-orange);
	transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Step card ───────────────────────────────────────────────── */

.sla-advisor__step {
	background:    var(--sla-surface);
	border:        1px solid var(--sla-border);
	border-top:    3px solid var(--sla-orange);
	border-radius: var(--sla-radius-lg);
	box-shadow:    var(--sla-shadow);
	padding:       40px 44px 36px;
}

/* Step header */

.sla-advisor__step-header {
	margin-bottom: 32px;
}

.sla-advisor__step-label {
	display:        inline-flex;
	align-items:    center;
	gap:            6px;
	font-size:      0.6875rem;
	font-weight:    700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--sla-orange);
	margin-bottom:  10px;
}

.sla-advisor__step-label::before {
	content:       '';
	display:       inline-block;
	width:         16px;
	height:        2px;
	background:    var(--sla-orange);
	border-radius: 2px;
}

.sla-advisor__step-title {
	font-size:   1.5rem;
	font-weight: 800;
	line-height: 1.2;
	color:       var(--sla-navy);
	margin:      0 0 8px;
}

.sla-advisor__step-description {
	font-size:   0.9375rem;
	color:       var(--sla-muted);
	line-height: 1.65;
}

/* ── Questions ───────────────────────────────────────────────── */

.sla-advisor__questions {
	display:        flex;
	flex-direction: column;
	gap:            24px;
	margin-bottom:  36px;
}

.sla-advisor__question {
	border:  none;
	margin:  0;
	padding: 0;
}

.sla-advisor__question-label {
	display:       block;
	font-size:     0.9375rem;
	font-weight:   650;
	line-height:   1.45;
	color:         var(--sla-navy);
	margin-bottom: 12px;
}

.sla-advisor__required {
	color:       var(--sla-orange);
	margin-left: 3px;
}

/* Option cards */

.sla-advisor__options {
	display:        flex;
	flex-direction: column;
	gap:            7px;
}

.sla-advisor__option {
	display:       flex;
	align-items:   center;
	gap:           14px;
	padding:       13px 18px;
	border:        1.5px solid var(--sla-border);
	border-radius: var(--sla-radius);
	cursor:        pointer;
	user-select:   none;
	transition:    border-color var(--sla-ease),
	               background   var(--sla-ease),
	               box-shadow   var(--sla-ease);
}

.sla-advisor__option:hover {
	border-color: var(--sla-orange);
	background:   var(--sla-orange-lt);
}

.sla-advisor__option:has( input:checked ),
.sla-advisor__option.is-selected {
	border-color: var(--sla-orange);
	background:   var(--sla-orange-lt);
	box-shadow:   inset 0 0 0 0.5px var(--sla-orange);
}

/* Hide native radio */
.sla-advisor__option input[type="radio"] {
	position: absolute;
	opacity:  0;
	width:    0;
	height:   0;
}

/* Custom radio dot */
.sla-advisor__option-indicator {
	flex-shrink:    0;
	width:          20px;
	height:         20px;
	border:         2px solid var(--sla-border);
	border-radius:  50%;
	background:     var(--sla-surface);
	transition:     border-color var(--sla-ease), background var(--sla-ease);
	display:        flex;
	align-items:    center;
	justify-content:center;
}

.sla-advisor__option-indicator::after {
	content:       '';
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    var(--sla-surface);
	transition:    transform var(--sla-ease), opacity var(--sla-ease);
	transform:     scale(0);
	opacity:       0;
}

.sla-advisor__option:has( input:checked ) .sla-advisor__option-indicator,
.sla-advisor__option.is-selected         .sla-advisor__option-indicator {
	border-color: var(--sla-orange);
	background:   var(--sla-orange);
}

.sla-advisor__option:has( input:checked ) .sla-advisor__option-indicator::after,
.sla-advisor__option.is-selected         .sla-advisor__option-indicator::after {
	transform: scale(1);
	opacity:   1;
}

.sla-advisor__option-label {
	font-size:   0.9375rem;
	line-height: 1.45;
	color:       var(--sla-text);
}

/* Validation error */

.sla-advisor__question--invalid .sla-advisor__question-label {
	color: var(--sla-error);
}

.sla-advisor__question--invalid .sla-advisor__option {
	border-color: rgba(217, 43, 43, 0.35);
}

/* ── Step footer ─────────────────────────────────────────────── */

.sla-advisor__step-footer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding-top:     8px;
	border-top:      1px solid var(--sla-border);
}

/* ── Buttons ─────────────────────────────────────────────────── */

.sla-advisor__btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	padding:         12px 26px;
	border-radius:   var(--sla-radius);
	font-family:     var(--sla-font);
	font-size:       0.9375rem;
	font-weight:     650;
	line-height:     1;
	cursor:          pointer;
	border:          2px solid transparent;
	text-decoration: none;
	transition:      background var(--sla-ease),
	                 color      var(--sla-ease),
	                 border-color var(--sla-ease),
	                 box-shadow var(--sla-ease),
	                 opacity    var(--sla-ease);
	white-space:     nowrap;
}

/* Primary – orange fill */
.sla-advisor__btn--primary {
	background:  var(--sla-orange);
	color:       #ffffff;
	box-shadow:  0 2px 10px rgba(247, 97, 0, 0.30);
}

.sla-advisor__btn--primary:hover {
	background:  var(--sla-orange-dk);
	box-shadow:  0 4px 16px rgba(247, 97, 0, 0.40);
	color:       #ffffff;
}

/* Secondary – navy outline */
.sla-advisor__btn--secondary {
	background:   transparent;
	color:        var(--sla-navy);
	border-color: var(--sla-navy);
}

.sla-advisor__btn--secondary:hover {
	background: var(--sla-navy-lt);
}

/* Ghost – subtle */
.sla-advisor__btn--ghost {
	background:   transparent;
	color:        var(--sla-muted);
	border-color: var(--sla-border);
	font-size:    0.875rem;
	font-weight:  500;
}

.sla-advisor__btn--ghost:hover {
	color:        var(--sla-navy);
	border-color: var(--sla-muted);
}

/* Submit = primary */
.sla-advisor__btn--submit {
	background:  var(--sla-orange);
	color:       #ffffff;
	box-shadow:  0 2px 10px rgba(247, 97, 0, 0.30);
}

.sla-advisor__btn--submit:hover {
	background: var(--sla-orange-dk);
}

.sla-advisor__btn--full { width: 100%; }

.sla-advisor__btn--loading,
.sla-advisor__btn:disabled {
	opacity: 0.5;
	cursor:  not-allowed;
	box-shadow: none;
}

/* ── Result card ─────────────────────────────────────────────── */

.sla-advisor__result {
	border-radius: var(--sla-radius-lg);
	border:        1px solid var(--sla-border);
	box-shadow:    var(--sla-shadow);
	overflow:      hidden;
}

/* Hero (navy header) */

.sla-advisor__result-hero {
	background: linear-gradient(135deg, var(--sla-navy) 0%, var(--sla-navy-mid) 100%);
	color:      #ffffff;
	padding:    36px 44px;
	display:    flex;
	align-items: flex-start;
	justify-content: space-between;
	gap:        24px;
}

.sla-advisor__result-eyebrow {
	display:        block;
	font-size:      0.6875rem;
	font-weight:    700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          rgba(255, 255, 255, 0.55);
	margin-bottom:  8px;
}

.sla-advisor__profile-name {
	font-size:   1.75rem;
	font-weight: 800;
	line-height: 1.15;
	color:       #ffffff;
	margin:      0 0 18px;
}

/* Score bar in hero */

.sla-advisor__score-row {
	display:     flex;
	align-items: center;
	gap:         12px;
}

.sla-advisor__score-bar-track {
	flex:          1;
	max-width:     200px;
	height:        5px;
	background:    rgba(255, 255, 255, 0.18);
	border-radius: 100px;
	overflow:      hidden;
}

.sla-advisor__score-bar-fill {
	height:     100%;
	background: var(--sla-orange);
	border-radius: 100px;
}

.sla-advisor__score-text {
	font-size:   0.8125rem;
	font-weight: 600;
	color:       rgba(255, 255, 255, 0.65);
	white-space: nowrap;
}

/* Tier badge (in hero aside) */

.sla-advisor__result-hero-aside {
	text-align:  right;
	flex-shrink: 0;
}

.sla-advisor__tier-badge {
	display:     inline-block;
	padding:     8px 18px;
	border-radius: 100px;
	font-size:   0.875rem;
	font-weight: 700;
}

.sla-advisor__result--professional .sla-advisor__tier-badge {
	background: rgba(255, 255, 255, 0.15);
	color:      rgba(255, 255, 255, 0.9);
}

.sla-advisor__result--plus .sla-advisor__tier-badge {
	background: var(--sla-orange);
	color:      #ffffff;
}

.sla-advisor__result--premium .sla-advisor__tier-badge {
	background: #ffffff;
	color:      var(--sla-navy);
}

/* Body (white section) */

.sla-advisor__result-body {
	background: var(--sla-surface);
	padding:    36px 44px;
	display:    flex;
	flex-direction: column;
	gap:        28px;
}

/* Risk indicators grid */

.sla-advisor__risk-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   10px;
}

.sla-advisor__risk-item {
	padding:       14px 12px;
	border-radius: var(--sla-radius);
	text-align:    center;
	border:        1.5px solid var(--sla-border);
}

.sla-advisor__risk-category {
	display:        block;
	font-size:      0.6875rem;
	font-weight:    700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color:          var(--sla-muted);
	margin-bottom:  5px;
}

.sla-advisor__risk-level {
	display:     block;
	font-size:   0.875rem;
	font-weight: 700;
}

/* Level colour variants */
.sla-advisor__risk-item--low {
	background: var(--sla-bg);
}

.sla-advisor__risk-item--low .sla-advisor__risk-level {
	color: var(--sla-muted);
}

.sla-advisor__risk-item--medium {
	background:   #fffbee;
	border-color: #f5c842;
}

.sla-advisor__risk-item--medium .sla-advisor__risk-level {
	color: #92600a;
}

.sla-advisor__risk-item--high {
	background:   var(--sla-orange-lt);
	border-color: var(--sla-orange);
}

.sla-advisor__risk-item--high .sla-advisor__risk-level {
	color: var(--sla-orange-dk);
}

/* Recommendation section */

.sla-advisor__recommendation {
	padding-bottom: 4px;
}

.sla-advisor__rec-tagline {
	font-size:     1.0625rem;
	font-weight:   500;
	color:         var(--sla-muted);
	font-style:    italic;
	margin-bottom: 14px;
}

.sla-advisor__price-from {
	font-size:     2rem;
	font-weight:   800;
	color:         var(--sla-orange);
	line-height:   1;
	margin-bottom: 4px;
}

.sla-advisor__price-disclaimer {
	font-size:     0.78rem;
	color:         var(--sla-muted);
	line-height:   1.55;
	margin-bottom: 20px;
}

.sla-advisor__features {
	list-style:     none;
	margin:         0;
	padding:        0;
	display:        flex;
	flex-direction: column;
	gap:            9px;
}

.sla-advisor__feature {
	display:     flex;
	align-items: flex-start;
	gap:         10px;
	font-size:   0.9rem;
	line-height: 1.5;
}

.sla-advisor__feature::before {
	content:       '✓';
	flex-shrink:   0;
	width:         20px;
	height:        20px;
	background:    var(--sla-orange-lt);
	color:         var(--sla-orange);
	font-weight:   700;
	font-size:     0.75rem;
	border-radius: 50%;
	display:       flex;
	align-items:   center;
	justify-content: center;
	margin-top:    1px;
}

/* Top 3 drivers */

.sla-advisor__drivers {
	background:    var(--sla-navy);
	border-radius: var(--sla-radius);
	padding:       24px 28px;
}

.sla-advisor__drivers-title {
	font-size:      0.6875rem;
	font-weight:    700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          rgba(255, 255, 255, 0.45);
	margin:         0 0 16px;
}

.sla-advisor__driver-list {
	list-style:     none;
	margin:         0;
	padding:        0;
	display:        flex;
	flex-direction: column;
	gap:            14px;
}

.sla-advisor__driver {
	display:     flex;
	align-items: flex-start;
	gap:         14px;
}

.sla-advisor__driver-icon {
	flex-shrink:    0;
	width:          28px;
	height:         28px;
	background:     var(--sla-orange-mid);
	border:         1px solid rgba(247, 97, 0, 0.30);
	border-radius:  var(--sla-radius-sm);
	display:        flex;
	align-items:    center;
	justify-content:center;
	color:          var(--sla-orange);
	font-size:      0.75rem;
	font-weight:    800;
	margin-top:     1px;
}

.sla-advisor__driver-label {
	display:     block;
	font-size:   0.875rem;
	font-weight: 700;
	color:       #ffffff;
	margin-bottom: 2px;
}

.sla-advisor__driver-insight {
	font-size:   0.8125rem;
	color:       rgba(255, 255, 255, 0.55);
	line-height: 1.5;
}

/* CTAs */

.sla-advisor__ctas {
	display:    flex;
	gap:        10px;
	flex-wrap:  wrap;
}

/* ── Contact section (embedded in last step) ─────────────────── */

.sla-advisor__contact {
	margin-top:  32px;
	padding-top: 32px;
	border-top:  1.5px solid var(--sla-border);
}

.sla-advisor__contact-header {
	margin-bottom: 24px;
}

.sla-advisor__contact-title {
	font-size:   1.0625rem;
	font-weight: 750;
	color:       var(--sla-navy);
	margin:      0 0 6px;
}

.sla-advisor__contact-intro {
	font-size:   0.875rem;
	color:       var(--sla-muted);
	line-height: 1.6;
	margin:      0;
}

.sla-advisor__contact-fields {
	display:        flex;
	flex-direction: column;
	gap:            16px;
}

/* Invalid state for field-group (contact inputs) */

.sla-advisor__question--invalid > label,
.sla-advisor__question--invalid .sla-advisor__gdpr-label {
	color: var(--sla-error);
}

.sla-advisor__question--invalid input[type="text"],
.sla-advisor__question--invalid input[type="email"],
.sla-advisor__question--invalid input[type="number"],
.sla-advisor__question--invalid select {
	border-color: var(--sla-error);
}

/* ── CTA confirm (success message after CTA click) ───────────── */

.sla-advisor__cta-confirm-inner {
	margin-top:    16px;
	padding:       18px 22px;
	background:    #f0fdf7;
	border:        1.5px solid #a7f0c8;
	border-radius: var(--sla-radius);
	color:         var(--sla-success);
	font-size:     0.9375rem;
	font-weight:   500;
	line-height:   1.5;
}

.sla-advisor__cta-confirm-inner p {
	margin: 0;
}

/* ── Lead capture ─────────────────────────────────────────────── */

.sla-advisor__capture {
	margin-top:    14px;
	background:    var(--sla-surface);
	border:        1px solid var(--sla-border);
	border-radius: var(--sla-radius-lg);
	box-shadow:    var(--sla-shadow-sm);
}

.sla-advisor__capture-inner {
	padding: 36px 44px;
}

.sla-advisor__capture-title {
	font-size:   1.125rem;
	font-weight: 750;
	color:       var(--sla-navy);
	margin-bottom: 6px;
}

.sla-advisor__capture-intro {
	font-size:   0.9rem;
	color:       var(--sla-muted);
	line-height: 1.6;
	margin-bottom: 24px;
}

.sla-advisor__capture-form {
	display:        flex;
	flex-direction: column;
	gap:            16px;
}

.sla-advisor__field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:     14px;
}

.sla-advisor__field-group {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.sla-advisor__field-group > label {
	font-size:   0.8125rem;
	font-weight: 650;
	color:       var(--sla-navy);
}

.sla-advisor__field-group input[type="text"],
.sla-advisor__field-group input[type="email"],
.sla-advisor__field-group input[type="number"],
.sla-advisor__field-group select {
	padding:       11px 14px;
	border:        1.5px solid var(--sla-border);
	border-radius: var(--sla-radius);
	font-family:   var(--sla-font);
	font-size:     0.9375rem;
	color:         var(--sla-text);
	background:    var(--sla-surface);
	transition:    border-color var(--sla-ease), box-shadow var(--sla-ease);
	width:         100%;
}

.sla-advisor__field-group select {
	appearance:          none;
	-webkit-appearance:  none;
	padding-right:       36px;
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c6a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 12px center;
	background-size:     16px;
	cursor:              pointer;
}

.sla-advisor__field-group input:focus,
.sla-advisor__field-group select:focus {
	outline:      none;
	border-color: var(--sla-orange);
	box-shadow:   0 0 0 3px rgba(247, 97, 0, 0.12);
}

.sla-advisor__field-group input::placeholder {
	color: #b0b8c8;
}

.sla-advisor__field-group--checkbox {
	flex-direction: row;
}

.sla-advisor__gdpr-label {
	display:     flex;
	align-items: flex-start;
	gap:         10px;
	font-size:   0.875rem;
	color:       var(--sla-muted);
	cursor:      pointer;
	line-height: 1.5;
}

.sla-advisor__gdpr-label input[type="checkbox"] {
	flex-shrink:  0;
	margin-top:   3px;
	accent-color: var(--sla-orange);
	width:        16px;
	height:       16px;
}

.sla-advisor__gdpr-label a {
	color:           var(--sla-orange);
	text-decoration: underline;
}

.sla-advisor__capture-success {
	padding:       22px 24px;
	background:    #f0fdf7;
	border:        1.5px solid #a7f0c8;
	border-radius: var(--sla-radius);
	color:         var(--sla-success);
	font-size:     0.9375rem;
	font-weight:   500;
}

/* ── Error ────────────────────────────────────────────────────── */

.sla-advisor__error {
	margin-top:    12px;
	padding:       14px 18px;
	background:    #fff5f5;
	border:        1.5px solid #fca5a5;
	border-radius: var(--sla-radius);
	color:         var(--sla-error);
	font-size:     0.9rem;
	line-height:   1.5;
}

/* ── Responsive ───────────────────────────────────────────────── */

@media ( max-width: 680px ) {
	.sla-advisor__step,
	.sla-advisor__result-hero,
	.sla-advisor__result-body,
	.sla-advisor__capture-inner {
		padding: 28px 24px;
	}

	.sla-advisor__result-hero {
		flex-direction: column;
		gap:            20px;
	}

	.sla-advisor__result-hero-aside {
		text-align: left;
	}

	.sla-advisor__profile-name {
		font-size: 1.375rem;
	}

	.sla-advisor__risk-grid {
		grid-template-columns: 1fr 1fr;
	}

	.sla-advisor__field-row {
		grid-template-columns: 1fr;
	}

	.sla-advisor__contact {
		margin-top:  24px;
		padding-top: 24px;
	}

	.sla-advisor__step-footer {
		flex-direction: column-reverse;
		gap: 10px;
	}

	.sla-advisor__btn {
		width: 100%;
	}

	.sla-advisor__ctas {
		flex-direction: column;
	}

	.sla-advisor__option {
		padding: 12px 14px;
	}

	.sla-advisor__score-bar-track {
		max-width: 140px;
	}
}

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