/* ==========================================================================
   DU Cookie Manager — Frontend Banner Styles
   ========================================================================== */

/* -- Custom properties ---------------------------------------------------- */
:root {
	--du-cm-primary:        #2271b1;
	--du-cm-primary-hover:  #135e96;
	--du-cm-bg:             #ffffff;
	--du-cm-surface:        #f6f7f7;
	--du-cm-border:         #dcdcde;
	--du-cm-text:           #1d2327;
	--du-cm-text-muted:     #50575e;
	--du-cm-shadow:         0 8px 32px rgba(0,0,0,.18);
	--du-cm-radius:         10px;
	--du-cm-radius-sm:      6px;
	--du-cm-transition:     .25s ease;
	--du-cm-z:              999999;
	--du-cm-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Button style */
	--du-cm-btn-bg:          #000000;
	--du-cm-btn-text:        #ffffff;
	--du-cm-btn-hover-bg:    #333333;
	--du-cm-btn-hover-text:  #ffffff;
	--du-cm-btn-radius:      20px;
	--du-cm-btn-border-w:    1px;
	--du-cm-toggle-color:    #000000;
}

/* Dark theme */
#du-cookie-banner.du-cm-theme-dark {
	--du-cm-bg:         #1d2327;
	--du-cm-surface:    #2c3338;
	--du-cm-border:     #3c434a;
	--du-cm-text:       #f0f0f1;
	--du-cm-text-muted: #a7aaad;
}

/* -- Overlay -------------------------------------------------------------- */
#du-cm-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.55);
	z-index: calc(var(--du-cm-z) - 1);
	animation: duCmFadeIn var(--du-cm-transition) both;
}

/* -- Banner base ---------------------------------------------------------- */
#du-cookie-banner {
	position: fixed;
	z-index: var(--du-cm-z);
	font-family: var(--du-cm-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--du-cm-text);
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

#du-cookie-banner *,
#du-cookie-banner *::before,
#du-cookie-banner *::after { box-sizing: border-box; }

/* -- Positions ------------------------------------------------------------ */
#du-cookie-banner.du-cm-pos-bottom-bar {
	bottom: 0; left: 0; right: 0;
	transform: translateY(100%);
	transition: transform var(--du-cm-transition);
}
#du-cookie-banner.du-cm-pos-bottom-bar.du-cm-visible { transform: translateY(0); }

#du-cookie-banner.du-cm-pos-bottom-left {
	bottom: 20px; left: 20px;
	transform: translateY(100%);
	transition: transform var(--du-cm-transition);
	width: 90%; max-width: 560px;
}
#du-cookie-banner.du-cm-pos-bottom-left .du-cm-inner {
	border-radius: var(--du-cm-btn-radius);
}
#du-cookie-banner.du-cm-pos-bottom-left.du-cm-visible { transform: translateY(0); }

#du-cookie-banner.du-cm-pos-top-bar {
	top: 0; left: 0; right: 0;
	transform: translateY(-100%);
	transition: transform var(--du-cm-transition);
}
#du-cookie-banner.du-cm-pos-top-bar.du-cm-visible { transform: translateY(0); }

#du-cookie-banner.du-cm-pos-popup {
	top: 50%; left: 50%;
	transform: translate(-50%,-50%) scale(.96);
	width: 90%; max-width: 560px;
	border-radius: var(--du-cm-radius);
	opacity: 0;
	transition: transform var(--du-cm-transition), opacity var(--du-cm-transition);
}
#du-cookie-banner.du-cm-pos-popup.du-cm-visible {
	transform: translate(-50%,-50%) scale(1);
	opacity: 1;
}

/* -- Inner --------------------------------------------------------------- */
#du-cookie-banner .du-cm-inner {
	background: var(--du-cm-bg);
	box-shadow: var(--du-cm-shadow);
	max-height: 90vh;
	overflow-y: auto;
	scrollbar-width: thin;
}
#du-cookie-banner.du-cm-pos-bottom-bar .du-cm-inner,
#du-cookie-banner.du-cm-pos-top-bar .du-cm-inner { border-radius: 0; }
#du-cookie-banner.du-cm-pos-popup .du-cm-inner { border-radius: var(--du-cm-radius); }

/* -- Main bar ------------------------------------------------------------ */
#du-cookie-banner .du-cm-main {
	display: flex; align-items: center; gap: 20px;
	padding: 18px 24px; flex-wrap: wrap;
}
#du-cookie-banner .du-cm-text { flex: 1 1 auto; }

#du-cookie-banner .du-cm-title {
	margin: 0 0 4px;
	font-size: 16px; font-weight: 700;
	color: var(--du-cm-text); line-height: 1.3;
}
#du-cookie-banner .du-cm-desc {
	color: var(--du-cm-text-muted); font-size: 13px; margin: 0;
}
#du-cookie-banner .du-cm-desc a { color: var(--du-cm-text); text-decoration: none; }
#du-cookie-banner .du-cm-desc a:hover { text-decoration: underline; }

#du-cookie-banner .du-cm-actions {
	display: flex; align-items: center; gap: 8px;
	flex-shrink: 0; flex-wrap: wrap;
}

/* -- Buttons ------------------------------------------------------------- */
#du-cookie-banner .du-cm-btn {
	display: inline-flex; align-items: center;
	justify-content: center; padding: 9px 18px;
	border-radius: var(--du-cm-btn-radius, 20px);
	font-family: inherit; font-size: 13px;
	font-weight: 600; line-height: 1;
	cursor: pointer; white-space: nowrap;
	border-style: solid;
	border-width: var(--du-cm-btn-border-w, 1px);
	transition: background var(--du-cm-transition), color var(--du-cm-transition), border-color var(--du-cm-transition);
	text-decoration: none;
}
/* Solid / primary button */
#du-cookie-banner .du-cm-btn--primary {
	background: var(--du-cm-btn-bg, #000);
	color: var(--du-cm-btn-text, #fff);
	border-color: var(--du-cm-btn-bg, #000);
}
#du-cookie-banner .du-cm-btn--primary:hover,
#du-cookie-banner .du-cm-btn--primary:focus-visible {
	background: var(--du-cm-btn-hover-bg, #333);
	border-color: var(--du-cm-btn-hover-bg, #333);
	color: var(--du-cm-btn-hover-text, #fff);
}
/* Ghost button (transparent, uses btn-bg as text/border) */
#du-cookie-banner .du-cm-btn--ghost {
	background: transparent;
	color: var(--du-cm-btn-bg, #000);
	border-color: var(--du-cm-btn-bg, #000);
}
#du-cookie-banner .du-cm-btn--ghost:hover,
#du-cookie-banner .du-cm-btn--ghost:focus-visible {
	background: var(--du-cm-btn-bg, #000);
	color: var(--du-cm-btn-text, #fff);
	border-color: var(--du-cm-btn-bg, #000);
}
/* Outline button */
#du-cookie-banner .du-cm-btn--outline {
	background: transparent;
	color: var(--du-cm-btn-bg, #000);
	border-color: var(--du-cm-btn-bg, #000);
}
#du-cookie-banner .du-cm-btn--outline:hover,
#du-cookie-banner .du-cm-btn--outline:focus-visible {
	background: var(--du-cm-btn-bg, #000);
	color: var(--du-cm-btn-text, #fff);
	border-color: var(--du-cm-btn-bg, #000);
}

/* -- Preferences panel --------------------------------------------------- */
#du-cm-preferences { border-top: 1px solid var(--du-cm-border); }
#du-cm-preferences[hidden] { display: none; }

#du-cookie-banner .du-cm-pref-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 24px; border-bottom: 1px solid var(--du-cm-border);
}
#du-cookie-banner .du-cm-pref-title {
	margin: 0; font-size: 15px;
	font-weight: 700; color: var(--du-cm-text);
}
#du-cookie-banner .du-cm-close-btn {
	display: flex; align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	background: transparent; border: none;
	border-radius: var(--du-cm-radius-sm); cursor: pointer;
	color: var(--du-cm-text-muted);
	transition: background var(--du-cm-transition), color var(--du-cm-transition);
	flex-shrink: 0;
}
#du-cookie-banner .du-cm-close-btn:hover {
	background: var(--du-cm-surface);
}

/* -- Categories ---------------------------------------------------------- */
#du-cookie-banner .du-cm-categories { padding: 8px 0; }
#du-cookie-banner .du-cm-category {
	padding: 0; border-bottom: 1px solid var(--du-cm-border);
}
#du-cookie-banner .du-cm-category:last-child { border-bottom: none; }
#du-cookie-banner .du-cm-cat-row {
	display: flex; align-items: flex-start; gap: 16px; padding: 16px 24px;
}
#du-cookie-banner .du-cm-cat-info { flex: 1; min-width: 0; }
#du-cookie-banner .du-cm-cat-name {
	font-size: 14px; font-weight: 600;
	color: var(--du-cm-text);
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
#du-cookie-banner .du-cm-cat-desc {
	margin: 4px 0 0; font-size: 12px;
	color: var(--du-cm-text-muted);
}
#du-cookie-banner .du-cm-badge {
	font-size: 11px; font-weight: 500;
	color: #00a32a; background: rgba(0,163,42,.1);
	padding: 2px 8px; border-radius: 20px;
	white-space: nowrap;
}

/* -- Toggle switch ------------------------------------------------------- */
#du-cookie-banner .du-cm-cat-toggle { flex-shrink: 0; padding-top: 2px; }
#du-cookie-banner .du-cm-switch {
	position: relative; display: inline-flex; align-items: center;
	cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#du-cookie-banner .du-cm-switch input[type="checkbox"] {
	position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
#du-cookie-banner .du-cm-switch__track {
	display: block; width: 44px; height: 24px;
	background: #c3c4c7; border-radius: 24px;
	transition: background var(--du-cm-transition);
}
#du-cookie-banner .du-cm-switch__thumb {
	position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
	background: #fff; border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0,0,0,.25);
	transition: transform var(--du-cm-transition);
}
#du-cookie-banner .du-cm-switch input:checked ~ .du-cm-switch__track {
	background: var(--du-cm-toggle-color, #000);
}
#du-cookie-banner .du-cm-switch input:checked ~ .du-cm-switch__thumb {
	transform: translateX(20px);
}
#du-cookie-banner .du-cm-switch input:focus-visible ~ .du-cm-switch__track {
	outline: 2px solid var(--du-cm-toggle-color, #000); outline-offset: 2px;
}
#du-cookie-banner .du-cm-switch--locked { cursor: not-allowed; }
#du-cookie-banner .du-cm-switch--locked .du-cm-switch__track {
	background: var(--du-cm-toggle-color, #000); opacity: .7;
}
#du-cookie-banner .du-cm-switch--locked .du-cm-switch__thumb {
	transform: translateX(20px);
}

/* -- Cookie details table ------------------------------------------------ */
#du-cookie-banner .du-cm-details-wrap { padding: 0 24px 16px; }
#du-cookie-banner .du-cm-details-toggle {
	display: inline-flex; align-items: center; gap: 6px;
	background: transparent;
	border: 1px solid var(--du-cm-border);
	border-radius: var(--du-cm-radius-sm);
	padding: 5px 12px; font-family: inherit;
	font-size: 12px; color: var(--du-cm-text-muted);
	cursor: pointer;
	transition: background var(--du-cm-transition), color var(--du-cm-transition);
}
#du-cookie-banner .du-cm-details-toggle:hover {
	background: var(--du-cm-surface); color: var(--du-cm-text);
}
#du-cookie-banner .du-cm-chevron { transition: transform var(--du-cm-transition); }
#du-cookie-banner .du-cm-details-toggle[aria-expanded="true"] .du-cm-chevron {
	transform: rotate(180deg);
}
#du-cookie-banner .du-cm-details-table { margin-top: 10px; overflow-x: auto; }
#du-cookie-banner .du-cm-details-table[hidden] { display: none; }
#du-cookie-banner .du-cm-details-table table {
	width: 100%; border-collapse: collapse; font-size: 12px;
}
#du-cookie-banner .du-cm-details-table th,
#du-cookie-banner .du-cm-details-table td {
	padding: 8px 10px; text-align: left;
	border-bottom: 1px solid var(--du-cm-border);
}
#du-cookie-banner .du-cm-details-table th {
	font-weight: 600; color: var(--du-cm-text-muted);
	background: var(--du-cm-surface); font-size: 11px;
	text-transform: uppercase; letter-spacing: .05em;
}
#du-cookie-banner .du-cm-details-table td { color: var(--du-cm-text); }
#du-cookie-banner .du-cm-details-table code {
	background: var(--du-cm-surface); padding: 1px 5px; border-radius: 3px;
	font-size: 11px; color: var(--du-cm-text);
}

/* -- Preferences footer -------------------------------------------------- */
#du-cookie-banner .du-cm-pref-footer {
	display: flex; align-items: center; justify-content: flex-end;
	gap: 10px; padding: 16px 24px;
	border-top: 1px solid var(--du-cm-border);
	background: var(--du-cm-surface); flex-wrap: wrap;
}

/* -- Animations ---------------------------------------------------------- */
@keyframes duCmFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* -- Reduce motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	#du-cookie-banner,
	#du-cookie-banner .du-cm-switch__track,
	#du-cookie-banner .du-cm-switch__thumb,
	#du-cookie-banner .du-cm-chevron,
	#du-cm-overlay {
		transition: none; animation: none;
	}
}

/* -- Responsive ---------------------------------------------------------- */
@media (max-width: 640px) {
	#du-cookie-banner .du-cm-main {
		flex-direction: column; align-items: stretch; padding: 16px;
	}
	#du-cookie-banner .du-cm-actions { flex-direction: column-reverse; }
	#du-cookie-banner .du-cm-btn { width: 100%; justify-content: center; }
	#du-cookie-banner .du-cm-cat-row { padding: 14px 16px; }
	#du-cookie-banner .du-cm-details-wrap { padding: 0 16px 14px; }
	#du-cookie-banner .du-cm-pref-header { padding: 14px 16px; }
	#du-cookie-banner .du-cm-pref-footer {
		padding: 14px 16px; flex-direction: column-reverse;
	}
	#du-cookie-banner .du-cm-pref-footer .du-cm-btn { width: 100%; }
	#du-cookie-banner.du-cm-pos-popup {
		top: auto; bottom: 0; left: 0; right: 0;
		width: 100%; max-width: 100%;
		border-radius: var(--du-cm-radius) var(--du-cm-radius) 0 0;
		transform: translateY(100%); opacity: 1;
	}
	#du-cookie-banner.du-cm-pos-popup.du-cm-visible { transform: translateY(0); }
}

/* -- Floating bubble ----------------------------------------------------- */
#du-cm-bubble {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 999998;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	margin: 0;
	background: var(--du-cm-primary, #2271b1);
	border: none;
	border-radius: 50%;
	box-shadow: 0 4px 16px rgba(0,0,0,.32);
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, opacity .3s ease;
	opacity: 0;
	transform: scale(.7);
}
#du-cm-bubble svg { fill: #fff; display: block; flex-shrink: 0; }
#du-cm-bubble:hover,
#du-cm-bubble:focus-visible {
	transform: scale(1.1);
	box-shadow: 0 6px 22px rgba(0,0,0,.42);
}
#du-cm-bubble.du-cm-bubble--visible {
	opacity: 1;
	transform: scale(1);
}