/*
 * Plugin-owned styles. The upstream dist (cookieconsent.css) stays intact:
 * anything of ours lives here.
 */

/*
 * Larger type. Title, description and button labels are all sized in em
 * against this root, so bumping it scales every one of them proportionally.
 */
#cc-main {
	font-size: 18px;
}

#cc-main .cm__desc {
	line-height: 1.3;
}

/* Title closer to the description. */
#cc-main .cm__title + .cm__desc {
	margin-top: 12px;
}

/*
 * Consent banner (cloud layout): 688px content area (688px card + 16px
 * padding per side = 720px card), buttons in a single row below the text.
 *
 * Upstream's "cloud" layout puts the button column beside the text on wide
 * screens; here the whole button block moves below the text instead (still
 * collapsing to a vertical stack under the dist file's own <640px breakpoint,
 * whose rules are !important and are deliberately left to win there).
 */
#cc-main .cm--cloud {
	max-width: 720px;
}

/* No internal scrollbar on the description: let the card grow to fit it. */
#cc-main .cm--cloud .cm__desc {
	max-height: none;
}

/*
 * The !important beats the dist file's own <640px breakpoint, which forces
 * padding:0 on .cm__body — same issue as the other mobile overrides below.
 */
#cc-main .cm--cloud .cm__body {
	flex-direction: column;
	padding: 16px !important;
}

/*
 * The !important beats the dist file's own <640px breakpoint, which forces
 * 1.1rem of left/right padding on .cm__title and .cm__desc — same issue as
 * .cm__btns below, otherwise mobile stacks that on top of our 8px margin.
 */
#cc-main .cm--cloud .cm__texts,
#cc-main .cm--cloud .cm__title,
#cc-main .cm--cloud .cm__desc {
	padding: 0 !important;
}

/* 8px margin around the title+description block as a whole. */
#cc-main .cm--cloud .cm__texts {
	margin: 8px;
}

/*
 * 8px margin around the button block as a whole. The !important beats the
 * dist file's own <640px breakpoint, which forces 1.1rem of left/right
 * padding on .cm__btns — otherwise mobile ends up with that on top of our
 * 8px margin.
 */
#cc-main .cm--cloud .cm__btns {
	flex-direction: row;
	gap: 0.5rem;
	margin: 8px;
	padding: 0 !important;
	border-left: none;
	border-top: none;
	max-width: none;
}

/*
 * Collapses both button-group wrappers so all three buttons become direct
 * flex items of .cm__btns and line up in one row. Under the dist file's own
 * <640px breakpoint this reverts to real boxes (its rule is !important), so
 * the gap here is what spaces the two groups on mobile too.
 */
#cc-main .cm--cloud .cm__btn-group {
	display: contents;
	gap: 0.5rem;
}

#cc-main .cm--cloud .cm__btn {
	min-width: auto;
	flex: 1;
}

/*
 * Spacing between buttons (desktop row) and between the two button-groups
 * (mobile stack) comes from `gap` above, not margin — the dist file's mobile
 * breakpoint adds its own !important margin on top of it otherwise, which is
 * what made "Gestisci le preferenze" sit further away than the button gap.
 */
#cc-main .cm--cloud .cm__btn + .cm__btn,
#cc-main .cm--cloud .cm__btn-group + .cm__btn-group {
	margin-top: 0 !important;
}

/*
 * "Gestisci le preferenze": ghost/text button instead of the library's
 * default secondary chip, so it reads as a lighter action than Accetta/
 * Rifiuta. Button order in the DOM is unchanged (Accetta, Rifiuta, Gestisci).
 */
#cc-main .cm__btn--secondary {
	background: transparent;
	border-color: transparent;
	color: var(--cc-btn-primary-bg);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	width: 100%;
}

#cc-main .cm__btn--secondary:hover {
	background: transparent;
	border-color: transparent;
	color: var(--cc-btn-primary-hover-bg);
}

/*
 * Floating "manage cookies" trigger — GDPR art. 7(3) wants withdrawing consent
 * to be as easy as giving it, so the control follows the visitor on every page
 * instead of hiding in the footer.
 */

.ccews-manage {
	/* Local tokens: the button sits outside #cc-main, so it cannot inherit the
	   library's variables. Light values here, dark ones below. */
	--ccews-bg: #ffffff;
	--ccews-fg: #0a0a0a;
	--ccews-border: rgba(9, 9, 11, 0.12);
	--ccews-hover-bg: #f4f4f5;
	--ccews-ring: rgba(9, 9, 11, 0.35);

	position: fixed;
	right: 1rem;
	bottom: 1rem;
	/* Just under #cc-main (2147483647) so the modal and its overlay stay on top. */
	z-index: 2147483646;
	/* Keep clear of iOS home indicator / notches. */
	margin: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) 0;
}

.ccews-manage__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--ccews-border);
	border-radius: 9999px;
	background: var(--ccews-bg);
	color: var(--ccews-fg);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ccews-manage__btn:hover {
	background: var(--ccews-hover-bg);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 6px 18px rgba(0, 0, 0, 0.1);
}

.ccews-manage__btn:active {
	transform: scale(0.96);
}

.ccews-manage__btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--ccews-ring);
}

.ccews-manage__btn svg {
	width: 1.2rem;
	height: 1.2rem;
	pointer-events: none;
	flex-shrink: 0;
}

/* Label kept for screen readers only — the icon carries the meaning visually. */
.ccews-manage__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * While the banner or the preferences modal is open the trigger is redundant
 * (and, with disablePageInteraction, unclickable behind the overlay). The
 * library toggles these classes on <html>.
 */
.show--consent .ccews-manage,
.show--preferences .ccews-manage {
	opacity: 0;
	pointer-events: none;
	transform: translateY(0.5rem);
}

.ccews-manage {
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Dark theme: follow the library's own switch first, the OS preference after. */
.cc--darkmode .ccews-manage,
.ccews-manage.ccews-manage--dark {
	--ccews-bg: #18181b;
	--ccews-fg: #fafafa;
	--ccews-border: rgba(250, 250, 250, 0.16);
	--ccews-hover-bg: #27272a;
	--ccews-ring: rgba(250, 250, 250, 0.4);
}

@media (prefers-color-scheme: dark) {
	.ccews-manage {
		--ccews-bg: #18181b;
		--ccews-fg: #fafafa;
		--ccews-border: rgba(250, 250, 250, 0.16);
		--ccews-hover-bg: #27272a;
		--ccews-ring: rgba(250, 250, 250, 0.4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ccews-manage,
	.ccews-manage__btn {
		transition: none;
	}

	.ccews-manage__btn:active {
		transform: none;
	}
}