/* ==========================================================================
   Amondi CMP — RODE brand skin.

   Loaded only when the plugin is active. The plugin itself is left untouched
   so it stays drop-in reusable across projects; everything brand-specific
   lives here and uses the tokens from theme.css.
   ========================================================================== */

.amondi-cmp-banner {
	font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	border-top: 4px solid var(--rode-red);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.14);
}

/*
 * The plugin dismisses the banner by sliding it off-screen with a transform,
 * leaving it visible to the accessibility tree: its buttons still take keyboard
 * focus and it still reports role="dialog" aria-modal="true". Adding
 * visibility:hidden takes it out of both the tab order and the a11y tree.
 * The delay keeps the slide-out animation intact on the way down, and drops it
 * on the way up so the banner appears immediately.
 */
.amondi-cmp-banner {
	transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s;
}

.amondi-cmp-banner:not(.amondi-cmp-banner-visible) {
	visibility: hidden;
}

.amondi-cmp-banner.amondi-cmp-banner-visible {
	visibility: visible;
	transition: transform 0.3s ease-in-out, visibility 0s linear 0s;
}

.amondi-cmp-banner-content {
	max-width: var(--rode-wrap);
	padding: var(--rode-gap-24) var(--rode-gutter);
}

.amondi-cmp-banner-header h2 {
	font-size: var(--rode-fs-h4);
	line-height: var(--rode-lh-h4);
	font-weight: var(--rode-fw-extrabold);
	text-transform: uppercase;
	color: var(--rode-black);
}

.amondi-cmp-description {
	font-size: var(--rode-fs-body-sm);
	line-height: var(--rode-lh-body-sm);
	color: var(--rode-black);
}

.amondi-cmp-privacy-link,
.amondi-cmp-banner a {
	color: var(--rode-red);
	font-weight: var(--rode-fw-bold);
	text-decoration: underline;
}

/* ---- Category toggles ---- */

.amondi-cmp-category {
	background: var(--rode-sand-soft);
	border-radius: var(--rode-radius);
}

.amondi-cmp-toggle-label strong {
	font-size: var(--rode-fs-label);
	font-weight: var(--rode-fw-bold);
	color: var(--rode-black);
}

.amondi-cmp-toggle-description {
	font-size: 13px;
	color: #444;
}

/* Enabled-by-choice = brand green; required-and-locked = green too, but the
   cursor already signals it cannot be changed. */
.amondi-cmp-toggle input:checked + .amondi-cmp-toggle-slider,
.amondi-cmp-toggle input:disabled + .amondi-cmp-toggle-slider {
	background-color: var(--rode-green);
}

/* ---- Buttons: square, uppercase, extrabold — same language as .rode-btn ---- */

.amondi-cmp-btn {
	border-radius: 0;
	padding: 16px 28px;
	font-size: var(--rode-fs-label);
	line-height: var(--rode-lh-label);
	font-weight: var(--rode-fw-extrabold);
	letter-spacing: 0.32px;
	text-transform: uppercase;
	transition: background-color var(--rode-transition), color var(--rode-transition);
}

.amondi-cmp-btn-primary {
	background-color: var(--rode-red);
	color: var(--rode-white);
}

.amondi-cmp-btn-primary:hover {
	background-color: #b8152a;
}

.amondi-cmp-btn-secondary {
	background-color: var(--rode-white);
	color: var(--rode-black);
	box-shadow: inset 0 0 0 2px var(--rode-black);
}

.amondi-cmp-btn-secondary:hover {
	background-color: #f0f0f0;
}

.amondi-cmp-btn:focus-visible,
.amondi-cmp-floating-icon:focus-visible {
	outline: var(--rode-focus);
	outline-offset: 2px;
}

/* ---- Floating "change preferences" button ---- */

.amondi-cmp-floating-icon {
	background-color: var(--rode-red);
	/* Clear of the sticky footer content on small screens. */
	bottom: 20px;
	right: 20px;
}

.amondi-cmp-floating-icon:hover {
	background-color: #b8152a;
}

.amondi-cmp-floating-icon:focus {
	outline: var(--rode-focus);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.amondi-cmp-banner-footer {
		justify-content: stretch;
	}

	.amondi-cmp-btn {
		flex: 1 1 100%;
		text-align: center;
	}
}