/**
 * Floating B2B Badge + Slide-out Panel
 *
 * Custom properties (set inline):
 *   --b2b-badge-bg    badge background (default #f5700a)
 *   --b2b-badge-fg    badge text color  (default #fff)
 *
 * @package DroxAuto
 */

/* ─── Wrapper ─── */
.b2b-float {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	z-index: 9990;
}

/* ─── Badge tab ─── */
.b2b-float__badge {
	position: fixed;
	top: var(--b2b-badge-top, 40%);
	transform: translateY(-50%);
	z-index: 9991;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--b2b-badge-w, 40px);
	padding: 18px 0;
	background: var(--b2b-badge-bg, #f5700a);
	color: var(--b2b-badge-fg, #fff);
	border: none;
	cursor: pointer;
	transition: width 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
	box-shadow: 0 4px 20px color-mix(in srgb, var(--b2b-badge-bg, #f5700a) 30%, transparent);
}

/* Right position (default) */
.b2b-float--right .b2b-float__badge {
	right: 0;
	border-radius: 8px 0 0 8px;
}

/* Left position */
.b2b-float--left .b2b-float__badge {
	left: 0;
	border-radius: 0 8px 8px 0;
}

.b2b-float__badge:hover {
	width: calc(var(--b2b-badge-w, 40px) + 4px);
	box-shadow: 0 6px 28px color-mix(in srgb, var(--b2b-badge-bg, #f5700a) 40%, transparent);
	filter: brightness(1.1);
}

.b2b-float__badge-text {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
	font-size: var(--b2b-badge-fs, 13px);
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}

/* Rotate text for right side (reads bottom-to-top) */
.b2b-float--right .b2b-float__badge-text {
	transform: rotate(180deg);
}

/* Hide badge when panel is open */
.b2b-float.is-open .b2b-float__badge {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* ─── Collapse toggle (small arrow on the badge) ─── */
.b2b-float__collapse-toggle {
	position: fixed;
	z-index: 9991;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 28px;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

/* Show collapse toggle on hover of the badge area */
.b2b-float--collapsible:hover .b2b-float__collapse-toggle,
.b2b-float--collapsible .b2b-float__badge:focus ~ .b2b-float__collapse-toggle {
	opacity: 1;
	pointer-events: auto;
}

.b2b-float__collapse-toggle:hover {
	background: rgba(0, 0, 0, 0.6);
}

/* Right position: collapse arrow sits at top-left of badge */
.b2b-float--right .b2b-float__collapse-toggle {
	top: calc(var(--b2b-badge-top, 40%) - 36px);
	right: 0;
	border-radius: 4px 0 0 4px;
}

/* Left position: collapse arrow sits at top-right of badge */
.b2b-float--left .b2b-float__collapse-toggle {
	top: calc(var(--b2b-badge-top, 40%) - 36px);
	left: 0;
	border-radius: 0 4px 4px 0;
}
.b2b-float--left .b2b-float__collapse-toggle svg {
	transform: rotate(180deg);
}

/* Hide collapse toggle when panel is open */
.b2b-float.is-open .b2b-float__collapse-toggle {
	opacity: 0;
	pointer-events: none;
}

/* ─── Expand handle (visible only when collapsed) ─── */
.b2b-float__expand-handle {
	position: fixed;
	z-index: 9991;
	top: var(--b2b-badge-top, 40%);
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 48px;
	background: var(--b2b-badge-bg, #f5700a);
	color: #fff;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.b2b-float__expand-handle:hover {
	width: 32px;
	box-shadow: 0 4px 16px color-mix(in srgb, var(--b2b-badge-bg, #f5700a) 40%, transparent);
}

/* Right: expand handle on right edge */
.b2b-float--right .b2b-float__expand-handle {
	right: 0;
	border-radius: 6px 0 0 6px;
}

/* Left: expand handle on left edge */
.b2b-float--left .b2b-float__expand-handle {
	left: 0;
	border-radius: 0 6px 6px 0;
}
.b2b-float--left .b2b-float__expand-handle svg {
	transform: rotate(180deg);
}

/* ─── Collapsed state ─── */
.b2b-float.is-collapsed .b2b-float__badge {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.b2b-float.is-collapsed .b2b-float__collapse-toggle {
	opacity: 0;
	pointer-events: none;
}

.b2b-float.is-collapsed .b2b-float__expand-handle {
	opacity: 1;
	pointer-events: auto;
}

/* Pulse animation on the handle to signal "click me" */
.b2b-float.is-collapsed .b2b-float__expand-handle {
	animation: b2b-handle-pulse 2s ease-in-out 0.5s 2;
}

@keyframes b2b-handle-pulse {
	0%, 100% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
	50% { box-shadow: 0 2px 20px color-mix(in srgb, var(--b2b-badge-bg, #f5700a) 50%, transparent); }
}

/* ─── Overlay ─── */
.b2b-float__overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9992;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.b2b-float.is-open .b2b-float__overlay {
	opacity: 1;
	pointer-events: auto;
}

/* ─── Panel ─── */
.b2b-float__panel {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 380px;
	max-width: 90vw;
	z-index: 9993;
	background: var(--b2b-panel-bg, #1a1a1a);
	color: var(--b2b-panel-hl, #fff);
	overflow-y: auto;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	padding: 32px 28px 28px;
}

/* Texture overlay layer for panel styles */
.b2b-float__panel::after {
	content: '';
	position: fixed;
	top: 0;
	bottom: 0;
	width: 380px;
	max-width: 90vw;
	pointer-events: none;
	z-index: 0;
}

/* Panel content above texture */
.b2b-float__panel > * {
	position: relative;
	z-index: 1;
}

/* ─── Panel Style 1: Solid ─── */
.b2b-panel--bg-solid {
	background: var(--b2b-panel-bg, #1a1a1a);
}

/* ─── Panel Style 2: Gradient Glow ─── */
.b2b-panel--bg-gradient-glow {
	background:
		radial-gradient(ellipse 80% 60% at 80% 20%, color-mix(in srgb, var(--b2b-accent, #f5700a), transparent 85%) 0%, transparent 60%),
		radial-gradient(ellipse 60% 80% at 10% 90%, color-mix(in srgb, var(--b2b-accent, #f5700a), transparent 92%) 0%, transparent 50%),
		linear-gradient(180deg, var(--b2b-panel-bg, #1a1a1a) 0%, color-mix(in srgb, var(--b2b-panel-bg, #1a1a1a), #000 10%) 100%);
}

/* ─── Panel Style 3: Diagonal Stripes ─── */
.b2b-panel--bg-diagonal {
	background: linear-gradient(180deg, var(--b2b-panel-bg, #1a1a1a) 0%, color-mix(in srgb, var(--b2b-panel-bg, #1a1a1a), #000 8%) 100%);
}
.b2b-panel--bg-diagonal::after {
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 40px,
		color-mix(in srgb, var(--b2b-accent, #f5700a), transparent 96%) 40px,
		color-mix(in srgb, var(--b2b-accent, #f5700a), transparent 96%) 41px
	);
}

/* ─── Panel Style 4: Mesh Gradient ─── */
.b2b-panel--bg-mesh {
	background:
		radial-gradient(ellipse 70% 50% at 0% 0%, color-mix(in srgb, var(--b2b-accent, #f5700a), transparent 86%) 0%, transparent 50%),
		radial-gradient(ellipse 70% 50% at 100% 100%, color-mix(in srgb, var(--b2b-accent, #f5700a), transparent 88%) 0%, transparent 50%),
		var(--b2b-panel-bg, #1a1a1a);
}

/* ─── Panel Style 5: Carbon Fiber ─── */
.b2b-panel--bg-carbon {
	background: var(--b2b-panel-bg, #1a1a1a);
}
.b2b-panel--bg-carbon::after {
	background-image:
		radial-gradient(
			circle at 1px 1px,
			color-mix(in srgb, var(--b2b-accent, #f5700a), transparent 94%) 1px,
			transparent 0
		);
	background-size: 6px 6px;
}

/* ─── Panel Style 6: Accent Fade ─── */
.b2b-panel--bg-accent-fade {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--b2b-accent, #f5700a), var(--b2b-panel-bg, #1a1a1a) 80%) 0%,
		var(--b2b-panel-bg, #1a1a1a) 40%
	);
}

/* Right panel */
.b2b-float--right .b2b-float__panel {
	right: 0;
	transform: translateX(100%);
	border-left: 3px solid var(--b2b-accent, #f5700a);
}

.b2b-float--right.is-open .b2b-float__panel {
	transform: translateX(0);
}

/* Left panel */
.b2b-float--left .b2b-float__panel {
	left: 0;
	transform: translateX(-100%);
	border-right: 3px solid var(--b2b-accent, #f5700a);
}

.b2b-float--left.is-open .b2b-float__panel {
	transform: translateX(0);
}

/* ─── Panel header ─── */
.b2b-float__panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.b2b-float__panel-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--b2b-accent, #f5700a), transparent 88%);
	border: 1.5px solid var(--b2b-accent, #f5700a);
	color: var(--b2b-accent, #f5700a);
	display: flex;
	align-items: center;
	justify-content: center;
}

.b2b-float__close {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #999;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.b2b-float__close:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.2);
}

/* ─── Panel content ─── */
.b2b-float__headline {
	font-family: "Barlow Condensed", system-ui, sans-serif;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.3px;
	margin: 0 0 12px;
	color: var(--b2b-panel-hl, #fff);
}

.b2b-float__desc {
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--b2b-panel-txt, #999);
	margin: 0 0 28px;
}

/* ─── Benefits ─── */
.b2b-float__benefits {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.b2b-float__benefit {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--b2b-benefit, #e0e0e0);
}

.b2b-float__benefit-icon {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--b2b-accent, #f5700a);
}

/* ─── CTA button ─── */
.b2b-float__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 15px 24px;
	background: var(--b2b-cta-bg, #f5700a);
	color: var(--b2b-cta-color, #fff);
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 8px;
	transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
	margin-bottom: 20px;
}

.b2b-float__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 24px color-mix(in srgb, var(--b2b-cta-bg, #f5700a) 30%, transparent);
	filter: brightness(1.1);
	color: var(--b2b-cta-color, #fff);
}

/* ─── Footer note ─── */
.b2b-float__footer-note {
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 12.5px;
	color: var(--b2b-panel-txt, #666);
	text-align: center;
	margin: auto 0 0;
	padding-top: 16px;
}

.b2b-float__footer-note a {
	color: var(--b2b-accent, #f5700a);
	text-decoration: none;
	font-weight: 600;
	transition: opacity 0.2s;
}

.b2b-float__footer-note a:hover {
	opacity: 0.8;
}

/* ─── Device visibility ─── */
@media (min-width: 992px) {
	.b2b-float--hide-desktop { display: none !important; }
}
@media (min-width: 576px) and (max-width: 991px) {
	.b2b-float--hide-tablet { display: none !important; }
}
@media (max-width: 575px) {
	.b2b-float--hide-mobile { display: none !important; }

	.b2b-float__panel {
		width: 100vw;
		max-width: 100vw;
		padding: 24px 20px 20px;
	}

	.b2b-float__headline {
		font-size: 22px;
	}
}