/**
 * Designblokk Cookie Consent — front-end styles.
 *
 * All colours, radii and sizes come from CSS custom properties printed inline
 * by PHP, so the admin design panel controls everything here without a rebuild.
 *
 * Breakpoints:
 *   <= 600px    phones (bottom sheet)
 *   601–1024px  iPad portrait + landscape, small laptops
 *   >  1024px   desktop
 */

/* ------------------------------------------------------------------ *
 * Reset scoped to the plugin
 * ------------------------------------------------------------------ */

#dbcc-root, #dbcc-root *{
	box-sizing: border-box;
}

#dbcc-root{
	font-family: var(--dbcc-font);
	font-size: var(--dbcc-font-size);
	line-height: 1.55;
	color: var(--dbcc-text);
	-webkit-font-smoothing: antialiased;
}

#dbcc-root [hidden]{
	display: none !important;
}

.dbcc-sr.dbcc-sr, .dbcc-sr-live.dbcc-sr-live{
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

html.dbcc-locked, html.dbcc-locked body{
	overflow: hidden !important;
	overscroll-behavior: contain;
}

/* ------------------------------------------------------------------ *
 * Overlay
 * ------------------------------------------------------------------ */

.dbcc-overlay.dbcc-overlay{
	position: fixed;
	inset: 0;
	background: var(--dbcc-overlay);
	z-index: calc(var(--dbcc-z) - 2);
	animation: dbcc-fade .25s ease both;
}

@supports (backdrop-filter: blur(1px)) {
	.dbcc-overlay.dbcc-overlay{
		backdrop-filter: blur(var(--dbcc-blur));
		-webkit-backdrop-filter: blur(var(--dbcc-blur));
	}
}

/* ------------------------------------------------------------------ *
 * Layer 1 — banner
 * ------------------------------------------------------------------ */

.dbcc-banner.dbcc-banner{
	position: fixed;
	z-index: var(--dbcc-z);
	background: var(--dbcc-surface);
	color: var(--dbcc-text);
	border-radius: var(--dbcc-radius);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 40px -8px rgba(15, 23, 42, .22);
	border: 1px solid var(--dbcc-border);
	opacity: 0;
	outline: none;
}

.dbcc-banner.dbcc-banner.is-visible{
	opacity: 1;
}

.dbcc-banner__inner.dbcc-banner__inner{
	padding: 22px 24px;
}

.dbcc-logo.dbcc-logo{
	display: block;
	height: var(--dbcc-logo-height);
	width: auto;
	margin: 0 0 14px;
}

.dbcc-banner__title.dbcc-banner__title{
	margin: 0 0 8px;
	font-size: var(--dbcc-heading-size);
	line-height: 1.3;
	font-weight: 650;
	color: var(--dbcc-heading);
	font-family: inherit;
	letter-spacing: -.01em;
}

.dbcc-banner__text.dbcc-banner__text{
	margin: 0;
	color: var(--dbcc-text);
}

.dbcc-banner__text.dbcc-banner__text p{
	margin: 0 0 .6em;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.dbcc-banner__text.dbcc-banner__text p:last-child{
	margin-bottom: 0;
}

.dbcc-banner__text.dbcc-banner__text a, .dbcc-modal__intro.dbcc-modal__intro a, .dbcc-cat__desc.dbcc-cat__desc a{
	color: var(--dbcc-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dbcc-policy-links.dbcc-policy-links{
	margin: .7em 0 0 !important;
	font-size: .93em;
}

.dbcc-policy-links.dbcc-policy-links .dbcc-sep{
	margin: 0 .5em;
	opacity: .5;
}

/* Actions ---------------------------------------------------------- */

.dbcc-banner__actions.dbcc-banner__actions{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
	align-items: center;
}

/* Accept and reject share identical geometry and weight. Making one of them
   quieter than the other is the single most common way consent banners fail
   an inspection, so it is not a configurable option. */
.dbcc-btn.dbcc-btn{
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 11px 20px;
	min-height: 44px; /* pointer target floor for touch */
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border-radius: var(--dbcc-btn-radius);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease, background-color .15s ease;
}

.dbcc-btn.dbcc-btn:focus-visible, .dbcc-switch.dbcc-switch input:focus-visible + .dbcc-switch__track, .dbcc-cat__toggle-details.dbcc-cat__toggle-details:focus-visible, .dbcc-modal__close.dbcc-modal__close:focus-visible, .dbcc-float.dbcc-float:focus-visible, .dbcc-linkbtn.dbcc-linkbtn:focus-visible{
	outline: 3px solid var(--dbcc-link);
	outline-offset: 2px;
}

.dbcc-btn.dbcc-btn:hover{
	transform: translateY(-1px);
}

.dbcc-btn.dbcc-btn:active{
	transform: translateY(0);
}

.dbcc-btn--accept.dbcc-btn--accept{
	background: var(--dbcc-accept-bg);
	color: var(--dbcc-accept-text);
	border-color: var(--dbcc-accept-bg);
	flex: 1 1 auto;
}

.dbcc-btn--reject.dbcc-btn--reject{
	background: var(--dbcc-reject-bg);
	color: var(--dbcc-reject-text);
	border-color: var(--dbcc-reject-border);
	flex: 1 1 auto;
}

.dbcc-btn--save.dbcc-btn--save{
	background: transparent;
	color: var(--dbcc-reject-text);
	border-color: var(--dbcc-reject-border);
	flex: 1 1 auto;
}

.dbcc-btn--link.dbcc-btn--link{
	background: none;
	border-color: transparent;
	color: var(--dbcc-settings-text);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	padding-left: 8px;
	padding-right: 8px;
	flex: 0 0 auto;
}

.dbcc-btn--link.dbcc-btn--link:hover{
	transform: none;
	color: var(--dbcc-heading);
}

/* Stacked variant: full-width buttons, one per row. */
.dbcc-buttons-stacked.dbcc-buttons-stacked .dbcc-banner__actions{
	flex-direction: column;
	align-items: stretch;
}

.dbcc-buttons-stacked.dbcc-buttons-stacked .dbcc-banner__actions .dbcc-btn{
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * Layer-1 positioning variants
 * ------------------------------------------------------------------ */

/* Box — anchored to a corner */
.dbcc-layout-box.dbcc-layout-box .dbcc-banner{
	width: calc(100vw - 40px);
	max-width: var(--dbcc-max-width);
	margin: 20px;
}

.dbcc-layout-box.dbcc-layout-box.dbcc-pos-bottom-left .dbcc-banner{ bottom: 0; left: 0; }
.dbcc-layout-box.dbcc-layout-box.dbcc-pos-bottom-right .dbcc-banner{ bottom: 0; right: 0; }
.dbcc-layout-box.dbcc-layout-box.dbcc-pos-top-left .dbcc-banner{ top: 0; left: 0; }
.dbcc-layout-box.dbcc-layout-box.dbcc-pos-top-right .dbcc-banner{ top: 0; right: 0; }
.dbcc-layout-box.dbcc-layout-box.dbcc-pos-bottom .dbcc-banner{ bottom: 0; left: 50%; transform: translateX(-50%); }
.dbcc-layout-box.dbcc-layout-box.dbcc-pos-top .dbcc-banner{ top: 0; left: 50%; transform: translateX(-50%); }

/* Bar — full width strip */
.dbcc-layout-bar.dbcc-layout-bar .dbcc-banner{
	left: 0;
	right: 0;
	width: 100%;
	max-width: none;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
}

.dbcc-layout-bar.dbcc-layout-bar.dbcc-pos-bottom .dbcc-banner, .dbcc-layout-bar.dbcc-layout-bar.dbcc-pos-bottom-left .dbcc-banner, .dbcc-layout-bar.dbcc-layout-bar.dbcc-pos-bottom-right .dbcc-banner{
	bottom: 0;
	border-bottom: 0;
}

.dbcc-layout-bar.dbcc-layout-bar.dbcc-pos-top .dbcc-banner, .dbcc-layout-bar.dbcc-layout-bar.dbcc-pos-top-left .dbcc-banner, .dbcc-layout-bar.dbcc-layout-bar.dbcc-pos-top-right .dbcc-banner{
	top: 0;
	border-top: 0;
}

.dbcc-layout-bar.dbcc-layout-bar .dbcc-banner__inner{
	display: flex;
	align-items: center;
	gap: 32px;
	max-width: var(--dbcc-bar-width);
	margin: 0 auto;
	padding: 20px 24px;
}

.dbcc-layout-bar.dbcc-layout-bar .dbcc-banner__content{
	flex: 1 1 auto;
	min-width: 0;
}

.dbcc-layout-bar.dbcc-layout-bar .dbcc-banner__actions{
	margin-top: 0;
	flex: 0 0 auto;
	flex-wrap: nowrap;
}

.dbcc-layout-bar.dbcc-layout-bar .dbcc-btn--accept, .dbcc-layout-bar.dbcc-layout-bar .dbcc-btn--reject{
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Center — dialog in the middle of the viewport */
.dbcc-layout-center.dbcc-layout-center .dbcc-banner{
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100vw - 40px);
	max-width: var(--dbcc-max-width);
}

/* Animation ------------------------------------------------------- */

.dbcc-anim-fade.dbcc-anim-fade .dbcc-banner{
	transition: opacity .3s ease;
}

.dbcc-anim-slide.dbcc-anim-slide .dbcc-banner{
	transition: opacity .3s ease, translate .35s cubic-bezier(.16, 1, .3, 1);
}

.dbcc-anim-slide.dbcc-anim-slide.dbcc-pos-bottom .dbcc-banner, .dbcc-anim-slide.dbcc-anim-slide.dbcc-pos-bottom-left .dbcc-banner, .dbcc-anim-slide.dbcc-anim-slide.dbcc-pos-bottom-right .dbcc-banner{
	translate: 0 24px;
}

.dbcc-anim-slide.dbcc-anim-slide.dbcc-pos-top .dbcc-banner, .dbcc-anim-slide.dbcc-anim-slide.dbcc-pos-top-left .dbcc-banner, .dbcc-anim-slide.dbcc-anim-slide.dbcc-pos-top-right .dbcc-banner{
	translate: 0 -24px;
}

.dbcc-anim-slide.dbcc-anim-slide .dbcc-banner.is-visible{
	translate: 0 0;
}

.dbcc-anim-none.dbcc-anim-none .dbcc-banner{
	transition: none;
}

@keyframes dbcc-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes dbcc-rise {
	from { opacity: 0; transform: translateY(12px) scale(.985); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------------------------------------------------------------------ *
 * Layer 2 — preferences modal
 * ------------------------------------------------------------------ */

.dbcc-modal.dbcc-modal{
	position: fixed;
	inset: 0;
	z-index: calc(var(--dbcc-z) + 1);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity .25s ease;
}

.dbcc-modal.dbcc-modal.is-visible{
	opacity: 1;
}

.dbcc-modal__panel.dbcc-modal__panel{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 640px;
	max-height: min(86vh, 780px);
	background: var(--dbcc-surface);
	border-radius: var(--dbcc-radius);
	box-shadow: 0 24px 70px -12px rgba(15, 23, 42, .4);
	overflow: hidden;
	animation: dbcc-rise .3s cubic-bezier(.16, 1, .3, 1) both;
}

.dbcc-modal__header.dbcc-modal__header{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px 14px;
	border-bottom: 1px solid var(--dbcc-border);
	flex: 0 0 auto;
}

.dbcc-modal__title.dbcc-modal__title{
	margin: 0;
	font-size: var(--dbcc-heading-size);
	line-height: 1.3;
	font-weight: 650;
	color: var(--dbcc-heading);
	font-family: inherit;
	letter-spacing: -.01em;
}

.dbcc-modal__close.dbcc-modal__close{
	appearance: none;
	background: none;
	border: 0;
	padding: 8px;
	margin: -8px -8px 0 0;
	min-width: 40px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--dbcc-settings-text);
	cursor: pointer;
	flex: 0 0 auto;
}

.dbcc-modal__close.dbcc-modal__close:hover{
	background: color-mix(in srgb, var(--dbcc-text) 8%, transparent);
	color: var(--dbcc-heading);
}

.dbcc-modal__body.dbcc-modal__body{
	padding: 18px 24px 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	flex: 1 1 auto;
}

.dbcc-modal__intro.dbcc-modal__intro p{
	margin: 0 0 .7em;
}

/* Categories ------------------------------------------------------- */

.dbcc-cats.dbcc-cats{
	margin: 18px 0 4px;
	border-top: 1px solid var(--dbcc-border);
}

.dbcc-cat.dbcc-cat{
	border-bottom: 1px solid var(--dbcc-border);
}

.dbcc-cat__head.dbcc-cat__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 4px 0;
}

.dbcc-cat__toggle-details.dbcc-cat__toggle-details{
	appearance: none;
	background: none;
	border: 0;
	padding: 14px 4px 14px 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-height: 44px;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	color: var(--dbcc-heading);
	text-align: left;
	cursor: pointer;
	border-radius: 6px;
}

.dbcc-cat__chevron.dbcc-cat__chevron{
	display: inline-flex;
	color: var(--dbcc-settings-text);
	transition: transform .2s ease;
	flex: 0 0 auto;
}

.dbcc-cat.dbcc-cat.is-open .dbcc-cat__chevron{
	transform: rotate(90deg);
}

.dbcc-cat__always.dbcc-cat__always{
	flex: 0 0 auto;
	font-size: .88em;
	font-weight: 600;
	color: var(--dbcc-toggle-on);
	white-space: nowrap;
}

.dbcc-cat__panel.dbcc-cat__panel{
	padding: 0 0 18px 22px;
}

.dbcc-cat__desc.dbcc-cat__desc p{
	margin: 0 0 .7em;
	font-size: .95em;
	color: var(--dbcc-text);
}

.dbcc-cat__desc.dbcc-cat__desc p:last-child{
	margin-bottom: 0;
}

/* Switch ----------------------------------------------------------- */

.dbcc-switch.dbcc-switch{
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	cursor: pointer;
	padding: 6px 0;
}

.dbcc-switch.dbcc-switch input{
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.dbcc-switch__track.dbcc-switch__track{
	display: block;
	width: 46px;
	height: 27px;
	border-radius: 999px;
	background: var(--dbcc-toggle-off);
	transition: background-color .2s ease;
	position: relative;
	flex: 0 0 auto;
}

.dbcc-switch__thumb.dbcc-switch__thumb{
	position: absolute;
	top: 3px;
	left: 3px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
	transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}

.dbcc-switch.dbcc-switch input:checked + .dbcc-switch__track{
	background: var(--dbcc-toggle-on);
}

.dbcc-switch.dbcc-switch input:checked + .dbcc-switch__track .dbcc-switch__thumb{
	transform: translateX(19px);
}

/* Cookie table ----------------------------------------------------- */

.dbcc-table-wrap.dbcc-table-wrap{
	margin-top: 12px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--dbcc-border);
	border-radius: 8px;
}

.dbcc-table.dbcc-table{
	width: 100%;
	border-collapse: collapse;
	font-size: .86em;
	background: transparent;
	margin: 0;
}

.dbcc-table.dbcc-table th, .dbcc-table.dbcc-table td{
	padding: 9px 12px;
	text-align: left;
	border-bottom: 1px solid var(--dbcc-border);
	vertical-align: top;
	color: var(--dbcc-text);
}

.dbcc-table.dbcc-table thead th{
	font-weight: 650;
	color: var(--dbcc-heading);
	background: color-mix(in srgb, var(--dbcc-text) 4%, transparent);
	white-space: nowrap;
}

.dbcc-table.dbcc-table tbody tr:last-child td{
	border-bottom: 0;
}

.dbcc-table.dbcc-table code{
	font-size: .95em;
	background: color-mix(in srgb, var(--dbcc-text) 7%, transparent);
	padding: 1px 5px;
	border-radius: 4px;
	word-break: break-word;
}

/* Footer ----------------------------------------------------------- */

.dbcc-modal__footer.dbcc-modal__footer{
	flex: 0 0 auto;
	padding: 16px 24px 20px;
	border-top: 1px solid var(--dbcc-border);
	background: var(--dbcc-surface);
}

.dbcc-modal__footer-actions.dbcc-modal__footer-actions{
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.dbcc-modal__footer-actions.dbcc-modal__footer-actions .dbcc-btn{
	flex: 1 1 150px;
}

.dbcc-modal__meta.dbcc-modal__meta{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	font-size: .82em;
	color: var(--dbcc-settings-text);
}

.dbcc-modal__meta.dbcc-modal__meta code{
	font-size: .95em;
	word-break: break-all;
}

.dbcc-linkbtn.dbcc-linkbtn{
	appearance: none;
	background: none;
	border: 0;
	padding: 4px 2px;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	color: var(--dbcc-link);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * Floating re-open button
 * ------------------------------------------------------------------ */

.dbcc-float.dbcc-float{
	position: fixed;
	bottom: 18px;
	left: 18px;
	z-index: calc(var(--dbcc-z) - 3);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--dbcc-float-bg);
	color: var(--dbcc-float-icon);
	box-shadow: 0 3px 14px rgba(15, 23, 42, .28);
	cursor: pointer;
	opacity: .85;
	transition: opacity .2s ease, transform .2s ease;
}

.dbcc-float.dbcc-float:hover{
	opacity: 1;
	transform: scale(1.06);
}

.dbcc-pos-bottom-right.dbcc-pos-bottom-right .dbcc-float, .dbcc-pos-top-right.dbcc-pos-top-right .dbcc-float{
	left: auto;
	right: 18px;
}

/* ------------------------------------------------------------------ *
 * Blocked embeds
 * ------------------------------------------------------------------ */

.dbcc-embed.dbcc-embed{
	position: relative;
}

.dbcc-embed--blocked.dbcc-embed--blocked{
	min-height: 180px;
	background: color-mix(in srgb, var(--dbcc-text) 6%, transparent);
	border: 1px dashed var(--dbcc-border);
	border-radius: var(--dbcc-radius);
	display: flex;
	align-items: center;
	justify-content: center;
}

.dbcc-embed--blocked.dbcc-embed--blocked > iframe{
	display: none;
}

.dbcc-embed__placeholder.dbcc-embed__placeholder{
	padding: 26px 22px;
	text-align: center;
	max-width: 420px;
	font-family: var(--dbcc-font);
	font-size: var(--dbcc-font-size);
	color: var(--dbcc-text);
}

.dbcc-embed__service.dbcc-embed__service{
	margin: 0 0 6px;
	font-weight: 650;
	color: var(--dbcc-heading);
}

.dbcc-embed__text.dbcc-embed__text{
	margin: 0 0 14px;
	font-size: .95em;
}

/* ------------------------------------------------------------------ *
 * Shortcode output
 * ------------------------------------------------------------------ */

.dbcc-inline-btn.dbcc-inline-btn{
	appearance: none;
	font-family: inherit;
	font-size: inherit;
	padding: 10px 18px;
	min-height: 44px;
	border-radius: var(--dbcc-btn-radius, 8px);
	border: 1.5px solid var(--dbcc-reject-border, currentColor);
	background: var(--dbcc-reject-bg, transparent);
	color: var(--dbcc-reject-text, inherit);
	font-weight: 600;
	cursor: pointer;
}

.dbcc-declaration__cat.dbcc-declaration__cat{
	margin: 0 0 32px;
}

.dbcc-declaration__title.dbcc-declaration__title{
	margin: 0 0 6px;
}

.dbcc-declaration__updated.dbcc-declaration__updated{
	font-size: .9em;
	opacity: .75;
}

.dbcc-state__label.dbcc-state__label{
	font-weight: 650;
}

.dbcc-state__line.dbcc-state__line{
	margin: 0 0 6px;
}

/* ------------------------------------------------------------------ *
 * iPad / tablet — 601px to 1024px
 *
 * Covers iPad mini/Air portrait (768), iPad Pro 11" (834), iPad landscape
 * (1024) and iPad Pro 12.9" portrait (1024). The bar layout stops trying to
 * fit copy and buttons on one line well before the text gets cramped.
 * ------------------------------------------------------------------ */

@media (max-width: 1024px){
	.dbcc-layout-bar.dbcc-layout-bar .dbcc-banner__inner{
		gap: 20px;
	}
}

@media (min-width: 601px) and (max-width: 1024px) {
	.dbcc-layout-bar.dbcc-layout-bar .dbcc-banner__inner{
		display: block;
		padding: 20px 28px 22px;
	}

	.dbcc-layout-bar.dbcc-layout-bar .dbcc-banner__actions{
		margin-top: 16px;
		flex-wrap: wrap;
	}

	.dbcc-layout-bar.dbcc-layout-bar .dbcc-btn--accept, .dbcc-layout-bar.dbcc-layout-bar .dbcc-btn--reject{
		flex: 1 1 200px;
	}

	.dbcc-layout-box.dbcc-layout-box .dbcc-banner{
		max-width: min(var(--dbcc-max-width), 480px);
		margin: 24px;
	}

	.dbcc-modal.dbcc-modal{
		padding: 32px;
	}

	.dbcc-modal__panel.dbcc-modal__panel{
		max-width: 620px;
		max-height: 84vh;
	}

	/* Touch targets get a little more room on tablets. */
	.dbcc-btn.dbcc-btn{
		min-height: 46px;
		padding: 12px 22px;
	}

	.dbcc-float.dbcc-float{
		width: 50px;
		height: 50px;
		bottom: 22px;
	}
}

/* iPad landscape specifically: keep the centred dialog from feeling squat. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
	.dbcc-modal__panel.dbcc-modal__panel{
		max-height: 88vh;
	}

	.dbcc-modal__body.dbcc-modal__body{
		padding-top: 14px;
	}
}

/* ------------------------------------------------------------------ *
 * Phones — up to 600px
 * ------------------------------------------------------------------ */

@media (max-width: 600px){
	#dbcc-root{
		font-size: max(var(--dbcc-font-size), 15px); /* never below 15px on mobile */
	}

	/* Bottom sheet: edge to edge, rounded on top only, safe-area aware. */
	.dbcc-mobile-sheet.dbcc-mobile-sheet .dbcc-banner, .dbcc-layout-bar.dbcc-layout-bar .dbcc-banner{
		top: auto !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		transform: none !important;
		border-radius: var(--dbcc-radius) var(--dbcc-radius) 0 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		max-height: 88vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.dbcc-anim-slide.dbcc-anim-slide.dbcc-mobile-sheet .dbcc-banner, .dbcc-anim-slide.dbcc-anim-slide.dbcc-layout-bar .dbcc-banner{
		translate: 0 100%;
	}

	.dbcc-anim-slide.dbcc-anim-slide.dbcc-mobile-sheet .dbcc-banner.is-visible, .dbcc-anim-slide.dbcc-anim-slide.dbcc-layout-bar .dbcc-banner.is-visible{
		translate: 0 0;
	}

	.dbcc-banner__inner.dbcc-banner__inner, .dbcc-layout-bar.dbcc-layout-bar .dbcc-banner__inner{
		display: block;
		padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
		max-width: none;
	}

	.dbcc-banner__title.dbcc-banner__title{
		font-size: max(calc(var(--dbcc-heading-size) - 2px), 17px);
	}

	/* One button per row: on a phone, side-by-side buttons are the usual excuse
	   for shrinking "reject" into something people miss. */
	.dbcc-banner__actions.dbcc-banner__actions{
		display: grid;
		grid-template-columns: 1fr;
		gap: 9px;
		margin-top: 16px;
	}

	.dbcc-banner__actions.dbcc-banner__actions .dbcc-btn{
		width: 100%;
		min-height: 48px;
	}

	.dbcc-banner__actions.dbcc-banner__actions .dbcc-btn--link{
		min-height: 44px;
		order: 3;
	}

	/* Modal becomes a near-full-screen sheet. */
	.dbcc-modal.dbcc-modal{
		padding: 0;
		align-items: flex-end;
	}

	.dbcc-modal__panel.dbcc-modal__panel{
		max-width: none;
		max-height: 92vh;
		height: 92vh;
		border-radius: var(--dbcc-radius) var(--dbcc-radius) 0 0;
	}

	.dbcc-modal__header.dbcc-modal__header{
		padding: 18px 18px 12px;
	}

	.dbcc-modal__body.dbcc-modal__body{
		padding: 16px 18px 8px;
	}

	.dbcc-modal__footer.dbcc-modal__footer{
		padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px));
	}

	.dbcc-modal__footer-actions.dbcc-modal__footer-actions{
		display: grid;
		grid-template-columns: 1fr;
		gap: 9px;
	}

	.dbcc-modal__footer-actions.dbcc-modal__footer-actions .dbcc-btn{
		flex: none;
		width: 100%;
		min-height: 48px;
	}

	.dbcc-cat__panel.dbcc-cat__panel{
		padding-left: 0;
	}

	/* Cookie tables become stacked cards — a 5-column table is unusable at 360px. */
	.dbcc-table-wrap.dbcc-table-wrap{
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.dbcc-table.dbcc-table thead{
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.dbcc-table.dbcc-table, .dbcc-table.dbcc-table tbody, .dbcc-table.dbcc-table tr, .dbcc-table.dbcc-table td{
		display: block;
		width: 100%;
	}

	.dbcc-table.dbcc-table tr{
		border: 1px solid var(--dbcc-border);
		border-radius: 8px;
		padding: 8px 10px;
		margin-bottom: 10px;
	}

	.dbcc-table.dbcc-table td{
		border: 0;
		padding: 4px 0;
		display: flex;
		gap: 10px;
	}

	.dbcc-table.dbcc-table td::before{
		content: attr(data-label) ':';
		flex: 0 0 34%;
		font-weight: 650;
		color: var(--dbcc-heading);
	}

	.dbcc-float.dbcc-float{
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		left: 14px;
		width: 44px;
		height: 44px;
	}

	.dbcc-pos-bottom-right.dbcc-pos-bottom-right .dbcc-float, .dbcc-pos-top-right.dbcc-pos-top-right .dbcc-float{
		right: 14px;
	}
}

/* Very small phones (iPhone SE, 320–360px) */
@media (max-width: 360px){
	.dbcc-banner__inner.dbcc-banner__inner{
		padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
	}

	.dbcc-btn.dbcc-btn{
		padding: 11px 14px;
	}

	.dbcc-table.dbcc-table td::before{
		flex-basis: 40%;
	}
}

/* Short landscape phones: don't let the sheet swallow the viewport. */
@media (max-height: 460px) and (orientation: landscape){
	.dbcc-mobile-sheet.dbcc-mobile-sheet .dbcc-banner, .dbcc-layout-bar.dbcc-layout-bar .dbcc-banner{
		max-height: 94vh;
	}

	.dbcc-modal__panel.dbcc-modal__panel{
		height: 94vh;
		max-height: 94vh;
	}

	.dbcc-banner__actions.dbcc-banner__actions{
		grid-template-columns: 1fr 1fr;
	}

	.dbcc-banner__actions.dbcc-banner__actions .dbcc-btn--link{
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------ *
 * Accessibility preferences
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce){
	#dbcc-root *, #dbcc-root *::before, #dbcc-root *::after{
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.dbcc-anim-slide.dbcc-anim-slide .dbcc-banner{
		translate: 0 0 !important;
	}
}

@media (prefers-contrast: more), (forced-colors: active) {
	.dbcc-banner.dbcc-banner, .dbcc-modal__panel.dbcc-modal__panel{
		border: 2px solid currentColor;
	}

	.dbcc-btn.dbcc-btn{
		border-width: 2px;
	}

	.dbcc-switch__track.dbcc-switch__track{
		border: 2px solid currentColor;
	}
}

/* Print: a consent banner has no business on paper. */
@media print{
	#dbcc-root{
		display: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * Footer consent link
 *
 * Printed at the very end of <body>, so it lands under the theme's own
 * footer. Selectors are doubled for the same reason as the rest of this
 * file: a theme's `button` reset ties on specificity and would otherwise
 * win on source order.
 * ------------------------------------------------------------------ */

.dbcc-footerlink.dbcc-footerlink{
	display: flex;
	justify-content: center;
	padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	font-family: var(--dbcc-font);
	font-size: 13px;
	line-height: 1.4;
	/* No colour of its own: it inherits whatever the page uses, so it stays
	   legible on a light footer and a dark one alike. */
	color: inherit;
}

.dbcc-footerlink__btn.dbcc-footerlink__btn{
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 8px 12px;
	min-height: 36px;
	background: none;
	border: 0;
	border-radius: var(--dbcc-btn-radius);
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	/* Default assumes a light page; JS flips .dbcc-on-dark after measuring the
	   real background behind the link. */
	color: #1d2327;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	opacity: .8;
	transition: opacity .15s ease;
}

.dbcc-footerlink.dbcc-on-dark .dbcc-footerlink__btn{
	color: #ffffff;
}

.dbcc-footerlink__btn.dbcc-footerlink__btn:hover{
	opacity: 1;
}

.dbcc-footerlink__btn.dbcc-footerlink__btn:focus-visible{
	outline: 2px solid currentColor;
	outline-offset: 2px;
	opacity: 1;
}

.dbcc-footerlink__btn.dbcc-footerlink__btn svg{
	flex: 0 0 auto;
	opacity: .8;
}

/* ------------------------------------------------------------------ *
 * Interactive-state armour
 *
 * Theme resets do not stop at the resting state — they style
 * `button:hover` and `button:focus` too. Those selectors carry the same
 * specificity as a doubled class (0-2-0) and load after plugin CSS, so the
 * moment one of our buttons takes focus the theme repaints it in its own
 * accent colour. Anchoring these to #dbcc-root lifts them out of reach
 * without resorting to !important. Every state is restated explicitly,
 * because a state we forget is a state the theme owns.
 * ------------------------------------------------------------------ */

#dbcc-root .dbcc-btn--accept,
#dbcc-root .dbcc-btn--accept:hover,
#dbcc-root .dbcc-btn--accept:focus,
#dbcc-root .dbcc-btn--accept:active{
	background: var(--dbcc-accept-bg);
	color: var(--dbcc-accept-text);
	border-color: var(--dbcc-accept-bg);
}

#dbcc-root .dbcc-btn--reject,
#dbcc-root .dbcc-btn--reject:hover,
#dbcc-root .dbcc-btn--reject:focus,
#dbcc-root .dbcc-btn--reject:active{
	background: var(--dbcc-reject-bg);
	color: var(--dbcc-reject-text);
	border-color: var(--dbcc-reject-border);
}

#dbcc-root .dbcc-btn--save,
#dbcc-root .dbcc-btn--save:hover,
#dbcc-root .dbcc-btn--save:focus,
#dbcc-root .dbcc-btn--save:active{
	background: transparent;
	color: var(--dbcc-reject-text);
	border-color: var(--dbcc-reject-border);
}

#dbcc-root .dbcc-btn--link,
#dbcc-root .dbcc-btn--link:hover,
#dbcc-root .dbcc-btn--link:focus,
#dbcc-root .dbcc-btn--link:active{
	background: none;
	color: var(--dbcc-settings-text);
	border-color: transparent;
}

#dbcc-root .dbcc-btn--link:hover{
	color: var(--dbcc-heading);
}

#dbcc-root .dbcc-modal__close,
#dbcc-root .dbcc-modal__close:focus,
#dbcc-root .dbcc-modal__close:active{
	background: none;
	color: var(--dbcc-settings-text);
	border: 0;
	border-radius: 50%;
}

#dbcc-root .dbcc-modal__close:hover{
	background: color-mix(in srgb, var(--dbcc-text) 10%, transparent);
	color: var(--dbcc-heading);
	border: 0;
}

#dbcc-root .dbcc-cat__toggle-details,
#dbcc-root .dbcc-cat__toggle-details:hover,
#dbcc-root .dbcc-cat__toggle-details:focus,
#dbcc-root .dbcc-cat__toggle-details:active{
	background: none;
	color: var(--dbcc-heading);
	border: 0;
}

#dbcc-root .dbcc-linkbtn,
#dbcc-root .dbcc-linkbtn:hover,
#dbcc-root .dbcc-linkbtn:focus,
#dbcc-root .dbcc-linkbtn:active{
	background: none;
	color: var(--dbcc-link);
	border: 0;
}

#dbcc-root .dbcc-float,
#dbcc-root .dbcc-float:hover,
#dbcc-root .dbcc-float:focus,
#dbcc-root .dbcc-float:active{
	background: var(--dbcc-float-bg);
	color: var(--dbcc-float-icon);
	border: 0;
	border-radius: 50%;
}

/* The footer link lives outside #dbcc-root, so it leans on descendant
   specificity instead — still 0-3-0, which clears the theme's 0-2-0. */
.dbcc-footerlink .dbcc-footerlink__btn,
.dbcc-footerlink .dbcc-footerlink__btn:hover,
.dbcc-footerlink .dbcc-footerlink__btn:focus,
.dbcc-footerlink .dbcc-footerlink__btn:active{
	background: none;
	border: 0;
	color: #1d2327;
}

.dbcc-footerlink.dbcc-on-dark .dbcc-footerlink__btn,
.dbcc-footerlink.dbcc-on-dark .dbcc-footerlink__btn:hover,
.dbcc-footerlink.dbcc-on-dark .dbcc-footerlink__btn:focus,
.dbcc-footerlink.dbcc-on-dark .dbcc-footerlink__btn:active{
	color: #ffffff;
}
