/* ======= DOREPLY SMS ========== */

doreply-guided-search {
	font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
}

.sms-wrapper {
	padding-top: 60px;
	background: var(--color-bg);
	background-image: none;
	height: 100%;
	width: 100%;
}

html:has(.sms-wrapper) {
	background: var(--color-bg);
}

.doreply-container-big {
	position: relative;
}

.doreply-container {
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: visible;
}

doreply-guided-search-navigation {
	margin-bottom: 0 !important;
}

.doreply-guided-search-navigation-container {
	width: 100%;
	left: 0;
	position: relative;
	padding: 0;
	background: transparent;
}

.doreply-container .hydrated {
	z-index: 1;
}

doreply-guided-search-column {
	box-shadow: none !important;
}

.doreply-guided-search-navigation-container, .doreply-guided-search-navigation-content {
	grid-template-columns: 1fr;
}

.doreply-guided-search-navigation-container > doreply-guided-search-column:not(:last-child) {
	display: none;
}

.doreply-guided-search-navigation-container doreply-guided-search-column:nth-child(2),
.doreply-guided-search-navigation-container doreply-guided-search-column:nth-child(3),
.doreply-guided-search-navigation-container doreply-guided-search-column:nth-child(4) {
	border-radius: var(--radius-md);
	overflow: hidden;
}

html #main-wrapper:has(.sms-wrapper) footer {
	display: none;
}

.hydrated:has(.doreply-guided-search-feedback-icon-container) {
	background: transparent;
}

/* Steps */
a.doreply-step {
	position: relative;
	margin-bottom: 0;
	padding: 0 10px 0 0;
	grid-template-columns: 1rem auto 2rem;
	background: var(--color-surface-2);
	color: var(--color-text);
	font-weight: 500;
	border-top: 1px solid var(--color-border-soft);
}

.doreply-guidedsearch-animation {
	height: fit-content;
	background: transparent;
}

a.doreply-step-active-state {
	/* background: var(--color-primary); */
	/* color: var(--color-primary-soft); */
}

/* a.doreply-step.doreply-step-active-state:hover {
	background: var(--color-primary);
	color: var(--color-primary-soft) !important;
} */

.custom-doreply-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 0;
    background: #f1f1f1;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    color: var(--i-headerSecondary--ba-co);
}

.doreply-arrow > svg,
.doreply-step:has(.doreply-arrow-back) svg {
	display: none;
}

a.doreply-step .doreply-arrow {
	background-image: url(https://www.higherlevel.nl/uploads/pages_media/2098735760_ArrowIconDoReply.png?_cb=1779787692);
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	background-size: 6px;
	background-position: center;
}

a.doreply-step:has(.doreply-link):hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.doreply-step:has(.doreply-arrow-back) {
	box-shadow: none;
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	background: rgba(255 122 0 / 15%);
}


.doreply-step:has(.doreply-arrow-back) .font-semibold.doreply-label {
	margin-left: 0;
	color: var(--color-text-muted);
	font-weight: 500;
}

.doreply-step .doreply-arrow-back::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 40px;
	height: 100%;
	background-image: url(https://www.higherlevel.nl/uploads/pages_media/2098735760_ArrowIconDoReply.png?_cb=1779787692);
	transform: rotate(180deg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 6px;
}

doreply-guided-search-answer {
	display: none;
}

/* Placeholder */
.sms-placeholder {
	position: relative;
	z-index: 1;
	display: flex;
	gap: .7rem;
}

.sms-placeholder .block {
	display: block;
	width: 100%;
	height: 260px;
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--color-text-muted) 40%, var(--color-surface-2));
	animation: spSkeleton 1.2s infinite ease-in-out;
}

@keyframes spSkeleton {
	0%, 100% { opacity: 1; }
	50%      { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
	.sms-placeholder .block {
		animation: none;
		opacity: .8;
	}
}

.sms-placeholder .block.pl1 {
	animation-delay: 100ms;
}

.sms-placeholder .block.pl2 {
	animation-delay: 200ms;
}

.sms-placeholder .block.pl3 {
	animation-delay: 300ms;
}

.sms-placeholder .block.pl4 {
	animation-delay: 400ms;
}

@-webkit-keyframes spScaleAlpha {
	0% { opacity: 1; }
	33% { opacity: .25; }
	66% { opacity: .25; }
	100% { opacity: 1; }
}

@keyframes spScaleAlpha {
	0% { opacity: 1; }
	33% { opacity: .25; }
	66% { opacity: .25; }
	100% { opacity: 1; }
}

/* DoReply card */
.hl-doreply-card {
	position: relative;
	z-index: 1;
	min-height: 365px;
	padding: 0;
	overflow: visible;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.hl-doreply-header {
	position: relative;
	z-index: 2;
	padding: var(--space-6) var(--space-6) var(--space-4);
}

.hl-doreply-header h2 {
	margin: 0;
	color: var(--color-text);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
}

.hl-doreply-header p {
	margin: 5px 0 0;
	color: var(--color-text-secondary);
	font-size: 13px;
	line-height: 18px;
}

.hl-doreply-space {
	position: relative;
	overflow: visible;
	padding: 0 var(--space-6) var(--space-6) var(--space-6);
}

.hl-doreply-absolute {
	position: relative;
	width: 100%;
	z-index: 999;
	overflow: visible;
}

/* Shared card visual */
.hl-card,
.hl-doreply-card {
	background: var(--color-surface-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

/* Enhanced */
.doreply-container #main-topic .hydrated:nth-last-child(-n + 2) {
	position: relative;
}

.navigation-container {
	position: relative;
}

#ipsLayout_footer {
	position: relative;
	z-index: 2;
}

div#navigation-tooltip {
	position: relative;
	left: 0;
	top: -30px;
	z-index: 3;
	width: 100%;
	padding: var(--space-5);
	border-radius: var(--radius-md);
	background: var(--color-text-secondary);
	color: var(--color-surface);
	box-shadow: var(--shadow-hover);
}

div#navigation-tooltip::before {
	content: "";
	position: absolute;
	bottom: -20px;
	left: 50%;
	top: unset;
	z-index: 999;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-top: 10px solid var(--color-text-secondary);
	border-right: 10px solid transparent;
	transform: translate(-50%);
}

#navigation-tooltip h2 {
	padding-bottom: 10px;
	color: var(--color-surface);
	font-size: 19px;
	font-weight: 700;
}

.doreply-back-button-container a {
	background: transparent;
}

.doreply-back-button-container a:hover {
	/* background: transparent !important; */
}

.doreply-back-button-container .doreply-label {
	padding-left: 20px;
}

.sms-tooltip-link {
	color: var(--color-surface);
	font-weight: 600;
	text-decoration: underline;
}

.most-viewed-topic-block {
	position: relative;
	z-index: 2;
}

/* Pointer events */
doreply-guided-search,
doreply-guided-search-navigation-container {
	pointer-events: none;
}

doreply-guided-search-column.hydrated {
	pointer-events: auto !important;
}

doreply-guided-search-step.hydrated,
doreply-guided-search-step.hydrated a {
	pointer-events: auto !important;
}

/* Secondary bottom steps */
.doreply-container #main-topic .hydrated:nth-last-child(-n + 2) a {
	position: relative;
	border-radius: var(--radius-md);
	background: var(--color-surface);
	font-weight: 700;
	border-top: none !important;
}

/* .doreply-container #main-topic .hydrated:nth-last-child(-n + 2) a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 90%;
	height: 1px;
	background: var(--color-border);
	translate: -50%;
} */

.doreply-container {
	margin-bottom: 0 !important;
}

.doreply-container {
	min-width: unset;
}

.doreply-container #main-topic .hydrated:nth-last-child(-n + 2) a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.doreply-container #main-topic .hydrated:nth-last-child(-n + 2) .doreply-label {
	margin-left: 0;
	color: var(--color-primary);
	transition: 250ms all ease-in-out;
}

:has(.doreply-container) .ipsDialog.ipsDialog_narrow {
	top: 65px;
}

:has(#main-topic .doreply-step.doreply-step-active-state) #navigation-tooltip {
	display: none !important;
}

.doreply-arrow {
	margin-left: 7px;
}

/* Desktop blur */
@media only screen and (min-width: 1024px) {
	:has(.doreply-guided-search-navigation-container > #primary-question) .cWidgetContainer--carousel {
		filter: blur(2.5px) brightness(.75);
		pointer-events: none;
		z-index: 0;
	}
}

@media only screen and (max-width: 1024px) {
	.doreply-guided-search-navigation-container doreply-guided-search-column:nth-child(1) {
		width: 100%;
	}

	.sms-placeholder {
		width: 100% !important;
	}

	.sms-placeholder .block {
		width: 100%;
	}

	.sms-placeholder .block:not(:first-child) {
		display: none;
	}

	.doreply-step:has(.doreply-arrow-back) {
		margin: 0;
	}

	.doreply-container {
		width: unset;
		height: 100%;
		margin-bottom: 0 !important;
	}

	.doreply-guided-search-navigation-container,
	.doreply-guided-search-navigation-content {
		grid-template-columns: repeat(1, 100%);
		gap: 0;
	}

	.hl-doreply-space {
		padding: var(--space-6) !important;
	}

	.doreply-guided-search-navigation-container {
		padding: 0;
	}

	.doreply-guidedsearch-animation {
		max-width: calc(100vw - 60px);
		width: 100%;
	}

	:has(.doreply-guided-search-navigation-container > #primary-question) .most-viewed-topic-block {
		filter: unset;
	}

	.navigation-container {
		margin-top: unset;
	}
}

@media only screen and (max-width: 767px) {
	.doreply-guidedsearch-animation {
		max-width: initial;
	}

	a.doreply-step:hover {
		color: var(--color-text);
	}
}

/* =============================
   DARK MODE
   html[data-ips-scheme="dark"]
================================ */

html[data-ips-scheme="dark"] .sms-wrapper,
html[data-ips-scheme="dark"]:has(.sms-wrapper) {
	background: var(--color-bg);
}

html[data-ips-scheme="dark"] .hl-card,
html[data-ips-scheme="dark"] .hl-doreply-card {
	background: var(--color-surface);
	border-color: var(--color-border);
	box-shadow: var(--shadow-card);
}

html[data-ips-scheme="dark"] .hl-doreply-header h2 {
	color: var(--color-text);
}

html[data-ips-scheme="dark"] .hl-doreply-header p {
	color: var(--color-text-secondary);
}

html[data-ips-scheme="dark"] .doreply-guidedsearch-animation,
html[data-ips-scheme="dark"] a.doreply-step {
	background: var(--color-surface);
	color: var(--color-text);
}

html[data-ips-scheme="dark"] .doreply-step {
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text);
}

html[data-ips-scheme="dark"] doreply-guided-search-step a {
	border-top: 1px solid var(--color-border);
}

html[data-ips-scheme="dark"] .doreply-step:has(.doreply-arrow-back) {
	border-bottom-color: var(--color-border);
}

html[data-ips-scheme="dark"] .doreply-step:has(.doreply-arrow-back) .font-semibold.doreply-label {
	color: var(--color-text-muted);
}

html[data-ips-scheme="dark"] a.doreply-step-active-state {
	background: var(--color-primary);
	color: #2C2738;
}

/* html[data-ips-scheme="dark"] a.doreply-step.doreply-step-active-state:hover {
	background: var(--color-primary-hover);
	color: #2C2738;
} */

html[data-ips-scheme="dark"] a.doreply-step .doreply-arrow {
	filter: brightness(0) invert(1);
}

html[data-ips-scheme="dark"] a.doreply-step.doreply-step-active-state .doreply-arrow {
	filter: brightness(0) invert(.15);
}

html[data-ips-scheme="dark"] .doreply-container #main-topic .hydrated:nth-last-child(-n + 2) a {
	background: var(--color-border-soft);
}

html[data-ips-scheme="dark"] .doreply-container #main-topic .hydrated:nth-last-child(-n + 2) a::before {
	background: var(--color-border);
}

html[data-ips-scheme="dark"] div#navigation-tooltip {
	background: var(--color-border-soft);
	color: var(--color-text);
	box-shadow: var(--shadow-hover);
}

html[data-ips-scheme="dark"] div#navigation-tooltip::before {
	border-top-color: var(--color-border-soft);
}

html[data-ips-scheme="dark"] #navigation-tooltip h2,
html[data-ips-scheme="dark"] .sms-tooltip-link {
	color: var(--color-text);
}

html[data-ips-scheme="dark"] .sms-placeholder .block {
	background: var(--color-border);
}

html[data-ips-scheme="dark"] .hydrated:has(.doreply-guided-search-feedback-icon-container) {
	background: transparent;
}

html[data-ips-scheme="dark"] .doreply-guided-search-navigation-container {
	background: transparent;
}