/**
 * IT-Check / hover-layout tabs block.
 * Desktop: hover tabs with synced column heights.
 * Mobile: slide-over drawer from the right.
 */

/* Section wrapper */
.it-hovers.dark-section .section-sub-title:before {
	border: 1px solid var(--it-theme-color-1) !important;
	color: var(--it-theme-color-1) !important;
}

.it-hovers {
	min-height: 800px;
	position: relative;
}

.it-hovers:before {
	content: '';
	background-image: url("../images/shape-34.png");
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

section.it-hovers h2.section-title,
.dark-section h2.it-section-title {
	color: white !important;
	margin: 20px auto 45px auto;
	font-size: 32px !important;
}

.it-hovers .tab-content h4 {
	color: var(--theme-color);
}

/* Main layout */
.hover-layout {
	display: flex;
	gap: 40px;
}

.hover-layout .wp-block-columns {
	width: 100%;
	align-items: stretch !important;
}

.hover-layout.it-content1180 > div {
	width: 100%;
}

.hover-left {
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 100%;
}

.hover-right {
	position: relative;
	box-sizing: border-box;
	min-width: 0;
}

.hover-right h3 {
	margin-bottom: 25px;
}

.hover-right ul {
	padding-left: 15px;
	color: #787878;
	margin: 20px 0;
}

.hover-right ul + p:last-child {
	color: black;
}

.hover-right .wp-block-list li:before {
	content: "\e921";
	font-family: "icomoon";
	position: absolute;
	top: 1px;
	left: -20px;
	color: var(--theme-color);
}

/* Left tab items */
.hover-item {
	position: relative;
	padding: 30px;
	background: #ffffff;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 2px solid transparent;
}

.hover-item strong {
	color: black;
	font-size: 18px;
}

.hover-item.active strong {
	color: #ffffff;
	font-size: 18px;
}

.hover-item .wp-block-yuky-icon-font-awesome {
	margin-right: 15px;
}

.hover-item .wp-block-yuky-icon-font-awesome .box-icon {
	width: 45px;
}

.hover-item .wp-block-yuky-icon-font-awesome .box-icon i,
.hover-item .wp-block-yuky-icon-font-awesome .box-icon i:before {
	color: var(--it-theme-color-1);
}

.hover-item.active .wp-block-yuky-icon-font-awesome .box-icon i,
.hover-item.active .wp-block-yuky-icon-font-awesome .box-icon i:before {
	color: white;
}

.hover-item:hover,
.hover-item.active {
	transform: translateY(-2px);
}

.hover-item p {
	display: block !important;
}

.it-tabs-with-icons .hover-item .wp-block-group__inner-container .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	align-self: center;
}

.it-tabs-with-icons .hover-item p {
	line-height: 22px;
}

.hover-buttons-wrapper {
	display: flex;
	gap: 15px;
	flex-direction: column;
	flex-shrink: 0;
}

.hover-buttons-wrapper p {
	margin-bottom: 0;
}

.hover-buttons-wrapper .hover-item {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.hover-buttons-wrapper .hover-item::before {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: -35px;
	width: 35px;
	height: 60px;
	background: #fff;
	clip-path: polygon(100% 49%, 0 0, 0 100%);
	transition: all 0.3s ease;
}

.hover-buttons-wrapper .hover-item:hover,
.hover-buttons-wrapper .hover-item.active {
	background-color: var(--theme-color);
}

.hover-buttons-wrapper .hover-item.active p {
	color: white;
}

.hover-buttons-wrapper .hover-item.active:before {
	background-color: var(--theme-color);
}

.hover-buttons-wrapper .hover-item:hover p {
	color: white;
}

/* Right content panels */
.tab-content {
	display: none;
	color: black;
	padding: 50px;
	animation: itCheckTabsFadeTab 0.35s ease;
	height: 100%;
	position: relative;
	overflow-wrap: anywhere;
}

.hover-right .tab-content {
	display: none !important;
	background-color: #fff;
}

.hover-right .tab-content.active {
	display: block !important;
}

.hover-right .tab-content .wp-block-group__inner-container {
	padding-top: 50px;
}

.tab-content h3 {
	font-size: 32px;
}

.tab-content h2,
.tab-content h3,
.tab-content h4 {
	color: black;
	margin-top: 0;
}

.tab-content p {
	opacity: 1;
	line-height: 1.7;
	color: black;
}

.tab-content ul li {
	color: #000000;
    position: relative;
}

.hover-right,
.tab-content,
.tab-content * {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Watermark icon (glyph set by it-check-tabs.js) */
.it-check-tabs .tab-content::before {
	content: var(--it-check-tab-icon, none);
	font-family: var(
		--it-check-tab-icon-font-family,
		"Font Awesome 6 Pro",
		"Font Awesome 6 Free"
	);
	font-weight: var(--it-check-tab-icon-font-weight, 900);
	position: absolute;
	right: 20px;
	bottom: 20px;
	font-size: 180px;
	color: rgba(0, 0, 0, 0.06);
	line-height: 1;
	z-index: 0;
	pointer-events: none;
}

.it-check-tabs .tab-content > .wp-block-group__inner-container,
.it-check-tabs .tab-content > .it-check-tabs-drawer-close {
	position: relative;
	z-index: 1;
}

@keyframes itCheckTabsFadeTab {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Desktop */
@media (min-width: 769px) {
	.hover-layout {
		align-items: flex-start;
	}

	.hover-layout .wp-block-columns {
		align-items: flex-start !important;
	}

	.hover-layout .hover-right {
		display: flex;
		flex-direction: column;
	}

	.hover-layout .hover-right .tab-content.active {
		display: flex !important;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 100%;
		height: 100%;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.hover-layout .hover-right .tab-content.active > .wp-block-group__inner-container {
		flex: 1 1 auto;
		min-height: 100%;
		box-sizing: border-box;
	}

	.hover-buttons-wrapper {
		flex-shrink: 0 !important;
	}
}

/* Mobile drawer */
@media (max-width: 768px) {
	.it-hovers {
		min-height: 0;
	}

	.it-hovers > div > .it-content1180 {
		padding: 10px;
	}

	.hover-layout .wp-block-columns {
		flex-direction: column;
	}

	.hover-buttons-wrapper .hover-item::before {
		display: none !important;
	}

	.hover-layout .hover-right {
		position: static;
		height: 0 !important;
		min-height: 0 !important;
		overflow: visible;
		padding: 0;
		margin: 0;
	}

	.hover-layout .hover-right .tab-content {
		display: block !important;
		position: fixed;
		top: 0;
		right: 0;
		width: min(100vw, 440px);
		max-width: 100%;
		height: 100%;
		height: 100dvh;
		padding: 56px 24px 32px;
		margin: 0;
		box-sizing: border-box;
		background: #fff;
		box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 100001;
		visibility: hidden;
		pointer-events: none;
		transform: translateX(100%);
		transition: transform 0.32s ease, visibility 0.32s ease;
		animation: none;
	}

	.hover-layout.it-check-tabs-drawer-open .hover-right .tab-content.active {
		visibility: visible;
		pointer-events: auto;
		transform: translateX(0);
	}

	.hover-layout .hover-right .tab-content .wp-block-group__inner-container {
		padding-top: 0;
	}

	.hover-layout .hover-right .tab-content .wp-block-columns {
		flex-direction: column !important;
	}

	.hover-layout .hover-right .tab-content .wp-block-column {
		flex-basis: 100% !important;
	}

	.tab-content h3 {
		font-size: 24px;
	}

	.it-check-tabs .tab-content::before {
		font-size: 120px;
		right: 12px;
		bottom: 12px;
	}
}

/* Drawer backdrop (injected by JS) */
.it-check-tabs-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 100000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.32s ease, visibility 0.32s ease;
	pointer-events: none;
}

.it-check-tabs-drawer-backdrop.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

body.it-check-tabs-drawer-open {
	overflow: hidden;
}

/* Drawer close button (injected by JS) */
.it-check-tabs-drawer-close {
	position: absolute;
	top: -22px;
	right: 12px;
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.06);
	color: #333;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.it-check-tabs-drawer-close:hover,
.it-check-tabs-drawer-close:focus-visible {
	background: var(--theme-color, #3c72fc);
	color: #fff;
	outline: none;
}

@media (max-width: 768px) {
	.it-check-tabs-drawer-close {
		display: flex;
	}
}

@media (min-width: 769px) {
	.it-check-tabs-drawer-close {
		display: none !important;
	}
}