/*
 * DFS Motion — Popups widget. Mode 1 "Cookie Policy".
 *
 * @decision D288 — 1:1 translation of okc.media's cookie consent
 * (cookie-consent.css, pulled 2026-08-15): fixed bottom-right glass card,
 * 260ms rise entrance, white OK pill inverting to accent on hover,
 * underlined learn-more link, column layout under 640px. Every number is
 * theirs. The type inherits the host page's font by default — a consent
 * banner should wear the site's own face; on DFS Motion pages that carry
 * Involve (the Forms fonts handle) the stack picks it up first, matching
 * the reference exactly. 5.182.1: that handle is now a dependency of this
 * sheet, so the reference face ships with the widget (font-audit).
 *
 * VERIFICATION: fixture-rendered hostile; live-scored against the
 * reference across the ladder before any cut.
 */

.dfs-popups-verification {
	--dfs-popups-verification-accent: #f07077;
	--dfs-popups-verification-focus: rgba( 255, 255, 255, 0.85 );
	--dfs-popups-verification-duration: 360ms;
	--dfs-popups-verification-ease: cubic-bezier( 0.2, 0.7, 0.2, 1 );
	--dfs-popups-verification-font: Involve, ui-sans-serif, system-ui, sans-serif;
}

.dfs-popups-verification__banner {
	position: fixed;
	right: max( 20px, env( safe-area-inset-right ) );
	bottom: max( 20px, env( safe-area-inset-bottom ) );
	z-index: 1200;
	display: flex;
	align-items: center;
	gap: 16px;
	width: min( 520px, calc( 100vw - 40px ) );
	padding: 16px 16px 16px 20px;
	border-radius: 10px;
	background: #00000060;
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
	color: #fff;
	box-shadow: 0 24px 70px rgba( 0, 0, 0, 0.28 );
	font-family: var( --dfs-popups-verification-font );
	font-size: clamp( 0.82rem, 1.2vw, 0.9rem );
	line-height: 1.56;
	opacity: 0;
	transform: translateY( 18px );
	transition:
		opacity 260ms var( --dfs-popups-verification-ease ),
		transform 260ms var( --dfs-popups-verification-ease );
}

/* Server-rendered markup starts unrevealed; JS removes it when consent is
 * already stored, or reveals it with the entrance when it is not. */
.dfs-popups-verification__banner[hidden] { display: none; }

.dfs-popups-verification__banner.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

.dfs-popups-verification__banner.is-hiding {
	opacity: 0;
	transform: translateY( 18px );
}

.dfs-popups-verification__text {
	flex: 1 1 auto;
	max-width: 42ch;
	margin: 0;
	font: inherit;
}

.dfs-popups-verification__link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.dfs-popups-verification__link:focus-visible,
.dfs-popups-verification__button:focus-visible {
	outline: 2px solid var( --dfs-popups-verification-focus );
	outline-offset: 3px;
}

.dfs-popups-verification__button {
	flex: 0 0 auto;
	min-width: 86px;
	height: 36px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #222;
	font: inherit;
	font-size: 0.86em;
	font-weight: 500;
	cursor: pointer;
	transition:
		background-color var( --dfs-popups-verification-duration ) var( --dfs-popups-verification-ease ),
		color var( --dfs-popups-verification-duration ) var( --dfs-popups-verification-ease ),
		transform var( --dfs-popups-verification-duration ) var( --dfs-popups-verification-ease );
}

.dfs-popups-verification__button:hover {
	background: var( --dfs-popups-verification-accent );
	color: #fff;
}

.dfs-popups-verification__button:active {
	transform: translateY( 1px );
}

/*
 * KIT-SKIN REFUSAL — the same collision the Forms widget met on its first
 * install: Hello's kit styles buttons/links at (0,1,1). The banner's pill
 * and underline are the design; pin what the kit fights over, reading our
 * own values so future controls override through them.
 */
/*
 * BACKGROUND IS DELIBERATELY NOT IN THIS BLOCK — the first version carried
 * `background: #fff` here, and this selector's (0,2,1) beat the widget's
 * own `:hover` accent at (0,2,0): the OK button never hovered for anyone,
 * caught by the ladder (ref 34 recorded hover colours, ours 1). D153's
 * lesson, relearned on this widget's first score.
 */
.dfs-popups-verification button.dfs-popups-verification__button {
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

.dfs-popups-verification a.dfs-popups-verification__link {
	color: inherit !important;
	text-decoration: underline !important;
}

@media ( max-width: 640px ) {
	.dfs-popups-verification__banner {
		right: 16px;
		bottom: max( 16px, env( safe-area-inset-bottom ) );
		left: 16px;
		width: auto;
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 18px;
	}

	.dfs-popups-verification__text { max-width: none; }

	.dfs-popups-verification__button { width: auto; }
}

/*
 * MODE 1 - VERIFICATION POPUP (Figma frame 118:3644 "Entrance Popup").
 * Every rule below is scoped to .dfs-popups-verification--verification so
 * Mode 2 (cookie-policy) renders exactly as before. The root is the fixed
 * scrim; logo + card sit centred over it as one group. No media query:
 * the card is width + max-width:100%, the scrim scrolls when a short
 * screen cannot hold the group (margin:auto keeps it centred otherwise).
 */
.dfs-popups-verification.dfs-popups-verification--verification {
	position: fixed;
	inset: 0;
	z-index: 100000;
	box-sizing: border-box;
	display: flex;
	overflow-y: auto;
	padding: 20px;
	background-color: #000000BA;
}

.dfs-popups-verification.dfs-popups-verification--verification[hidden] { display: none; }

/* The canvas keeps the page editable: in flow, no scrim lock, no scroll. */
.dfs-popups-verification.dfs-popups-verification--verification.is-editing {
	position: relative;
	inset: auto;
	z-index: auto;
	overflow: visible;
}

.dfs-popups-verification--verification .dfs-popups-verification__stack {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	margin: auto;
}

.dfs-popups-verification--verification .dfs-popups-verification__logo {
	margin: 0 0 22px;
	max-width: 100%;
	color: #FFFFFF;
	font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
	font-size: 48px;
	font-weight: 600;
	line-height: 50px;
	letter-spacing: -1px;
	text-align: center;
	white-space: nowrap;
}

.dfs-popups-verification--verification .dfs-popups-verification__card {
	box-sizing: border-box;
	width: 512px;
	max-width: 100%;
	padding: 42px 27px 24px 39px;
	border-radius: 30px;
	background-color: #FFFFFF;
	box-shadow: 0 4px 4px 0 rgba( 0, 0, 0, 0.25 );
	outline: 0;
}

.dfs-popups-verification--verification h2.dfs-popups-verification__title {
	margin: 0 0 13px;
	color: #0F172A;
	font-family: "Anek Telugu", ui-sans-serif, system-ui, sans-serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 32px;
	letter-spacing: -0.8px;
	text-align: left;
}

.dfs-popups-verification--verification p.dfs-popups-verification__description {
	margin: 0 0 18.5px;
	color: #475569;
	font-family: "Anek Telugu", ui-sans-serif, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0;
}

.dfs-popups-verification--verification .dfs-popups-verification__checks {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 16px;
}

.dfs-popups-verification--verification label.dfs-popups-verification__check {
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	background-color: #FFFFFF;
	cursor: pointer;
}

.dfs-popups-verification--verification span.dfs-popups-verification__check-text {
	flex: 1 1 auto;
	min-width: 0;
	color: #1E293B;
	font-family: Roboto, ui-sans-serif, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0;
}

.dfs-popups-verification--verification span.dfs-popups-verification__check-text strong { font-weight: 600; }

.dfs-popups-verification--verification input.dfs-popups-verification__box {
	position: relative;
	flex: none;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	padding: 0;
	border: 1px solid #767676;
	border-radius: 2px;
	background-color: #FFFFFF;
	-webkit-appearance: none;
	appearance: none;
	font-size: 16px; /* the tick below is drawn in em, so it scales with Checkbox Size */
	cursor: pointer;
}

.dfs-popups-verification--verification input.dfs-popups-verification__box:checked {
	border-color: #143245;
	background-color: #143245;
}

.dfs-popups-verification--verification input.dfs-popups-verification__box:checked::after {
	content: "";
	position: absolute;
	left: 0.25em;
	top: 0;
	width: 0.25em;
	height: 0.5em;
	border: solid #FFFFFF;
	border-width: 0 0.125em 0.125em 0;
	transform: rotate( 45deg );
}

.dfs-popups-verification--verification input.dfs-popups-verification__box:focus-visible {
	outline: 2px solid #143245;
	outline-offset: 2px;
}

.dfs-popups-verification--verification button.dfs-popups-verification__enter {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: 0 0 24px;
	padding: 12px 24px;
	border: 0;
	border-radius: 9999px;
	background-color: #143245;
	box-shadow: none;
	color: #FFFFFF;
	font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.dfs-popups-verification--verification button.dfs-popups-verification__enter:hover:not( :disabled ) {
	background-color: #0E2433;
	color: #FFFFFF;
}

.dfs-popups-verification--verification button.dfs-popups-verification__enter:disabled {
	background-color: #CBD5E1;
	color: #64748B;
	cursor: not-allowed;
}

.dfs-popups-verification--verification button.dfs-popups-verification__enter:focus-visible {
	outline: 2px solid #143245;
	outline-offset: 2px;
}

.dfs-popups-verification--verification svg.dfs-popups-verification__enter-icon {
	flex: none;
	width: 16px;
	height: 16px;
}

.dfs-popups-verification--verification p.dfs-popups-verification__print {
	margin: 0;
	color: #64748B;
	font-family: "Anek Telugu", ui-sans-serif, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 17.88px;
	letter-spacing: 0;
}

.dfs-popups-verification--verification a.dfs-popups-verification__print-link {
	color: #143245;
	font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0;
	text-decoration: none;
}