/* QWeb Suite — Consent Banner Styles  v2
   Positions: bottom, top, modal, floating
   Styles: minimal, full
   ================================================================ */

/* ── Custom properties ─────────────────────────────────────────── */
:root {
	--qweb-accent:       #ED1C24;
	--qweb-accent-hover: #c4161d;
}

#qweb-consent-banner {
	--qweb-accent:       var(--qweb-banner-accent, #ED1C24);
	--qweb-accent-hover: color-mix(in srgb, var(--qweb-accent) 80%, #000);
}

/* ── Base shell ────────────────────────────────────────────────── */
.qweb-banner {
	position:    fixed;
	z-index:     999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	font-size:   14px;
	line-height: 1.5;
	opacity:     0;
	transition:  opacity .3s ease, transform .3s cubic-bezier(.22,.68,0,1.2);
	box-sizing:  border-box;
}

.qweb-banner *,
.qweb-banner *::before,
.qweb-banner *::after {
	box-sizing: border-box;
}

.qweb-banner.is-visible {
	opacity:   1;
	transform: translateY(0) translateX(0) scale(1) !important;
}

.qweb-banner.is-hiding {
	opacity:        0;
	pointer-events: none;
}

/* ── Bottom bar ────────────────────────────────────────────────── */
.qweb-banner--bottom {
	bottom:     0;
	left:       0;
	right:      0;
	transform:  translateY(100%);
}

/* ── Top bar ───────────────────────────────────────────────────── */
.qweb-banner--top {
	top:       0;
	left:      0;
	right:     0;
	transform: translateY(-100%);
}

/* ── Modal (centre) ────────────────────────────────────────────── */
.qweb-banner--modal {
	top:       50%;
	left:      50%;
	transform: translate(-50%, -44%) scale(.97);
	width:     90%;
	max-width: 540px;
}

.qweb-banner--modal.is-visible {
	transform: translate(-50%, -50%) scale(1) !important;
}

.qweb-banner--modal::before {
	content:    '';
	position:   fixed;
	inset:      0;
	background: rgba(0,0,0,.45);
	z-index:    -1;
	backdrop-filter: blur(2px);
}

/* ── Floating corner ───────────────────────────────────────────── */
.qweb-banner--floating {
	bottom:    24px;
	right:     24px;
	width:     380px;
	transform: translateY(16px) scale(.98);
}

/* ─────────────────────────────────────────────────────────────────
   CARD  — the white surface inside every banner variant
   ───────────────────────────────────────────────────────────────── */
.qweb-banner__card {
	background:    #ffffff;
	color:         #1a1a2e;
	border-radius: 16px 16px 0 0;   /* bottom variants */
	box-shadow:    0 -2px 40px rgba(0,0,0,.12), 0 -1px 0 rgba(0,0,0,.06);
	overflow:      hidden;
	/* accent stripe at top */
	border-top:    3px solid var(--qweb-accent);
}

/* Modal / floating get full border-radius */
.qweb-banner--modal    .qweb-banner__card,
.qweb-banner--floating .qweb-banner__card {
	border-radius: 16px;
	box-shadow:    0 8px 48px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05);
}

/* Top bar: stripe at bottom */
.qweb-banner--top .qweb-banner__card {
	border-top:    none;
	border-bottom: 3px solid var(--qweb-accent);
	border-radius: 0 0 16px 16px;
	box-shadow:    0 2px 40px rgba(0,0,0,.12);
}

/* ── Inner layout ──────────────────────────────────────────────── */
.qweb-banner__inner {
	padding:     18px 22px;
	display:     flex;
	align-items: center;
	gap:         14px;
	flex-wrap:   wrap;
}

.qweb-banner__inner--full {
	flex-direction:  column;
	align-items:     stretch;
	gap:             14px;
	padding:         22px 24px 20px;
}

/* ── Header row ────────────────────────────────────────────────── */
.qweb-banner__header {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
}

.qweb-banner__title {
	display:     flex;
	align-items: center;
	gap:         7px;
	font-size:   15px;
	font-weight: 700;
	color:       #111827;
	letter-spacing: -.2px;
}

.qweb-banner__title::before {
	content:   '🍪';
	font-size: 17px;
}

.qweb-banner__close {
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      #f3f4f6;
	border:          none;
	width:           28px;
	height:          28px;
	border-radius:   50%;
	font-size:       16px;
	line-height:     1;
	cursor:          pointer;
	color:           #6b7280;
	padding:         0;
	transition:      background .15s, color .15s;
	flex-shrink:     0;
}

.qweb-banner__close:hover {
	background: #e5e7eb;
	color:      #111827;
}

/* ── Body text ─────────────────────────────────────────────────── */
.qweb-banner__text {
	flex:      1;
	color:     #4b5563;
	margin:    0;
	font-size: 13px;
}

/* ── Category toggles ──────────────────────────────────────────── */
.qweb-banner__categories {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.qweb-banner__cat {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
	cursor:          pointer;
	padding:         10px 14px;
	border-radius:   10px;
	background:      #f9fafb;
	border:          1px solid #e5e7eb;
	transition:      border-color .15s, background .15s;
	user-select:     none;
}

.qweb-banner__cat:hover {
	border-color: #d1d5db;
	background:   #f3f4f6;
}

.qweb-banner__cat-info {
	flex:      1;
	min-width: 0;
}

.qweb-banner__cat-info strong {
	display:     block;
	font-size:   13px;
	font-weight: 600;
	color:       #111827;
	margin-bottom: 1px;
}

.qweb-banner__cat-info span {
	font-size: 11.5px;
	color:     #6b7280;
	display:   block;
}

/* Visually hide the raw <input> but keep it interactive so label clicks work */
.qweb-banner__cat input[type="checkbox"] {
	position: absolute;
	opacity:  0;
	width:    1px;
	height:   1px;
	margin:   0;
	overflow: hidden;
}

/* Toggle pill — pointer-events on so clicking the pill area works too */
.qweb-banner__toggle {
	position:       relative;
	width:          38px;
	height:         22px;
	flex-shrink:    0;
	pointer-events: none; /* label handles the click, prevents double-fire */
}

.qweb-banner__toggle-track {
	display:       block;
	width:         100%;
	height:        100%;
	background:    #d1d5db;
	border-radius: 999px;
	transition:    background .2s;
}

.qweb-banner__toggle-knob {
	position:   absolute;
	top:        3px;
	left:       3px;
	width:      16px;
	height:     16px;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
	transition: transform .2s;
}

/* Checked state */
.qweb-banner__cat input[type="checkbox"]:checked ~ .qweb-banner__toggle .qweb-banner__toggle-track {
	background: var(--qweb-accent);
}

.qweb-banner__cat input[type="checkbox"]:checked ~ .qweb-banner__toggle .qweb-banner__toggle-knob {
	transform: translateX(16px);
}

/* Disabled (Essential — always on) */
.qweb-banner__cat--locked {
	cursor: default;
}

.qweb-banner__cat--locked:hover {
	border-color: #e5e7eb;
	background:   #f9fafb;
}

.qweb-banner__cat--locked .qweb-banner__toggle-track {
	background: #9ca3af !important;
	opacity:    .7;
}

.qweb-banner__cat--locked .qweb-banner__toggle-knob {
	transform: translateX(16px) !important;
}

/* ── Action buttons ────────────────────────────────────────────── */
.qweb-banner__actions {
	display:         flex;
	gap:             8px;
	flex-wrap:       wrap;
	align-items:     center;
	justify-content: flex-end;
	padding-top:     2px;
}

/* Shared button base */
.qweb-banner__btn {
	padding:        9px 20px;
	border-radius:  8px;
	font-size:      13px;
	font-weight:    600;
	cursor:         pointer;
	border:         2px solid transparent;
	white-space:    nowrap;
	transition:     background .15s, border-color .15s, color .15s, box-shadow .15s;
	font-family:    inherit;
	touch-action:   manipulation;
	min-height:     40px;
	letter-spacing: .1px;
}

/* Primary — Accept All */
.qweb-banner__btn--accept {
	background:   var(--qweb-accent);
	color:        #fff;
	border-color: var(--qweb-accent);
	box-shadow:   0 2px 8px color-mix(in srgb, var(--qweb-accent) 40%, transparent);
}

.qweb-banner__btn--accept:hover {
	background:   var(--qweb-accent-hover);
	border-color: var(--qweb-accent-hover);
	box-shadow:   0 4px 12px color-mix(in srgb, var(--qweb-accent) 50%, transparent);
}

/* Secondary — Save Preferences */
.qweb-banner__btn--manage {
	background:   transparent;
	color:        var(--qweb-accent);
	border-color: var(--qweb-accent);
}

.qweb-banner__btn--manage:hover {
	background:   color-mix(in srgb, var(--qweb-accent) 8%, transparent);
	border-color: var(--qweb-accent-hover);
}

/* Tertiary — Essential Only */
.qweb-banner__btn--essential {
	background:   transparent;
	color:        #6b7280;
	border-color: #e5e7eb;
}

.qweb-banner__btn--essential:hover {
	background:   #f9fafb;
	border-color: #d1d5db;
	color:        #374151;
}

/* Minimal bar: text is wider */
.qweb-banner__inner:not(.qweb-banner__inner--full) .qweb-banner__text {
	font-size: 13.5px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 600px) {
	.qweb-banner--floating {
		bottom:        0;
		right:         0;
		left:          0;
		width:         100%;
	}

	.qweb-banner--floating .qweb-banner__card {
		border-radius: 16px 16px 0 0;
		box-shadow:    0 -2px 40px rgba(0,0,0,.14);
	}

	.qweb-banner__inner {
		padding: 14px 16px;
		gap:     10px;
	}

	.qweb-banner__inner--full {
		padding: 18px 16px 16px;
		gap:     12px;
	}

	.qweb-banner__text {
		flex:  none;
		width: 100%;
	}

	.qweb-banner__actions {
		flex-direction: column;
		align-items:    stretch;
		width:          100%;
		gap:            6px;
	}

	.qweb-banner__btn {
		width:      100%;
		text-align: center;
		min-height: 46px;
		font-size:  14px;
	}

	/* On mobile, Accept All goes first (most prominent) */
	.qweb-banner__btn--accept   { order: 1; }
	.qweb-banner__btn--manage   { order: 2; }
	.qweb-banner__btn--essential { order: 3; }
}

@media (max-width: 375px) {
	.qweb-banner__inner--full { padding: 14px 14px 14px; }
	.qweb-banner__title       { font-size: 14px; }
	.qweb-banner__text        { font-size: 12px; }
}