/**
 * Floating Widget - Frontend Styles
 *
 * Scoped under #surecookie-public-root for high specificity
 * to prevent theme overrides without using !important.
 *
 * @package SureCookiePro
 * @since x.x.x
 */

#surecookie-public-root button.surecookie-floating-widget {
	/* Default size; JSX overrides inline per small/medium/large. */
	--sc-fw-size: 48px;
	position: fixed;
	z-index: 999998;
	width: var(--sc-fw-size);
	height: var(--sc-fw-size);
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--surecookie-banner-primary-color, #1e3a5f);
	color: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
	padding: 0;
	outline: none;
	text-decoration: none;
}

#surecookie-public-root button.surecookie-floating-widget:hover,
#surecookie-public-root button.surecookie-floating-widget:focus {
	background-color: var(--surecookie-banner-primary-color, #1e3a5f);
	color: #fff;
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	outline: none;
	text-decoration: none;
}

/*
 * Custom-logo (pill) variant: white background and auto width so the button
 * hugs the logo. min-width, padding, and radius scale with --sc-fw-size so
 * every size stays proportional.
 */
#surecookie-public-root button.surecookie-floating-widget.surecookie-floating-widget--has-logo,
#surecookie-public-root button.surecookie-floating-widget.surecookie-floating-widget--has-logo:hover,
#surecookie-public-root button.surecookie-floating-widget.surecookie-floating-widget--has-logo:focus {
	background-color: #fff;
	width: auto;
	min-width: var(--sc-fw-size);
	padding: 0 calc(var(--sc-fw-size) * 0.2);
	border-radius: calc(var(--sc-fw-size) * 0.25);
	box-sizing: border-box;
}

/* Logo image: keep aspect ratio, cap height to 60% of the button, width to 3x. */
#surecookie-public-root button.surecookie-floating-widget--has-logo img {
	display: block;
	width: auto;
	height: auto;
	max-height: calc(var(--sc-fw-size) * 0.6);
	max-width: calc(var(--sc-fw-size) * 3);
}

@media (prefers-reduced-motion: reduce) {
	#surecookie-public-root button.surecookie-floating-widget {
		transition: none;
	}
}

/* Device visibility: desktop only — hide on mobile */
@media (max-width: 782px) {
	#surecookie-public-root button.surecookie-floating-widget.surecookie-floating-widget--desktop {
		display: none;
	}
}

/* Device visibility: mobile only — hide on desktop */
@media (min-width: 783px) {
	#surecookie-public-root button.surecookie-floating-widget.surecookie-floating-widget--mobile {
		display: none;
	}
}