/**
 * Sign-up call to action and drawer.
 *
 * Everything is namespaced under .cbk-subs- and sets its own font stack and box
 * sizing, because this drops into a theme that ships both a Tailwind build and
 * a large hand-written stylesheet, and inherits unpredictably otherwise.
 */

.cbk-subs-cta,
.cbk-subs-cta *,
.cbk-subs-drawer,
.cbk-subs-drawer * {
	box-sizing: border-box;
}

:root {
	--cbk-subs-navy: #123a75;
	--cbk-subs-navy-dark: #0d2c59;
	--cbk-subs-navy-tint: #eaf0f8;
	--cbk-subs-gold: #cc9f26;
	--cbk-subs-focus: #f0a500;
	--cbk-subs-border: #d8dee7;
	--cbk-subs-input-border: #c4ccd8;
	--cbk-subs-surface: #f6f8fb;
	--cbk-subs-muted: #5b6577;
	--cbk-subs-text: #12192a;
	--cbk-subs-error: #b42318;
	--cbk-subs-success: #157347;
	--cbk-subs-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

	/* Width of the cookie settings button in the bottom left corner, plus a margin. */
	--cbk-subs-corner-gap: 190px;
}

/* -------------------------------------------------------------------------
   Call to action
   ------------------------------------------------------------------------- */

.cbk-subs-cta {
	margin: 32px 0;
	border: 1px solid var(--cbk-subs-border);
	border-left: 4px solid var(--cbk-subs-navy);
	border-radius: 8px;
	background: var(--cbk-subs-surface);
	font-family: inherit;
	color: var(--cbk-subs-text);
}

.cbk-subs-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
	padding: 22px 24px;
}

.cbk-subs-cta__body {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1 1 280px;
	min-width: 0;
}

.cbk-subs-cta__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--cbk-subs-navy-tint);
	color: var(--cbk-subs-navy);
}

.cbk-subs-cta__icon svg {
	width: 24px;
	height: 24px;
}

.cbk-subs-cta__heading {
	margin: 0 0 4px;
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cbk-subs-navy);
}

.cbk-subs-cta__desc {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--cbk-subs-muted);
}

/* Persistent variant printed after the site footer. */
.cbk-subs-cta--bar {
	margin: 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0;
	background: var(--cbk-subs-navy);
	color: #fff;
}

/*
 * Lines up with the footer's 1440px container on wide screens. Narrower than
 * that, the left edge is pushed in far enough to keep the copy clear of the
 * cookie settings button, which sits in the bottom left corner of every page
 * and so lands on this bar when the page is scrolled to the end.
 */
.cbk-subs-cta--bar .cbk-subs-cta__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 22px 50px 22px max(50px, calc(var(--cbk-subs-corner-gap) - max(0px, (100vw - 1440px) / 2)));
}

.cbk-subs-cta--bar .cbk-subs-cta__icon {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.cbk-subs-cta--bar .cbk-subs-cta__heading {
	color: #fff;
}

.cbk-subs-cta--bar .cbk-subs-cta__desc {
	color: rgba(255, 255, 255, 0.8);
}

.cbk-subs-cta--bar .cbk-subs-btn {
	background: #fff;
	color: var(--cbk-subs-navy);
}

.cbk-subs-cta--bar .cbk-subs-btn:hover,
.cbk-subs-cta--bar .cbk-subs-btn:focus-visible {
	background: var(--cbk-subs-gold);
	color: var(--cbk-subs-navy-dark);
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.cbk-subs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex: none;
	min-height: 46px;
	margin: 0;
	padding: 12px 22px;
	border: 0;
	border-radius: 6px;
	background: var(--cbk-subs-navy);
	box-shadow: none;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cbk-subs-btn:hover,
.cbk-subs-btn:focus-visible {
	background: var(--cbk-subs-navy-dark);
	color: #fff;
}

.cbk-subs-btn:focus-visible {
	outline: 3px solid var(--cbk-subs-focus);
	outline-offset: 2px;
}

.cbk-subs-btn[disabled] {
	opacity: 0.65;
	cursor: progress;
}

.cbk-subs-btn__arrow {
	flex: none;
	width: 18px;
	height: 18px;
	transition: transform 0.15s ease;
}

.cbk-subs-btn:hover .cbk-subs-btn__arrow {
	transform: translateX(3px);
}

.cbk-subs-btn__spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cbk-subs-spin 0.7s linear infinite;
}

.cbk-subs-btn.is-busy .cbk-subs-btn__spinner {
	display: block;
}

@keyframes cbk-subs-spin {
	to {
		transform: rotate(360deg);
	}
}

/* -------------------------------------------------------------------------
   Drawer
   ------------------------------------------------------------------------- */

.cbk-subs-drawer[hidden] {
	display: none;
}

.cbk-subs-drawer {
	position: fixed;
	inset: 0;
	/* Above the chat launcher and the cookie settings button, both of which sit
	   just under 2^31 and would otherwise float over the Subscribe button. */
	z-index: 2147483200;
	font-family: inherit;
	color: var(--cbk-subs-text);
}

.cbk-subs-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(9, 17, 33, 0.55);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.cbk-subs-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	/* A working panel rather than a narrow form: about four fifths of the
	   screen, never under 640px and never over 1320px. */
	width: min(100%, clamp(640px, 78vw, 1320px));
	background: #fff;
	box-shadow: -18px 0 48px rgba(9, 17, 33, 0.22);
	transform: translateX(100%);
	transition: transform 0.28s var(--cbk-subs-ease);
	outline: 0;
	container: cbk-subs-panel / inline-size;
}

.cbk-subs-drawer.is-open .cbk-subs-drawer__overlay {
	opacity: 1;
}

.cbk-subs-drawer.is-open .cbk-subs-drawer__panel {
	transform: none;
}

.cbk-subs-drawer__head {
	flex: none;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px 20px 22px 28px;
	border-bottom: 3px solid var(--cbk-subs-gold);
	background: var(--cbk-subs-navy);
	color: #fff;
}

.cbk-subs-drawer__titles {
	flex: 1 1 auto;
	min-width: 0;
}

.cbk-subs-drawer__title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
}

.cbk-subs-drawer__intro {
	margin: 6px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

.cbk-subs-drawer__close {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -4px 0 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.cbk-subs-drawer__close svg {
	width: 18px;
	height: 18px;
}

.cbk-subs-drawer__close:hover {
	background: rgba(255, 255, 255, 0.14);
}

.cbk-subs-drawer__close:focus-visible {
	outline: 3px solid var(--cbk-subs-focus);
	outline-offset: 2px;
}

/* The form fills the space under the header: a scrolling body and a footer
   that stays put, so Subscribe is always one tap away. */
.cbk-subs-form {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	margin: 0;
}

.cbk-subs-form[hidden] {
	display: none;
}

.cbk-subs-drawer__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 24px 28px 28px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.cbk-subs-drawer__foot {
	flex: none;
	padding: 14px 28px;
	padding-bottom: max(14px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--cbk-subs-border);
	background: #fff;
	box-shadow: 0 -8px 24px rgba(9, 17, 33, 0.06);
}

/* -------------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------------- */

.cbk-subs-section {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.cbk-subs-section + .cbk-subs-section {
	margin-top: 30px;
}

.cbk-subs-section__title {
	display: flex;
	align-items: center;
	gap: 10px;
	float: none;
	width: 100%;
	margin: 0 0 14px;
	padding: 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	color: var(--cbk-subs-text);
}

.cbk-subs-section__step {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--cbk-subs-navy);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.cbk-subs-req {
	color: var(--cbk-subs-error);
}

.cbk-subs-optional {
	font-weight: 400;
	color: var(--cbk-subs-muted);
}

/* -------------------------------------------------------------------------
   Fields
   ------------------------------------------------------------------------- */

.cbk-subs-field {
	margin: 0 0 14px;
}

.cbk-subs-field label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cbk-subs-text);
}

.cbk-subs-field input[type="email"],
.cbk-subs-field input[type="text"],
.cbk-subs-search input[type="search"] {
	display: block;
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--cbk-subs-input-border);
	border-radius: 6px;
	background: #fff;
	box-shadow: none;
	font-family: inherit;
	/* 16px stops iOS zooming the page when the field takes focus. */
	font-size: 16px;
	line-height: 1.4;
	color: var(--cbk-subs-text);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.cbk-subs-field input::placeholder,
.cbk-subs-search input[type="search"]::placeholder {
	color: #8a93a3;
	opacity: 1;
}

.cbk-subs-field input:focus,
.cbk-subs-search input[type="search"]:focus {
	border-color: var(--cbk-subs-navy);
	background: #fff;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(18, 58, 117, 0.18);
}

.cbk-subs-field.has-error input {
	border-color: var(--cbk-subs-error);
	background: #fef6f5;
	box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

.cbk-subs-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.cbk-subs-field-row .cbk-subs-field {
	margin-bottom: 0;
}

/* Kept in the accessibility tree's blind spot but not display:none, which some
   bots treat as a signal to skip the field. */
.cbk-subs-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   Topics
   ------------------------------------------------------------------------- */

.cbk-subs-search {
	position: relative;
	margin: 0 0 12px;
}

.cbk-subs-search__icon {
	position: absolute;
	top: 50%;
	left: 14px;
	width: 18px;
	height: 18px;
	color: var(--cbk-subs-muted);
	transform: translateY(-50%);
	pointer-events: none;
}

.cbk-subs-search input[type="search"] {
	height: 44px;
	padding-left: 42px;
	background: var(--cbk-subs-surface);
}

.cbk-subs-search__empty {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cbk-subs-muted);
}

.cbk-subs-search__empty:not(:empty) {
	margin-bottom: 12px;
	padding: 16px;
	border: 1px dashed var(--cbk-subs-border);
	border-radius: 8px;
	text-align: center;
}

.cbk-subs-groups {
	display: grid;
	gap: 10px;
}

.cbk-subs-group {
	border: 1px solid var(--cbk-subs-border);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.cbk-subs-group.is-empty {
	display: none;
}

.cbk-subs-topics.has-error .cbk-subs-group {
	border-color: rgba(180, 35, 24, 0.55);
}

.cbk-subs-group__head {
	display: flex;
	align-items: center;
	background: var(--cbk-subs-surface);
}

.cbk-subs-group__toggle {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 13px 8px 13px 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-align: left;
	text-transform: uppercase;
	color: var(--cbk-subs-navy);
	cursor: pointer;
}

.cbk-subs-group__toggle:hover {
	background: #edf1f7;
}

.cbk-subs-group__toggle:focus-visible {
	outline: 3px solid var(--cbk-subs-focus);
	outline-offset: -3px;
}

/* Points right when closed, down when open. */
.cbk-subs-group__chevron {
	flex: none;
	width: 8px;
	height: 8px;
	margin: 0 3px 0 1px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
}

.cbk-subs-group__toggle[aria-expanded="true"] .cbk-subs-group__chevron {
	transform: rotate(45deg);
}

.cbk-subs-group__count {
	flex: none;
	padding: 2px 9px;
	border: 1px solid var(--cbk-subs-border);
	border-radius: 999px;
	background: #fff;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--cbk-subs-muted);
	white-space: nowrap;
}

.cbk-subs-group__count.has-selection {
	border-color: var(--cbk-subs-navy);
	background: var(--cbk-subs-navy);
	color: #fff;
}

.cbk-subs-group__all {
	flex: none;
	margin: 0 8px 0 0;
	padding: 7px 10px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	box-shadow: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-transform: none;
	color: var(--cbk-subs-navy);
	cursor: pointer;
}

.cbk-subs-group__all:hover {
	background: #e3e9f2;
}

.cbk-subs-group__all:focus-visible {
	outline: 3px solid var(--cbk-subs-focus);
	outline-offset: 0;
}

.cbk-subs-group__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 2px 12px;
	padding: 8px 10px 10px;
	border-top: 1px solid var(--cbk-subs-border);
}

.cbk-subs-group__items[hidden] {
	display: none;
}

.cbk-subs-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 8px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--cbk-subs-text);
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.cbk-subs-check:hover {
	background: var(--cbk-subs-surface);
}

.cbk-subs-check:has(input:checked) {
	background: var(--cbk-subs-navy-tint);
}

.cbk-subs-check.is-filtered-out {
	display: none;
}

.cbk-subs-check input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--cbk-subs-navy);
	cursor: pointer;
}

.cbk-subs-check mark {
	padding: 0 1px;
	border-radius: 2px;
	background: #fbe3a1;
	color: inherit;
}

.cbk-subs-check--consent {
	margin-top: 14px;
	padding: 14px 16px;
	border: 1px solid var(--cbk-subs-border);
	border-radius: 8px;
	background: var(--cbk-subs-surface);
}

.cbk-subs-check--consent:has(input:checked) {
	border-color: rgba(18, 58, 117, 0.35);
	background: var(--cbk-subs-navy-tint);
}

.cbk-subs-check--consent.has-error {
	border-color: var(--cbk-subs-error);
	background: #fef6f5;
}

/* -------------------------------------------------------------------------
   Privacy accordion
   ------------------------------------------------------------------------- */

.cbk-subs-accordion {
	border: 1px solid var(--cbk-subs-border);
	border-radius: 8px;
	overflow: hidden;
}

.cbk-subs-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 13px 16px;
	border: 0;
	border-radius: 0;
	background: var(--cbk-subs-surface);
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
	color: var(--cbk-subs-text);
	cursor: pointer;
}

.cbk-subs-accordion__trigger:hover {
	background: #edf1f7;
}

.cbk-subs-accordion__trigger:focus-visible {
	outline: 3px solid var(--cbk-subs-focus);
	outline-offset: -3px;
}

/* Drawn in CSS so the plus turns into a minus without a second asset. */
.cbk-subs-accordion__sign {
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
}

.cbk-subs-accordion__sign::before,
.cbk-subs-accordion__sign::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	background: var(--cbk-subs-navy);
	transform: translateY(-50%);
	transition: transform 0.15s ease;
}

.cbk-subs-accordion__sign::after {
	transform: translateY(-50%) rotate(90deg);
}

.cbk-subs-accordion__trigger[aria-expanded="true"] .cbk-subs-accordion__sign::after {
	transform: translateY(-50%) rotate(0deg);
}

.cbk-subs-accordion__panel {
	padding: 4px 16px 14px;
	border-top: 1px solid var(--cbk-subs-border);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--cbk-subs-muted);
}

.cbk-subs-accordion__panel[hidden] {
	display: none;
}

.cbk-subs-accordion__panel h4 {
	margin: 14px 0 4px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--cbk-subs-text);
}

.cbk-subs-accordion__panel p {
	margin: 0 0 8px;
}

.cbk-subs-accordion__panel a {
	color: var(--cbk-subs-navy);
}

/* -------------------------------------------------------------------------
   Footer: messages and actions
   ------------------------------------------------------------------------- */

.cbk-subs-form__message {
	font-size: 14px;
	line-height: 1.5;
}

.cbk-subs-form__message:empty {
	display: none;
}

.cbk-subs-form__message.is-error {
	margin: 0 0 12px;
	padding: 10px 14px;
	border: 1px solid #f3c2bd;
	border-radius: 6px;
	background: #fef6f5;
	color: #8f1d14;
}

.cbk-subs-form__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.cbk-subs-form__summary {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--cbk-subs-muted);
}

.cbk-subs-form.has-topics .cbk-subs-form__summary {
	font-weight: 600;
	color: var(--cbk-subs-navy);
}

.cbk-subs-btn--submit {
	min-width: 170px;
}

/* -------------------------------------------------------------------------
   Confirmation
   ------------------------------------------------------------------------- */

.cbk-subs-done {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 32px;
	text-align: center;
}

.cbk-subs-done[hidden] {
	display: none;
}

.cbk-subs-done__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: #e6f4ec;
	color: var(--cbk-subs-success);
}

.cbk-subs-done__icon svg {
	width: 34px;
	height: 34px;
}

.cbk-subs-done__title {
	margin: 0 0 8px;
	padding: 0;
	font-family: inherit;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	color: var(--cbk-subs-text);
	outline: 0;
}

.cbk-subs-done__message {
	max-width: 400px;
	margin: 0 0 26px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--cbk-subs-muted);
}

/* -------------------------------------------------------------------------
   Wide drawer
   ------------------------------------------------------------------------- */

/* Measured against the drawer's own width rather than the screen's, so the
   layout follows whatever width the panel ends up at. */
@container cbk-subs-panel (min-width: 820px) {
	.cbk-subs-drawer__head {
		padding: 28px 28px 26px 40px;
	}

	.cbk-subs-drawer__title {
		font-size: 26px;
	}

	.cbk-subs-drawer__intro {
		font-size: 15px;
	}

	.cbk-subs-drawer__body {
		padding: 30px 40px 36px;
	}

	.cbk-subs-drawer__foot {
		padding-right: 40px;
		padding-left: 40px;
	}

	/* Email, name and surname on one row. */
	.cbk-subs-details {
		display: grid;
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
		gap: 16px;
	}

	.cbk-subs-details .cbk-subs-field-row {
		display: contents;
	}

	.cbk-subs-details .cbk-subs-field {
		margin: 0;
	}

	.cbk-subs-search {
		max-width: 560px;
	}

	/* Short groups side by side, long ones across the full width. */
	.cbk-subs-groups {
		grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
		align-items: start;
		gap: 16px;
	}

	.cbk-subs-group--long {
		grid-column: 1 / -1;
	}

	.cbk-subs-group__items {
		grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	}

	.cbk-subs-group--long .cbk-subs-group__items {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	}

	/* The privacy note and the consent box side by side. */
	.cbk-subs-confirm {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: 16px;
	}

	.cbk-subs-confirm .cbk-subs-check--consent {
		margin-top: 0;
	}
}

/* -------------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------------- */

/* Tablets: the chat and back-to-top buttons in the bottom right corner reach
   down over the bar here, so the content is kept clear of that corner too. */
@media (min-width: 641px) and (max-width: 1100px) {
	.cbk-subs-cta--bar .cbk-subs-cta__inner {
		gap: 16px 20px;
		padding-right: 160px;
	}

	.cbk-subs-cta--bar .cbk-subs-cta__body {
		flex-basis: 260px;
	}
}

@media (max-width: 640px) {
	.cbk-subs-cta__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 18px;
	}

	/* In a column the 320px basis above would become a minimum height and
	   leave a block of empty space under the copy. */
	.cbk-subs-cta__body {
		flex: none;
		align-items: flex-start;
		gap: 14px;
	}

	.cbk-subs-cta__icon {
		width: 40px;
		height: 40px;
	}

	.cbk-subs-cta__icon svg {
		width: 20px;
		height: 20px;
	}

	.cbk-subs-cta--panel .cbk-subs-btn {
		width: 100%;
	}

	/*
	 * The bar is the last thing on the page, which is where the cookie, chat
	 * and back-to-top buttons float. The button keeps to the text column, clear
	 * of the right-hand stack, and the bottom padding lifts it above the row
	 * of buttons when the page is scrolled to the end.
	 */
	.cbk-subs-cta--bar .cbk-subs-cta__inner {
		align-items: flex-start;
		padding: 24px 20px 88px;
	}

	.cbk-subs-cta--bar .cbk-subs-btn {
		margin-left: 54px;
	}

	.cbk-subs-drawer__head {
		padding: 18px 14px 16px 20px;
	}

	.cbk-subs-drawer__title {
		font-size: 19px;
	}

	.cbk-subs-drawer__intro {
		font-size: 13.5px;
	}

	.cbk-subs-drawer__body {
		padding: 20px;
	}

	.cbk-subs-drawer__foot {
		padding: 12px 20px;
		padding-bottom: max(12px, env(safe-area-inset-bottom));
	}

	.cbk-subs-group__items {
		grid-template-columns: 1fr;
	}

	.cbk-subs-btn--submit {
		flex: 0 1 200px;
		min-width: 0;
	}
}

@media (max-width: 420px) {
	.cbk-subs-field-row {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cbk-subs-drawer__overlay,
	.cbk-subs-drawer__panel,
	.cbk-subs-btn__arrow {
		transition: none;
	}

	.cbk-subs-btn__spinner {
		animation-duration: 2s;
	}
}

/* Stops the page behind the drawer scrolling on iOS. */
body.cbk-subs-locked {
	overflow: hidden;
}