/* ═══════════════════════════════════════════════════════════════════════════
   COOKIE CONSENT
   Corner card, bottom-left. Becomes a bottom sheet under 640px.
   Buttons come from base/buttons.css — this file only positions them.
   ═══════════════════════════════════════════════════════════════════════════ */

.ce-cc {
	position: fixed;
	z-index: 1000002;           /* above the fixed header (1000000) and admin bar */
	left: 1.5rem;
	bottom: 1.5rem;
	width: min(400px, calc(100vw - 3rem));
	background: var(--ci-color-white);
	border-radius: 18px;
	padding: 1.5rem;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(30, 45, 61, 0.22);
	font-family: var(--ci-font-primary);
}

.ce-cc[hidden] { display: none; }

/* The brand diamond, same motif as the curriculum and SEND sections. */
.ce-cc::before {
	content: '';
	position: absolute;
	width: 150px;
	height: 150px;
	background: #f9f9f9;
	border-radius: 1.4rem;
	transform: rotate(45deg);
	top: -74px;
	right: -62px;
	pointer-events: none;
	z-index: 0;
}

.ce-cc > * { position: relative; z-index: 1; }

.ce-cc__title {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 0.35rem;
	color: #253d47;
}

.ce-cc__text {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #4a5a66;
	margin: 0;
}

.ce-cc__text a { color: #43606f; }

/* Accept spans the full width on its own row; Reject and Customise share the
   row beneath. Both lower labels have to stay on one line at the half width
   this gives them — a wrapped label leaves the two pills different heights. */
.ce-cc__actions {
	margin-top: 1.15rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.55rem;
}

.ce-cc__actions .ci-btn {
	width: 100%;
	font-size: 1rem;
	padding: calc(0.8rem - 2px) calc(1rem - 2px);
	white-space: nowrap;
}

.ce-cc__actions .ce-cc__accept {
	grid-column: 1 / -1;
	padding-left: calc(1.6rem - 2px);
	padding-right: calc(1.6rem - 2px);
}

/* ── Preferences ── */
.ce-cc__prefs {
	margin-top: 1.05rem;
	border-top: 1px solid #e6e6e6;
	padding-top: 0.9rem;
	max-height: min(44vh, 380px);
	overflow: auto;
}

.ce-cc__prefs[hidden] { display: none; }

.ce-cc__row {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 0.8rem 0;
	border-bottom: 1px solid #f0f0f0;
}

.ce-cc__row:last-child { border-bottom: 0; }
.ce-cc__row-body { flex: 1; min-width: 0; }

.ce-cc__row-name {
	font-size: 0.95rem;
	font-weight: 700;
	margin: 0 0 0.18rem;
	color: #253d47;
}

.ce-cc__row-desc {
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--ci-color-text-muted);
	margin: 0;
}

/* The privacy policy link lives here rather than on the front of the card.
   On the card it competed with the three buttons for the same glance; in here
   it sits with the detail it actually explains. */
.ce-cc__prefs-note {
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--ci-color-text-muted);
	margin: 0.9rem 0 0;
}

.ce-cc__prefs-note a { color: #43606f; }

.ce-cc__prefs-save {
	margin-top: 0.9rem;
}

.ce-cc__prefs-save .ci-btn {
	width: 100%;
	font-size: 1rem;
	padding: calc(0.8rem - 2px) calc(1.6rem - 2px);
}

/* ── Switch ── */
.ce-cc__sw { position: relative; flex: 0 0 auto; width: 44px; height: 25px; }

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

.ce-cc__sw-track {
	position: absolute;
	inset: 0;
	background: #cdd5da;
	border-radius: 9999px;
	transition: background-color 0.18s ease;
	pointer-events: none;
}

.ce-cc__sw-thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 19px;
	height: 19px;
	background: var(--ci-color-white);
	border-radius: 50%;
	transition: transform 0.18s ease;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.ce-cc__sw input:checked ~ .ce-cc__sw-track { background: var(--ci-color-innovate); }
.ce-cc__sw input:checked ~ .ce-cc__sw-thumb { transform: translateX(19px); }
.ce-cc__sw input:focus-visible ~ .ce-cc__sw-track {
	outline: 2px solid var(--ci-color-engage);
	outline-offset: 2px;
}

/* Locked = on but not changeable, and it has to look different from a switch
   the visitor controls. Carries :checked so it outranks the rule above. */
.ce-cc__sw--locked input:checked ~ .ce-cc__sw-track { background: #c3ccd2; }
.ce-cc__sw--locked .ce-cc__sw-thumb { background: #f2f5f6; }
.ce-cc__sw--locked input { cursor: not-allowed; }

@media (max-width: 640px) {
	.ce-cc {
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		border-radius: 20px 20px 0 0;
		padding: 1.4rem 1.25rem 1.5rem;
	}
	.ce-cc::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ce-cc__sw-track,
	.ce-cc__sw-thumb { transition: none; }
}