/**
 * Cookiebot consent banner styling for actabl.com.
 *
 * Written against the current Usercentrics template (opt-in consent with
 * category toggles). It replaces a block that used to print inline on
 * wp_body_open from the database, which targeted
 * #CybotCookiebotDialogBodyButtonAccept and #CybotCookiebotDialogBodyButtonDetails.
 * Those IDs do not exist in this template, so most of that block was dead.
 *
 * !important is load-bearing throughout: Cookiebot injects its own stylesheet
 * at runtime, after this file.
 *
 * Layout note: the template is a two-column bar, copy and toggles on the left,
 * buttons on the right. That right column is roughly 119px wide and sized by
 * the template, so the action buttons stack. Forcing the older horizontal row
 * means overriding the footer width and re-checking it on every Cookiebot
 * release. Stacked is deliberate.
 */

/* Typography ------------------------------------------------------------- */

#CybotCookiebotDialog,
#CybotCookiebotDialog div,
#CybotCookiebotDialog p,
#CybotCookiebotDialog span,
#CybotCookiebotDialog a,
#CybotCookiebotDialog label,
#CybotCookiebotDialog button {
	font-family: Inter, sans-serif;
	color: #131768;
	font-size: 12px;
	line-height: 1.5;
}

#CybotCookiebotDialogBodyContentTitle {
	display: none !important;
}

/* Shell ------------------------------------------------------------------ */

#CybotCookiebotDialog {
	border: none !important;
	box-shadow: 0 -2px 24px rgba( 19, 23, 104, .12 ) !important;
}

#CybotCookiebotDialogBody {
	max-width: 1000px;
	padding: 0 90px 20px;
}

#CybotCookiebotDialogBodyContent {
	padding: 0 !important;
}

#CybotCookiebotDialogBodyContentText {
	text-align: left;
	margin: 25px 0;
}

#CybotCookiebotDialogBodyContentText a {
	color: #FF928F;
	text-decoration: none;
}

#CybotCookiebotDialogBodyContentText a:hover {
	color: #6478E0;
}

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

#CybotCookiebotDialogBodyLevelButtonsSelectPane {
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
}

.CybotCookiebotDialogBodyLevelButtonDescription {
	font-size: 12px !important;
	color: #131768 !important;
}

.CybotCookiebotDialogBodyLevelButtonSlider {
	background-color: #c8cfe8 !important;
}

#CybotCookiebotDialog input[type="checkbox"]:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
	background-color: #6478E0 !important;
}

/* "Show details" reads as a text link ------------------------------------ */

#CybotCookiebotDialogBodyEdgeMoreDetails {
	margin: 0 12px 0 0;
}

#CybotCookiebotDialogBodyEdgeMoreDetailsLink {
	color: #131768 !important;
	text-decoration: underline;
	font-size: 12px !important;
}

#CybotCookiebotDialogBodyEdgeMoreDetailsLink:hover {
	color: #6478E0 !important;
}

/* Action buttons --------------------------------------------------------- */

#CybotCookiebotDialog #CybotCookiebotDialogBodyButtonsWrapper {
	display: flex;
	flex-direction: column;
	gap: 8px !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogBodyButton {
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 10px 16px !important;
	border: 1px solid #6478E0 !important;
	border-radius: 0 !important;
	background-color: #fff !important;
	color: #131768 !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	transition: color .3s, background-color .3s !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogBodyButton:hover {
	background-color: #6478E0 !important;
	border-color: #6478E0 !important;
	color: #fff !important;
}

/*
 * Allow all carries the primary emphasis. The bare ID loses to the class rule
 * above on specificity, so it is qualified with the class it already has.
 */
#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll.CybotCookiebotDialogBodyButton {
	background-color: #6478E0 !important;
	border-color: #6478E0 !important;
	color: #fff !important;
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll.CybotCookiebotDialogBodyButton:hover {
	background-color: #131768 !important;
	border-color: #131768 !important;
}

#CybotCookiebotDialogPoweredbyCybot {
	opacity: .5;
}

/* Details pane ----------------------------------------------------------- */

#CybotCookiebotDialogDetailBody {
	max-width: 800px;
}

/* Mobile ----------------------------------------------------------------- */

@media screen and ( max-width: 768px ) {

	#CybotCookiebotDialogBody {
		padding: 0 20px 20px;
	}

	#CybotCookiebotDialogBodyContentText {
		margin-top: 10px;
	}

	#CybotCookiebotDialog .CybotCookiebotDialogBodyButton {
		padding: 12px 11px !important;
	}
}