/* =========== © 2025 Centroarts.com - https://smartecho.com =========== */

/* -- Header -- */
html { scroll-padding-top: calc(var(--h-header) + 64px); }

#se-header-line { position: fixed; top: var(--h-header); left: 0; right: 0; z-index: 101; height: 1px; opacity: 0; }
.se-header a { text-decoration: none !important; }

@media (max-width: 991px) {
	.se-header { height: var(--h-header); }
	.se-header .wrp { padding-left: 0; padding-right: 0; }
	.se-head {
		--bg-header: hsl(var(--c-header-blue));
		--c-el-header: hsl(var(--c-header-blue-text));
		--c-el-header-h: hsl(var(--c-header-blue-text-h));

		position: fixed; top: 0; left: 0; right: 0; z-index: 101;
		padding-left: var(--p-wrp); padding-right: var(--p-wrp); height: var(--h-header);
		background-color: var(--bg-header); color: var(--c-el-header);
	}

	.header-alt .se-head {
		--bg-header: hsl(var(--c-header-body));
		--c-el-header: hsl(var(--c-header-body-text));
		--c-el-header-h: hsl(var(--c-header-body-text-h));
	}
}
@media (min-width: 992px) {
	.se-header {
		--bg-header: hsl(var(--c-header-blue));
		--c-el-header: hsl(var(--c-header-blue-text));
		--c-el-header-h: hsl(var(--c-header-blue-text-h));

		position: sticky; top: 0; z-index: 101; height: var(--h-header);
		background-color: var(--bg-header); color: var(--c-el-header);
	}
	.se-header.header-alt {
		--bg-header: hsl(var(--c-header-body));
		--c-el-header: hsl(var(--c-header-body-text));
		--c-el-header-h: hsl(var(--c-header-body-text-h));
	}
	.se-header .wrp { display: flex; align-items: center; }
}

/* Logo */
.se-logo {
	display: inline-flex; align-items: center; height: var(--h-header);
	color: inherit !important; cursor: pointer; margin-right: 16px;
}
.se-logo svg { fill: currentColor; width: 133px; height: 32px; }

@media (max-width: 991px), (min-width: 1240px) {
	.se-logo { margin-right: 32px; }
	.se-logo svg { width: 166px; height: 70px; }
}

.se-hmenu > a {
	display: block; padding: 8px 10px; line-height: 24px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	color: hsl(var(--c-primary)); transition: opacity .12s ease; opacity: .9;
}
.se-hmenu > a:hover { opacity: 1; }
.se-headtools { display: flex; align-items: center; }

@media (max-width: 991px) {
	.se-head { display: flex; align-items: center; flex: 1 1 auto; }
	.se-head .se-logo { margin-right: auto; }
	.mobile-menu-btn {
		display: flex !important; align-items: center; justify-content: center;
		margin-right: -12px; padding: 20px; width: 64px; height: 64px; border: 0 none; color: inherit !important; cursor: pointer;
		background: none !important; border: 0 none !important;
	}
	.mobile-menu-btn .ic { width: 24px; height: 24px; }

	.se-headsecond {
		--c-el-header: hsl(var(--c-header-body-text));
		--c-el-header-h: hsl(var(--c-header-body-text-h));

		position: fixed; right: 0; top: 0; z-index: 103; margin: 8px; max-width: calc(100% - 16px); min-width: 280px;
		opacity: 0; visibility: hidden; transform: scale(0.8); transform-origin: 100% 0;
		background-color: hsl(var(--c-modal-bg)); border-radius: var(--rd-mmenu);
		box-shadow: 0 0 8px 1px hsla(var(--c-header-drop-shadow),0.05);
		max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
		transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
	}
	.se-headsecond::-webkit-scrollbar { display: none; }
	.se-headsecond .close-btn { margin: 8px; }
	.mobile-menu-overlay {
		position: fixed; inset: 0; z-index: 101; background-color: var(--c-overlay);
		transition: opacity .3s ease, visibility .3s ease;
		opacity: 0; visibility: hidden;
	}

	html.mo body { overflow: hidden; }
	html.mo .se-headsecond { transform: scale(1); }
	html.mo .mobile-menu-overlay, html.mo .se-headsecond { opacity: 1; visibility: visible; }

	.se-headtools { padding: 20px 16px; }
	.head-btns { padding: 32px 28px; }
	.head-btns .btn { width: 100%; }
	.head-btns .btn + .btn { margin-top: 8px; }

	.lang-drop {
		display: block !important;
		transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
	}
	.se-lang.open .lang-drop { visibility: visible; opacity: 1; transform: translateY(0); }

	.se-hmenu { padding: 0 18px; }

	html:not(.dark) .lang-btn { color: hsl(var(--c-primary)) !important; }
	html.dark .se-hmenu > a { color: inherit !important; }
	html.dark .se-headsecond { box-shadow: 0 0 8px 1px hsla(var(--c-header-drop-shadow),0.2); }
}
@media (max-width: 519px) {
	.se-headsecond {
		top: auto; left: 0; bottom: 0; max-width: 100%;
		margin: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
		transform: translateY(32px);
	}
	html.mo .se-headsecond { transform: translateY(0); }
}
@media (min-width: 992px) {
	.se-headsecond, .se-hmenu { display: flex !important; align-items: center; flex: 1 1 auto; min-width: 0; }
	.se-hmenu { order: -1; }
	.se-hmenu > a { font-size: 15px; color: inherit !important; }

	#mmenu-close { display: none !important; }
	.lang-btn:hover, .se-lang:hover .lang-btn { opacity: 1; }

	.head-btns { display: flex; align-items: center; margin-left: 8px; }
	.head-btns .btn { --h-btn: 40px; --fs-btn: 13px; }
	.head-btns .btn + .btn { margin-left: 8px; }

	.se-header:not(.header-alt) .head-btns .btn-fill {
		--c-btn-text: var(--c-btn-fill-text-inv);
		--c-btn-fill: var(--c-btn-fill-bg-inv);
	}
	.se-header:not(.header-alt) .head-btns .btn-border {
		--c-btn-border-text: var(--c-btn-border-text-inv);
		--c-btn-border: var(--c-btn-border-inv);
	}
	html.dark .se-header.header-alt .head-btns .btn-fill {
		--c-btn-text: var(--c-btn-fill-text-inv);
		--c-btn-fill: var(--c-btn-fill-bg-inv);
	}
}
@media (min-width: 1240px) {
	.head-btns { margin-left: 16px; }
	.se-hmenu > a { padding: 8px 16px; }
}
@media (max-width: 991px), (min-width: 1240px) {
	.head-btns .btn-cont::before { content: attr(data-addon)" "; }
}

/* Language */
.se-lang { position: relative; z-index: 3; }
.lang-btn, .darkmod-btn {
	display: flex; align-items: center; cursor: pointer; height: 40px; color: inherit !important;
	border: 0 none; background: none !important; outline: none; user-select: none;
	font-size: 13px; line-height: 20px;
}
.lang-btn { padding: 10px 12px; opacity: .8; transition: opacity .2s ease; }
.se-lang.open .lang-btn { opacity: 1; }
.lang-btn::after { content: attr(aria-label); }
.lang-btn .ic { margin-right: 4px; }

@media (min-width: 992px) {
	.se-lang:hover .lang-drop { visibility: visible; opacity: 1; transform: translateY(0); }
	.lang-drop {
		display: block !important;
		transition: opacity .25s ease .12s, visibility .25s ease .12s, transform .25s ease .12s;
	}
	.lang-btn:hover, .se-lang:hover .lang-btn { opacity: 1; }
}
@media (min-width: 1240px) {
	.se-lang + .darkmod-btn { margin-left: 16px; }
}

.lang-drop {
	visibility: hidden; opacity: 0; transform: translateY(-8px);

	position: absolute; left: 0; top: 100%; z-index: 3; margin-top: 8px; min-width: 200px; line-height: 20px; font-size: 14px;
	background-color: hsla(var(--c-header-drop),0.8); padding: 12px; border-radius: 20px;
	box-shadow: 0 0 8px 1px hsla(var(--c-header-drop-shadow),0.05);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lang-drop > a { display: flex; padding: 10px 12px; border-radius: 8px; color: hsl(var(--c-primary)); }
.lang-drop > a:hover { background-color: hsla(var(--c-primary),0.1); }
.lang-drop > a::after { content: attr(data-abb); margin-left: 8px; opacity: .5; }
.lang-drop > a > span { flex: 1 1 auto; min-width: 0; }

html.dark .lang-drop > a { color: hsl(var(--c-text)); }
html.dark .lang-drop > a:hover { background-color: hsla(var(--c-text),0.1); }

/* Dark Mod */
.darkmod-btn { padding: 6px 4px; }
.darkmod-btn-in { position: relative; z-index: 1; width: 52px; height: 28px; display: flex; align-items: center; }
.darkmod-btn-in::before {
	content: ""; position: absolute; z-index: -1; inset: 0;
	border-radius: 14px; background-color: var(--c-el-header); opacity: .1;
}
.darkmod-btn-in::after {
	content: ""; position: absolute; z-index: 1; left: 0; top: 0;
	width: 20px; height: 20px; margin: 4px; border-radius: 50%;
	background-color: var(--c-el-header); opacity: .8; transform: translate(24px);
	transition: transform .2s ease, opacity .2s ease;
}
.darkmod-btn:hover .darkmod-btn-in::after { opacity: 1; }

.darkmod-btn-in .ic {
	display: block; width: 20px; height: 20px; margin: 4px;
	opacity: .8; transition: transform .2s ease, opacity .2s ease;
}
.darkmod-btn-in .ic + .ic { margin-left: 0; }
.darkmod-btn-in .ic-dm2 { opacity: 0; }

html.dark .darkmod-btn-in::after { transform: translate(0px); }
html.dark .darkmod-btn-in .ic-dm1 { opacity: 0; }
html.dark .darkmod-btn-in .ic-dm2 { opacity: .8; }