/*
 * tokens-instantfilter.css
 * Sub-merk InstantFilter. Wordt alleen geladen op /instantfilter en alle /instantfilter/* paden,
 * plus posts/pillars met de taxonomie 'plugin' = 'instantfilter'.
 *
 * Bron: bricks_global_variables (lichtpaars #5010B8, paars #2F0A60, donkerpaars #0D0128)
 * en de Bricks page-content van post 11.
 */

body.is-instantfilter {
	overflow-x: hidden; /* Voorkom horizontale scrollbars door uitstekende blobs */
	/* Brand kleuren (overrides van tokens-base defaults) */
	--brand-primary: #5010B8;
	--brand-secondary: #2F0A60;
	--brand-deep: #0D0128;
	--brand-primary-hover: #6020D2;
	--brand-primary-glow: rgba(80, 16, 184, 0.45);

	/* Functionele kleuren */
	--accent: #B5A2FF;
	--success: #34D399;
	--warning: #FBBF24;
	--danger: #F87171;

	/* Tekstkleuren */
	--text: #ffffff;
	--text-muted: rgba(255, 255, 255, 0.72);
	--text-subtle: rgba(255, 255, 255, 0.55);

	/* Surfaces */
	--surface: var(--brand-secondary);
	--surface-elev: rgba(255, 255, 255, 0.04);
	--surface-elev-2: rgba(255, 255, 255, 0.07);
	--surface-card: rgba(255, 255, 255, 0.04);
	--surface-card-hover: rgba(255, 255, 255, 0.07);

	/* Borders */
	--border: rgba(255, 255, 255, 0.12);
	--border-strong: rgba(255, 255, 255, 0.22);
	--border-brand: rgba(80, 16, 184, 0.55);

	/* Achtergronden / gradients */
	--bg-page: var(--brand-deep);
	--bg-page-grad: radial-gradient(circle at 100% 0%, var(--brand-primary) 0%, var(--brand-secondary) 30%, var(--brand-deep) 70%);
	--bg-hero: transparent;
	--bg-section: transparent;
	--bg-section-alt: rgba(0, 0, 0, 0.15);
	--bg-section-bright: linear-gradient(180deg, rgba(47, 10, 96, 0.5) 0%, rgba(80, 16, 184, 0.5) 100%);

	/* Achtergrond patroon */
	--bg-blob-1: url("../bg/instantfilter-blob-1.svg");
	--bg-blob-2: url("../bg/instantfilter-blob-2.svg");

	background-color: var(--bg-page);
	background-image: var(--bg-page-grad);
	background-repeat: no-repeat;
}

/* Knoppen — bron-getrouw aan de Bricks .btn-primary / .btn-secondary van de
 * /instantfilter pagina. Border-radius volgt de Bricks theme-style (10px). */

body.is-instantfilter .is-btn,
body.is-instantfilter .is-btn-primary,
body.is-instantfilter .is-btn-secondary,
body.is-instantfilter .is-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 12px 22px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	border: 0;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: transform var(--dur-base) var(--ease), filter var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
	text-decoration: none;
	white-space: nowrap;
}

/* Primary — gradient achtergrond. Tekst behoudt witte kleur boven gradient
 * (zoals in Bricks css: color: #fff). Gradient zit in --brand-gradient. */
body.is-instantfilter .is-btn-primary {
	background-image: var(--brand-gradient);
	background-color: var(--grad-from); /* fallback */
	color: #fff;
}

body.is-instantfilter .is-btn-primary:hover {
	transform: translateY(-1px);
	filter: brightness(1.06) saturate(1.05);
	box-shadow: 0 8px 24px rgba(0, 178, 255, 0.25);
}

body.is-instantfilter .is-btn-primary:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Secondary — glassy fill + gradient border via mask trick. */
body.is-instantfilter .is-btn-secondary {
	position: relative;
	background: rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--text);
}

body.is-instantfilter .is-btn-secondary::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: var(--brand-gradient);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

body.is-instantfilter .is-btn-secondary:hover {
	background: rgba(255, 255, 255, 0.08);
}

body.is-instantfilter .is-btn-ghost {
	background: transparent;
	color: var(--text-muted);
	padding: 10px 14px;
}

body.is-instantfilter .is-btn-ghost:hover {
	color: var(--text);
	background: var(--surface-elev);
}

body.is-instantfilter .is-btn-lg {
	padding: 16px 28px;
	font-size: 16px;
}

body.is-instantfilter .is-btn-sm {
	padding: 8px 14px;
	font-size: 13px;
}

/* Pricing card "Most popular" — krijgt de gradient-border-look ipv solid. */
body.is-instantfilter .is-card-pricing.is-popular {
	border-color: transparent;
	box-shadow: var(--shadow-lg);
}

body.is-instantfilter .is-card-pricing.is-popular::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: var(--brand-gradient);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* Pill / tag-look uit Bricks (#brxe-pesrhm): gradient bg met donkere tekst. */
body.is-instantfilter .is-card-pricing.is-popular .is-pill,
body.is-instantfilter .is-pill--grad {
	background: var(--brand-gradient);
	color: var(--grad-text-fg);
	-webkit-text-fill-color: var(--grad-text-fg);
}

/* Eyebrow gebruikt de gradient als tekst (signature look op /instantfilter). */
body.is-instantfilter .is-eyebrow {
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Selectie kleur */
body.is-instantfilter ::selection {
	background: var(--grad-to);
	color: var(--grad-text-fg);
}

/* Featured icon-boxes en CTA-blok krijgen de signature gradient. */
body.is-instantfilter .is-card__icon {
	background: var(--brand-gradient);
	color: var(--grad-text-fg);
}

body.is-instantfilter .is-card-pricing__features li svg {
	color: var(--grad-to);
}

body.is-instantfilter .is-changelog__entry::before {
	background: var(--brand-gradient);
}

body.is-instantfilter .is-prose blockquote {
	border-left-color: var(--grad-to);
}

body.is-instantfilter .is-cta-block {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #2F0A60 0%, #5010B8 100%);
}

body.is-instantfilter .is-cta-block::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--brand-gradient-soft);
	pointer-events: none;
	z-index: 0;
}

body.is-instantfilter .is-cta-block > * {
	position: relative;
	z-index: 1;
}