/* ==========================================================================
   QI Top Bar — orange header strip with glowing light sweep.
   Desktop: items side by side. Mobile: one at a time, cross-fading.
   ========================================================================== */

.qi-topbar {
	--qi-tb-bg: #FF7100;
	--qi-tb-fg: #ffffff;
	--qi-tb-h: 42px;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: var(--qi-tb-h);
	padding: 0 20px;
	background: var(--qi-tb-bg);
	color: var(--qi-tb-fg);
	font-size: 14px;
	line-height: 1.3;
	box-sizing: border-box;
}

.qi-topbar *,
.qi-topbar *::before,
.qi-topbar *::after {
	box-sizing: border-box;
}

/* Soft breathing glow + a thin highlight along the top edge */
.qi-topbar--glow::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -60% 20%;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, .38), transparent 62%);
	animation: qi-tb-breathe 4s ease-in-out infinite;
}

.qi-topbar--glow::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
	opacity: .7;
}

/* Sweeping streaks of white light */
.qi-topbar__shine {
	position: absolute;
	z-index: -1;
	top: -50%;
	bottom: -50%;
	left: 0;
	width: 160px;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
	filter: blur(2px);
	transform: translateX(-200px) skewX(-22deg);
	animation: qi-tb-sweep 4.5s cubic-bezier(.45, .05, .25, 1) infinite;
	pointer-events: none;
}

.qi-topbar__shine--2 {
	width: 60px;
	opacity: .55;
	animation-delay: 2.25s;
}

/* Layout */
.qi-topbar__inner {
	display: flex;
	align-items: center;
	gap: 22px;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 6px 0;
}

.qi-topbar--center  .qi-topbar__inner { justify-content: center; }
.qi-topbar--left    .qi-topbar__inner { justify-content: flex-start; }
.qi-topbar--right   .qi-topbar__inner { justify-content: flex-end; }
.qi-topbar--between .qi-topbar__inner { justify-content: space-between; }

.qi-topbar--between .qi-topbar__sep {
	display: none;
}

/* Item */
.qi-topbar__item,
.qi-topbar__item:visited {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--qi-tb-fg);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	text-shadow: 0 1px 2px rgba(120, 45, 0, .25);
	transition: opacity .3s;
}

a.qi-topbar__item:hover,
a.qi-topbar__item:focus-visible {
	color: var(--qi-tb-fg);
}

a.qi-topbar__item:hover .qi-topbar__value {
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.qi-topbar__item:focus-visible {
	outline: 2px solid var(--qi-tb-fg);
	outline-offset: 3px;
	border-radius: 4px;
}

.qi-topbar__icon {
	position: relative;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.qi-topbar__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, .7);
	animation: qi-tb-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}

.qi-topbar__item:nth-of-type(2) .qi-topbar__icon::after {
	animation-delay: 1.2s;
}

.qi-topbar__icon svg {
	width: 14px;
	height: 14px;
}

a.qi-topbar__item:hover .qi-topbar__icon svg {
	animation: qi-tb-ring .5s ease-in-out 2;
}

.qi-topbar__label {
	font-weight: 500;
	opacity: .9;
}

.qi-topbar__label::after {
	content: ":";
}

.qi-topbar__value {
	font-weight: 700;
	letter-spacing: .01em;
}

.qi-topbar__sep {
	width: 1px;
	height: 18px;
	background: rgba(255, 255, 255, .5);
}

/* ==========================================================================
   Mobile: one item at a time, cross-fading
   ========================================================================== */
@media (max-width: 767px) {
	.qi-topbar {
		padding: 0 14px;
		font-size: 13.5px;
	}

	.qi-topbar__inner {
		display: grid;
		justify-items: center;
		align-items: center;
	}

	.qi-topbar--left .qi-topbar__inner  { justify-items: start; }
	.qi-topbar--right .qi-topbar__inner { justify-items: end; }

	.qi-topbar__sep {
		display: none;
	}

	.qi-topbar__item {
		grid-area: 1 / 1;
		opacity: 0;
		transform: translateY(10px);
		filter: blur(3px);
		pointer-events: none;
		transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1), filter .6s ease;
	}

	.qi-topbar__item.is-active {
		opacity: 1;
		transform: none;
		filter: none;
		pointer-events: auto;
	}

	.qi-topbar__item.is-leaving {
		opacity: 0;
		transform: translateY(-10px);
		filter: blur(3px);
	}

	/* The label is hidden on very small screens to keep one clean line */
	.qi-topbar__label {
		display: none;
	}
}

@media (min-width: 400px) and (max-width: 767px) {
	.qi-topbar__label {
		display: inline;
	}
}

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes qi-tb-sweep {
	0%   { transform: translateX(-200px) skewX(-22deg); }
	60%, 100% { transform: translateX(calc(100vw + 200px)) skewX(-22deg); }
}

@keyframes qi-tb-breathe {
	0%, 100% { opacity: .35; transform: scaleX(.9); }
	50%      { opacity: .9; transform: scaleX(1.1); }
}

@keyframes qi-tb-ping {
	0%        { transform: scale(1); opacity: .8; }
	75%, 100% { transform: scale(1.7); opacity: 0; }
}

@keyframes qi-tb-ring {
	25% { transform: rotate(-14deg); }
	75% { transform: rotate(14deg); }
}

@media (prefers-reduced-motion: reduce) {
	.qi-topbar *,
	.qi-topbar *::before,
	.qi-topbar *::after,
	.qi-topbar::before {
		animation: none !important;
		transition: none !important;
	}

	.qi-topbar__shine {
		display: none;
	}
}