/* =========================================================
   Theme Demo Bar — preview switcher for commercial demos
   Author  : Edi Suherlan | audhighasu.com | audhighasu@gmail.com
   ========================================================= */

:root {
	--ah-demo-bar-h: 52px;
}

html.ah-demo-bar-on body {
	padding-top: var(--ah-demo-bar-h) !important;
}

/* Keep sticky theme headers below the demo bar */
html.ah-demo-bar-on .pkp_structure_head,
html.ah-demo-bar-on .nx-header,
html.ah-demo-bar-on .sm-header,
html.ah-demo-bar-on header.pkp_structure_head {
	top: var(--ah-demo-bar-h) !important;
}

/* Flipbook modal sits under the bar (z-index / 92vh) — hide bar while reading */
html.ah-demo-bar-on body.nx-pdf-open,
html.ah-demo-bar-on body.sm-pdf-open,
html.ah-demo-bar-on body.ah-pdf-open,
html.ah-demo-bar-on body.mb-pdf-open,
html.ah-demo-bar-on body.ak-pdf-open {
	padding-top: 0 !important;
}

html.ah-demo-bar-on body.nx-pdf-open .ah-demo-bar,
html.ah-demo-bar-on body.sm-pdf-open .ah-demo-bar,
html.ah-demo-bar-on body.ah-pdf-open .ah-demo-bar,
html.ah-demo-bar-on body.mb-pdf-open .ah-demo-bar,
html.ah-demo-bar-on body.ak-pdf-open .ah-demo-bar {
	display: none !important;
}

/* Keep flipbook above the bar if CSS load order races */
html.ah-demo-bar-on .nx-pdf-modal,
html.ah-demo-bar-on .sm-pdf-modal,
html.ah-demo-bar-on .ah-pdf-modal,
html.ah-demo-bar-on .mb-pdf-modal,
html.ah-demo-bar-on .ak-pdf-modal {
	z-index: 11000 !important;
}

.ah-demo-bar {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 10050 !important;
	height: var(--ah-demo-bar-h);
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0 0.85rem;
	box-sizing: border-box;
	background: #12141a;
	color: #f4f5f7;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-family: "Segoe UI", system-ui, sans-serif;
	font-size: 0.82rem;
	line-height: 1.2;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.ah-demo-bar__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;
	font-weight: 800;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: #fff;
	text-decoration: none;
}

.ah-demo-bar__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #3dd68c;
	box-shadow: 0 0 0 3px rgba(61, 214, 140, 0.22);
}

.ah-demo-bar__hint {
	flex: 0 0 auto;
	opacity: 0.72;
	white-space: nowrap;
}

.ah-demo-bar__note {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 42rem;
	margin: 0;
	padding: 0.2rem 0.65rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.05);
	color: rgba(244, 245, 247, 0.88);
	font-size: 0.74rem;
	font-weight: 550;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ah-demo-bar__note-short {
	display: none;
}

/* —— Theme dropdown —— */
.ah-demo-bar__select {
	position: relative;
	flex: 0 1 auto;
	min-width: 0;
	max-width: min(240px, 42vw);
	z-index: 2;
}

.ah-demo-bar__select-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	width: 100%;
	min-height: 32px;
	padding: 0.28rem 0.7rem 0.28rem 0.4rem;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	text-align: left;
	transition: background .15s ease, border-color .15s ease;
}

.ah-demo-bar__select-btn:hover,
.ah-demo-bar__select.is-open .ah-demo-bar__select-btn {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.32);
}

.ah-demo-bar__select-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ah-demo-bar__caret {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid rgba(255, 255, 255, 0.85);
	margin-left: 0.15rem;
	transition: transform .15s ease;
}

.ah-demo-bar__select.is-open .ah-demo-bar__caret {
	transform: rotate(180deg);
}

.ah-demo-bar__menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	min-width: 220px;
	max-height: min(70vh, 360px);
	overflow-y: auto;
	padding: 0.35rem;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: #1a1d26;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
	scrollbar-width: thin;
}

.ah-demo-bar__menu[hidden] {
	display: none !important;
}

.ah-demo-bar__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.65rem;
	border-radius: 8px;
	color: #f4f5f7 !important;
	text-decoration: none !important;
	font-weight: 650;
	transition: background .12s ease;
}

.ah-demo-bar__option:hover {
	background: rgba(255, 255, 255, 0.08);
}

.ah-demo-bar__option.is-active {
	background: rgba(255, 255, 255, 0.12);
}

.ah-demo-bar__option-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ah-demo-bar__swatch {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35);
	flex: 0 0 auto;
}

.ah-demo-bar__check {
	flex: 0 0 auto;
	font-size: 0.72rem;
	opacity: 0.9;
	color: #3dd68c;
}

.ah-demo-bar__order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	flex: 0 0 auto;
	min-height: 30px;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	background: linear-gradient(135deg, #128C7E, #25D366);
	color: #fff !important;
	font-weight: 800;
	font-size: 0.74rem;
	text-decoration: none !important;
	white-space: nowrap;
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 4px 12px rgba(37, 211, 102, 0.28);
	transition: filter 0.15s ease, transform 0.15s ease;
}

.ah-demo-bar__order:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: #fff !important;
}

.ah-demo-bar__order-icon {
	display: inline-block;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	background: center / contain no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20.5 3.5A11.8 11.8 0 0 0 12.05 0C5.5 0 .2 5.3.2 11.85c0 2.1.55 4.1 1.6 5.9L0 24l6.4-1.65a11.8 11.8 0 0 0 5.65 1.45h.05c6.55 0 11.85-5.3 11.85-11.85 0-3.15-1.25-6.15-3.45-8.45zM12.1 21.5h-.04a9.8 9.8 0 0 1-5-1.35l-.36-.2-3.8 1 1.02-3.7-.24-.38a9.8 9.8 0 0 1-1.5-5.2C2.18 6.4 6.6 2 12.06 2a9.8 9.8 0 0 1 9.85 9.85c0 5.45-4.42 9.85-9.81 9.85zm5.4-7.35c-.3-.15-1.75-.85-2.02-.95-.27-.1-.47-.15-.67.15-.2.3-.77.95-.95 1.15-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.48-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.5-.5-.67-.5h-.57c-.2 0-.52.07-.8.37-.27.3-1.05 1.02-1.05 2.5s1.07 2.9 1.22 3.1c.15.2 2.1 3.2 5.1 4.48.71.3 1.27.49 1.7.63.72.23 1.37.2 1.88.12.57-.09 1.75-.72 2-1.41.25-.7.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35z'/%3E%3C/svg%3E");
}

.ah-demo-bar__order-short {
	display: none;
}

.ah-demo-bar__buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin-left: auto;
	min-height: 30px;
	padding: 0.3rem 0.85rem;
	border-radius: 999px;
	background: #7A1F2B;
	color: #fff !important;
	font-weight: 800;
	text-decoration: none !important;
	white-space: nowrap;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.ah-demo-bar__buy:hover {
	filter: brightness(1.08);
}

@media (max-width: 1100px) {
	.ah-demo-bar__note-full {
		display: none;
	}

	.ah-demo-bar__note-short {
		display: inline;
	}

	.ah-demo-bar__order-full {
		display: none;
	}

	.ah-demo-bar__order-short {
		display: inline;
	}
}

@media (max-width: 720px) {
	.ah-demo-bar {
		gap: 0.45rem;
		padding: 0 0.55rem;
		font-size: 0.76rem;
	}

	.ah-demo-bar__hint {
		display: none;
	}

	.ah-demo-bar__brand span:not(.ah-demo-bar__dot) {
		display: none;
	}

	.ah-demo-bar__note {
		display: none;
	}

	.ah-demo-bar__select {
		max-width: min(200px, 48vw);
	}

	.ah-demo-bar__buy {
		padding: 0.28rem 0.65rem;
	}
}