/*
 * Oh-Sano Design 3: matches the site's active theme.
 * Colours, font and button style come from --oh-sano-theme-* variables that consent.js reads from
 * the theme on page load; each has a neutral fallback for classic themes. Accept all and Reject all
 * are identical (the theme's button style), side by side, Reject all first; Manage preferences is a
 * quieter outlined button below. Admin colour settings, printed after this file, override the buttons.
 * Loaded only when Design 3 is selected.
 */

/* Card colours: the theme's, unless Background colour / Text colour are set in Settings
   (printed after this file on the same selector). On <html>, so placeholders and the Re-open
   button outside #cc-main share them. */
html.oh-sano-design3 {
	--oh-sano-d3-bg: var(--oh-sano-theme-bg, #fff);
	--oh-sano-d3-text: var(--oh-sano-theme-text, #1e1e1e);
}

html.oh-sano-design3 #cc-main {

	--cc-font-family: var(--oh-sano-theme-font, inherit);
	--cc-bg: var(--oh-sano-d3-bg);
	--cc-primary-color: var(--oh-sano-d3-text);
	--cc-secondary-color: var(--oh-sano-d3-text);
	--cc-link-color: var(--oh-sano-d3-text);
	--cc-separator-border-color: color-mix(in srgb, var(--oh-sano-d3-text) 15%, transparent);
	--cc-modal-border-radius: 12px;
	--cc-btn-border-radius: var(--oh-sano-theme-btn-radius, 4px);

	/* Accept all and Reject all: identical, in the theme's button style. */
	--cc-btn-primary-bg: var(--oh-sano-theme-btn-bg, #1e1e1e);
	--cc-btn-primary-color: var(--oh-sano-theme-btn-color, #fff);
	--cc-btn-primary-border-color: var(--cc-btn-primary-bg);
	--cc-btn-primary-hover-bg: color-mix(in srgb, var(--cc-btn-primary-bg) 85%, var(--oh-sano-d3-text));
	--cc-btn-primary-hover-color: var(--cc-btn-primary-color);
	--cc-btn-primary-hover-border-color: var(--cc-btn-primary-hover-bg);

	/* Manage preferences and other secondary buttons: outlined in the text colour. */
	--cc-btn-secondary-bg: transparent;
	--cc-btn-secondary-color: var(--oh-sano-d3-text);
	--cc-btn-secondary-border-color: color-mix(in srgb, var(--oh-sano-d3-text) 45%, transparent);
	--cc-btn-secondary-hover-bg: color-mix(in srgb, var(--oh-sano-d3-text) 8%, transparent);
	--cc-btn-secondary-hover-color: var(--oh-sano-d3-text);
	--cc-btn-secondary-hover-border-color: var(--oh-sano-d3-text);

	--cc-toggle-on-bg: var(--cc-btn-primary-bg);
	--cc-toggle-on-knob-bg: var(--oh-sano-d3-bg);
	--cc-toggle-off-bg: color-mix(in srgb, var(--oh-sano-d3-text) 35%, var(--oh-sano-d3-bg));
	--cc-toggle-off-knob-bg: var(--oh-sano-d3-bg);
	--cc-toggle-enabled-icon-color: var(--cc-btn-primary-bg);
	--cc-toggle-disabled-icon-color: var(--oh-sano-d3-text);
	--cc-toggle-readonly-bg: color-mix(in srgb, var(--cc-btn-primary-bg) 55%, var(--oh-sano-d3-bg));
	--cc-toggle-readonly-knob-bg: var(--oh-sano-d3-bg);
	--cc-toggle-readonly-knob-icon-color: var(--cc-btn-primary-bg);

	--cc-section-category-border: var(--cc-separator-border-color);
	--cc-cookie-category-block-bg: color-mix(in srgb, var(--oh-sano-d3-text) 4%, var(--oh-sano-d3-bg));
	--cc-cookie-category-block-border: var(--cc-separator-border-color);
	--cc-cookie-category-block-hover-bg: color-mix(in srgb, var(--oh-sano-d3-text) 8%, var(--oh-sano-d3-bg));
	--cc-cookie-category-block-hover-border: var(--cc-separator-border-color);
	--cc-cookie-category-expanded-block-bg: color-mix(in srgb, var(--oh-sano-d3-text) 3%, var(--oh-sano-d3-bg));
	--cc-cookie-category-expanded-block-hover-bg: color-mix(in srgb, var(--oh-sano-d3-text) 6%, var(--oh-sano-d3-bg));
	--cc-footer-bg: color-mix(in srgb, var(--oh-sano-d3-text) 4%, var(--oh-sano-d3-bg));
	--cc-footer-color: var(--oh-sano-d3-text);
	--cc-footer-border-color: var(--cc-separator-border-color);
	--cc-overlay-bg: rgba(0, 0, 0, 0.45);
}

html.oh-sano-design3 #cc-main .cm,
html.oh-sano-design3 #cc-main .pm {
	border: 1px solid var(--cc-separator-border-color);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* Buttons use the theme's button font and weight. */
html.oh-sano-design3 #cc-main .cm__btn,
html.oh-sano-design3 #cc-main .pm__btn {
	font-family: var(--oh-sano-theme-btn-font, inherit);
	font-weight: var(--oh-sano-theme-btn-weight, 600);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Reject all | Accept all side by side at equal widths, Reject all first; Manage preferences below. */
html.oh-sano-design3 #cc-main .cm__btn-group:first-child {
	display: flex;
	gap: 0.5rem;
}

html.oh-sano-design3 #cc-main .cm__btn-group:first-child .cm__btn {
	flex: 1 1 0;
	min-width: 0;
	margin: 0 !important;
}

html.oh-sano-design3 #cc-main .cm__btn[data-role="necessary"] {
	order: -1;
}

html.oh-sano-design3 #cc-main .cm__btn:focus-visible,
html.oh-sano-design3 #cc-main .pm__btn:focus-visible {
	outline: 3px solid var(--cc-btn-primary-bg);
	outline-offset: 2px;
}

/* Re-open Link (floating button): the admin's button colours if set, else the theme's. */
html.oh-sano-design3 .oh-sano-floating {
	background: var(--oh-sano-btn-bg, var(--oh-sano-theme-btn-bg, #1e1e1e));
	color: var(--oh-sano-btn-color, var(--oh-sano-theme-btn-color, #fff));
}

/* Blocked Embed placeholders (iframemanager) */
html.oh-sano-design3 div[data-service] {
	--im-font-family: var(--oh-sano-theme-font, inherit);
	--im-bg: var(--oh-sano-d3-bg);
	--im-color: var(--oh-sano-d3-text);
	--im-link-color: var(--oh-sano-d3-text);
	--im-btn-bg: var(--oh-sano-btn-bg, var(--oh-sano-theme-btn-bg, #1e1e1e));
	--im-btn-color: var(--oh-sano-btn-color, var(--oh-sano-theme-btn-color, #fff));
	--im-btn-hover-bg: color-mix(in srgb, var(--im-btn-bg) 85%, var(--oh-sano-d3-text));
	--im-btn-s-bg: transparent;
	--im-btn-s-color: var(--oh-sano-d3-text);
	--im-btn-s-hover-bg: color-mix(in srgb, var(--oh-sano-d3-text) 8%, transparent);
}