﻿/* =========== © 2024 Centroarts.com - https://honista.com =========== */

@media (min-width: 992px) {
	.scan-qr { position: relative; display: block !important; }
	.scan-qr-btn { width: 64px; height: 64px; padding: 20px; }
	.scan-qr-drop {
		opacity: 0; visibility: hidden;
		position: absolute; z-index: 97; left: 100%; top: 50%; transform: translate(8px, -50%);
		display: flex; align-items: center; border-radius: var(--drop-radius); background-color: var(--drop-bg);
		box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.16); padding: 8px;
		transition: transform .2s ease .1s, opacity .2s ease .1s, visibility .2s ease .1s;
	}
	.scan-qr-drop img { border-radius: inherit; }
	.scan-qr-drop-stringi {
		position: absolute; left: 0; top: 50%; fill: var(--drop-bg);
		width: 32px; height: 64px; margin-left: -32px; margin-top: -32px; pointer-events: none;
	}
	.scan-qr:hover .scan-qr-drop { transform: translate(4px, -50%); opacity: 1; visibility: visible; }

	:dir(rtl) .scan-qr-drop { right: 100%; left: auto; transform: translate(-8px, -50%); }
	:dir(rtl) .scan-qr:hover .scan-qr-drop { transform: translate(-4px, -50%); }
	:dir(rtl) .scan-qr-drop-stringi { left: auto; right: 0; margin-right: -32px; transform: rotate(180deg); }
}

/* Dark Blocks */
.section-radial-dark { padding: 0; --radial-dark-pad: var(--wrp-pad); --radial-dark-rad: 32px; color: var(--section-dark-text); }
.section-radial-dark .wrp { padding-top: var(--radial-dark-pad); padding-bottom: var(--radial-dark-pad); }
.section-radial-dark:not(.section-radial-dark-left):not(.section-radial-dark-right) {
	background-color: var(--section-dark-bg);
}

.section-radial-dark-right .wrp::after, .section-radial-dark-left .wrp::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
}
.section-radial-dark-right .wrp::after, .section-radial-dark-left .wrp::after {
	top: 8px; bottom: 8px; z-index: -1;
	border-radius: calc(var(--radial-dark-rad) - 8px);
	box-shadow: inset 0 0 0 1px rgba(var(--color-second-rgb), 0.2);
	background-image: linear-gradient(126deg, rgba(var(--color-primary-rgb), 0.3) -3%, rgba(var(--color-primary-rgb), 0.0) 18.41%);
	left: calc((var(--radial-dark-pad) - var(--wrp-pad) - 8px) / -1); right: calc((var(--radial-dark-pad) - var(--wrp-pad) - 8px) / -1);
}

.section-radial-dark .grid { --grid-cols: 2; --grid-gap: 24px; }

@media (min-width: 1100px) {
	.section-radial-dark .grid { --grid-cols: 4; --grid-gap: 48px; }
}
@media (max-width: 1449px) {
	.section-radial-dark { position: relative; z-index: 1; background-color: var(--section-dark-bg); padding: 8px; border-radius: var(--radial-dark-rad); }
	.section-radial-dark .wrp::after {
		left: 8px; right: 8px;
	}
}
@media (min-width: 1450px) {
	.section-radial-dark { overflow: hidden; --radial-dark-pad: 76px; --radial-dark-rad: 64px; }
	.section-radial-dark .wrp { position: relative; z-index: 1; }
	.section-radial-dark-right .wrp::before, .section-radial-dark-left .wrp::before {
		content: ""; position: absolute; z-index: -1; pointer-events: none;
		top: 0; bottom: 0; width: 100vw;
		background-color: var(--section-dark-bg);
		border-radius: var(--radial-dark-rad);
	}
	.section-radial-dark-right .wrp::before { left: calc((var(--radial-dark-pad) - var(--wrp-pad)) / -1); border-top-right-radius: 0; border-bottom-right-radius: 0; }
	.section-radial-dark-left .wrp::before { right: calc((var(--radial-dark-pad) - var(--wrp-pad)) / -1); border-top-left-radius: 0; border-bottom-left-radius: 0; }

	.section-radial-dark-right .wrp::after, .section-radial-dark-left .wrp::after {
		left: calc((var(--radial-dark-pad) - var(--wrp-pad) - 8px) / -1); right: calc((var(--radial-dark-pad) - var(--wrp-pad) - 8px) / -1);
	}
}

/* Tabs */
.tabcontent { display: none; }

@media (min-width: 1200px) {
	.section-tabs .wrp { display: flex; gap: 48px; }
	.section-tabs .tabs-list { display: block !important; flex: 0 0 35%; max-width: 400px; padding-right: 32px; user-select: none; }
	.section-tabs .tabs-cont { flex: 1 1 auto; min-width: 0; }
	.tabcontent.active { display: block !important; }
	.tab-label { display: none !important; }
}
@media (max-width: 1199px) {
	.tabcontent { padding-bottom: var(--wrp-pad); }
	.trigger-action:checked ~ .tabcontent { display: block !important; }
}

.tab-btn { display: flex; align-items: center; padding: 10px 0; cursor: pointer; margin-bottom: 0; min-width: 0; }
.tab-btn.active, .trigger-action:checked ~ .tab-btn { color: var(--color-primary); }
.tab-btn > * { transition: opacity .15s ease; }
.tab-btn > span { flex: 1 1 auto; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; opacity: .8; min-width: 0; }
.tab-btn > .ic { min-width: 24px; margin-right: 8px; opacity: .3; transition: transform .2s ease; }
:dir(rtl) .tab-btn > .ic { margin-left: 8px; margin-right: 0; }

.tab-btn:hover > .ic { color: var(--color-primary); }
.tab-btn:hover > span { opacity: 1; }

.tab-btn.active > .ic, .tab-btn.active > span, .tab-btn:hover > .ic,
.trigger-action:checked ~ .tab-btn, .trigger-action:checked ~ .tab-btn > .ic { opacity: 1; }

.tab-label { border-top: 1px solid rgba(var(--color-text-rgb), 0.1); padding: 16px 0; }
.tab-label > .ic { opacity: 1; color: var(--color-primary); }
.trigger-action:checked ~ .tab-label > .ic { transform: rotate(90deg); }

/* Faq */
@media (min-width: 1200px) {
	.section-faq .wrp { display: flex; }
	.section-faq .wrp > .title { flex: 0 0 30%; max-width: 320px; margin-bottom: 0; margin-right: 32px; }
	.section-faq .wrp > .expand-list { flex: 1 1 auto; }

	:dir(rtl) .section-faq .wrp > .title { margin-left: 32px; margin-right: 0; }
}