/* =========================================================
   HiveCRM Top Bar — frontend styles
   Visual design matches the approved HiveCRM palette: white text
   and surfaces on the admin-configurable background color, no
   yellow/gold, 100% responsive down to small phones.
   ========================================================= */

.hc-topbar {
	box-sizing: border-box;
	position: relative; /* positioning context for the pattern layers, overridden per behavior mode below */
	overflow: hidden; /* contains the dot grid / blurred glow so they never bleed outside the bar */
	isolation: isolate;
	width: 100%;
	background: var(--hc-bar-bg, #C23600);
	color: #fff;
	padding: 12px 20px;
	z-index: 99999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.hc-topbar * { box-sizing: border-box; }

/* ---- behavior modes ---- */
.hc-topbar--sticky {
	position: sticky;
	top: 0;
}
.hc-topbar--hide-on-scroll {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	transition: transform 0.25s ease;
}
.hc-topbar--hide-on-scroll.hc-tb-hidden {
	transform: translateY(-100%);
}
.hc-topbar-spacer {
	width: 100%;
}

/* account for the WP admin toolbar so the bar never sits underneath it */
body.admin-bar .hc-topbar--sticky,
body.admin-bar .hc-topbar--hide-on-scroll {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar .hc-topbar--sticky,
	body.admin-bar .hc-topbar--hide-on-scroll {
		top: 46px;
	}
}

.hc-topbar-inner {
	position: relative;
	z-index: 3;
	max-width: 1290px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 22px;
}

/* =========================================================
   Background style: Pattern (optional, alongside the solid
   color background set via the admin color picker). The base
   color always comes from --hc-bar-bg; these two layers sit on
   top of it. Fixed cream tone regardless of the chosen base
   color, matching the badge plate and close button surfaces so
   everything reads as one consistent, deliberately light accent
   rather than something derived from whatever color is picked.
   ========================================================= */
.hc-tb-dots {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: radial-gradient(rgba(255, 251, 245, 0.22) 0.6px, transparent 1px);
	background-size: 4px 4px;
	pointer-events: none;
}
.hc-tb-glow {
	position: absolute;
	left: 50%;
	bottom: -60%;
	width: 46%;
	height: 180%;
	transform: translateX(-50%);
	background: #FFF8ED;
	opacity: 0.35;
	border-radius: 50%;
	filter: blur(20px);
	z-index: 2;
	pointer-events: none;
}

/* ---- Left: identity ---- */
.hc-tb-identity {
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.hc-tb-badge {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Neutral light "plate" behind the badge image. This guarantees
	   contrast between the mascot/badge and the bar's background
	   color no matter which color is picked or which image is
	   uploaded — the plate's own color never depends on either. */
	background: #FFF8ED;
	border-radius: 50%;
	padding: 6px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.hc-tb-badge img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.hc-tb-headline {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

.hc-tb-spacer-left { flex: 1 1 auto; }

/* ---- Discount ---- */
.hc-tb-offer {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
}
.hc-tb-pct-group {
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.hc-tb-pct-group .pct {
	font-size: 2rem;
	font-weight: 800;
	color: #fff;
	line-height: 1;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.hc-tb-pct-group .off {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
}

/* ---- Countdown: cohesive glass pill ---- */
.hc-tb-timer {
	display: flex;
	align-items: stretch;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 10px;
	padding: 6px 4px;
}
.hc-tb-timer .seg {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
}
.hc-tb-timer .seg .num {
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.hc-tb-timer .seg .lbl {
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.65);
	margin-top: 3px;
}
.hc-tb-timer .tdiv {
	width: 1px;
	background: rgba(255,255,255,0.18);
	align-self: stretch;
}

.hc-tb-spacer { flex: 1 1 auto; }

/* ---- CTA ---- */
.hc-tb-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--hc-bar-bg, #C23600);
	font-size: 0.9375rem;
	font-weight: 800;
	text-decoration: none;
	border-radius: 8px;
	padding: 11px 20px;
	white-space: nowrap;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.hc-tb-cta:hover,
.hc-tb-cta:focus {
	opacity: 0.92;
	transform: translateY(-1px);
	color: var(--hc-bar-bg, #C23600);
}
.hc-tb-cta svg { width: 16px; height: 16px; flex: 0 0 auto; }

.hc-tb-close {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.14);
	color: rgba(255,255,255,0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 0;
	margin-left: 4px;
}
.hc-tb-close:hover { background: rgba(255,255,255,0.26); }

/* ================= RESPONSIVE ================= */
@media (max-width: 1050px) {
	.hc-tb-headline { display: none; }
	.hc-tb-spacer-left { display: none; }
}

@media (max-width: 780px) {
	.hc-tb-offer { gap: 14px; }
	.hc-tb-timer .seg { padding: 0 7px; }
}

@media (max-width: 680px) {
	.hc-topbar-inner {
		flex-wrap: wrap;
		row-gap: 10px;
		justify-content: center;
		padding-right: 28px;
	}
	.hc-tb-badge { width: 36px; height: 36px; padding: 4px; }
	.hc-tb-spacer { display: none; }
	.hc-tb-pct-group .pct { font-size: 1.5rem; }
	.hc-tb-timer .seg { padding: 0 6px; }
	.hc-tb-timer .seg .num { font-size: 0.9375rem; }
	.hc-tb-cta { padding: 9px 16px; font-size: 0.875rem; }
	.hc-tb-close { position: absolute; top: 2px; right: 0; margin-left: 0; }
}

@media (max-width: 420px) {
	.hc-tb-timer { display: none; }
}