/*
 * Inviton overrides for the first layer of vanilla-cookieconsent.
 *
 * Two things are changed:
 *
 * 1. Layout. The "cloud" layout lays #c-inr out as a table with the text in a 70% cell and the
 *    buttons in the cell next to it, so above 688px the buttons sit beside the text. They belong
 *    on their own full-width row underneath, separated by a rule - the Cookiebot arrangement.
 *
 * 2. Three buttons instead of two. The library ships a primary and a secondary button and gives
 *    the filled "primary" look to #c-bns button:first-child. We inject a third one (reject all)
 *    as the first DOM child, so that :first-child rule has to be neutralised and every button
 *    styled by id. Accepting stays the prominent action, Customize is outlined, rejecting is
 *    plain text - still one click, still on the first layer, just visually quieter.
 */

/* 1. Text and buttons stacked, at every width */
#cm.cloud #c-inr,
#cm.cloud #c-inr-i {
	display: block !important;
	width: auto !important;
	min-width: 0 !important;
	padding-right: 0 !important;
}

/* Own row, full width, divided from the text above it */
#cm #c-bns,
#cm.cloud #c-bns {
	display: flex !important;
	align-items: center;
	gap: 0.75em;
	width: 100% !important;
	min-width: 0 !important;
	margin: 1.4em 0 0 !important;
	padding-top: 1.2em;
	border-top: 1px solid var(--cc-section-border, rgba(0, 0, 0, 0.1));
	float: none;
}

#cm #c-bns button {
	float: none !important;
	margin: 0 !important;
	width: auto;
}

/* 2. Reject all - least prominent, plain text */
#cm #c-bns #c-deny-bn {
	order: 1;
	margin-right: auto !important;
	background: transparent;
	border: none;
	color: var(--cc-btn-secondary-text, #2d4156);
	font-weight: 400;
	opacity: 0.85;
}

#cm #c-bns #c-deny-bn:hover,
#cm #c-bns #c-deny-bn:active {
	background: transparent;
	opacity: 1;
	text-decoration: underline;
}

/* Customize - outlined */
#cm #c-bns #c-s-bn {
	order: 2;
	background: transparent;
	border: 1px solid var(--cc-btn-secondary-bg, #eaeff2);
	color: var(--cc-btn-secondary-text, #2d4156);
}

#cm #c-bns #c-s-bn:hover,
#cm #c-bns #c-s-bn:active {
	background: var(--cc-btn-secondary-bg, #eaeff2);
}

/* Accept all - the prominent action. Restated because the injected reject button now holds
   :first-child, which is what the library keyed the filled style on. */
#cm #c-bns #c-p-bn {
	order: 3;
	background: var(--cc-btn-primary-bg, #2d4156);
	color: var(--cc-btn-primary-text, #fff);
}

#cm #c-bns #c-p-bn:hover,
#cm #c-bns #c-p-bn:active {
	background: var(--cc-btn-primary-hover-bg, #1d2e38);
	color: var(--cc-btn-primary-hover-text, #fff);
}

/* Undo the library's "first child is the primary button" rule for our injected one */
#cm #c-bns button:first-child:not(#c-p-bn) {
	background: transparent;
	color: var(--cc-btn-secondary-text, #2d4156);
}

@media screen and (max-width: 688px) {
	/* Stacked, accept on top - same order Cookiebot uses on mobile */
	#cm #c-bns,
	#cm.cloud #c-bns {
		flex-direction: column;
		align-items: stretch;
		gap: 0.625em;
	}

	#cm #c-bns button {
		width: 100%;
	}

	#cm #c-bns #c-p-bn {
		order: 1;
	}

	#cm #c-bns #c-s-bn {
		order: 2;
	}

	#cm #c-bns #c-deny-bn {
		order: 3;
		margin-right: 0 !important;
	}
}